<?= $this->extend('layout/template'); ?>
<?= $this->section('content'); ?>

<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><?= $Breadcumb ?></li>
        <li class="breadcrumb-item active" aria-current="page">Data <?= $Breadcumb ?></li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">

                <div class="col-md-2 grid-margin stretch-card">
                    <a class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#tambahModal">Tambah Data</a>

                    <!-- <a class="btn btn-success" data-bs-toggle="modal" data-bs-target="#importModal"> Import Data</a> -->
                </div>

                <h6 class="card-title">Data <?= $Breadcumb ?></h6>

                <div class="table-responsive">
                    <table id="dataTableExample" class="table table-bordered table-hover table no-wrap">
                        <thead class="table-info text-dark">
                            <tr>
                                <th style="width: 5%;">#</th>
                                <th>Nama Pegawai</th>
                                <th>Jenis Cuti</th>
                                <th>Tgl Mulai</th>
                                <th>Tgl Selesai</th>
                                <th>Keterangan</th>
                                <th>Status Supervisor</th>
                                <th>Status Manager</th>
                                <th>Status Admin</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $no = 1; ?>
                            <?php if (!empty($pengajuancuti)): ?>
                                <?php foreach ($pengajuancuti as $row): ?>
                                    <tr>
                                        <td><?= $no++ ?></td>
                                        <td><?= esc($row['nama']) ?></td>
                                        <td><?= esc($row['nama_jenis']) ?></td>
                                        <td><?= date('d-m-Y', strtotime($row['tanggal_mulai'])) ?></td>
                                        <td><?= date('d-m-Y', strtotime($row['tanggal_selesai'])) ?></td>
                                        <td><?= esc($row['keterangan']) ?></td>

                                        <!-- Status Supervisor -->
                                        <td>
                                            <span class="badge 
                            <?= $row['status_supervisor'] === 'disetujui' ? 'bg-success' : ($row['status_supervisor'] === 'ditolak' ? 'bg-danger' : 'bg-warning') ?>">
                                                <?= ucfirst($row['status_supervisor']) ?>
                                            </span>
                                        </td>

                                        <!-- Status Manager -->
                                        <td>
                                            <span class="badge 
                            <?= $row['status_manager'] === 'disetujui' ? 'bg-success' : ($row['status_manager'] === 'ditolak' ? 'bg-danger' : 'bg-warning') ?>">
                                                <?= ucfirst($row['status_manager']) ?>
                                            </span>
                                        </td>

                                        <!-- Status Admin -->
                                        <td>
                                            <span class="badge 
                            <?= $row['status_admin'] === 'dicetak' ? 'bg-success' : ($row['status_admin'] === 'diproses' ? 'bg-primary' : 'bg-secondary') ?>">
                                                <?= ucfirst($row['status_admin']) ?>
                                            </span>
                                        </td>

                                        <!-- Aksi -->
                                        <td>
                                            <button type="button" class="btn btn-info btn-sm" title="Lihat Detail" onclick="showDetail('<?= $row['id'] ?>')">
                                                <i class="icon-sm" data-feather="eye"></i>
                                            </button>

                                            <?php if ($row['status_supervisor'] === 'disetujui' && $row['status_manager'] === 'disetujui'): ?>
                                                <!-- Tampilkan tombol Cetak & Download -->
                                                <button class="btn btn-info btn-sm" title="Cetak dan Download Formulir" onclick="download('<?= $row['id'] ?>')">
                                                    <i class="icon-sm" data-feather="download"></i>
                                                </button>
                                                <!-- Download export Word -->
                                                <button class="btn btn-success btn-sm" title="Export Formulir Word" onclick="downloadWord('<?= $row['id'] ?>')">
                                                    <i class="icon-sm" data-feather="archive"></i>
                                                </button>
                                                <!-- cetak versi lama yang lebih bagus -->
                                                <!-- <button class="btn btn-success btn-sm" title="Cetak Formulir" onclick="cekDanCetak('<?= $row['id'] ?>')">
                                                    <i class="icon-sm" data-feather="printer"></i>
                                                </button> -->
                                            <?php else: ?>
                                                <!-- Tampilkan tombol Edit & Hapus jika belum disetujui -->
                                                <button type="button" class="btn btn-warning btn-sm" title="Edit Pengajuan" onclick="updateData('<?= $row['id'] ?>')">
                                                    <i class="icon-sm" data-feather="edit"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger btn-sm" title="Hapus Data" onclick="deleteData('<?= $row['id'] ?>')">
                                                    <i class="icon-sm" data-feather="trash-2"></i>
                                                </button>
                                            <?php endif; ?>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <tr>
                                    <td colspan="12" class="text-center" style="background-color: #f9f9f9; color: #888; font-style: italic; padding: 20px;">
                                        <i class="fas fa-folder-open" style="font-size: 24px; color: #ccc;"></i>
                                        <br>
                                        <span style="font-size: 16px; font-weight: bold;">Tidak ada data yang tersedia.</span>
                                        <br>
                                        <span style="font-size: 14px;">Silakan tambahkan data baru untuk mengisi tabel ini.</span>
                                    </td>
                                </tr>
                            <?php endif; ?>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Modal Tambah Data -->
