<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Courier Booking Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
    {{-- Select2 CSS --}}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body class="flex h-screen bg-gray-100" x-data="{ sidebarOpen: true }">

    <!-- Sidebar -->
    <aside :class="sidebarOpen ? 'w-64' : 'w-16'" class="bg-white shadow-md transition-all duration-300 h-full relative flex-shrink-0">
        <div class="flex flex-col h-full">
            <!-- Logo -->
            <div class="flex items-center justify-between p-4 border-b">
                <img src="{{ asset('images/logo.png') }}" alt="Logo" class="h-10 w-auto" :class="sidebarOpen ? 'block' : 'hidden'">
                <button @click="sidebarOpen = !sidebarOpen" class="text-gray-500 focus:outline-none">
                    <i class="fas fa-bars"></i>
                </button>
            </div>

            <!-- Menu -->
            <nav class="flex-1 overflow-y-auto mt-2">
                <!-- Dashboard -->
                <div>
                    <a href="{{ route('dashboard') }}" class="flex items-center w-full px-4 py-2 text-gray-700 hover:bg-gray-200 rounded">
                        <i class="fas fa-tachometer-alt mr-2 w-4 text-center"></i>
                        <span x-show="sidebarOpen" class="flex-1 text-left">Dashboard</span>
                    </a>
                </div>

                <!-- Import -->
                <div x-data="{ open: false }">
                    <button @click="open = !open" class="flex items-center w-full px-4 py-2 text-gray-700 hover:bg-gray-200">
                        <i class="fas fa-arrow-down mr-2 w-4 text-center"></i>
                        <span x-show="sidebarOpen" class="flex-1 text-left">Import</span>
                        <i x-show="sidebarOpen" :class="open ? 'fas fa-chevron-up' : 'fas fa-chevron-down'" class="ml-auto"></i>
                    </button>
                    <div x-show="open && sidebarOpen" class="ml-6 mt-1 space-y-1 text-gray-600" x-transition>
                        <a href="{{ route('import.supplier_index') }}" class="block px-2 py-1 hover:bg-gray-200 rounded">Register a Pickup Address</a>
                        <a href="{{ route('import_requests.create') }}" class="block px-2 py-1 hover:bg-gray-200 rounded">Create a Request</a>
                        <a href="{{ route('import_requests.index') }}" class="block px-2 py-1 hover:bg-gray-200 rounded">All Requests</a>
                        <a href="#" class="block px-2 py-1 hover:bg-gray-200 rounded">Reports</a>
                    </div>
                </div>

                <!-- Export -->
                <div x-data="{ open: false }" class="mt-2">
                    <button @click="open = !open" class="flex items-center w-full px-4 py-2 text-gray-700 hover:bg-gray-200">
                        <i class="fas fa-arrow-up mr-2 w-4 text-center"></i>
                        <span x-show="sidebarOpen" class="flex-1 text-left">Export</span>
                        <i x-show="sidebarOpen" :class="open ? 'fas fa-chevron-up' : 'fas fa-chevron-down'" class="ml-auto"></i>
                    </button>
                    <div x-show="open && sidebarOpen" class="ml-6 mt-1 space-y-1 text-gray-600" x-transition>
                        <a href="{{ route('export.ship_to_address.index') }}" class="block px-2 py-1 hover:bg-gray-200 rounded">Register a Send-To Address</a>
                        <a href="{{ route('export_requests.create') }}" class="block px-2 py-1 hover:bg-gray-200 rounded">Create a Request</a>
                        <a href="{{ route('export_requests.index') }}" class="block px-2 py-1 hover:bg-gray-200 rounded">All Requests</a>
                        <a href="{{ route('export_reports.index') }}" class="block px-2 py-1 hover:bg-gray-200 rounded">Reports</a>
                    </div>
                </div>

                <!-- User Management -->
                @hasanyrole('admin|Admin')
                <div x-data="{ open: false }" class="mt-2">
                    <button @click="open = !open" class="flex items-center w-full px-4 py-2 text-gray-700 hover:bg-gray-200">
                        <i class="fas fa-users mr-2 w-4 text-center"></i>
                        <span x-show="sidebarOpen" class="flex-1 text-left">User Management</span>
                        <i x-show="sidebarOpen" :class="open ? 'fas fa-chevron-up' : 'fas fa-chevron-down'" class="ml-auto"></i>
                    </button>
                    <div x-show="open && sidebarOpen" class="ml-6 mt-1 space-y-1 text-gray-600" x-transition>
                        <a href="{{ route('users.index') }}" class="block px-2 py-1 hover:bg-gray-200 rounded">All Users</a>
                        <a href="{{ route('roles.index') }}" class="block px-2 py-1 hover:bg-gray-200 rounded">All Roles</a>

                    </div>
                </div>
                @endhasanyrole

                <!-- Activity Log -->
                @hasanyrole('admin|Admin')
                <div class="mt-2">
                    <a href="{{ route('activity_logs.index') }}" class="flex items-center w-full px-4 py-2 text-gray-700 hover:bg-gray-200 rounded">
                        <i class="fas fa-history mr-2 w-4 text-center"></i>
                        <span x-show="sidebarOpen" class="flex-1 text-left">Activity Log</span>
                    </a>
                </div>
                @endhasanyrole
            </nav>
        </div>
    </aside>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col min-w-0">

        <!-- Header -->
        <header class="bg-white shadow-md p-4 flex justify-between items-center">
            <h1 class="text-lg font-bold">JF&I Packaging (PVT) LTD - Courier Booking Portal V.2.0</h1>

                <!-- Notification Bell -->
                <div x-data="{ 
                        open: false, 
                        count: {{ auth()->user()->unreadNotifications->count() }}, 
                        notificationsHtml: '', 
                        fetchNotifications() {
                            fetch('{{ route('notifications.fetch') }}')
                                .then(response => response.json())
                                .then(data => {
                                    this.count = data.count;
                                    this.notificationsHtml = data.html;
                                })
                                .catch(error => console.error('Error fetching notifications:', error));
                        },
                        init() {
                            // Fetch immediately on load to ensure sync, then poll
                            this.fetchNotifications();
                            setInterval(() => {
                                this.fetchNotifications();
                            }, 30000); // Poll every 30 seconds
                        }
                     }" 
                     x-init="init()"
                     class="relative mr-4">
                    
                    <button @click="open = !open" class="relative z-10 block rounded-md bg-white p-2 focus:outline-none">
                        <svg class="h-6 w-6 text-gray-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                        </svg>
                        <span x-show="count > 0" x-text="count" class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full"></span>
                    </button>

                    <div x-show="open" @click.away="open = false" class="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-50" style="display: none;">
                        <div class="py-2 max-h-96 overflow-y-auto overflow-x-hidden" x-html="notificationsHtml">
                            <!-- Helper for initial server side render if JS fails/loads late, though strict Alpine x-html will overwrite -->
                             @forelse(auth()->user()->unreadNotifications as $notification)
                                <a href="{{ route('notifications.read', $notification->id) }}" class="flex items-center px-4 py-3 border-b hover:bg-gray-100">
                                    <div class="mx-3">
                                        <p class="text-gray-600 text-sm font-semibold">{{ $notification->data['title'] ?? 'Notification' }}</p>
                                        <p class="text-gray-500 text-xs">{{ $notification->data['message'] ?? '' }}</p>
                                        <p class="text-gray-400 text-xs mt-1">{{ $notification->created_at->diffForHumans() }}</p>
                                    </div>
                                </a>
                            @empty
                                <div class="px-4 py-3 text-sm text-gray-500">No new notifications</div>
                            @endforelse
                        </div>
                        <template x-if="count > 0">
                            <a href="{{ route('notifications.readAll') }}" class="block bg-gray-800 text-white text-center font-bold py-2 text-sm hover:bg-gray-700">Mark all as read</a>
                        </template>
                    </div>
                </div>

                <!-- User Profile Menu -->
            <div x-data="{ open: false }" class="relative">
                <button @click="open = !open" class="flex items-center space-x-2 bg-gray-100 px-3 py-1 rounded hover:bg-gray-200 focus:outline-none">
                    <i class="fas fa-user-circle text-xl"></i>
                    <span>{{ auth()->user()->name ?? 'User' }}</span>
                    <i :class="open ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
                </button>

                <div x-show="open" @click.away="open = false" class="absolute right-0 mt-2 w-48 bg-white border rounded shadow-md z-50" x-transition>
                    <a href="{{ route('profile') }}" class="block px-4 py-2 hover:bg-gray-100">Profile</a>
                    <a href="{{ route('profile.change-password') }}" class="block px-4 py-2 hover:bg-gray-100">Change Password</a>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="w-full text-left px-4 py-2 hover:bg-gray-100">Logout</button>
                    </form>
                </div>
            </div>
        </header>

        <!-- Page Content -->
        <main class="flex-1 p-6 overflow-y-auto">
            @yield('content')
        </main>
    </div>
    <!-- jQuery (required for DataTables) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>

{{-- Select2 JS --}}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    @yield('scripts')
</body>
</html>
