<x-app-layout>
    <x-slot name="title">Create Booking</x-slot>
    <div class="max-w-4xl mx-auto py-8">
        <div class="mb-6 flex justify-between items-center">
            <div>
                <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">Create New Booking</h2>
                <p class="mt-1 text-sm text-gray-500">Record a new property booking for a customer.</p>
            </div>
            <a href="{{ route('bookings.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Cancel
            </a>
        </div>

        @if ($errors->any())
        <div class="mb-4 rounded-md bg-red-50 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                        <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">There were {{ $errors->count() }} errors with your submission</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

        <form action="{{ route('bookings.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8 divide-y divide-gray-200 bg-white p-8 rounded-lg shadow-sm border border-gray-100">
            @csrf

            <div class="space-y-6 sm:space-y-5">
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Booking Details</h3>
                    <p class="mt-1 max-w-2xl text-sm text-gray-500">Select the customer and the available property.</p>
                </div>

                <div class="space-y-6 sm:space-y-5">
                    <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                        <label for="customer_id" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Customer *</label>
                        <div class="mt-1 sm:mt-0 sm:col-span-2">
                            <select id="customer_id" name="customer_id" required class="max-w-lg block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
                                <option value="">Select a customer</option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>{{ $customer->name }} ({{ $customer->cnic }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                        <label for="property_id" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Property *</label>
                        <div class="mt-1 sm:mt-0 sm:col-span-2">
                            <select id="property_id" name="property_id" required class="max-w-lg block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" x-data="{
                                updatePrice() {
                                    const selected = this.$el.options[this.$el.selectedIndex];
                                    const price = selected.dataset.price;
                                    if(price) document.getElementById('total_price').value = price;
                                }
                            }" @change="updatePrice">
                                <option value="" data-price="">Select a property</option>
                                @foreach($properties as $property)
                                    <option value="{{ $property->id }}" data-price="{{ $property->base_price }}" {{ old('property_id') == $property->id ? 'selected' : '' }}>
                                        Plot {{ $property->plot_number }} - {{ $property->block->name }} (Rs {{ number_format($property->base_price) }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                        <label for="total_price" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Total Price (Rs) *</label>
                        <div class="mt-1 sm:mt-0 sm:col-span-2">
                            <input type="number" name="total_price" id="total_price" value="{{ old('total_price') }}" required step="0.01" class="max-w-lg block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
                        </div>
                    </div>

                    <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                        <label for="discount" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Discount (Rs)</label>
                        <div class="mt-1 sm:mt-0 sm:col-span-2">
                            <input type="number" name="discount" id="discount" value="{{ old('discount', 0) }}" step="0.01" class="max-w-lg block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
                        </div>
                    </div>

                    <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                        <label for="booking_amount" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Booking Amount / Down Payment (Rs) *</label>
                        <div class="mt-1 sm:mt-0 sm:col-span-2">
                            <input type="number" name="booking_amount" id="booking_amount" value="{{ old('booking_amount') }}" required step="0.01" class="max-w-lg block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
                        </div>
                    </div>

                    <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                        <label for="booking_date" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Booking Date *</label>
                        <div class="mt-1 sm:mt-0 sm:col-span-2">
                            <input type="date" name="booking_date" id="booking_date" value="{{ old('booking_date', date('Y-m-d')) }}" required class="max-w-lg block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
                        </div>
                    </div>

                    <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                        <label for="payment_method" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Payment Method *</label>
                        <div class="mt-1 sm:mt-0 sm:col-span-2">
                            <select id="payment_method" name="payment_method" required class="max-w-lg block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
                                <option value="Bank Transfer">Bank Transfer</option>
                                <option value="Cash">Cash</option>
                                <option value="Cheque">Cheque</option>
                                <option value="Pay Order">Pay Order</option>
                            </select>
                        </div>
                    </div>

                    <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                        <label for="payment_proof" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Payment Proof (Screenshot)</label>
                        <div class="mt-1 sm:mt-0 sm:col-span-2">
                            <input type="file" name="payment_proof" id="payment_proof" class="max-w-lg block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
                        </div>
                    </div>
                </div>
            </div>

            <div class="pt-5">
                <div class="flex justify-end">
                    <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                        Create Booking
                    </button>
                </div>
            </div>
        </form>
    </div>
</x-app-layout>