<div class="modal fade" id="tambahModal" tabindex="-1" role="dialog" aria-labelledby="tambahModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tambahModalLabel">Tambah Data <?= $Breadcumb ?></h5>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="formTambahData" enctype="multipart/form-data">
                    <?php if (session()->get('role') === 'admin' && isset($user)): ?>
                        <div class="mb-3">
                            <label for="id_user">Nama User</label>
                            <select class="form-control" id="id_user" name="id_user">
                                <option value="" disabled selected>Pilih Nama User</option>
                                <?php foreach ($user as $row): ?>
                                    <option value="<?= $row['id_user'] ?>"><?= $row['nama'] ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    <?php endif; ?>

                    <?php if (session()->get('role') !== 'admin'): ?>
                        <input type="hidden" name="id_user" value="<?= session()->get('id_user') ?>">
                    <?php endif; ?>

                    <div class="mb-3">
                        <label for="id_jenis">Nama jenis</label>
                        <select class="form-control" id="id_jenis" name="id_jenis">
                            <option value="" disabled selected>Pilih Nama jenis</option>
                            <?php foreach ($jeniscuti as $row): ?>
                                <option value="<?= $row['id_jenis'] ?>"><?= $row['nama_jenis'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <!-- Tanggal Mulai Cuti -->
                    <div class="mb-3">
                        <label for="tanggal_mulai">Tanggal Mulai</label>
                        <div class="input-group flatpickr" id="flatpickr-date">
                            <input type="text" name="tanggal_mulai" class="form-control" placeholder="Pilih Tanggal Mulai" data-input required>
                            <span class="input-group-text input-group-addon" data-toggle><i data-feather="calendar"></i></span>
                        </div>
                    </div>

                    <!-- Tanggal Selesai Cuti -->
                    <div class="mb-3">
                        <label for="tanggal_selesai">Tanggal Selesai</label>
                        <div class="input-group flatpickr" id="flatpickr-date">
                            <input type="text" name="tanggal_selesai" class="form-control" placeholder="Pilih Tanggal Selesai" data-input required>
                            <span class="input-group-text input-group-addon" data-toggle><i data-feather="calendar"></i></span>
                        </div>
                    </div>

                    <!-- Keterangan -->
                    <div class="mb-3">
                        <label for="keterangan">Keterangan / Alasan Cuti</label>
                        <textarea class="form-control" name="keterangan" id="keterangan" rows="3" placeholder="Tulis alasan atau catatan pengajuan cuti..."></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="alamat_selama_menjalankan_cuti">Alamat</label>
                        <textarea class="form-control" name="alamat_selama_menjalankan_cuti" id="alamat_selama_menjalankan_cuti" rows="3" placeholder="Tulis Alamat pengajuan cuti..."></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="golongan_ruang">Golongan Ruang</label>
                        <input type="text" class="form-control" id="golongan_ruang" name="golongan_ruang" required>
                    </div>

                    <div class="mb-3">
                        <label for="masa_kerja">Masa Kerja</label>
                        <input type="text" class="form-control" id="masa_kerja" name="masa_kerja" required>
                    </div>


                    <div class="mb-3">
                        <label for="file_berkas">Upload Berkas Pendukung (opsional)</label>
                        <input type="file" class="form-control" name="file_berkas" id="file_berkas" accept=".pdf,.jpg,.jpeg,.png">
                        <small class="form-text text-muted">Format yang diperbolehkan: PDF, JPG, PNG. Max: 2MB.</small>
                        <div id="filePreview" class="mt-2"></div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Tambah</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal Edit Data -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">Edit Data <?= $Breadcumb ?></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="formEditData" enctype="multipart/form-data">
                    <input type="hidden" id="id" name="id">

                    <?php if (session()->get('role') === 'admin' && isset($user)): ?>
                        <div class="mb-3">
                            <label for="edit_id_user">Nama User</label>
                            <select class="form-control" id="edit_id_user" name="id_user">
                                <option value="" disabled selected>Pilih Nama User</option>
                                <?php foreach ($user as $row): ?>
                                    <option value="<?= $row['id_user'] ?>"><?= $row['nama'] ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    <?php endif; ?>

                    <?php if (session()->get('role') !== 'admin'): ?>
                        <input type="hidden" name="id_user" value="<?= session()->get('id_user') ?>">
                    <?php endif; ?>

                    <div class="mb-3">
                        <label for="edit_id_jenis">Nama jenis</label>
                        <select class="form-control" id="edit_id_jenis" name="id_jenis">
                            <option value="" disabled selected>Pilih Nama jenis</option>
                            <?php foreach ($jeniscuti as $row): ?>
                                <option value="<?= $row['id_jenis'] ?>"><?= $row['nama_jenis'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <!-- Tanggal Mulai Cuti -->
                    <div class="mb-3">
                        <label for="edit_tanggal_mulai">Tanggal Mulai</label>
                        <div class="input-group flatpickr" id="flatpickr-date">
                            <input type="text" id="edit_tanggal_mulai" name="tanggal_mulai" class="form-control" placeholder="Pilih Tanggal Mulai" data-input required>
                            <span class="input-group-text input-group-addon" data-toggle><i data-feather="calendar"></i></span>
                        </div>
                    </div>

                    <!-- Tanggal Selesai Cuti -->
                    <div class="mb-3">
                        <label for="edit_tanggal_selesai">Tanggal Selesai</label>
                        <div class="input-group flatpickr" id="flatpickr-date">
                            <input type="text" name="tanggal_selesai" id="edit_tanggal_selesai" class="form-control" placeholder="Pilih Tanggal Selesai" data-input required>
                            <span class="input-group-text input-group-addon" data-toggle><i data-feather="calendar"></i></span>
                        </div>
                    </div>

                    <!-- Keterangan -->
                    <div class="mb-3">
                        <label for="edit_keterangan">Keterangan / Catatan Pengajuan Cuti</label>
                        <textarea class="form-control" name="keterangan" id="edit_keterangan" rows="3" placeholder="Tulis alasan atau catatan pengajuan cuti..."></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="edit_alamat_selama_menjalankan_cuti">Alamat</label>
                        <textarea class="form-control" name="alamat_selama_menjalankan_cuti" id="edit_alamat_selama_menjalankan_cuti" rows="3" placeholder="Tulis alamat pengajuan cuti..."></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="edit_golongan_ruang">Golongan Ruang</label>
                        <input type="text" class="form-control" id="edit_golongan_ruang" name="golongan_ruang" placeholder="Tulis Golongan Ruang" required>
                    </div>

                    <div class="mb-3">
                        <label for="edit_masa_kerja">Masa Kerja</label>
                        <input type="text" class="form-control" id="edit_masa_kerja" name="masa_kerja" placeholder="Tulis Masa Kerja" required>
                    </div>

                    <div class="mb-3">
                        <label for="edit_file_berkas">Upload Berkas Pendukung (opsional)</label>
                        <input type="file" class="form-control" name="file_berkas" id="edit_file_berkas" accept=".pdf,.jpg,.jpeg,.png">
                        <small class="form-text text-muted">Format yang diperbolehkan: PDF, JPG, PNG. Max: 2MB.</small>
                        <div id="edit_FilePreview" class="mt-2"></div>
                    </div>



                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detail Pengajuan Cuti -->
<div class="modal fade" id="modalDetail" tabindex="-1" aria-labelledby="modalDetailLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="modalDetailLabel">Detail Pengajuan Cuti</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
            </div>
            <div class="modal-body">
                <table class="table table-borderless">
                    <tr>
                        <th style="width: 30%;">Nama Pegawai</th>
                        <td id="detail_nama"></td>
                    </tr>
                    <tr>
                        <th>NIP</th>
                        <td id="detail_nip"></td>
                    </tr>
                    <tr>
                        <th>Jenis Cuti</th>
                        <td id="detail_jenis"></td>
                    </tr>
                    <tr>
                        <th>Tanggal Mulai</th>
                        <td id="detail_mulai"></td>
                    </tr>
                    <tr>
                        <th>Tanggal Selesai</th>
                        <td id="detail_selesai"></td>
                    </tr>
                    <tr>
                        <th>Keterangan</th>
                        <td id="detail_keterangan"></td>
                    </tr>
                    <tr>
                        <th>Status Supervisor</th>
                        <td id="detail_status_supervisor"></td>
                    </tr>
                    <tr>
                        <th>Catatan Supervisor</th>
                        <td id="detail_catatan_supervisor"></td>
                    </tr>
                    <tr>
                        <th>Status Manager</th>
                        <td id="detail_status_manager"></td>
                    </tr>
                    <tr>
                        <th>Catatan Manager</th>
                        <td id="detail_catatan_manager"></td>
                    </tr>
                    <tr>
                        <th>Status Admin</th>
                        <td id="detail_status_admin"></td>
                    </tr>
                    <tr>
                        <th>Berkas Pendukung</th>
                        <td id="detail_file_berkas"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- untuk cetak formulir yang di acc -->
<script>
    function downloadWord(id) {
        $.ajax({
            url: "<?= base_url('formulir/cekStatus') ?>/" + id,
            type: "GET",
            dataType: "json",
            success: function(response) {
                if (response.status === 'ok') {
                    window.open("<?= base_url('formulir/downloadWord') ?>/" + id, '_blank');
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Belum Bisa Dicetak',
                        text: response.message,
                    });
                }
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: 'Terjadi kesalahan saat mengecek status.',
                });
            }
        });
    }
