@extends('layouts.app')

@section('title', 'New Reservation')
@section('page_title', 'New Reservation')
@section('page_subtitle', 'Create a new guest reservation')

@section('nav_reservations', 'bg-teal-50 text-teal-700 font-semibold')

@section('content')

@php
    $roomsByFloor   = $rooms->groupBy('floor')->sortKeys();
    $floorOpenInit  = array_fill_keys($roomsByFloor->keys()->toArray(), true);
@endphp

<script>
function newReservationData() {
    return {
        checkIn:  '{{ now()->format('Y-m-d') }}',
        checkOut: '{{ now()->addDay()->format('Y-m-d') }}',
        adults: 1,
        children: 0,
        selectedRooms: [],
        formAction: 'confirmed',
        planId: '',
        ratePlans: @json($ratePlansJson),
        collect: false,
        dtype: 'percent',
        percent: 30,
        fixedAmount: '',
        floorOpen: @json($floorOpenInit),
        get allFloorsOpen() {
            return Object.values(this.floorOpen).every(Boolean);
        },
        toggleAll: function() {
            var expand = !this.allFloorsOpen;
            var self = this;
            Object.keys(this.floorOpen).forEach(function(k) { self.floorOpen[k] = expand; });
        },
        get nights() {
            if (!this.checkIn || !this.checkOut) return 0;
            var diff = new Date(this.checkOut) - new Date(this.checkIn);
            return Math.max(0, Math.round(diff / 86400000));
        },
        get pax() { return parseInt(this.adults||1) + parseInt(this.children||0); },
        get isGroup() { return this.selectedRooms.length > 1; },
        get selectedPlan() {
            if (!this.planId) return null;
            var id = this.planId;
            return this.ratePlans.find(function(p) { return p.id == id; }) || null;
        },
        roomRate: function(room) {
            var plan = this.selectedPlan;
            if (!plan) return room.rate;
            if (plan.type === 'percent_off') return Math.round(room.rate * (1 - plan.value / 100));
            if (plan.type === 'amount_off') return Math.max(0, room.rate - plan.value);
            if (plan.type === 'fixed') return (plan.rates[room.type] !== undefined ? plan.rates[room.type] : room.rate);
            return room.rate;
        },
        get totalNightlyRate() {
            var self = this;
            return this.selectedRooms.reduce(function(sum, r) { return sum + self.roomRate(r); }, 0);
        },
        get total() { return this.totalNightlyRate * this.nights; },
        get savings() {
            var self = this;
            var rack = this.selectedRooms.reduce(function(sum, r) { return sum + r.rate; }, 0);
            return rack - this.totalNightlyRate;
        },
        get deposit() {
            if (!this.collect || this.total <= 0 || this.isGroup) return 0;
            if (this.dtype === 'percent') return Math.round(this.total * this.percent / 100);
            if (this.dtype === 'full') return this.total;
            return parseFloat(this.fixedAmount) || 0;
        },
        fmt: function(n) { return '₱' + Number(n).toLocaleString('en-PH', {minimumFractionDigits:0}); },
        isSelected: function(no) {
            return this.selectedRooms.some(function(r) { return r.no === no; });
        },
        toggleRoom: function(no, rate, type) {
            var idx = this.selectedRooms.findIndex(function(r) { return r.no === no; });
            if (idx >= 0) {
                this.selectedRooms.splice(idx, 1);
            } else {
                this.selectedRooms.push({ no: no, rate: parseInt(rate), type: type });
            }
        }
    };
}
</script>

