<?= $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" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<div class="d-flex justify-content-between align-items-center mb-4">
    <h5 class="fw-bold mb-0">Plotting Shift Pegawai</h5>
    <div>
        <button class="btn btn-danger btn-sm rounded-pill px-3 shadow-sm me-2" data-bs-toggle="modal" data-bs-target="#modalHapusMassal">
            <i class="fas fa-trash-alt me-1"></i> Hapus Massal
        </button>
        <button class="btn btn-primary btn-sm rounded-pill px-3 shadow-sm me-2" data-bs-toggle="modal" data-bs-target="#modalPlot">
            <i class="fas fa-plus me-1"></i> Manual
        </button>
        <button class="btn btn-success btn-sm rounded-pill px-3 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalPlotMassal">
            <i class="fas fa-layer-group me-1"></i> Plot Massal
        </button>
    </div>
</div>

<?php if (session()->getFlashdata('success')): ?>
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle me-2"></i><?= session()->getFlashdata('success') ?>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
<?php endif; ?>

<?php if (session()->getFlashdata('error')): ?>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle me-2"></i><?= session()->getFlashdata('error') ?>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
<?php endif; ?>

<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light text-muted small">
                    <tr>
                        <th class="ps-4">TANGGAL</th>
                        <th>NAMA PEGAWAI</th>
                        <th>NAMA SHIFT</th>
                        <th class="text-center">AKSI</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (empty($plotting)): ?>
                        <tr>
                            <td colspan="4" class="text-center py-4 text-muted small">Belum ada data plotting shift.</td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($plotting as $p) : ?>
                            <tr>
                                <td class="ps-4 small"><?= date('d/m/Y', strtotime($p['tanggal'])) ?></td>
                                <td>
                                    <div class="fw-bold small"><?= $p['nama_lengkap'] ?></div>
                                </td>
                                <td><span class="badge bg-info-subtle text-info border border-info-subtle"><?= $p['nama_jadwal'] ?></span></td>
                                <td class="text-center">
                                    <a href="<?= base_url('plotting/hapus/' . $p['id_plotting']) ?>" class="btn btn-sm btn-light border text-danger" onclick="return confirm('Hapus jadwal ini?')"><i class="fas fa-trash"></i></a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="modalPlot" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-light border-0">
                <h6 class="modal-title fw-bold">Plotting Harian</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="<?= base_url('plotting/simpan') ?>" method="POST">
                <?= csrf_field() ?>
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="small fw-bold">Pegawai</label>
                        <select name="id_pegawai" class="form-select bg-light border-light select2-manual" required>
                            <option value="">-- Cari Nama Pegawai --</option>
                            <?php foreach ($pegawai as $pg): ?>
                                <option value="<?= $pg['id_pegawai'] ?>"><?= $pg['nama_lengkap'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="small fw-bold">Pilih Shift</label>
                        <select name="id_jam_kerja" class="form-select bg-light border-light" required>
                            <?php foreach ($jam_kerja as $jk): ?>
                                <option value="<?= $jk['id_jam_kerja'] ?>"><?= $jk['nama_jadwal'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="small fw-bold">Tanggal Dinas</label>
                        <input type="date" name="tanggal" class="form-control bg-light border-light" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100 rounded-pill">Simpan Jadwal</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalPlotMassal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-success text-white border-0">
                <h6 class="modal-title fw-bold"><i class="fas fa-layer-group me-2"></i>Plotting Massal</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="<?= base_url('plotting/simpan_massal') ?>" method="POST">
                <?= csrf_field() ?>
                <div class="modal-body p-4">

                    <label class="small fw-bold mb-2">Target Jadwal</label>
                    <div class="d-flex gap-3 mb-3">
                        <?php if (in_array(session()->get('level'), ['Superadmin', 'kabupaten'])): ?>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="scope" id="scopeGlobal" value="global" onclick="toggleScope()" checked>
                                <label class="form-check-label small" for="scopeGlobal">Semua ASN (Global)</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="scope" id="scopeOPD" value="opd" onclick="toggleScope()">
                                <label class="form-check-label small" for="scopeOPD">Per OPD</label>
                            </div>
                        <?php else: ?>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="scope" id="scopeGlobal" value="global" onclick="toggleScope()" checked>
                                <label class="form-check-label small" for="scopeGlobal">Seluruh Pegawai (OPD Anda)</label>
                            </div>
                        <?php endif; ?>
                        
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="scope" id="scopePegawai" value="pegawai" onclick="toggleScope()">
                            <label class="form-check-label small" for="scopePegawai">Pilih Pegawai</label>
                        </div>
                    </div>

                    <div class="p-3 bg-light rounded border mb-3">
                        <div id="boxGlobal" class="text-muted small">
                            <i class="fas fa-info-circle me-1"></i> Jadwal akan diterapkan ke <b>seluruh pegawai</b> sesuai filter di atas.
                        </div>

                        <?php if (in_array(session()->get('level'), ['Superadmin', 'kabupaten'])): ?>
                            <div id="boxOPD" class="d-none">
                                <label class="small fw-bold">Pilih OPD</label>
                                <select name="id_opd" class="form-select border-success select2-massal">
                                    <option value="">-- Pilih Dinas/Badan --</option>
                                    <?php foreach ($opd as $o): ?>
                                        <option value="<?= $o['id_opd'] ?>"><?= $o['nama_opd'] ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        <?php endif; ?>

                        <div id="boxPegawai" class="d-none">
                            <label class="small fw-bold">Pilih Pegawai (Bisa Lebih Dari 1)</label>
                            <select name="target_pegawai[]" class="form-select border-success select2-massal-multiple" multiple="multiple">
                                <?php foreach ($pegawai as $pg): ?>
                                    <option value="<?= $pg['id_pegawai'] ?>"><?= $pg['nama_lengkap'] ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="small fw-bold">Pilih Shift / Jam Kerja</label>
                        <select name="id_jam_kerja" class="form-select bg-light border-light" required>
                            <?php foreach ($jam_kerja as $jk): ?>
                                <option value="<?= $jk['id_jam_kerja'] ?>"><?= $jk['nama_jadwal'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <hr class="text-muted">

                    <div class="mb-3">
                        <label class="small fw-bold mb-2">Metode Pilih Tanggal</label>
                        <div class="d-flex gap-3">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="tipe_tanggal" id="tipeRange" value="range" onclick="toggleTipeTanggal()" checked>
                                <label class="form-check-label small" for="tipeRange">Rentang Tanggal (Awal-Akhir)</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="tipe_tanggal" id="tipeMulti" value="multiple" onclick="toggleTipeTanggal()">
                                <label class="form-check-label small" for="tipeMulti">Pilih Beberapa Tanggal</label>
                            </div>
                        </div>
                    </div>

                    <div class="row" id="boxRangeTanggal">
                        <div class="col-6 mb-3">
                            <label class="small fw-bold">Dari Tanggal</label>
                            <input type="date" name="tgl_mulai" class="form-control bg-light border-light">
                        </div>
                        <div class="col-6 mb-3">
                            <label class="small fw-bold">Sampai Tanggal</label>
                            <input type="date" name="tgl_selesai" class="form-control bg-light border-light">
                        </div>
                    </div>

                    <div class="mb-3 d-none" id="boxMultiTanggal">
                        <label class="small fw-bold">Pilih Tanggal Acak (Bisa Lebih Dari 1)</label>
                        <input type="text" name="tanggal_multiple" id="flatpickr-multi" class="form-control border-success bg-white" placeholder="Klik untuk memilih tanggal...">
                    </div>

                    <div class="alert alert-warning small py-2 mb-0">
                        <i class="fas fa-exclamation-triangle me-1"></i> Data jadwal lama di tanggal tersebut akan <b>ditimpa</b>.
                    </div>

                    <br>
                    <button type="submit" class="btn btn-success w-100 rounded-pill fw-bold">Terapkan Jadwal Massal</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalHapusMassal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-danger text-white border-0">
                <h6 class="modal-title fw-bold"><i class="fas fa-exclamation-triangle me-2"></i>Hapus Jadwal Massal</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="<?= base_url('plotting/hapus_massal') ?>" method="POST">
                <?= csrf_field() ?>
                <div class="modal-body p-4">
                    <div class="alert alert-warning small border-0">
                        <i class="fas fa-info-circle me-1"></i> Pilih kriteria data yang ingin dihapus secara permanen.
                    </div>
                    
                    <div class="mb-3">
                        <label class="small fw-bold">Scope Penghapusan</label>
                        <select name="scope_hapus" class="form-select form-select-sm" id="scopeHapus" onchange="toggleScopeHapus()">
                            <?php if (in_array(session()->get('level'), ['Superadmin', 'kabupaten'])): ?>
                                <option value="global">Semua ASN (Global)</option>
                                <option value="opd">Per OPD / Instansi</option>
                            <?php else: ?>
                                <option value="global">Seluruh Pegawai (OPD Anda)</option>
                            <?php endif; ?>
                            <option value="pegawai">Pilih Beberapa Pegawai</option>
                        </select>
                    </div>

                    <?php if (in_array(session()->get('level'), ['Superadmin', 'kabupaten'])): ?>
                        <div id="boxOPDHapus" class="d-none mb-3">
                            <label class="small fw-bold">Pilih OPD</label>
                            <select name="id_opd_hapus" class="form-select form-select-sm border-danger select2-hapus">
                                <option value="">-- Pilih Dinas/Badan --</option>
                                <?php foreach($opd as $o): ?>
                                    <option value="<?= $o['id_opd'] ?>"><?= $o['nama_opd'] ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    <?php endif; ?>

                    <div id="boxPegawaiHapus" class="d-none mb-3">
                        <label class="small fw-bold">Pilih Pegawai (Bisa Lebih Dari 1)</label>
                        <select name="target_pegawai_hapus[]" class="form-select form-select-sm border-danger select2-hapus-multiple" multiple="multiple">
                            <?php foreach($pegawai as $pg): ?>
                                <option value="<?= $pg['id_pegawai'] ?>"><?= $pg['nama_lengkap'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="small fw-bold">Dari Tanggal</label>
                            <input type="date" name="tgl_mulai_hapus" class="form-control form-control-sm" required>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="small fw-bold">Sampai Tanggal</label>
                            <input type="date" name="tgl_selesai_hapus" class="form-control form-control-sm" required>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-danger w-100 rounded-pill fw-bold" onclick="return confirm('Apakah Anda yakin? Data jadwal yang dihapus tidak bisa dikembalikan.')">
                        MULAI HAPUS MASSAL
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // JS Logic untuk Radio Button Tipe Tanggal
    function toggleTipeTanggal() {
        const tipeRange = document.getElementById('tipeRange').checked;
        const boxRange = document.getElementById('boxRangeTanggal');
        const boxMulti = document.getElementById('boxMultiTanggal');
        
        if (tipeRange) {
            boxRange.classList.remove('d-none');
            boxMulti.classList.add('d-none');
            // Matikan required untuk Flatpickr agar form bisa disubmit
            document.getElementById('flatpickr-multi').required = false; 
        } else {
            boxRange.classList.add('d-none');
            boxMulti.classList.remove('d-none');
            document.getElementById('flatpickr-multi').required = true;
        }
    }

    function toggleScopeHapus() {
        const val = document.getElementById('scopeHapus').value;
        const boxOPD = document.getElementById('boxOPDHapus');
        const boxPeg = document.getElementById('boxPegawaiHapus');

        if(boxOPD) boxOPD.classList.add('d-none');
        if(boxPeg) boxPeg.classList.add('d-none');

        if (val === 'opd' && boxOPD) boxOPD.classList.remove('d-none');
        if (val === 'pegawai' && boxPeg) boxPeg.classList.remove('d-none');
    }

    function toggleScope() {
        const boxGlobal = document.getElementById('boxGlobal');
        const boxOPD = document.getElementById('boxOPD');
        const boxPegawai = document.getElementById('boxPegawai');

        if(boxGlobal) boxGlobal.classList.add('d-none');
        if(boxOPD) boxOPD.classList.add('d-none');
        if(boxPegawai) boxPegawai.classList.add('d-none');

        if (document.getElementById('scopeGlobal').checked && boxGlobal) {
            boxGlobal.classList.remove('d-none');
        } else if (document.getElementById('scopeOPD') && document.getElementById('scopeOPD').checked && boxOPD) {
            boxOPD.classList.remove('d-none');
        } else if (document.getElementById('scopePegawai').checked && boxPegawai) {
            boxPegawai.classList.remove('d-none');
        }
    }
</script>

<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 src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
    $(document).ready(function() {
        // Init Select2
        $('.select2-manual').select2({ theme: 'bootstrap-5', dropdownParent: $('#modalPlot'), width: '100%' });
        $('.select2-massal').select2({ theme: 'bootstrap-5', dropdownParent: $('#modalPlotMassal'), width: '100%' });
        $('.select2-massal-multiple').select2({ theme: 'bootstrap-5', dropdownParent: $('#modalPlotMassal'), width: '100%', placeholder: '-- Pilih Beberapa Pegawai --', allowClear: true });
        $('.select2-hapus').select2({ theme: 'bootstrap-5', dropdownParent: $('#modalHapusMassal'), width: '100%' });
        $('.select2-hapus-multiple').select2({ theme: 'bootstrap-5', dropdownParent: $('#modalHapusMassal'), width: '100%', placeholder: '-- Pilih Beberapa Pegawai --', allowClear: true });
        
        // Init Flatpickr Multi Date
        flatpickr("#flatpickr-multi", {
            mode: "multiple",
            dateFormat: "Y-m-d",
            conjunction: ", "
        });
    });
</script>

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