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

<style>
/* ── Tabel jadwal ── */
.sg-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.sg-tbl thead th { padding:9px 12px; font-size:11px; font-weight:600; color:#6b7280; background:#f9fafb; border-bottom:1px solid #e5e7eb; }
.sg-tbl tbody tr { border-bottom:1px solid #f3f4f6; transition:background .1s; }
.sg-tbl tbody tr:hover { background:#f9fafb; }
.sg-tbl td { padding:10px 12px; vertical-align:middle; }
.sg-badge { font-size:11px; padding:2px 9px; border-radius:20px; font-weight:600; }
.badge-draft     { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; }
.badge-published { background:#E1F5EE; color:#085041; }
.badge-empty     { background:#FFF8E1; color:#7B5800; }
.stat-pill { font-size:11px; padding:2px 8px; border-radius:12px; background:#EBF5FF; color:#0C447C; }

/* ── Progress mini ── */
.mini-prog { height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; flex:1; min-width:60px; }
.mini-prog-fill { height:100%; border-radius:3px; transition:width .3s; }

/* ── Panduan accordion ── */
.panduan-step-num {
    width:28px; height:28px; border-radius:50%;
    background:linear-gradient(135deg,#4f46e5,#7c3aed);
    color:#fff; font-size:12px; font-weight:700;
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0; margin-right:10px;
}
.accordion-button { font-size:13px; font-weight:600; }
.accordion-button:not(.collapsed) { background:#EEF2FF; color:#4338CA; }
.panduan-content { font-size:13px; color:#374151; line-height:1.7; }
.panduan-content a { color:#4338CA; font-weight:600; }
.panduan-link-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:8px; font-size:12px; font-weight:600;
    background:#EEF2FF; color:#4338CA; border:1px solid #c7d2fe;
    text-decoration:none; transition:all .12s; margin-top:8px;
}
.panduan-link-btn:hover { background:#4f46e5; color:#fff; border-color:#4f46e5; text-decoration:none; }

/* ── Welcome banner ── */
.welcome-banner {
    background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);
    border-radius:14px; padding:20px 24px; color:#fff; margin-bottom:20px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.welcome-banner h6 { color:#fff; font-size:16px; font-weight:700; margin-bottom:4px; }
.welcome-banner p  { color:rgba(255,255,255,.8); font-size:12px; margin:0; }
</style>

<!-- ── HEADER ── -->
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
    <div>
        <h5 class="mb-0 fw-semibold">
            <i class="bi bi-calendar2-week me-2 text-primary"></i>Pembuat Jadwal Otomatis
        </h5>
        <small class="text-muted">Kelola dan generate jadwal pelajaran per tahun ajaran &amp; semester</small>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#modalPanduan">
            <i class="bi bi-book me-1"></i>Panduan
        </button>
        <a href="/schedule-generator/create" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg me-1"></i>Buat Jadwal Baru
        </a>
    </div>
</div>

<?php if (empty($schedules)): ?>
<!-- Welcome banner untuk user baru -->
<div class="welcome-banner">
    <div>
        <h6><i class="bi bi-lightning-charge-fill me-2"></i>Selamat Datang di Pembuat Jadwal Otomatis!</h6>
        <p>Belum ada jadwal. Ikuti panduan untuk membuat jadwal pertama Anda — dari konfigurasi slot waktu hingga publish.</p>
    </div>
    <div class="d-flex gap-2 flex-wrap">
        <button class="btn btn-light btn-sm fw-semibold" data-bs-toggle="modal" data-bs-target="#modalPanduan">
            <i class="bi bi-book me-1"></i>Lihat Panduan
        </button>
        <a href="/schedule-generator/create" class="btn btn-warning btn-sm fw-semibold">
            <i class="bi bi-plus-lg me-1"></i>Buat Jadwal Pertama
        </a>
    </div>
</div>
<div class="card border-0 shadow-sm">
    <div class="card-body text-center py-5">
        <i class="bi bi-calendar2-x fs-1 text-muted opacity-25 d-block mb-3"></i>
        <p class="text-muted mb-1 fw-semibold">Belum ada jadwal yang dibuat.</p>
        <small class="text-muted d-block mb-3">Seluruh konfigurasi slot waktu, beban mengajar, dan ketersediaan guru dilakukan di dalam wizard detail setelah Anda membuat draf jadwal.</small>
        <div class="d-flex gap-2 justify-content-center flex-wrap">
            <a href="/schedule-generator/create" class="btn btn-primary btn-sm">
                <i class="bi bi-plus-lg me-1"></i>Buat Jadwal Baru
            </a>
        </div>
    </div>
</div>

<?php else: ?>

<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="sg-tbl">
                <thead>
                    <tr>
                        <th style="width:32px">#</th>
                        <th>Nama Jadwal</th>
                        <th>Tahun Ajaran</th>
                        <th>Semester</th>
                        <th class="text-center">Hari Aktif</th>
                        <th style="min-width:140px">Progress</th>
                        <th class="text-center">Status</th>
                        <th class="text-center" style="width:120px">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                <?php foreach ($schedules as $i => $s):
                    $days      = array_map('intval', explode(',', $s['active_days']));
                    $dayNames  = ['','Sen','Sel','Rab','Kam','Jum','Sab'];
                    $total     = (int)$s['total_entries'];
                    $target    = (int)($s['total_target'] ?? 0);
                    $percent   = $target > 0 ? min(100, round(($total / $target) * 100)) : 0;
                    
                    // If published or 100% complete, show green. If draft and total > 0, show purple. Otherwise grey.
                    $progColor = ($s['status'] === 'published' || $percent === 100) ? '#22c55e' : ($total > 0 ? '#6366F1' : '#e5e7eb');
                ?>
                <tr>
                    <td class="text-muted"><?= $i + 1 ?></td>
                    <td>
                        <div class="fw-semibold"><?= esc($s['name']) ?></div>
                        <?php if (!empty($s['notes'])): ?>
                        <small class="text-muted"><?= esc($s['notes']) ?></small>
                        <?php endif; ?>
                    </td>
                    <td><?= esc($s['year_name'] ?? '-') ?></td>
                    <td><?= esc($s['period_name'] ?? '-') ?></td>
                    <td class="text-center">
                        <div class="d-flex gap-1 justify-content-center flex-wrap">
                            <?php foreach ($days as $d): ?>
                            <span class="sg-badge" style="background:#EBF5FF;color:#0C447C;font-size:10px">
                                <?= $dayNames[$d] ?? $d ?>
                            </span>
                            <?php endforeach; ?>
                        </div>
                    </td>
                    <td>
                        <?php if ($total === 0): ?>
                        <span class="text-muted" style="font-size:12px">Belum digenerate</span>
                        <?php else: ?>
                        <div class="d-flex align-items-center gap-2">
                            <div class="mini-prog" title="<?= $percent ?>% (<?= $total ?>/<?= $target ?> JP)">
                                <div class="mini-prog-fill" style="width:<?= $percent ?>%;background:<?= $progColor ?>"></div>
                            </div>
                            <small style="font-size:11px;color:#6b7280;white-space:nowrap" class="fw-semibold">
                                <?= $percent ?>% (<?= $total ?>/<?= $target ?> JP)
                                <?php if ($s['total_locked'] > 0): ?>
                                <span class="ms-1" title="<?= $s['total_locked'] ?> terkunci"><i class="bi bi-lock-fill text-warning" style="font-size:9px"></i></span>
                                <?php endif; ?>
                            </small>
                        </div>
                        <?php endif; ?>
                    </td>
                    <td class="text-center">
                        <?php if ($s['status'] === 'published'): ?>
                        <span class="sg-badge badge-published"><i class="bi bi-check-circle me-1"></i>Published</span>
                        <?php else: ?>
                        <span class="sg-badge badge-draft"><i class="bi bi-pencil me-1"></i>Draft</span>
                        <?php endif; ?>
                    </td>
                    <td class="text-center">
                        <div class="d-flex justify-content-center gap-1">
                            <a href="/schedule-generator/detail/<?= $s['id'] ?>"
                               class="btn btn-outline-primary btn-sm py-0 px-2">
                                <i class="bi bi-sliders me-1"></i>Kelola
                            </a>
                            <a href="/schedule-generator/delete/<?= $s['id'] ?>"
                               class="btn btn-outline-danger btn-sm py-0 px-2"
                               onclick="return confirm('Apakah Anda yakin ingin menghapus jadwal ini? Semua data hasil generate dan pengaturan akan hilang permanen.')">
                                <i class="bi bi-trash3"></i> Hapus
                            </a>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- ════════════════════════════════════════════
     MODAL PANDUAN
════════════════════════════════════════════ -->
<div class="modal fade" id="modalPanduan" tabindex="-1" aria-labelledby="modalPanduanLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header" style="background:linear-gradient(135deg,#4f46e5,#7c3aed)">
                <h5 class="modal-title text-white fw-bold" id="modalPanduanLabel">
                    <i class="bi bi-book me-2"></i>Panduan Lengkap Pembuat Jadwal Otomatis
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <!-- Intro -->
                <div class="p-4 pb-2" style="background:#F5F3FF;border-bottom:1px solid #e5e7eb">
                    <p class="mb-0" style="font-size:13px;color:#374151">
                        Ikuti 7 langkah berikut secara berurutan untuk menghasilkan jadwal yang optimal.
                        Sistem ini menggunakan algoritma <strong>constraint-based scheduling</strong> yang menghormati
                        ketersediaan guru, kapasitas kelas, dan distribusi jam pelajaran.
                    </p>
                </div>

                <div class="accordion accordion-flush" id="accordionPanduan">

                    <!-- Langkah 1 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#step1">
                                <span class="panduan-step-num">1</span>
                                Konfigurasi Slot Waktu
                            </button>
                        </h2>
                        <div id="step1" class="accordion-collapse collapse show" data-bs-parent="#accordionPanduan">
                            <div class="accordion-body panduan-content">
                                <p>Slot waktu mendefinisikan <strong>jam berapa saja pembelajaran berlangsung</strong> setiap harinya. Tanpa slot KBM, generator tidak bisa bekerja.</p>
                                <ul>
                                    <li>Buat slot dengan tipe <strong>KBM</strong> (Kegiatan Belajar Mengajar) — ini yang akan diisi jadwal pelajaran</li>
                                    <li>Tambahkan slot <strong>Istirahat</strong>, <strong>Upacara</strong>, atau <strong>Keagamaan</strong> sesuai jadwal sekolah</li>
                                    <li>Isi jam mulai dan jam selesai dengan tepat</li>
                                    <li>Gunakan fitur <strong>"Salin ke Hari Lain"</strong> agar tidak harus input ulang per hari</li>
                                    <li>Aktifkan/nonaktifkan slot sesuai kebutuhan tanpa menghapus</li>
                                </ul>
                                <p class="text-muted" style="font-size:12px">💡 <em>Contoh: Senin jam 07.00–07.45 (Upacara), 07.45–08.30 (KBM 1), dst.</em></p>
                                <a href="/schedule-timeslot" class="panduan-link-btn">
                                    <i class="bi bi-clock-fill"></i> Buka Pengaturan Slot Waktu
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Langkah 2 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#step2">
                                <span class="panduan-step-num">2</span>
                                Input Beban Mengajar
                            </button>
                        </h2>
                        <div id="step2" class="accordion-collapse collapse" data-bs-parent="#accordionPanduan">
                            <div class="accordion-body panduan-content">
                                <p>Beban mengajar menentukan <strong>berapa jam per minggu</strong> setiap guru mengajar di setiap kelas untuk setiap mata pelajaran.</p>
                                <ul>
                                    <li>Pilih guru, pilih mata pelajaran, pilih kelas (bisa multi-kelas sekaligus)</li>
                                    <li>Isi <strong>Jam/Minggu</strong> — misal 4 jam/minggu</li>
                                    <li>Atur <strong>Split Config</strong> — cara pemisahan blok:
                                        <ul>
                                            <li><code>2,2</code> = dua pertemuan 2 jam</li>
                                            <li><code>3,1</code> = satu pertemuan 3 jam + satu pertemuan 1 jam</li>
                                            <li>Kosong = satu blok utuh sesuai total jam</li>
                                        </ul>
                                    </li>
                                    <li>Total jam semua kelas <strong>tidak boleh melebihi</strong> total slot KBM yang tersedia</li>
                                </ul>
                                <p class="text-muted" style="font-size:12px">💡 <em>Gunakan tombol "Saran Split" untuk rekomendasi otomatis berdasarkan total jam.</em></p>
                                <a href="/schedule-load" class="panduan-link-btn">
                                    <i class="bi bi-person-lines-fill"></i> Buka Beban Mengajar
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Langkah 3 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#step3">
                                <span class="panduan-step-num">3</span>
                                Set Ketersediaan Guru
                            </button>
                        </h2>
                        <div id="step3" class="accordion-collapse collapse" data-bs-parent="#accordionPanduan">
                            <div class="accordion-body panduan-content">
                                <p>Tentukan <strong>hari/jam yang tidak tersedia</strong> untuk setiap guru — misalnya ada rapat rutin, mengajar di sekolah lain, atau kegiatan lain.</p>
                                <ul>
                                    <li>Klik slot <span style="color:#085041;font-weight:600">hijau</span> untuk memblokir (merah = diblokir)</li>
                                    <li>Klik tombol <strong>"Blokir Hari"</strong> untuk memblokir seluruh hari sekaligus</li>
                                    <li>Atur <strong>Maks Jam/Hari</strong> — default 6 jam. Generator akan berusaha tidak melebihi ini</li>
                                    <li>Slot yang diblokir <strong>tidak akan pernah</strong> diisi oleh generator (hard constraint)</li>
                                    <li>Tidak memblokir = guru tersedia di semua slot</li>
                                </ul>
                                <p class="text-muted" style="font-size:12px">⚠️ <em>Jangan blokir terlalu banyak slot jika guru masih punya banyak jam beban — ini akan membuat generator kesulitan.</em></p>
                                <a href="/schedule-availability" class="panduan-link-btn">
                                    <i class="bi bi-slash-circle"></i> Buka Ketersediaan Guru
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Langkah 4 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#step4">
                                <span class="panduan-step-num">4</span>
                                Buat Jadwal Baru
                            </button>
                        </h2>
                        <div id="step4" class="accordion-collapse collapse" data-bs-parent="#accordionPanduan">
                            <div class="accordion-body panduan-content">
                                <p>Buat satu <strong>record jadwal</strong> yang mengikat tahun ajaran, semester, dan hari-hari aktif sekolah.</p>
                                <ul>
                                    <li>Pilih <strong>Tahun Ajaran</strong> yang aktif</li>
                                    <li>Pilih <strong>Semester</strong> (Ganjil/Genap)</li>
                                    <li>Centang hari-hari <strong>aktif pembelajaran</strong> (biasanya Senin–Jumat atau Senin–Sabtu)</li>
                                    <li>Generator hanya akan mengisi slot pada hari-hari yang dicentang</li>
                                    <li>Beri nama deskriptif agar mudah dibedakan</li>
                                </ul>
                                <a href="/schedule-generator/create" class="panduan-link-btn">
                                    <i class="bi bi-plus-circle-fill"></i> Buat Jadwal Baru
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Langkah 5 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#step5">
                                <span class="panduan-step-num">5</span>
                                Jalankan Generate
                            </button>
                        </h2>
                        <div id="step5" class="accordion-collapse collapse" data-bs-parent="#accordionPanduan">
                            <div class="accordion-body panduan-content">
                                <p>Engine generator akan <strong>otomatis menempatkan</strong> semua blok jam pelajaran ke slot yang sesuai berdasarkan constraint yang telah diatur.</p>
                                <ul>
                                    <li>Buka halaman detail jadwal → klik tab <strong>Validasi</strong> dulu</li>
                                    <li>Pastikan status validasi <span style="color:#085041;font-weight:700">✅ Lulus</span> sebelum generate</li>
                                    <li>Klik <strong>Generate Jadwal</strong> — proses berlangsung 5–30 detik tergantung jumlah kelas</li>
                                    <li>Aktifkan opsi <strong>"Pertahankan entry terkunci"</strong> jika ingin mempertahankan jadwal yang sudah dikunci</li>
                                    <li>Engine bekerja dalam 4 fase: Placement → Repair → Swap → Save</li>
                                </ul>
                                <p class="text-muted" style="font-size:12px">💡 <em>Generate bisa diulang berkali-kali — setiap generate menghasilkan kombinasi acak yang berbeda karena ada faktor randomisasi.</em></p>
                            </div>
                        </div>
                    </div>

                    <!-- Langkah 6 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#step6">
                                <span class="panduan-step-num">6</span>
                                Tinjau &amp; Perbaiki
                            </button>
                        </h2>
                        <div id="step6" class="accordion-collapse collapse" data-bs-parent="#accordionPanduan">
                            <div class="accordion-body panduan-content">
                                <p>Setelah generate, periksa hasilnya dan lakukan perbaikan jika diperlukan.</p>
                                <ul>
                                    <li>Tab <strong>Unplaced Lessons</strong> — lihat blok yang gagal beserta alasan dan saran konkret</li>
                                    <li>Klik <strong>Lihat Grid</strong> untuk membuka timetable visual per kelas atau per guru</li>
                                    <li>Di grid, <strong>drag &amp; drop</strong> entry ke slot yang diinginkan untuk edit manual</li>
                                    <li>Setelah hasil memuaskan, <strong>kunci</strong> jadwal guru yang sudah benar (tab Lock Guru)</li>
                                    <li>Generate ulang — jadwal yang terkunci tidak akan diubah, engine hanya mengisi yang belum terjadwal</li>
                                    <li>Ulangi hingga semua jam terjadwal atau sampai hasilnya memuaskan</li>
                                </ul>
                                <p class="text-muted" style="font-size:12px">🔒 <em>Filosofi: generator mengerjakan 90%+ otomatis, 10% sisanya bisa diselesaikan manual dengan bantuan saran otomatis.</em></p>
                            </div>
                        </div>
                    </div>

                    <!-- Langkah 7 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#step7">
                                <span class="panduan-step-num">7</span>
                                Publish &amp; Export
                            </button>
                        </h2>
                        <div id="step7" class="accordion-collapse collapse" data-bs-parent="#accordionPanduan">
                            <div class="accordion-body panduan-content">
                                <p>Setelah jadwal selesai dan disetujui, publish dan distribusikan kepada guru dan siswa.</p>
                                <ul>
                                    <li>Klik <strong>Publish</strong> di halaman detail — jadwal berstatus Published dan terlihat oleh guru</li>
                                    <li>Buka tab <strong>Export</strong> untuk download file:
                                        <ul>
                                            <li><strong>Excel:</strong> Master Timetable / Per Kelas / Per Guru</li>
                                            <li><strong>PDF:</strong> Format landscape A4, cocok untuk dicetak dan ditempel</li>
                                        </ul>
                                    </li>
                                    <li>Jadwal yang sudah di-publish tetap bisa digenerate ulang jika diperlukan perubahan</li>
                                </ul>
                                <p class="text-muted" style="font-size:12px">✅ <em>Selamat! Jadwal sekolah Anda siap digunakan.</em></p>
                            </div>
                        </div>
                    </div>

                </div><!-- /accordion -->

                <!-- Tips & Trik -->
                <div class="p-4" style="background:#F0FDF4;border-top:1px solid #e5e7eb">
                    <div class="fw-bold mb-2" style="font-size:13px;color:#065F46">
                        <i class="bi bi-lightbulb-fill me-2 text-success"></i>Tips &amp; Trik
                    </div>
                    <div class="row g-2" style="font-size:12px;color:#374151">
                        <div class="col-md-6">
                            <ul class="mb-0 ps-3">
                                <li>Generate beberapa kali untuk hasil terbaik — ada faktor acak yang menghasilkan kombinasi berbeda</li>
                                <li>Semakin sedikit blokir ketersediaan guru, semakin tinggi kemungkinan 100%</li>
                                <li>Split config 2,2 lebih mudah di-schedule daripada 3,1</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="mb-0 ps-3">
                                <li>Kunci jadwal guru yang sudah benar sebelum generate ulang</li>
                                <li>Cek tab Validasi sebelum generate — error kecil bisa menyebabkan banyak blok gagal</li>
                                <li>Jika utilisasi slot > 95%, pertimbangkan menambah 1-2 slot KBM</li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div><!-- /modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
                    <i class="bi bi-check-lg me-1"></i>Mengerti, Mulai!
                </button>
            </div>
        </div>
    </div>
</div>

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