@extends('layouts.app')

@section('title', 'Track Shipment')
@section('page-title', 'Track Your Shipment')

@section('content')
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Search Section -->
    <div class="bg-white rounded-xl shadow-lg p-6 md:p-10 mb-8 transform transition hover:scale-[1.01] duration-300">
        <div class="text-center mb-8">
            <h2 class="text-3xl font-bold text-gray-800 mb-2">Track Your Shipment</h2>
            <p class="text-gray-500">Enter your Container Number (CNTR) to see the current status</p>
        </div>
        <form action="{{ route('track') }}" method="GET" class="max-w-2xl mx-auto">
            <div class="flex flex-col md:flex-row gap-4">
                <div class="relative flex-1">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                        <i class="fas fa-barcode text-gray-400 text-lg"></i>
                    </div>
                    <input type="text" name="cntr_no" value="{{ $cntr_no ?? '' }}" placeholder="Enter CNTR Number (e.g., CNTR-2024-001)" required
                        class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-lg shadow-sm transition-all">
                </div>
                <button type="submit" class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold rounded-lg hover:from-indigo-700 hover:to-purple-700 shadow-lg transform hover:-translate-y-0.5 transition-all flex items-center justify-center gap-2">
                    <i class="fas fa-search"></i> Track Now
                </button>
            </div>
        </form>
    </div>

    @if(isset($booking))
        @if($booking)
        <!-- Shipment Status Banner -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
            <div class="bg-gradient-to-r from-gray-50 to-gray-100 p-6 border-b border-gray-200">
                <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                    <div>
                        <span class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Shipment Number</span>
                        <h3 class="text-2xl md:text-3xl font-extrabold text-indigo-700">{{ $booking->cntr_no }}</h3>
                    </div>
                    <div class="flex items-center gap-3">
                        <span class="text-sm font-medium text-gray-500">Current Status:</span>
                        <span class="px-4 py-2 rounded-full text-sm font-bold shadow-sm uppercase tracking-wide
                            @if($booking->status == 'Delivered') bg-green-100 text-green-700 border border-green-200
                            @elseif($booking->status == 'In Transit') bg-blue-100 text-blue-700 border border-blue-200
                            @elseif($booking->status == 'Pending') bg-yellow-100 text-yellow-700 border border-yellow-200
                            @elseif($booking->status == 'Damaged') bg-red-100 text-red-700 border border-red-200
                            @else bg-gray-100 text-gray-700 border border-gray-200
                            @endif">
                            <i class="fas fa-circle text-[10px] mr-2"></i>{{ $booking->status }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Shipment Details Grid -->
            <div class="p-6 md:p-8">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- Customer Info -->
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 rounded-full bg-indigo-50 flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-user text-indigo-600 text-xl"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500 mb-1">Customer / Receiver</p>
                            <p class="font-bold text-gray-800">{{ $booking->receiver_name ?? $booking->customer->name }}</p>
                            <p class="text-sm text-gray-600">{{ $booking->receiver_phone ?? $booking->customer->phone }}</p>
                        </div>
                    </div>

                    <!-- Origin -->
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-map-marker-alt text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500 mb-1">Origin</p>
                            <p class="font-bold text-gray-800">{{ $booking->pickup_location }}</p>
                            <p class="text-sm text-gray-600">{{ $booking->pickup_date->format('d M, Y') }}</p>
                        </div>
                    </div>

                    <!-- Destination -->
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-flag-checkered text-green-600 text-xl"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500 mb-1">Destination</p>
                            <p class="font-bold text-gray-800">{{ $booking->delivery_location }}</p>
                            <p class="text-sm text-gray-600">{{ $booking->delivery_date ? $booking->delivery_date->format('d M, Y') : 'Estimated' }}</p>
                        </div>
                    </div>

                    <!-- Cargo Details -->
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 rounded-full bg-orange-50 flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-box-open text-orange-600 text-xl"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500 mb-1">Cargo Details</p>
                            <p class="font-bold text-gray-800">{{ $booking->carton_count ?? 0 }} Cartons</p>
                            <p class="text-sm text-gray-600">{{ number_format($booking->weight_kg, 2) }} KG | {{ number_format($booking->volume_cbm, 2) }} CBM</p>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="col-span-1 md:col-span-2 lg:col-span-2 flex items-start gap-4">
                        <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-info-circle text-purple-600 text-xl"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500 mb-1">Description</p>
                            <p class="text-gray-800 leading-relaxed">{{ $booking->cargo_description }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tracking Timeline -->
        <div class="bg-white rounded-xl shadow-lg p-6 md:p-8">
            <h4 class="text-xl font-bold text-gray-800 mb-8 flex items-center">
                <i class="fas fa-history text-indigo-600 mr-3"></i> Shipment Progress
            </h4>
            
            <div class="relative pl-4 md:pl-8 border-l-2 border-indigo-100 space-y-8">
                <!-- Current Status (Top) -->
                <div class="relative">
                    <div class="absolute -left-[25px] md:-left-[41px] bg-indigo-600 h-8 w-8 md:h-10 md:w-10 rounded-full border-4 border-white shadow-md flex items-center justify-center">
                        <i class="fas fa-check text-white text-xs md:text-sm"></i>
                    </div>
                    <div class="bg-indigo-50 rounded-lg p-4 ml-4 md:ml-6 shadow-sm border border-indigo-100">
                        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2">
                            <div>
                                <h5 class="font-bold text-indigo-900 text-lg">{{ $booking->status }}</h5>
                                <p class="text-indigo-700 mt-1">Current Status</p>
                            </div>
                            <span class="text-sm font-medium text-indigo-600 bg-white px-3 py-1 rounded-full shadow-sm whitespace-nowrap">
                                {{ now()->format('d M, Y H:i') }} (Latest)
                            </span>
                        </div>
                    </div>
                </div>

                @forelse($booking->tracking as $track)
                <div class="relative">
                    <div class="absolute -left-[25px] md:-left-[41px] bg-white h-8 w-8 md:h-10 md:w-10 rounded-full border-4 border-gray-200 shadow-sm flex items-center justify-center">
                        <i class="fas fa-map-marker-alt text-gray-400 text-xs md:text-sm"></i>
                    </div>
                    <div class="ml-4 md:ml-6 group">
                        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-1">
                            <div>
                                <h5 class="font-bold text-gray-800 text-lg group-hover:text-indigo-600 transition-colors">{{ $track->status }}</h5>
                                <p class="text-gray-600 font-medium">{{ $track->location }}</p>
                                @if($track->remarks)
                                    <p class="text-sm text-gray-500 mt-2 bg-gray-50 p-3 rounded-lg border border-gray-100 italic">
                                        <i class="fas fa-quote-left text-gray-300 mr-2"></i>{{ $track->remarks }}
                                    </i class="fas fa-quote-right text-gray-300 ml-2"></i>
                                    </p>
                                @endif
                            </div>
                            <span class="text-sm text-gray-500 font-medium whitespace-nowrap mt-1 sm:mt-0">
                                {{ $track->status_date->format('d M, Y H:i') }}
                            </span>
                        </div>
                    </div>
                </div>
                @empty
                <!-- Initial Booking State -->
                <div class="relative">
                    <div class="absolute -left-[25px] md:-left-[41px] bg-white h-8 w-8 md:h-10 md:w-10 rounded-full border-4 border-gray-200 shadow-sm flex items-center justify-center">
                        <i class="fas fa-file-alt text-gray-400 text-xs md:text-sm"></i>
                    </div>
                    <div class="ml-4 md:ml-6">
                        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-1">
                            <div>
                                <h5 class="font-bold text-gray-800 text-lg">Shipment Booked</h5>
                                <p class="text-gray-600">{{ $booking->pickup_location }}</p>
                            </div>
                            <span class="text-sm text-gray-500 font-medium whitespace-nowrap">
                                {{ $booking->booking_date->format('d M, Y') }}
                            </span>
                        </div>
                    </div>
                </div>
                @endforelse
            </div>
        </div>
        @else
        <!-- Not Found State -->
        <div class="bg-red-50 border-l-4 border-red-500 p-6 rounded-lg shadow-sm max-w-2xl mx-auto text-center">
            <div class="flex flex-col items-center justify-center">
                <div class="bg-red-100 p-3 rounded-full mb-3">
                    <i class="fas fa-exclamation-triangle text-red-500 text-2xl"></i>
                </div>
                <h3 class="text-lg font-bold text-red-800 mb-1">Shipment Not Found</h3>
                <p class="text-red-600">We couldn't find any shipment with the number <span class="font-mono font-bold">{{ $cntr_no }}</span>.</p>
                <p class="text-sm text-red-500 mt-2">Please check the number and try again.</p>
            </div>
        </div>
        @endif
    @endif
</div>
@endsection