{{-- resources/views/reservations/create.blade.php --}}
@extends('layouts.app')
@section('title', 'New Reservation')
@section('page_title', 'New Reservation')

@section('content')

<div class="d-flex gap-2 mb-3">
    <a href="{{ tenant_route('reservations.index') }}"
       class="btn btn-sm btn-outline-secondary">← Back</a>
</div>

{{-- Step Progress --}}
<div style="display:flex;align-items:center;gap:0;margin-bottom:24px;" id="stepProgress">
    @foreach(['Dates & Availability', 'Select Rooms', 'Guest & Details', 'Review & Confirm'] as $i => $label)
        <div style="flex:1;text-align:center;">
            <div style="display:flex;align-items:center;">
                @if($i > 0)
                    <div class="step-line" id="line-{{ $i }}"
                         style="flex:1;height:2px;background:var(--border);transition:background .3s;"></div>
                @endif
                <div style="flex:none;margin:0 auto;">
                    <div class="step-circle" id="circle-{{ $i + 1 }}"
                         style="width:32px;height:32px;border-radius:50%;
                                display:flex;align-items:center;justify-content:center;
                                font-size:.75rem;font-weight:700;margin:0 auto 4px;
                                border:2px solid var(--border);background:#fff;
                                color:var(--muted);transition:all .3s;">
                        {{ $i + 1 }}
                    </div>
                    <div style="font-size:.68rem;color:var(--muted);
                                white-space:nowrap;transition:color .3s;"
                         class="step-label" id="label-{{ $i + 1 }}">
                        {{ $label }}
                    </div>
                </div>
                @if($i < 3)
                    <div class="step-line" id="line-{{ $i + 1 }}-right"
                         style="flex:1;height:2px;background:var(--border);transition:background .3s;"></div>
                @endif
            </div>
        </div>
    @endforeach
</div>

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

{{-- ═══════════════════════════════════════════════════════
     STEP 1 — Dates & Availability
═══════════════════════════════════════════════════════ --}}
<div class="step-panel" id="step1">
<div class="row g-3">

    <div class="col-xl-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-calendar3 me-2" style="color:var(--clay)"></i>
                    Select Dates
                </span>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold">
                            Check In <span class="text-danger">*</span>
                        </label>
                        <input type="date" id="s1_check_in"
                               class="form-control"
                               value="{{ today()->toDateString() }}"
                               min="{{ today()->toDateString() }}">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">
                            Check Out <span class="text-danger">*</span>
                        </label>
                        <input type="date" id="s1_check_out"
                               class="form-control"
                               value="{{ today()->addDay()->toDateString() }}">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Rate Plan</label>
                        <select id="s1_rate_plan" class="form-select">
                            <option value="">Any / No plan</option>
                            @foreach($ratePlans as $plan)
                                <option value="{{ $plan->id }}">
                                    {{ $plan->name }} ({{ $plan->code }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Nights</label>
                        <input type="text" id="s1_nights_display"
                               class="form-control" readonly
                               value="1 night"
                               style="background:var(--bg);">
                    </div>
                    <div class="col-12">
                        <button type="button"
                                onclick="checkAvailability()"
                                class="btn btn-primary w-100">
                            <i class="bi bi-search me-2"></i>
                            Check Availability
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Availability Results --}}
    <div class="col-xl-6">
        <div id="availabilityResults">
            <div class="card" style="border-style:dashed;">
                <div class="card-body text-center py-5" style="color:var(--muted);">
                    <i class="bi bi-calendar-check"
                       style="font-size:2rem;display:block;margin-bottom:8px;"></i>
                    <span style="font-size:.82rem;">
                        Select dates and click Check Availability
                    </span>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="d-flex justify-content-end mt-3">
    <button type="button" onclick="goToStep(2)"
            id="step1Next"
            class="btn btn-primary" disabled>
        Next: Select Rooms →
    </button>
</div>
</div>

