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

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800 fw-bold"><?= $title ?></h1>
            <p class="text-muted small mb-0">Buat template jadwal baru untuk penginputan manual.</p>
        </div>
        <a href="/manual-schedule" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
    </div>

    <div class="card shadow-sm border-0 rounded-3">
        <div class="card-body p-4">
            <form action="/manual-schedule/store" method="post" id="formCreateSchedule">
                <?= csrf_field() ?>

                <div class="row">
                    <!-- Kolom Kiri: Header Info -->
                    <div class="col-md-6 mb-4">
                        <div class="p-3 bg-light rounded-3 mb-3 border">
                            <h6 class="fw-bold text-secondary mb-3"><i class="bi bi-info-circle me-1"></i> Informasi Sistem (Otomatis)</h6>
                            <div class="row mb-2">
                                <div class="col-5 text-muted small">Tahun Ajaran:</div>
                                <div class="col-7 fw-bold text-dark"><?= esc($activePeriod['year_name']) ?></div>
                            </div>
                            <div class="row">
                                <div class="col-5 text-muted small">Semester Terpilih:</div>
                                <div class="col-7"><span class="badge bg-primary">Semester <?= esc($activePeriod['semester']) ?></span></div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="name" class="form-label fw-bold text-dark">Nama Jadwal Pelajaran <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="name" class="form-control" value="<?= old('name') ?>" placeholder="Contoh: Jadwal Pelajaran Utama Ganjil" required>
                            <div class="form-text small">Tentukan nama yang deskriptif untuk template jadwal ini.</div>
                        </div>

                        <div class="mb-3">
                            <label for="notes" class="form-label fw-bold text-dark">Catatan Tambahan (Opsional)</label>
                            <textarea name="notes" id="notes" class="form-control" rows="3" placeholder="Tambahkan catatan jika diperlukan..."><?= old('notes') ?></textarea>
                        </div>
                    </div>

                    <!-- Kolom Kanan: Pengaturan Hari & Jam Pelajaran -->
                    <div class="col-md-6 mb-4">
                        <div class="mb-4">
                            <label class="form-label fw-bold text-dark mb-2">Hari Aktif Sekolah <span class="text-danger">*</span></label>
                            <div class="d-flex flex-wrap gap-3">
                                <?php 
                                $days = [1 => 'Senin', 2 => 'Selasa', 3 => 'Rabu', 4 => 'Kamis', 5 => 'Jumat', 6 => 'Sabtu'];
                                foreach ($days as $num => $name) : 
                                    $checked = in_array($num, [1,2,3,4,5]) ? 'checked' : '';
                                ?>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input day-checkbox" type="checkbox" name="active_days[]" id="day_<?= $num ?>" value="<?= $num ?>" <?= $checked ?>>
                                        <label class="form-check-label cursor-pointer text-dark" for="day_<?= $num ?>"><?= $name ?></label>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                            <div class="form-text small">Centang hari-hari KBM aktif di mana jadwal manual akan diisi.</div>
                        </div>

                        <!-- Kustomisasi Jam Pelajaran per Hari -->
                        <div class="border rounded-3 p-3 bg-light-subtle">
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" name="use_custom_hours" id="useCustomHours" value="1">
                                <label class="form-check-label fw-bold text-dark cursor-pointer" for="useCustomHours">
                                    Sesuaikan Jumlah Jam Pelajaran (JP) per Hari
                                </label>
                            </div>
                            
                            <p class="text-muted small mb-3" id="globalInfoText">
                                <i class="bi bi-info-circle"></i> Jika dinonaktifkan, sistem akan otomatis membaca semua slot waktu KBM aktif dari <strong>Template Waktu Global</strong>.
                            </p>

                            <!-- Panel Kustom Jam -->
                            <div id="customHoursPanel" class="d-none animate-fade-in">
                                <h6 class="fw-bold text-dark small mb-3">Tentukan Jumlah Jam Pelajaran (JP) per Hari:</h6>
                                <div class="row">
                                    <?php foreach ($days as $num => $name) : ?>
                                        <div class="col-6 mb-3 day-hours-input-group" data-day="<?= $num ?>" id="hoursGroup_<?= $num ?>">
                                            <label for="hours_day_<?= $num ?>" class="form-label small text-muted mb-1"><?= $name ?></label>
                                            <div class="input-group input-group-sm" style="max-width: 140px;">
                                                <input type="number" name="hours_day_<?= $num ?>" id="hours_day_<?= $num ?>" class="form-control text-center" min="1" max="15" value="<?= $defaultSlots[$num] ?? 8 ?>">
                                                <span class="input-group-text small">JP</span>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-end gap-2 pt-3 border-top">
                    <a href="/manual-schedule" class="btn btn-light px-4">Batal</a>
                    <button type="submit" class="btn btn-primary px-4 fw-bold shadow-sm">Simpan & Buat Template</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const useCustomHoursCheckbox = document.getElementById('useCustomHours');
    const customHoursPanel = document.getElementById('customHoursPanel');
    const globalInfoText = document.getElementById('globalInfoText');
    const dayCheckboxes = document.querySelectorAll('.day-checkbox');

    // Toggle panel kustom jam
    function toggleHoursPanel() {
        if (useCustomHoursCheckbox.checked) {
            customHoursPanel.classList.remove('d-none');
            globalInfoText.classList.add('d-none');
        } else {
            customHoursPanel.classList.add('d-none');
            globalInfoText.classList.remove('d-none');
        }
    }

    // Toggle tampilan input jam berdasarkan hari aktif yang dicentang
    function updateDayHoursVisibility() {
        dayCheckboxes.forEach(cb => {
            const dayNum = cb.value;
            const group = document.getElementById('hoursGroup_' + dayNum);
            if (group) {
                if (cb.checked) {
                    group.classList.remove('d-none');
                } else {
                    group.classList.add('d-none');
                }
            }
        });
    }

    useCustomHoursCheckbox.addEventListener('change', toggleHoursPanel);
    dayCheckboxes.forEach(cb => cb.addEventListener('change', updateDayHoursVisibility));

    // Inisialisasi
    toggleHoursPanel();
    updateDayHoursVisibility();
});
</script>

<style>
.cursor-pointer {
    cursor: pointer;
}
.animate-fade-in {
    animation: fadeIn 0.25s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>

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