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

<?= $this->section('content') ?>
<div class="row justify-content-center">
    <div class="col-lg-10">
        
        <!-- Header -->
        <div class="header-title">
            <h6 class="fw-bold mb-1">LAYANAN PENGADUAN DAN ASPIRASI ONLINE</h6>
            <h3 class="fw-bold mb-0 text-uppercase"><?= $pengaturan['nama_instansi'] ?></h3>
        </div>

        <!-- Card Form -->
        <div class="card form-card p-4">
            <div class="card-body">
                <form action="<?= base_url('pengaduan/simpan') ?>" method="POST" enctype="multipart/form-data">
                    
                    <!-- Kategori -->
                    <div class="mb-4">
                        <label class="form-label fw-bold">Jenis Laporan*</label>
                        <div class="d-flex gap-3">
                            <?php foreach($kategori as $k): ?>
                            <div class="form-check">
                                <input class="form-check-input radio-kategori" type="radio" name="kategori_id" value="<?= $k['id'] ?>" required>
                                <label class="form-check-label"><?= $k['nama_kategori'] ?></label>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <!-- Privasi -->
                    <div class="mb-4">
                        <label class="form-label fw-bold">Privasi*</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="is_anonim" id="privasi_rahasia" value="1" required>
                            <label class="form-check-label" for="privasi_rahasia">Rahasiakan data diri saya</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="is_anonim" id="privasi_tampil" value="0" required>
                            <label class="form-check-label" for="privasi_tampil">Cantumkan data diri saya</label>
                        </div>
                    </div>

                    <!-- Data Diri (Sembunyi secara default) -->
                    <div id="form_data_diri" class="border rounded p-3 mb-4 bg-light" style="display: none;">
                        <h6 class="fw-bold mb-3">Data Diri</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Nama</label>
                                <input type="text" class="form-control req-datadiri" name="nama">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">No HP / WhatsApp</label>
                                <input type="number" class="form-control req-datadiri" name="no_hp">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Alamat Lengkap</label>
                                <textarea class="form-control req-datadiri" name="alamat" rows="2"></textarea>
                            </div>
                        </div>
                        <small class="text-muted mt-2 d-block">*Kami akan menjaga privasi data diri anda, data ini kami gunakan hanya untuk pencatatan sistem dan administrasi internal.</small>
                    </div>

                    <!-- Detail Laporan -->
                    <div class="mb-3">
                        <label class="form-label fw-bold">Judul*</label>
                        <input type="text" class="form-control" name="judul" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Detail Laporan*</label>
                        <textarea class="form-control" name="detail_laporan" rows="4" required></textarea>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Lokasi / Alamat Kejadian*</label>
                            <input type="text" class="form-control" name="lokasi" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Tanggal*</label>
                            <input type="date" class="form-control" name="tanggal" required>
                        </div>
                    </div>

                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Lampiran (Foto/PDF)</label>
                            <input type="file" class="form-control" name="lampiran" accept=".jpg,.jpeg,.png,.pdf">
                        </div>
                        
                        <!-- Area Dropdown Dinamis -->
                        <div class="col-md-6">
                            <!-- Dropdown Komisi -->
                            <div id="wrap_komisi" class="d-none">
                                <label class="form-label fw-bold">Pilih Komisi*</label>
                                <select class="form-select" name="komisi_id" id="input_komisi">
                                    <option value="">-- Pilih Komisi --</option>
                                    <?php foreach($komisi as $kom): ?>
                                        <option value="<?= $kom['id'] ?>"><?= $kom['nama_komisi'] ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>

                            <!-- Dropdown Anggota DPRD -->
                            <div id="wrap_anggota" class="d-none">
                                <label class="form-label fw-bold">Pilih Anggota DPRD*</label>
                                <select class="form-select" name="anggota_dprd_id" id="input_anggota">
                                    <option value="">-- Pilih Anggota DPRD --</option>
                                    <?php if(!empty($anggota)): ?>
                                        <?php foreach($anggota as $a): ?>
                                            <option value="<?= $a['id'] ?>"><?= $a['nama_anggota'] ?></option>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Persetujuan -->
                    <div class="form-check mb-4">
                        <input class="form-check-input" type="checkbox" id="persetujuan" required>
                        <label class="form-check-label fw-bold" for="persetujuan">
                            Data laporan saya sudah saya pastikan betul dan dibuat dengan sebenar-benarnya serta dapat dipertanggungjawabkan.
                        </label>
                    </div>

                    <div class="d-flex justify-content-end gap-3 mt-4">
                        <a href="<?= base_url('/') ?>" class="btn btn-outline-secondary px-4 py-2 rounded-pill fw-bold">BATAL</a>
                        <button type="submit" class="btn btn-dark px-5 py-2 rounded-pill fw-bold">KIRIM</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    // Logika untuk menampilkan/menyembunyikan form data diri
    const radioRahasia = document.getElementById('privasi_rahasia');
    const radioTampil = document.getElementById('privasi_tampil');
    const formDataDiri = document.getElementById('form_data_diri');
    const reqInputs = document.querySelectorAll('.req-datadiri');

    function toggleDataDiri() {
        if (radioTampil.checked) {
            formDataDiri.style.display = 'block';
            reqInputs.forEach(input => input.setAttribute('required', 'required'));
        } else {
            formDataDiri.style.display = 'none';
            reqInputs.forEach(input => {
                input.removeAttribute('required');
                input.value = ''; // Kosongkan isian jika disembunyikan
            });
        }
    }

    radioRahasia.addEventListener('change', toggleDataDiri);
    radioTampil.addEventListener('change', toggleDataDiri);

    // Logika untuk menampilkan/menyembunyikan form dropdown tujuan laporan
    const radioKategori = document.querySelectorAll('.radio-kategori');
    const wrapKomisi = document.getElementById('wrap_komisi');
    const inputKomisi = document.getElementById('input_komisi');
    const wrapAnggota = document.getElementById('wrap_anggota');
    const inputAnggota = document.getElementById('input_anggota');

    radioKategori.forEach((elem) => {
        elem.addEventListener("change", function(event) {
            let val = event.target.value;

            if(val == '1') { 
                // Jika Pengaduan: Munculkan Komisi, Sembunyikan Anggota
                wrapKomisi.classList.remove('d-none');
                inputKomisi.setAttribute('required', 'required');
                
                wrapAnggota.classList.add('d-none');
                inputAnggota.removeAttribute('required');
                inputAnggota.value = ""; // Reset pilihan
            } else if(val == '2') { 
                // Jika Aspirasi: Munculkan Anggota, Sembunyikan Komisi
                wrapAnggota.classList.remove('d-none');
                inputAnggota.setAttribute('required', 'required');
                
                wrapKomisi.classList.add('d-none');
                inputKomisi.removeAttribute('required');
                inputKomisi.value = ""; // Reset pilihan
            }
        });
    });
</script>
<?= $this->endSection() ?>