{{-- ═══════════════════════════════════════════════════════
     STEP 2 — Select Rooms
═══════════════════════════════════════════════════════ --}}
<div class="step-panel d-none" id="step2">

    <div id="roomSelectionArea"></div>

    {{-- Live pricing summary --}}
    <div class="card mt-3" id="pricingSummary" style="display:none!important;">
        <div class="card-header">
            <span class="card-title">
                <i class="bi bi-calculator me-2" style="color:var(--clay)"></i>
                Room Pricing
            </span>
        </div>
        <div class="card-body" id="pricingSummaryBody"></div>
    </div>

    <div class="d-flex justify-content-between mt-3">
        <button type="button" onclick="goToStep(1)"
                class="btn btn-outline-secondary">
            ← Back
        </button>
        <button type="button" onclick="goToStep(3)"
                id="step2Next"
                class="btn btn-primary" disabled>
            Next: Guest Details →
        </button>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════
     STEP 3 — Guest & Details
═══════════════════════════════════════════════════════ --}}
<div class="step-panel d-none" id="step3">
<div class="row g-3">

    {{-- Guest --}}
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-person me-2" style="color:var(--clay)"></i>
                    Guest
                </span>
                <button type="button"
                        onclick="openGuestModal()"
                        class="btn btn-xs btn-outline-secondary">
                    <i class="bi bi-plus-lg me-1"></i>New Guest
                </button>
            </div>
            <div class="card-body">
                <select name="guest_id" id="guestSelect"
                        class="form-select @error('guest_id') is-invalid @enderror"
                        required>
                    <option value="">Select guest...</option>
                    @foreach(\App\Models\Guest::where('property_id', tenant_id())
                        ->where('is_blacklisted', false)
                        ->orderBy('first_name')->get() as $g)
                        <option value="{{ $g->id }}">
                            {{ $g->first_name }} {{ $g->last_name }}
                            @if($g->email) — {{ $g->email }} @endif
                        </option>
                    @endforeach
                </select>
                <div class="mt-2">
                    <select name="company_id" class="form-select form-select-sm">
                        <option value="">No company / individual</option>
                        @foreach(\App\Models\Company::where('property_id', tenant_id())
                            ->where('is_active', true)->orderBy('name')->get() as $c)
                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    {{-- Occupancy --}}
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-people me-2" style="color:var(--clay)"></i>
                    Occupancy
                </span>
            </div>
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-4">
                        <label class="form-label fw-semibold" style="font-size:.78rem;">
                            Adults <span class="text-danger">*</span>
                        </label>
                        <input type="number" name="adults"
                               class="form-control" value="1" min="1" required>
                    </div>
                    <div class="col-4">
                        <label class="form-label fw-semibold" style="font-size:.78rem;">
                            Children
                        </label>
                        <input type="number" name="children"
                               class="form-control" value="0" min="0">
                    </div>
                    <div class="col-4">
                        <label class="form-label fw-semibold" style="font-size:.78rem;">
                            Infants
                        </label>
                        <input type="number" name="infants"
                               class="form-control" value="0" min="0">
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Booking Details --}}
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-info-circle me-2" style="color:var(--clay)"></i>
                    Booking Details
                </span>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label fw-semibold">
                            Booking Source <span class="text-danger">*</span>
                        </label>
                        <select name="source" class="form-select" required>
                            @foreach(config('kubhuka.general.reservation_sources', []) as $src)
                                <option value="{{ $src }}"
                                        {{ $src === 'walk_in' ? 'selected' : '' }}>
                                    {{ ucfirst(str_replace('_', ' ', $src)) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Deposit Required</label>
                        <div class="input-group">
                            <span class="input-group-text" style="font-size:.8rem;">
                                {{ tenant()->baseCurrency?->code ?? 'USD' }}
                            </span>
                            <input type="number" name="deposit_required"
                                   class="form-control" value="0" min="0" step="0.01">
                        </div>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Promotional Code</label>
                        <input type="text" name="promotional_code"
                               class="form-control" placeholder="Optional">
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Requests --}}
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-chat-text me-2" style="color:var(--clay)"></i>
                    Requests & Notes
                </span>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Special Requests</label>
                    <textarea name="special_requests" rows="3"
                              class="form-control"
                              placeholder="Guest requests, dietary needs, preferences..."></textarea>
                </div>
                <div>
                    <label class="form-label fw-semibold">Internal Notes</label>
                    <textarea name="internal_notes" rows="2"
                              class="form-control"
                              placeholder="Staff notes (not visible to guest)..."></textarea>
                </div>
            </div>
        </div>
    </div>

    {{-- Service Add-ons --}}
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-grid me-2" style="color:var(--clay)"></i>
                    Additional Services
                    <span style="font-size:.72rem;font-weight:400;
                                 color:var(--muted);margin-left:6px;">
                        optional
                    </span>
                </span>
            </div>
            <div class="card-body">
                @php
                    $services = \App\Models\PropertyService::where('property_id', tenant_id())
                        ->where('is_active', true)
                        ->orderBy('name')
                        ->get();
                @endphp

                @if($services->isEmpty())
                    <p class="text-muted mb-0" style="font-size:.82rem;">
                        No services configured.
                        <a href="{{ tenant_route('services.index') }}"
                           style="color:var(--clay);">Add services →</a>
                    </p>
                @else
                    <div class="row g-2" id="servicesGrid">
                        @foreach($services as $svc)
                            <div class="col-md-6 col-xl-4">
                                <div class="service-card"
                                     id="svcCard-{{ $svc->id }}"
                                     style="border:1.5px solid var(--border);
                                            border-radius:8px;padding:12px;
                                            cursor:pointer;transition:all .15s;"
                                     onclick="toggleService({{ $svc->id }})">
                                    <div style="display:flex;
                                                justify-content:space-between;
                                                align-items:flex-start;">
                                        <div>
                                            <div class="fw-semibold"
                                                 style="font-size:.83rem;">
                                                {{ $svc->name }}
                                            </div>
                                            <div style="font-size:.72rem;
                                                        color:var(--muted);">
                                                {{ tenant()->baseCurrency?->code ?? 'USD' }}
                                                {{ number_format($svc->price, 2) }}
                                                @if($svc->unit) / {{ $svc->unit }} @endif
                                            </div>
                                        </div>
                                        <div class="svc-check" id="svcCheck-{{ $svc->id }}"
                                             style="width:22px;height:22px;
                                                    border-radius:50%;
                                                    border:2px solid var(--border);
                                                    display:flex;align-items:center;
                                                    justify-content:center;
                                                    font-size:.7rem;
                                                    transition:all .15s;">
                                        </div>
                                    </div>
                                    <div class="svc-qty-row mt-2 d-none"
                                         id="svcQty-{{ $svc->id }}"
                                         onclick="event.stopPropagation()">
                                        <div style="display:flex;align-items:center;
                                                    gap:8px;margin-top:6px;">
                                            <label style="font-size:.72rem;
                                                          color:var(--muted);">
                                                Qty:
                                            </label>
                                            <input type="number"
                                                   name="services[{{ $loop->index }}][quantity]"
                                                   id="svcQtyInput-{{ $svc->id }}"
                                                   class="form-control form-control-sm"
                                                   style="width:70px;"
                                                   value="1" min="1"
                                                   onchange="updateServiceTotal({{ $svc->id }}, {{ $svc->price }})">
                                            <span id="svcTotal-{{ $svc->id }}"
                                                  style="font-size:.75rem;
                                                         font-weight:600;
                                                         color:var(--clay);">
                                                {{ tenant()->baseCurrency?->code ?? 'USD' }}
                                                {{ number_format($svc->price, 2) }}
                                            </span>
                                        </div>
                                        <input type="hidden"
                                               name="services[{{ $loop->index }}][service_id]"
                                               id="svcIdInput-{{ $svc->id }}"
                                               value="{{ $svc->id }}"
                                               disabled>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="mt-3 pt-3"
                         style="border-top:1px solid var(--border);">
                        <div style="display:flex;
                                    justify-content:space-between;
                                    font-size:.82rem;">
                            <span style="color:var(--muted);">Services subtotal</span>
                            <span id="servicesTotalDisplay"
                                  class="fw-semibold">
                                {{ tenant()->baseCurrency?->code ?? 'USD' }} 0.00
                            </span>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

