<?php $__env->startSection('content'); ?>
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet' />
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
    /* --- 1. Global Dark Mode & Modern Overrides --- */
    .modern-card {
        background-color: var(--bg-card, #1e293b);
        border: 1px solid var(--border-color, #334155);
        border-radius: 20px;
    }
    
    [data-theme="dark"] .card, [data-theme="dark"] .modal-content { background-color: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 24px; }
    [data-theme="dark"] .card-header, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--border-color); }
    [data-theme="dark"] .modal-header { border-top-left-radius: 24px; border-top-right-radius: 24px; }
    
    [data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
        background-color: var(--hover-bg); border-color: var(--border-color); color: var(--text-main); border-radius: 12px; line-height: 1.4;
    }
    [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25); }
    [data-theme="dark"] .form-control::placeholder { color: var(--text-muted); opacity: 0.7; }
    [data-theme="dark"] .text-muted { color: #cbd5e1 !important; }
    [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] label { color: var(--text-main); }
    [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
    
    /* Table Styling Modal */
    [data-theme="dark"] .table { color: var(--text-main); border-color: var(--border-color); }
    [data-theme="dark"] .table-light th, [data-theme="dark"] .table-dark th { background-color: rgba(255,255,255,0.03) !important; color: var(--text-main); border-color: var(--border-color) !important; }
    [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.02); color: var(--text-main); }
    [data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); color: var(--text-main); }
    
    /* Nav Tabs Modal */
    [data-theme="dark"] .nav-tabs { border-bottom: 2px solid var(--border-color); }
    [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-muted); border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
    [data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--text-main); border-color: transparent; }
    [data-theme="dark"] .nav-tabs .nav-link.active { color: var(--primary-color) !important; background: transparent; border-color: var(--primary-color); }

    /* Modal Popover Z-Index Fix */
    .modal { z-index: 99999 !important; }
    .modal-backdrop { z-index: 99998 !important; }
    .fc-popover { z-index: 999 !important; background-color: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important; }
    .fc-popover-header { background-color: rgba(255,255,255,0.05) !important; color: var(--text-main) !important; padding: 10px 15px !important; }
    .fc-popover-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; }

    /* --- 2. Kalender Dark Mode / FullCalendar Overrides --- */
    #calendar {
        background: var(--bg-card, #ffffff);
        padding: 24px;
        border-radius: 20px;
        border: 1px solid var(--border-color, #e2e8f0);
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
    [data-theme="dark"] #calendar { background: var(--bg-card, #1e293b); border-color: var(--border-color, #334155); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    
    .fc-toolbar-title { font-size: 1.5rem !important; font-weight: 800 !important; color: var(--text-main) !important; }
    .fc-button-primary { background-color: var(--bg-card) !important; color: var(--text-main) !important; border: 1px solid var(--border-color) !important; border-radius: 50rem !important; font-weight: 700 !important; text-transform: capitalize; padding: 8px 20px !important; transition: all 0.3s ease; }
    .fc-button-primary:hover, .fc-button-primary.fc-button-active { background-color: var(--primary-color) !important; color: #fff !important; border-color: var(--primary-color) !important; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); }
    
    .fc-col-header-cell { background-color: rgba(0,0,0,0.02) !important; padding: 12px 0 !important; color: var(--text-muted); text-transform: uppercase; font-size: 0.8rem; font-weight: 800; border-color: var(--border-color) !important; }
    [data-theme="dark"] .fc-col-header-cell { background-color: rgba(255,255,255,0.02) !important; color: var(--text-muted); }
    .fc-scrollgrid { border: 1px solid var(--border-color) !important; border-radius: 16px; overflow: hidden; }
    .fc-theme-standard td, .fc-theme-standard th { border-color: var(--border-color) !important; }
    
    .fc-day-today { background-color: rgba(59, 130, 246, 0.05) !important; }
    [data-theme="dark"] .fc-day-today { background-color: rgba(59, 130, 246, 0.1) !important; }
    .fc-daygrid-day { transition: background 0.2s; }
    .fc-daygrid-day:hover { background-color: rgba(0,0,0,0.01); }
    [data-theme="dark"] .fc-daygrid-day:hover { background-color: rgba(255,255,255,0.02); }
    [data-theme="dark"] .fc-daygrid-day-number { color: var(--text-main); }
    
    /* Event (Kotak Jadwal) */
    .fc-event { border: none !important; border-radius: 8px !important; box-shadow: 0 3px 10px rgba(0,0,0,0.15); transition: all 0.3s ease; cursor: pointer; padding: 2px; margin-bottom: 5px !important; }
    .fc-event:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.3); filter: brightness(1.1); }
    
    .event-card { padding: 5px 8px; color: white; }
    .event-title { font-weight: 700; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
    .event-meta { font-size: 0.7rem; opacity: 0.9; display: flex; align-items: center; gap: 4px; }

    /* Row Off Week */
    .row-off-week { background-color: rgba(239, 68, 68, 0.05) !important; color: #ef4444; font-style: italic; }
    [data-theme="dark"] .row-off-week { background-color: rgba(239, 68, 68, 0.1) !important; }
    .btn-pill { border-radius: 50rem !important; }
    
    /* Helper Kustom Tambahan */
    .bg-inner-card { background-color: var(--hover-bg); }
</style>

<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold"><i class="bi bi-calendar3 me-2 text-primary"></i>Jadwal Mengajar</h2>
            <p class="text-muted mb-0">Kalender akademik dan jadwal pelajaran.</p>
        </div>
        
        <div class="d-flex gap-2">
            <a href="<?php echo e(route('jadwal.print')); ?>" target="_blank" class="btn btn-outline-secondary btn-pill px-4 shadow-sm fw-bold d-flex align-items-center" >
                <i class="bi bi-printer me-2"></i> Cetak Jadwal
            </a>

            <?php if(in_array(Auth::user()->role, ['super_admin', 'admin_mapel'])): ?>
                <button type="button" class="btn btn-warning px-4 fw-bold shadow-sm btn-pill d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#modalPekanTidakEfektif">
                    <i class="bi bi-calendar-x text-dark me-2"></i> <span class="text-dark">Libur</span>
                </button>
                <button class="btn btn-outline-primary px-4 fw-bold shadow-sm btn-pill d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#modalListJadwal">
                    <i class="bi bi-list-ul me-2"></i> Daftar Jadwal
                </button>
                <button class="btn btn-primary px-4 fw-bold shadow-sm btn-pill d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#modalJadwal">
                    <i class="bi bi-plus-lg me-2"></i> Buat Jadwal
                </button>
            <?php endif; ?>
        </div>
    </div>

    <?php if(session('success')): ?>
        <div class="alert alert-success alert-dismissible fade show rounded-4 bg-success bg-opacity-10 border-0 border-start border-success border-4 text-success shadow-sm mb-4">
            <i class="bi bi-check-circle-fill me-2"></i> <?php echo e(session('success')); ?>

            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>

    <div class="calendar-card">
        <div id='calendar'></div>
    </div>
</div>


<?php if(in_array(Auth::user()->role, ['super_admin', 'admin_mapel'])): ?>
<div class="modal fade" id="modalListJadwal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content shadow-lg">
            <div class="modal-header border-0 pb-0 bg-inner-card">
                <ul class="nav nav-tabs w-100" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active fw-bold px-4 py-3" id="jadwal-tab" data-bs-toggle="tab" data-bs-target="#tab-jadwal" type="button">Daftar Jadwal</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link fw-bold text-danger px-4 py-3" id="off-tab" data-bs-toggle="tab" data-bs-target="#tab-off" type="button">Pekan Tidak Efektif (Libur)</button>
                    </li>
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div class="tab-content" id="myTabContent">
                    
                    <div class="tab-pane fade show active" id="tab-jadwal">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0 align-middle">
                                <thead class="table-light sticky-top">
                                    <tr>
                                        <th class="px-4 py-3">Hari</th>
                                        <th>Kelas</th>
                                        <th>Guru</th>
                                        <th>Mapel</th>
                                        <th>Tipe</th>
                                        <th class="text-center">Jml Pertemuan</th>
                                        <th class="text-end px-4">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php $__currentLoopData = $groupedSchedules; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $group): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <?php $first = $group->first(); ?>
                                        <tr>
                                            <td class="px-4 fw-bold text-primary"><?php echo e(\Carbon\Carbon::parse($first->tanggal)->locale('id')->isoFormat('dddd')); ?></td>
                                            <td class="fw-bold"><?php echo e($first->class); ?></td>
                                            <td><?php echo e($first->guru->name ?? '-'); ?></td>
                                            <td><?php echo e($first->subject->name ?? '-'); ?></td>
                                            <td>
                                                <span class="badge <?php echo e($first->tipe_jadwal == 'blok' ? 'bg-warning text-dark' : 'bg-info bg-opacity-25 text-info border border-info'); ?> rounded-pill px-3">
                                                    <?php echo e(ucfirst($first->tipe_jadwal)); ?>

                                                </span>
                                            </td>
                                            <td class="text-center"><span class="badge bg-secondary bg-opacity-25 text-muted border border-secondary rounded-pill px-3 py-1"><?php echo e($group->count()); ?>x</span></td>
                                            <td class="text-end px-4">
                                                <button type="button" class="btn btn-sm btn-outline-info rounded-pill px-4 fw-bold shadow-sm" onclick="showDetailGroup('<?php echo e($key); ?>')">
                                                    <i class="bi bi-eye me-1"></i> Rincian
                                                </button>

                                                <textarea id="data-group-<?php echo e($key); ?>" class="d-none">
                                                    <?php $__currentLoopData = $group; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <tr>
                                                        <td class="ps-4 text-muted"><?php echo e($loop->iteration); ?></td>
                                                        <td class="fw-bold text-primary"><?php echo e(\Carbon\Carbon::parse($item->tanggal)->format('d/m/Y')); ?></td>
                                                        <td><span class="badge bg-secondary bg-opacity-25 text-muted border border-secondary rounded-pill px-3 py-1">Pekan ke-<?php echo e($item->pekan_ke); ?></span></td>
                                                        <td class="text-end pe-4">
                                                            <form action="<?php echo e(route('jadwal.destroy', $item->id)); ?>" method="POST" onsubmit="return confirm('Hapus pertemuan tanggal ini saja?');">
                                                                <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                                                <button class="btn btn-sm btn-outline-danger rounded-pill px-3 py-1 fw-bold" style="font-size: 0.75rem;"><i class="bi bi-trash me-1"></i> Hapus</button>
                                                            </form>
                                                        </td>
                                                    </tr>
                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                </textarea>
                                            </td>
                                        </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    
                    <div class="tab-pane fade" id="tab-off">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0 align-middle">
                                <thead class="table-light sticky-top">
                                    <tr>
                                        <th class="px-4 py-3">Pekan Mulai (Minggu)</th>
                                        <th>Keterangan</th>
                                        <th class="text-end px-4">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php $__empty_1 = true; $__currentLoopData = $pekanTidakEfektif; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pekan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                    <tr>
                                        <td class="px-4 fw-bold text-danger"><?php echo e($pekan->start_date->format('d F Y')); ?></td>
                                        <td><?php echo e($pekan->notes ?? '-'); ?></td>
                                        <td class="text-end px-4">
                                            <form action="<?php echo e(route('jadwal.destroyPekanTidakEfektif', $pekan->id)); ?>" method="POST" onsubmit="return confirm('Menghapus pekan ini akan MENARIK KEMBALI jadwal yang sudah digeser. Lanjutkan?');">
                                                <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                                <button type="submit" class="btn btn-outline-danger btn-sm rounded-pill px-4 fw-bold shadow-sm">
                                                    <i class="bi bi-arrow-left-right me-1"></i> Hapus & Tarik Jadwal
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                    <tr><td colspan="3" class="text-center py-5 text-muted border-0"><i class="bi bi-calendar-check fs-1 d-block mb-3 opacity-50"></i> Belum ada pekan libur.</td></tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalRincianGroup" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content shadow-lg rounded-4">
            <div class="modal-header bg-inner-card border-0 rounded-top-4 py-3">
                <h6 class="modal-title fw-bold"><i class="bi bi-info-circle me-2"></i> Rincian Pertemuan</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div class="table-responsive" style="max-height: 400px;">
                    <table class="table table-hover mb-0">
                        <thead class="sticky-top table-light">
                            <tr>
                                <th class="ps-4 py-3" width="60">No</th>
                                <th class="py-3">Tanggal</th>
                                <th class="py-3">Keterangan</th>
                                <th class="text-end pe-4 py-3">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="rincianBody">
                            
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer border-0 py-3 bg-inner-card">
                <button class="btn btn-outline-secondary btn-sm px-4 rounded-pill fw-bold" data-bs-target="#modalListJadwal" data-bs-toggle="modal">
                    <i class="bi bi-arrow-left me-1"></i> Kembali
                </button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="modalJadwal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content shadow-lg rounded-4">
            <form action="<?php echo e(route('jadwal.store')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <div class="modal-header bg-primary border-0 rounded-top-4 py-3 text-white">
                    <h5 class="modal-title fw-bold"><i class="bi bi-calendar-plus me-2"></i> Jadwal Pelajaran Baru</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="row mb-3">
                        <div class="col-md-6 mb-3">
                            <label class="fw-bold mb-2 small text-uppercase text-muted">Kelas</label>
                            <select name="class" class="form-select py-2 rounded-pill" required>
                                <option value="">-- Pilih Kelas --</option>
                                <?php $__currentLoopData = $classes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cls): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($cls->nama_kelas); ?>"><?php echo e($cls->nama_kelas); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="fw-bold mb-2 small text-uppercase text-muted">Guru Pengajar</label>
                            <select name="teacher_id" id="teacherSelect" class="form-select py-2 rounded-pill" required onchange="loadTeacherSubjects()">
                                <option value="">-- Pilih Guru --</option>
                                <?php $__currentLoopData = $teachers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $teacher): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($teacher->id); ?>"><?php echo e($teacher->name); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="fw-bold mb-2 small text-uppercase text-muted">Mata Pelajaran</label>
                        <select name="subject_id" id="subjectSelect" class="form-select py-2 rounded-pill" required disabled>
                            <option value="">-- Pilih Guru Terlebih Dahulu --</option>
                        </select>
                    </div>

                    <div class="p-4 rounded-4 border mb-3 bg-inner-card">
                        <label class="fw-bold mb-3 small text-uppercase text-primary"><i class="bi bi-gear me-1"></i> Pengaturan Waktu</label>
                        
                        <div class="mb-4">
                            <label class="fw-bold mb-2 small text-muted">Tipe Jadwal</label>
                            <select name="type" id="scheduleType" class="form-select mb-3 py-2 rounded-pill" onchange="toggleScheduleType()">
                                <option value="regular">Jadwal Reguler (Mingguan)</option>
                                <option value="block">Jadwal Blok (Permintaan Industri/TEFA)</option>
                            </select>
                        </div>

                        
                        <div id="formRegular">
                            <div class="mb-3">
                                <label class="fw-bold mb-2 small text-muted">Mulai Semester (Minggu Awal)</label>
                                <input type="date" name="start_date_regular" class="form-control py-2 rounded-pill">
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="fw-bold mb-2 small text-muted">Hari</label>
                                    <select name="day" class="form-select py-2 rounded-pill">
                                        <option value="Senin">Senin</option>
                                        <option value="Selasa">Selasa</option>
                                        <option value="Rabu">Rabu</option>
                                        <option value="Kamis">Kamis</option>
                                        <option value="Jumat">Jumat</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="fw-bold mb-2 small text-muted">Durasi (Minggu)</label>
                                    <input type="number" name="duration_weeks" class="form-control py-2 rounded-pill" value="16">
                                </div>
                            </div>
                        </div>

                        
                        <div id="formBlock" style="display: none;">
                            <div class="mb-3">
                                <label class="fw-bold mb-2 small text-muted">Mulai Semester (Minggu Pertama)</label>
                                <input type="date" name="start_date_block" id="startDateBlock" class="form-control py-2 rounded-pill" onchange="generateWeeks()">
                            </div>
                            <div class="table-responsive rounded-4 border mb-4 bg-card" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-hover mb-0">
                                    <thead class="table-light sticky-top">
                                        <tr>
                                            <th class="text-center px-3" width="50">Pilih</th>
                                            <th>Pekan</th>
                                            <th>Tanggal</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableWeeks">
                                        <tr><td colspan="4" class="text-center text-muted py-4 border-0">Pilih tanggal awal di atas terlebih dahulu.</td></tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="p-4 rounded-4 border bg-card">
                                <label class="fw-bold mb-3 small text-uppercase text-muted">Pilih Hari Tatap Muka</label>
                                <div class="d-flex flex-wrap gap-3">
                                    <?php $__currentLoopData = ['Senin'=>1, 'Selasa'=>2, 'Rabu'=>3, 'Kamis'=>4, 'Jumat'=>5, 'Sabtu'=>6]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dayName => $val): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" style="cursor:pointer; width:1.2rem; height:1.2rem;" name="days[]" value="<?php echo e($val); ?>" id="chk_<?php echo e($val); ?>">
                                        <label class="form-check-label ps-1 cursor-pointer" for="chk_<?php echo e($val); ?>"><?php echo e($dayName); ?></label>
                                    </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer pt-3 border-0 pb-4 pe-4 bg-inner-card rounded-bottom-4">
                    <button type="button" class="btn btn-outline-secondary px-4 rounded-pill" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary px-5 rounded-pill fw-bold shadow-sm">Simpan Jadwal</button>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="modal fade" id="modalPekanTidakEfektif" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-warning shadow-lg rounded-4">
            <form action="<?php echo e(route('jadwal.storePekanTidakEfektif')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <div class="modal-header bg-warning border-0 rounded-top-4 py-3">
                    <h5 class="modal-title fw-bold text-dark">
                        <i class="bi bi-calendar-range me-2"></i> Tambah Libur / Non-Efektif
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="alert alert-warning border-0 rounded-4 bg-warning bg-opacity-10 text-warning d-flex align-items-center mb-4" role="alert">
                        <i class="bi bi-info-circle-fill me-3 fs-3"></i>
                        <div class="small lh-sm">
                            Fitur ini menyisipkan <strong>1 Minggu Libur</strong>. 
                            Jadwal reguler yang bertabrakan akan otomatis digeser ke minggu berikutnya.
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold small text-muted text-uppercase">Pilih Salah Satu Tanggal Libur</label>
                        <input type="date" name="start_date_off" class="form-control py-2 rounded-pill" required id="datePickerLibur">
                        <div class="form-text mt-2" id="previewLibur">
                            <i class="bi bi-arrow-return-right me-1"></i> Sistem otomatis memblokir dari Minggu - Sabtu di pekan tersebut.
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold small text-muted text-uppercase">Keterangan Libur</label>
                        <input type="text" name="notes" class="form-control py-2 rounded-pill" placeholder="Contoh: Ujian Tengah Semester / Class Meeting" required>
                    </div>
                </div>
                <div class="modal-footer border-0 py-3 bg-inner-card rounded-bottom-4">
                    <button type="button" class="btn btn-outline-secondary btn-pill px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning btn-pill px-5 fw-bold text-dark shadow-sm">
                        Simpan & Geser Jadwal
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<?php endif; ?> 



<div class="modal fade" id="eventsDetailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-secondary shadow-lg rounded-4">
            <div class="modal-header bg-primary border-0 text-white rounded-top-4 py-3">
                <h5 class="modal-title fw-bold" id="viewModalDateTitle">Detail Jadwal</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            
            <div class="modal-body text-center p-4">
                <div class="mb-4 opacity-75">
                     <i class="bi bi-book-half text-primary" style="font-size: 3.5rem;"></i>
                </div>
                <h4 class="fw-bold mb-2 text-white" id="viewMapel">-</h4>
                <span class="badge bg-primary bg-opacity-10 text-primary border border-primary-subtle rounded-pill px-3 py-2 mb-4 fs-6" id="viewKode">-</span>

                <div class="text-start p-4 rounded-4 border bg-inner-card">
                    <table class="table table-borderless table-sm mb-0">
                        <tr>
                            <td width="40%" class="text-muted"><i class="bi bi-person-badge me-2"></i> Guru</td>
                            <td width="5%" class="text-muted">:</td>
                            <td class="fw-bold" id="viewGuru">-</td>
                        </tr>
                        <tr>
                            <td class="text-muted"><i class="bi bi-people me-2"></i> Kelas</td>
                            <td class="text-muted">:</td>
                            <td class="fw-bold" id="viewKelas">-</td>
                        </tr>
                        <tr>
                            <td class="text-muted"><i class="bi bi-tag me-2"></i> Tipe</td>
                            <td class="text-muted">:</td>
                            <td class="fw-bold text-info" id="viewTipe">-</td>
                        </tr>
                         <tr>
                            <td class="text-muted"><i class="bi bi-calendar-week me-2"></i> Pekan Ke</td>
                            <td class="text-muted">:</td>
                            <td class="fw-bold text-warning" id="viewPekan">-</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer border-0 pb-4 justify-content-center bg-inner-card rounded-bottom-4">
                <button type="button" class="btn btn-outline-secondary btn-pill px-5 fw-bold" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales/id.js'></script>
