<?= $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" />

<div class="mb-4 d-flex justify-content-between align-items-center">
    <div>
        <h5 class="fw-bold mt-2">Data Cuti Pegawai</h5>
        <p class="small text-muted">Kelola administrasi cuti dan dokumen surat izin pegawai</p>
    </div>
    <button class="btn btn-primary rounded-pill px-4 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambah">
        <i class="fas fa-plus me-1"></i> Input Cuti Pegawai
    </button>
</div>

<?php if (session()->getFlashdata('success')) : ?>
    <div class="alert alert-success border-0 shadow-sm small mb-4">
        <i class="fas fa-check-circle me-1"></i> <?= session()->getFlashdata('success'); ?>
    </div>
<?php endif; ?>

<div class="card border-0 shadow-sm">
    <div class="table-responsive">
        <table class="table align-middle mb-0">
            <thead class="bg-light small text-uppercase">
                <tr>
                    <th class="ps-4" width="250">Pegawai</th>
                    <th>Jenis Cuti</th>
                    <th class="text-center">Durasi</th>
                    <th>Tanggal</th>
                    <th class="text-center">Berkas</th>
                    <th class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($list_cuti)) : ?>
                    <tr>
                        <td colspan="6" class="text-center py-5 text-muted small">
                            <i class="fas fa-folder-open d-block mb-2 fa-2x"></i>
                            Belum ada data cuti yang tercatat
                        </td>
                    </tr>
                <?php endif; ?>

                <?php foreach ($list_cuti as $c) : ?>
                    <tr>
                        <td class="ps-4">
                            <div class="fw-bold text-dark"><?= $c->nama_lengkap ?></div>
                            <div class="small text-muted"><?= $c->nip ?></div>
                        </td>
                        <td>
                            <span class="small fw-bold text-primary"><?= $c->nama_cuti ?></span>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-light text-dark border px-3 rounded-pill fw-normal">
                                <?= $c->jumlah_hari ?> Hari
                            </span>
                        </td>
                        <td class="small">
                            <div class="text-dark"><?= date('d/m/Y', strtotime($c->tgl_mulai)) ?></div>
                            <div class="text-muted" style="font-size: 11px;">s/d <?= date('d/m/Y', strtotime($c->tgl_selesai)) ?></div>
                        </td>
                        <td class="text-center">
                            <?php if ($c->berkas) : ?>
                                <a href="<?= base_url('uploads/cuti/' . $c->berkas) ?>" target="_blank" class="btn btn-outline-info btn-xs rounded-pill px-3 shadow-sm" style="font-size: 11px;">
                                    <i class="fas fa-file-alt me-1"></i> Lihat Surat
                                </a>
                            <?php else : ?>
                                <span class="text-muted small" style="font-size: 11px;">Tidak ada berkas</span>
                            <?php endif; ?>
                        </td>
                        <td class="text-center">
                            <a href="<?= base_url('cuti/hapus/' . $c->id_pengajuan) ?>" class="btn btn-light btn-sm rounded-circle text-danger shadow-sm" onclick="return confirm('Hapus data cuti ini?')">
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="modalTambah" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0">
                <h6 class="modal-title fw-bold"><i class="fas fa-edit me-2 text-primary"></i>Input Cuti Pegawai</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="<?= base_url('cuti/simpan') ?>" method="POST" enctype="multipart/form-data">
                <?= csrf_field() ?>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="small fw-bold">Pegawai</label>
                        <select name="pegawai_id" id="selectPegawai" class="form-select rounded-3 shadow-none border-light-subtle" required>
                            <option value="">-- Pilih Pegawai --</option>
                            <?php foreach ($pegawai as $p) : ?>
                                <option value="<?= $p->id_pegawai ?>"><?= $p->nip ?> - <?= $p->nama_lengkap ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="small fw-bold">Jenis Cuti</label>
                        <select name="cuti_id" class="form-select rounded-3 shadow-none border-light-subtle" required>
                            <?php foreach ($jenis_cuti as $jc) : ?>
                                <option value="<?= $jc->id_cuti ?>"><?= $jc->nama_cuti ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="small fw-bold">Tanggal Mulai</label>
                            <input type="date" name="tgl_mulai" class="form-control shadow-none border-light-subtle" required>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="small fw-bold">Tanggal Selesai</label>
                            <input type="date" name="tgl_selesai" class="form-control shadow-none border-light-subtle" required>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="small fw-bold">Lama Cuti (Hari)</label>
                            <input type="number" name="jumlah_hari" class="form-control shadow-none border-light-subtle" placeholder="Contoh: 3" required>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="small fw-bold">Upload Surat (PDF/JPG)</label>
                            <input type="file" name="berkas" class="form-control form-control-sm shadow-none border-light-subtle">
                        </div>
                    </div>

                    <div class="mb-2">
                        <label class="small fw-bold">Alasan / Keterangan</label>
                        <textarea name="alasan" class="form-control shadow-none border-light-subtle" rows="2" placeholder="Input keterangan singkat..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-5 shadow-sm">Simpan Data</button>
                </div>
            </form>
        </div>
    </div>
</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 pada dropdown Pegawai
        $('#selectPegawai').select2({
            theme: 'bootstrap-5', // Menggunakan tema Bootstrap 5 agar rapi
            dropdownParent: $('#modalTambah'), // WAJIB ADA: Agar kolom search bisa diklik di dalam Modal
            placeholder: '-- Pilih Pegawai --',
            width: '100%'
        });

        // (Opsional) Mengosongkan input/reset Select2 saat modal ditutup
        $('#modalTambah').on('hidden.bs.modal', function () {
            $(this).find('form')[0].reset();
            $('#selectPegawai').val('').trigger('change');
        });
    });
</script>
<?= $this->endSection() ?>