@extends('layouts.frontend')

@section('title', 'Track Shipment')

@section('content')
<div class="bg-gray-50 min-h-screen py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Search Section -->
        <div class="text-center mb-12">
            <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl mb-4">Track Your Shipment</h1>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">Enter your container number below to see the current status of your cargo delivery.</p>
        </div>

        <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-lg p-6 sm:p-10 mb-12">
            <form action="{{ route('frontend.track') }}" method="GET" class="relative">
                <div class="flex flex-col sm:flex-row gap-4">
                    <div class="relative flex-grow">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400"></i>
                        </div>
                        <input type="text" name="cntr_no" id="cntr_no" value="{{ $cntr_no ?? '' }}" 
                            class="block w-full pl-12 pr-4 py-4 text-base border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 shadow-sm" 
                            placeholder="Enter CNTR Number (e.g. CNTR-2024-001)" required>
                    </div>
                    <button type="submit" class="inline-flex justify-center items-center px-8 py-4 border border-transparent text-base font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 shadow-sm transition-colors">
                        Track Result
                    </button>
                </div>
            </form>
        </div>

        @if(isset($cntr_no) && $cntr_no)
            @if($booking)
                <!-- Tracking Result -->
                <div class="max-w-4xl mx-auto">
                    <!-- Status Banner -->
                    <div class="bg-white rounded-t-xl shadow-lg overflow-hidden border-b border-gray-100">
                        <div class="p-6 sm:p-8 bg-indigo-600 text-white flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                            <div>
                                <p class="text-indigo-100 text-sm uppercase tracking-wider font-semibold mb-1">Shipment Number</p>
                                <h2 class="text-3xl font-bold">{{ $booking->cntr_no }}</h2>
                            </div>
                            <div class="flex items-center bg-white/20 backdrop-blur-sm px-4 py-2 rounded-lg">
                                <span class="text-sm font-medium mr-2">Status:</span>
                                <span class="font-bold uppercase tracking-wide">{{ $booking->status }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Details Grid -->
                    <div class="bg-white shadow-lg p-6 sm:p-8 grid grid-cols-1 md:grid-cols-2 gap-8">
                        <!-- Origin & Destination -->
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-500">Origin</p>
                                    <p class="text-lg font-bold text-gray-900">{{ $booking->pickup_location }}</p>
                                    <p class="text-sm text-gray-600">{{ $booking->pickup_date->format('d M, Y') }}</p>
                                </div>
                            </div>
                            
                            <div class="pl-4 border-l-2 border-indigo-100 ml-4 h-8"></div>

                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                                        <i class="fas fa-flag-checkered"></i>
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-500">Destination</p>
                                    <p class="text-lg font-bold text-gray-900">{{ $booking->delivery_location }}</p>
                                    <p class="text-sm text-gray-600">{{ $booking->delivery_date ? $booking->delivery_date->format('d M, Y') : 'Estimated Delivery' }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Cargo Info -->
                        <div class="space-y-6 bg-gray-50 rounded-lg p-6">
                            <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Cargo Details</h3>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <p class="text-xs text-gray-500">Quantity</p>
                                    <p class="font-medium text-gray-900">{{ $booking->carton_count }} Cartons</p>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500">Weight</p>
                                    <p class="font-medium text-gray-900">{{ $booking->weight_kg }} kg</p>
                                </div>
                                <div class="col-span-2">
                                    <p class="text-xs text-gray-500">Items Description</p>
                                    <p class="font-medium text-gray-900">{{ $booking->cargo_description }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Timeline -->
                    <div class="bg-white rounded-b-xl shadow-lg p-6 sm:p-8 border-t border-gray-100">
                        <h3 class="text-lg font-bold text-gray-900 mb-6">Tracking History</h3>
                        <div class="flow-root">
                            <ul role="list" class="-mb-8">
                                @forelse($booking->tracking->sortByDesc('status_date') as $track)
                                    <li>
                                        <div class="relative pb-8">
                                            @if(!$loop->last)
                                                <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                                            @endif
                                            <div class="relative flex space-x-3">
                                                <div>
                                                    <span class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white
                                                        @if($track->status == 'Delivered') bg-green-500
                                                        @elseif($track->status == 'In Transit') bg-blue-500
                                                        @elseif($track->status == 'Pending') bg-yellow-500
                                                        @elseif($track->status == 'Damaged') bg-red-500
                                                        @else bg-gray-500
                                                        @endif">
                                                        <i class="fas fa-check text-white text-xs"></i>
                                                    </span>
                                                </div>
                                                <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                                    <div>
                                                        <p class="text-sm text-gray-500">
                                                            <span class="font-medium text-gray-900">{{ $track->status }}</span> 
                                                            at <span class="font-medium text-gray-900">{{ $track->location }}</span>
                                                        </p>
                                                        @if($track->remarks)
                                                            <p class="mt-1 text-sm text-gray-500">{{ $track->remarks }}</p>
                                                        @endif
                                                    </div>
                                                    <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                                        <time datetime="{{ $track->status_date }}">{{ $track->status_date->format('M d, H:i') }}</time>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @empty
                                    <li>
                                        <div class="relative pb-8">
                                            <div class="relative flex space-x-3">
                                                <div>
                                                    <span class="h-8 w-8 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white">
                                                        <i class="fas fa-circle text-white text-xs"></i>
                                                    </span>
                                                </div>
                                                <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                                    <div>
                                                        <p class="text-sm text-gray-500">Booking Created</p>
                                                    </div>
                                                    <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                                        <time datetime="{{ $booking->created_at }}">{{ $booking->created_at->format('M d, H:i') }}</time>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforelse
                            </ul>
                        </div>
                    </div>
                </div>
            @else
                <div class="max-w-xl mx-auto text-center py-12 bg-white rounded-xl shadow-lg">
                    <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-exclamation-triangle text-red-500 text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900">Shipment Not Found</h3>
                    <p class="mt-2 text-gray-500">We couldn't find any shipment with the number <span class="font-mono font-bold text-gray-800">{{ $cntr_no }}</span>.</p>
                    <p class="mt-1 text-sm text-gray-400">Please check the number and try again.</p>
                </div>
            @endif
        @endif
    </div>
</div>
@endsection