</div>

<div class="d-flex justify-content-between mt-3">
    <button type="button" onclick="goToStep(2)"
            class="btn btn-outline-secondary">← Back</button>
    <button type="button" onclick="goToStep(4)"
            class="btn btn-primary">
        Next: Review →
    </button>
</div>
</div>

{{-- ═══════════════════════════════════════════════════════
     STEP 4 — Review & Confirm
═══════════════════════════════════════════════════════ --}}
<div class="step-panel d-none" id="step4">

    <div class="row g-3">
        <div class="col-xl-7">
            <div class="card">
                <div class="card-header">
                    <span class="card-title">
                        <i class="bi bi-receipt me-2"
                           style="color:var(--clay)"></i>
                        Reservation Summary
                    </span>
                </div>
                <div class="card-body" id="reviewBody">
                    {{-- Filled by JS --}}
                </div>
            </div>
        </div>

        <div class="col-xl-5">
            <div class="card">
                <div class="card-header">
                    <span class="card-title">
                        <i class="bi bi-calculator me-2"
                           style="color:var(--clay)"></i>
                        Total
                    </span>
                </div>
                <div class="card-body">
                    <div id="reviewTotals"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Hidden form fields —— populated from wizard state --}}
    <input type="hidden" name="check_in_date"  id="f_check_in">
    <input type="hidden" name="check_out_date" id="f_check_out">
    <input type="hidden" name="rate_plan_id"   id="f_rate_plan">

    <div class="d-flex justify-content-between mt-3">
        <button type="button" onclick="goToStep(3)"
                class="btn btn-outline-secondary">← Back</button>
        <button type="submit" class="btn btn-primary">
            <i class="bi bi-check-lg me-1"></i>
            Confirm Reservation
        </button>
    </div>
