@extends('public.layout')

@section('title', 'Track your order · '.config('app.name'))
@section('meta')<meta name="robots" content="noindex">@endsection

@section('content')
    @php $field = 'mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500'; @endphp

    <div class="space-y-5 rounded-xl bg-white p-6 shadow-sm">
        <div>
            <h1 class="text-xl font-bold">Track your order</h1>
            <p class="mt-1 text-sm text-gray-600">Enter the order number from your confirmation page and the phone number you ordered with.</p>
        </div>

        @if ($errors->any())
            <div class="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800">
                <ul class="list-disc ps-5">@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            </div>
        @endif

        @if (session('matches'))
            <div class="rounded-md border border-indigo-200 bg-indigo-50 p-4 text-sm">
                <div class="font-medium text-indigo-900">More than one shop has an order with that number. Pick yours:</div>
                <ul class="mt-2 divide-y divide-indigo-100">
                    @foreach (session('matches') as $m)
                        <li class="flex items-center justify-between gap-3 py-2">
                            <span><strong>{{ $m['shop'] }}</strong> · {{ $m['order_no'] }} · {{ ucfirst($m['status']) }}</span>
                            <a href="{{ $m['url'] }}" class="font-medium text-indigo-700 hover:underline">View</a>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('public.track.lookup') }}" class="space-y-4">
            @csrf
            <div>
                <label for="order" class="text-sm font-medium text-gray-700">Order number</label>
                <input id="order" name="order" value="{{ old('order') }}" required maxlength="40" autocomplete="off" autocapitalize="characters" class="{{ $field }}" placeholder="ORD-000123">
            </div>
            <div>
                <label for="phone" class="text-sm font-medium text-gray-700">Phone number used for the order</label>
                <input id="phone" name="phone" value="{{ old('phone') }}" required inputmode="tel" autocomplete="tel" class="{{ $field }}" placeholder="01XXXXXXXXX">
            </div>
            <button class="w-full rounded-lg bg-indigo-600 px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">Track order</button>
        </form>

        <p class="text-center text-xs text-gray-400">We ask for your phone number so only you can see your order.</p>
    </div>
@endsection