@extends('layouts.home')

@section('title','Track Parcel | SriCourier')
@section('meta_description','Track your parcel in real time with SriCourier live delivery tracking.')

@section('content')

<!-- HERO -->
<section class="relative bg-black text-white">
    <div class="absolute inset-0 bg-gradient-to-r from-black/90 to-black/60"></div>

    <div class="relative max-w-4xl mx-auto px-6 py-24 text-center">
        <h1 class="text-4xl md:text-5xl font-extrabold">
            Track Your <span class="text-[#f97316]">Parcel</span>
        </h1>
        <p class="mt-4 text-gray-300">
            Enter your tracking number to see live delivery updates
        </p>

        <!-- TRACK FORM -->
        <form method="GET" action="{{ route('track') }}"
              class="mt-8 bg-white rounded-2xl shadow-lg p-3 flex gap-3">
            <input type="text"
                   name="tracking_no"
                   value="{{ request('tracking_no') }}"
                   class="flex-1 px-4 py-3 rounded-xl text-gray-700 focus:outline-none"
                   placeholder="e.g. SC-239485"
                   required>
            <button class="bg-[#f97316] hover:bg-orange-600 text-white px-6 rounded-xl font-semibold">
                Track
            </button>
        </form>
    </div>
</section>

{{-- ================= TRACK RESULT ================= --}}
@if(request('tracking_no'))

@php
    // later this will come from controller
    $orderFound = true;
@endphp

<section class="py-20 bg-gray-50">
<div class="max-w-6xl mx-auto px-6 space-y-12">

@if($orderFound)

<!-- SUMMARY -->
<div class="bg-white rounded-2xl shadow p-8 grid md:grid-cols-4 gap-6 text-center">
    <div>
        <p class="text-sm text-gray-500">Tracking No</p>
        <p class="font-semibold">SC-239485</p>
    </div>
    <div>
        <p class="text-sm text-gray-500">Status</p>
        <span class="inline-block bg-orange-100 text-[#f97316] px-4 py-1 rounded-full font-semibold">
            Out for Delivery
        </span>
    </div>
    <div>
        <p class="text-sm text-gray-500">City</p>
        <p class="font-semibold">Colombo</p>
    </div>
    <div>
        <p class="text-sm text-gray-500">ETA</p>
        <p class="font-semibold">Today · 5:30 PM</p>
    </div>
</div>

<!-- FLOATING STATUS -->
<div class="fixed bottom-6 right-6 bg-white shadow-xl rounded-2xl p-4 w-80 z-50">
    <div class="flex gap-3">
        <div class="text-[#f97316] text-2xl">📦</div>
        <div>
            <p class="font-semibold">Parcel Update</p>
            <p class="text-sm text-gray-500">
                Out for delivery · ETA today
            </p>
        </div>
    </div>
</div>

<!-- TIMELINE -->
<div class="bg-white rounded-2xl shadow p-8">
    <h3 class="text-xl font-bold mb-6">Delivery Progress</h3>

    <ol class="relative border-l border-gray-200 ml-3 space-y-8">
        @foreach([
            ['Order Placed','✔','Completed'],
            ['Picked Up','🚚','Completed'],
            ['In Transit','📦','Completed'],
            ['Out for Delivery','📍','Current'],
            ['Delivered','🏁','Pending']
        ] as [$title,$icon,$state])

        <li class="ml-6">
            <span class="absolute -left-3 w-6 h-6 rounded-full flex items-center justify-center text-white text-sm
                {{ $state === 'Completed' ? 'bg-green-500' : ($state === 'Current' ? 'bg-[#f97316]' : 'bg-gray-300') }}">
                {{ $icon }}
            </span>

            <h4 class="font-semibold">{{ $title }}</h4>
            <p class="text-sm text-gray-500">{{ $state }}</p>
        </li>
        @endforeach
    </ol>
</div>

<!-- DRIVER + MAP -->
<div class="grid md:grid-cols-2 gap-8">

    <!-- DRIVER -->
    <div class="bg-white rounded-2xl shadow p-8">
        <h3 class="text-xl font-bold mb-4">Delivery Partner</h3>

        <div class="flex items-center gap-4">
            <img src="https://ui-avatars.com/api/?name=Driver"
                 class="w-14 h-14 rounded-full">

            <div>
                <p class="font-semibold">Amila Malmeewala</p>
                <p class="text-sm text-gray-500">📞 +94 77 XXX XXXX</p>
            </div>
        </div>

        <p class="mt-4 text-sm text-gray-600">
            Vehicle: <strong>Bike</strong> · No: <strong>WP-BG-2345</strong>
        </p>
    </div>

    <!-- MAP PLACEHOLDER -->
    <div class="bg-white rounded-2xl shadow flex items-center justify-center h-72 text-gray-400">
        🗺 Live map will appear here
    </div>

</div>

@else

<!-- NOT FOUND -->
<div class="bg-white rounded-2xl shadow p-12 text-center">
    <h3 class="text-2xl font-bold text-red-500 mb-4">
        Tracking Not Found
    </h3>
    <p class="text-gray-500">
        Please check your tracking number and try again.
    </p>
</div>

@endif
</div>
</section>

@endif
<!-- CTA -->
<section class="py-24 bg-[#f97316] text-white text-center">
    <h2 class="text-4xl font-bold mb-4">Let’s Move Smarter Together</h2>
    <p class="mb-8 text-white/90">
        Join SriCourier as a merchant or delivery partner
    </p>

    <div class="flex justify-center gap-4">
        <a href="{{ route('merchant.register') }}"
           class="bg-white text-black px-8 py-4 rounded-xl font-semibold">
            Become a Merchant
        </a>
        <a href="{{ route('driver.register') }}"
           class="border border-white px-8 py-4 rounded-xl">
            Become a Driver
        </a>
    </div>
</section>

@endsection