@extends('layouts.store')
@section('title', __('app.track_order') . ' - ' . __('app.site_name'))

@section('content')
<div class="max-w-2xl mx-auto px-4 py-14">
    <div class="text-center mb-10">
        <h1 class="text-3xl font-display font-bold text-brand-900 mb-2">{{ __('app.track_order') }}</h1>
        <div class="w-16 h-1 bg-gradient-to-r from-brand-500 to-brand-400 mx-auto mt-3 rounded-full"></div>
    </div>

    <form method="GET" action="{{ route('order.track') }}" class="bg-white rounded-2xl shadow-sm border border-brand-100/50 p-6 mb-8">
        <div class="flex gap-3">
            <input type="text" name="order_number" value="{{ request('order_number') }}" placeholder="{{ __('app.order_number') }}" required class="input-luxury flex-1">
            <button type="submit" class="btn-primary !rounded-xl">{{ __('app.track') }}</button>
        </div>
    </form>

    @if(request('order_number'))
        @if($order)
            <div class="bg-white rounded-3xl shadow-sm border border-brand-100/50 p-8">
                <div class="flex items-center justify-between mb-8">
                    <div>
                        <h2 class="text-xl font-bold text-brand-900">{{ $order->order_number }}</h2>
                        <p class="text-sm text-brand-400 mt-1">{{ $order->created_at->format('Y-m-d H:i') }}</p>
                    </div>
                    @php
                        $statusColors = ['pending' => 'bg-amber-100 text-amber-700', 'confirmed' => 'bg-blue-100 text-blue-700', 'shipped' => 'bg-indigo-100 text-indigo-700', 'delivered' => 'bg-emerald-100 text-emerald-700', 'cancelled' => 'bg-red-100 text-red-700'];
                    @endphp
                    <span class="badge-status {{ $statusColors[$order->status] ?? 'bg-gray-100 text-gray-700' }}">{{ __('app.' . $order->status) }}</span>
                </div>

                @php
                    $steps = ['pending', 'confirmed', 'shipped', 'delivered'];
                    $currentIdx = array_search($order->status, $steps);
                    if ($order->status === 'cancelled') $currentIdx = -1;
                    $stepIcons = ['M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z', 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z', 'M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0', 'M5 13l4 4L19 7'];
                @endphp
                <div class="flex items-start justify-between mb-10 px-2">
                    @foreach($steps as $idx => $step)
                        <div class="flex flex-col items-center flex-1">
                            <div class="w-12 h-12 rounded-full flex items-center justify-center text-sm font-bold transition-all {{ $idx <= $currentIdx ? 'bg-gradient-luxury text-white shadow-lg shadow-brand-500/25' : 'bg-brand-100 text-brand-300' }}">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $stepIcons[$idx] }}"/></svg>
                            </div>
                            <span class="text-xs mt-2 font-semibold {{ $idx <= $currentIdx ? 'text-brand-700' : 'text-brand-300' }}">{{ __('app.' . $step) }}</span>
                        </div>
                        @if(!$loop->last)
                            <div class="flex-1 h-1 rounded-full mt-6 {{ $idx < $currentIdx ? 'bg-gradient-to-r from-brand-500 to-brand-600' : 'bg-brand-100' }}"></div>
                        @endif
                    @endforeach
                </div>

                <div class="divide-y divide-brand-100/50 text-sm">
                    @foreach($order->items as $item)
                    <div class="py-3 flex justify-between">
                        <span class="text-brand-600">{{ $item->product_name }} <span class="text-brand-400">x{{ $item->quantity }}</span></span>
                        <span class="font-bold text-brand-800">{{ number_format($item->total, 2) }} {{ __('app.jod') }}</span>
                    </div>
                    @endforeach
                    <div class="pt-4 flex justify-between font-extrabold text-lg">
                        <span class="text-brand-800">{{ __('app.total') }}</span>
                        <span class="text-brand-700">{{ number_format($order->total, 2) }} {{ __('app.jod') }}</span>
                    </div>
                </div>
            </div>
        @else
            <div class="text-center py-12 bg-white rounded-2xl border border-brand-100/50">
                <div class="w-16 h-16 mx-auto bg-brand-50 rounded-full flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-brand-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </div>
                <p class="text-lg font-bold text-brand-400">{{ __('app.order_not_found') }}</p>
            </div>
        @endif
    @endif
</div>
@endsection