<?= $this->extend('layouts/main') ?>
<?= $this->section('styles') ?>
.cal-table { border-collapse: separate; border-spacing: 0; }
.cal-table th, .cal-table td { white-space: nowrap; border: 1px solid #eef0f3; }
.cal-room-col { position: sticky; left: 0; background: #fff; z-index: 2; min-width: 120px; }
.cal-cell-empty { background: #fff; }
.cal-cell-booking { padding: 4px !important; }
.cal-today { background-color: color-mix(in srgb, var(--brand) 6%, white) !important; }
.cal-bar { border-radius: 7px; padding: 0.35rem 0.5rem; font-size: 0.78rem; font-weight: 600; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-type-header td { background: #f9fafb; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; padding: 0.4rem 0.6rem !important; }
<?= $this->endSection() ?>
<?= $this->section('content') ?>

<?php
$statusColors = [
    'pending_deposit' => ['bg' => '#fff3cd', 'text' => '#92700a'],
    'confirmed'        => ['bg' => '#cfe2ff', 'text' => '#0a4b9f'],
    'checked_in'       => ['bg' => '#d1e7dd', 'text' => '#146c43'],
    'checked_out'      => ['bg' => '#e2e3e5', 'text' => '#41464b'],
];
?>

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div class="d-flex align-items-center gap-2">
        <a href="<?= site_url('bookings/calendar?start=' . date('Y-m-d', strtotime($start . ' -7 days')) . ($roomTypeId ? '&room_type_id=' . $roomTypeId : '')) ?>" class="btn btn-outline-secondary btn-sm"><i class="bi bi-chevron-left"></i></a>
        <span class="fw-semibold"><?= esc(date('j M', strtotime($start))) ?> &ndash; <?= esc(date('j M Y', strtotime($start . ' +6 days'))) ?></span>
        <a href="<?= site_url('bookings/calendar?start=' . date('Y-m-d', strtotime($start . ' +7 days')) . ($roomTypeId ? '&room_type_id=' . $roomTypeId : '')) ?>" class="btn btn-outline-secondary btn-sm"><i class="bi bi-chevron-right"></i></a>
        <a href="<?= site_url('bookings/calendar') ?>" class="btn btn-outline-secondary btn-sm">Today</a>
    </div>
    <div class="d-flex align-items-center gap-2">
        <form action="<?= site_url('bookings/calendar') ?>" method="get" class="d-flex align-items-center gap-2">
            <input type="hidden" name="start" value="<?= esc($start) ?>">
            <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 $type): ?>
                    <option value="<?= $type->id ?>" <?= (string) $roomTypeId === (string) $type->id ? 'selected' : '' ?>><?= esc($type->name) ?></option>
                <?php endforeach; ?>
            </select>
        </form>
        <a href="<?= site_url('bookings/new') ?>" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>New Reservation</a>
    </div>
</div>

<div class="card">
    <div class="table-scroll">
        <table class="table cal-table mb-0">
            <thead>
                <tr>
                    <th class="cal-room-col">Room</th>
                    <?php foreach ($dateColumns as $date): ?>
                        <th class="text-center <?= $date === date('Y-m-d') ? 'cal-today' : '' ?>" style="min-width: 110px;">
                            <?= date('D', strtotime($date)) ?> <?= date('j M', strtotime($date)) ?>
                        </th>
                    <?php endforeach; ?>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($roomsByType)): ?>
                    <tr><td colspan="<?= count($dateColumns) + 1 ?>" class="text-center text-muted py-5">No rooms match this filter.</td></tr>
                <?php endif; ?>
                <?php foreach ($roomsByType as $typeName => $typeRooms): ?>
                    <tr class="cal-type-header">
                        <td colspan="<?= count($dateColumns) + 1 ?>"><?= esc($typeName) ?></td>
                    </tr>
                    <?php foreach ($typeRooms as $room): ?>
                        <tr>
                            <td class="cal-room-col fw-semibold"><?= esc($room->room_number) ?></td>
                            <?php foreach ($roomSegments[$room->id] as $segment): ?>
                                <?php if ($segment['type'] === 'empty'): ?>
                                    <td colspan="<?= $segment['colspan'] ?>" class="cal-cell-empty"></td>
                                <?php else: ?>
                                    <?php
                                    $booking = $segment['booking'];
                                    $colors  = $statusColors[$booking->status] ?? ['bg' => '#e2e3e5', 'text' => '#41464b'];
                                    ?>
                                    <td colspan="<?= $segment['colspan'] ?>" class="cal-cell-booking">
                                        <a href="<?= site_url('bookings/' . $booking->id) ?>" class="cal-bar" style="background: <?= $colors['bg'] ?>; color: <?= $colors['text'] ?>;" title="<?= esc($booking->guest_name . ' — ' . $booking->check_in_date . ' to ' . $booking->check_out_date) ?>">
                                            <?= esc($booking->guest_name) ?>
                                        </a>
                                    </td>
                                <?php endif; ?>
                            <?php endforeach; ?>
                        </tr>
                    <?php endforeach; ?>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <div class="card-footer bg-white d-flex flex-wrap gap-3">
        <?php foreach (['pending_deposit', 'confirmed', 'checked_in', 'checked_out'] as $key):
            $colors = $statusColors[$key]; ?>
            <span class="d-flex align-items-center gap-2 small">
                <span style="width: 12px; height: 12px; border-radius: 3px; background: <?= $colors['bg'] ?>; display: inline-block;"></span>
                <?= esc($lookups->bookingStatuses[$key]['label'] ?? $key) ?>
            </span>
        <?php endforeach; ?>
    </div>
</div>

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