@extends('layouts.app')

@section('title', 'Booking Details')
@section('page-title', 'Booking Details')

@section('content')
<div class="max-w-6xl mx-auto">
    <div class="mb-6 flex justify-between items-center">
        <h3 class="text-2xl font-bold text-gray-800">CNTR NO: {{ $booking->cntr_no }}</h3>
        <div class="space-x-3">
            <a href="{{ route('bookings.edit', $booking) }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                <i class="fas fa-edit mr-2"></i>Edit
            </a>
            <div class="relative inline-block">
                <button onclick="togglePrintDropdown()" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
                    <i class="fas fa-print mr-2"></i>Print Documents
                </button>
                <div id="printDropdown" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-xl z-10 border border-gray-200">
                    <a href="{{ route('bookings.invoice', $booking) }}" target="_blank" class="block px-4 py-3 text-sm text-gray-700 hover:bg-purple-50 border-b">
                        <i class="fas fa-file-invoice mr-2 text-purple-600"></i>
                        <strong>Invoice</strong>
                        <p class="text-xs text-gray-500">Professional invoice</p>
                    </a>
                    <a href="{{ route('bookings.cargo-slip', $booking) }}" target="_blank" class="block px-4 py-3 text-sm text-gray-700 hover:bg-purple-50 border-b">
                        <i class="fas fa-receipt mr-2 text-green-600"></i>
                        <strong>Cargo Slip (Bilti)</strong>
                        <p class="text-xs text-gray-500">بلٹی / Cargo receipt</p>
                    </a>
                    <a href="{{ route('bookings.delivery-receipt', $booking) }}" target="_blank" class="block px-4 py-3 text-sm text-gray-700 hover:bg-purple-50 border-b">
                        <i class="fas fa-clipboard-check mr-2 text-blue-600"></i>
                        <strong>Delivery Receipt</strong>
                        <p class="text-xs text-gray-500">Proof of delivery</p>
                    </a>
                    <a href="{{ route('bookings.pdf', $booking) }}" class="block px-4 py-3 text-sm text-gray-700 hover:bg-purple-50">
                        <i class="fas fa-download mr-2 text-orange-600"></i>
                        <strong>Download PDF</strong>
                        <p class="text-xs text-gray-500">Save invoice as PDF</p>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
    function togglePrintDropdown() {
        document.getElementById('printDropdown').classList.toggle('hidden');
    }
    
    // Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
        const dropdown = document.getElementById('printDropdown');
        const button = event.target.closest('button');
        if (!button || !button.onclick || button.onclick.toString().indexOf('togglePrintDropdown') === -1) {
            if (!event.target.closest('#printDropdown')) {
                dropdown.classList.add('hidden');
            }
        }
    });
    </script>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Customer Information -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h4 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Customer Information</h4>
            <div class="space-y-3">
                <div>
                    <p class="text-sm text-gray-500">Name</p>
                    <p class="text-gray-800 font-medium">{{ $booking->customer->name }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Email</p>
                    <p class="text-gray-800">{{ $booking->customer->email }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Phone</p>
                    <p class="text-gray-800">{{ $booking->customer->phone }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Address</p>
                    <p class="text-gray-800">{{ $booking->customer->address }}, {{ $booking->customer->city }}</p>
                </div>
            </div>
        </div>

        <!-- Booking Information -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h4 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Booking Information</h4>
            <div class="space-y-3">
                <div>
                    <p class="text-sm text-gray-500">Status</p>
                    <span class="inline-block px-3 py-1 rounded-full text-sm font-semibold
                        @if($booking->status == 'Delivered') bg-green-100 text-green-800
                        @elseif($booking->status == 'In Transit') bg-blue-100 text-blue-800
                        @else bg-yellow-100 text-yellow-800
                        @endif">
                        {{ $booking->status }}
                    </span>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Booking Date</p>
                    <p class="text-gray-800 font-medium">{{ $booking->booking_date->format('Y-m-d') }}</p>
                </div>
                @if($booking->loading_date)
                <div>
                    <p class="text-sm text-gray-500">Loading Date</p>
                    <p class="text-gray-800 font-medium">{{ \Carbon\Carbon::parse($booking->loading_date)->format('Y-m-d') }}</p>
                </div>
                @endif
                @if($booking->shipping_date)
                <div>
                    <p class="text-sm text-gray-500">Shipping Date</p>
                    <p class="text-gray-800 font-medium">{{ \Carbon\Carbon::parse($booking->shipping_date)->format('Y-m-d') }}</p>
                </div>
                @endif
                <div>
                    <p class="text-sm text-gray-500">Pickup Date</p>
                    <p class="text-gray-800">{{ $booking->pickup_date->format('Y-m-d') }}</p>
                </div>
                @if($booking->delivery_date)
                <div>
                    <p class="text-sm text-gray-500">Delivery Date</p>
                    <p class="text-gray-800">{{ $booking->delivery_date->format('Y-m-d') }}</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Shipment Details -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h4 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Shipment Details</h4>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div>
                <p class="text-sm text-gray-500">Pickup Location</p>
                <p class="text-gray-800 font-medium">{{ $booking->pickup_location }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Delivery Location</p>
                <p class="text-gray-800 font-medium">{{ $booking->delivery_location }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Weight (KG)</p>
                <p class="text-gray-800 font-medium">{{ number_format($booking->weight_kg, 2) }}</p>
            </div>
            @if($booking->volume_cbm)
            <div>
                <p class="text-sm text-gray-500">Volume (CBM)</p>
                <p class="text-gray-800 font-medium">{{ number_format($booking->volume_cbm, 2) }}</p>
            </div>
            @endif
            @if($booking->carton_count)
            <div>
                <p class="text-sm text-gray-500">Carton Count</p>
                <p class="text-gray-800 font-medium">{{ $booking->carton_count }}</p>
            </div>
            @endif
        </div>
        <div class="mt-4">
            <p class="text-sm text-gray-500">Cargo Description</p>
            <p class="text-gray-800">{{ $booking->cargo_description }}</p>
        </div>
        @if($booking->notes)
        <div class="mt-4">
            <p class="text-sm text-gray-500">Notes</p>
            <p class="text-gray-800">{{ $booking->notes }}</p>
        </div>
        @endif
    </div>

    <!-- Cargo Items -->
    @if($booking->items && $booking->items->count() > 0)
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h4 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Cargo Items</h4>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead>
                    <tr>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                        <th class="px-6 py-3 bg-gray-50 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
                        <th class="px-6 py-3 bg-gray-50 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Unit</th>
                        <th class="px-6 py-3 bg-gray-50 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Rate</th>
                        <th class="px-6 py-3 bg-gray-50 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($booking->items as $item)
                    <tr>
                        <td class="px-6 py-4 text-sm text-gray-900 font-medium">{{ $item->description }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 text-center">{{ number_format($item->quantity, 2) }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-center">
                            <span class="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full font-semibold">
                                {{ strtoupper($item->unit ?? 'PCS') }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 text-right">{{ number_format($item->rate, 2) }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-bold text-right">{{ \App\Helpers\CurrencyHelper::format($item->amount) }}</td>
                    </tr>
                    @endforeach
                    <tr class="bg-gray-50 font-bold">
                        <td class="px-6 py-4 text-sm text-gray-900" colspan="4">TOTAL</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">
                            {{ \App\Helpers\CurrencyHelper::format($booking->items->sum('amount')) }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    @endif

    <!-- Payment Details -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h4 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Payment Details</h4>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div>
                <p class="text-sm text-gray-500">Total Amount</p>
                <p class="text-gray-800 font-bold text-2xl">{{ \App\Helpers\CurrencyHelper::format($booking->total_amount) }}</p>
            </div>
            @if($booking->discount > 0)
            <div>
                <p class="text-sm text-gray-500">Discount</p>
                <p class="text-red-600 font-bold text-2xl">- {{ \App\Helpers\CurrencyHelper::format($booking->discount) }}</p>
            </div>
            @endif
            <div>
                <p class="text-sm text-gray-500">Advance Payment</p>
                <p class="text-green-600 font-bold text-2xl">{{ \App\Helpers\CurrencyHelper::format($booking->advance_payment) }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Due Payment</p>
                <p class="text-red-600 font-bold text-2xl">{{ \App\Helpers\CurrencyHelper::format($booking->due_payment) }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Payment Status</p>
                <span class="inline-block px-4 py-2 rounded-full text-sm font-semibold
                    @if($booking->payment_status == 'Paid') bg-green-100 text-green-800
                    @elseif($booking->payment_status == 'Partial') bg-yellow-100 text-yellow-800
                    @else bg-red-100 text-red-800
                    @endif">
                    {{ $booking->payment_status }}
                </span>
            </div>
        </div>
    </div>

    <!-- Tracking History -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h4 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Tracking History</h4>
        @forelse($booking->tracking as $track)
        <div class="flex items-start mb-4 pb-4 border-b last:border-b-0">
            <div class="flex-shrink-0 w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center">
                <i class="fas fa-map-marker-alt text-white"></i>
            </div>
            <div class="ml-4 flex-1">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="font-semibold text-gray-800">{{ $track->status }}</p>
                        <p class="text-sm text-gray-600">{{ $track->location }}</p>
                        @if($track->remarks)
                            <p class="text-sm text-gray-500 mt-1">{{ $track->remarks }}</p>
                        @endif
                    </div>
                    <span class="text-sm text-gray-500">{{ $track->status_date->format('Y-m-d H:i') }}</span>
                </div>
            </div>
        </div>
        @empty
        <p class="text-gray-500 text-center py-4">No tracking history available</p>
        @endforelse
    </div>
</div>
@endsection