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

<div class="d-flex justify-content-end mb-3">
    <a href="<?= site_url('room-types/new') ?>" class="btn btn-primary">
        <i class="bi bi-plus-lg me-1"></i>Add New Room Type
    </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-door-closed"></i></div>
            <div>
                <div class="text-muted small">Total Room Types</div>
                <div class="fs-4 fw-bold"><?= $stats['totalTypes'] ?></div>
                <div class="text-muted" style="font-size: 0.72rem;">All created room types</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-door"></i></div>
            <div>
                <div class="text-muted small">Total Rooms</div>
                <div class="fs-4 fw-bold"><?= $stats['totalRooms'] ?></div>
                <div class="text-muted" style="font-size: 0.72rem;">Across all room types</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-key"></i></div>
            <div>
                <div class="text-muted small">Available Now</div>
                <div class="fs-4 fw-bold"><?= $stats['availableNow'] ?></div>
                <div class="text-muted" style="font-size: 0.72rem;">Rooms available</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-graph-up"></i></div>
            <div>
                <div class="text-muted small">Avg. Base Rate</div>
                <div class="fs-4 fw-bold">GHS <?= $stats['avgRate'] ?></div>
                <div class="text-muted" style="font-size: 0.72rem;">Per night</div>
            </div>
        </div></div>
    </div>
</div>

<div class="card">
    <div class="table-scroll">
        <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Room Type</th>
                    <th>Description</th>
                    <th>Base Rate (per night)</th>
                    <th>Capacity</th>
                    <th>Amenities</th>
                    <th class="text-center"># of Rooms</th>
                    <th>Status</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($roomTypes)): ?>
                    <tr><td colspan="8" class="text-center text-muted py-4">No room types yet.</td></tr>
                <?php endif; ?>
                <?php $roomTypeModel = new \App\Models\RoomTypeModel(); ?>
                <?php foreach ($roomTypes as $roomType):
                    $amenities = $roomTypeModel->amenitiesList($roomType);
                    $visibleAmenities = array_slice($amenities, 0, 4);
                    $overflow = count($amenities) - count($visibleAmenities);
                ?>
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <?php if ($roomType->photo_path): ?>
                                    <img src="<?= site_url('uploads/' . $roomType->photo_path) ?>" alt="<?= esc($roomType->name) ?>" style="width:56px;height:56px;object-fit:cover;border-radius:8px;">
                                <?php else: ?>
                                    <div class="d-flex align-items-center justify-content-center bg-light text-muted" style="width:56px;height:56px;border-radius:8px;"><i class="bi bi-image"></i></div>
                                <?php endif; ?>
                                <div>
                                    <div class="fw-semibold"><?= esc($roomType->name) ?></div>
                                    <span class="badge bg-light text-dark border" style="font-size: 0.65rem;"><?= esc($roomType->display_code) ?></span>
                                </div>
                            </div>
                        </td>
                        <td class="small text-muted" style="max-width: 220px;"><?= esc($roomType->description) ?></td>
                        <td class="fw-semibold"><?= format_money($roomType->base_rate) ?></td>
                        <td class="small"><i class="bi bi-person text-muted me-1"></i><?= (int) $roomType->capacity ?> Guests</td>
                        <td>
                            <div class="d-flex align-items-center gap-2 text-muted">
                                <?php foreach ($visibleAmenities as $amenity): ?>
                                    <i class="bi <?= \App\Models\RoomTypeModel::amenityIcon($amenity) ?>" title="<?= esc($amenity) ?>"></i>
                                <?php endforeach; ?>
                                <?php if ($overflow > 0): ?>
                                    <span class="badge bg-light text-dark border">+<?= $overflow ?></span>
                                <?php endif; ?>
                                <?php if (empty($amenities)): ?><span class="small">&mdash;</span><?php endif; ?>
                            </div>
                        </td>
                        <td class="text-center"><?= (int) $roomType->room_count ?></td>
                        <td>
                            <span class="badge bg-<?= $roomType->is_active ? 'success' : 'danger' ?>-subtle text-<?= $roomType->is_active ? 'success' : 'danger' ?> border border-<?= $roomType->is_active ? 'success' : 'danger' ?>-subtle">
                                <?= $roomType->is_active ? 'Active' : 'Inactive' ?>
                            </span>
                        </td>
                        <td class="text-end">
                            <a href="<?= site_url('room-types/' . $roomType->id . '/edit') ?>" class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil me-1"></i>Edit</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">
                                    <li>
                                        <form action="<?= site_url('room-types/' . $roomType->id . '/toggle-active') ?>" method="post">
                                            <?= csrf_field() ?>
                                            <button type="submit" class="dropdown-item"><?= $roomType->is_active ? 'Deactivate' : 'Activate' ?></button>
                                        </form>
                                    </li>
                                    <li>
                                        <form action="<?= site_url('room-types/' . $roomType->id . '/delete') ?>" method="post" onsubmit="return confirm('Delete this room type?');">
                                            <?= 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($roomTypes) ?> of <?= $pager->getTotal() ?> room types</span>
        <div class="d-flex align-items-center gap-3">
            <?= $pager->links() ?>
            <form method="get" class="d-flex align-items-center gap-1">
                <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() ?>
