@extends('layouts.app')

@section('content')
<div class="min-h-[80vh] flex items-center justify-center p-4 sm:p-6 bg-background">
    <div class="max-w-md w-full mx-auto track-animate">

        {{-- Header section with illustration and status (matches OrderStatus React layout) --}}
        <div class="text-center space-y-3 mb-8 track-fade-item">
            <img
                src="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-HNciDluT0NAzIwovOE2g7EpZORt7CQ.png&w=320&q=75"
                alt="Order Tracking Illustration"
                class="w-36 h-36 mx-auto select-none pointer-events-none"
            />
            <h1 class="text-2xl font-bold text-gray-900 tracking-tight">অর্ডার ট্র্যাক করুন</h1>
            <p class="text-gray-500 text-sm">আপনার পার্সেলটি এখন কোথায় আছে জানুন</p>
        </div>

        {{-- Error Message --}}
        @if(session('error'))
            <div class="mb-6 p-4 rounded-xl border border-red-200 bg-red-50 text-red-700 text-sm flex items-center gap-3 track-fade-item">
                <i class="fa fa-circle-exclamation text-lg flex-shrink-0"></i>
                <span class="font-bold">{{ session('error') }}</span>
            </div>
        @endif

        {{-- Form Card (InfoCard style from React component) --}}
        <div class="rounded-xl border border-gray-200 bg-white text-gray-900 p-6 mb-6 shadow-sm track-fade-item">
            <h2 class="font-semibold text-lg text-gray-900 mb-5">ট্র্যাকিং তথ্য দিন</h2>

            <form action="{{ route('order.track.post') }}" method="POST" class="space-y-5">
                @csrf

                {{-- Order ID Input --}}
                <div class="group">
                    <label class="block text-xs font-medium text-gray-500 mb-1.5 ml-0.5">অর্ডার আইডি</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-gray-400 group-focus-within:text-orange-500 transition-colors">
                            <i class="fa fa-hashtag text-sm"></i>
                        </span>
                        <input type="text" name="order_id" required placeholder="উদা: 1025"
                            class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:bg-white focus:border-orange-500 focus:ring-2 focus:ring-orange-500/20 outline-none transition-all text-sm font-medium placeholder:font-normal text-gray-700">
                    </div>
                </div>

                {{-- Phone Number Input --}}
                <div class="group">
                    <label class="block text-xs font-medium text-gray-500 mb-1.5 ml-0.5">মোবাইল নম্বর</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-gray-400 group-focus-within:text-orange-500 transition-colors">
                            <i class="fa fa-phone text-sm"></i>
                        </span>
                        <input type="tel" name="customer_phone" required placeholder="017XXXXXXXX"
                            class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:bg-white focus:border-orange-500 focus:ring-2 focus:ring-orange-500/20 outline-none transition-all text-sm font-medium placeholder:font-normal text-gray-700">
                    </div>
                </div>

                {{-- Submit Button (matches shadcn Button primary style) --}}
                <button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 rounded-lg shadow-sm transition-all active:scale-[0.98] flex items-center justify-center gap-2 text-sm">
                    <span>Track order</span>
                    <i class="fa fa-arrow-right text-xs"></i>
                </button>
            </form>
        </div>

        {{-- Status hint + home link (matches trackingStatus text from React) --}}
        <div class="text-center space-y-3 track-fade-item">
            <p class="text-xs text-green-600 font-medium">আপনার অর্ডার আইডি ও মোবাইল নম্বর দিয়ে সহজেই ট্র্যাক করুন</p>
            <a href="{{ route('home') }}" class="inline-flex items-center gap-2 text-xs font-medium text-gray-400 hover:text-orange-500 transition-colors">
                <i class="fa fa-house"></i>
                <span>হোম পেজে ফিরে যান</span>
            </a>
        </div>

        {{-- Help Text --}}
        <p class="text-center mt-6 text-gray-400 text-[11px] font-medium px-4">
            অর্ডার সংক্রান্ত কোনো সমস্যা হলে সরাসরি আমাদের <a href="https://wa.me/8801700000000" class="text-green-600 font-bold underline">হোয়াটসঅ্যাপে</a> যোগাযোগ করুন।
        </p>
    </div>
</div>

<style>
    /* Staggered fade-in animation (replicates Framer Motion staggerChildren) */
    .track-animate .track-fade-item {
        opacity: 0;
        transform: translateY(20px);
        animation: trackFadeIn 0.4s ease-out forwards;
    }
    .track-animate .track-fade-item:nth-child(1) { animation-delay: 0.1s; }
    .track-animate .track-fade-item:nth-child(2) { animation-delay: 0.2s; }
    .track-animate .track-fade-item:nth-child(3) { animation-delay: 0.3s; }
    .track-animate .track-fade-item:nth-child(4) { animation-delay: 0.4s; }
    .track-animate .track-fade-item:nth-child(5) { animation-delay: 0.5s; }

    @keyframes trackFadeIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
@endsection