</div>

</form>

{{-- ════════════════════════════════════════════════════════
     Quick Guest Modal
════════════════════════════════════════════════════════ --}}
<div class="modal fade" id="quickGuestModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"
                    style="font-size:.9rem;font-weight:700;">
                    New Guest
                </h5>
                <button type="button" class="btn-close"
                        data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold">
                            First Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" id="qg_first_name"
                               class="form-control" required>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">
                            Last Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" id="qg_last_name"
                               class="form-control" required>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Email</label>
                        <input type="email" id="qg_email"
                               class="form-control">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Phone</label>
                        <input type="text" id="qg_phone"
                               class="form-control">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">ID Number</label>
                        <input type="text" id="qg_id_number"
                               class="form-control">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Nationality</label>
                        <input type="text" id="qg_nationality"
                               class="form-control"
                               placeholder="ZWE, ZAF, GBR...">
                    </div>
                </div>
                <div id="qgError"
                     class="alert alert-danger mt-3 d-none"></div>
            </div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-outline-secondary btn-sm"
                        data-bs-dismiss="modal">Cancel</button>
                <button type="button"
                        class="btn btn-primary btn-sm"
                        onclick="saveQuickGuest()">
                    Save Guest
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// ── State ──────────────────────────────────────────────────────────────────
const state = {
    step: 1,
    checkIn: '{{ today()->toDateString() }}',
    checkOut: '{{ today()->addDay()->toDateString() }}',
    ratePlanId: '',
    nights: 1,
    availableCategories: [],
    selectedRooms: [],   // [{id, number, categoryName, ratePerNight, nights}]
    servicesTotal: 0,
    currency: '{{ tenant()->baseCurrency?->code ?? 'USD' }}',
};

function n(val) {
    return parseFloat(val) || 0;
}

// ── Step navigation ────────────────────────────────────────────────────────
function goToStep(n) {
    if (n === 2 && state.availableCategories.length === 0) return;
    if (n === 3 && state.selectedRooms.length === 0) return;

    document.querySelectorAll('.step-panel').forEach(p => p.classList.add('d-none'));
    document.getElementById('step' + n).classList.remove('d-none');
    state.step = n;
    updateProgress(n);

    if (n === 4) buildReview();
}