<div class="max-w-5xl" x-data="newReservationData()">

    <a href="{{ route('reservations.index') }}"
       class="inline-flex items-center gap-1.5 text-gray-400 hover:text-gray-600 text-sm mb-6 transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Reservations
    </a>

    @if ($errors->any())
    <div class="mb-4 bg-red-50 border-[0.5px] border-red-200 rounded-xl px-5 py-4">
        <p class="text-red-700 text-sm font-semibold mb-1">Please fix the following:</p>
        <ul class="text-red-600 text-sm list-disc list-inside space-y-0.5">
            @foreach ($errors->all() as $e)
                <li>{{ $e }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form action="{{ route('reservations.store') }}" method="POST" class="space-y-4"
          x-ref="bookingForm"
          data-confirm="Save this reservation?"
          x-effect="$refs.bookingForm.dataset.confirm = (isGroup ? 'Create group booking with ' + selectedRooms.length + ' rooms?' : 'Save this reservation?')">
        @csrf

        {{-- Hidden computed fields --}}
        <input type="hidden" name="action" :value="formAction">
        <input type="hidden" name="rate_plan_id" :value="planId || ''">
        <input type="hidden" name="collect_deposit" :value="collect && !isGroup ? '1' : '0'">
        <input type="hidden" name="deposit_percent" :value="percent">

        {{-- ===== 1. STAY DETAILS ===== --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">1</div>
                <h3 class="text-gray-800 font-semibold text-sm">Stay Details</h3>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">
                            Check-in Date <span class="text-red-400">*</span>
                        </label>
                        <input type="date" name="check_in" x-model="checkIn" required
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">
                            Check-out Date <span class="text-red-400">*</span>
                        </label>
                        <input type="date" name="check_out" x-model="checkOut" required
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Adults</label>
                        <div class="flex items-center border-[0.5px] border-gray-200 rounded-lg overflow-hidden">
                            <button type="button" @click="adults = Math.max(1, parseInt(adults) - 1)"
                                    class="px-3 py-2 text-gray-400 hover:text-gray-700 hover:bg-gray-50 transition-colors">−</button>
                            <input type="number" name="adults" x-model="adults" min="1" max="10"
                                   class="flex-1 text-center text-sm text-gray-700 py-2 focus:outline-none">
                            <button type="button" @click="adults = Math.min(10, parseInt(adults) + 1)"
                                    class="px-3 py-2 text-gray-400 hover:text-gray-700 hover:bg-gray-50 transition-colors">+</button>
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Children</label>
                        <div class="flex items-center border-[0.5px] border-gray-200 rounded-lg overflow-hidden">
                            <button type="button" @click="children = Math.max(0, parseInt(children||0) - 1)"
                                    class="px-3 py-2 text-gray-400 hover:text-gray-700 hover:bg-gray-50 transition-colors">−</button>
                            <input type="number" name="children" x-model="children" min="0" max="10"
                                   class="flex-1 text-center text-sm text-gray-700 py-2 focus:outline-none">
                            <button type="button" @click="children = Math.min(10, parseInt(children||0) + 1)"
                                    class="px-3 py-2 text-gray-400 hover:text-gray-700 hover:bg-gray-50 transition-colors">+</button>
                        </div>
                    </div>

                </div>

                <div class="mt-3">
                    <span class="inline-flex items-center gap-1.5 text-teal-700 text-xs font-semibold bg-teal-50 border-[0.5px] border-teal-100 px-3 py-1.5 rounded-lg">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
                        </svg>
                        <span x-text="nights + ' Night' + (nights !== 1 ? 's' : '')">1 Night</span>
                    </span>
                </div>
            </div>
        </div>

        {{-- ===== 2. ROOM SELECTION ===== --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">2</div>
                <h3 class="text-gray-800 font-semibold text-sm">Room Selection</h3>

                {{-- Selected rooms summary badge --}}
                <span x-show="selectedRooms.length > 0" x-cloak
                      class="text-[11px] font-semibold px-2.5 py-0.5 rounded-full border-[0.5px]"
                      :class="isGroup
                          ? 'text-purple-700 bg-purple-50 border-purple-200'
                          : 'text-teal-700 bg-teal-50 border-teal-200'"
                      x-text="isGroup
                          ? selectedRooms.length + ' rooms — ' + fmt(total) + ' total'
                          : 'Room ' + selectedRooms[0].no + ' — ' + fmt(totalNightlyRate) + '/night'">
                </span>

                <span x-show="isGroup" x-cloak
                      class="text-[11px] font-semibold text-purple-700 bg-purple-50 border-[0.5px] border-purple-200 px-2.5 py-0.5 rounded-full">
                    Group Booking
                </span>

                <button type="button" @click="toggleAll()"
                        class="ml-auto text-[11px] font-medium text-gray-400 hover:text-gray-600 transition-colors flex items-center gap-1">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                    <span x-text="allFloorsOpen ? 'Collapse All' : 'Expand All'">Collapse All</span>
                </button>
            </div>

            <div class="px-6 pt-3 pb-1">
                <p class="text-xs text-gray-400">Select one room for a standard reservation, or multiple rooms to create a group booking under the same guest name.</p>
            </div>

            <div class="p-6 pt-3">
                @if ($rooms->isEmpty())
                    <p class="text-gray-400 text-sm text-center py-6">No available rooms at this time.</p>
                @else
                <div class="space-y-3">
                    @foreach ($roomsByFloor as $floor => $floorRooms)
                    <div>
                        {{-- Floor header --}}
                        <button type="button"
                                @click="floorOpen[{{ $floor }}] = !floorOpen[{{ $floor }}]"
                                class="w-full flex items-center justify-between px-4 py-2.5 rounded-xl border-[0.5px] bg-gray-50 border-gray-200 hover:bg-gray-100 transition-colors">
                            <div class="flex items-center gap-2.5">
                                <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-2 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                                </svg>
                                <span class="text-xs font-bold text-gray-700">Floor {{ $floor }}</span>
                                <span class="text-[10px] font-semibold text-teal-700 bg-teal-50 border-[0.5px] border-teal-200 px-2 py-0.5 rounded-full">
                                    {{ $floorRooms->count() }} room{{ $floorRooms->count() !== 1 ? 's' : '' }}
                                </span>
                            </div>
                            <svg class="w-4 h-4 text-gray-400 transition-transform duration-200"
                                 :class="{ 'rotate-180': floorOpen[{{ $floor }}] }"
                                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>

                        {{-- Room grid for this floor --}}
                        <div x-show="floorOpen[{{ $floor }}]"
                             x-transition:enter="transition ease-out duration-150"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             x-transition:leave="transition ease-in duration-100"
                             x-transition:leave-start="opacity-100 translate-y-0"
                             x-transition:leave-end="opacity-0 -translate-y-1"
                             class="mt-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
                            @foreach ($floorRooms as $room)
                            @php $isAvailable = in_array($room['status'], ['available', 'clean']); @endphp
                            <label class="relative flex items-start gap-3 p-4 border-[0.5px] rounded-xl transition-all
                                          {{ $isAvailable
                                              ? 'border-gray-200 hover:border-teal-300 hover:bg-teal-50/30 cursor-pointer'
                                              : 'border-gray-100 bg-gray-50/50 cursor-not-allowed opacity-50' }}"
                                   :class="isSelected('{{ $room['no'] }}') ? 'border-teal-500 bg-teal-50' : ''"
                                   >
                                <input type="checkbox" name="room_nos[]" value="{{ $room['no'] }}"
                                       {{ !$isAvailable ? 'disabled' : '' }}
                                       :checked="isSelected('{{ $room['no'] }}')"
                                       @change="toggleRoom('{{ $room['no'] }}', {{ $room['rate'] }}, '{{ $room['type'] }}')"
                                       class="mt-0.5 accent-teal-600">
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center justify-between gap-2">
                                        <p class="text-gray-800 font-semibold text-sm">Room {{ $room['no'] }}</p>
                                        @if ($room['status'] === 'available')
                                            <span class="text-[10px] font-semibold text-teal-700 bg-teal-50 border-[0.5px] border-teal-200 px-1.5 py-0.5 rounded-full">Available</span>
                                        @elseif ($room['status'] === 'clean')
                                            <span class="text-[10px] font-semibold text-green-700 bg-green-50 border-[0.5px] border-green-200 px-1.5 py-0.5 rounded-full">Clean</span>
                                        @else
                                            <span class="text-[10px] font-semibold text-amber-600 bg-amber-50 border-[0.5px] border-amber-200 px-1.5 py-0.5 rounded-full">Unavailable</span>
                                        @endif
                                    </div>
                                    <p class="text-gray-400 text-xs mt-0.5">{{ $room['type'] }}</p>
                                    <p class="text-teal-700 text-xs font-bold mt-1">&#8369;{{ number_format($room['rate'], 0) }}/night</p>
                                </div>
                            </label>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>

        {{-- ===== 3. GUEST INFORMATION ===== --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">3</div>
                    <h3 class="text-gray-800 font-semibold text-sm">Guest Information</h3>
                    <span x-show="isGroup" x-cloak class="text-[11px] text-purple-600">Applied to all rooms</span>
                </div>
                @if(!$linkedGuest)
                <a href="{{ route('guests.index') }}"
                   class="text-xs text-teal-600 hover:text-teal-700 font-medium transition-colors">
                    Browse Guest Profiles →
                </a>
                @endif
            </div>

            {{-- Linked guest profile banner --}}
            @if($linkedGuest)
            <div class="mx-6 mt-4 flex items-center justify-between gap-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl px-4 py-3">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center text-xs font-bold flex-shrink-0">
                        {{ strtoupper(substr($linkedGuest->first_name, 0, 1)) }}{{ strtoupper(substr($linkedGuest->last_name, 0, 1)) }}
                    </div>
                    <div>
                        <p class="text-teal-800 font-semibold text-sm">{{ $linkedGuest->full_name }}</p>
                        <p class="text-teal-600 text-xs">
                            Linked to guest profile #{{ $linkedGuest->id }}
                            @if($linkedGuest->vip) · <span class="font-bold">VIP</span> @endif
                            · {{ $linkedGuest->totalStays() }} past stay{{ $linkedGuest->totalStays() !== 1 ? 's' : '' }}
                        </p>
                    </div>
                </div>
                <a href="{{ route('reservations.create') }}"
                   class="text-xs text-teal-500 hover:text-teal-700 transition-colors">
                    Unlink
                </a>
            </div>
            <input type="hidden" name="guest_id" value="{{ $linkedGuest->id }}">
            @endif

            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">
                            First Name <span class="text-red-400">*</span>
                        </label>
                        <input type="text" name="first_name"
                               value="{{ old('first_name', $linkedGuest?->first_name) }}" placeholder="Juan" required
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">
                            Last Name <span class="text-red-400">*</span>
                        </label>
                        <input type="text" name="last_name"
                               value="{{ old('last_name', $linkedGuest?->last_name) }}" placeholder="dela Cruz" required
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Email Address</label>
                        <input type="email" name="email"
                               value="{{ old('email', $linkedGuest?->email) }}" placeholder="juan@email.com"
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">
                            Mobile Number <span class="text-red-400">*</span>
                        </label>
                        <div class="flex">
                            <span class="inline-flex items-center px-3 border-[0.5px] border-r-0 border-gray-200 rounded-l-lg bg-gray-50 text-gray-500 text-sm">+63</span>
                            <input type="tel" name="phone"
                                   value="{{ old('phone', $linkedGuest?->phone ? ltrim(preg_replace('/\D/', '', $linkedGuest->phone), '63') : '') }}"
                                   placeholder="917 123 4567" required
                                   class="flex-1 text-sm border-[0.5px] border-gray-200 rounded-r-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                          focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                    </div>

                </div>

                {{-- PH Discounts --}}
                <div class="mt-4 flex flex-wrap gap-4 pt-4 border-t border-gray-50">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="senior_citizen" class="rounded accent-teal-600">
                        <span class="text-sm text-gray-600">Senior Citizen <span class="text-gray-400 text-xs">(20% disc.)</span></span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="pwd" class="rounded accent-teal-600">
                        <span class="text-sm text-gray-600">PWD <span class="text-gray-400 text-xs">(20% disc.)</span></span>
                    </label>
                </div>
            </div>
        </div>

        {{-- ===== 4. BOOKING DETAILS ===== --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">4</div>
                <h3 class="text-gray-800 font-semibold text-sm">Booking Details</h3>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Booking Source</label>
                        <select name="source"
                                class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 bg-white
                                       focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            <option>Walk-in</option>
                            <option>Direct (Phone)</option>
                            <option>Booking.com</option>
                            <option>Agoda</option>
                            <option>Airbnb</option>
                            <option>Expedia</option>
                            <option>Travel Agent</option>
                            <option>Corporate</option>
                            <option>Website</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Rate Plan</label>
                        <select x-model="planId"
                                class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 bg-white
                                       focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            <option value="">— Rack Rate (no plan) —</option>
                            @foreach($ratePlans as $plan)
                            <option value="{{ $plan->id }}">{{ $plan->name }} ({{ $plan->code }}) — {{ $plan->modifierLabel() }}</option>
                            @endforeach
                        </select>
                        <p x-show="selectedPlan && savings > 0" x-cloak
                           class="text-green-600 text-xs mt-1 font-medium"
                           x-text="'Saves ' + fmt(savings) + '/night total vs. rack rate'">
                        </p>
                    </div>

                    <div class="sm:col-span-2">
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Special Requests / Notes</label>
                        <input type="text" name="notes" value="{{ old('notes') }}"
                               placeholder="e.g. Honeymoon setup, early check-in, extra bed..."
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>

                </div>
            </div>
        </div>

        {{-- ===== 5. DEPOSIT PAYMENT ===== --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">5</div>
                    <h3 class="text-gray-800 font-semibold text-sm">Deposit Payment</h3>
                </div>
                {{-- Toggle only shown for single-room bookings --}}
                <label x-show="!isGroup" class="flex items-center gap-2.5 cursor-pointer select-none">
                    <span class="text-gray-500 text-xs">Collect deposit now</span>
                    <button type="button" @click="collect = !collect"
                            :class="collect ? 'bg-teal-600' : 'bg-gray-200'"
                            class="relative w-9 h-5 rounded-full transition-colors focus:outline-none">
                        <span :class="collect ? 'translate-x-4' : 'translate-x-0.5'"
                              class="inline-block w-4 h-4 bg-white rounded-full transition-transform shadow-sm"></span>
                    </button>
                </label>
            </div>

            {{-- Group booking: payment note --}}
            <div x-show="isGroup" x-cloak class="px-6 py-4 bg-purple-50/50 rounded-b-xl flex items-start gap-3">
                <svg class="w-4 h-4 text-purple-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <p class="text-purple-700 text-xs">For group bookings, payments and deposits are collected per room. After creating the group, open each individual reservation to add payments.</p>
            </div>

            {{-- Single booking: no deposit --}}
            <div x-show="!isGroup && !collect" class="px-6 py-4 bg-gray-50 rounded-b-xl">
                <p class="text-gray-400 text-sm">No deposit will be collected at this time.</p>
            </div>

            {{-- Single booking: deposit form --}}
            <div x-show="!isGroup && collect" x-cloak class="p-6 bg-gray-50 rounded-b-xl space-y-4">

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <label class="flex items-center gap-3 p-3.5 border-[0.5px] rounded-xl cursor-pointer transition-all"
                           :class="dtype === 'percent' ? 'border-teal-400 bg-teal-50' : 'border-gray-200 bg-white hover:border-gray-300'">
                        <input type="radio" name="deposit_type" value="percent" x-model="dtype" class="accent-teal-600">
                        <div>
                            <p class="text-gray-800 text-xs font-semibold">Percentage</p>
                            <p class="text-gray-400 text-[11px]">% of total amount</p>
                        </div>
                    </label>
                    <label class="flex items-center gap-3 p-3.5 border-[0.5px] rounded-xl cursor-pointer transition-all"
                           :class="dtype === 'fixed' ? 'border-teal-400 bg-teal-50' : 'border-gray-200 bg-white hover:border-gray-300'">
                        <input type="radio" name="deposit_type" value="fixed" x-model="dtype" class="accent-teal-600">
                        <div>
                            <p class="text-gray-800 text-xs font-semibold">Fixed Amount</p>
                            <p class="text-gray-400 text-[11px]">Specific peso amount</p>
                        </div>
                    </label>
                    <label class="flex items-center gap-3 p-3.5 border-[0.5px] rounded-xl cursor-pointer transition-all"
                           :class="dtype === 'full' ? 'border-teal-400 bg-teal-50' : 'border-gray-200 bg-white hover:border-gray-300'">
                        <input type="radio" name="deposit_type" value="full" x-model="dtype" class="accent-teal-600">
                        <div>
                            <p class="text-gray-800 text-xs font-semibold">Full Payment</p>
                            <p class="text-gray-400 text-[11px]">Pay entire balance</p>
                        </div>
                    </label>
                </div>

                <div x-show="dtype === 'percent'" class="flex items-center gap-2 flex-wrap">
                    <span class="text-gray-500 text-xs font-medium">Quick select:</span>
                    @foreach ([20, 30, 50] as $pct)
                    <button type="button" @click="percent = {{ $pct }}"
                            :class="percent === {{ $pct }} ? 'bg-teal-600 text-white border-teal-600' : 'bg-white text-gray-600 border-gray-200 hover:border-teal-300'"
                            class="px-3 py-1 text-xs font-semibold border-[0.5px] rounded-lg transition-colors">
                        {{ $pct }}%
                    </button>
                    @endforeach
                    <div class="flex items-center gap-1.5 ml-2">
                        <input type="number" x-model="percent" min="1" max="100"
                               class="w-16 text-sm border-[0.5px] border-gray-200 rounded-lg px-2 py-1 text-gray-700 text-center
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        <span class="text-gray-500 text-sm">%</span>
                    </div>
                </div>

                <div x-show="dtype === 'fixed'">
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Deposit Amount</label>
                    <div class="flex items-center border-[0.5px] border-gray-200 rounded-lg overflow-hidden w-48 bg-white">
                        <span class="px-3 py-2 bg-gray-50 text-gray-500 text-sm border-r border-gray-200">₱</span>
                        <input type="number" name="deposit_fixed" x-model="fixedAmount" placeholder="0.00" min="0"
                               class="flex-1 text-sm text-gray-700 px-3 py-2 focus:outline-none">
                    </div>
                </div>

                <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-4 py-3 flex items-center justify-between">
                    <span class="text-gray-500 text-xs">Deposit amount to collect</span>
                    <p class="text-teal-700 font-bold text-sm" x-text="fmt(deposit)">₱0</p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Payment Method <span class="text-red-400">*</span></label>
                        <select name="deposit_method"
                                class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 bg-white
                                       focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            <option value="">Select method</option>
                            <option>Cash</option>
                            <option>GCash</option>
                            <option>Maya</option>
                            <option>Credit Card</option>
                            <option>Debit Card</option>
                            <option>Bank Transfer</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Reference / OR No.</label>
                        <input type="text" name="deposit_reference" placeholder="e.g. GC-20240614-001"
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Date Received</label>
                        <input type="date" name="deposit_date" value="{{ now()->format('Y-m-d') }}"
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                </div>

            </div>
        </div>

        {{-- ===== SUMMARY & ACTIONS ===== --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="p-5">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">

                    <div class="flex items-center gap-6">
                        {{-- Single room summary --}}
                        <template x-if="!isGroup">
                            <div class="flex items-center gap-6">
                                <div>
                                    <p class="text-gray-400 text-xs">Room Rate</p>
                                    <p class="text-gray-800 font-semibold text-sm mt-0.5" x-text="totalNightlyRate > 0 ? fmt(totalNightlyRate) + '/night' : '—'">—</p>
                                    <p x-show="savings > 0" x-cloak class="text-green-600 text-[10px] line-through"
                                       x-text="fmt(selectedRooms.reduce(function(s,r){return s+r.rate},0)) + '/night'"></p>
                                </div>
                                <div>
                                    <p class="text-gray-400 text-xs">Nights</p>
                                    <p class="text-gray-800 font-semibold text-sm mt-0.5" x-text="nights || '—'">—</p>
                                </div>
                                <div>
                                    <p class="text-gray-400 text-xs">Guests</p>
                                    <p class="text-gray-800 font-semibold text-sm mt-0.5" x-text="pax">1</p>
                                </div>
                                <div class="border-l border-gray-100 pl-6">
                                    <p class="text-gray-400 text-xs">Total Amount</p>
                                    <p class="text-teal-700 font-bold text-lg mt-0.5" x-text="total > 0 ? fmt(total) : '₱0'">₱0</p>
                                </div>
                            </div>
                        </template>

                        {{-- Group summary --}}
                        <template x-if="isGroup">
                            <div class="flex items-center gap-6">
                                <div>
                                    <p class="text-gray-400 text-xs">Rooms</p>
                                    <p class="text-purple-700 font-semibold text-sm mt-0.5" x-text="selectedRooms.length">0</p>
                                </div>
                                <div>
                                    <p class="text-gray-400 text-xs">Combined/Night</p>
                                    <p class="text-gray-800 font-semibold text-sm mt-0.5" x-text="fmt(totalNightlyRate)">—</p>
                                </div>
                                <div>
                                    <p class="text-gray-400 text-xs">Nights</p>
                                    <p class="text-gray-800 font-semibold text-sm mt-0.5" x-text="nights || '—'">—</p>
                                </div>
                                <div class="border-l border-gray-100 pl-6">
                                    <p class="text-gray-400 text-xs">Grand Total</p>
                                    <p class="text-purple-700 font-bold text-lg mt-0.5" x-text="total > 0 ? fmt(total) : '₱0'">₱0</p>
                                </div>
                            </div>
                        </template>
                    </div>

                    <div class="flex items-center gap-2 flex-shrink-0">
                        <a href="{{ route('reservations.index') }}"
                           class="px-4 py-2 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-lg transition-colors font-medium">
                            Cancel
                        </a>
                        <button type="submit" @click="formAction = 'pending'"
                                class="px-4 py-2 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors font-medium">
                            Save as Pending
                        </button>
                        <button type="submit" @click="formAction = 'confirmed'"
                                class="px-5 py-2 text-sm text-white rounded-lg transition-colors font-semibold"
                                :class="isGroup ? 'bg-purple-600 hover:bg-purple-700' : 'bg-teal-600 hover:bg-teal-700'">
                            <span x-text="isGroup ? 'Create Group Booking' : 'Confirm Reservation'">Confirm Reservation</span>
                        </button>
                    </div>

                </div>
            </div>
        </div>

    </form>

</div>

@endsection