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

<?php
$statusMeta = [
    'open'      => ['label' => 'Open', 'badge' => 'primary'],
    'due_today' => ['label' => 'Due Today', 'badge' => 'warning'],
    'overdue'   => ['label' => 'Overdue', 'badge' => 'danger'],
    'settled'   => ['label' => 'Settled', 'badge' => 'success'],
];
$tabs = ['all' => 'All Folios (' . $total . ')'];
foreach ($statusMeta as $key => $meta) {
    $tabs[$key] = $meta['label'] . ' (' . $counts[$key] . ')';
}
?>

<div class="row g-3 mb-3">
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body">
            <div class="text-muted small mb-1">Open Folios</div>
            <div class="fs-3 fw-bold"><?= $counts['open'] + $counts['due_today'] + $counts['overdue'] ?></div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body">
            <div class="text-muted small mb-1">Due Today</div>
            <div class="fs-3 fw-bold text-warning"><?= $counts['due_today'] ?></div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body">
            <div class="text-muted small mb-1">Overdue</div>
            <div class="fs-3 fw-bold text-danger"><?= $counts['overdue'] ?></div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body">
            <div class="text-muted small mb-1">Settled</div>
            <div class="fs-3 fw-bold text-success"><?= $counts['settled'] ?></div>
        </div></div>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header p-0">
                <ul class="nav nav-tabs border-0 px-2 pt-2">
                    <?php foreach ($tabs as $key => $label): ?>
                        <li class="nav-item">
                            <a class="nav-link <?= $tab === $key ? 'active' : '' ?>" href="<?= site_url('folios?tab=' . $key) ?>"><?= esc($label) ?></a>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
            <div class="table-responsive">
                <table class="table mb-0 align-middle">
                    <thead><tr><th>Folio #</th><th>Guest / Room</th><th>Balance</th><th>Status</th><th>Last Activity</th><th></th></tr></thead>
                    <tbody>
                    <?php if (empty($folios)): ?>
                        <tr><td colspan="6" class="text-center text-muted py-5">No folios in this view.</td></tr>
                    <?php endif; ?>
                    <?php foreach ($folios as $f): $meta = $statusMeta[$f->derived_status]; ?>
                        <tr>
                            <td class="fw-semibold">FOLIO-<?= sprintf('%04d', $f->id) ?></td>
                            <td>
                                <div class="small fw-semibold"><?= esc($f->guest_name) ?></div>
                                <?php if ($f->room_number): ?><div class="text-muted" style="font-size: 0.75rem;">Room <?= esc($f->room_number) ?></div><?php endif; ?>
                            </td>
                            <td class="fw-semibold"><?= format_money($f->balance) ?></td>
                            <td><span class="badge bg-<?= $meta['badge'] ?>"><?= esc($meta['label']) ?></span></td>
                            <td class="small text-muted"><?= esc(date('d M Y, g:i a', strtotime($f->opened_at))) ?></td>
                            <td class="text-end"><a href="<?= site_url('folios/' . $f->id) ?>" class="btn btn-sm btn-outline-secondary"><i class="bi bi-eye"></i></a></td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">Folio Overview</div>
            <div class="card-body">
                <div class="position-relative mx-auto mb-3" style="width: 150px; height: 150px;">
                    <canvas id="folioOverviewChart" width="150" height="150"></canvas>
                    <div class="position-absolute top-50 start-50 translate-middle text-center">
                        <div class="fw-bold fs-5"><?= $total ?></div>
                        <div class="text-muted" style="font-size: 0.65rem;">Total Folios</div>
                    </div>
                </div>
                <ul class="list-unstyled small mb-0">
                    <?php $colors = ['open' => '#4f46e5', 'due_today' => '#f59e0b', 'overdue' => '#ef4444', 'settled' => '#22c55e']; ?>
                    <?php foreach ($statusMeta 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:<?= $colors[$key] ?>;display:inline-block;"></span>
                                <?= esc($meta['label']) ?>
                            </span>
                            <span class="fw-semibold"><?= $counts[$key] ?> (<?= $total > 0 ? round($counts[$key] / $total * 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('folioOverviewChart'), {
    type: 'doughnut',
    data: {
        labels: ['Open', 'Due Today', 'Overdue', 'Settled'],
        datasets: [{
            data: [<?= $counts['open'] ?>, <?= $counts['due_today'] ?>, <?= $counts['overdue'] ?>, <?= $counts['settled'] ?>],
            backgroundColor: ['#4f46e5', '#f59e0b', '#ef4444', '#22c55e'],
            borderWidth: 0,
        }],
    },
    options: { cutout: '72%', plugins: { legend: { display: false } } },
});
</script>
<?= $this->endSection() ?>