</script>
<!-- untuk cetak formulir yang di acc -->
<script>
    function download(id) {
        $.ajax({
            url: "<?= base_url('formulir/cekStatus') ?>/" + id,
            type: "GET",
            dataType: "json",
            success: function(response) {
                if (response.status === 'ok') {
                    window.open("<?= base_url('formulir/download') ?>/" + id, '_blank');
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Belum Bisa Dicetak',
                        text: response.message,
                    });
                }
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: 'Terjadi kesalahan saat mengecek status.',
                });
            }
        });
    }
</script>

<!-- untuk cetak formulir yang di acc -->
<script>
    function cekDanCetak(id) {
        $.ajax({
            url: "<?= base_url('formulir/cekStatus') ?>/" + id,
            type: "GET",
            dataType: "json",
            success: function(response) {
                if (response.status === 'ok') {
                    window.open("<?= base_url('formulir/cetak') ?>/" + id, '_blank');
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Belum Bisa Dicetak',
                        text: response.message,
                    });
                }
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: 'Terjadi kesalahan saat mengecek status.',
                });
            }
        });
    }
</script>

<!-- untuk showdetail cuti -->
<script>
    function showDetail(id) {
        $.ajax({
            url: "<?= base_url('PengajuanCuti/detail') ?>/" + id,
            type: "GET",
            dataType: "json",
            success: function(data) {
                $('#detail_nama').text(data.nama ?? '-');
                $('#detail_nip').text(data.nip ?? '-');
                $('#detail_jenis').text(data.nama_jenis ?? '-');
                $('#detail_mulai').text(formatTanggal(data.tanggal_mulai));
                $('#detail_selesai').text(formatTanggal(data.tanggal_selesai));
                $('#detail_keterangan').text(data.keterangan ?? '-');
                $('#detail_status_supervisor').html(formatStatus(data.status_supervisor));
                $('#detail_catatan_supervisor').text(data.catatan_supervisor ? data.catatan_supervisor : 'Tidak ada catatan');
                $('#detail_status_manager').html(formatStatus(data.status_manager));
                $('#detail_catatan_manager').text(data.catatan_manager ? data.catatan_manager : 'Tidak ada catatan');
                $('#detail_status_admin').html(formatStatus(data.status_admin));

                // Tampilkan file berkas jika ada
                if (data.file_berkas) {
                    const ext = data.file_berkas.split('.').pop().toLowerCase();
                    const fileURL = "<?= base_url('uploads/berkas_cuti') ?>/" + data.file_berkas;

                    let filePreview = '';
                    if (['jpg', 'jpeg', 'png'].includes(ext)) {
                        filePreview = `
        <div class="text-center">
            <a href="${fileURL}" target="_blank" title="Klik untuk lihat di tab baru">
                <img src="${fileURL}" class="img-thumbnail" width="200">
            </a>
        </div>
    `;
                    } else if (ext === 'pdf') {
                        filePreview = `<a href="${fileURL}" target="_blank" class="btn btn-outline-primary btn-sm">
            Lihat PDF di Tab Baru
        </a>`;
                    } else {
                        filePreview = `<a href="${fileURL}" target="_blank">Download Berkas</a>`;
                    }

                    $('#detail_file_berkas').html(filePreview);
                } else {
                    $('#detail_file_berkas').html('<em>Tidak ada berkas</em>');
                }

                $('#modalDetail').modal('show');
            },
            error: function() {
                Swal.fire('Gagal', 'Data tidak ditemukan.', 'error');
            }
        });
    }

    // Format tanggal (jika perlu)
    function formatTanggal(tgl) {
        if (!tgl) return '-';
        const date = new Date(tgl);
        return date.toLocaleDateString('id-ID', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric'
        });
    }

    // Format status jadi badge
    function formatStatus(status) {
        let warna = 'secondary';
        if (status === 'disetujui') warna = 'success';
        else if (status === 'ditolak') warna = 'danger';
        else if (status === 'diproses') warna = 'primary';
        else if (status === 'pending') warna = 'warning';
        else if (status === 'dicetak') warna = 'success';

        return `<span class="badge bg-${warna}">${status ? status.charAt(0).toUpperCase() + status.slice(1) : '-'}</span>`;
    }
