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

<div class="d-flex justify-content-end mb-3">
    <a href="<?= site_url('rooms/new') ?>" class="btn btn-primary"><i class="bi bi-plus-lg me-1"></i>Add New Room</a>
</div>

<div class="row g-3 mb-3">
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body d-flex align-items-center gap-3">
            <div class="stat-icon-sm" style="background: color-mix(in srgb, var(--brand) 15%, white); color: var(--brand);"><i class="bi bi-house-door"></i></div>
            <div>
                <div class="text-muted small">Total Rooms</div>
                <div class="fs-4 fw-bold"><?= $totalRooms ?></div>
                <div class="text-muted" style="font-size: 0.72rem;">All rooms in property</div>
            </div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body d-flex align-items-center gap-3">
            <div class="stat-icon-sm" style="background: #dcfce7; color: #16a34a;"><i class="bi bi-house-check"></i></div>
            <div>
                <div class="text-muted small">Clean</div>
                <div class="fs-4 fw-bold"><?= $statusCounts['clean'] ?? 0 ?></div>
                <div class="text-muted" style="font-size: 0.72rem;"><?= $totalRooms > 0 ? round(($statusCounts['clean'] ?? 0) / $totalRooms * 100, 1) : 0 ?>% of total rooms</div>
            </div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body d-flex align-items-center gap-3">
            <div class="stat-icon-sm" style="background: #fef3c7; color: #d97706;"><i class="bi bi-bucket"></i></div>
            <div>
                <div class="text-muted small">Dirty</div>
                <div class="fs-4 fw-bold"><?= $statusCounts['dirty'] ?? 0 ?></div>
                <div class="text-muted" style="font-size: 0.72rem;"><?= $totalRooms > 0 ? round(($statusCounts['dirty'] ?? 0) / $totalRooms * 100, 1) : 0 ?>% of total rooms</div>
            </div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body d-flex align-items-center gap-3">
            <div class="stat-icon-sm" style="background: #dbeafe; color: #2563eb;"><i class="bi bi-person-fill"></i></div>
            <div>
                <div class="text-muted small">Occupied</div>
                <div class="fs-4 fw-bold"><?= $statusCounts['occupied'] ?? 0 ?></div>
                <div class="text-muted" style="font-size: 0.72rem;"><?= $totalRooms > 0 ? round(($statusCounts['occupied'] ?? 0) / $totalRooms * 100, 1) : 0 ?>% of total rooms</div>
            </div>
        </div></div>
    </div>
</div>

