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

<div class="row justify-content-center">
    <div class="col-12 col-lg-8">
        <div class="card border-0 shadow-sm" style="border-radius: 14px;">
            <div class="card-header bg-white border-bottom-0 pt-4 px-4 pb-0">
                <div class="d-flex align-items-center gap-2">
                    <a href="/guru/learning-devices" class="btn btn-outline-secondary btn-sm p-2 rounded-circle" style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;" title="Kembali ke Daftar">
                        <i class="bi bi-arrow-left"></i>
                    </a>
                    <div>
                        <h5 class="fw-bold mb-0 text-dark">Setup Dokumen Perangkat Mengajar</h5>
                        <small class="text-muted">Langkah 1: Konfigurasikan identitas mata pelajaran, kelas, dan tipe sekolah Anda.</small>
                    </div>
                </div>
            </div>

            <div class="card-body p-4">
                <?php if (session()->getFlashdata('errors')): ?>
                <div class="alert alert-danger border-0 small mb-4" role="alert" style="background-color: #f8d7da; color: #842029; border-radius: 8px;">
                    <ul class="mb-0 ps-3">
                        <?php foreach (session()->getFlashdata('errors') as $error): ?>
                            <li><?= esc($error) ?></li>
                        <?php endforeach; ?>
                    </ul>
                </div>
                <?php endif; ?>

                <?php if (empty($assignedSubjects)): ?>
                <div class="alert alert-warning border-0 small mb-4 p-3 d-flex gap-3 align-items-center" role="alert" style="background-color: #fff3cd; color: #664d03; border-radius: 8px;">
                    <i class="bi bi-exclamation-triangle-fill fs-4"></i>
                    <div>
                        <strong>Jadwal Mengajar Kosong</strong><br>
                        Anda belum memiliki jadwal mengajar aktif di periode akademik ini. Silakan hubungi Wakil Kepala Kurikulum untuk melakukan *Setting Mengajar* terlebih dahulu.
                    </div>
                </div>
                <div class="text-center pt-2">
                    <a href="/guru/learning-devices" class="btn btn-light px-4 py-2" style="border-radius: 8px;">Kembali</a>
                </div>
                <?php else: ?>
                <form action="/guru/learning-devices/store-setup" method="post">
                    <?= csrf_field() ?>

                    <!-- Pilihan Mata Pelajaran Sekolah -->
                    <div class="mb-3">
                        <label for="school_subject_id" class="form-label fw-semibold text-dark">Mata Pelajaran <span class="text-danger">*</span></label>
                        <select name="school_subject_id" id="school_subject_id" class="form-select py-2" required style="border-radius: 8px;">
                            <option value="">-- Pilih Mata Pelajaran --</option>
                            <?php foreach ($assignedSubjects as $sub): ?>
                                <option value="<?= $sub['subject_id'] ?>" <?= old('school_subject_id') == $sub['subject_id'] ? 'selected' : '' ?>>
                                    <?= esc($sub['subject_name']) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                        <div class="form-text small">Mata pelajaran yang Anda ajar pada periode semester saat ini.</div>
                    </div>

                    <!-- Pilihan Tingkat/Kelas -->
                    <div class="mb-3">
                        <label for="grade_id" class="form-label fw-semibold text-dark">Tingkat Kelas <span class="text-danger">*</span></label>
                        <select name="grade_id" id="grade_id" class="form-select py-2" required style="border-radius: 8px;">
                            <option value="">-- Pilih Tingkat --</option>
                            <?php foreach ($assignedGrades as $g): ?>
                                <option value="<?= $g['grade_id'] ?>" <?= old('grade_id') == $g['grade_id'] ? 'selected' : '' ?>>
                                    Kelas <?= esc($g['grade_name']) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                        <div class="form-text small">Sistem otomatis mendeteksi Fase (A s.d F) berdasarkan tingkat kelas yang dipilih.</div>
                    </div>

                    <!-- Tipe Sekolah/Kurikulum Karakter -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold text-dark">Tipe Sekolah & Integrasi Karakter <span class="text-danger">*</span></label>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="school_type" id="typeUmum" value="umum" checked autocomplete="off">
                                <label class="btn btn-outline-primary w-100 p-3 text-start d-flex flex-column h-100 justify-content-between" for="typeUmum" style="border-radius: 10px; line-height: 1.4;">
                                    <div class="d-flex justify-content-between align-items-center w-100 mb-2">
                                        <span class="fw-bold"><i class="bi bi-flag-fill me-1"></i> Sekolah Umum</span>
                                        <i class="bi bi-check-circle-fill text-primary d-none icon-check"></i>
                                    </div>
                                    <small class="text-muted" style="font-size: 0.78rem;">Mengintegrasikan **8 Dimensi Profil Lulusan** resmi Kemendikbudristek pada Modul Ajar.</small>
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="school_type" id="typeMadrasah" value="madrasah" autocomplete="off">
                                <label class="btn btn-outline-success w-100 p-3 text-start d-flex flex-column h-100 justify-content-between" for="typeMadrasah" style="border-radius: 10px; line-height: 1.4;">
                                    <div class="d-flex justify-content-between align-items-center w-100 mb-2">
                                        <span class="fw-bold"><i class="bi bi-moon-stars-fill me-1"></i> Madrasah (KMA)</span>
                                        <i class="bi bi-check-circle-fill text-success d-none icon-check"></i>
                                    </div>
                                    <small class="text-muted" style="font-size: 0.78rem;">Mengintegrasikan **8 Dimensi Profil Lulusan** ditambah kurikulum **Panca Cinta** Kemenag.</small>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Jumlah Minggu Efektif (Kaldik) -->
                    <div class="mb-4">
                        <label for="effective_weeks" class="form-label fw-semibold text-dark">Jumlah Minggu Efektif Semester Ini <span class="text-danger">*</span></label>
                        <input type="number" name="effective_weeks" id="effective_weeks" class="form-control py-2" value="<?= old('effective_weeks', $suggestedWeeks) ?>" min="1" max="30" required style="border-radius: 8px;">
                        <div class="form-text small"><i class="bi bi-info-circle text-primary"></i> Dihitung otomatis dari **Kalender Akademik** aktif (total minggu dikurangi libur nasional & sekolah). Anda bisa mengubahnya jika diperlukan.</div>
                    </div>

                    <!-- Tombol Lanjut -->
                    <div class="d-flex justify-content-end gap-2 border-top pt-4">
                        <a href="/guru/learning-devices" class="btn btn-light px-4 py-2" style="border-radius: 8px;">Batal</a>
                        <button type="submit" class="btn btn-primary px-4 py-2 fw-semibold" style="border-radius: 8px; background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%); border: none;">
                            Mulai Penyusunan <i class="bi bi-arrow-right ms-1"></i>
                        </button>
                    </div>
                </form>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<style>
.btn-check:checked + label {
    background-color: rgba(13, 110, 253, 0.04);
}
.btn-check:checked + label.btn-outline-success {
    background-color: rgba(25, 135, 84, 0.04);
}
.btn-check:checked + label .icon-check {
    display: inline-block !important;
}
</style>

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