<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<?= view('bookings/_wizard_steps', ['step' => 2]) ?>

<?php $nights = (int) max(1, (strtotime($checkOut) - strtotime($checkIn)) / 86400); ?>

<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <div class="fw-bold fs-5"><?= esc(date('d M Y', strtotime($checkIn))) ?> &rarr; <?= esc(date('d M Y', strtotime($checkOut))) ?></div>
        <div class="text-muted small"><?= $nights ?> night<?= $nights > 1 ? 's' : '' ?></div>
    </div>
    <a href="<?= site_url('bookings/new') ?>" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left me-1"></i>Change Dates</a>
</div>

<?php if (empty($availableRooms)): ?>
    <div class="card">
        <div class="card-body text-center py-5">
            <i class="bi bi-calendar-x fs-1 text-muted"></i>
            <p class="fw-semibold mt-3 mb-1">No rooms available for those dates</p>
            <p class="text-muted small mb-3">Every room is booked, out of service, or the wrong type for this date range.</p>
            <a href="<?= site_url('bookings/new') ?>" class="btn btn-primary btn-sm">Try Different Dates</a>
        </div>
    </div>
<?php else: ?>
    <?php if (count($availableRooms) > 9): ?>
        <input type="text" class="form-control mb-3" id="roomTableSearch" placeholder="Search by room number or type…" autocomplete="off" style="max-width: 360px;">
    <?php endif; ?>

    <form action="<?= site_url('bookings/wizard/select-room') ?>" method="post" id="selectRoomForm">
        <?= csrf_field() ?>
        <input type="hidden" name="check_in" value="<?= esc($checkIn) ?>">
        <input type="hidden" name="check_out" value="<?= esc($checkOut) ?>">
        <input type="hidden" name="room_id" id="selectedRoomId" value="">

        <div class="card mb-3">
            <div class="table-scroll">
                <table class="table table-hover mb-0 align-middle" id="roomTable">
                    <thead class="table-light">
                        <tr>
                            <th>Room</th>
                            <th>Room Type</th>
                            <th>Floor</th>
                            <th>Capacity</th>
                            <th>Rate / Night</th>
                            <th>Status</th>
                            <th class="text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($availableRooms as $room): ?>
                            <tr class="room-row" data-room-id="<?= $room->id ?>" data-search-text="<?= esc(strtolower($room->room_number . ' ' . $room->room_type_name)) ?>"
                                data-room-number="<?= esc($room->room_number) ?>" data-room-type="<?= esc($room->room_type_name) ?>"
                                data-rate="<?= esc($room->base_rate) ?>" style="cursor: pointer;">
                                <td class="fw-semibold"><?= esc($room->room_number) ?></td>
                                <td><?= esc($room->room_type_name) ?></td>
                                <td><?= esc($room->floor) ?></td>
                                <td><i class="bi bi-person text-muted me-1"></i><?= (int) $room->capacity ?></td>
                                <td class="fw-semibold"><?= format_money($room->base_rate) ?></td>
                                <td><span class="badge bg-success">Available</span></td>
                                <td class="text-end">
                                    <button type="button" class="btn btn-sm btn-outline-primary select-room-btn">Select Room</button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card shadow-sm mb-3 d-none" id="selectedRoomCard">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <div class="text-muted small text-uppercase fw-bold">Selected Room</div>
                    <div class="fs-5 fw-semibold" id="selectedRoomLabel"></div>
                </div>
                <div class="text-end">
                    <div class="text-muted small">Total (<?= $nights ?> Night<?= $nights > 1 ? 's' : '' ?>)</div>
                    <div class="fs-5 fw-bold" id="selectedRoomTotal"></div>
                </div>
            </div>
        </div>

        <div class="d-flex gap-2">
            <a href="<?= site_url('bookings/new') ?>" class="btn btn-outline-secondary">Back</a>
            <button type="submit" class="btn btn-primary" id="continueBtn" disabled>Continue to Guest Details</button>
        </div>
    </form>
<?php endif; ?>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
const nights = <?= $nights ?>;

document.querySelectorAll('.room-row').forEach(function (row) {
    function select() {
        document.getElementById('selectedRoomId').value = row.dataset.roomId;
        document.getElementById('selectedRoomLabel').textContent = 'Room ' + row.dataset.roomNumber + ' — ' + row.dataset.roomType;
        document.getElementById('selectedRoomTotal').textContent = 'GHS ' + (parseFloat(row.dataset.rate) * nights).toFixed(2);
        document.getElementById('selectedRoomCard').classList.remove('d-none');
        document.getElementById('continueBtn').disabled = false;
        document.querySelectorAll('.room-row').forEach((r) => r.classList.remove('table-active'));
        row.classList.add('table-active');
    }
    row.addEventListener('click', select);
    row.querySelector('.select-room-btn').addEventListener('click', function (e) { e.stopPropagation(); select(); });
});

const roomTableSearch = document.getElementById('roomTableSearch');
if (roomTableSearch) {
    roomTableSearch.addEventListener('input', function () {
        const term = this.value.trim().toLowerCase();
        document.querySelectorAll('#roomTable .room-row').forEach(function (row) {
            row.classList.toggle('d-none', row.dataset.searchText.indexOf(term) === -1);
        });
    });
}
</script>
<?= $this->endSection() ?>
