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

<?= $this->section('content') ?>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />

<ul class="nav nav-pills mb-3">
    <li class="nav-item">
        <a class="nav-link text-muted rounded-pill small fw-bold" href="<?= base_url('approval') ?>">Antrean Pengajuan</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active rounded-pill small fw-bold shadow-sm" href="<?= base_url('approval/riwayat') ?>">Riwayat Selesai</a>
    </li>
</ul>

<div class="mb-4 d-flex justify-content-between align-items-center">
    <div>
        <h5 class="fw-bold text-dark">Riwayat Approval Izin / Sakit</h5>
        <p class="text-muted small mb-0">Daftar pengajuan yang telah selesai diproses oleh Admin.</p>
    </div>
    <a href="<?= base_url('approval') ?>" class="btn btn-sm btn-outline-primary rounded-pill">
        <i class="fas fa-arrow-left me-1"></i> Kembali ke Antrean
    </a>
</div>

<div class="card border-0 shadow-sm mb-3" style="border-radius: 15px;">
    <div class="card-body">
        <form action="<?= base_url('approval/riwayat') ?>" method="GET" class="row g-2">
            <?php if (session()->get('level') == 'Superadmin'): ?>
            <div class="col-md-5">
                <select name="id_opd" class="form-select form-select-sm border-light bg-light select2">
                    <option value="">-- Semua OPD --</option>
                    <?php foreach($list_opd as $o): ?>
                        <option value="<?= $o['id_opd'] ?>" <?= ($selected_opd == $o['id_opd']) ? 'selected' : '' ?>><?= $o['nama_opd'] ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <?php endif; ?>
            
            <div class="<?= (session()->get('level') == 'Superadmin') ? 'col-md-5' : 'col-md-10' ?>">
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-light border-light"><i class="fas fa-search text-muted"></i></span>
                    <input type="text" name="keyword" class="form-control border-light bg-light" placeholder="Cari Nama atau NIP..." value="<?= $keyword ?? '' ?>">
                </div>
            </div>
            
            <div class="col-md-2 d-grid">
                <button type="submit" class="btn btn-sm btn-primary rounded-pill">Filter</button>
            </div>
        </form>
    </div>
</div>

<div class="card border-0 shadow-sm" style="border-radius: 15px; overflow: hidden;">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr class="text-muted small uppercase">
                        <th class="ps-4 py-3">TANGGAL PENGAJUAN</th>
                        <th>PEGAWAI</th>
                        <th>KATEGORI</th>
                        <th>HASIL APPROVAL</th>
                        <th>CATATAN ADMIN</th>
                    </tr>
                </thead>
                <tbody class="small text-dark">
                    <?php if (empty($riwayat)): ?>
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">Belum ada riwayat pengajuan yang diproses.</td>
                        </tr>
                    <?php else: ?>
                        <?php foreach($riwayat as $r): ?>
                        <tr>
                            <td class="ps-4">
                                <div class="fw-bold text-dark">
                                    <?= date('d/m/Y', strtotime($r['tanggal_mulai'])) ?> 
                                    <?= ($r['tanggal_mulai'] != $r['tanggal_selesai']) ? '<br><small class="text-muted">s/d ' . date('d/m/Y', strtotime($r['tanggal_selesai'])) . '</small>' : '' ?>
                                </div>
                            </td>
                            <td>
                                <div class="fw-bold"><?= $r['nama_lengkap'] ?></div>
                                <div class="text-muted" style="font-size: 0.7rem;">NIP. <?= $r['nip'] ?></div>
                            </td>
                            <td>
                                <span class="badge bg-info-subtle text-info border border-info border-opacity-25 px-2 mb-1"><?= $r['kategori'] ?></span>
                                <div class="text-muted" style="font-size: 0.65rem;">Sesi: <?= $r['slot_waktu'] ?? 'Penuh' ?></div>
                            </td>
                            <td>
                                <?php if($r['status_approval'] == 'Ditolak'): ?>
                                    <span class="badge bg-danger rounded-pill px-3">DITOLAK</span>
                                <?php else: ?>
                                    <span class="badge bg-success rounded-pill px-3">DISETUJUI</span>
                                <?php endif; ?>
                            </td>
                            <td>
                                <div class="text-muted" style="max-width: 250px; font-size: 0.8rem;">
                                    <?= $r['keterangan'] ?>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
    <?php if ($pager): ?>
        <div class="card-footer bg-white border-0 py-3 text-center"><?= $pager ?></div>
    <?php endif; ?>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        // Inisialisasi Select2 untuk pencarian OPD
        $('.select2').select2({
            theme: 'bootstrap-5',
            width: '100%',
            placeholder: '-- Pilih OPD --',
            allowClear: true
        });
    });
</script>

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