</script>

<!-- untuk script untuk select2 -->
<script>
    $(document).ready(function() {
        // Ketika modal ditampilkan
        $('#tambahModal').on('shown.bs.modal', function() {
            // Inisialisasi Select2
            $('#id_jenis, #id_user, #id_service, #status ').select2({
                dropdownParent: $('#tambahModal'), // Memastikan dropdown muncul di dalam modal
                placeholder: "Silahkan Pilih",
                allowClear: true
            });
        });

        // Inisialisasi Select2 untuk modal edit
        $('#editModal').on('shown.bs.modal', function() {
            // Inisialisasi Select2
            $('#edit_id_jenis, #edit_id_user, #edit_id_service,  #edit_status').select2({
                dropdownParent: $('#editModal'), // Memastikan dropdown muncul di dalam modal
                placeholder: "Silahkan Pilih",
                allowClear: true
            });
        });
    });
</script>

<!-- Tampilkan preview file upload jika ada -->
<script>
    // Preview berkas saat dipilih di form tambah
    $('#file_berkas').on('change', function() {
        let file = this.files[0];
        let preview = $('#filePreview');
        preview.html(''); // Reset preview

        if (!file) return;

        let fileType = file.type;
        let fileURL = URL.createObjectURL(file);

        if (fileType.startsWith('image/')) {
            preview.html(`<img src="${fileURL}" class="img-thumbnail" width="200">`);
        } else if (fileType === 'application/pdf') {
            preview.html(`
            <a href="${fileURL}" target="_blank" class="btn btn-outline-primary">
                Lihat PDF di Tab Baru
            </a>
        `);
        } else {
            preview.html(`<span class="text-muted">File tidak dapat dipreview</span>`);
        }
    });
