@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">Lacak Pesanan</h1>
        <p class="text-gray-600">Masukkan Order ID atau email untuk melacak pesanan Anda</p>
    </div>

    <div class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
        <form action="{{ route('orders.track.search') }}" method="POST">
            @csrf
            
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Order ID</label>
                <input type="text" 
                       name="order_id" 
                       placeholder="Contoh: RIS-20240123-XXXXX"
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#0C951E] focus:border-[#0C951E] @error('order_id') border-red-300 @enderror"
                       value="{{ old('order_id') }}">
                @error('order_id')
                <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Email atau WhatsApp</label>
                <input type="text" 
                       name="contact" 
                       placeholder="Email atau nomor WhatsApp"
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#0C951E] focus:border-[#0C951E] @error('contact') border-red-300 @enderror"
                       value="{{ old('contact') }}">
                @error('contact')
                <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                @enderror
            </div>

            @if(session('error'))
            <div class="mb-6 flex items-center gap-3 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl">
                <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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                {{ session('error') }}
            </div>
            @endif

            <button type="submit" class="w-full py-3.5 bg-[#0C951E] hover:bg-[#0a7d18] text-white rounded-xl font-bold text-lg transition-colors">
                Lacak Pesanan
            </button>
        </form>
    </div>

    <div class="mt-8 text-center">
        <p class="text-sm text-gray-500 mb-4">Order ID dapat ditemukan di email konfirmasi atau WhatsApp notifikasi</p>
        <a href="{{ route('home') }}" class="text-[#0C951E] hover:underline font-medium">
            ← Kembali ke Home
        </a>
    </div>
</div>
@endsection