function updateProgress(active) {
    for (let i = 1; i <= 4; i++) {
        const circle = document.getElementById('circle-' + i);
        const label  = document.getElementById('label-' + i);
        if (i < active) {
            circle.style.background     = 'var(--clay)';
            circle.style.borderColor    = 'var(--clay)';
            circle.style.color          = '#fff';
            circle.innerHTML            = '✓';
            label.style.color           = 'var(--clay)';
        } else if (i === active) {
            circle.style.background     = 'var(--clay)';
            circle.style.borderColor    = 'var(--clay)';
            circle.style.color          = '#fff';
            circle.innerHTML            = i;
            label.style.color           = 'var(--text)';
            label.style.fontWeight      = '600';
        } else {
            circle.style.background     = '#fff';
            circle.style.borderColor    = 'var(--border)';
            circle.style.color          = 'var(--muted)';
            circle.innerHTML            = i;
            label.style.color           = 'var(--muted)';
            label.style.fontWeight      = '400';
        }
    }
}

// ── Step 1: Check availability ─────────────────────────────────────────────
document.getElementById('s1_check_in').addEventListener('change', updateNights);
document.getElementById('s1_check_out').addEventListener('change', updateNights);

function updateNights() {
    const ci = document.getElementById('s1_check_in').value;
    const co = document.getElementById('s1_check_out').value;
    if (ci && co) {
        const n = Math.round((new Date(co) - new Date(ci)) / 86400000);
        document.getElementById('s1_nights_display').value =
            n > 0 ? n + (n === 1 ? ' night' : ' nights') : 'Invalid dates';
        state.nights = n > 0 ? n : 0;
    }
}

async function checkAvailability() {
    const ci = document.getElementById('s1_check_in').value;
    const co = document.getElementById('s1_check_out').value;
    const rp = document.getElementById('s1_rate_plan').value;

    if (!ci || !co) return;

    const el = document.getElementById('availabilityResults');
    el.innerHTML = `<div class="card"><div class="card-body text-center py-4">
        <div class="spinner-border spinner-border-sm" style="color:var(--clay)"></div>
        <span class="ms-2" style="font-size:.82rem;">Checking availability...</span>
        </div></div>`;

    const res = await fetch(
        '{{ tenant_route('reservations.availability') }}' +
        '?check_in=' + ci + '&check_out=' + co +
        (rp ? '&rate_plan_id=' + rp : '') +
        '&_token={{ csrf_token() }}'
    );

    const data = await res.json();

    if (data.categories.length === 0) {
        el.innerHTML = `<div class="card"><div class="card-body text-center py-5">
            <i class="bi bi-x-circle" style="font-size:2rem;color:var(--danger)"></i>
            <p class="fw-semibold mt-3 mb-1">No rooms available</p>
            <p class="text-muted" style="font-size:.82rem;">Try different dates</p>
            </div></div>`;
        document.getElementById('step1Next').disabled = true;
        return;
    }

    state.checkIn             = ci;
    state.checkOut            = co;
    state.ratePlanId          = rp;
    state.nights              = data.nights;
    state.availableCategories = data.categories;

    let html = `<div style="font-size:.78rem;color:var(--muted);margin-bottom:10px;">
        <i class="bi bi-calendar-check me-1"></i>
        ${data.check_in} → ${data.check_out} ·
        <strong>${data.nights} night${data.nights > 1 ? 's' : ''}</strong>
    </div>`;

    data.categories.forEach(cat => {
        // ── Always cast — never call toFixed on raw JSON value ──
        const roomRate = n(cat.room_rate);
        const total    = n(cat.total_per_room);
        const hasRate  = roomRate > 0;
        const rateStr  = hasRate
            ? `${cat.currency} ${roomRate.toFixed(2)}/night`
            : 'Rate not set';
        const totalStr = hasRate
            ? `${cat.currency} ${total.toFixed(2)} total`
            : '';

        html += `<div class="card mb-2" style="border-left:3px solid var(--success);">
            <div class="card-body" style="padding:12px 16px;">
                <div style="display:flex;justify-content:space-between;align-items:center;">
                    <div>
                        <div class="fw-semibold" style="font-size:.85rem;">${cat.name}</div>
                        <div style="font-size:.72rem;color:var(--muted);">
                            ${cat.bed_type || ''} · Max ${cat.max_occupancy} guests
                        </div>
                    </div>
                    <div style="text-align:right;">
                        <div style="font-weight:600;color:var(--clay);font-size:.85rem;">
                            ${rateStr}
                        </div>
                        ${totalStr
                            ? `<div style="font-size:.72rem;color:var(--muted);">${totalStr}</div>`
                            : ''}
                    </div>
                </div>
                <div style="margin-top:6px;font-size:.72rem;color:var(--success);">
                    <i class="bi bi-check-circle me-1"></i>
                    ${cat.available_count} room${cat.available_count > 1 ? 's' : ''} available
                </div>
            </div>
        </div>`;
    });

    el.innerHTML = html;
    document.getElementById('step1Next').disabled = false;

    buildRoomSelection(data.categories);
}

