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

<div class="card d-flex flex-column" style="height:calc(100vh - 160px)">

    <!-- Header -->
    <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2 flex-shrink-0">
        <div class="d-flex align-items-center gap-2">
            <i class="bi bi-envelope text-primary"></i>
            <span class="fw-semibold">Riwayat Surat Resmi</span>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="/letter/keterangan-aktif" class="btn btn-primary btn-sm">
                <i class="bi bi-file-earmark-text me-1"></i>Ket. Aktif
            </a>
            <a href="/letter/mutasi" class="btn btn-success btn-sm">
                <i class="bi bi-arrow-right-circle me-1"></i>Mutasi
            </a>
            <a href="/letter/surat-tugas" class="btn btn-info btn-sm text-white">
                <i class="bi bi-briefcase me-1"></i>Surat Tugas
            </a>
            <a href="/letter/sppd" class="btn btn-warning btn-sm">
                <i class="bi bi-geo-alt me-1"></i>SPPD
            </a>
        </div>
    </div>

    <!-- Filter Bar -->
    <div class="px-3 pt-3 pb-2 border-bottom flex-shrink-0">
        <div class="row g-2 align-items-end">
            <div class="col-sm-3">
                <label class="form-label small text-muted mb-1">Jenis Surat</label>
                <select id="filterType" class="form-select form-select-sm" onchange="filterLogs()">
                    <option value="">-- Semua Jenis --</option>
                    <option value="keterangan_aktif"  <?= $type === 'keterangan_aktif'  ? 'selected' : '' ?>>Keterangan Aktif</option>
                    <option value="mutasi_keluar"      <?= $type === 'mutasi_keluar'      ? 'selected' : '' ?>>Mutasi Keluar</option>
                    <option value="surat_tugas"        <?= $type === 'surat_tugas'        ? 'selected' : '' ?>>Surat Tugas</option>
                    <option value="sppd"               <?= $type === 'sppd'               ? 'selected' : '' ?>>SPPD</option>
                </select>
            </div>
            <div class="col-sm-3">
                <span class="text-muted small" id="infoCount">Total: <?= count($logs) ?> surat</span>
            </div>
        </div>
    </div>

    <!-- Tabel (scrollable) -->
    <div class="flex-grow-1 overflow-auto" style="min-height:0">
        <table class="table table-hover table-sm mb-0">
            <thead class="table-light sticky-top">
                <tr>
                    <th style="width:50px">No</th>
                    <th>Jenis Surat</th>
                    <th>Nomor Surat</th>
                    <th>Nama</th>
                    <th>NIS / NIP</th>
                    <th>Tanggal</th>
                    <th>Dicetak Oleh</th>
                    <th style="width:120px">Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($logs)): ?>
                <tr>
                    <td colspan="8" class="text-center text-muted py-5">
                        <i class="bi bi-inbox fs-2 d-block mb-2 opacity-25"></i>
                        <small>Belum ada riwayat surat</small>
                    </td>
                </tr>
                <?php else: ?>
                <?php foreach ($logs as $index => $log): ?>
                <tr>
                    <td><?= $index + 1 ?></td>
                    <td>
                        <?php if ($log['letter_type'] === 'keterangan_aktif'): ?>
                            <span class="badge bg-primary">Ket. Aktif</span>
                        <?php elseif ($log['letter_type'] === 'mutasi_keluar'): ?>
                            <span class="badge bg-warning text-dark">Mutasi Keluar</span>
                        <?php elseif ($log['letter_type'] === 'surat_tugas'): ?>
                            <span class="badge bg-info text-white">Surat Tugas</span>
                        <?php else: ?>
                            <span class="badge bg-secondary">SPPD</span>
                        <?php endif; ?>
                    </td>
                    <td><?= esc($log['letter_number']) ?></td>
                    <td>
                        <?php if (in_array($log['letter_type'], ['surat_tugas', 'sppd'])): ?>
                            <?= esc($log['officer_name'] ?? '—') ?>
                        <?php else: ?>
                            <?= esc($log['student_name'] ?? '—') ?>
                        <?php endif; ?>
                    </td>
                    <td>
                        <?php if (in_array($log['letter_type'], ['surat_tugas', 'sppd'])): ?>
                            <span class="text-muted small"><?= esc($log['officer_nip'] ?? '—') ?></span>
                        <?php else: ?>
                            <?= esc($log['student_nis'] ?? '—') ?>
                        <?php endif; ?>
                    </td>
                    <td><?= date('d/m/Y', strtotime($log['letter_date'])) ?></td>
                    <td><?= esc($log['printed_by_username'] ?? '-') ?></td>
                    <td>
                        <div class="btn-group btn-group-sm">
                            <?php
                            $printRoutes = [
                                'keterangan_aktif' => '/letter/keterangan-aktif/print/',
                                'mutasi_keluar'    => '/letter/mutasi/print/',
                                'surat_tugas'      => '/letter/surat-tugas/print/',
                                'sppd'             => '/letter/sppd/print/',
                            ];
                            $route = ($printRoutes[$log['letter_type']] ?? '/letter/') . $log['id'];
                            ?>
                            <a href="<?= $route ?>" class="btn btn-outline-primary" title="Cetak Ulang" target="_blank">
                                <i class="bi bi-printer"></i>
                            </a>
                            <a href="/letter/delete/<?= $log['id'] ?>"
                               class="btn btn-outline-danger" title="Hapus"
                               onclick="return confirm('Yakin ingin menghapus riwayat surat ini?')">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<script>
function filterLogs() {
    const type = document.getElementById('filterType').value;
    window.location.href = '/letter?type=' + type;
}
</script>

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