@extends('layouts.admin')

@section('title', 'Create Group Booking')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    .fp-day-available { background: #dcfce7 !important; color: #166534 !important; border-radius: 8px; }
    .fp-day-limited { background: #fef9c3 !important; color: #854d0e !important; border-radius: 8px; }
    .fp-day-full { background: #fee2e2 !important; color: #991b1b !important; border-radius: 8px; text-decoration: line-through; }
    .flatpickr-day.fp-day-available:hover,
    .flatpickr-day.fp-day-limited:hover { opacity: 0.85; }
    .availability-legend span {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.8rem;
        color: var(--hp-text-muted);
        margin-right: 1rem;
    }
    .availability-legend i {
        width: 12px;
        height: 12px;
        border-radius: 3px;
        display: inline-block;
    }
    .room-line-card {
        border: 1px solid #DCE7DB;
        border-radius: 1rem;
        padding: 1rem 1.1rem;
        background: #fff;
        margin-bottom: 0.75rem;
    }
    .room-line-card .line-title {
        font-size: 0.75rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #6b7280;
        font-weight: 700;
    }
</style>
@endpush

@section('content')
<x-page-header title="Create Group Booking" subtitle="Book one or more rooms for the same stay"/>

@if ($errors->any())
    <div class="alert alert-danger rounded-4">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('admin.group-reservations.store') }}" id="reservationForm">
    @csrf

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="hp-card mb-4">
                <div class="hp-card-header">Stay Details</div>
                <div class="hp-card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Check-in <span class="text-danger">*</span></label>
                            <input type="text" name="check_in_date" id="check_in_date" class="form-control" value="{{ old('check_in_date') }}" placeholder="Select date" required autocomplete="off">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Check-out <span class="text-danger">*</span></label>
                            <input type="text" name="check_out_date" id="check_out_date" class="form-control" value="{{ old('check_out_date') }}" placeholder="Select date" required autocomplete="off">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select">
                                <option value="confirmed" @selected(old('status', 'confirmed') === 'confirmed')>Confirmed</option>
                                <option value="tentative" @selected(old('status') === 'tentative')>Tentative</option>
                                <option value="guaranteed" @selected(old('status') === 'guaranteed')>Guaranteed</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Source</label>
                            <select name="source" class="form-select">
                                <option value="group" @selected(old('source', 'group') === 'group')>Group</option>
                                @foreach(['direct'=>'Direct','walk_in'=>'Walk-in','telephone'=>'Telephone','email'=>'Email','website'=>'Website','corporate'=>'Corporate','travel_agent'=>'Travel agent','ota'=>'OTA'] as $val => $label)
                                    <option value="{{ $val }}" @selected(old('source') === $val)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <div class="availability-legend">
                                <span><i style="background:#dcfce7"></i> Available</span>
                                <span><i style="background:#fef9c3"></i> Limited</span>
                                <span><i style="background:#fee2e2"></i> Full</span>
                                <span class="text-muted">Calendar colours use the first room type</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="hp-card mb-4">
                <div class="hp-card-header d-flex justify-content-between align-items-center">
                    <span>Room and Package</span>
                    <button type="button" class="btn btn-hp-outline btn-sm" id="addRoomLine">
                        <i class="bi bi-plus-lg me-1"></i> Add room
                    </button>
                </div>
                <div class="hp-card-body">
                    <div id="roomLines">
                        @php
                            $oldRooms = old('rooms', [['room_type_id' => '', 'room_id' => '', 'package_id' => '', 'adults' => 2, 'children' => 0]]);
                        @endphp
                        @foreach($oldRooms as $i => $line)
                            <div class="room-line-card" data-line-index="{{ $i }}">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <div class="line-title">Room <span class="line-number">{{ $i + 1 }}</span></div>
                                    <button type="button" class="btn btn-sm btn-link text-danger p-0 remove-room-line {{ $i === 0 ? 'd-none' : '' }}">Remove</button>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Room type <span class="text-danger">*</span></label>
                                        <select name="rooms[{{ $i }}][room_type_id]" class="form-select room-type-select" required>
                                            <option value="">Select room type</option>
                                            @foreach($roomTypes as $rt)
                                                <option value="{{ $rt->id }}" data-base-rate="{{ $rt->base_rate }}" @selected(($line['room_type_id'] ?? '') == $rt->id)>
                                                    {{ $rt->name }} — {{ number_format($rt->base_rate, 0) }}/night
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Available room</label>
                                        <select name="rooms[{{ $i }}][room_id]" class="form-select room-select">
                                            <option value="">Auto-assign later</option>
                                        </select>
                                        <div class="form-text room-availability-hint">Select type and dates to load rooms.</div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Package</label>
                                        <select name="rooms[{{ $i }}][package_id]" class="form-select package-select">
                                            <option value="">None — room type rate</option>
                                            @foreach($packages as $p)
                                                <option value="{{ $p->id }}" data-room-type="{{ $p->room_type_id }}" @selected(($line['package_id'] ?? '') == $p->id)>{{ $p->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Adults <span class="text-danger">*</span></label>
                                        <input type="number" name="rooms[{{ $i }}][adults]" class="form-control adults-input" value="{{ $line['adults'] ?? 2 }}" min="1" required>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Children</label>
                                        <input type="number" name="rooms[{{ $i }}][children]" class="form-control children-input" value="{{ $line['children'] ?? 0 }}" min="0">
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="hp-card mb-4">
                <div class="hp-card-header">Group / Guest</div>
                <div class="hp-card-body">
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label">Group name</label>
                            <input type="text" name="group_name" class="form-control" value="{{ old('group_name') }}" placeholder="e.g. Acme Corp retreat, Wedding party…">
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">Lead guest <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <select name="guest_id" id="guest_id" class="form-select" required>
                                    <option value="">Select guest</option>
                                    @foreach($guests as $g)
                                        <option value="{{ $g->id }}" @selected(old('guest_id') == $g->id)>
                                            {{ $g->last_name }}, {{ $g->first_name }}
                                            @if($g->phone) · {{ $g->phone }} @endif
                                        </option>
                                    @endforeach
                                </select>
                                <button type="button" class="btn btn-hp-outline" data-bs-toggle="modal" data-bs-target="#newGuestModal">
                                    <i class="bi bi-person-plus"></i> New guest
                                </button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Corporate account</label>
                            <select name="corporate_account_id" id="corporate_account_id" class="form-select">
                                <option value="">—</option>
                                @foreach($corporateAccounts as $ca)
                                    <option value="{{ $ca->id }}" @selected(old('corporate_account_id') == $ca->id)>{{ $ca->company_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Travel agent</label>
                            <select name="travel_agent_id" class="form-select">
                                <option value="">—</option>
                                @foreach($travelAgents as $ta)
                                    <option value="{{ $ta->id }}" @selected(old('travel_agent_id') == $ta->id)>{{ $ta->agency_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Special requests</label>
                            <textarea name="special_requests" class="form-control" rows="3" placeholder="e.g. late arrival, connecting rooms…">{{ old('special_requests') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="hp-card mb-4">
                <div class="hp-card-header">Total Price</div>
                <div class="hp-card-body" id="quotePanel">
                    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
                        <div>
                            <div id="quoteLabel" class="small text-muted">Select dates and rooms to calculate</div>
                            <div id="quoteNights" class="small text-muted">—</div>
                        </div>
                        <div id="quoteTotal" class="fw-bold" style="font-size:1.75rem;color:#243922;line-height:1.1;">—</div>
                    </div>
                    <div class="small mb-3" style="max-width:28rem;">
                        <div class="d-flex justify-content-between py-1 border-bottom"><span>Subtotal</span><span id="quoteSubtotal">—</span></div>
                        <div class="d-flex justify-content-between py-1 border-bottom"><span>Discount</span><span id="quoteDiscount">—</span></div>
                        <div class="d-flex justify-content-between py-1 border-bottom"><span id="quoteTaxLabel">Tax</span><span id="quoteTax">—</span></div>
                        <div class="d-flex justify-content-between py-1 border-bottom"><span id="quoteServiceLabel">Service charge</span><span id="quoteService">—</span></div>
                        <div class="d-flex justify-content-between py-2 fw-bold"><span>Total</span><span id="quoteTotalRow">—</span></div>
                    </div>
                    <ul id="quoteLines" class="list-unstyled small text-muted mb-3"></ul>

                    <div class="d-flex flex-wrap align-items-center gap-2 pt-3 border-top">
                        <input type="hidden" name="intent" id="intentField" value="invoice">
                        <button type="submit" class="btn btn-hp-primary" id="submitBtn" name="intent" value="invoice">
                            <i class="bi bi-receipt me-1"></i> Create Group Booking and Invoice
                        </button>
                        <button type="button" class="btn btn-hp-outline" id="btnShowPay">
                            <i class="bi bi-credit-card me-1"></i> Create Group Booking and Pay
                        </button>
                        <a href="{{ route('admin.reservations.index') }}" class="btn btn-link text-muted">Cancel</a>
                    </div>

                    <div id="payPanel" class="rounded-4 p-3 mt-3 d-none" style="background:#F7FAF6;border:1px solid #DCE7DB;">
                        <h6 class="fw-bold mb-3">Payment details</h6>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Payment method <span class="text-danger">*</span></label>
                                <select name="payment_method" id="payment_method" class="form-select">
                                    <option value="cash">Cash</option>
                                    <option value="mpesa">M-Pesa</option>
                                    <option value="card">Card</option>
                                    <option value="bank_transfer">Bank transfer</option>
                                    <option value="cheque">Cheque</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Amount <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" min="0.01" name="payment_amount" id="payment_amount" class="form-control" placeholder="0.00">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">External reference</label>
                                <input type="text" name="payment_reference" class="form-control" placeholder="Txn / receipt no.">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Payment notes</label>
                                <input type="text" name="payment_notes" class="form-control" placeholder="Optional">
                            </div>
                            <div class="col-12 d-flex flex-wrap gap-2">
                                <button type="submit" class="btn btn-hp-primary" id="submitPayBtn" name="intent" value="pay">
                                    <i class="bi bi-check2-circle me-1"></i> Create Group and Pay
                                </button>
                                <button type="button" class="btn btn-hp-outline" id="btnHidePay">Back</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="hp-card mb-4 sticky-top" style="top:1rem;">
                <div class="hp-card-header">Room Type Availability</div>
                <div class="hp-card-body p-0">
                    <div id="typeAvailabilityHint" class="small text-muted px-3 py-3">
                        Loading availability…
                    </div>
                    <div id="typeAvailabilityList" class="list-group list-group-flush d-none"></div>
                </div>
            </div>
        </div>
    </div>
</form>

<div class="modal fade" id="newGuestModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 border-0">
            <div class="modal-header border-0">
                <h5 class="modal-title fw-bold">New guest</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="newGuestForm">
                <div class="modal-body pt-0">
                    <div id="guestFormError" class="alert alert-danger d-none rounded-4"></div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">First name <span class="text-danger">*</span></label>
                            <input type="text" name="first_name" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Last name <span class="text-danger">*</span></label>
                            <input type="text" name="last_name" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="text" name="phone" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Nationality</label>
                            <input type="text" name="nationality" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-hp-outline" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-hp-primary" id="saveGuestBtn">Save guest</button>
                </div>
            </form>
        </div>
    </div>
</div>

<template id="roomLineTemplate">
    <div class="room-line-card" data-line-index="__INDEX__">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="line-title">Room <span class="line-number">__NUMBER__</span></div>
            <button type="button" class="btn btn-sm btn-link text-danger p-0 remove-room-line">Remove</button>
        </div>
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Room type <span class="text-danger">*</span></label>
                <select name="rooms[__INDEX__][room_type_id]" class="form-select room-type-select" required>
                    <option value="">Select room type</option>
                    @foreach($roomTypes as $rt)
                        <option value="{{ $rt->id }}" data-base-rate="{{ $rt->base_rate }}">
                            {{ $rt->name }} — {{ number_format($rt->base_rate, 0) }}/night
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label">Available room</label>
                <select name="rooms[__INDEX__][room_id]" class="form-select room-select">
                    <option value="">Auto-assign later</option>
                </select>
                <div class="form-text room-availability-hint">Select type and dates to load rooms.</div>
            </div>
            <div class="col-md-4">
                <label class="form-label">Package</label>
                <select name="rooms[__INDEX__][package_id]" class="form-select package-select">
                    <option value="">None — room type rate</option>
                    @foreach($packages as $p)
                        <option value="{{ $p->id }}" data-room-type="{{ $p->room_type_id }}">{{ $p->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">Adults <span class="text-danger">*</span></label>
                <input type="number" name="rooms[__INDEX__][adults]" class="form-control adults-input" value="2" min="1" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">Children</label>
                <input type="number" name="rooms[__INDEX__][children]" class="form-control children-input" value="0" min="0">
            </div>
        </div>
    </div>
</template>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
(function () {
    function destroyPickers() {
        ['check_in_date', 'check_out_date'].forEach(function (id) {
            var el = document.getElementById(id);
            if (el && el._flatpickr) el._flatpickr.destroy();
        });
    }

    function initReservationForm() {
        if (typeof flatpickr === 'undefined') return;
        if (!document.getElementById('reservationForm')) return;

        destroyPickers();

        const availabilityUrl = @json(route('admin.reservations.availability'));
        const availabilitySummaryUrl = @json(route('admin.reservations.availability-summary'));
        const quoteUrl = @json(route('admin.reservations.quote'));
        const guestStoreUrl = @json(route('admin.guests.store'));
        const csrf = document.querySelector('meta[name="csrf-token"]').content;

        const roomLinesEl = document.getElementById('roomLines');
        const submitBtn = document.getElementById('submitBtn');
        const corporateEl = document.getElementById('corporate_account_id');
        const guestSelect = document.getElementById('guest_id');

        let dayAvailability = {};
        let totalRoomsForCalendar = 0;
        let checkInPicker, checkOutPicker;
        let quoteTimer = null;
        let lineCounter = roomLinesEl.querySelectorAll('.room-line-card').length;

        function money(amount, currency) {
            const n = Number(amount || 0);
            try {
                return new Intl.NumberFormat(undefined, { style: 'currency', currency: currency || 'USD', maximumFractionDigits: 2 }).format(n);
            } catch (e) {
                return (currency || '') + ' ' + n.toFixed(2);
            }
        }

        function getDates() {
            return {
                checkIn: document.getElementById('check_in_date').value,
                checkOut: document.getElementById('check_out_date').value,
            };
        }

        function renumberLines() {
            const cards = roomLinesEl.querySelectorAll('.room-line-card');
            cards.forEach(function (card, idx) {
                card.querySelector('.line-number').textContent = String(idx + 1);
                const removeBtn = card.querySelector('.remove-room-line');
                if (removeBtn) removeBtn.classList.toggle('d-none', cards.length === 1);
            });
        }

        function collectRooms() {
            const rooms = [];
            roomLinesEl.querySelectorAll('.room-line-card').forEach(function (card) {
                const typeId = card.querySelector('.room-type-select')?.value;
                if (!typeId) return;
                rooms.push({
                    room_type_id: typeId,
                    room_id: card.querySelector('.room-select')?.value || '',
                    package_id: card.querySelector('.package-select')?.value || '',
                    adults: card.querySelector('.adults-input')?.value || 1,
                    children: card.querySelector('.children-input')?.value || 0,
                });
            });
            return rooms;
        }

        function selectedRoomIdsExcept(exceptSelect) {
            const ids = [];
            roomLinesEl.querySelectorAll('.room-select').forEach(function (sel) {
                if (sel === exceptSelect) return;
                if (sel.value) ids.push(String(sel.value));
            });
            return ids;
        }

        function resetQuote() {
            document.getElementById('quoteLabel').textContent = 'Select dates and rooms to calculate';
            document.getElementById('quoteNights').textContent = '—';
            document.getElementById('quoteTotal').textContent = '—';
            document.getElementById('quoteSubtotal').textContent = '—';
            document.getElementById('quoteDiscount').textContent = '—';
            document.getElementById('quoteTax').textContent = '—';
            document.getElementById('quoteService').textContent = '—';
            document.getElementById('quoteTotalRow').textContent = '—';
            document.getElementById('quoteLines').innerHTML = '';
        }

        async function refreshQuote() {
            const { checkIn, checkOut } = getDates();
            const rooms = collectRooms();
            if (!checkIn || !checkOut || rooms.length === 0) {
                resetQuote();
                return;
            }

            const params = new URLSearchParams({
                check_in_date: checkIn,
                check_out_date: checkOut,
            });
            rooms.forEach(function (room, i) {
                params.set('rooms[' + i + '][room_type_id]', room.room_type_id);
                if (room.room_id) params.set('rooms[' + i + '][room_id]', room.room_id);
                if (room.package_id) params.set('rooms[' + i + '][package_id]', room.package_id);
                params.set('rooms[' + i + '][adults]', room.adults);
                params.set('rooms[' + i + '][children]', room.children);
            });
            if (corporateEl && corporateEl.value) params.set('corporate_account_id', corporateEl.value);

            document.getElementById('quoteLabel').textContent = 'Calculating…';

            try {
                const res = await fetch(quoteUrl + '?' + params.toString(), {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                });
                if (!res.ok) throw new Error('Quote failed');
                const data = await res.json();
                const cur = data.currency || 'USD';

                document.getElementById('quoteLabel').textContent = data.pricing_label || '';
                document.getElementById('quoteNights').textContent = data.nights + ' night' + (data.nights === 1 ? '' : 's');
                document.getElementById('quoteTotal').textContent = money(data.total, cur);
                document.getElementById('quoteSubtotal').textContent = money(data.subtotal, cur);
                document.getElementById('quoteDiscount').textContent = money(data.discount, cur);
                document.getElementById('quoteTaxLabel').textContent = 'Tax' + (data.tax_rate ? ' (' + data.tax_rate + '%)' : '');
                document.getElementById('quoteTax').textContent = money(data.tax, cur);
                document.getElementById('quoteServiceLabel').textContent = 'Service charge' + (data.service_charge_rate ? ' (' + data.service_charge_rate + '%)' : '');
                document.getElementById('quoteService').textContent = money(data.service_charge, cur);
                document.getElementById('quoteTotalRow').textContent = money(data.total, cur);

                const lines = document.getElementById('quoteLines');
                lines.innerHTML = '';
                (data.breakdown || []).forEach(function (row) {
                    const li = document.createElement('li');
                    li.className = 'd-flex justify-content-between';
                    li.innerHTML = '<span>' + (row.label || '') + '</span><span>' + money(row.amount, cur) + '</span>';
                    lines.appendChild(li);
                });
            } catch (e) {
                document.getElementById('quoteLabel').textContent = 'Could not calculate total';
                document.getElementById('quoteTotal').textContent = '—';
            }
        }

        function scheduleQuote() {
            clearTimeout(quoteTimer);
            quoteTimer = setTimeout(refreshQuote, 200);
        }

        function classifyDay(available, total) {
            if (available <= 0) return 'fp-day-full';
            if (total > 0 && available <= Math.max(1, Math.floor(total * 0.25))) return 'fp-day-limited';
            return 'fp-day-available';
        }

        function paintCalendar() {
            document.querySelectorAll('.flatpickr-day').forEach(function (dayEl) {
                dayEl.classList.remove('fp-day-available', 'fp-day-limited', 'fp-day-full');
                if (dayEl.classList.contains('flatpickr-disabled') || dayEl.classList.contains('prevMonthDay') || dayEl.classList.contains('nextMonthDay')) return;
                const date = dayEl.dateObj ? dayEl.dateObj.toISOString().slice(0, 10) : null;
                if (!date || dayAvailability[date] === undefined) return;
                dayEl.classList.add(classifyDay(dayAvailability[date], totalRoomsForCalendar));
            });
        }

        async function refreshCalendarMonth(monthStr) {
            const firstType = roomLinesEl.querySelector('.room-type-select')?.value;
            if (!firstType) {
                dayAvailability = {};
                paintCalendar();
                return;
            }
            const params = new URLSearchParams({ room_type_id: firstType, month: monthStr });
            try {
                const res = await fetch(availabilityUrl + '?' + params.toString(), {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                });
                if (!res.ok) return;
                const data = await res.json();
                dayAvailability = data.days || {};
                totalRoomsForCalendar = data.total_rooms || 0;
                paintCalendar();
            } catch (e) {}
        }

        async function loadAvailableRoomsForCard(card) {
            const typeSelect = card.querySelector('.room-type-select');
            const roomSelect = card.querySelector('.room-select');
            const hint = card.querySelector('.room-availability-hint');
            const { checkIn, checkOut } = getDates();
            const typeId = typeSelect?.value;
            const previous = roomSelect.value;

            roomSelect.innerHTML = '<option value="">Auto-assign later</option>';

            if (!typeId || !checkIn || !checkOut) {
                if (hint) hint.textContent = 'Select type and dates to load rooms.';
                return;
            }

            if (hint) hint.textContent = 'Loading available rooms…';

            const params = new URLSearchParams({
                room_type_id: typeId,
                check_in_date: checkIn,
                check_out_date: checkOut,
            });

            try {
                const res = await fetch(availabilityUrl + '?' + params.toString(), {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                });
                if (!res.ok) throw new Error('Availability failed');
                const data = await res.json();
                const taken = selectedRoomIdsExcept(roomSelect);
                const rooms = (data.rooms || []).filter(function (r) {
                    return !taken.includes(String(r.id)) || String(r.id) === previous;
                });

                rooms.forEach(function (room) {
                    const opt = document.createElement('option');
                    opt.value = room.id;
                    opt.textContent = 'Room ' + room.number + (room.floor ? ' · Floor ' + room.floor : '') + ' · ' + (room.status || 'available');
                    if (String(room.id) === previous) opt.selected = true;
                    roomSelect.appendChild(opt);
                });

                if (hint) {
                    hint.textContent = (data.message || (rooms.length + ' available')) + '. Choose a specific room or leave auto-assign.';
                    hint.classList.toggle('text-danger', (data.available || 0) < 1);
                }
            } catch (e) {
                if (hint) hint.textContent = 'Could not load available rooms.';
            }
        }

        async function refreshTypeAvailability() {
            const hint = document.getElementById('typeAvailabilityHint');
            const list = document.getElementById('typeAvailabilityList');
            if (!hint || !list) return;

            const { checkIn, checkOut } = getDates();
            const hasDates = !!(checkIn && checkOut);

            hint.classList.remove('d-none');
            hint.textContent = 'Loading availability…';
            list.classList.add('d-none');

            try {
                const params = new URLSearchParams();
                if (hasDates) {
                    params.set('check_in_date', checkIn);
                    params.set('check_out_date', checkOut);
                }
                const res = await fetch(availabilitySummaryUrl + (params.toString() ? '?' + params.toString() : ''), {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                });
                if (!res.ok) throw new Error('Failed');
                const data = await res.json();
                const types = data.types || [];

                if (types.length === 0) {
                    hint.textContent = 'No active room types found.';
                    list.innerHTML = '';
                    return;
                }

                list.innerHTML = '';
                types.forEach(function (type) {
                    const available = Number(type.available || 0);
                    const total = Number(type.total || 0);
                    const item = document.createElement('div');
                    item.className = 'list-group-item d-flex justify-content-between align-items-center gap-2';
                    const badgeClass = available <= 0
                        ? 'text-bg-danger'
                        : (total > 0 && available <= Math.max(1, Math.floor(total * 0.25)) ? 'text-bg-warning' : 'text-bg-success');
                    const countLabel = hasDates ? ' available' : ' today';
                    item.innerHTML =
                        '<div>' +
                            '<div class="fw-semibold">' + (type.name || 'Room type') + '</div>' +
                            '<div class="small text-muted">' + total + ' total</div>' +
                        '</div>' +
                        '<span class="badge rounded-pill ' + badgeClass + '">' + available + countLabel + '</span>';
                    list.appendChild(item);
                });

                hint.classList.add('d-none');
                list.classList.remove('d-none');
            } catch (e) {
                hint.classList.remove('d-none');
                hint.textContent = 'Could not load room type availability.';
                list.classList.add('d-none');
                list.innerHTML = '';
            }
        }

        async function refreshAllRoomSelects() {
            const cards = roomLinesEl.querySelectorAll('.room-line-card');
            for (const card of cards) {
                await loadAvailableRoomsForCard(card);
            }
            refreshTypeAvailability();
            scheduleQuote();
        }

        function bindCardEvents(card) {
            card.querySelector('.room-type-select')?.addEventListener('change', function () {
                loadAvailableRoomsForCard(card);
                if (checkInPicker) {
                    refreshCalendarMonth(checkInPicker.currentYear + '-' + String(checkInPicker.currentMonth + 1).padStart(2, '0'));
                }
                scheduleQuote();
            });
            card.querySelector('.room-select')?.addEventListener('change', function () {
                refreshAllRoomSelects();
            });
            card.querySelector('.package-select')?.addEventListener('change', scheduleQuote);
            card.querySelector('.adults-input')?.addEventListener('input', scheduleQuote);
            card.querySelector('.children-input')?.addEventListener('input', scheduleQuote);
            card.querySelector('.remove-room-line')?.addEventListener('click', function () {
                if (roomLinesEl.querySelectorAll('.room-line-card').length <= 1) return;
                card.remove();
                renumberLines();
                refreshAllRoomSelects();
            });
        }

        roomLinesEl.querySelectorAll('.room-line-card').forEach(bindCardEvents);

        document.getElementById('addRoomLine')?.addEventListener('click', function () {
            const tpl = document.getElementById('roomLineTemplate').innerHTML
                .replaceAll('__INDEX__', String(lineCounter))
                .replaceAll('__NUMBER__', String(roomLinesEl.querySelectorAll('.room-line-card').length + 1));
            lineCounter += 1;
            const wrap = document.createElement('div');
            wrap.innerHTML = tpl.trim();
            const card = wrap.firstElementChild;
            roomLinesEl.appendChild(card);
            bindCardEvents(card);
            renumberLines();
            loadAvailableRoomsForCard(card);
            scheduleQuote();
        });

        checkInPicker = flatpickr('#check_in_date', {
            dateFormat: 'Y-m-d',
            minDate: 'today',
            onChange: function (selected) {
                if (selected[0]) {
                    checkOutPicker.set('minDate', new Date(selected[0].getTime() + 86400000));
                }
                refreshAllRoomSelects();
            },
            onMonthChange: function (selectedDates, dateStr, instance) {
                refreshCalendarMonth(instance.currentYear + '-' + String(instance.currentMonth + 1).padStart(2, '0'));
            },
            onOpen: function (selectedDates, dateStr, instance) {
                refreshCalendarMonth(instance.currentYear + '-' + String(instance.currentMonth + 1).padStart(2, '0'));
            },
            onDayCreate: function () { paintCalendar(); },
        });

        checkOutPicker = flatpickr('#check_out_date', {
            dateFormat: 'Y-m-d',
            minDate: 'today',
            onChange: function () { refreshAllRoomSelects(); },
            onMonthChange: function (selectedDates, dateStr, instance) {
                refreshCalendarMonth(instance.currentYear + '-' + String(instance.currentMonth + 1).padStart(2, '0'));
            },
            onOpen: function (selectedDates, dateStr, instance) {
                refreshCalendarMonth(instance.currentYear + '-' + String(instance.currentMonth + 1).padStart(2, '0'));
            },
            onDayCreate: function () { paintCalendar(); },
        });

        if (corporateEl) corporateEl.addEventListener('change', scheduleQuote);

        var payPanel = document.getElementById('payPanel');
        var btnShowPay = document.getElementById('btnShowPay');
        var btnHidePay = document.getElementById('btnHidePay');
        var intentField = document.getElementById('intentField');
        var paymentAmount = document.getElementById('payment_amount');

        function fillPaymentAmount() {
            var totalText = document.getElementById('quoteTotal')?.textContent || '';
            var numeric = totalText.replace(/[^\d.]/g, '');
            if (paymentAmount && numeric) {
                paymentAmount.value = parseFloat(numeric).toFixed(2);
            }
        }

        if (btnShowPay && payPanel) {
            btnShowPay.addEventListener('click', function () {
                payPanel.classList.remove('d-none');
                if (intentField) intentField.value = 'pay';
                if (submitBtn) {
                    submitBtn.classList.add('d-none');
                    submitBtn.disabled = true;
                    submitBtn.removeAttribute('name');
                }
                btnShowPay.classList.add('d-none');
                fillPaymentAmount();
                paymentAmount?.focus();
            });
        }
        if (btnHidePay && payPanel) {
            btnHidePay.addEventListener('click', function () {
                payPanel.classList.add('d-none');
                if (intentField) intentField.value = 'invoice';
                if (submitBtn) {
                    submitBtn.classList.remove('d-none');
                    submitBtn.disabled = false;
                    submitBtn.setAttribute('name', 'intent');
                    submitBtn.setAttribute('value', 'invoice');
                }
                btnShowPay?.classList.remove('d-none');
            });
        }

        const guestForm = document.getElementById('newGuestForm');
        guestForm?.addEventListener('submit', async function (e) {
            e.preventDefault();
            const errBox = document.getElementById('guestFormError');
            errBox.classList.add('d-none');
            const fd = new FormData(guestForm);
            try {
                const res = await fetch(guestStoreUrl, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrf,
                    },
                    body: fd,
                });
                const data = await res.json();
                if (!res.ok) {
                    const msg = data.message || Object.values(data.errors || {}).flat().join(' ') || 'Could not save guest';
                    throw new Error(msg);
                }
                const guest = data.guest || data;
                const opt = document.createElement('option');
                opt.value = guest.id;
                opt.textContent = guest.last_name + ', ' + guest.first_name + (guest.phone ? ' · ' + guest.phone : '');
                opt.selected = true;
                guestSelect.appendChild(opt);
                guestSelect.value = guest.id;
                bootstrap.Modal.getInstance(document.getElementById('newGuestModal'))?.hide();
                guestForm.reset();
            } catch (err) {
                errBox.textContent = err.message;
                errBox.classList.remove('d-none');
            }
        });

        renumberLines();
        refreshAllRoomSelects();
    }

    document.addEventListener('DOMContentLoaded', initReservationForm);
    document.addEventListener('turbo:load', initReservationForm);
})();
</script>
@endpush