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

<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="d-flex justify-content-between align-items-start mb-3">
            <div>
                <h1 class="h3 mb-0">Change Room</h1>
                <p class="text-muted mb-0">Booking #<?= $booking->id ?> — <?= esc($booking->guest_name) ?></p>
            </div>
            <a href="<?= site_url('bookings/' . $booking->id) ?>" class="btn btn-outline-secondary btn-sm">Cancel</a>
        </div>

        <div class="card shadow-sm mb-3">
            <div class="card-body d-flex justify-content-between align-items-center">
                <div>
                    <div class="text-muted small text-uppercase fw-bold">Currently In</div>
                    <div class="fs-5 fw-semibold">Room <?= esc($booking->room_number) ?> <span class="text-muted fw-normal">(<?= esc($booking->room_type_name) ?>)</span></div>
                </div>
                <div class="text-end">
                    <div class="text-muted small"><?= esc($booking->check_in_date) ?> &rarr; <?= esc($booking->check_out_date) ?></div>
                    <span class="badge bg-<?= esc($lookups->bookingStatuses[$booking->status]['badge'] ?? 'secondary') ?>"><?= esc($lookups->bookingStatuses[$booking->status]['label'] ?? ucfirst($booking->status)) ?></span>
                </div>
            </div>
        </div>

        <div class="card shadow-sm">
            <div class="card-header">Available Rooms for These Dates</div>
            <div class="card-body">
                <?php if (empty($availableRooms)): ?>
                    <p class="text-muted text-center py-4 mb-0">No other room is free for these dates. Try adjusting the stay dates first.</p>
                <?php else: ?>
                    <?php if (count($availableRooms) > 8): ?>
                        <input type="text" class="form-control form-control-sm mb-2" id="roomListSearch" placeholder="Search by room number or type…" autocomplete="off">
                    <?php endif; ?>
                    <form action="<?= site_url('bookings/' . $booking->id . '/change-room') ?>" method="post">
                        <?= csrf_field() ?>
                        <div class="list-group mb-3" id="roomList" style="max-height: 360px; overflow-y: auto;">
                            <?php foreach ($availableRooms as $room): ?>
                                <label class="list-group-item d-flex justify-content-between align-items-center" data-search-text="<?= esc(strtolower($room->room_number . ' ' . $room->room_type_name . ' ' . $room->floor)) ?>">
                                    <span>
                                        <input class="form-check-input me-2" type="radio" name="room_id" value="<?= $room->id ?>" required>
                                        <strong>Room <?= esc($room->room_number) ?></strong>
                                        <span class="text-muted">— <?= esc($room->room_type_name) ?><?= $room->floor ? ', Floor ' . esc($room->floor) : '' ?></span>
                                    </span>
                                    <span class="text-muted small"><?= format_money($room->base_rate) ?>/night</span>
                                </label>
                            <?php endforeach; ?>
                            <p class="text-muted text-center small py-3 mb-0 d-none" id="roomListEmpty">No rooms match your search.</p>
                        </div>
                        <button type="submit" class="btn btn-primary"><i class="bi bi-arrow-left-right me-1"></i>Move Booking</button>
                    </form>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script>
var roomListSearch = document.getElementById('roomListSearch');
if (roomListSearch) {
    roomListSearch.addEventListener('input', function () {
        var term = this.value.trim().toLowerCase();
        var items = document.querySelectorAll('#roomList label[data-search-text]');
        var visibleCount = 0;

        items.forEach(function (item) {
            var match = item.dataset.searchText.indexOf(term) !== -1;
            item.classList.toggle('d-none', !match);
            if (match) { visibleCount++; }
        });

        document.getElementById('roomListEmpty').classList.toggle('d-none', visibleCount > 0);
    });
}
</script>
<?= $this->endSection() ?>
