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

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800 fw-bold"><?= $title ?></h1>
        <a href="/dashboard" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
    </div>

    <!-- Alert Success / Error Messages -->
    <?php if (session()->getFlashdata('success')) : ?>
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4" role="alert">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-check-circle-fill fs-5"></i>
                <div><?= session()->getFlashdata('success') ?></div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    <?php endif; ?>

    <?php if (session()->getFlashdata('errors')) : ?>
        <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm mb-4" role="alert">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-exclamation-triangle-fill fs-5"></i>
                <div>
                    <ul class="mb-0 ps-3">
                        <?php foreach (session()->getFlashdata('errors') as $error) : ?>
                            <li><?= esc($error) ?></li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    <?php endif; ?>

    <div class="card shadow-sm border-0 rounded-3">
        <div class="card-body p-4">
            <p class="text-muted small">
                Tentukan sumber data jadwal pelajaran aktif yang akan ditampilkan di sidebar menu serta halaman dashboard Guru, BK, dan Tata Usaha.
            </p>
            <hr class="my-4">
            
            <form action="/settings/schedule/save" method="post">
                <?= csrf_field() ?>
                
                <h5 class="fw-bold mb-4 text-dark d-flex align-items-center gap-2">
                    <i class="bi bi-check2-circle text-primary"></i> Pilih Sumber Jadwal Aktif
                </h5>
                
                <div class="row">
                    <!-- Option 1: Local Generator -->
                    <div class="col-lg-4 col-md-6 mb-3">
                        <label class="d-block cursor-pointer position-relative h-100">
                            <input type="radio" name="schedule_source" value="local" class="card-radio-input d-none" <?= (old('schedule_source', $schedule_source ?? 'local') === 'local') ? 'checked' : '' ?>>
                            <div class="card-radio-box p-4 border rounded-3 bg-white h-100 transition-all">
                                <div class="d-flex align-items-start gap-3">
                                    <div class="p-3 bg-primary bg-opacity-10 text-primary rounded-3 flex-shrink-0 icon-box transition-all">
                                        <i class="bi bi-cpu-fill fs-3"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-2 fw-bold text-dark fs-5 title-box">Generator Asli (Lokal)</h6>
                                        <p class="mb-0 text-muted small text-justify">
                                            Gunakan mesin penjadwalan otomatis bawaan aplikasi. Menyusun guru, mapel, beban mengajar, serta meng-generate jadwal otomatis secara instan.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>

                    <!-- Option 2: aSc Import -->
                    <div class="col-lg-4 col-md-6 mb-3">
                        <label class="d-block cursor-pointer position-relative h-100">
                            <input type="radio" name="schedule_source" value="asc" class="card-radio-input d-none" <?= (old('schedule_source', $schedule_source ?? 'local') === 'asc') ? 'checked' : '' ?>>
                            <div class="card-radio-box p-4 border rounded-3 bg-white h-100 transition-all">
                                <div class="d-flex align-items-start gap-3">
                                    <div class="p-3 bg-success bg-opacity-10 text-success rounded-3 flex-shrink-0 icon-box transition-all">
                                        <i class="bi bi-file-earmark-code-fill fs-3"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-2 fw-bold text-dark fs-5 title-box">Impor aSc Timetables</h6>
                                        <p class="mb-0 text-muted small text-justify">
                                            Gunakan data jadwal hasil impor dari aplikasi <strong>aSc Timetables</strong> via file XML. Fitur generator lokal akan dinonaktifkan.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>

                    <!-- Option 3: Manual Input -->
                    <div class="col-lg-4 col-md-6 mb-3">
                        <label class="d-block cursor-pointer position-relative h-100">
                            <input type="radio" name="schedule_source" value="manual" class="card-radio-input d-none" <?= (old('schedule_source', $schedule_source ?? 'local') === 'manual') ? 'checked' : '' ?>>
                            <div class="card-radio-box p-4 border rounded-3 bg-white h-100 transition-all">
                                <div class="d-flex align-items-start gap-3">
                                    <div class="p-3 bg-warning bg-opacity-10 text-warning rounded-3 flex-shrink-0 icon-box transition-all">
                                        <i class="bi bi-pencil-square fs-3"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-2 fw-bold text-dark fs-5 title-box">Input Jadwal Manual</h6>
                                        <p class="mb-0 text-muted small text-justify">
                                            Susun jadwal secara manual langsung pada tabel grid per kelas. Anda bebas memilih guru dan mata pelajaran untuk tiap jam pelajaran sesuai keinginan.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>

                <div class="d-flex justify-content-end gap-2 mt-4 pt-4 border-top">
                    <a href="/dashboard" class="btn btn-light px-4">
                        <i class="bi bi-x-circle me-1"></i> Batal
                    </a>
                    <button type="submit" class="btn btn-primary px-4 fw-bold shadow-sm">
                        <i class="bi bi-save me-1"></i> Simpan Pengaturan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.cursor-pointer {
    cursor: pointer;
}
.card-radio-box {
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid #e2e8f0; /* Default border matching modern bootstrap light border */
}
.card-radio-box:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.04);
}
.card-radio-input:checked + .card-radio-box {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}

/* Checked local generator style */
.card-radio-input[value="local"]:checked + .card-radio-box {
    border-color: var(--bs-primary) !important;
    background-color: rgba(13, 110, 253, 0.03) !important;
}
.card-radio-input[value="local"]:checked + .card-radio-box .icon-box {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Checked aSc style */
.card-radio-input[value="asc"]:checked + .card-radio-box {
    border-color: var(--bs-success) !important;
    background-color: rgba(25, 135, 84, 0.03) !important;
}
.card-radio-input[value="asc"]:checked + .card-radio-box .icon-box {
    background-color: var(--bs-success) !important;
    color: #fff !important;
}

/* Checked manual style */
.card-radio-input[value="manual"]:checked + .card-radio-box {
    border-color: var(--bs-warning) !important;
    background-color: rgba(255, 193, 7, 0.03) !important;
}
.card-radio-input[value="manual"]:checked + .card-radio-box .icon-box {
    background-color: var(--bs-warning) !important;
    color: #fff !important;
}

/* Checkmark indicator badge */
.card-radio-input:checked + .card-radio-box::after {
    font-family: "bootstrap-icons";
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.4rem;
    animation: scaleIn 0.2s ease;
}
.card-radio-input[value="local"]:checked + .card-radio-box::after {
    content: "\f272"; /* bi-check-circle-fill */
    color: var(--bs-primary);
}
.card-radio-input[value="asc"]:checked + .card-radio-box::after {
    content: "\f272"; /* bi-check-circle-fill */
    color: var(--bs-success);
}
.card-radio-input[value="manual"]:checked + .card-radio-box::after {
    content: "\f272"; /* bi-check-circle-fill */
    color: var(--bs-warning);
}

.text-justify {
    text-align: justify;
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
</style>

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