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

<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card card-emerald card-outline shadow">
            <div class="card-header">
                <h3 class="card-title font-weight-bold text-emerald">
                    <i class="fas fa-print mr-2"></i> Cetak Realisasi Penyaluran e-RDKK
                </h3>
            </div>
            <form action="<?= base_url('alokasi/cetak') ?>" method="get" target="_blank">
                <div class="card-body">
                    <p class="text-muted text-sm">Silakan pilih jenis filter laporan dan tentukan periode waktu penyaluran pupuk subsidi yang ingin dicetak.</p>
                    
                    <div class="form-group">
                        <label>Pilih Jenis Filter</label>
                        <select name="filter" id="select_filter" class="form-control text-bold" required>
                            <option value="hari">🗓️ Laporan Harian (Per Tanggal)</option>
                            <option value="bulan">📅 Laporan Bulanan (Per Bulan)</option>
                            <option value="tahun" selected>⭐ Laporan Tahunan (Per Tahun)</option>
                        </select>
                    </div>

                    <div class="form-group opsi-filter d-none" id="input_hari">
                        <label>Pilih Tanggal</label>
                        <input type="date" name="tanggal" class="form-control" value="<?= date('Y-m-d') ?>">
                    </div>

                    <div class="row opsi-filter d-none" id="input_bulan">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Pilih Bulan</label>
                                <select name="bulan" class="form-control">
                                    <?php 
                                    $nama_bulan = ["", "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
                                    for($i=1; $i<=12; $i++): 
                                    ?>
                                        <option value="<?= sprintf('%02d', $i) ?>" <?= $i == date('m') ? 'selected' : '' ?>><?= $nama_bulan[$i] ?></option>
                                    <?php endfor; ?>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Tahun</label>
                                <input type="number" name="tahun" class="form-control" value="<?= date('Y') ?>">
                            </div>
                        </div>
                    </div>

                    <div class="form-group opsi-filter" id="input_tahun">
                        <label>Pilih Tahun Tanam</label>
                        <input type="number" name="tahun" class="form-control" value="<?= date('Y') ?>">
                    </div>

                </div>
                <div class="card-footer bg-light">
                    <button type="submit" class="btn btn-emerald btn-block btn-lg">
                        <i class="fas fa-file-pdf mr-2"></i> Buka & Cetak Laporan Resmi
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const selectFilter = document.getElementById('select_filter');
        
        selectFilter.addEventListener('change', function() {
            // Sembunyikan semua input filter terlebih dahulu
            document.querySelectorAll('.opsi-filter').forEach(el => el.classList.add('d-none'));
            
            // Tampilkan input yang sesuai dengan pilihan dropdown
            const value = this.value;
            if (value === 'hari') {
                document.getElementById('input_hari').classList.remove('d-none');
            } else if (value === 'bulan') {
                document.getElementById('input_bulan').classList.remove('d-none');
            } else if (value === 'tahun') {
                document.getElementById('input_tahun').classList.remove('d-none');
            }
        });
    });
</script>

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