@extends('layouts.app')
@section('content')

<style>
    :root {
        --ura-primary: #17479E;
    }

    .badge-counter {
        border-radius: 50% !important;
        width: 35px;
        height: 35px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 12px !important;
        box-shadow: 0 2px 8px rgba(23, 71, 158, 0.3);
    }

    .table {
        border-collapse: collapse;
        border-spacing: 0;
        background: white;
        width: 100%;
        margin: 0;
        border: 1px solid #dee2e6;
    }

    .table thead th {
        background: #CEEDF5 !important;
        color: #17479E !important;
        font-weight: 600;
        border: 1px solid #dee2e6 !important;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
        transition: all 0.3s ease;
    }

    .table thead th:hover {
        background: #B8E2F0 !important;
    }

    .table tbody tr {
        transition: all 0.2s ease;
        background: white;
    }

    .table tbody tr:nth-child(even) {
        background: #f8f9fa;
    }

    .table tbody tr:hover {
        background: #e3f2fd !important;
    }

    .table tbody td {
        padding: 0.75rem 1rem !important;
        vertical-align: middle;
        border: 1px solid #dee2e6;
        font-size: 0.875rem;
        color: #495057;
    }

    .table-responsive {
        overflow-x: auto;
        margin-bottom: 1.5rem;
    }

    /* Modern Modal Styles */
    .modal-content {
        border: none !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 40px rgba(23, 71, 158, 0.25) !important;
        overflow: hidden;
    }

    .modal-header {
        background: linear-gradient(135deg, #17479E 0%, #4facfe 100%) !important;
        color: white !important;
        border-bottom: none !important;
        padding: 1.5rem 2rem !important;
    }

    .modal-title {
        color: white !important;
        font-weight: 600 !important;
        font-size: 1.25rem !important;
    }

    .modal-header .btn-close {
        filter: brightness(0) invert(1);
    }

    .modal-body {
        padding: 2rem !important;
    }

    .modal-body .form-label {
        color: var(--ura-primary);
        font-weight: 600;
    }

    .modal-body .form-control {
        border: 2px solid rgba(23, 71, 158, 0.1);
        border-radius: 8px;
        padding: 0.75rem 1rem;
    }

    .modal-body .form-control:focus {
        border-color: var(--ura-primary);
        box-shadow: 0 0 0 0.2rem rgba(23, 71, 158, 0.25);
    }

    .modal-footer {
        padding: 1.5rem 2rem !important;
        border-top: 1px solid rgba(23, 71, 158, 0.1) !important;
        background: linear-gradient(135deg, rgba(23, 71, 158, 0.03) 0%, rgba(0, 188, 212, 0.03) 100%);
    }

    .modern-breadcrumb {
        background: var(--ura-gradient-light);
        border-radius: 12px;
        padding: 1rem 1.5rem;
        margin-bottom: 2rem;
        border: 1px solid rgba(23, 71, 158, 0.1);
    }

    .breadcrumb-title {
        color: var(--ura-primary);
        font-weight: 600;
        font-size: 1.1rem;
        margin: 0;
    }

    .breadcrumb-nav {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .breadcrumb-nav a {
        color: var(--ura-primary);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        transition: all 0.3s ease;
    }

    .breadcrumb-nav a:hover {
        color: var(--ura-accent);
    }
</style>

<div class="container-fluid">
    <!-- Modern Breadcrumb -->
    <div class="modern-breadcrumb d-flex flex-wrap align-items-center justify-content-between">
        <h6 class="breadcrumb-title">
            <i class="bx bx-id-card me-2"></i>
            Ranks Management
        </h6>
        <ul class="breadcrumb-nav">
            <li>
                <a href="{{ route('dashboard') }}">
                    <i class="bx bx-home-alt"></i>
                    Dashboard
                </a>
            </li>
            <li><span class="text-muted">•</span></li>
            <li class="text-muted">Ranks</li>
        </ul>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card shadow-sm basic-data-table">
                <div class="card-header d-flex justify-content-between align-items-center" style="background: linear-gradient(135deg, rgba(23, 71, 158, 0.1) 0%, rgba(0, 188, 212, 0.1) 100%);">
                    <h6 class="mb-0" style="color: #17479E;"><i class="bx bx-list-ul me-2"></i>Ranks List</h6>
                    <button class="btn btn-sm" data-bs-toggle="modal" data-bs-target="#addRankModal" style="background: linear-gradient(135deg, #17479E 0%, #00BCD4 100%); color: white;">
                        <i class="fas fa-plus-circle me-1"></i> Add Rank
                    </button>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table modern-table mb-0 w-100">
                <thead>
                    <tr>
                        <th width="60" class="text-center border-0">
                            <div class="d-flex align-items-center justify-content-center">
                                <i class="fas fa-hashtag me-1"></i>
                                <span class="fw-bold">#</span>
                            </div>
                        </th>
                        <th class="border-0">
                            <div class="d-flex align-items-center">
                                <i class="bx bx-id-card me-2"></i>
                                <span class="fw-bold">Rank Name</span>
                            </div>
                        </th>
                        <th width="150" class="text-center border-0">
                            <div class="d-flex align-items-center justify-content-center">
                                <i class="bx bx-cog me-2"></i>
                                <span class="fw-bold">Actions</span>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($ranks as $rank)
                        <tr id="rank-{{ $rank->id }}">
                            <td class="text-center align-middle">
                                <div class="badge badge-counter" style="background: linear-gradient(135deg, #17479E 0%, #4facfe 100%); color: white; font-weight: bold;">
                                    {{ $loop->iteration }}
                                </div>
                            </td>
                            <td class="align-middle"><strong>{{ $rank->name }}</strong></td>
                            <td class="align-middle text-center">
                                <button class="btn btn-sm" data-bs-toggle="modal" data-bs-target="#editRankModal" onclick="editRank({{ $rank->id }})" style="background: linear-gradient(135deg, #00BCD4 0%, #4DD0E1 100%); color: white; border: none;">
                                    <i class="bx bx-edit"></i>
                                </button>
                                <button class="btn btn-sm ms-1" onclick="deleteRank({{ $rank->id }})" style="background: linear-gradient(135deg, #f04141 0%, #ff5252 100%); color: white; border: none;">
                                    <i class="bx bx-trash"></i>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="card-footer bg-light">
            <div class="d-flex justify-content-center">
                {{ $ranks->links() }}
            </div>
        </div>
    </div>
</div>

<!-- Modal for adding new rank -->
<div class="modal fade" id="addRankModal" tabindex="-1" aria-labelledby="addRankModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="addRankForm" action="{{ route('ranks.store') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title text-primary" id="addRankModalLabel">Add Rank</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="rankName" class="form-label">Rank Name</label>
                        <input type="text" class="form-control" id="rankName" name="name" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary btn-sm">Save Rank</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal for editing existing rank -->
<div class="modal fade" id="editRankModal" tabindex="-1" aria-labelledby="editRankModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="editRankForm" action="" method="POST">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title text-primary" id="editRankModalLabel">Edit Rank</h6>
                    <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="editRankName" class="form-label">Rank Name</label>
                        <input type="text" class="form-control" id="editRankName" name="name" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    // Function to populate the edit modal with the rank data
    function editRank(id) {
        fetch(`/ranks/${id}/edit`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('editRankName').value = data.name;
                document.getElementById('editRankForm').action = `/ranks/${id}`;
            });
    }

    // Function to delete a rank
    function deleteRank(id) {
        Swal.fire({
            //title: 'Are you sure?',
            text: 'This will permanently delete the rank.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(`/ranks/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById(`rank-${id}`).remove();
                        Swal.fire('', data.message, 'success');
                    }
                });
            }
        });
    }
</script>

@if(session('success'))
    <script>
        Swal.fire({
            //title: 'Success!',
            text: '{{ session('success') }}',
            icon: 'success',
            confirmButtonText: 'Okay'
        });
    </script>
@endif

@endsection