</script>

<!-- untuk form tambah data -->
<script>
    $(document).ready(function() {
        // Ketika form tambah data disubmit
        $('#formTambahData').submit(function(e) {
            e.preventDefault(); // Mencegah form untuk submit biasa

            var formData = new FormData(this); // Mengambil data form

            $.ajax({
                url: "<?= base_url('PengajuanCuti/tambahData') ?>", // Ganti dengan URL controller untuk tambah data
                type: "POST",
                data: formData,
                contentType: false, // WAJIB: jangan ubah Content-Type (biarkan browser set)
                processData: false, // WAJIB: jangan ubah data jadi string
                dataType: "json", // Menyatakan bahwa response yang diharapkan adalah JSON
                success: function(response) {
                    // Jika berhasil menambahkan data
                    if (response.status === 'success') {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // Menutup modal form
                                $('#tambahModal').modal('hide');

                                // Menyegarkan tabel data tanpa reload
                                location.reload(); // Atau panggil fungsi khusus untuk refresh tabel
                            }
                        });
                    } else if (response.status === 'error') {
                        // Jika terjadi kesalahan
                        Swal.fire({
                            title: 'Gagal!',
                            text: response.message,
                            icon: 'error',
                            confirmButtonText: 'Tutup'
                        });
                    }
                },
                error: function(xhr, status, error) {
                    // Jika terjadi error pada request
                    Swal.fire({
                        title: 'Kesalahan!',
                        text: 'Terjadi kesalahan dalam proses. Silakan coba lagi.',
                        icon: 'error',
                        confirmButtonText: 'Tutup'
                    });
                }
            });
        });
    });