// ── Step 2: Room selection ─────────────────────────────────────────────────
function buildRoomSelection(categories) {
    let html = '';

    categories.forEach(cat => {
        const roomRate = n(cat.room_rate);      
        const total    = n(cat.total_per_room); 
        const hasRate  = roomRate > 0;
        const rateStr  = hasRate
            ? `${cat.currency} ${roomRate.toFixed(2)}/night`
            : 'No rate set';

        html += `<div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-door-open me-2" style="color:var(--clay)"></i>
                    ${cat.name}
                </span>
                <span style="font-size:.75rem;font-weight:600;color:var(--clay);">${rateStr}</span>
            </div>
            <div class="card-body">
                <div style="display:flex;flex-wrap:wrap;gap:8px;">`;

        cat.available_rooms.forEach(room => {
            html += `<label id="roomLabel-${room.id}"
                style="display:flex;align-items:center;gap:7px;
                       border:1.5px solid var(--border);border-radius:8px;
                       padding:8px 14px;cursor:pointer;font-size:.82rem;
                       transition:all .15s;background:#fff;">
                <input type="checkbox" name="room_ids[]"
                       value="${room.id}"
                       onchange="roomToggled(this, ${room.id}, '${cat.name}', ${roomRate}, ${total})"
                       style="display:none;">
                <i class="bi bi-door-closed" id="roomIcon-${room.id}"></i>
                <span>Room ${room.number}</span>
                ${room.floor !== null ? `<span style="font-size:.7rem;color:var(--muted);">Fl.${room.floor}</span>` : ''}
                ${hasRate ? `<span style="font-size:.7rem;color:var(--clay);font-weight:600;">
                    ${cat.currency} ${total.toFixed(2)}</span>` : ''}
            </label>`;
        });

        html += `</div></div></div>`;
    });

    document.getElementById('roomSelectionArea').innerHTML = html;
}

function roomToggled(checkbox, roomId, catName, ratePerNight, roomTotal) {
    const label = document.getElementById('roomLabel-' + roomId);
    const icon  = document.getElementById('roomIcon-' + roomId);
    ratePerNight = n(ratePerNight);   // ← safe cast
    roomTotal    = n(roomTotal);      // ← safe cast

    if (checkbox.checked) {
        label.style.borderColor = 'var(--clay)';
        label.style.background  = 'var(--clay-light)';
        icon.className          = 'bi bi-door-open';

        // Get room number from the span text
        const spans = checkbox.closest('label').querySelectorAll('span');
        const roomNumber = spans[0]?.textContent.trim() ?? 'Room ' + roomId;

        state.selectedRooms.push({
            id: roomId,
            number: roomNumber,
            categoryName: catName,
            ratePerNight,
            nights: state.nights,
            total: roomTotal,
        });
    } else {
        label.style.borderColor = 'var(--border)';
        label.style.background  = '#fff';
        icon.className          = 'bi bi-door-closed';
        state.selectedRooms = state.selectedRooms.filter(r => r.id !== roomId);
    }

    updatePricingSummary();
    document.getElementById('step2Next').disabled = state.selectedRooms.length === 0;
}

