@php
    $roomsGrid = isset($bookableRooms) ? $bookableRooms : collect();
    $defaultCheckIn = old('check_in', $checkIn ?? '');
    $defaultCheckOut = old('check_out', $checkOut ?? '');
    $reserveUrl = route('public.booking.reserve', $hotel->slug);
@endphp

@once
    @push('head')
        <style>
            /* Rows of fixed-size cards (wrap to next row); left-aligned, no stretching */
            .pb-pub-rooms {
                display: flex;
                flex-wrap: wrap;
                gap: 1.25rem;
                justify-content: flex-start;
                padding: 0.25rem 0.15rem 0.65rem;
                max-width: 100%;
            }
            .pb-pub-card {
                flex: 0 1 280px;
                background: #fff; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 12px; overflow: hidden;
                display: flex; flex-direction: column; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
                min-width: 0;
            }
            @media (max-width: 480px) {
                .pb-pub-card { flex: 1 1 100%; }
            }
            .pb-pub-card__media { position: relative; aspect-ratio: 16/10; background: #e2e8f0; min-height: 140px; }
            .pb-pub-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; background: #e2e8f0; }
            .pb-pub-card__badge {
                position: absolute; top: 0.5rem; right: 0.5rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em;
                text-transform: uppercase; padding: 0.25rem 0.5rem; border-radius: 999px; background: rgba(220, 252, 231, 0.95); color: #166534;
            }
            .pb-pub-card__body { padding: 1rem 1.1rem 1rem; flex: 1; display: flex; flex-direction: column; gap: 0.35rem; }
            .pb-pub-card__title { font-size: 1.15rem; font-weight: 700; margin: 0; color: #0f172a; }
            .pb-pub-card__type { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; margin: 0; }
            .pb-pub-card__meta { font-size: 0.85rem; color: #64748b; margin: 0; }
            .pb-pub-card__price { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0.25rem 0 0; }
            .pb-pub-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
            .pb-pub-card__tag { font-size: 0.65rem; padding: 0.15rem 0.45rem; border-radius: 999px; background: #f1f5f9; color: #475569; }
            .pb-pub-card__actions { margin-top: auto; padding: 0.85rem 1.1rem 1.1rem; border-top: 1px solid #e2e8f0; }
            .pb-pub-card__book {
                display: block; width: 100%; text-align: center; padding: 0.65rem 1rem; border-radius: 8px; border: 0; cursor: pointer;
                font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
                background: #0f172a; color: #fff; text-decoration: none; transition: filter 0.15s;
            }
            .pb-pub-card__book:hover { filter: brightness(1.08); color: #fff; }
            .pb-pub-card__book:disabled { opacity: 0.55; cursor: not-allowed; }
            .pb-book-dlg { border: none; border-radius: 12px; padding: 0; max-width: 420px; width: calc(100% - 2rem); box-shadow: 0 24px 60px rgba(0,0,0,0.2); }
            .pb-book-dlg::backdrop { background: rgba(15, 23, 42, 0.45); }
            .pb-book-dlg__hd { padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
            .pb-book-dlg__hd h3 { margin: 0; font-size: 1.05rem; }
            .pb-book-dlg__close { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #64748b; padding: 0.25rem; }
            .pb-book-dlg__bd { padding: 1rem 1.25rem 1.25rem; max-height: min(70vh, 520px); overflow-y: auto; }
            .pb-book-dlg__lbl { display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; margin: 0.65rem 0 0.2rem; }
            .pb-book-dlg__inp { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }
            .pb-book-dlg__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
            .pb-book-dlg__err { color: #b91c1c; font-size: 0.85rem; margin-top: 0.5rem; }
            .pb-book-dlg__foot { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
            .pb-book-dlg__btn { flex: 1; min-width: 7rem; padding: 0.6rem 1rem; border-radius: 8px; font-weight: 600; cursor: pointer; border: 0; }
            .pb-book-dlg__btn--muted { background: #e2e8f0; color: #334155; }
            .pb-book-dlg__btn--go { background: #0f172a; color: #fff; }
            .pb-pub-rooms--types { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: flex-start; }
            .pb-pub-rooms--types .pb-rm-card { flex: 0 1 280px; min-width: 0; }
            @media (max-width: 480px) {
                .pb-pub-rooms--types .pb-rm-card { flex: 1 1 100%; }
            }
        </style>
    @endpush
@endonce

@if ($roomsGrid->isEmpty())
    @if(isset($roomTypes) && $roomTypes->count())
        <div class="pb-pub-rooms pb-pub-rooms--types" style="width:100%;">
        @foreach($roomTypes as $rt)
            @php
                $avail = (int) ($rt->public_available_count ?? 0);
                $total = (int) ($rt->public_total_rooms ?? 0);
            @endphp
            <article class="pb-rm-card">
                <h3 class="pb-rm-title">{{ $rt->name }}</h3>
                <p class="pb-rm-meta">
                    @if($avail > 0)
                        {{ $avail }} available
                    @elseif($total > 0)
                        All {{ $total }} {{ $total === 1 ? 'room' : 'rooms' }} booked right now — check dates or call us
                    @else
                        0 listed
                    @endif
                    · up to {{ $rt->max_capacity ?? $rt->default_capacity }} guests
                </p>
                @if($rt->description)
                    <p class="pb-rm-desc">{{ \Illuminate\Support\Str::limit(strip_tags($rt->description), 160) }}</p>
                @endif
                <p class="pb-rm-price">From <strong>
                    @if($rt->public_min_price !== null)
                        {{ number_format((float) $rt->public_min_price, 0) }} UGX
                    @else
                        on request
                    @endif
                </strong> / night</p>
            </article>
        @endforeach
        </div>
    @endif
@else
    <div class="pb-pub-rooms" style="width:100%;">
        @foreach ($roomsGrid as $room)
            @php
                $typeName = $room->roomType->name ?? 'Room';
                $cap = (int) ($room->capacity ?? $room->roomType->max_capacity ?? $room->roomType->default_capacity ?? 2);
                $price = (float) ($room->price_per_night ?? 0);
                $amenities = is_array($room->amenities) ? array_slice($room->amenities, 0, 4) : [];
            @endphp
            <article class="pb-pub-card">
                <div class="pb-pub-card__media">
                    <img src="{{ $room->main_image }}" alt="{{ e($room->room_name ?: 'Room ' . $room->room_number) }}" loading="lazy" decoding="async">
                    <span class="pb-pub-card__badge">Available</span>
                </div>
                <div class="pb-pub-card__body">
                    <h3 class="pb-pub-card__title">{{ $room->room_name ?: 'Room ' . $room->room_number }}</h3>
                    <p class="pb-pub-card__type">{{ e($typeName) }}</p>
                    <p class="pb-pub-card__meta">
                        <span>{{ $cap }} guests max</span>
                        @if(filled($room->floor))
                            <span> · Floor {{ e($room->floor) }}</span>
                        @endif
                    </p>
                    <p class="pb-pub-card__price">{{ number_format($price, 0) }} UGX <span style="font-weight:500;color:#64748b;font-size:0.85rem;">/ night</span></p>
                    @if(count($amenities))
                        <div class="pb-pub-card__tags">
                            @foreach ($amenities as $tag)
                                <span class="pb-pub-card__tag">{{ e(is_string($tag) ? $tag : json_encode($tag)) }}</span>
                            @endforeach
                        </div>
                    @endif
                </div>
                <div class="pb-pub-card__actions">
                    <button type="button" class="pb-pub-card__book js-pb-open-book"
                        data-room-id="{{ $room->id }}"
                        data-room-label="{{ e($room->room_name ?: 'Room ' . $room->room_number) }}"
                        data-type-name="{{ e($typeName) }}">Book</button>
                </div>
            </article>
        @endforeach
    </div>

    <dialog class="pb-book-dlg" id="pb-book-dlg" aria-labelledby="pb-book-dlg-title">
        <form method="post" action="{{ $reserveUrl }}" id="pb-book-form">
            @csrf
            <div class="pb-book-dlg__hd">
                <h3 id="pb-book-dlg-title">Request booking</h3>
                <button type="button" class="pb-book-dlg__close" data-pb-close-dlg aria-label="Close">&times;</button>
            </div>
            <div class="pb-book-dlg__bd">
                <p id="pb-book-room-summary" style="margin:0 0 0.5rem;font-size:0.9rem;color:#475569;"></p>
                <input type="hidden" name="room_id" id="pb-book-room-id" value="">
                <label class="pb-book-dlg__lbl" for="pb-book-check-in">Check-in</label>
                <input class="pb-book-dlg__inp" type="date" name="check_in" id="pb-book-check-in" value="{{ e($defaultCheckIn) }}" required>
                <label class="pb-book-dlg__lbl" for="pb-book-check-out">Check-out</label>
                <input class="pb-book-dlg__inp" type="date" name="check_out" id="pb-book-check-out" value="{{ e($defaultCheckOut) }}" required>
                <div class="pb-book-dlg__row">
                    <div>
                        <label class="pb-book-dlg__lbl" for="pb-book-adults">Adults</label>
                        <input class="pb-book-dlg__inp" type="number" name="adults" id="pb-book-adults" min="1" max="20" value="{{ old('adults', isset($guests) ? (int) $guests : 2) }}" required>
                    </div>
                    <div>
                        <label class="pb-book-dlg__lbl" for="pb-book-children">Children</label>
                        <input class="pb-book-dlg__inp" type="number" name="children" id="pb-book-children" min="0" max="20" value="{{ old('children', 0) }}">
                    </div>
                </div>
                <label class="pb-book-dlg__lbl" for="pb-book-fn">First name</label>
                <input class="pb-book-dlg__inp" type="text" name="first_name" id="pb-book-fn" value="{{ old('first_name') }}" required autocomplete="given-name">
                <label class="pb-book-dlg__lbl" for="pb-book-ln">Last name</label>
                <input class="pb-book-dlg__inp" type="text" name="last_name" id="pb-book-ln" value="{{ old('last_name') }}" required autocomplete="family-name">
                <label class="pb-book-dlg__lbl" for="pb-book-email">Email</label>
                <input class="pb-book-dlg__inp" type="email" name="email" id="pb-book-email" value="{{ old('email') }}" required autocomplete="email">
                <label class="pb-book-dlg__lbl" for="pb-book-phone">Phone</label>
                <input class="pb-book-dlg__inp" type="tel" name="phone" id="pb-book-phone" value="{{ old('phone') }}" autocomplete="tel">
                <label class="pb-book-dlg__lbl" for="pb-book-notes">Special requests (optional)</label>
                <textarea class="pb-book-dlg__inp" name="special_requests" id="pb-book-notes" rows="3">{{ old('special_requests') }}</textarea>
                <p class="pb-book-dlg__err" id="pb-book-form-err" hidden></p>
                <div class="pb-book-dlg__foot">
                    <button type="button" class="pb-book-dlg__btn pb-book-dlg__btn--muted" data-pb-close-dlg>Cancel</button>
                    <button type="submit" class="pb-book-dlg__btn pb-book-dlg__btn--go" id="pb-book-submit">Submit request</button>
                </div>
                <p style="margin:0.75rem 0 0;font-size:0.75rem;color:#64748b;">Your request is sent to the hotel as <strong>pending</strong>. You will receive a confirmation email; the front desk must confirm before your stay is final.</p>
            </div>
        </form>
    </dialog>

    @push('scripts')
    <script>
    (function () {
        var dlg = document.getElementById('pb-book-dlg');
        if (!dlg || !window.fetch) return;
        var form = document.getElementById('pb-book-form');
        var errEl = document.getElementById('pb-book-form-err');
        var summary = document.getElementById('pb-book-room-summary');
        var roomIdInput = document.getElementById('pb-book-room-id');
        var token = document.querySelector('meta[name="csrf-token"]');
        token = token ? token.getAttribute('content') : '';

        function openDlg(roomId, label, typeName) {
            roomIdInput.value = roomId;
            summary.textContent = label + (typeName ? ' · ' + typeName : '');
            errEl.hidden = true;
            errEl.textContent = '';
            dlg.showModal();
        }

        document.querySelectorAll('.js-pb-open-book').forEach(function (btn) {
            btn.addEventListener('click', function () {
                openDlg(btn.getAttribute('data-room-id'), btn.getAttribute('data-room-label'), btn.getAttribute('data-type-name'));
            });
        });

        dlg.querySelectorAll('[data-pb-close-dlg]').forEach(function (btn) {
            btn.addEventListener('click', function () { dlg.close(); });
        });

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            errEl.hidden = true;
            errEl.textContent = '';
            var submitBtn = document.getElementById('pb-book-submit');
            submitBtn.disabled = true;
            var fd = new FormData(form);
            fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': token,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: fd
            }).then(function (res) {
                return res.json().then(function (data) {
                    return { ok: res.ok, status: res.status, data: data };
                });
            }).then(function (r) {
                if (r.ok && r.data && r.data.success) {
                    dlg.close();
                    window.location.href = '{{ url('/book/' . $hotel->slug) }}';
                    return;
                }
                var msg = (r.data && r.data.message) ? r.data.message : 'Something went wrong.';
                if (r.data && r.data.errors) {
                    var first = Object.keys(r.data.errors)[0];
                    if (first && r.data.errors[first] && r.data.errors[first][0]) {
                        msg = r.data.errors[first][0];
                    }
                }
                errEl.textContent = msg;
                errEl.hidden = false;
            }).catch(function () {
                errEl.textContent = 'Network error. Please try again.';
                errEl.hidden = false;
            }).finally(function () {
                submitBtn.disabled = false;
            });
        });
    })();
    </script>
    @endpush
@endif