<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    
    <!-- PWA Meta Tags -->
    <meta name="theme-color" content="#667eea">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Smart Way">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Smart Way Cargo">
    <meta name="msapplication-TileColor" content="#667eea">
    <meta name="msapplication-tap-highlight" content="no">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json">
    
    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" sizes="72x72" href="/images/icon-72x72.png">
    <link rel="apple-touch-icon" sizes="96x96" href="/images/icon-96x96.png">
    <link rel="apple-touch-icon" sizes="128x128" href="/images/icon-128x128.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/images/icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/images/icon-152x152.png">
    <link rel="apple-touch-icon" sizes="192x192" href="/images/icon-192x192.png">
    <link rel="apple-touch-icon" sizes="384x384" href="/images/icon-384x384.png">
    <link rel="apple-touch-icon" sizes="512x512" href="/images/icon-512x512.png">
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="/images/icon-72x72.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/icon-72x72.png">
    
    <title>@yield('title', 'Cargo Management System')</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- PWA Install Script -->
    <script src="/js/pwa-install.js?v=2"></script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-50" x-data="{ showBookingModal: false, sidebarOpen: false }" @open-booking-modal.window="showBookingModal = true">
    <!-- Sidebar -->
    <div class="flex h-screen">
        <!-- Mobile Sidebar Overlay -->
        <div x-show="sidebarOpen" 
             @click="sidebarOpen = false"
             x-transition:enter="transition-opacity ease-linear duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition-opacity ease-linear duration-300"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-600 bg-opacity-75 z-40 md:hidden"></div>

        <!-- Sidebar -->
        <aside class="w-64 gradient-bg text-white flex-shrink-0 transition-all duration-300 h-screen overflow-y-auto fixed md:relative z-50 transform md:transform-none"
               :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'"
               x-transition:enter="transition ease-in-out duration-300 transform"
               x-transition:enter-start="-translate-x-full"
               x-transition:enter-end="translate-x-0"
               x-transition:leave="transition ease-in-out duration-300 transform"
               x-transition:leave-start="translate-x-0"
               x-transition:leave-end="-translate-x-full">
            <div class="p-4 md:p-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="fas fa-shipping-fast mr-2 text-xl md:text-2xl"></i>
                        <h1 class="text-sm md:text-base lg:text-lg font-bold leading-tight">
                            {{ \App\Models\Setting::get('company_name', 'Smart Way Cargo') }}
                        </h1>
                    </div>
                    <!-- Close button for mobile -->
                    <button @click="sidebarOpen = false" class="md:hidden text-white hover:text-gray-200">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <nav class="mt-4 md:mt-6 pb-8">
                <a href="{{ route('dashboard') }}" class="flex items-center px-4 md:px-6 py-2.5 md:py-3 hover:bg-white/10 text-sm md:text-base {{ request()->routeIs('dashboard') ? 'bg-white/20 border-l-4 border-white' : '' }}">
                    <i class="fas fa-chart-line mr-3 w-5"></i>
                    Dashboard
                </a>
                <a href="{{ route('bookings.index') }}" class="flex items-center px-4 md:px-6 py-2.5 md:py-3 hover:bg-white/10 text-sm md:text-base {{ request()->routeIs('bookings.*') && !request()->has('status') ? 'bg-white/20 border-l-4 border-white' : '' }}">
                    <i class="fas fa-box mr-3 w-5"></i>
                    Bookings
                </a>
                <a href="javascript:void(0)" @click="$dispatch('open-booking-modal')" class="flex items-center px-4 md:px-6 py-2.5 md:py-3 mx-3 md:mx-4 my-2 bg-white/20 hover:bg-white/30 rounded-lg border-2 border-white/40 hover:border-white transition-all duration-200 text-sm md:text-base">
                    <i class="fas fa-plus-circle mr-3 w-5"></i>
                    <span class="font-semibold">New Booking</span>
                </a>
                <a href="{{ route('bookings.index', ['status' => 'Pending']) }}" class="flex items-center px-4 md:px-6 py-2.5 md:py-3 hover:bg-white/10 text-sm md:text-base {{ request()->input('status') == 'Pending' ? 'bg-white/20 border-l-4 border-white' : '' }}">
                    <i class="fas fa-clock mr-3 w-5"></i>
                    Pending Shipments
                </a>
                <a href="{{ route('bookings.index', ['status' => 'Delivered']) }}" class="flex items-center px-4 md:px-6 py-2.5 md:py-3 hover:bg-white/10 text-sm md:text-base {{ request()->input('status') == 'Delivered' ? 'bg-white/20 border-l-4 border-white' : '' }}">
                    <i class="fas fa-check-circle mr-3 w-5"></i>
                    Delivered Shipments
                </a>
                <a href="{{ route('bookings.index', ['status' => 'Damaged']) }}" class="flex items-center px-4 md:px-6 py-2.5 md:py-3 hover:bg-white/10 text-sm md:text-base {{ request()->input('status') == 'Damaged' ? 'bg-white/20 border-l-4 border-white' : '' }}">
                    <i class="fas fa-exclamation-triangle mr-3 w-5"></i>
                    Damaged Shipments
                </a>
                @if(in_array(Auth::user()->role, ['Branch Manager', 'Driver']))
                <a href="{{ route('bookings.receive') }}" class="flex items-center px-4 md:px-6 py-2.5 md:py-3 hover:bg-white/10 text-sm md:text-base {{ request()->routeIs('bookings.receive') ? 'bg-white/20 border-l-4 border-white' : '' }}">
                    <i class="fas fa-clipboard-check mr-3 w-5"></i>
                    Receive Shipment
                </a>
                @endif
                
                @if(in_array(Auth::user()->role, ['Branch Manager', 'Receptionist']))
                <a href="{{ route('customers.index') }}" class="flex items-center px-4 md:px-6 py-2.5 md:py-3 hover:bg-white/10 text-sm md:text-base {{ request()->routeIs('customers.*') ? 'bg-white/20 border-l-4 border-white' : '' }}">
                    <i class="fas fa-users mr-3 w-5"></i>
                    Customers
                </a>
                @endif
                
                @if(Auth::user()->role === 'Branch Manager')
                <a href="{{ route('users.index') }}" class="flex items-center px-4 md:px-6 py-2.5 md:py-3 hover:bg-white/10 text-sm md:text-base {{ request()->routeIs('users.*') ? 'bg-white/20 border-l-4 border-white' : '' }}">
                    <i class="fas fa-user-shield mr-3 w-5"></i>
                    Users
                </a>

                <a href="{{ route('rates.index') }}" class="flex items-center px-4 md:px-6 py-2.5 md:py-3 hover:bg-white/10 text-sm md:text-base {{ request()->routeIs('rates.*') ? 'bg-white/20 border-l-4 border-white' : '' }}">
                    <i class="fas fa-dollar-sign mr-3 w-5"></i>
                    Rates
                </a>
                @endif
                
                <a href="{{ route('track') }}" class="flex items-center px-4 md:px-6 py-2.5 md:py-3 hover:bg-white/10 text-sm md:text-base {{ request()->routeIs('track') ? 'bg-white/20 border-l-4 border-white' : '' }}">
                    <i class="fas fa-map-marker-alt mr-3 w-5"></i>
                    Track Shipment
                </a>

                @if(Auth::user()->role === 'Branch Manager')
                <div x-data="{ open: {{ request()->routeIs('reports.*') ? 'true' : 'false' }} }">
                    <button @click="open = !open" class="w-full flex items-center px-4 md:px-6 py-2.5 md:py-3 hover:bg-white/10 text-sm md:text-base {{ request()->routeIs('reports.*') ? 'bg-white/20 border-l-4 border-white' : '' }} focus:outline-none transition-colors duration-200">
                        <i class="fas fa-chart-pie mr-3 w-5"></i>
                        <span class="flex-1 text-left">Reports</span>
                        <i class="fas fa-chevron-down text-xs transition-transform duration-200" :class="{ 'transform rotate-180': open }"></i>
                    </button>
                    <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="bg-black/10">
                        <a href="{{ route('reports.daily-shipments') }}" class="flex items-center pl-12 md:pl-14 pr-4 md:pr-6 py-2 hover:bg-white/10 text-xs md:text-sm {{ request()->routeIs('reports.daily-shipments') ? 'text-white font-semibold' : 'text-gray-200' }}">
                            Daily Shipments
                        </a>
                        <a href="{{ route('reports.customer-invoices') }}" class="flex items-center pl-12 md:pl-14 pr-4 md:pr-6 py-2 hover:bg-white/10 text-xs md:text-sm {{ request()->routeIs('reports.customer-invoices') ? 'text-white font-semibold' : 'text-gray-200' }}">
                            Customer Invoices
                        </a>
                        <a href="{{ route('reports.outstanding-dues') }}" class="flex items-center pl-12 md:pl-14 pr-4 md:pr-6 py-2 hover:bg-white/10 text-xs md:text-sm {{ request()->routeIs('reports.outstanding-dues') ? 'text-white font-semibold' : 'text-gray-200' }}">
                            Outstanding Dues
                        </a>
                        <a href="{{ route('reports.cargo-volume') }}" class="flex items-center pl-12 md:pl-14 pr-4 md:pr-6 py-2 hover:bg-white/10 text-xs md:text-sm {{ request()->routeIs('reports.cargo-volume') ? 'text-white font-semibold' : 'text-gray-200' }}">
                            Cargo Volume
                        </a>
                    </div>
                </div>

                <a href="{{ route('settings.index') }}" class="flex items-center px-4 md:px-6 py-2.5 md:py-3 hover:bg-white/10 text-sm md:text-base {{ request()->routeIs('settings.*') ? 'bg-white/20 border-l-4 border-white' : '' }}">
                    <i class="fas fa-cog mr-3 w-5"></i>
                    Settings
                </a>
                @endif
            </nav>
        </aside>

        <!-- Main Content -->
        <div class="flex-1 overflow-y-auto">
            <!-- Top Bar -->
            <header class="bg-white shadow-sm sticky top-0 z-20">
                <div class="flex items-center justify-between px-4 md:px-8 py-4">
                    <div class="flex items-center gap-3">
                        <!-- Hamburger Menu Button (Mobile) -->
                        <button @click="sidebarOpen = !sidebarOpen" class="md:hidden text-gray-600 hover:text-gray-900 focus:outline-none">
                            <i class="fas fa-bars text-xl"></i>
                        </button>
                        <h2 class="text-xl font-bold text-gray-800">@yield('page-title', 'Dashboard')</h2>
                    </div>
                    
                    <div class="flex items-center space-x-4">
                        @yield('header-actions')
                        
                        <div class="text-sm text-gray-500 hidden sm:block">
                            {{ now()->format('l, F j, Y') }}
                        </div>
                        
                        <!-- User Dropdown -->
                        <div class="relative" x-data="{ open: false }">
                            <button @click="open = !open" class="flex items-center space-x-2 text-gray-700 hover:text-gray-900 focus:outline-none">
                                <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">
                                    {{ substr(Auth::user()->name ?? 'U', 0, 1) }}
                                </div>
                                <span class="font-medium">{{ Auth::user()->name ?? 'User' }}</span>
                                <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 border border-gray-200 text-gray-600">{{ Auth::user()->role ?? 'Guest' }}</span>
                                <i class="fas fa-chevron-down text-xs"></i>
                            </button>

                            <div x-show="open" @click.away="open = false" 
                                class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 border border-gray-100"
                                x-transition:enter="transition ease-out duration-100"
                                x-transition:enter-start="transform opacity-0 scale-95"
                                x-transition:enter-end="transform opacity-100 scale-100"
                                x-transition:leave="transition ease-in duration-75"
                                x-transition:leave-start="transform opacity-100 scale-100"
                                x-transition:leave-end="transform opacity-0 scale-95"
                                style="display: none;">
                                
                                <div class="px-4 py-2 border-b border-gray-100">
                                    <p class="text-sm font-medium text-gray-900">{{ Auth::user()->name ?? 'User' }}</p>
                                    <p class="text-xs text-gray-500 truncate">{{ Auth::user()->email ?? '' }}</p>
                                </div>

                                <a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                    <i class="fas fa-user-circle mr-2 text-gray-400"></i> Profile
                                </a>
                                
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <button type="submit" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">
                                        <i class="fas fa-sign-out-alt mr-2"></i> Log Out
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Page Content -->
            <main class="p-4 md:p-8 pb-24 md:pb-8">
                @if(session('success'))
                    <div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative animate-fade-in-down" role="alert">
                        <strong class="font-bold">Success!</strong>
                        <span class="block sm:inline">{{ session('success') }}</span>
                    </div>
                @endif

                @if(session('error'))
                    <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative animate-fade-in-down" role="alert">
                        <strong class="font-bold">Error!</strong>
                        <span class="block sm:inline">{{ session('error') }}</span>
                    </div>
                @endif

                @yield('content')
                
                <!-- Slot support for legacy/components -->
                @if(isset($slot))
                    {{ $slot }}
                @endif
            </main>
        </div>
    </div>

    <!-- Mobile Bottom Navigation -->
    <div class="fixed bottom-0 left-0 w-full bg-white border-t border-gray-200 md:hidden z-50 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
        <div class="flex justify-around items-center h-16 px-2">
            <a href="{{ route('dashboard') }}" class="flex flex-col items-center justify-center w-full h-full {{ request()->routeIs('dashboard') ? 'text-purple-600' : 'text-gray-500 hover:text-purple-600' }}">
                <i class="fas fa-home text-lg mb-1"></i>
                <span class="text-[10px] font-medium">Home</span>
            </a>
            <a href="{{ route('bookings.index') }}" class="flex flex-col items-center justify-center w-full h-full {{ request()->routeIs('bookings.index') && !request()->has('status') ? 'text-purple-600' : 'text-gray-500 hover:text-purple-600' }}">
                <i class="fas fa-box text-lg mb-1"></i>
                <span class="text-[10px] font-medium">Bookings</span>
            </a>
            
            <!-- Create Button (Center) -->
            <button @click="$dispatch('open-booking-modal')" class="flex flex-col items-center justify-center w-full h-full relative group">
                <div class="absolute -top-6 bg-gradient-to-r from-purple-600 to-indigo-600 rounded-full p-4 shadow-lg border-4 border-gray-50 group-hover:scale-110 transition-transform duration-200">
                    <i class="fas fa-plus text-white text-xl"></i>
                </div>
                <span class="text-[10px] font-medium text-purple-600 mt-8">Create</span>
            </button>

            <a href="{{ route('track') }}" class="flex flex-col items-center justify-center w-full h-full {{ request()->routeIs('track') ? 'text-purple-600' : 'text-gray-500 hover:text-purple-600' }}">
                <i class="fas fa-search text-lg mb-1"></i>
                <span class="text-[10px] font-medium">Track</span>
            </a>

            <!-- Mobile Menu Dropup -->
            <div x-data="{ open: false }" class="relative w-full h-full">
                <button @click="open = !open" class="flex flex-col items-center justify-center w-full h-full text-gray-500 hover:text-purple-600">
                    <i class="fas fa-bars text-lg mb-1"></i>
                    <span class="text-[10px] font-medium">Menu</span>
                </button>
                
                <!-- Dropup Content -->
                <div x-show="open" 
                     @click.away="open = false"
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 translate-y-10"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     x-transition:leave="transition ease-in duration-150"
                     x-transition:leave-start="opacity-100 translate-y-0"
                     x-transition:leave-end="opacity-0 translate-y-10"
                     class="absolute bottom-20 right-2 w-56 bg-white rounded-xl shadow-2xl border border-gray-100 overflow-hidden z-50 mb-2">
                    
                    <div class="py-2">
                        @if(in_array(Auth::user()->role, ['Branch Manager', 'Driver']))
                        <a href="{{ route('bookings.receive') }}" class="flex items-center px-4 py-3 hover:bg-gray-50 text-gray-700">
                            <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3 text-purple-600">
                                <i class="fas fa-clipboard-check text-sm"></i>
                            </div>
                            <span class="text-sm font-medium">Receive Shipment</span>
                        </a>
                        @endif

                        <a href="{{ route('bookings.index', ['status' => 'Pending']) }}" class="flex items-center px-4 py-3 hover:bg-gray-50 text-gray-700">
                            <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3 text-yellow-600">
                                <i class="fas fa-clock text-sm"></i>
                            </div>
                            <span class="text-sm font-medium">Pending</span>
                        </a>

                        <a href="{{ route('bookings.index', ['status' => 'Delivered']) }}" class="flex items-center px-4 py-3 hover:bg-gray-50 text-gray-700">
                            <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
                                <i class="fas fa-check-circle text-sm"></i>
                            </div>
                            <span class="text-sm font-medium">Delivered</span>
                        </a>

                        @if(in_array(Auth::user()->role, ['Branch Manager', 'Receptionist']))
                        <a href="{{ route('customers.index') }}" class="flex items-center px-4 py-3 hover:bg-gray-50 text-gray-700">
                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3 text-blue-600">
                                <i class="fas fa-users text-sm"></i>
                            </div>
                            <span class="text-sm font-medium">Customers</span>
                        </a>
                        @endif

                        @if(Auth::user()->role === 'Branch Manager')
                        <div class="border-t border-gray-100 my-1"></div>
                        <a href="{{ route('users.index') }}" class="flex items-center px-4 py-3 hover:bg-gray-50 text-gray-700">
                            <i class="fas fa-user-shield w-8 text-center text-gray-400 mr-2"></i>
                            <span class="text-sm">Users</span>
                        </a>
                        <a href="{{ route('reports.daily-shipments') }}" class="flex items-center px-4 py-3 hover:bg-gray-50 text-gray-700">
                            <i class="fas fa-chart-pie w-8 text-center text-gray-400 mr-2"></i>
                            <span class="text-sm">Reports</span>
                        </a>
                        @endif
                        
                        <div class="border-t border-gray-100 my-1"></div>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="flex w-full items-center px-4 py-3 hover:bg-red-50 text-red-600">
                                <i class="fas fa-sign-out-alt w-8 text-center mr-2"></i>
                                <span class="text-sm font-medium">Log Out</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Booking Type Selection Modal -->
    <div x-show="showBookingModal" 
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 z-[9999] overflow-y-auto" 
             aria-labelledby="modal-title" 
             role="dialog" 
             aria-modal="true">
            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showBookingModal = false"></div>
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
                <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="sm:flex sm:items-start">
                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                                <h3 class="text-lg leading-6 font-bold text-gray-900" id="modal-title">
                                    Select Booking Type
                                </h3>
                                <div class="mt-4 grid grid-cols-1 gap-4" x-data="{ showCountries: false }">
                                    <!-- Domestic Option -->
                                    <a href="{{ route('bookings.create', ['type' => 'domestic']) }}" class="relative block rounded-lg border border-gray-300 bg-white shadow-sm px-6 py-4 cursor-pointer hover:border-indigo-500 sm:flex sm:justify-between focus:outline-none hover:bg-indigo-50 transition-colors group">
                                        <div class="flex items-center">
                                            <div class="text-sm">
                                                <p class="font-medium text-gray-900 group-hover:text-indigo-700">
                                                    Domestic Booking
                                                </p>
                                                <p class="text-gray-500">
                                                    For shipments within the country
                                                </p>
                                            </div>
                                        </div>
                                        <div class="mt-2 flex text-sm sm:mt-0 sm:block sm:ml-4 sm:text-right">
                                            <i class="fas fa-truck text-indigo-400 group-hover:text-indigo-600 text-2xl"></i>
                                        </div>
                                    </a>

                                    <!-- International Option -->
                                    <div @click="showCountries = !showCountries" class="relative block rounded-lg border border-gray-300 bg-white shadow-sm px-6 py-4 cursor-pointer hover:border-purple-500 sm:flex sm:justify-between focus:outline-none hover:bg-purple-50 transition-colors group">
                                        <div class="flex items-center">
                                            <div class="text-sm">
                                                <p class="font-medium text-gray-900 group-hover:text-purple-700">
                                                    International Booking
                                                </p>
                                                <p class="text-gray-500">
                                                    For shipments to other countries
                                                </p>
                                            </div>
                                        </div>
                                        <div class="mt-2 flex text-sm sm:mt-0 sm:block sm:ml-4 sm:text-right">
                                            <i class="fas fa-plane text-purple-400 group-hover:text-purple-600 text-2xl"></i>
                                        </div>
                                    </div>
                                    
                                    <!-- Country Selection -->
                                    <div x-show="showCountries" class="mt-2 pl-4 border-l-2 border-purple-200">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Select Destination Country:</label>
                                        <div class="grid grid-cols-2 gap-2">
                                            @php
                                                $countries = \App\Models\Rate::where('type', 'international')
                                                    ->whereNotNull('country')
                                                    ->distinct()
                                                    ->pluck('country');
                                            @endphp
                                            @foreach($countries as $country)
                                            <a href="{{ route('bookings.create', ['type' => 'international', 'country' => $country]) }}" class="text-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-purple-50 hover:text-purple-700 hover:border-purple-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors">
                                                {{ $country }}
                                            </a>
                                            @endforeach
                                            @if($countries->isEmpty())
                                            <p class="col-span-2 text-sm text-gray-500 italic">No international rates configured.</p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                        <button type="button" @click="showBookingModal = false" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
        </div>
</body>
</html>
