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

<?= $this->section('title') ?>Laporan cuti<?= $this->endSection() ?>

<?= $this->section('content') ?>
<div class="space-y-6">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
            <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Laporan cuti pegawai</h1>
            <p class="mt-1 max-w-2xl text-sm text-gray-500">Filter menurut tanggal mulai cuti. Untuk mencetak halaman ini, gunakan <kbd class="rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-[10px] font-sans">Ctrl</kbd>+<kbd class="rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-[10px] font-sans">P</kbd> di browser.</p>
        </div>
        <button type="button" onclick="window.print()" class="hidden h-10 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white px-4 text-xs font-semibold text-gray-800 shadow-sm hover:bg-gray-50 print:hidden sm:inline-flex">
            <i class="fa-solid fa-print mr-2 text-gray-500"></i> Cetak
        </button>
    </div>

    <?= view('layouts/partials/admin_alert', ['errors' => $errors ?? []]) ?>

    <form method="get" action="<?= site_url('admin/laporan/cuti') ?>" class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div class="flex flex-wrap items-end gap-3">
                <div>
                    <label class="block text-xs font-medium text-gray-600">Dari</label>
                    <input type="date" name="dari" value="<?= esc($dari) ?>" class="mt-1 rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600">Sampai</label>
                    <input type="date" name="sampai" value="<?= esc($sampai) ?>" class="mt-1 rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
                </div>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <button type="submit" class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">Tampilkan</button>
                <a href="<?= site_url('admin/laporan') ?>" class="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50">Ringkasan</a>
            </div>
        </div>
    </form>

    <section class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
        <div class="border-b border-gray-200 px-5 py-4">
            <h2 class="text-base font-semibold text-gray-900">Daftar cuti</h2>
            <p class="mt-0.5 text-xs text-gray-500"><?= count($rows) ?> baris · <?= esc($dari) ?> s/d <?= esc($sampai) ?></p>
        </div>
        <?php if ($rows === []) : ?>
            <div class="p-6">
                <?= view('layouts/partials/empty_state', [
                    'icon'  => 'fa-file-lines',
                    'title' => 'Tidak ada cuti pada rentang ini',
                    'hint'  => 'Perlebar rentang tanggal atau kembali ke ringkasan laporan.',
                ]) ?>
            </div>
        <?php else : ?>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 text-sm">
                    <thead class="bg-gray-50 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
                        <tr>
                            <th class="px-4 py-3">Tanggal</th>
                            <th class="px-4 py-3">Nama</th>
                            <th class="px-4 py-3">NIP</th>
                            <th class="px-4 py-3">Status</th>
                            <th class="px-4 py-3">Jenis / keterangan</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        <?php foreach ($rows as $r) : ?>
                            <?php
                            $st = (string) ($r['status'] ?? '');
                            $badgeClass = 'bg-gray-100 text-gray-700 ring-1 ring-gray-200';
                            if ($st === 'Approve') {
                                $badgeClass = 'bg-emerald-50 text-emerald-800 ring-1 ring-emerald-100';
                            } elseif ($st === 'Waiting') {
                                $badgeClass = 'bg-amber-50 text-amber-900 ring-1 ring-amber-100';
                            } elseif ($st === 'Rejected') {
                                $badgeClass = 'bg-red-50 text-red-800 ring-1 ring-red-100';
                            } elseif ($st === 'Cancelled') {
                                $badgeClass = 'bg-gray-100 text-gray-600 ring-1 ring-gray-200';
                            }
                            $jenis = (string) ($r['jenis_cuti'] ?? $r['jenis'] ?? $r['keterangan'] ?? '');
                            ?>
                            <tr class="transition-colors hover:bg-gray-50">
                                <td class="whitespace-nowrap px-4 py-2.5 text-gray-800"><?= esc((string) ($r['tanggal_cuti'] ?? '')) ?></td>
                                <td class="px-4 py-2.5 font-medium text-gray-900"><?= esc((string) ($r['nama_lengkap'] ?? '')) ?></td>
                                <td class="whitespace-nowrap px-4 py-2.5 font-mono text-xs text-gray-600"><?= esc((string) ($r['nip'] ?? '')) ?></td>
                                <td class="px-4 py-2.5">
                                    <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold <?= $badgeClass ?>"><?= esc($st !== '' ? $st : '—') ?></span>
                                </td>
                                <td class="max-w-xs truncate px-4 py-2.5 text-gray-600" title="<?= esc($jenis) ?>"><?= esc($jenis !== '' ? $jenis : '—') ?></td>
                            </tr>
                        <?php endforeach ?>
                    </tbody>
                </table>
            </div>
        <?php endif ?>
    </section>
</div>
<?= $this->endSection() ?>
