@extends('layouts.public')
@section('title', 'Track Repair | Anywhere Phone Repair')
@section('content')
<div class="bg-zinc-50 py-16 flex-1">
    <div class="container mx-auto px-4 max-w-2xl">
        <div class="text-center mb-10">
            <h1 class="text-3xl md:text-5xl font-black text-zinc-900 mb-4 tracking-tight">Track Your Repair</h1>
            <p class="text-zinc-500 font-medium text-lg">Enter your tracking code to see the current status of your device.</p>
        </div>
        
        <div class="bg-white rounded-3xl border border-zinc-200 p-8 shadow-sm mb-8">
            <form action="{{ route('public.track') }}" method="GET" class="flex flex-col sm:flex-row gap-3">
                <input type="text" name="code" value="{{ $code ?? '' }}" placeholder="e.g. ABC12345" class="flex-1 bg-zinc-50 border border-zinc-200 rounded-xl px-4 py-4 font-bold focus:outline-none focus:border-primary text-lg text-center sm:text-left uppercase" required>
                <button type="submit" class="bg-primary hover:bg-primary/90 text-white font-black py-4 px-8 rounded-xl transition-colors shadow-md shadow-primary/20 text-lg">
                    Track
                </button>
            </form>
        </div>

        @if($code && $order)
            <div class="bg-white rounded-3xl border border-zinc-200 p-8 shadow-sm">
                <div class="flex items-center justify-between mb-8 pb-6 border-b border-zinc-100">
                    <div>
                        <p class="text-xs font-black text-zinc-400 uppercase tracking-widest mb-1">Order #{{ substr($order->tracking_code, 0, 8) }}</p>
                        <h2 class="text-xl font-bold text-zinc-900">Repair status</h2>
                    </div>
                    <span class="bg-blue-100 text-blue-700 text-xs font-black px-3 py-1.5 rounded-full uppercase tracking-widest">
                        {{ str_replace('_', ' ', Str::title($order->status)) }}
                    </span>
                </div>
                
                <div class="text-center">
                    <p class="text-zinc-500 font-medium text-sm mb-4">Store Location: <span class="font-bold text-zinc-900">{{ $store ? $store->name : 'N/A' }}</span></p>
                    <p class="text-sm text-zinc-600">Use the private invoice link provided by your repair shop to view billing details.</p>
                </div>
            </div>
        @elseif($code)
            <div class="bg-red-50 text-red-700 p-6 rounded-3xl border border-red-200 text-center">
                <p class="font-bold">Order not found.</p>
                <p class="text-sm mt-1">Please check your tracking code and try again.</p>
            </div>
        @endif
    </div>
</div>
@endsection