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

<div class="row">
    <div class="col-12">
        <form id="formUtusan" action="<?= base_url('apel/simpan_utusan') ?>" method="POST">
            <?= csrf_field() ?>
            <input type="hidden" name="id_apel" value="<?= $apel['id_apel'] ?>">

            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="fw-bold mb-0">Pilih Utusan: <?= $apel['nama_apel'] ?></h5>
                        <p class="text-muted small mb-0">Hanya pegawai terpilih yang akan melihat tombol absen apel di PWA.</p>
                    </div>
                    <button type="submit" class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm">
                        <i class="fas fa-save me-2"></i> Simpan Utusan
                    </button>
                </div>
                
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle" id="tableUtusan">
                            <thead class="bg-light">
                                <tr>
                                    <th width="50" class="text-center">
                                        <input type="checkbox" id="checkAll" class="form-check-input border-secondary" style="cursor:pointer">
                                    </th>
                                    <th>Pegawai</th>
                                    <th>NIP</th>
                                    <th class="text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($pegawai as $p): ?>
                                <tr>
                                    <td class="text-center">
                                        <input type="checkbox" name="id_pegawai[]" value="<?= $p['id_pegawai'] ?>" 
                                        class="form-check-input checkItem border-secondary" 
                                        <?= in_array($p['id_pegawai'], $utusan_ids) ? 'checked' : '' ?> style="cursor:pointer">
                                    </td>
                                    <td>
                                        <div class="fw-bold text-dark" style="font-size: 0.9rem;"><?= $p['nama_lengkap'] ?></div>
                                    </td>
                                    <td><code class="text-pink" style="font-size: 0.85rem;"><?= $p['nip'] ?></code></td>
                                    <td class="text-center">
                                        <?php if (in_array($p['id_pegawai'], $utusan_ids)): ?>
                                            <span class="badge bg-primary bg-opacity-10 text-primary" style="font-size: 0.7rem;">Sudah Terpilih</span>
                                        <?php else: ?>
                                            <span class="badge bg-light text-muted" style="font-size: 0.7rem;">-</span>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const checkAll = document.getElementById('checkAll');
        const checkItems = document.querySelectorAll('.checkItem');

        // Logika saat CheckAll diklik
        checkAll.addEventListener('change', function() {
            checkItems.forEach(item => {
                item.checked = this.checked;
            });
        });

        // Logika opsional: Jika satu dilepas, CheckAll otomatis batal centang
        checkItems.forEach(item => {
            item.addEventListener('change', function() {
                if (!this.checked) {
                    checkAll.checked = false;
                } else {
                    const allChecked = Array.from(checkItems).every(i => i.checked);
                    checkAll.checked = allChecked;
                }
            });
        });
    });
</script>

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