
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Central Admin - @yield('title')</title>

    <!-- Custom fonts for this template-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <!-- Custom styles for this template-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/4.1.4/css/sb-admin-2.min.css" rel="stylesheet">
    @yield('styles')
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        .table-bordered th, .table-bordered td { border: 1px solid #b7b9cc !important; }
        .table thead th { border-bottom: 2px solid #b7b9cc !important; }
        
        /* Match tenant UI font sizes */
        form .form-control, form label, form select, form .btn {
            font-size: 0.85rem;
        }
        .table {
            font-size: 0.85rem;
        }
        .h3, h1 {
            font-size: 1.5rem;
        }

        /* Darken background for better contrast with cards */
        #content-wrapper {
            background-color: #f0f2f5 !important;
        }
        .card {
            border: none;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1) !important;
        }
    </style>
</head>

<body id="page-top">
    <div id="wrapper">

        <!-- Sidebar (Flux) -->
        <flux:sidebar sticky class="bg-gradient-dark">
            <flux:sidebar.header class="px-3 py-4">
                <a :href="route('admin.dashboard')" wire:navigate class="flex items-center gap-3">
                    <div class="size-9 rounded-lg bg-blue-600 text-white flex items-center justify-center">
                        <i class="fas fa-bus"></i>
                    </div>
                    <div class="grid">
                        <flux:heading class="truncate text-sm font-semibold">PayMyRide Central</flux:heading>
                        <flux:text class="truncate text-xs opacity-60">Administration</flux:text>
                    </div>
                </a>
                <flux:sidebar.collapse />
            </flux:sidebar.header>

            <flux:sidebar.nav>
                <flux:sidebar.group :heading="__('Management')">
                    <flux:sidebar.item icon="home" :href="route('admin.dashboard')" :current="request()->routeIs('admin.dashboard')" wire:navigate>
                        {{ __('Dashboard') }}
                    </flux:sidebar.item>

                    <flux:sidebar.item icon="user-group" :href="route('admin.applicants.index')" :current="request()->routeIs('admin.applicants.*')" wire:navigate>
                        {{ __('School Registrations') }}
                    </flux:sidebar.item>

                    <flux:sidebar.item icon="users" :href="route('admin.tenants.index')" :current="request()->routeIs('admin.tenants.*')" wire:navigate>
                        {{ __('Registered Schools') }}
                    </flux:sidebar.item>
                </flux:sidebar.group>

                <flux:sidebar.group :heading="__('Billing')">
                    <flux:sidebar.item icon="currency-dollar" :href="route('admin.billing.index')" :current="request()->routeIs('admin.billing.*')" wire:navigate>
                        {{ __('All Invoices') }}
                    </flux:sidebar.item>

                    <flux:sidebar.item icon="credit-card" :href="route('admin.billing.payments.index')" :current="request()->routeIs('admin.billing.payments.*')" wire:navigate>
                        {{ __('Manage Payments') }}
                    </flux:sidebar.item>

                    <flux:sidebar.item icon="cloud-arrow-up" :href="route('admin.billing.payments.uploads')" :current="request()->routeIs('admin.billing.payments.uploads')" wire:navigate>
                        {{ __('Manage Proofs') }}
                    </flux:sidebar.item>

                    <flux:sidebar.item icon="exclamation-triangle" :href="route('admin.billing.baddebts.index')" :current="request()->routeIs('admin.billing.baddebts.*')" wire:navigate>
                        {{ __('Bad Debts') }}
                    </flux:sidebar.item>

                    <flux:sidebar.item icon="cog" :href="route('admin.billing.settings')" :current="request()->routeIs('admin.billing.settings')" wire:navigate>
                        {{ __('Global Settings') }}
                    </flux:sidebar.item>
                </flux:sidebar.group>
            </flux:sidebar.nav>

            <flux:spacer />
        </flux:sidebar>
        <!-- End Sidebar (Flux) -->

        <div id="content-wrapper" class="d-flex flex-column">
            <div id="content">
                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item dropdown no-arrow">
                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown">
                                <span class="mr-2 d-none d-lg-inline text-gray-600 small">{{ auth()->user() ? auth()->user()->name : 'Super Admin' }}</span>
                                <i class="fas fa-user-shield fa-2x text-gray-400"></i>
                            </a>
                        </li>
                    </ul>
                </nav>

                <div class="container-fluid">
                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">@yield('title')</h1>
                    </div>
                    


                    @yield('content')
                </div>
            </div>

            <footer class="sticky-footer bg-white">
                <div class="container my-auto">
                    <div class="copyright text-center my-auto">
                        <span>Copyright &copy; PayMyRide {{ date('Y') }}</span>
                    </div>
                </div>
            </footer>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/4.1.4/js/sb-admin-2.min.js"></script>
    <script>
        $(document).ready(function() {
            // SweetAlert2 Toast configuration
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            @if(session('success'))
                Toast.fire({
                    icon: 'success',
                    title: "{{ session('success') }}"
                });
            @endif

            @if(session('error'))
                Toast.fire({
                    icon: 'error',
                    title: "{{ session('error') }}"
                });
            @endif

            @if(session('status'))
                Toast.fire({
                    icon: 'info',
                    title: "{{ session('status') }}"
                });
            @endif

            // Global Confirmation for Actions
            $(document).on('click', '.confirm-action, .confirm-delete', function(e) {
                e.preventDefault();
                let form = $(this).closest('form');
                let isDelete = $(this).hasClass('confirm-delete');
                
                let title = $(this).data('confirm-title') || (isDelete ? 'Are you sure?' : 'Please Confirm');
                let text = $(this).data('confirm-text') || (isDelete ? "This action cannot be undone!" : "Do you want to proceed with this action?");
                let icon = $(this).data('confirm-icon') || (isDelete ? 'warning' : 'question');
                let btnColor = $(this).data('confirm-color') || (isDelete ? '#e74a3b' : '#4e73df');
                let btnText = $(this).data('confirm-btn') || (isDelete ? 'Yes, delete it!' : 'Yes, proceed!');

                Swal.fire({
                    title: title,
                    text: text,
                    icon: icon,
                    showCancelButton: true,
                    confirmButtonColor: btnColor,
                    cancelButtonColor: '#858796',
                    confirmButtonText: btnText
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    </script>
</body>
</html>
