@extends('layouts.public')

@section('title', 'Book a Repair | Anywhere Phone Repair')

@section('content')
<div class="bg-zinc-50 py-16">
    <div class="container mx-auto px-4 max-w-3xl">
        <h1 class="text-3xl md:text-5xl font-black text-zinc-900 mb-4 tracking-tight text-center">Book a Repair</h1>
        <p class="text-zinc-500 font-medium mb-12 text-center text-lg">Schedule your repair at any of our locations.</p>
        
        <div class="bg-white rounded-3xl border border-zinc-200 p-8 shadow-sm">
            <form action="{{ route('public.book.submit') }}" method="POST" class="space-y-6">
                @csrf
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-zinc-900 mb-2">Select Store</label>
                        <select name="store_id" class="w-full bg-zinc-50 border border-zinc-200 text-zinc-900 rounded-xl px-4 py-3 font-medium focus:outline-none focus:border-primary focus:bg-white transition-colors" required>
                            <option value="">-- Choose a location --</option>
                            @foreach($stores as $store)
                                <option value="{{ $store->id }}">{{ $store->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-zinc-900 mb-2">Device Type</label>
                        <select name="device_type_id" class="w-full bg-zinc-50 border border-zinc-200 text-zinc-900 rounded-xl px-4 py-3 font-medium focus:outline-none focus:border-primary focus:bg-white transition-colors" required>
                            <option value="">-- Choose device type --</option>
                            @foreach($deviceTypes as $dt)
                                <option value="{{ $dt->id }}">{{ $dt->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-zinc-900 mb-2">Full Name</label>
                        <input type="text" name="customer_name" class="w-full bg-zinc-50 border border-zinc-200 text-zinc-900 rounded-xl px-4 py-3 font-medium focus:outline-none focus:border-primary focus:bg-white transition-colors" required value="{{ auth()->check() ? auth()->user()->name : '' }}">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-zinc-900 mb-2">Phone Number</label>
                        <input type="tel" name="customer_phone" class="w-full bg-zinc-50 border border-zinc-200 text-zinc-900 rounded-xl px-4 py-3 font-medium focus:outline-none focus:border-primary focus:bg-white transition-colors" required value="{{ auth()->check() ? auth()->user()->phone : '' }}">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-bold text-zinc-900 mb-2">Email Address</label>
                    <input type="email" name="customer_email" class="w-full bg-zinc-50 border border-zinc-200 text-zinc-900 rounded-xl px-4 py-3 font-medium focus:outline-none focus:border-primary focus:bg-white transition-colors" required value="{{ auth()->check() ? auth()->user()->email : '' }}" {{ auth()->check() ? 'readonly' : '' }}>
                </div>

                <div>
                    <label class="block text-sm font-bold text-zinc-900 mb-2">Describe the Issue</label>
                    <textarea name="issue_description" rows="4" class="w-full bg-zinc-50 border border-zinc-200 text-zinc-900 rounded-xl px-4 py-3 font-medium focus:outline-none focus:border-primary focus:bg-white transition-colors" placeholder="e.g. Screen is cracked and touch doesn't work" required></textarea>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-zinc-900 mb-2">Preferred Date (Optional)</label>
                        <input type="date" name="appointment_date" class="w-full bg-zinc-50 border border-zinc-200 text-zinc-900 rounded-xl px-4 py-3 font-medium focus:outline-none focus:border-primary focus:bg-white transition-colors">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-zinc-900 mb-2">Preferred Time (Optional)</label>
                        <input type="time" name="appointment_time" class="w-full bg-zinc-50 border border-zinc-200 text-zinc-900 rounded-xl px-4 py-3 font-medium focus:outline-none focus:border-primary focus:bg-white transition-colors">
                    </div>
                </div>

                <div class="pt-6">
                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-black py-4 px-6 rounded-xl transition-colors shadow-xl shadow-primary/20 text-lg">
                        Submit Booking Request
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection