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

<div class="row justify-content-center">
    <div class="col-12 col-xl-10">
        
        <!-- Filter Header -->
        <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px;">
            <div class="card-body p-4 d-flex flex-wrap align-items-center justify-content-between gap-3 bg-light bg-gradient" style="border-radius: 12px;">
                <div>
                    <h5 class="fw-bold mb-1 text-dark">Jadwal Pelajaran Kelas</h5>
                    <?php if ($classroomInfo): ?>
                        <span class="badge bg-primary px-3 py-2">Kelas: <?= esc($classroomInfo['classroom_name']) ?></span>
                        <span class="badge bg-secondary px-3 py-2">TA: <?= esc($classroomInfo['year_name']) ?> — Semester <?= esc($classroomInfo['semester']) ?></span>
                    <?php else: ?>
                        <span class="badge bg-danger px-3 py-2">Belum masuk kelas</span>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Schedule Container -->
        <div class="card border-0 shadow-sm" style="border-radius: 12px;">
            <div class="card-body p-3 p-md-4">
                <?php if (empty($scheduleDays) || empty($schedulePeriods)): ?>
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-calendar-x fs-1 mb-2"></i>
                        <p class="mb-0">Jadwal belum digenerate atau dipublikasikan oleh kurikulum/admin.</p>
                    </div>
                <?php else: ?>
                    
                    <!-- 1. DESKTOP VIEW (Shown on md screens and above) -->
                    <div class="d-none d-md-block">
                        <div class="table-responsive">
                            <table class="table table-bordered align-middle text-center mb-0" style="min-width: 800px;">
                                <thead class="table-light">
                                    <tr>
                                        <th width="12%" class="py-3">Jam Ke</th>
                                        <?php foreach ($scheduleDays as $day): ?>
                                        <th class="py-3"><?= esc($day['day_name']) ?></th>
                                        <?php endforeach; ?>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach ($schedulePeriods as $p): ?>
                                    <tr>
                                        <td class="py-3">
                                            <div class="fw-bold text-dark">Jam <?= esc($p['period_number']) ?></div>
                                        </td>
                                        <?php foreach ($scheduleDays as $day): ?>
                                        <?php 
                                        $dNum = $day['day_number'];
                                        $pNum = $p['period_number'];
                                        $cell = $scheduleData[$dNum][$pNum] ?? null;
                                        $isKbmSlot = !isset($customHours[$dNum]) || $pNum <= $customHours[$dNum];
                                        ?>
                                        <?php if (!$isKbmSlot) : ?>
                                            <td class="py-3 bg-light text-muted" style="opacity: 0.5;">
                                                <span class="text-muted small" style="font-size: 0.65rem; opacity: 0.4;">Non-KBM</span>
                                            </td>
                                        <?php else : ?>
                                            <td class="py-3" style="background: <?= $cell ? '#f8fafd' : '#fff' ?>">
                                                <?php if ($cell): ?>
                                                    <div class="fw-semibold text-primary mb-1 small"><?= esc($cell['subject_name']) ?></div>
                                                    <div class="text-muted" style="font-size: 0.72rem; line-height: 1.2;">
                                                        <i class="bi bi-person me-1"></i><?= esc($cell['teacher_name']) ?>
                                                    </div>
                                                <?php else: ?>
                                                    <span class="text-muted small">—</span>
                                                <?php endif; ?>
                                            </td>
                                        <?php endif; ?>
                                        <?php endforeach; ?>
                                    </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 2. MOBILE VIEW (Shown on screens smaller than md) -->
                    <div class="d-md-none">
                        <div class="accordion animate-fade-in" id="mobileScheduleAccordion">
                            <?php foreach ($scheduleDays as $index => $day): ?>
                            <div class="accordion-item border-0 mb-3 shadow-sm" style="border-radius: 10px; overflow: hidden;">
                                <h2 class="accordion-header" id="headingDay<?= $day['day_number'] ?>">
                                    <button class="accordion-button <?= $index === 0 ? '' : 'collapsed' ?> bg-primary bg-opacity-10 text-primary fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDay<?= $day['day_number'] ?>" aria-expanded="<?= $index === 0 ? 'true' : 'false' ?>">
                                        <i class="bi bi-calendar3 me-2"></i><?= esc($day['day_name']) ?>
                                    </button>
                                </h2>
                                <div id="collapseDay<?= $day['day_number'] ?>" class="accordion-collapse collapse <?= $index === 0 ? 'show' : '' ?>" aria-labelledby="headingDay<?= $day['day_number'] ?>" data-bs-parent="#mobileScheduleAccordion">
                                    <div class="accordion-body p-2 bg-white">
                                        <?php 
                                        $hasClasses = false;
                                        foreach ($schedulePeriods as $p): 
                                            $dNum = $day['day_number'];
                                            $pNum = $p['period_number'];
                                            $cell = $scheduleData[$dNum][$pNum] ?? null;
                                            if ($cell):
                                                $hasClasses = true;
                                        ?>
                                        <div class="d-flex align-items-center justify-content-between p-3 border-bottom bg-light bg-gradient rounded mb-2">
                                            <div>
                                                <span class="badge bg-primary mb-1">Jam ke-<?= esc($p['period_number']) ?></span>
                                                <h6 class="fw-bold text-dark mb-1 small"><?= esc($cell['subject_name']) ?></h6>
                                                <div class="text-muted" style="font-size: 0.72rem;">
                                                    <i class="bi bi-person-fill text-secondary me-1"></i><?= esc($cell['teacher_name']) ?>
                                                </div>
                                            </div>
                                        </div>
                                        <?php 
                                            endif;
                                        endforeach; 
                                        
                                        if (!$hasClasses):
                                        ?>
                                        <div class="text-center py-4 text-muted small">
                                            <i class="bi bi-info-circle me-1"></i>Tidak ada jadwal pelajaran hari ini.
                                        </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>

                <?php endif; ?>
            </div>
        </div>

    </div>
</div>

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