@extends('layouts.app')

@section('title', 'Bookings')
@section('page-title', 'Booking Management')

@section('content')
<div class="space-y-6" x-data="{ showTypeModal: false }">
    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
        <div>
            <h3 class="text-xl sm:text-2xl font-bold text-gray-800">All Bookings</h3>
            <p class="text-gray-500 text-xs sm:text-sm mt-0.5">Manage shipments, track status, and view payments.</p>
        </div>
        <div class="flex gap-2">
            <button @click="$dispatch('open-booking-modal')" class="inline-flex items-center justify-center bg-indigo-600 hover:bg-indigo-700 text-white px-3 sm:px-4 py-2 rounded-lg shadow-sm transition-all duration-200 font-medium text-xs sm:text-sm">
                <i class="fas fa-plus mr-1.5 text-xs"></i> New Booking
            </button>
            <a href="{{ route('bookings.bulk-status') }}" class="inline-flex items-center justify-center bg-purple-600 hover:bg-purple-700 text-white px-3 sm:px-4 py-2 rounded-lg shadow-sm transition-all duration-200 font-medium text-xs sm:text-sm">
                <i class="fas fa-edit mr-1.5 text-xs"></i> Bulk Update
            </a>
        </div>
    </div>

    <!-- Search & Filter Card -->
    <div class="bg-gradient-to-br from-white to-gray-50 rounded-lg shadow-sm border border-gray-200 p-2.5 sm:p-3 mb-3">
        <form action="{{ route('bookings.index') }}" method="GET">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 xl:grid-cols-12 gap-2">
                <!-- Search Input -->
                <div class="sm:col-span-2 lg:col-span-3 xl:col-span-4">
                    <label class="block text-[9px] font-bold text-gray-600 uppercase tracking-wide mb-0.5">
                        <i class="fas fa-search mr-1"></i>Search
                    </label>
                    <div class="relative">
                        <input type="text" name="search" value="{{ request('search') }}" 
                            class="block w-full pl-2.5 pr-2 py-1.5 text-[11px] border border-gray-300 rounded-md focus:ring-1 focus:ring-indigo-400 focus:border-indigo-400 bg-white hover:border-gray-400 transition-all" 
                            placeholder="CNTR, Name, Phone...">
                    </div>
                </div>

                <!-- Status Filter -->
                <div class="lg:col-span-2 xl:col-span-2">
                    <label class="block text-[9px] font-bold text-gray-600 uppercase tracking-wide mb-0.5">
                        <i class="fas fa-info-circle mr-1"></i>Status
                    </label>
                    <select name="status" class="block w-full px-2 py-1.5 text-[11px] border border-gray-300 rounded-md focus:ring-1 focus:ring-indigo-400 focus:border-indigo-400 bg-white hover:border-gray-400 transition-all">
                        <option value="">All</option>
                        <option value="Pending" {{ request('status') == 'Pending' ? 'selected' : '' }}>Pending</option>
                        <option value="Loaded" {{ request('status') == 'Loaded' ? 'selected' : '' }}>Loaded</option>
                        <option value="In Transit" {{ request('status') == 'In Transit' ? 'selected' : '' }}>In Transit</option>
                        <option value="Arrived" {{ request('status') == 'Arrived' ? 'selected' : '' }}>Arrived</option>
                        <option value="Delivered" {{ request('status') == 'Delivered' ? 'selected' : '' }}>Delivered</option>
                        <option value="Damaged" {{ request('status') == 'Damaged' ? 'selected' : '' }}>Damaged</option>
                    </select>
                </div>

                <!-- Payment Status Filter -->
                <div class="lg:col-span-2 xl:col-span-2">
                    <label class="block text-[9px] font-bold text-gray-600 uppercase tracking-wide mb-0.5">
                        <i class="fas fa-dollar-sign mr-1"></i>Payment
                    </label>
                    <select name="payment_status" class="block w-full px-2 py-1.5 text-[11px] border border-gray-300 rounded-md focus:ring-1 focus:ring-indigo-400 focus:border-indigo-400 bg-white hover:border-gray-400 transition-all">
                        <option value="">All</option>
                        <option value="Paid" {{ request('payment_status') == 'Paid' ? 'selected' : '' }}>Paid</option>
                        <option value="Partial" {{ request('payment_status') == 'Partial' ? 'selected' : '' }}>Partial</option>
                        <option value="Unpaid" {{ request('payment_status') == 'Unpaid' ? 'selected' : '' }}>Unpaid</option>
                    </select>
                </div>

                <!-- Date From -->
                <div class="lg:col-span-1.5 xl:col-span-2">
                    <label class="block text-[9px] font-bold text-gray-600 uppercase tracking-wide mb-0.5">
                        <i class="fas fa-calendar mr-1"></i>From
                    </label>
                    <input type="date" name="date_from" value="{{ request('date_from') }}" 
                        class="block w-full px-1.5 py-1.5 text-[10px] border border-gray-300 rounded-md focus:ring-1 focus:ring-indigo-400 focus:border-indigo-400 bg-white hover:border-gray-400 transition-all">
                </div>

                <!-- Date To -->
                <div class="lg:col-span-1.5 xl:col-span-2">
                    <label class="block text-[9px] font-bold text-gray-600 uppercase tracking-wide mb-0.5">
                        <i class="fas fa-calendar-check mr-1"></i>To
                    </label>
                    <input type="date" name="date_to" value="{{ request('date_to') }}" 
                        class="block w-full px-1.5 py-1.5 text-[10px] border border-gray-300 rounded-md focus:ring-1 focus:ring-indigo-400 focus:border-indigo-400 bg-white hover:border-gray-400 transition-all">
                </div>
            </div>

            <!-- Filter Actions -->
            <div class="mt-2 flex flex-col sm:flex-row justify-end gap-1.5">
                <a href="{{ route('bookings.index') }}" class="inline-flex items-center justify-center px-3 py-1.5 text-[11px] font-semibold text-gray-600 bg-white border border-gray-300 rounded-md hover:bg-gray-100 hover:border-gray-400 transition-all">
                    <i class="fas fa-redo text-[9px] mr-1"></i> Reset
                </a>
                <button type="submit" class="inline-flex items-center justify-center px-4 py-1.5 text-[11px] font-semibold text-white bg-indigo-600 rounded-md hover:bg-indigo-700 shadow-sm hover:shadow transition-all">
                    <i class="fas fa-filter text-[9px] mr-1"></i> Apply
                </button>
            </div>
        </form>
    </div>

    <!-- Bookings List -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100">
        <!-- Desktop Table -->
        <div class="hidden md:block overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-3 py-3 text-left text-[10px] font-medium text-gray-500 uppercase tracking-wider">CNTR / Date</th>
                        <th scope="col" class="px-3 py-3 text-left text-[10px] font-medium text-gray-500 uppercase tracking-wider">Customer</th>
                        <th scope="col" class="px-3 py-3 text-left text-[10px] font-medium text-gray-500 uppercase tracking-wider">Route</th>
                        <th scope="col" class="px-3 py-3 text-right text-[10px] font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                        <th scope="col" class="px-3 py-3 text-right text-[10px] font-medium text-gray-500 uppercase tracking-wider">Paid</th>
                        <th scope="col" class="px-3 py-3 text-right text-[10px] font-medium text-gray-500 uppercase tracking-wider">Due</th>
                        <th scope="col" class="px-3 py-3 text-center text-[10px] font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($bookings as $booking)
                    <tr class="hover:bg-indigo-50 transition-colors group cursor-pointer border-l-4 border-transparent hover:border-indigo-400" 
                        x-data="{ bookingId: {{ $booking->id }} }"
                        @click="
                            const bookingSection = document.getElementById('booking-actions-{{ $booking->id }}');
                            if (bookingSection) {
                                const isExpanded = bookingSection.style.display !== 'none';
                                // Close all other expanded sections
                                document.querySelectorAll('[id^=booking-actions-]').forEach(el => el.style.display = 'none');
                                // Toggle current section
                                if (!isExpanded) {
                                    bookingSection.style.display = 'block';
                                    // Scroll to the actions section
                                    setTimeout(() => bookingSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 100);
                                }
                            }
                        ">
                        <td class="px-3 py-3 whitespace-nowrap">
                            <div class="flex items-center gap-2">
                                <i class="fas fa-hand-pointer text-indigo-400 text-xs opacity-0 group-hover:opacity-100 transition-opacity"></i>
                                <div>
                                    <div class="text-xs font-bold text-indigo-600">{{ $booking->cntr_no }}</div>
                                    <div class="text-[10px] text-gray-500">{{ $booking->booking_date->format('d M, Y') }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-3 py-3">
                            <div class="flex flex-col">
                                <span class="text-xs font-medium text-gray-900 truncate max-w-[150px]">{{ $booking->customer->name }}</span>
                                <span class="text-[10px] text-gray-500 truncate max-w-[150px]">{{ $booking->receiver_name ?? 'Same' }}</span>
                            </div>
                        </td>
                        <td class="px-3 py-3">
                            <div class="flex items-center text-[11px] text-gray-600">
                                <span class="truncate max-w-[100px]">{{ Str::limit($booking->pickup_location, 15) }}</span>
                                <i class="fas fa-arrow-right mx-1 text-[8px] text-gray-400"></i>
                                <span class="truncate max-w-[100px]">{{ Str::limit($booking->delivery_location, 15) }}</span>
                            </div>
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap text-right">
                            <div class="text-xs font-bold text-gray-900">{{ \App\Helpers\CurrencyHelper::format($booking->total_amount) }}</div>
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap text-right">
                            <div class="text-xs text-green-600">{{ \App\Helpers\CurrencyHelper::format($booking->advance_payment) }}</div>
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap text-right">
                            <div class="text-xs font-bold {{ $booking->due_payment > 0 ? 'text-red-600' : 'text-gray-400' }}">
                                {{ \App\Helpers\CurrencyHelper::format($booking->due_payment) }}
                            </div>
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap text-center">
                            @php
                                $statusClasses = [
                                    'Pending' => 'bg-yellow-100 text-yellow-800',
                                    'Loaded' => 'bg-blue-100 text-blue-800',
                                    'In Transit' => 'bg-indigo-100 text-indigo-800',
                                    'Arrived' => 'bg-purple-100 text-purple-800',
                                    'Delivered' => 'bg-green-100 text-green-800',
                                    'Damaged' => 'bg-red-100 text-red-800',
                                ];
                                $class = $statusClasses[$booking->status] ?? 'bg-gray-100 text-gray-800';
                            @endphp
                            <span class="px-2 py-1 inline-flex text-[10px] leading-4 font-semibold rounded-full {{ $class }}">
                                {{ $booking->status }}
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-10 text-center text-gray-500">
                            <div class="flex flex-col items-center justify-center">
                                <i class="fas fa-inbox text-4xl mb-3 text-gray-300"></i>
                                <p class="text-base font-medium">No bookings found</p>
                                <p class="text-sm mt-1">Try adjusting your search or filters.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Mobile Card View -->
        <div class="md:hidden space-y-3">
            @forelse($bookings as $booking)
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-all"
                 @click="
                    const bookingSection = document.getElementById('booking-actions-{{ $booking->id }}');
                    if (bookingSection) {
                        const isExpanded = bookingSection.style.display !== 'none';
                        document.querySelectorAll('[id^=booking-actions-]').forEach(el => el.style.display = 'none');
                        if (!isExpanded) {
                            bookingSection.style.display = 'block';
                            setTimeout(() => bookingSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 100);
                        }
                    }
                 ">
                <!-- Header with Status -->
                <div class="bg-gradient-to-r from-indigo-500 to-purple-600 px-4 py-3 flex justify-between items-center">
                    <div class="flex items-center gap-2">
                        <div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
                            <i class="fas fa-box text-white text-xs"></i>
                        </div>
                        <div>
                            <div class="text-sm font-bold text-white">{{ $booking->cntr_no }}</div>
                            <div class="text-xs text-indigo-100">{{ $booking->booking_date->format('d M, Y') }}</div>
                        </div>
                    </div>
                    @php
                        $statusClasses = [
                            'Pending' => 'bg-yellow-100 text-yellow-800',
                            'Loaded' => 'bg-blue-100 text-blue-800',
                            'In Transit' => 'bg-indigo-100 text-indigo-800',
                            'Arrived' => 'bg-purple-100 text-purple-800',
                            'Delivered' => 'bg-green-100 text-green-800',
                            'Damaged' => 'bg-red-100 text-red-800',
                        ];
                        $class = $statusClasses[$booking->status] ?? 'bg-gray-100 text-gray-800';
                    @endphp
                    <span class="px-2.5 py-1 text-xs font-semibold rounded-full {{ $class }}">
                        {{ $booking->status }}
                    </span>
                </div>

                <!-- Content -->
                <div class="p-4">
                    <!-- Customer Info -->
                    <div class="mb-3">
                        <div class="flex items-center gap-2 mb-1">
                            <i class="fas fa-user text-gray-400 text-xs"></i>
                            <span class="text-sm font-semibold text-gray-900">{{ $booking->customer->name }}</span>
                        </div>
                        @if($booking->receiver_name)
                        <div class="flex items-center gap-2 ml-5">
                            <i class="fas fa-arrow-right text-gray-300 text-xs"></i>
                            <span class="text-xs text-gray-600">{{ $booking->receiver_name }}</span>
                        </div>
                        @endif
                    </div>

                    <!-- Route -->
                    <div class="mb-3 bg-gray-50 rounded-lg p-3">
                        <div class="flex items-start gap-2">
                            <i class="fas fa-map-marker-alt text-green-500 text-xs mt-1"></i>
                            <div class="flex-1">
                                <div class="text-xs font-medium text-gray-700">{{ Str::limit($booking->pickup_location, 30) }}</div>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 my-1 ml-4">
                            <div class="w-px h-4 bg-gray-300"></div>
                        </div>
                        <div class="flex items-start gap-2">
                            <i class="fas fa-map-marker-alt text-red-500 text-xs mt-1"></i>
                            <div class="flex-1">
                                <div class="text-xs font-medium text-gray-700">{{ Str::limit($booking->delivery_location, 30) }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Payment Summary -->
                    <div class="grid grid-cols-3 gap-2 mb-3">
                        <div class="bg-blue-50 rounded-lg p-2 text-center">
                            <div class="text-xs text-blue-600 font-medium mb-1">Total</div>
                            <div class="text-sm font-bold text-blue-900">{{ \App\Helpers\CurrencyHelper::format($booking->total_amount) }}</div>
                        </div>
                        <div class="bg-green-50 rounded-lg p-2 text-center">
                            <div class="text-xs text-green-600 font-medium mb-1">Paid</div>
                            <div class="text-sm font-bold text-green-900">{{ \App\Helpers\CurrencyHelper::format($booking->advance_payment) }}</div>
                        </div>
                        <div class="bg-red-50 rounded-lg p-2 text-center">
                            <div class="text-xs text-red-600 font-medium mb-1">Due</div>
                            <div class="text-sm font-bold text-red-900">{{ \App\Helpers\CurrencyHelper::format($booking->due_payment) }}</div>
                        </div>
                    </div>

                    <!-- Tap to View Actions -->
                    <div class="flex items-center justify-center gap-2 py-2 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg border border-indigo-100">
                        <i class="fas fa-hand-pointer text-indigo-500 text-xs animate-pulse"></i>
                        <span class="text-xs font-medium text-indigo-700">Tap to view actions</span>
                    </div>
                </div>
            </div>
            @empty
            <div class="p-10 text-center text-gray-500 bg-white rounded-xl">
                <i class="fas fa-inbox text-5xl mb-4 text-gray-300"></i>
                <p class="text-base font-medium">No bookings found</p>
                <p class="text-sm mt-1">Try adjusting your search or filters.</p>
            </div>
            @endforelse
        </div>
    </div>

    <!-- Professional Action Buttons Section -->
    @if($bookings->count() > 0)
    <div class="bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-md border border-gray-200 p-6 mt-6">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h4 class="text-lg font-bold text-gray-800">Quick Actions</h4>
                <p class="text-xs text-gray-500 mt-0.5">Click on any booking row above to show actions</p>
            </div>
            <div class="text-sm text-gray-600">
                <span class="font-semibold text-indigo-600">{{ $bookings->total() }}</span> Total Bookings
            </div>
        </div>
        
        <div class="space-y-4">
            @foreach($bookings as $booking)
            <div id="booking-actions-{{ $booking->id }}" class="border-t border-gray-200 pt-4" style="display: none;">
                <div class="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-indigo-50 to-purple-50 border-2 border-indigo-200 rounded-lg mb-3">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-box text-indigo-600 text-sm"></i>
                        </div>
                        <div class="text-left">
                            <div class="text-sm font-bold text-gray-900">{{ $booking->cntr_no }}</div>
                            <div class="text-xs text-gray-500">{{ $booking->customer->name }} • {{ $booking->booking_date->format('d M, Y') }}</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="text-right hidden sm:block">
                            <div class="text-xs text-gray-500">Total</div>
                            <div class="text-sm font-bold text-gray-900">{{ \App\Helpers\CurrencyHelper::format($booking->total_amount) }}</div>
                        </div>
                        <button onclick="document.getElementById('booking-actions-{{ $booking->id }}').style.display='none'; document.getElementById('expand-btn-{{ $booking->id }}').classList.remove('rotate-180');" 
                                class="w-8 h-8 bg-white rounded-full flex items-center justify-center hover:bg-gray-100 transition-colors">
                            <i class="fas fa-times text-gray-400 text-sm"></i>
                        </button>
                    </div>
                </div>
                
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2">
                    <!-- View Details -->
                    <a href="{{ route('bookings.show', $booking) }}" 
                       class="flex flex-col items-center justify-center p-4 bg-indigo-50 border-2 border-indigo-200 rounded-lg hover:bg-indigo-100 hover:border-indigo-300 transition-all group">
                        <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-indigo-200">
                            <i class="fas fa-eye text-indigo-600 text-lg"></i>
                        </div>
                        <span class="text-xs font-semibold text-indigo-700">View Details</span>
                    </a>
                    
                    <!-- Edit -->
                    <a href="{{ route('bookings.edit', $booking) }}" 
                       class="flex flex-col items-center justify-center p-4 bg-green-50 border-2 border-green-200 rounded-lg hover:bg-green-100 hover:border-green-300 transition-all group">
                        <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-green-200">
                            <i class="fas fa-edit text-green-600 text-lg"></i>
                        </div>
                        <span class="text-xs font-semibold text-green-700">Edit</span>
                    </a>
                    
                    <!-- Update Status -->
                    <button @click="$dispatch('open-status-modal', { bookingId: {{ $booking->id }}, currentStatus: '{{ $booking->status }}' })" 
                            class="flex flex-col items-center justify-center p-4 bg-yellow-50 border-2 border-yellow-200 rounded-lg hover:bg-yellow-100 hover:border-yellow-300 transition-all group">
                        <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-yellow-200">
                            <i class="fas fa-sync-alt text-yellow-600 text-lg"></i>
                        </div>
                        <span class="text-xs font-semibold text-yellow-700">Update Status</span>
                    </button>
                    
                    <!-- Update Payment -->
                    <button @click="$dispatch('open-payment-modal', { bookingId: {{ $booking->id }}, totalAmount: {{ $booking->total_amount }}, advancePaid: {{ $booking->advance_payment }}, dueAmount: {{ $booking->due_payment }} })" 
                            class="flex flex-col items-center justify-center p-4 bg-emerald-50 border-2 border-emerald-200 rounded-lg hover:bg-emerald-100 hover:border-emerald-300 transition-all group">
                        <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-emerald-200">
                            <i class="fas fa-money-bill-wave text-emerald-600 text-lg"></i>
                        </div>
                        <span class="text-xs font-semibold text-emerald-700">Payment</span>
                    </button>
                    
                    <!-- Cargo Slip -->
                    <a href="{{ route('bookings.cargo-slip', $booking) }}" target="_blank"
                       class="flex flex-col items-center justify-center p-4 bg-purple-50 border-2 border-purple-200 rounded-lg hover:bg-purple-100 hover:border-purple-300 transition-all group">
                        <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-purple-200">
                            <i class="fas fa-receipt text-purple-600 text-lg"></i>
                        </div>
                        <span class="text-xs font-semibold text-purple-700">Cargo Slip</span>
                    </a>
                    
                    <!-- Delivery Slip -->
                    <a href="{{ route('bookings.delivery-receipt', $booking) }}" target="_blank"
                       class="flex flex-col items-center justify-center p-4 bg-orange-50 border-2 border-orange-200 rounded-lg hover:bg-orange-100 hover:border-orange-300 transition-all group">
                        <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-orange-200">
                            <i class="fas fa-truck-loading text-orange-600 text-lg"></i>
                        </div>
                        <span class="text-xs font-semibold text-orange-700">Delivery Slip</span>
                    </a>
                    
                    <!-- Invoice -->
                    <a href="{{ route('bookings.invoice', $booking) }}" target="_blank"
                       class="flex flex-col items-center justify-center p-4 bg-blue-50 border-2 border-blue-200 rounded-lg hover:bg-blue-100 hover:border-blue-300 transition-all group">
                        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-blue-200">
                            <i class="fas fa-file-invoice text-blue-600 text-lg"></i>
                        </div>
                        <span class="text-xs font-semibold text-blue-700">Invoice</span>
                    </a>
                    
                    <!-- Thermal Receipt -->
                    <a href="{{ route('bookings.thermal-receipt', $booking) }}" target="_blank"
                       class="flex flex-col items-center justify-center p-4 bg-gray-50 border-2 border-gray-200 rounded-lg hover:bg-gray-100 hover:border-gray-300 transition-all group">
                        <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-gray-200">
                            <i class="fas fa-print text-gray-600 text-lg"></i>
                        </div>
                        <span class="text-xs font-semibold text-gray-700">Thermal</span>
                    </a>
                    
                    <!-- WhatsApp -->
                    <a href="javascript:void(0)" 
                       onclick="shareInvoiceWhatsApp('{{ $booking->customer->phone ?? '' }}', '{{ route('bookings.invoice', $booking) }}', '{{ $booking->cntr_no }}', '{{ \App\Helpers\CurrencyHelper::format($booking->total_amount) }}', '{{ $booking->customer->name }}', '{{ \App\Helpers\CurrencyHelper::format($booking->advance_payment) }}', '{{ \App\Helpers\CurrencyHelper::format($booking->due_payment) }}', '{{ $booking->pickup_location }}', '{{ $booking->delivery_location }}', '{{ $booking->status }}')"
                       class="flex flex-col items-center justify-center p-4 bg-green-50 border-2 border-green-200 rounded-lg hover:bg-green-100 hover:border-green-300 transition-all group">
                        <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-green-200">
                            <i class="fab fa-whatsapp text-green-600 text-xl"></i>
                        </div>
                        <span class="text-xs font-semibold text-green-700">WhatsApp</span>
                    </a>
                    
                    <!-- Messenger -->
                    <a href="javascript:void(0)" 
                       onclick="shareInvoiceMessenger('{{ route('bookings.invoice', $booking) }}', '{{ $booking->customer->name }}')"
                       class="flex flex-col items-center justify-center p-4 bg-blue-50 border-2 border-blue-200 rounded-lg hover:bg-blue-100 hover:border-blue-300 transition-all group">
                        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-blue-200">
                            <i class="fab fa-facebook-messenger text-blue-600 text-xl"></i>
                        </div>
                        <span class="text-xs font-semibold text-blue-700">Messenger</span>
                    </a>
                    
                    <!-- WeChat -->
                    <a href="javascript:void(0)" 
                       onclick="shareInvoiceWeChat('{{ route('bookings.invoice', $booking) }}', '{{ $booking->customer->name }}')"
                       class="flex flex-col items-center justify-center p-4 bg-teal-50 border-2 border-teal-200 rounded-lg hover:bg-teal-100 hover:border-teal-300 transition-all group">
                        <div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-teal-200">
                            <i class="fab fa-weixin text-teal-600 text-xl"></i>
                        </div>
                        <span class="text-xs font-semibold text-teal-700">WeChat</span>
                    </a>
                    
                    <!-- IMO -->
                    <a href="javascript:void(0)" 
                       onclick="shareInvoiceIMO('{{ route('bookings.invoice', $booking) }}', '{{ $booking->customer->name }}')"
                       class="flex flex-col items-center justify-center p-4 bg-pink-50 border-2 border-pink-200 rounded-lg hover:bg-pink-100 hover:border-pink-300 transition-all group">
                        <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-pink-200">
                            <i class="fas fa-video text-pink-600 text-xl"></i>
                        </div>
                        <span class="text-xs font-semibold text-pink-700">IMO</span>
                    </a>
                    
                    <!-- Gmail -->
                    <a href="javascript:void(0)" 
                       onclick="shareInvoiceGmail('{{ $booking->customer->email ?? '' }}', '{{ route('bookings.invoice', $booking) }}', '{{ $booking->cntr_no }}', '{{ $booking->customer->name }}')"
                       class="flex flex-col items-center justify-center p-4 bg-red-50 border-2 border-red-200 rounded-lg hover:bg-red-100 hover:border-red-300 transition-all group">
                        <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-red-200">
                            <i class="fas fa-envelope text-red-600 text-xl"></i>
                        </div>
                        <span class="text-xs font-semibold text-red-700">Gmail</span>
                    </a>
                    
                    <!-- Delete -->
                    <form action="{{ route('bookings.destroy', $booking) }}" method="POST" class="block">
                        @csrf
                        @method('DELETE')
                        <button type="submit" onclick="return confirm('Are you sure you want to delete this booking?')"
                                class="w-full h-full flex flex-col items-center justify-center p-4 bg-gray-50 border-2 border-gray-200 rounded-lg hover:bg-gray-100 hover:border-gray-300 transition-all group">
                            <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mb-2 group-hover:bg-gray-200">
                                <i class="fas fa-trash-alt text-gray-600 text-lg"></i>
                            </div>
                            <span class="text-xs font-semibold text-gray-700">Delete</span>
                        </button>
                    </form>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Pagination -->
    <div class="mt-4">
        {{ $bookings->links() }}
    </div>

    <!-- Update Status Modal -->
    <div x-data="{ showStatusModal: false, bookingId: null, currentStatus: '' }" 
         @open-status-modal.window="showStatusModal = true; bookingId = $event.detail.bookingId; currentStatus = $event.detail.currentStatus"
         x-show="showStatusModal" 
         class="fixed inset-0 z-50 overflow-y-auto" 
         style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showStatusModal = false"></div>
            <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full p-6">
                <h3 class="text-lg font-bold text-gray-900 mb-4">Update Booking Status</h3>
                <form :action="'/bookings/' + bookingId + '/update-status'" method="POST">
                    @csrf
                    @method('PATCH')
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Select New Status</label>
                        <select name="status" x-model="currentStatus" class="block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                            <option value="Pending">Pending</option>
                            <option value="Loaded">Loaded</option>
                            <option value="In Transit">In Transit</option>
                            <option value="Arrived">Arrived</option>
                            <option value="Delivered">Delivered</option>
                            <option value="Damaged">Damaged</option>
                        </select>
                    </div>
                    <div class="flex gap-3 justify-end">
                        <button type="button" @click="showStatusModal = false" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                            Cancel
                        </button>
                        <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">
                            Update Status
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Update Payment Modal -->
    <div x-data="{ showPaymentModal: false, bookingId: null, totalAmount: 0, advancePaid: 0, dueAmount: 0, newPayment: 0 }" 
         @open-payment-modal.window="showPaymentModal = true; bookingId = $event.detail.bookingId; totalAmount = $event.detail.totalAmount; advancePaid = $event.detail.advancePaid; dueAmount = $event.detail.dueAmount; newPayment = 0"
         x-show="showPaymentModal" 
         class="fixed inset-0 z-50 overflow-y-auto" 
         style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showPaymentModal = false"></div>
            <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full p-6">
                <h3 class="text-lg font-bold text-gray-900 mb-4">Update Payment</h3>
                
                <!-- Payment Summary -->
                <div class="bg-gray-50 rounded-lg p-4 mb-4">
                    <div class="flex justify-between text-sm mb-2">
                        <span class="text-gray-600">Total Amount:</span>
                        <span class="font-bold text-gray-900" x-text="'Rs. ' + totalAmount.toLocaleString()"></span>
                    </div>
                    <div class="flex justify-between text-sm mb-2">
                        <span class="text-gray-600">Already Paid:</span>
                        <span class="font-semibold text-green-600" x-text="'Rs. ' + advancePaid.toLocaleString()"></span>
                    </div>
                    <div class="flex justify-between text-sm pt-2 border-t border-gray-200">
                        <span class="text-gray-600">Remaining Due:</span>
                        <span class="font-bold text-red-600" x-text="'Rs. ' + dueAmount.toLocaleString()"></span>
                    </div>
                </div>

                <form :action="'/bookings/' + bookingId + '/update-payment'" method="POST">
                    @csrf
                    @method('PATCH')
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Add Payment Amount</label>
                        <input type="number" name="payment_amount" x-model="newPayment" step="0.01" min="0" :max="dueAmount" class="block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter amount" required>
                        <p class="text-xs text-gray-500 mt-1">Maximum: Rs. <span x-text="dueAmount.toLocaleString()"></span></p>
                    </div>
                    
                    <!-- New Balance Preview -->
                    <div class="bg-indigo-50 rounded-lg p-3 mb-4" x-show="newPayment > 0">
                        <div class="flex justify-between text-sm">
                            <span class="text-indigo-700 font-medium">New Balance Due:</span>
                            <span class="font-bold text-indigo-900" x-text="'Rs. ' + Math.max(0, dueAmount - newPayment).toLocaleString()"></span>
                        </div>
                    </div>

                    <div class="flex gap-3 justify-end">
                        <button type="button" @click="showPaymentModal = false" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                            Cancel
                        </button>
                        <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-emerald-600 rounded-lg hover:bg-emerald-700">
                            Add Payment
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Booking Type Selection Modal -->
    <div x-show="showTypeModal" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;">
        <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" aria-hidden="true" @click="showTypeModal = false"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#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" style="display: none;">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Select Destination Country:</label>
                                    <div class="grid grid-cols-2 gap-2">
                                        @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="showTypeModal = 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>
</div>

<script>
function shareInvoiceWhatsApp(phone, invoiceUrl, cntrNo, totalAmount, customerName, advancePaid, dueAmount, pickupLocation, deliveryLocation, status) {
    // Clean phone number (remove spaces, dashes, etc.)
    let cleanPhone = phone.replace(/[^0-9+]/g, '');
    
    // If phone doesn't start with country code, add Pakistan code
    if (cleanPhone && !cleanPhone.startsWith('+') && !cleanPhone.startsWith('92')) {
        cleanPhone = '92' + cleanPhone.replace(/^0+/, '');
    }
    
    // Build complete invoice URL
    let fullInvoiceUrl = invoiceUrl;
    if (!invoiceUrl.startsWith('http')) {
        fullInvoiceUrl = window.location.origin + invoiceUrl;
    }
    
    // Get company name from settings or use default
    const companyName = '{{ \App\Models\Setting::get("company_name", "BAKHT RAWAN TRADING CO.") }}';
    
    // Create simple message
    const message = `*${companyName}*

السلام علیکم ${customerName}!

Customer: *${customerName}*
Mobile: *${phone}*

📄 Download Invoice:
${fullInvoiceUrl}

Thank you for choosing our services!
جزاک اللہ خیر`;
    
    // Encode message for URL
    const encodedMessage = encodeURIComponent(message);
    
    // Create WhatsApp URL
    let whatsappUrl;
    if (cleanPhone && cleanPhone.length > 5) {
        // Send to specific number
        whatsappUrl = `https://wa.me/${cleanPhone}?text=${encodedMessage}`;
    } else {
        // Open WhatsApp with message (user can choose contact)
        whatsappUrl = `https://wa.me/?text=${encodedMessage}`;
    }
    
    // Open WhatsApp in new window
    window.open(whatsappUrl, '_blank');
}

function shareInvoiceMessenger(invoiceUrl, customerName) {
    // Build complete invoice URL
    let fullInvoiceUrl = invoiceUrl;
    if (!invoiceUrl.startsWith('http')) {
        fullInvoiceUrl = window.location.origin + invoiceUrl;
    }
    
    const companyName = '{{ \App\Models\Setting::get("company_name", "BAKHT RAWAN TRADING CO.") }}';
    
    // Facebook Messenger share URL
    const messengerUrl = `fb-messenger://share?link=${encodeURIComponent(fullInvoiceUrl)}&app_id=YOUR_APP_ID`;
    
    // Fallback to web version
    const webMessengerUrl = `https://www.facebook.com/dialog/send?link=${encodeURIComponent(fullInvoiceUrl)}&app_id=YOUR_APP_ID&redirect_uri=${encodeURIComponent(window.location.href)}`;
    
    // Try to open messenger app, fallback to web
    window.open(webMessengerUrl, '_blank');
}

function shareInvoiceWeChat(invoiceUrl, customerName) {
    // Build complete invoice URL
    let fullInvoiceUrl = invoiceUrl;
    if (!invoiceUrl.startsWith('http')) {
        fullInvoiceUrl = window.location.origin + invoiceUrl;
    }
    
    const companyName = '{{ \App\Models\Setting::get("company_name", "BAKHT RAWAN TRADING CO.") }}';
    
    // WeChat doesn't have direct URL scheme, show QR code or copy link
    alert('Please copy this link and share it on WeChat:\n\n' + fullInvoiceUrl);
    
    // Copy to clipboard
    navigator.clipboard.writeText(fullInvoiceUrl).then(() => {
        console.log('Link copied to clipboard');
    }).catch(err => {
        console.error('Failed to copy:', err);
    });
}

function shareInvoiceIMO(invoiceUrl, customerName) {
    // Build complete invoice URL
    let fullInvoiceUrl = invoiceUrl;
    if (!invoiceUrl.startsWith('http')) {
        fullInvoiceUrl = window.location.origin + invoiceUrl;
    }
    
    const companyName = '{{ \App\Models\Setting::get("company_name", "BAKHT RAWAN TRADING CO.") }}';
    
    const message = `${companyName}\n\nDear ${customerName},\n\nDownload Invoice:\n${fullInvoiceUrl}\n\nThank you!`;
    
    // IMO doesn't have a direct share URL, copy to clipboard
    alert('Please copy this message and share it on IMO:\n\n' + message);
    
    navigator.clipboard.writeText(message).then(() => {
        console.log('Message copied to clipboard');
    }).catch(err => {
        console.error('Failed to copy:', err);
    });
}

function shareInvoiceGmail(email, invoiceUrl, cntrNo, customerName) {
    // Build complete invoice URL
    let fullInvoiceUrl = invoiceUrl;
    if (!invoiceUrl.startsWith('http')) {
        fullInvoiceUrl = window.location.origin + invoiceUrl;
    }
    
    const companyName = '{{ \App\Models\Setting::get("company_name", "BAKHT RAWAN TRADING CO.") }}';
    
    const subject = `Invoice - Booking ${cntrNo} - ${companyName}`;
    const body = `Dear ${customerName},

Assalam o Alaikum!

Please find your invoice for booking ${cntrNo}.

Download Invoice:
${fullInvoiceUrl}

Thank you for choosing our services!

Best Regards,
${companyName}`;
    
    // Gmail compose URL
    const gmailUrl = `https://mail.google.com/mail/?view=cm&fs=1&to=${encodeURIComponent(email)}&su=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    
    // Open Gmail in new window
    window.open(gmailUrl, '_blank');
}
</script>

<!-- Print Selection Modal -->
@if(session('print_booking_id'))
<div id="printModal" class="fixed inset-0 z-50 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" aria-hidden="true"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#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="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10">
                        <i class="fas fa-print text-purple-600"></i>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                        <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                            Select Receipt Type
                        </h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-500 mb-4">
                                Booking created successfully! Please select which document you want to print.
                            </p>
                            <div class="grid grid-cols-1 gap-3">
                                <a href="{{ route('bookings.cargo-slip', session('print_booking_id')) }}" target="_blank" class="flex items-center justify-between px-4 py-3 border border-gray-300 rounded-md hover:bg-purple-50 hover:border-purple-300 transition">
                                    <div class="flex items-center">
                                        <i class="fas fa-receipt text-purple-600 mr-3 text-lg"></i>
                                        <span class="font-medium text-gray-700">Cargo Slip (Bilti)</span>
                                    </div>
                                    <i class="fas fa-external-link-alt text-gray-400"></i>
                                </a>
                                <a href="{{ route('bookings.delivery-receipt', session('print_booking_id')) }}" target="_blank" class="flex items-center justify-between px-4 py-3 border border-gray-300 rounded-md hover:bg-purple-50 hover:border-purple-300 transition">
                                    <div class="flex items-center">
                                        <i class="fas fa-clipboard-check text-purple-600 mr-3 text-lg"></i>
                                        <span class="font-medium text-gray-700">Delivery Receipt</span>
                                    </div>
                                    <i class="fas fa-external-link-alt text-gray-400"></i>
                                </a>
                                <a href="{{ route('bookings.thermal-receipt', session('print_booking_id')) }}" target="_blank" class="flex items-center justify-between px-4 py-3 border border-gray-300 rounded-md hover:bg-purple-50 hover:border-purple-300 transition">
                                    <div class="flex items-center">
                                        <i class="fas fa-print text-purple-600 mr-3 text-lg"></i>
                                        <span class="font-medium text-gray-700">Thermal Receipt</span>
                                    </div>
                                    <i class="fas fa-external-link-alt text-gray-400"></i>
                                </a>
                                <a href="{{ route('bookings.invoice', session('print_booking_id')) }}" target="_blank" class="flex items-center justify-between px-4 py-3 border border-gray-300 rounded-md hover:bg-purple-50 hover:border-purple-300 transition">
                                    <div class="flex items-center">
                                        <i class="fas fa-file-invoice text-purple-600 mr-3 text-lg"></i>
                                        <span class="font-medium text-gray-700">Invoice</span>
                                    </div>
                                    <i class="fas fa-external-link-alt text-gray-400"></i>
                                </a>
                            </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" onclick="document.getElementById('printModal').remove()" 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">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Update Status Modal -->
<div x-data="{ 
    showStatusModal: false, 
    bookingId: null, 
    currentStatus: '', 
    newStatus: '' 
}" 
@open-status-modal.window="showStatusModal = true; bookingId = $event.detail.bookingId; currentStatus = $event.detail.currentStatus; newStatus = $event.detail.currentStatus">
    <div x-show="showStatusModal" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showStatusModal = false"></div>
            
            <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full p-6">
                <h3 class="text-lg font-bold text-gray-900 mb-4">Update Booking Status</h3>
                
                <form :action="`/bookings/${bookingId}/update-status`" method="POST">
                    @csrf
                    @method('PATCH')
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Current Status</label>
                        <input type="text" x-model="currentStatus" readonly class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100 text-gray-600">
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">New Status</label>
                        <select name="status" x-model="newStatus" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                            <option value="Pending">Pending</option>
                            <option value="Loaded">Loaded</option>
                            <option value="In Transit">In Transit</option>
                            <option value="Arrived">Arrived</option>
                            <option value="Delivered">Delivered</option>
                            <option value="Damaged">Damaged</option>
                        </select>
                    </div>
                    
                    <div class="flex gap-3">
                        <button type="button" @click="showStatusModal = false" class="flex-1 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                            Cancel
                        </button>
                        <button type="submit" class="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
                            Update Status
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Update Payment Modal -->
<div x-data="{ 
    showPaymentModal: false, 
    bookingId: null, 
    totalAmount: 0, 
    advancePaid: 0, 
    dueAmount: 0,
    newPayment: 0
}" 
@open-payment-modal.window="showPaymentModal = true; bookingId = $event.detail.bookingId; totalAmount = $event.detail.totalAmount; advancePaid = $event.detail.advancePaid; dueAmount = $event.detail.dueAmount; newPayment = 0"
x-init="$watch('newPayment', value => { dueAmount = totalAmount - (advancePaid + parseFloat(value || 0)) })">
    <div x-show="showPaymentModal" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showPaymentModal = false"></div>
            
            <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full p-6">
                <h3 class="text-lg font-bold text-gray-900 mb-4">Update Payment</h3>
                
                <form :action="`/bookings/${bookingId}/update-payment`" method="POST">
                    @csrf
                    @method('PATCH')
                    
                    <div class="mb-4 p-4 bg-gray-50 rounded-lg">
                        <div class="flex justify-between mb-2">
                            <span class="text-sm text-gray-600">Total Amount:</span>
                            <span class="text-sm font-bold text-gray-900" x-text="'Rs. ' + totalAmount.toLocaleString()"></span>
                        </div>
                        <div class="flex justify-between mb-2">
                            <span class="text-sm text-gray-600">Already Paid:</span>
                            <span class="text-sm font-semibold text-green-600" x-text="'Rs. ' + advancePaid.toLocaleString()"></span>
                        </div>
                        <div class="flex justify-between pt-2 border-t border-gray-200">
                            <span class="text-sm font-medium text-gray-700">Remaining Due:</span>
                            <span class="text-sm font-bold text-red-600" x-text="'Rs. ' + Math.max(0, dueAmount).toLocaleString()"></span>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Add Payment Amount</label>
                        <input type="number" name="payment_amount" x-model="newPayment" step="0.01" min="0" :max="dueAmount" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" placeholder="Enter amount">
                    </div>
                    
                    <div class="flex gap-3">
                        <button type="button" @click="showPaymentModal = false" class="flex-1 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                            Cancel
                        </button>
                        <button type="submit" class="flex-1 px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700">
                            Update Payment
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection