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

<div class="card">
    <div class="card-header d-flex align-items-center gap-2">
        <i class="bi bi-box-arrow-right" style="color: var(--brand);"></i> Today's Departures
    </div>
    <div class="list-group list-group-flush">
        <?php if (empty($departures)): ?>
            <div class="list-group-item text-center text-muted py-5">No departures scheduled for today.</div>
        <?php endif; ?>
        <?php foreach ($departures as $booking): ?>
            <div class="list-group-item d-flex align-items-center gap-3">
                <div class="user-avatar" style="width:36px;height:36px;font-size:0.8rem;"><?= esc(strtoupper(mb_substr($booking->guest_name, 0, 1))) ?></div>
                <div class="flex-grow-1">
                    <div class="fw-semibold small"><?= esc($booking->guest_name) ?></div>
                    <div class="text-muted" style="font-size: 0.78rem;"><?= esc($booking->room_type_name) ?> · Room <?= esc($booking->room_number) ?> · <?= esc($booking->guest_phone) ?></div>
                </div>
                <span class="badge bg-light text-dark border">BK-<?= sprintf('%04d', $booking->id) ?></span>
                <a href="<?= site_url('checkout/' . $booking->id) ?>" class="btn btn-sm btn-primary">Check Out</a>
            </div>
        <?php endforeach; ?>
    </div>
</div>

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