<div class="card">
    <div class="card-body py-2 border-bottom">
        <form action="<?= site_url('rooms') ?>" method="get" class="row g-2 align-items-center">
            <input type="hidden" name="perPage" value="<?= esc($perPage) ?>">
            <div class="col-auto">
                <select name="floor" class="form-select form-select-sm" onchange="this.form.submit()">
                    <option value="">All Floors</option>
                    <?php foreach ($floors as $f): ?>
                        <option value="<?= esc($f) ?>" <?= (string) $filters['floor'] === (string) $f ? 'selected' : '' ?>>Floor <?= esc($f) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="collapse" data-bs-target="#moreFilters">
                    <i class="bi bi-funnel me-1"></i>Filter
                </button>
            </div>
            <div class="col-auto ms-auto">
                <div class="dropdown">
                    <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown"><i class="bi bi-three-dots-vertical"></i></button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="<?= site_url('rooms/export?' . http_build_query($filters)) ?>"><i class="bi bi-download me-2"></i>Export CSV</a></li>
                        <li><a class="dropdown-item" href="#" onclick="window.print(); return false;"><i class="bi bi-printer me-2"></i>Print</a></li>
                    </ul>
                </div>
            </div>

            <div class="collapse <?= ($filters['room_type_id'] || $filters['status']) ? 'show' : '' ?> col-12" id="moreFilters">
                <div class="row g-2 mt-1">
                    <div class="col-auto">
                        <select name="room_type_id" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">All Room Types</option>
                            <?php foreach ($roomTypes as $rt): ?>
                                <option value="<?= $rt->id ?>" <?= (string) $filters['room_type_id'] === (string) $rt->id ? 'selected' : '' ?>><?= esc($rt->name) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="col-auto">
                        <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">All Status</option>
                            <?php foreach ($lookups->roomStatuses as $key => $meta): ?>
                                <option value="<?= $key ?>" <?= $filters['status'] === $key ? 'selected' : '' ?>><?= esc($meta['label']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="table-scroll">
        <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Room No.</th>
                    <th>Type</th>
                    <th>Floor</th>
                    <th>Status</th>
                    <th>Occupancy</th>
                    <th>Last Cleaned</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($rooms)): ?>
                    <tr><td colspan="7" class="text-center text-muted py-4">No rooms match these filters.</td></tr>
                <?php endif; ?>
                <?php foreach ($rooms as $room): ?>
                    <tr>
                        <td><span class="badge bg-light text-dark border fw-semibold"><?= esc($room->room_number) ?></span></td>
                        <td><i class="bi bi-door-closed text-muted me-1"></i><?= esc($room->room_type_name) ?></td>
                        <td><?= esc($room->floor) ?></td>
                        <td>
                            <span class="badge bg-<?= esc($lookups->roomStatuses[$room->status]['badge'] ?? 'secondary') ?>">
                                <?= esc($lookups->roomStatuses[$room->status]['label'] ?? $room->status) ?>
                            </span>
                        </td>
                        <td>
                            <?php if ($room->current_guest_name): ?>
                                <div class="small"><i class="bi bi-person-fill text-primary me-1"></i><a href="<?= site_url('guests/' . $room->current_guest_id) ?>" class="text-decoration-none"><?= esc($room->current_guest_name) ?></a></div>
                            <?php else: ?>
                                <div class="small text-muted"><i class="bi bi-person me-1"></i>Vacant</div>
                            <?php endif; ?>
                        </td>
                        <td class="small">
                            <?php if ($room->last_cleaned): ?>
                                <div><i class="bi bi-calendar-check text-muted me-1"></i><?= esc(date('d M, g:i a', strtotime($room->last_cleaned->completed_at))) ?></div>
                                <div class="text-muted" style="font-size: 0.72rem;">by <?= esc($room->last_cleaned->assigned_to_name ?: 'Housekeeping') ?></div>
                            <?php else: ?>
                                <span class="text-muted">Never</span>
                            <?php endif; ?>
                        </td>
                        <td class="text-end">
                            <a href="<?= site_url('rooms/' . $room->id) ?>" class="btn btn-sm btn-outline-secondary" title="View"><i class="bi bi-eye"></i></a>
                            <a href="<?= site_url('rooms/' . $room->id . '/edit') ?>" class="btn btn-sm btn-outline-secondary" title="Edit"><i class="bi bi-pencil"></i></a>
                            <div class="dropdown d-inline-block">
                                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown"><i class="bi bi-three-dots-vertical"></i></button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <?php foreach ($lookups->roomStatuses as $key => $meta): ?>
                                        <?php if ($key !== $room->status): ?>
                                            <li>
                                                <form action="<?= site_url('rooms/' . $room->id . '/status') ?>" method="post">
                                                    <?= csrf_field() ?>
                                                    <input type="hidden" name="status" value="<?= esc($key) ?>">
                                                    <button type="submit" class="dropdown-item">Mark <?= esc($meta['label']) ?></button>
                                                </form>
                                            </li>
                                        <?php endif; ?>
                                    <?php endforeach; ?>
                                    <li><hr class="dropdown-divider"></li>
                                    <li>
                                        <form action="<?= site_url('rooms/' . $room->id . '/delete') ?>" method="post" onsubmit="return confirm('Delete this room?');">
                                            <?= csrf_field() ?>
                                            <button type="submit" class="dropdown-item text-danger">Delete</button>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <div class="card-footer bg-white d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span class="text-muted small">Showing <?= count($rooms) ?> of <?= $pager->getTotal() ?> rooms</span>
        <div class="d-flex align-items-center gap-3">
            <?= $pager->links() ?>
            <form method="get" class="d-flex align-items-center gap-1">
                <input type="hidden" name="floor" value="<?= esc($filters['floor']) ?>">
                <input type="hidden" name="room_type_id" value="<?= esc($filters['room_type_id']) ?>">
                <input type="hidden" name="status" value="<?= esc($filters['status']) ?>">
                <select name="perPage" class="form-select form-select-sm" style="width: auto;" onchange="this.form.submit()">
                    <?php foreach ([10, 25, 50] as $n): ?>
                        <option value="<?= $n ?>" <?= $perPage === $n ? 'selected' : '' ?>><?= $n ?> per page</option>
                    <?php endforeach; ?>
                </select>
            </form>
        </div>
    </div>
</div>

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

<?= $this->section('styles') ?>
.stat-icon-sm { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
<?= $this->endSection() ?>
