@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <!-- Breadcrumb -->
    <div class="page-breadcrumb d-flex flex-column flex-sm-row align-items-center justify-content-between mb-3 p-3 bg-primary text-white rounded shadow-sm">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.dashboard') }}" class="text-white">
                        <i class="bx bx-home-alt"></i>
                    </a>
                </li>
                <li class="breadcrumb-item active text-white" aria-current="page">All Schools</li>
            </ol>
        </nav>
        @if (Auth::user()->can('school.add'))
        <a href="{{ route('add.school.form') }}" class="btn btn-light d-flex align-items-center shadow-sm">
            <i class="bx bx-plus-circle me-2"></i> Add School
        </a>
        @endif
    </div>
    <!-- End Breadcrumb -->

    <!-- Card Container -->
    @if (Auth::user()->can('schools.view'))
    <div class="card shadow border-0 rounded-lg">
        <div class="card-body p-4">
            <div class="table-responsive">
                <table id="example" class="table table-hover table-striped table-bordered align-middle">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>School Name</th>
                            <th>Address</th>
                            <th>Contact</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($schools as $key => $school)
                        <tr>
                            <td class="fw-bold text-center">{{ $key + 1 }}</td>
                            <td>{{ ucfirst($school->school_name) }}</td>
                            <td class="text-center">{{ $school->address ?? 'N/A' }}</td>
                             <td class="text-center">{{ $school->school_contact ?? 'N/A' }}</td>
                            <td class="text-center">
                                <div class="dropdown">
                                    <a href="#" class="btn btn-light btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                                        <i class="bx bx-dots-vertical-rounded"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        @if (Auth::user()->can('school.edit'))
                                            <li>
                                                <a class="dropdown-item" href="{{ route('edit.school', ['id_school' => $school->id_school]) }}">
                                                    <i class="bx bx-edit-alt me-2"></i> Edit
                                                </a>
                                            </li>
                                        @endif

                                        @if (Auth::user()->can('school.delete'))
                                            <li>
                                                <a class="dropdown-item text-danger delete-school" href="{{ route('delete.school', $school->id_school) }}">
                                                    <i class="bx bx-trash me-2"></i> Delete
                                                </a>
                                            </li>
                                        @endif
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
</div>

<!-- SweetAlert2 for Deletion -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>

<script>
    $(document).ready(function () {
        // Delete School
        $('.delete-school').click(function (e) {
            e.preventDefault();  // Prevent default action of the link
            var deleteUrl = $(this).attr('href');  // Get the URL of the link

            Swal.fire({
                title: "Are you sure?",
                text: "This school will be permanently deleted!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = deleteUrl;
                }
            });
        });
    });
</script>

@endsection

<!-- Add custom styles -->
<style>
    /* Table Customizations */
    .table th, .table td {
        padding: 16px;
        font-size: 1rem;
    }

    .table tbody tr:hover {
        background-color: #f4f6f9;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .table th {
        background-color: #007bff;
        color: white;
    }

    .page-breadcrumb .breadcrumb-item a {
        color: #ffffff;
    }

    .page-breadcrumb .breadcrumb-item.active {
        color: #d1d1d1;
    }

    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

    .dropdown-menu {
        min-width: 160px;
    }

    .card {
        border-radius: 1rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    @media (max-width: 576px) {
        .table thead {
            font-size: 0.9rem;
        }
        .btn-primary {
            font-size: 0.85rem;
            padding: 8px 16px;
        }
    }
</style>