@extends('layouts.app')

@section('content')
<div class="flex items-center justify-center min-h-[70vh] px-4 rtl" dir="rtl">
    <div class="w-full max-w-2xl">
        <!-- Header -->
        <div class="mb-8 text-center">
            <h1 class="text-3xl font-black text-[#d4af37] tracking-tight mb-2">
                {{ __('كشف حساب السيارة') }}
            </h1>
            <p class="text-gray-500 text-sm font-medium uppercase tracking-widest">
                Vehicle Statement Report
            </p>
        </div>

        <!-- Form Card -->
        <div class="bg-[#111] border border-white/5 rounded-[2.5rem] p-10 shadow-2xl relative overflow-hidden group transition-all duration-500 hover:border-[#d4af37]/30">
            <!-- Background Decorative Element -->
            <div class="absolute -top-24 -right-24 w-48 h-48 bg-[#d4af37]/5 rounded-full blur-3xl transition-all duration-500 group-hover:bg-[#d4af37]/10"></div>
            
            <form action="{{ route('admin.analytics.vehicle-statement.report') }}" method="GET" class="space-y-8 relative z-10">
                <!-- Vehicle Selection -->
                <div class="space-y-3">
                    <label class="block text-[11px] font-black text-[#d4af37] uppercase tracking-[0.2em] px-1">
                        {{ __('اختر السيارة') }}
                    </label>
                    <div class="relative group/input">
                        <select name="car_id" required 
                                class="w-full bg-[#1a1a1a] border border-white/10 text-white text-sm font-bold rounded-2xl px-5 py-4 appearance-none focus:outline-none focus:border-[#d4af37] focus:ring-4 focus:ring-[#d4af37]/10 transition-all cursor-pointer">
                            <option value="" disabled selected>{{ __('--- اختر السيارة من القائمة ---') }}</option>
                            @foreach($cars as $car)
                                <option value="{{ $car->id }}" class="bg-[#1a1a1a] py-2">
                                    {{ $car->brand->name ?? '---' }} {{ $car->carModel->name ?? '---' }} ({{ $car->plate_number }})
                                </option>
                            @endforeach
                        </select>
                        <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none text-[#d4af37]">
                            <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.5" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Dates Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Start Date -->
                    <div class="space-y-3">
                        <label class="block text-[11px] font-black text-gray-400 uppercase tracking-[0.2em] px-1">
                            {{ __('تاريخ البداية') }}
                        </label>
                        <input type="date" name="start_date" 
                               class="w-full bg-[#1a1a1a] border border-white/10 text-white text-sm font-bold rounded-2xl px-5 py-4 focus:outline-none focus:border-[#d4af37] focus:ring-4 focus:ring-[#d4af37]/10 transition-all [color-scheme:dark]">
                    </div>

                    <!-- End Date -->
                    <div class="space-y-3">
                        <label class="block text-[11px] font-black text-gray-400 uppercase tracking-[0.2em] px-1">
                            {{ __('تاريخ النهاية') }}
                        </label>
                        <input type="date" name="end_date" 
                               class="w-full bg-[#1a1a1a] border border-white/10 text-white text-sm font-bold rounded-2xl px-5 py-4 focus:outline-none focus:border-[#d4af37] focus:ring-4 focus:ring-[#d4af37]/10 transition-all [color-scheme:dark]">
                    </div>
                </div>

                <!-- Action Button -->
                <div class="pt-4">
                    <button type="submit" 
                            class="w-full bg-[#d4af37] hover:bg-[#b8962d] text-black font-black text-sm uppercase tracking-widest py-5 rounded-2xl shadow-xl shadow-[#d4af37]/20 transition-all duration-300 transform hover:-translate-y-1 active:scale-[0.98] flex items-center justify-center gap-3">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        {{ __('عرض التقرير المفصل') }}
                    </button>
                </div>
            </form>
        </div>

        <!-- Footer Note -->
        <p class="mt-8 text-center text-gray-600 text-[10px] font-bold uppercase tracking-[0.3em]">
            © {{ date('Y') }} TQ CARS FLEET ANALYTICS ENGINE
        </p>
    </div>
</div>
@endsection