function updatePricingSummary() {
    if (state.selectedRooms.length === 0) {
        document.getElementById('pricingSummary').style.setProperty('display', 'none', 'important');
        return;
    }

    document.getElementById('pricingSummary').style.removeProperty('display');

    let html = '';
    let roomsTotal = 0;

    state.selectedRooms.forEach(r => {
        roomsTotal += r.total;
        html += `<div style="display:flex;justify-content:space-between;
                              padding:7px 0;border-bottom:1px solid var(--border);
                              font-size:.82rem;">
            <span>${r.number} — ${r.categoryName}</span>
            <span>
                ${state.currency} ${r.ratePerNight.toFixed(2)} × ${state.nights}
                = <strong>${state.currency} ${r.total.toFixed(2)}</strong>
            </span>
        </div>`;
    });

    html += `<div style="display:flex;justify-content:space-between;
                          padding:10px 0;font-weight:700;font-size:.9rem;">
        <span>Rooms Total</span>
        <span style="color:var(--clay);">${state.currency} ${roomsTotal.toFixed(2)}</span>
    </div>`;

    document.getElementById('pricingSummaryBody').innerHTML = html;
}

// ── Services ───────────────────────────────────────────────────────────────
const selectedServices = {};

function toggleService(svcId) {
    const card  = document.getElementById('svcCard-' + svcId);
    const check = document.getElementById('svcCheck-' + svcId);
    const qtyRow= document.getElementById('svcQty-' + svcId);
    const input = document.getElementById('svcIdInput-' + svcId);

    if (selectedServices[svcId]) {
        delete selectedServices[svcId];
        card.style.borderColor  = 'var(--border)';
        card.style.background   = '#fff';
        check.innerHTML         = '';
        check.style.background  = '#fff';
        check.style.borderColor = 'var(--border)';
        qtyRow.classList.add('d-none');
        if (input) input.disabled = true;
    } else {
        const price = parseFloat(
            document.getElementById('svcQtyInput-' + svcId)?.dataset.price ||
            document.getElementById('svcTotal-' + svcId)?.dataset.price || 0
        );
        selectedServices[svcId] = { qty: 1, price };
        card.style.borderColor  = 'var(--clay)';
        card.style.background   = 'var(--clay-light)';
        check.innerHTML         = '✓';
        check.style.background  = 'var(--clay)';
        check.style.borderColor = 'var(--clay)';
        check.style.color       = '#fff';
        qtyRow.classList.remove('d-none');
        if (input) input.disabled = false;
    }

    updateServicesTotal();
}

function updateServiceTotal(svcId, unitPrice) {
    const qty     = parseInt(document.getElementById('svcQtyInput-' + svcId).value) || 1;
    const total   = qty * unitPrice;
    const totalEl = document.getElementById('svcTotal-' + svcId);
    if (totalEl) totalEl.textContent = state.currency + ' ' + total.toFixed(2);
    if (selectedServices[svcId]) {
        selectedServices[svcId] = { qty, price: unitPrice };
    }
    updateServicesTotal();
}

function updateServicesTotal() {
    let total = 0;
    Object.values(selectedServices).forEach(s => {
        total += (s.price || 0) * (s.qty || 1);
    });
    state.servicesTotal = total;
    const el = document.getElementById('servicesTotalDisplay');
    if (el) el.textContent = state.currency + ' ' + total.toFixed(2);
}

