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

<?php
$statusColors = [
    'occupied'       => '#4f46e5',
    'clean'          => '#22c55e',
    'dirty'          => '#f59e0b',
    'out_of_service' => '#ef4444',
];
?>

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

<div class="row g-3 mb-3">
    <div class="col-6 col-lg-2">
        <div class="card h-100"><div class="card-body">
            <div class="text-muted small mb-1">Total Rooms</div>
            <div class="fs-3 fw-bold"><?= $totalRooms ?></div>
        </div></div>
    </div>
    <?php foreach ($lookups->roomStatuses as $key => $meta): ?>
        <div class="col-6 col-lg-2">
            <div class="card h-100"><div class="card-body">
                <div class="text-muted small mb-1"><?= esc($meta['label']) ?></div>
                <div class="fs-3 fw-bold"><?= $statusCounts[$key] ?? 0 ?></div>
                <div class="text-muted small"><?= $totalRooms > 0 ? round(($statusCounts[$key] ?? 0) / $totalRooms * 100, 1) : 0 ?>%</div>
            </div></div>
        </div>
    <?php endforeach; ?>
</div>

<div class="row g-3">
    <div class="col-lg-9">
        <div class="card mb-3">
            <div class="card-body py-2">
                <form action="<?= site_url('rooms/board') ?>" method="get" class="row g-2 align-items-center">
                    <input type="hidden" name="view" value="<?= esc($view) ?>">
                    <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">
                        <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 class="col-auto ms-auto">
                        <div class="btn-group btn-group-sm" role="group">
                            <a href="<?= site_url('rooms/board?' . http_build_query(array_merge($filters, ['view' => 'grid']))) ?>" class="btn btn-outline-secondary <?= $view === 'grid' ? 'active' : '' ?>"><i class="bi bi-grid-3x3-gap"></i></a>
                            <a href="<?= site_url('rooms/board?' . http_build_query(array_merge($filters, ['view' => 'list']))) ?>" class="btn btn-outline-secondary <?= $view === 'list' ? 'active' : '' ?>"><i class="bi bi-list-ul"></i></a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <?php if (empty($rooms)): ?>
            <div class="card"><div class="card-body text-center text-muted py-5">No rooms match these filters.</div></div>
        <?php elseif ($view === 'list'): ?>
            <div class="card">
                <div class="table-responsive">
                    <table class="table mb-0 align-middle">
                        <thead><tr><th>Room</th><th>Type</th><th>Floor</th><th>Status</th><th>Guest</th><th></th></tr></thead>
                        <tbody>
                        <?php foreach ($rooms as $room): ?>
                            <tr>
                                <td class="fw-semibold"><?= esc($room->room_number) ?></td>
                                <td class="text-muted"><?= esc($room->room_type_name) ?></td>
                                <td class="text-muted">Floor <?= 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 class="small"><?= $room->current_guest_name ? esc($room->current_guest_name) : '<span class="text-muted">—</span>' ?></td>
                                <td class="text-end">
                                    <form action="<?= site_url('rooms/' . $room->id . '/status') ?>" method="post" class="d-inline-flex gap-1">
                                        <?= csrf_field() ?>
                                        <select name="status" class="form-select form-select-sm" onchange="this.form.submit()" style="width: auto;">
                                            <?php foreach ($lookups->roomStatuses as $key => $meta): ?>
                                                <option value="<?= esc($key) ?>" <?= $key === $room->status ? 'selected' : '' ?>><?= esc($meta['label']) ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </form>
                                    <a href="<?= site_url('rooms/' . $room->id) ?>" class="btn btn-sm btn-outline-secondary ms-1"><i class="bi bi-eye"></i></a>
                                    <a href="<?= site_url('rooms/' . $room->id . '/edit') ?>" class="btn btn-sm btn-outline-secondary"><i class="bi bi-pencil"></i></a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        <?php else: ?>
            <?php
            $byFloor = [];
            foreach ($rooms as $room) {
                $byFloor[$room->floor ?: 'Unassigned'][] = $room;
            }
            ?>
            <?php foreach ($byFloor as $floor => $floorRooms): ?>
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h2 class="h6 text-muted mb-0">Floor <?= esc($floor) ?></h2>
                </div>
                <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3 mb-4">
                    <?php foreach ($floorRooms as $room): ?>
                        <div class="col">
                            <div class="card h-100 status-<?= esc($room->status) ?> border-0">
                                <div class="card-body text-center py-3">
                                    <div class="fs-4 fw-bold"><a href="<?= site_url('rooms/' . $room->id) ?>" class="text-decoration-none text-reset"><?= esc($room->room_number) ?></a></div>
                                    <div class="small text-muted mb-2"><?= esc($room->room_type_name) ?></div>
                                    <div class="mb-2">
                                        <span class="badge bg-<?= esc($lookups->roomStatuses[$room->status]['badge'] ?? 'secondary') ?>">
                                            <?= esc($lookups->roomStatuses[$room->status]['label'] ?? $room->status) ?>
                                        </span>
                                    </div>
                                    <?php if ($room->current_guest_name): ?>
                                        <div class="small fw-semibold mb-2"><?= esc($room->current_guest_name) ?></div>
                                    <?php endif; ?>
                                    <form action="<?= site_url('rooms/' . $room->id . '/status') ?>" method="post" class="d-flex gap-1">
                                        <?= csrf_field() ?>
                                        <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                                            <?php foreach ($lookups->roomStatuses as $key => $meta): ?>
                                                <option value="<?= esc($key) ?>" <?= $key === $room->status ? 'selected' : '' ?>><?= esc($meta['label']) ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </form>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>

    <div class="col-lg-3">
        <div class="card">
            <div class="card-header">Room Summary</div>
            <div class="card-body">
                <div class="position-relative mx-auto mb-3" style="width: 150px; height: 150px;">
                    <canvas id="roomSummaryChart" width="150" height="150"></canvas>
                    <div class="position-absolute top-50 start-50 translate-middle text-center">
                        <div class="fw-bold fs-5"><?= $totalRooms ?></div>
                        <div class="text-muted" style="font-size: 0.65rem;">Total Rooms</div>
                    </div>
                </div>
                <ul class="list-unstyled small mb-0">
                    <?php foreach ($lookups->roomStatuses as $key => $meta): ?>
                        <li class="d-flex align-items-center justify-content-between mb-2">
                            <span class="d-flex align-items-center gap-2">
                                <span style="width:9px;height:9px;border-radius:50%;background:<?= $statusColors[$key] ?>;display:inline-block;"></span>
                                <?= esc($meta['label']) ?>
                            </span>
                            <span class="fw-semibold"><?= $totalRooms > 0 ? round(($statusCounts[$key] ?? 0) / $totalRooms * 100) : 0 ?>%</span>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </div>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('roomSummaryChart'), {
    type: 'doughnut',
    data: {
        labels: [<?= implode(',', array_map(static fn ($m) => json_encode($m['label']), $lookups->roomStatuses)) ?>],
        datasets: [{
            data: [<?= implode(',', array_map(static fn ($k) => (int) ($statusCounts[$k] ?? 0), array_keys($lookups->roomStatuses))) ?>],
            backgroundColor: [<?= implode(',', array_map(static fn ($c) => json_encode($c), $statusColors)) ?>],
            borderWidth: 0,
        }],
    },
    options: { cutout: '72%', plugins: { legend: { display: false } } },
});
</script>
<?= $this->endSection() ?>