<script>
    <?php if(in_array(Auth::user()->role, ['super_admin', 'admin_mapel'])): ?>
    // --- PENYESUAIAN HARI MINGGU SEBAGAI AWAL PEKAN ---
    document.getElementById('datePickerLibur').addEventListener('change', function() {
        let date = new Date(this.value);
        let day = date.getDay();
        let diff = date.getDate() - day; 
        let sunday = new Date(date.setDate(diff));
        
        let options = { year: 'numeric', month: 'long', day: 'numeric' };
        document.getElementById('previewLibur').innerHTML = 
            "<span class='text-warning fw-bold d-block mt-2'><i class='bi bi-check-circle me-1'></i> Efektif Libur Mulai: Minggu, " + sunday.toLocaleDateString('id-ID', options) + "</span>";
    });

    const offWeeksDates = <?php echo json_encode($pekanTidakEfektif->pluck('start_date')->map(fn($d) => $d->format('Y-m-d')), 15, 512) ?>;
    const offWeeks = <?php echo json_encode($pekanTidakEfektif->keyBy(fn($item) => $item->start_date->format('Y-m-d')), 15, 512) ?>;

    function generateWeeks() {
        var startDateVal = document.getElementById('startDateBlock').value;
        if(!startDateVal) return;
        
        var startDate = new Date(startDateVal);
        var tableBody = document.getElementById('tableWeeks');
        tableBody.innerHTML = ""; 

        let effectiveWeekCounter = 1;

        for(var i = 1; i <= 20; i++) {
            var currentStart = new Date(startDate);
            currentStart.setDate(startDate.getDate() + ((i-1)*7));
            
            let y = currentStart.getFullYear();
            let m = String(currentStart.getMonth() + 1).padStart(2, '0');
            let d = String(currentStart.getDate()).padStart(2, '0');
            let dateString = `${y}-${m}-${d}`;

            const offData = offWeeks[dateString];
            const isOffWeek = !!offData;

            let pekanLabel = "";
            let statusLabel = "";

            if (isOffWeek) {
                pekanLabel = `<span class="text-danger">Libur</span>`;
                statusLabel = `<span class="badge bg-danger bg-opacity-10 border border-danger-subtle text-danger text-wrap rounded-pill px-3" style="max-width: 150px;">
                                <i class="bi bi-x-circle me-1"></i> ${offData.notes || 'LIBUR'}
                               </span>`;
            } else {
                pekanLabel = `<span class="text-primary fw-bold">Pekan ${effectiveWeekCounter}</span>`;
                statusLabel = '<span class="badge bg-success bg-opacity-10 text-success border border-success-subtle rounded-pill px-3">Efektif</span>';
                effectiveWeekCounter++;
            }

            var startStr = currentStart.toLocaleDateString('id-ID', {day: 'numeric', month: 'short'});
            var currentEnd = new Date(currentStart);
            currentEnd.setDate(currentStart.getDate() + 6);
            var endStr = currentEnd.toLocaleDateString('id-ID', {day: 'numeric', month: 'short', year: 'numeric'});
            
            var row = `<tr class="${isOffWeek ? 'row-off-week' : ''}">
                <td class="text-center align-middle">
                    <input type="checkbox" name="selected_weeks[]" value="${i}" style="cursor:pointer; width:1.2rem; height:1.2rem;" class="form-check-input mt-1" ${isOffWeek ? 'disabled' : ''}>
                </td>
                <td class="align-middle">${pekanLabel}</td>
                <td class="small align-middle">${startStr} - ${endStr}</td>
                <td class="align-middle">${statusLabel}</td>
            </tr>`;
            tableBody.innerHTML += row;
        }
    }

    function showDetailGroup(key) {
        const textarea = document.getElementById('data-group-' + key);
        if (textarea) {
            document.getElementById('rincianBody').innerHTML = textarea.value;
            
            document.querySelectorAll('.modal').forEach(function(modalNode) {
                const modal = bootstrap.Modal.getInstance(modalNode);
                if (modal) modal.hide();
            });

            setTimeout(function() {
                const rincianModal = new bootstrap.Modal(document.getElementById('modalRincianGroup'));
                rincianModal.show();
            }, 300);
        } else {
            alert("Data rincian tidak ditemukan!");
        }
    }

    function loadTeacherSubjects() {
        var teacherId = document.getElementById('teacherSelect').value;
        var subjectSelect = document.getElementById('subjectSelect');
        
        subjectSelect.innerHTML = '<option value="">Sedang memuat...</option>';
        subjectSelect.disabled = true;

        if(!teacherId) {
            subjectSelect.innerHTML = '<option value="">-- Pilih Guru Terlebih Dahulu --</option>';
            return;
        }

        var url = "<?php echo e(route('jadwal.getTeacherSubjects', ':id')); ?>".replace(':id', teacherId);

        fetch(url)
            .then(response => response.json())
            .then(data => {
                subjectSelect.innerHTML = '<option value="">-- Pilih Mapel --</option>';
                if(data.length === 0) {
                    subjectSelect.innerHTML += '<option value="" disabled>Guru ini belum memiliki mapel</option>';
                } else {
                    data.forEach(subject => {
                        var option = document.createElement('option');
                        option.value = subject.id;
                        option.text = subject.nama_mapel || subject.name || "Mapel Tanpa Nama";
                        subjectSelect.appendChild(option);
                    });
                    subjectSelect.disabled = false;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                subjectSelect.innerHTML = '<option value="">Gagal memuat data</option>';
            });
    }

    function toggleScheduleType() {
        var type = document.getElementById('scheduleType').value;
        if(type === 'regular') {
            document.getElementById('formRegular').style.display = 'block';
            document.getElementById('formBlock').style.display = 'none';
        } else {
            document.getElementById('formRegular').style.display = 'none';
            document.getElementById('formBlock').style.display = 'block';
        }
    }
    <?php endif; ?>

    // Fitur Kalender (Semua Role)
    var detailModalInstance = null;
    document.addEventListener('DOMContentLoaded', function() {
        // PERBAIKAN: Check element exists then init safely
        var modalEl = document.getElementById('eventsDetailModal');
        if(modalEl) {
            detailModalInstance = new bootstrap.Modal(modalEl);
        }

        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            themeSystem: 'bootstrap5',
            locale: 'id',
            firstDay: 0, // 0 = MINGGU SEBAGAI AWAL PEKAN
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,listWeek'
            },
            dayMaxEvents: 4, 
            height: 'auto',  
            contentHeight: 'auto',
            events: "<?php echo e(route('jadwal.getEvents')); ?>",

            eventContent: function(arg) {
                let props = arg.event.extendedProps;
                let mapel = arg.event.title;
                let kelas = props.kelas || '-';
                let tipe = props.tipe || '-';
                let pekan = props.pekan || '-';
                let bgColor = arg.event.backgroundColor;

                let kodeMapel = props.kode;
                if (!kodeMapel || kodeMapel === 'KD' || kodeMapel.length > 5) {
                    kodeMapel = mapel.split(' ').map(word => word.charAt(0)).join('').toUpperCase().substring(0, 4);
                }

                let iconTipe = (tipe.toLowerCase() === 'blok') ? '<i class="bi bi-grid-3x3-gap-fill text-warning" title="Jadwal Blok"></i>' : '<i class="bi bi-calendar-week text-info" title="Jadwal Reguler"></i>';

                let customHtml = document.createElement('div');
                customHtml.className = 'event-card p-2 mb-1 rounded-3 shadow-sm border-0 w-100';
                customHtml.style.backgroundColor = bgColor;
                customHtml.style.color = '#fff';
                customHtml.style.cursor = 'pointer';
                customHtml.style.overflow = 'hidden';
                customHtml.style.lineHeight = '1.3';

                customHtml.innerHTML = `
                    <div class="d-flex justify-content-between align-items-start mb-1">
                        <span class="badge bg-white text-dark fw-bold shadow-sm rounded-pill" style="font-size: 0.65rem; padding: 3px 6px;">${kodeMapel}</span>
                        <span class="badge bg-dark bg-opacity-50 border border-light border-opacity-25 rounded-pill" style="font-size: 0.65rem;">P-${pekan}</span>
                    </div>
                    <div class="fw-bold text-truncate mb-1 mt-2 text-white" style="font-size: 0.8rem;" title="${mapel}">${mapel}</div>
                    <div class="d-flex justify-content-between align-items-center opacity-75 mt-2 pt-1 border-top border-light border-opacity-25 text-white" style="font-size: 0.75rem;">
                        <span class="text-truncate" title="Kelas: ${kelas}"><i class="bi bi-people-fill me-1"></i>${kelas}</span>
                        <span>${iconTipe}</span>
                    </div>
                `;
                return { domNodes: [customHtml] };
            },

            eventClick: function(info) {
                info.jsEvent.preventDefault(); 
                document.querySelectorAll('.fc-popover').forEach(el => el.style.display = 'none');

                var eventObj = info.event;
                var props = eventObj.extendedProps;
                var mapelName = props.mapel || eventObj.title || '-';

                let kodeMapel = props.kode;
                if (!kodeMapel || kodeMapel === 'KD' || kodeMapel.length > 5) {
                    kodeMapel = mapelName.split(' ').map(word => word.charAt(0)).join('').toUpperCase().substring(0, 4);
                }

                var dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                var formattedDate = eventObj.start ? eventObj.start.toLocaleDateString('id-ID', dateOptions) : '-';
                
                const setText = (id, text) => {
                    const el = document.getElementById(id);
                    if (el) el.textContent = text;
                };

                setText('viewModalDateTitle', formattedDate);
                setText('viewMapel', mapelName);
                setText('viewKode', 'KODE: ' + kodeMapel); 
                setText('viewGuru', props.guru || '-');
                setText('viewKelas', props.kelas || '-');
                setText('viewTipe', props.tipe || '-');
                setText('viewPekan', props.pekan || '-');

                if (detailModalInstance) {
                    detailModalInstance.show();
                }
            },

            eventDidMount: function(info) {
                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
                    new bootstrap.Tooltip(info.el, {
                        title: `${info.event.title} (${info.event.extendedProps.kelas})`,
                        placement: 'top',
                        trigger: 'hover',
                        container: 'body'
                    });
                }
            }
        });
        calendar.render();
    });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/vol15_7/infinityfree.com/if0_40829333/sislajar-skansa.gt.tc/htdocs/resources/views/pages/pembelajaran/jadwal/index.blade.php ENDPATH**/ ?>