</script>

<!-- Ambil Data untuk nilai Update -->
<script>
    // Fungsi untuk memuat data ke modal edit
    function updateData(id) {

        $.ajax({
            url: "<?= base_url('PengajuanCuti/getData') ?>/" + id, // URL untuk mendapatkan data berdasarkan ID
            type: "GET",
            dataType: "json",
            success: function(response) {
                if (response) {
                    $('#id').val(response.id).change();
                    $('#edit_id_jenis').val(response.id_jenis).change();
                    $('#edit_id_user').val(response.id_user).change();
                    $('#edit_tanggal_mulai').val(response.tanggal_mulai).change();
                    $('#edit_tanggal_selesai').val(response.tanggal_selesai).change();
                    $('#edit_keterangan').val(response.keterangan);
                    $('#edit_alamat_selama_menjalankan_cuti').val(response.alamat_selama_menjalankan_cuti);
                    $('#edit_golongan_ruang').val(response.golongan_ruang);
                    $('#edit_masa_kerja').val(response.masa_kerja);
                    $('#edit_status_supervisor').val(response.status_supervisor);
                    $('#edit_catatan_supervisor').val(response.catatan_supervisor);
                    $('#edit_status_manager').val(response.status_manager);
                    $('#edit_catatan_manager').val(response.catatan_manager);

                    // ✅ Tampilkan preview file lama
                    let filePath = response.file_berkas;
                    if (filePath) {
                        let extension = filePath.split('.').pop().toLowerCase();
                        let fileURL = "<?= base_url('uploads/berkas_cuti') ?>/" + filePath;
                        let previewHtml = '';

                        if (['jpg', 'jpeg', 'png'].includes(extension)) {
                            previewHtml = `<img src="${fileURL}" class="img-thumbnail" width="200">`;
                        } else if (extension === 'pdf') {
                            previewHtml = `<a href="${fileURL}" target="_blank" class="btn btn-outline-primary">
                            Lihat PDF di Tab Baru
                        </a>`;
                        } else {
                            previewHtml = `<a href="${fileURL}" target="_blank">Download File</a>`;
                        }

                        $('#edit_FilePreview').html(previewHtml);
                    } else {
                        $('#edit_FilePreview').html('<em>Tidak ada berkas sebelumnya.</em>');
                    }

                    $('#editModal').modal('show'); // Tampilkan modal
                } else {
                    alert('Data tidak ditemukan!');
                }
            },
            error: function(xhr, status, error) {
                alert('Terjadi kesalahan. Silakan coba lagi.');
            }
        });
    }

    // Preview file baru saat dipilih di form edit
    $('#edit_file_berkas').on('change', function() {
        let file = this.files[0];
        let preview = $('#edit_FilePreview');
        preview.html('');

        if (!file) return;

        let ext = file.name.split('.').pop().toLowerCase();
        let fileURL = URL.createObjectURL(file);

        if (['jpg', 'jpeg', 'png'].includes(ext)) {
            preview.html(`<img src="${fileURL}" class="img-thumbnail" width="200">`);
        } else if (ext === 'pdf') {
            preview.html(`<a href="${fileURL}" target="_blank" class="btn btn-outline-primary">
            Lihat PDF di Tab Baru
        </a>`);
        } else {
            preview.html(`<span class="text-muted">File tidak dapat dipreview</span>`);
        }
    });
</script>

