<div class="space-y-6">
    <h1 class="text-xl font-semibold">Schedule Builder</h1>
    <p class="text-gray-600 dark:text-gray-400">Pilih kelas lalu buka builder untuk mengatur jadwal mingguan.</p>

    <div id="index-loading" class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-12 text-center text-gray-500 dark:text-gray-400">
        Loading kelas…
    </div>
    <div id="index-error" class="hidden rounded-2xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-6 text-red-700 dark:text-red-300"></div>
    <div id="index-content" class="hidden rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm overflow-hidden">
        <div class="p-6">
            <label for="class-select" class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Kelas</label>
            <select id="class-select" class="w-full max-w-xs rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-primary">
                <option value="">— Pilih kelas —</option>
            </select>
            <div class="mt-4">
                <a id="btn-open-builder" href="#" class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-white hover:opacity-90 focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:pointer-events-none">
                    <i class="bx bx-grid-alt text-lg"></i>
                    <span>Open Builder</span>
                </a>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    var baseUrl = '<?= base_url() ?>'.replace(/\/$/, '');
    var apiUrl = baseUrl + '/api/academic/classes';
    var builderBaseUrl = baseUrl + '/dashboard/academic/schedule-builder/';

    var loading = document.getElementById('index-loading');
    var errorEl = document.getElementById('index-error');
    var content = document.getElementById('index-content');
    var select = document.getElementById('class-select');
    var btnOpen = document.getElementById('btn-open-builder');

    function showLoading() {
        loading.classList.remove('hidden');
        errorEl.classList.add('hidden');
        content.classList.add('hidden');
    }
    function showError(msg) {
        loading.classList.add('hidden');
        content.classList.add('hidden');
        errorEl.classList.remove('hidden');
        errorEl.textContent = msg;
    }
    function showContent() {
        loading.classList.add('hidden');
        errorEl.classList.add('hidden');
        content.classList.remove('hidden');
    }

    function updateButton() {
        var val = select.value;
        if (val) {
            btnOpen.href = builderBaseUrl + val;
            btnOpen.classList.remove('disabled', 'opacity-50', 'pointer-events-none');
        } else {
            btnOpen.href = '#';
            btnOpen.classList.add('disabled', 'opacity-50', 'pointer-events-none');
        }
    }

    fetch(apiUrl, { method: 'GET', credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(function(res) { return res.json().then(function(j) { return { ok: res.ok, data: j }; }); })
        .then(function(r) {
            if (!r.ok) {
                showError(r.data && r.data.message ? r.data.message : 'Gagal memuat daftar kelas');
                return;
            }
            var list = r.data && r.data.data ? r.data.data : r.data;
            if (!Array.isArray(list)) {
                showError('Invalid response');
                return;
            }
            list.forEach(function(c) {
                var opt = document.createElement('option');
                var label = c.full_label;
                if (!label) {
                    var parts = [];
                    if (c.grade) parts.push(c.grade);
                    if (c.major) parts.push(c.major);
                    if (c.name)  parts.push(c.name);
                    label = parts.join(' ').trim() || ('Kelas ' + c.id);
                }
                opt.value = c.id;
                opt.textContent = label;
                select.appendChild(opt);
            });
            showContent();
            select.addEventListener('change', updateButton);
            updateButton();
        })
        .catch(function() {
            showError('Network error');
        });
})();
</script>
