<div>
    <form wire:submit="submitForm">
        @csrf
        <div class="space-y-4">
            <div>
                <x-label for="primary_guest_id" value="{{ __('hotel::modules.reservation.guest') }}" required />
                <x-select class="mt-1 block w-full" wire:model='primary_guest_id'>
                    <option value="">{{ __('hotel::modules.reservation.selectGuest') }}</option>
                    @foreach($guests as $guest)
                        <option value="{{ $guest->id }}">{{ $guest->full_name }} ({{ $guest->email ?? $guest->phone }})</option>
                    @endforeach
                </x-select>
                <x-input-error for="primary_guest_id" class="mt-2" />
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <x-label for="check_in_date" value="{{ __('hotel::modules.reservation.checkInDate') }}" required />
                    <x-input id="check_in_date" class="block mt-1 w-full" type="date" wire:model.live='check_in_date' />
                    <x-input-error for="check_in_date" class="mt-2" />
                </div>

                <div>
                    <x-label for="check_out_date" value="{{ __('hotel::modules.reservation.checkOutDate') }}" required />
                    <x-input id="check_out_date" class="block mt-1 w-full" type="date" wire:model.live='check_out_date' />
                    <x-input-error for="check_out_date" class="mt-2" />
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <x-label for="check_in_time" value="{{ __('hotel::modules.reservation.checkInTime') }}" />
                    <x-input id="check_in_time" class="block mt-1 w-full" type="time" wire:model='check_in_time' />
                    <x-input-error for="check_in_time" class="mt-2" />
                </div>

                <div>
                    <x-label for="check_out_time" value="{{ __('hotel::modules.reservation.checkOutTime') }}" />
                    <x-input id="check_out_time" class="block mt-1 w-full" type="time" wire:model='check_out_time' />
                    <x-input-error for="check_out_time" class="mt-2" />
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <x-label for="adults" value="{{ __('hotel::modules.reservation.adults') }}" required />
                    <x-input id="adults" class="block mt-1 w-full" type="number" min="1" wire:model='adults' />
                    <x-input-error for="adults" class="mt-2" />
                </div>

                <div>
                    <x-label for="children" value="{{ __('hotel::modules.reservation.children') }}" />
                    <x-input id="children" class="block mt-1 w-full" type="number" min="0" wire:model='children' />
                    <x-input-error for="children" class="mt-2" />
                </div>
            </div>

            <div>
                <x-label for="rate_plan_id" value="{{ __('hotel::modules.reservation.ratePlan') }}" />
                <x-select class="mt-1 block w-full" wire:model='rate_plan_id'>
                    <option value="">{{ __('hotel::modules.reservation.selectRatePlan') }}</option>
                    @foreach($ratePlans as $plan)
                        <option value="{{ $plan->id }}">{{ $plan->name }} ({{ $plan->type->label() }})</option>
                    @endforeach
                </x-select>
                <x-input-error for="rate_plan_id" class="mt-2" />
            </div>

            @if(count($availableRooms) > 0)
            <div>
                <x-label value="{{ __('hotel::modules.reservation.selectRooms') }}" />
                <div class="space-y-2 max-h-64 overflow-y-auto border border-gray-300 rounded-lg p-4 dark:border-gray-600 mt-2">
                    @foreach($availableRooms as $roomTypeId => $roomData)
                    <div class="flex items-center justify-between p-2 border-b dark:border-gray-600">
                        <div class="flex-1">
                            <div class="font-medium text-gray-900 dark:text-white">{{ $roomData['room_type']->name }}</div>
                            <div class="text-sm text-gray-500 dark:text-gray-400">
                                {{ __('hotel::modules.reservation.available') }}: {{ $roomData['available'] }} | {{ __('hotel::modules.reservation.rate') }}: {{ currency_format($roomData['rate']) }}/{{ __('hotel::modules.reservation.night') }}
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <x-input type="number" wire:model="selectedRooms.{{ $roomTypeId }}.quantity" min="0" max="{{ $roomData['available'] }}" class="w-20" placeholder="Qty" />
                            <x-input type="number" wire:model="selectedRooms.{{ $roomTypeId }}.rate" step="0.01" min="0" class="w-32" placeholder="{{ __('hotel::modules.reservation.rate') }}" />
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @else
            <div class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800">
                <p class="text-sm text-yellow-800 dark:text-yellow-200">{{ __('hotel::modules.reservation.selectDatesMessage') }}</p>
            </div>
            @endif

            <div>
                <x-label for="status" value="{{ __('hotel::modules.reservation.status') }}" required />
                <x-select class="mt-1 block w-full" wire:model='status'>
                    @foreach($statuses as $status)
                        <option value="{{ $status->value }}">{{ $status->label() }}</option>
                    @endforeach
                </x-select>
                <x-input-error for="status" class="mt-2" />
            </div>

            <div>
                <x-label for="advance_paid" value="{{ __('hotel::modules.reservation.advancePaid') }}" />
                <x-input id="advance_paid" class="block mt-1 w-full" type="number" step="0.01" min="0" wire:model='advance_paid' />
                <x-input-error for="advance_paid" class="mt-2" />
            </div>

            <div>
                <x-label for="special_requests" value="{{ __('hotel::modules.reservation.specialRequests') }}" />
                <textarea id="special_requests" wire:model="special_requests" rows="3" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-skin-base focus:ring focus:ring-skin-base focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"></textarea>
                <x-input-error for="special_requests" class="mt-2" />
            </div>
        </div>

        <div class="flex w-full pb-4 space-x-4 mt-6 rtl:space-x-reverse">
            <x-button wire:loading.attr="disabled">{{ __('hotel::modules.reservation.createReservation') }}</x-button>
            <x-button-cancel wire:click="$dispatch('hideAddReservation')" wire:loading.attr="disabled">@lang('app.cancel')</x-button-cancel>
        </div>
    </form>
</div>