<!-- // Fungsi untuk submit form update data -->
<script>
    $('#formEditData').submit(function(e) {
        e.preventDefault(); // Mencegah submit biasa

        var formData = new FormData(this); // Ambil data form

        $.ajax({
            url: "<?= base_url('PengajuanCuti/updateData') ?>", // URL untuk update data
            type: "POST",
            data: formData,
            contentType: false, // WAJIB: jangan ubah Content-Type (biarkan browser set)
            processData: false, // WAJIB: jangan ubah data jadi string
            dataType: "json",
            success: function(response) {
                // Jika berhasil menambahkan data
                if (response.status === 'success') {
                    Swal.fire({
                        title: 'Berhasil!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Menutup modal form
                            $('#tambahModal').modal('hide');

                            // Menyegarkan tabel data tanpa reload
                            location.reload(); // Atau panggil fungsi khusus untuk refresh tabel
                        }
                    });
                } else if (response.status === 'error') {
                    // Jika terjadi kesalahan
                    Swal.fire({
                        title: 'Gagal!',
                        text: response.message,
                        icon: 'error',
                        confirmButtonText: 'Tutup'
                    });
                }
            },
            error: function(xhr, status, error) {
                // Jika terjadi error pada request
                Swal.fire({
                    title: 'Kesalahan!',
                    text: 'Terjadi kesalahan dalam proses. Silakan coba lagi.',
                    icon: 'error',
                    confirmButtonText: 'Tutup'
                });
            }
        });
    });
</script>

<!-- Untuk delete -->
<script>
    function deleteData(id) {
        // Konfirmasi untuk menghapus data
        Swal.fire({
            title: 'Apakah Anda yakin ingin menghapus data ini?',
            text: "Data yang dihapus tidak dapat dikembalikan.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Iya, Hapus!',
            cancelButtonText: 'Batal',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "<?= base_url('PengajuanCuti/deleteData') ?>", // Ganti dengan URL endpoint controller Anda
                    type: "POST", // Menggunakan POST karena ini adalah penghapusan data
                    data: {
                        id: id, // Mengirimkan ID ke server
                        // Anda bisa menambahkan parameter lain jika diperlukan
                    },
                    dataType: "json", // Menentukan format data yang diterima (JSON)
                    success: function(response) {
                        // Jika berhasil menambahkan data
                        if (response.status === 'success') {
                            Swal.fire({
                                title: 'Berhasil!',
                                text: response.message,
                                icon: 'success',
                                confirmButtonText: 'OK'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    // Menutup modal form
                                    $('#tambahModal').modal('hide');

                                    // Menyegarkan tabel data tanpa reload
                                    location.reload(); // Atau panggil fungsi khusus untuk refresh tabel
                                }
                            });
                        } else if (response.status === 'error') {
                            // Jika terjadi kesalahan
                            Swal.fire({
                                title: 'Gagal!',
                                text: response.message,
                                icon: 'error',
                                confirmButtonText: 'Tutup'
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        // Jika terjadi error pada request
                        Swal.fire({
                            title: 'Kesalahan!',
                            text: 'Terjadi kesalahan dalam proses. Silakan coba lagi.',
                            icon: 'error',
                            confirmButtonText: 'Tutup'
                        });
                    }
                });
            }
        });
    }
</script>

<!-- untuk tombol status produk -->
<script>
    function changeStatus(id_pengajuancuti, status) {
        Swal.fire({
            title: "Konfirmasi",
            text: "Apakah Anda yakin ingin mengubah status Produk ini?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Ya, Ubah!",
            cancelButtonText: "Batal",
        }).then((result) => {
            if (result.isConfirmed) {
                // Kirim permintaan AJAX ke server
                $.ajax({
                    url: '<?= base_url('pengajuancuti/changeStatus') ?>', // Sesuaikan dengan route aplikasi Anda
                    type: 'POST',
                    data: {
                        id_pengajuancuti: id_pengajuancuti,
                        status: status
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            Swal.fire({
                                title: "Berhasil!",
                                text: response.message,
                                icon: "success",
                                confirmButtonText: "OK"
                            }).then(() => {
                                location.reload(); // Reload halaman setelah berhasil
                            });
                        } else if (response.status === 'error') {
                            Swal.fire({
                                title: "Gagal!",
                                text: response.message,
                                icon: "error",
                                confirmButtonText: "OK"
                            });
                        }
                    },
                    error: function() {
                        Swal.fire({
                            title: "Kesalahan!",
                            text: "Terjadi kesalahan pada server. Silakan coba lagi nanti.",
                            icon: "error",
                            confirmButtonText: "OK"
                        });
                    }
                });
            }
        });
    }
</script>


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