@extends('layouts.app')

@section('content')
    <div class="min-h-screen bg-gray-50 py-8">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Header -->
            <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                <h1 class="text-2xl font-bold text-gray-900">Service Booking</h1>
                <p class="text-gray-600 mt-1">Atur Jadwal Pemesanan service kendaraan anda</p>
            </div>

            <!-- Error Messages -->
            @if ($errors->any())
                <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
                    <div class="flex">
                        <div class="text-red-500">
                            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                                    clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-red-800">Ada kesalahan dalam pengisian form:</h3>
                            <div class="mt-2 text-sm text-red-700">
                                <ul class="list-disc pl-5 space-y-1">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Booking Form -->
            <form action="{{ route('bookings.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                @csrf

                <!-- Service Selection -->
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h2 class="text-lg font-semibold mb-4">Informasi Service</h2>

                    <div>
                        <label for="service_type" class="block text-sm font-medium text-gray-700 mb-1">
                            Tipe Service <span class="text-red-500">*</span>
                        </label>
                        <select id="service_type" name="service_type" required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('service_type') border-red-500 @enderror">
                            <option value="">Pilih tipe service</option>
                            <option value="Service keseluruhan" @selected(old('service_type') == 'Service keseluruhan')>Service keseluruhan</option>
                            <option value="Ganti Oli" @selected(old('service_type') == 'Ganti Oli')>Ganti Oli</option>
                            <option value="Cat Body Motor" @selected(old('service_type') == 'Cat Body Motor')>Cat Body Motor</option>
                            <option value="Other" @selected(old('service_type') == 'Other')>Lainnya</option>
                        </select>
                    </div>
                </div>

                <!-- Vehicle Information -->
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h2 class="text-lg font-semibold mb-4">Informasi kendaraan</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="vehicle_brand" class="block text-sm font-medium text-gray-700 mb-1">
                                Merek kendaraan <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="vehicle_brand" name="vehicle_brand" required
                                placeholder="Contoh: Toyota"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('vehicle_brand') border-red-500 @enderror"
                                value="{{ old('vehicle_brand') }}">
                        </div>

                        <div>
                            <label for="vehicle_model" class="block text-sm font-medium text-gray-700 mb-1">
                                Model kendaraan <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="vehicle_model" name="vehicle_model" required
                                placeholder="Contoh: Avanza"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('vehicle_model') border-red-500 @enderror"
                                value="{{ old('vehicle_model') }}">
                        </div>

                        <div>
                            <label for="vehicle_year" class="block text-sm font-medium text-gray-700 mb-1">
                                Tahun kendaraan <span class="text-red-500">*</span>
                            </label>
                            <input type="number" id="vehicle_year" name="vehicle_year" required min="1900"
                                max="{{ date('Y') + 1 }}" placeholder="{{ date('Y') }}"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('vehicle_year') border-red-500 @enderror"
                                value="{{ old('vehicle_year') }}">
                        </div>

                        <div>
                            <label for="vehicle_plate" class="block text-sm font-medium text-gray-700 mb-1">
                                Plat Nomer <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="vehicle_plate" name="vehicle_plate" required
                                placeholder="Contoh: B 1234 ABC"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('vehicle_plate') border-red-500 @enderror"
                                value="{{ old('vehicle_plate') }}">
                        </div>
                    </div>
                </div>

                <!-- Appointment Schedule -->
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h2 class="text-lg font-semibold mb-4">Jadwal Pertemuan</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="booking_date" class="block text-sm font-medium text-gray-700 mb-1">
                                Tanggal yang diinginkan <span class="text-red-500">*</span>
                            </label>
                            <input type="date" id="booking_date" name="booking_date" required min="{{ date('Y-m-d') }}"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('booking_date') border-red-500 @enderror"
                                value="{{ old('booking_date') }}">
                        </div>

                        <div>
                            <label for="booking_time" class="block text-sm font-medium text-gray-700 mb-1">
                                Waktu yang diinginkan <span class="text-red-500">*</span>
                            </label>
                            <select id="booking_time" name="booking_time" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('booking_time') border-red-500 @enderror">
                                <option value="">Pilih waktu</option>
                                @foreach (['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'] as $time)
                                    <option value="{{ $time }}" @selected(old('booking_time') == $time)>{{ $time }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="mt-4">
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-1">
                            Informasi tambahan
                        </label>
                        <textarea id="description" name="description" rows="3"
                            placeholder="Silakan deskripsikan masalah yang Anda alami atau layanan spesifik yang dibutuhkan..."
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('description') border-red-500 @enderror">{{ old('description') }}</textarea>
                    </div>
                </div>

                <!-- Payment Information -->
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h2 class="text-lg font-semibold mb-4">Informasi Pembayaran</h2>

                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Nomor Rekening
                            </label>
                            <div class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50">
                                BCA-7420-355-577
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                UANG MUKA
                            </label>
                            <div class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50">
                                Rp.20.000
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Barcode Pembayaran
                            </label>
                            <img src="{{ asset('barcode/image-barcode.jpg') }}" alt="Barcode Pembayaran"
                                class="max-w-xs h-auto rounded-lg border-2 border-blue-800">
                        </div>

                        <div class="mt-4">
                            <label for="bukti_pembayaran" class="block text-sm font-medium text-gray-700 mb-1">
                                Bukti Pembayaran <span class="text-red-500">*</span>
                            </label>
                            <input type="file" id="bukti_pembayaran" name="bukti_pembayaran" accept="image/*,.pdf"
                                required
                                class="block w-full text-sm text-gray-500
                                    file:mr-4 file:py-2 file:px-4
                                    file:rounded-lg file:border-0
                                    file:text-sm file:font-medium
                                    file:bg-blue-50 file:text-blue-700
                                    hover:file:bg-blue-100">
                        </div>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="flex justify-between pt-6">
                    <a href="{{ route('bookings.index') }}"
                        class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition duration-300">
                        Batal
                    </a>
                    <button type="submit"
                        class="px-6 py-2 border border-transparent rounded-lg shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300">
                        Buat Booking
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection