@extends('layouts.app')

@section('title', 'Track Your Order')

@section('content')
<div class="max-w-lg mx-auto px-4 py-16">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
        <div class="text-center mb-8">
            <div class="text-5xl mb-3">📦</div>
            <h1 class="text-2xl font-bold text-gray-900">Track Your Order</h1>
            <p class="text-gray-500 mt-1">Enter your order details to see its status</p>
        </div>

        @if($errors->any())
        <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">
            @foreach($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
        @endif

        <form method="POST" action="{{ route('orders.track.lookup') }}" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Order ID</label>
                <input type="text"
                       name="order_uuid"
                       value="{{ old('order_uuid') }}"
                       placeholder="e.g. 550e8400-e29b-41d4-a716..."
                       class="w-full border border-gray-300 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary/30 focus:border-primary">
                <p class="text-xs text-gray-400 mt-1">Found in your order confirmation email</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Last 4 digits of your phone</label>
                <input type="text"
                       name="phone_last4"
                       maxlength="4"
                       pattern="\d{4}"
                       placeholder="e.g. 5678"
                       class="w-full border border-gray-300 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary/30 focus:border-primary">
            </div>
            <button type="submit"
                    class="w-full bg-primary text-white py-3 rounded-xl font-semibold hover:bg-primary/90 transition">
                Track Order →
            </button>
        </form>

        @auth
        <div class="mt-6 pt-6 border-t border-gray-100 text-center">
            <p class="text-sm text-gray-500">Logged in?
                <a href="{{ route('orders.index') }}" class="text-primary hover:underline font-medium">View all your orders</a>
            </p>
        </div>
        @endauth
    </div>
</div>
@endsection