{{-- resources/views/admin/hasil/_modal_jadwal.blade.php --}}
<div class="modal fade" id="modalSettingJadwal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
            <div class="modal-header bg-primary text-white py-3">
                <h5 class="modal-title font-weight-bold">
                    <i class="fas fa-calendar-alt mr-2"></i> Manajemen Sesi & Jadwal Ujian
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body p-4 bg-light">
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 15px;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <label class="small font-weight-bold text-primary">
                                <i class="fas fa-play-circle mr-1"></i> TANGGAL AWAL PELAKSANAAN
                            </label>
                            {{-- BAGIAN HARI OTOMATIS --}}
                            <span id="label_hari" class="badge badge-primary px-3" style="border-radius: 8px;">Senin</span>
                        </div>
                        <input type="date" id="tgl_mulai" class="form-control form-control-lg border-0 bg-light" 
                               value="2026-01-26" style="border-radius: 10px; font-weight: bold;"
                               onchange="updateHariOtomatis(this.value)">
                        <small class="text-muted mt-2 d-block">
                            Sistem akan otomatis mengurutkan peserta (70 orang/sesi) mulai hari <strong id="info_hari">Senin</strong>.
                        </small>
                    </div>
                </div>

                <h6 class="font-weight-bold text-dark mb-3 ml-1"><i class="fas fa-stopwatch mr-2 text-warning"></i>Konfigurasi Jam Per Sesi</h6>
                <div class="row">
                    @php
                        $sesi_defaults = [
                            1 => ['label' => 'Sesi 1 (Pagi)', 'icon' => 'fa-sun', 'color' => 'text-warning', 'id' => 'jam_s1', 'val' => '08:00'],
                            2 => ['label' => 'Sesi 2 (Siang)', 'icon' => 'fa-cloud-sun', 'color' => 'text-orange', 'id' => 'jam_s2', 'val' => '10:00'],
                            3 => ['label' => 'Sesi 3 (Setelah Dzuhur)', 'icon' => 'fa-coffee', 'color' => 'text-danger', 'id' => 'jam_s3', 'val' => '13:00'],
                            4 => ['label' => 'Sesi 4 (Sore)', 'icon' => 'fa-moon', 'color' => 'text-indigo', 'id' => 'jam_s4', 'val' => '15:00'],
                        ];
                    @endphp

                    @foreach($sesi_defaults as $s)
                    <div class="col-md-6 mb-3">
                        <div class="card border-0 shadow-sm h-100" style="border-radius: 15px;">
                            <div class="card-body p-3">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fas {{ $s['icon'] }} {{ $s['color'] }} mr-2"></i>
                                    <span class="small font-weight-bold text-muted text-uppercase">{{ $s['label'] }}</span>
                                </div>
                                <input type="time" id="{{ $s['id'] }}" class="form-control border-0 bg-light font-weight-bold" 
                                       value="{{ $s['val'] }}" style="border-radius: 8px; font-size: 1.1rem;">
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="modal-footer border-0 py-3">
                <button type="button" class="btn btn-secondary px-4 font-weight-bold" data-dismiss="modal" style="border-radius: 10px;">Batal</button>
                <button type="button" class="btn btn-primary px-5 font-weight-bold shadow" onclick="terapkanJadwal()" style="border-radius: 10px;">
                    <i class="fas fa-check-circle mr-2"></i> Simpan Konfigurasi
                </button>
            </div>
        </div>
    </div>
</div>

<script>
/**
 * Fungsi untuk mengupdate label hari secara real-time saat tanggal dipilih
 */
function updateHariOtomatis(tanggal) {
    if(!tanggal) return;
    
    const daftarHari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
    const date = new Date(tanggal);
    const namaHari = daftarHari[date.getDay()];
    
    // Update label badge dan teks info di bawah input
    document.getElementById('label_hari').innerText = namaHari;
    document.getElementById('info_hari').innerText = namaHari;
}

/**
 * Panggil sekali saat dokumen siap agar hari default (26 Jan 2026) muncul
 */
document.addEventListener('DOMContentLoaded', function() {
    updateHariOtomatis(document.getElementById('tgl_mulai').value);
});
</script>