// ── Step 4: Review ─────────────────────────────────────────────────────────
function buildReview() {
    // Set hidden form fields
    document.getElementById('f_check_in').value  = state.checkIn;
    document.getElementById('f_check_out').value = state.checkOut;
    document.getElementById('f_rate_plan').value = state.ratePlanId;

    const guestSelect = document.getElementById('guestSelect');
    const guestName   = guestSelect.options[guestSelect.selectedIndex]?.text ?? '—';

    let roomsTotal = 0;
    let reviewHtml = `
        <div style="font-size:.78rem;margin-bottom:12px;">
            <div style="display:flex;gap:6px;margin-bottom:4px;">
                <i class="bi bi-calendar3" style="color:var(--clay);width:16px;"></i>
                <span>${state.checkIn} → ${state.checkOut}
                    <strong>(${state.nights} night${state.nights > 1 ? 's' : ''})</strong>
                </span>
            </div>
            <div style="display:flex;gap:6px;">
                <i class="bi bi-person" style="color:var(--clay);width:16px;"></i>
                <span>${guestName}</span>
            </div>
        </div>
        <div style="font-size:.78rem;font-weight:700;text-transform:uppercase;
                    letter-spacing:.08em;color:var(--muted);margin-bottom:6px;">
            Rooms
        </div>`;

    state.selectedRooms.forEach(r => {
        roomsTotal += r.total;
        reviewHtml += `<div style="display:flex;justify-content:space-between;
                                    padding:6px 0;border-bottom:1px solid var(--border);
                                    font-size:.82rem;">
            <span>${r.number} — ${r.categoryName}</span>
            <span>${state.currency} ${r.total.toFixed(2)}</span>
        </div>`;
    });

    if (Object.keys(selectedServices).length > 0) {
        reviewHtml += `<div style="font-size:.78rem;font-weight:700;text-transform:uppercase;
                                    letter-spacing:.08em;color:var(--muted);
                                    margin:12px 0 6px;">Services</div>`;

        document.querySelectorAll('.service-card').forEach(card => {
            const svcId = card.id.replace('svcCard-', '');
            if (selectedServices[svcId]) {
                const name  = card.querySelector('.fw-semibold').textContent.trim();
                const s     = selectedServices[svcId];
                const total = s.price * s.qty;
                reviewHtml += `<div style="display:flex;justify-content:space-between;
                                            padding:6px 0;border-bottom:1px solid var(--border);
                                            font-size:.82rem;">
                    <span>${name} × ${s.qty}</span>
                    <span>${state.currency} ${total.toFixed(2)}</span>
                </div>`;
            }
        });
    }

    document.getElementById('reviewBody').innerHTML = reviewHtml;

    const grandTotal = roomsTotal + state.servicesTotal;

    document.getElementById('reviewTotals').innerHTML = `
        <div style="display:flex;justify-content:space-between;
                    padding:7px 0;font-size:.82rem;
                    border-bottom:1px solid var(--border);">
            <span style="color:var(--muted);">Rooms</span>
            <span>${state.currency} ${roomsTotal.toFixed(2)}</span>
        </div>
        ${state.servicesTotal > 0 ? `
        <div style="display:flex;justify-content:space-between;
                    padding:7px 0;font-size:.82rem;
                    border-bottom:1px solid var(--border);">
            <span style="color:var(--muted);">Services</span>
            <span>${state.currency} ${state.servicesTotal.toFixed(2)}</span>
        </div>` : ''}
        <div style="display:flex;justify-content:space-between;
                    padding:12px 0;font-size:1rem;font-weight:700;
                    border-top:2px solid var(--text);margin-top:4px;">
            <span>Total</span>
            <span style="color:var(--clay);">${state.currency} ${grandTotal.toFixed(2)}</span>
        </div>`;
}

// ── Quick Guest Modal ──────────────────────────────────────────────────────
function openGuestModal() {
    ['qg_first_name','qg_last_name','qg_email','qg_phone','qg_id_number','qg_nationality']
        .forEach(id => document.getElementById(id).value = '');
    document.getElementById('qgError').classList.add('d-none');
    new bootstrap.Modal(document.getElementById('quickGuestModal')).show();
}

async function saveQuickGuest() {
    const btn  = event.target;
    const errEl= document.getElementById('qgError');

    btn.disabled    = true;
    btn.textContent = 'Saving...';

    const res = await fetch('{{ tenant_route('reservations.quick-guest') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({
            first_name : document.getElementById('qg_first_name').value,
            last_name  : document.getElementById('qg_last_name').value,
            email      : document.getElementById('qg_email').value,
            phone      : document.getElementById('qg_phone').value,
            id_number  : document.getElementById('qg_id_number').value,
            nationality: document.getElementById('qg_nationality').value,
        }),
    });

    const data = await res.json();

    if (res.ok) {
        // Add to guest select and auto-select
        const select = document.getElementById('guestSelect');
        const option = new Option(
            data.name + (data.email ? ' — ' + data.email : ''),
            data.id,
            true, true
        );
        select.add(option);

        bootstrap.Modal.getInstance(
            document.getElementById('quickGuestModal')
        ).hide();
    } else {
        errEl.textContent = data.message || 'Could not save guest.';
        errEl.classList.remove('d-none');
    }

    btn.disabled    = false;
    btn.textContent = 'Save Guest';
}

// ── Init ───────────────────────────────────────────────────────────────────
updateProgress(1);
</script>
@endpush