@extends('admin.admin_dashboard')

@section('customcss')
  <style>
    /* ================= Common ================= */
    body,
    .content-body,
    .card,
    table,
    th,
    td {
      color: #000000;
      /* Normal text black */
      font-size: 14px;
    }

    .table th,
    .table td {
      vertical-align: middle;
    }

    /* ================= Table ================= */
    .table thead th {
      background-color: #4CA49D !important;
      color: #ffffff !important;
      text-align: center;
    }

    /* ================= Routine Cell ================= */
    .routine-cell {
      min-height: 72px;
      cursor: pointer;
      transition: background 0.2s ease-in-out;
    }

    .routine-cell.empty:hover {
      background: #FBFFE3;
    }

    .badge-mini {
      font-size: 14px;
      padding: 2px 6px;
      border-radius: 6px;
    }

    .teacher-icon {
      cursor: pointer;
      margin-left: 5px;
      color: #0d6efd;
    }

    .small-note {
      font-size: 12px;
      color: #444;
    }

    /* Subject highlight */
    .routine-cell b {
      color: #52AC52;
      /* ✅ subject text */
      font-weight: 600;
      font-size: 15px;
    }

    /* ================= View Mode Styling ================= */
    .view-mode-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }

    .view-mode-table thead th {
      background-color: #52B2AA !important;
      color: white !important;
      padding: 12px 8px;
      text-align: center;
      font-weight: 600;
      font-size: 13px;
      border: 1px solid #ddd;
    }

    .view-mode-table thead th.day-header {
      background-color: #52B2AA !important;
      width: 100px;
      font-weight: 700;
    }

    .view-mode-table tbody th {
      background-color: #f8f9fa;
      font-weight: 700;
      text-align: center;
      color: #333;
      border: 1px solid #ddd;
      padding: 10px;
      text-transform: uppercase;
      font-size: 13px;
    }

    .view-mode-table tbody td {
      border: 1px solid #ddd;
      padding: 12px 8px;
      text-align: center;
      vertical-align: middle;
      min-height: 70px;
      background-color: white;
    }

    .view-mode-table .subject-name {
      color: #52AC52;
      font-weight: 700;
      font-size: 15px;
      display: block;
      margin-bottom: 3px;
    }

    .view-mode-table .teacher-name {
      color: #8B4513;
      font-size: 13px;
      font-weight: 500;
      display: block;
    }

    .view-mode-table .tiffin-cell {
      background-color: #D4EDDA !important;
      color: #155724;
      font-weight: 700;
      font-size: 14px;
      text-transform: uppercase;
    }

    .view-mode-table .empty-cell {
      background-color: #f8f9fa;
      color: #999;
      font-style: italic;
    }

    .print-btn-wrapper {
      text-align: left;
      margin-top: 20px;
    }

    .print-routine-btn {
      background-color: #52B2AA;
      color: white;
      border: none;
      padding: 10px 30px;
      border-radius: 5px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .print-routine-btn:hover {
      background-color: #409089;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .print-routine-btn i {
      margin-right: 8px;
    }

    /* ================= Section List Items ================= */
    .section-item {
      background: white;
      border: 2px solid #e9ecef;
      border-radius: 10px;
      padding: 10px 12px;
      margin-bottom: 8px;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .section-item:hover {
      border-color: #667eea;
      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
      transform: translateX(3px);
    }

    .section-item.active {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-color: #667eea;
    }

    .section-item .section-name {
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 3px;
      text-align: center;
    }

    .section-item .section-info {
      font-size: 11px;
      color: #6c757d;
      text-align: center;
    }

    .section-item.active .section-info {
      color: rgba(255,255,255,0.9);
    }

    .section-actions {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      justify-content: center;
    }

    .action-btn {
      width: 45px;
      height: 38px;
      border-radius: 8px;
      border: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 16px;
      gap: 2px;
    }

    .action-btn span {
      font-size: 9px;
      font-weight: 600;
    }

    .action-btn.edit-btn {
      background: #28a745;
      color: white;
    }

    .action-btn.edit-btn:hover {
      background: #218838;
      transform: scale(1.08);
    }

    .action-btn.view-btn {
      background: #17a2b8;
      color: white;
    }

    .action-btn.view-btn:hover {
      background: #138496;
      transform: scale(1.08);
    }

    .section-item.active .action-btn.edit-btn,
    .section-item.active .action-btn.view-btn {
      background: white;
      color: #667eea;
    }

    /* Mode Indicator */
    .mode-indicator {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      margin-left: 10px;
    }

    .mode-indicator.edit-mode {
      background: #28a745;
      color: white;
    }

    .mode-indicator.view-mode {
      background: #6c757d;
      color: white;
    }

    /* Responsive Table */
    #routineTableWrap {
      overflow-x: auto;
      max-width: 100%;
    }

    .table-responsive {
      overflow-x: auto;
    }

    /* ================= Class Routine Coloring ================= */
    .routine-empty {
      background-color: #FBFFE3 !important;
    }

    /* হালকা সবুজ */
    .routine-locked {
      background-color: #E62727 !important;
      color: #fff;
      font-weight: 600;
    }

    /* লাল */
    .routine-single {
      background-color: #FFFFFF !important;
    }

    /* সাদা */
    .routine-multiple {
      background-color: #F7F7F7 !important;
    }

    /* হালকা ধূসর */

    /* ================= Tiffin Cell Non-Clickable ================= */
    .routine-cell.tiffin-slot {
      cursor: not-allowed !important;
      opacity: 0.7;
      background-color: #D4EDDA !important;
      color: #155724;
      font-weight: 700;
    }

    .routine-cell.tiffin-slot:hover {
      background-color: #D4EDDA !important;
    }

    /* ================= Teacher Routine Coloring ================= */






    /* ================= Modal ================= */
    .modal-content {
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .modal-header {
      background: #4CA49D;
      color: #fff;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }

    /* Show All Teachers Toggle */
    #showAllTeachers {
      cursor: pointer;
      width: 40px;
      height: 20px;
    }

    #showAllTeachers:checked {
      background-color: #4CA49D;
      border-color: #4CA49D;
    }

    #teacherHint {
      font-size: 12px;
      font-weight: 500;
    }

    /* ================= Print Mode ================= */
    @media print {
      /* Hide everything except the routine table */
      body * {
        visibility: hidden;
      }
      
      #routineTableWrap,
      #routineTableWrap * {
        visibility: visible;
      }
      
      #routineTableWrap {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
      }
      
      .print-btn-wrapper {
        display: none !important;
      }
      
      .view-mode-table {
        border-collapse: collapse;
      }
      
      .view-mode-table th,
      .view-mode-table td {
        border: 1px solid #333 !important;
        padding: 8px !important;
      }
      
      .view-mode-table thead th {
        background-color: #52B2AA !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      
      .view-mode-table .tiffin-cell {
        background-color: #D4EDDA !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
    }
  </style>
@endsection

@section('admin')
  <div class="content-body">
    <div class="container-fluid">
      <div class="row page-titles">
        <h4>Class Routine Builder</h4>
      </div>

      {{-- 1st Card: Filters (Top) --}}
      <div class="row">
        <div class="col-lg-12">
          <div class="card p-3">
            <h6 class="mb-3">
              <i class="fas fa-filter me-2"></i>
              Select Routine Configuration
            </h6>
            <div class="row">
              <div class="mb-2 col-lg-2">
                <label class="form-label fw-bold">Session</label>
                <select id="session_id" class="form-select">
                  @foreach(\App\Models\AcademicSession::orderByDesc('is_current')->orderBy('start_date')->get() as $s)
                    <option value="{{ $s->id }}" {{ $s->is_current ? 'selected' : '' }}>{{ $s->name }}</option>
                  @endforeach
                </select>
              </div>
              
              <div class="mb-2 col-lg-2">
                <label class="form-label fw-bold">Routine Type</label>
                <select id="routine_type_id" class="form-select">
                  <option value="">-- Select Type --</option>
                  @foreach(\App\Models\RoutineType::orderByDesc('is_active')->orderBy('name')->get() as $rt)
                    <option value="{{ $rt->id }}" {{ $rt->is_active ? 'selected' : '' }}>{{ $rt->name }}</option>
                  @endforeach
                </select>
              </div>

              <div class="mb-2 col-lg-2">
                <label class="form-label fw-bold">Routine Section</label>
                <select id="routine_section_id" class="form-select">
                  <option value="">-- Select Section --</option>
                  @foreach(\App\Models\RoutineSection::active()->orderBy('name')->get() as $rs)
                    <option value="{{ $rs->id }}">{{ $rs->name }}</option>
                  @endforeach
                </select>
              </div>

              <div class="mb-2 col-lg-2">
                <label class="form-label fw-bold">Shift</label>
                <select id="shift_id" class="form-select">
                  <option value="">-- Select Shift --</option>
                  @foreach(\App\Models\Shift::orderBy('name')->get() as $sh)
                    <option value="{{ $sh->id }}">{{ $sh->name }}</option>
                  @endforeach
                </select>
              </div>

              <div class="mb-2 col-lg-2">
                <label class="form-label fw-bold">Class</label>
                <select id="class_id" class="form-select">
                  <option value="">-- Select Class --</option>
                  @foreach(\App\Models\ClassModel::orderBy('class_code', 'asc')->get() as $c)
                    <option value="{{ $c->id }}">{{ $c->name }}</option>
                  @endforeach
                </select>
              </div>

              <div class="mb-2 col-lg-2">
                <button id="loadSections" class="btn btn-primary w-100" style="margin-top: 29px;">
                  <i class="fas fa-search me-2"></i>
                  Load Sections
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {{-- 2nd & 3rd Card: Section List (Left) + Routine Table (Right) --}}
      <div class="row">
        {{-- 2nd Card: Section List (Left Side) --}}
        <div class="col-lg-2">
          <div class="card p-3" style="min-height: 500px;">
            <h6 class="mb-3">
              <i class="fas fa-list me-2"></i>
              Sections
            </h6>
            <div id="sectionListContainer">
              <div class="text-muted text-center py-5">
                <i class="fas fa-arrow-up" style="font-size: 2rem; opacity: 0.3;"></i>
                <p class="mt-3">Select filters and click<br><b>Load Sections</b></p>
              </div>
            </div>
          </div>
        </div>

        {{-- 3rd Card: Routine Table (Right Side) --}}
        <div class="col-lg-10">
          <div class="card p-3" style="min-height: 500px;">
            <div id="routineHeaderInfo" class="mb-3 d-none">
              <div class="d-flex justify-content-between align-items-center">
                <h6 class="mb-0">
                  <i class="fas fa-calendar-alt me-2"></i>
                  <span id="routineTitle">Routine</span>
                </h6>
                <div>
                  <button id="backToList" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-arrow-left me-2"></i>
                    Back to List
                  </button>
                </div>
              </div>
            </div>
            <div id="routineTableWrap">
              <div class="text-muted text-center py-5">
                <i class="fas fa-calendar-check" style="font-size: 3rem; opacity: 0.3;"></i>
                <p class="mt-3">Select a section from left panel<br>and click <b>Edit</b> to create/edit routine</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- Assign Modal --}}
  <div class="modal fade" id="assignModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="assignForm">
          <div class="modal-header">
            <h5 class="modal-title" id="assignModalTitle">Assign Slot</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <input type="hidden" name="session_id">
            <input type="hidden" name="class_id">
            <input type="hidden" name="section_id">
            <input type="hidden" name="day_of_week">
            <input type="hidden" name="time_slot_id">
            <input type="hidden" name="routine_type_id">
            <input type="hidden" name="routine_section_id">
            <input type="hidden" name="shift_id">
            <input type="hidden" name="override_assignment" value="0">

            <div class="mb-2">
              <label class="form-label">Class Type</label>
              <div class="d-flex gap-3">
                <label><input type="radio" name="class_type" value="lecture" checked> Lecture</label>
                <label><input type="radio" name="class_type" value="tutorial"> Tutorial</label>
                <label><input type="radio" name="class_type" value="lab"> Lab</label>
              </div>
            </div>

            <div class="mb-2">
              <label class="form-label">Subject</label>
              <select name="subject_id" id="subject_id" class="form-select"></select>
            </div>

            <div class="mb-2">
              <label class="form-label d-flex justify-content-between align-items-center">
                <span>Teacher</span>
                <div class="form-check form-switch" style="margin: 0;">
                  <input class="form-check-input" type="checkbox" id="showAllTeachers" style="cursor: pointer;">
                  <label class="form-check-label small text-muted" for="showAllTeachers" style="cursor: pointer;">
                    Show All Teachers
                  </label>
                </div>
              </label>
              <div class="d-flex">
                <select name="teacher_id" id="teacher_id" class="form-select">
                <option value="">-- Select Teacher --</option>
                </select>
                <button type="button" id="viewTeacherRoutineBtn" class="btn btn-outline-secondary ms-2"
                  title="View teacher routine">&#128065;</button>
              </div>
              <span id="teacherHint" class="small mt-1 text-muted d-block"></span>
              <div id="teacherAssignedNote" class="small-note mt-1" ></div>
            </div>

            {{-- Teacher Conflict Details --}}
            <div class="d-none" id="conflictDetails" style="background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 5px; padding: 12px; margin-bottom: 15px;">
              <div id="conflictDetailsContent"></div>
            </div>

            {{-- Conflict options --}}
            <div class="mb-2 d-none" id="conflictOptions">
              <div class="mb-2">
                <label>
                  <input type="radio" name="conflict_action" value="allow_multiple" checked>
                  <span style="color: #28a745; font-weight: 600;">Keep all previous assignments, Assign Here Also.</span>
                </label>
              </div>
              <div>
                <label>
                  <input type="radio" name="conflict_action" value="replace">
                  <span style="color: #dc3545; font-weight: 600;">Remove from all previous assignments, Assign Here Only.</span>
                </label>
              </div>
            </div>

            <div class="alert alert-danger d-none" id="assignError"></div>
          </div>
          <div class="modal-footer">
            <button type="button" id="unassignBtn" class="btn btn-outline-danger me-auto d-none">Remove</button>
            <button class="btn btn-primary">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  {{-- Teacher Routine Modal --}}
  <div class="modal fade" id="teacherRoutineModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="teacherRoutineTitle">Teacher Routine</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body text-dark table-responsive" id="teacherRoutineBody">
          Loading...
        </div>
      </div>
    </div>
  </div>
@endsection

@section('customjs')
  <script>
  (function () {
    // ===================== CONST / STATE =====================
    const days = { 1: 'Sat', 2: 'Sun', 3: 'Mon', 4: 'Tue', 5: 'Wed', 6: 'Thu', 7: 'Fri' };

    let slots = [];
    let sections = [];
    let currentSection = null;
    let offDays = []; // Array of day numbers that are off (1=Sat, 2=Sun, etc.)

    // Routine cache (no extra fetch on modal open)
    let routineCache = [];
    let routineIndex = new Map(); // key: "day-slot" -> routines[]

    // Cache subjects by class
    const subjectsCache = new Map(); // class_id -> subjects[]

    // Modal instances (reuse)
    const assignModalEl = document.getElementById('assignModal');
    const teacherModalEl = document.getElementById('teacherRoutineModal');
    const assignModal = bootstrap.Modal.getOrCreateInstance(assignModalEl);
    const teacherModal = bootstrap.Modal.getOrCreateInstance(teacherModalEl);

    // Track listeners / async
    let teacherChangeBound = false;
    let teacherChangeHandler = null;
    let conflictToken = 0;
    let conflictLastKey = null; // avoid duplicate checks
    let conflictInFlight = false;

    // ===================== OFF DAYS MANAGEMENT =====================
    // Load off days from database (read-only for table rendering)
    async function loadOffDays() {
      try {
        const response = await getJSON('{{ route("routine.getOffDays") }}');
        if (response.success) {
          offDays = response.off_days || [];
        }
      } catch (e) {
        console.error('Failed to load off days:', e);
        offDays = [];
      }
    }

    function isOffDay(dayNumber) {
      return offDays.includes(Number(dayNumber));
    }

    // ===================== TOAST =====================
    function toast(msg, type = 'info') {
      const toastContainer = document.getElementById('toastContainer') || createToastContainer();
      const toastId = 'toast-' + Date.now();

      let bgClass = 'bg-info';
      let icon = 'fa-info-circle';
      if (type === 'success') { bgClass = 'bg-success'; icon = 'fa-check-circle'; }
      else if (type === 'danger') { bgClass = 'bg-danger'; icon = 'fa-exclamation-circle'; }
      else if (type === 'warning') { bgClass = 'bg-warning'; icon = 'fa-exclamation-triangle'; }

      const toastHTML = `
        <div id="${toastId}" class="toast align-items-center text-white ${bgClass} border-0" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              <i class="fas ${icon} me-2"></i>${msg}
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
          </div>
        </div>
      `;
      toastContainer.insertAdjacentHTML('beforeend', toastHTML);

      const toastEl = document.getElementById(toastId);
      const bsToast = new bootstrap.Toast(toastEl, { delay: 2500 });
      bsToast.show();

      toastEl.addEventListener('hidden.bs.toast', function() { toastEl.remove(); });
    }

    function createToastContainer() {
      const container = document.createElement('div');
      container.id = 'toastContainer';
      container.className = 'toast-container position-fixed top-0 end-0 p-3';
      container.style.zIndex = '9999';
      document.body.appendChild(container);
      return container;
    }

    function showTableLoader() {
      const wrap = document.getElementById('routineTableWrap');
      wrap.innerHTML = `
      <div class="text-center py-5">
        <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
        <p class="mt-3 text-muted">Loading routine...</p>
      </div>
    `;
    }

    // ===================== FETCH HELPERS =====================
    async function getJSON(url, params = {}) {
      const q = new URLSearchParams(params).toString();
      const res = await fetch(url + (q ? ('?' + q) : ''), {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      });
      // If server returns non-JSON (error page), this will throw -> handled by caller
      return await res.json();
    }

    async function postJSON(url, body) {
      const res = await fetch(url, {
        method: 'POST',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(body)
      });
      const data = await res.json();
      if (!res.ok) throw data;
      return data;
    }

    function currentFilters() {
      return {
        session_id: Number(document.getElementById('session_id').value),
        class_id: Number(document.getElementById('class_id').value),
        shift_id: document.getElementById('shift_id').value ? Number(document.getElementById('shift_id').value) : 0,
        routine_type_id: document.getElementById('routine_type_id')?.value ? Number(document.getElementById('routine_type_id').value) : null,
        routine_section_id: document.getElementById('routine_section_id')?.value ? Number(document.getElementById('routine_section_id').value) : null,
      };
    }

    function to12Hour(timeStr) {
      if (!timeStr) return "";
      let [h, m] = timeStr.split(":").map(Number);
      let ampm = h >= 12 ? "PM" : "AM";
      h = h % 12 || 12;
      return `${h}:${String(m).padStart(2, "0")} ${ampm}`;
    }

    // ===================== ROUTINE INDEXING (O(routines)) =====================
    function buildRoutineIndex(routines) {
      routineIndex = new Map();
      for (const r of (routines || [])) {
        const key = `${Number(r.day_of_week)}-${Number(r.time_slot_id)}`;
        if (!routineIndex.has(key)) routineIndex.set(key, []);
        routineIndex.get(key).push(r);
      }
    }

    // ===================== SUBJECTS CACHE =====================
    async function loadSubjects(class_id) {
      if (subjectsCache.has(class_id)) return subjectsCache.get(class_id);
      const subs = await getJSON('{{ route("routine.classSubjects") }}', { class_id });
      subjectsCache.set(class_id, subs.subjects || []);
      return subjectsCache.get(class_id);
    }

    // ===================== SECTIONS LIST =====================
    async function loadSectionsList() {
      const f = currentFilters();

      if (!f.session_id || !f.class_id || !f.shift_id || !f.routine_type_id || !f.routine_section_id) {
        toast('Please select all filters', 'warning');
        return;
      }

      try {
        // 🔥 RESET RIGHT SIDE IMMEDIATELY
        currentSection = null;
        routineCache = [];
        routineIndex = new Map();

        document.getElementById('routineHeaderInfo').classList.add('d-none');

        // 🔥 SHOW EMPTY STATE ON RIGHT SIDE
        document.getElementById('routineTableWrap').innerHTML = `
      <div class="text-muted text-center py-5">
        <i class="fas fa-hand-pointer" style="font-size: 2.5rem; opacity: 0.3;"></i>
        <p class="mt-3">Select a section to view routine</p>
      </div>
    `;

        const response = await fetch('{{ route("get.sections.by.class") }}', {
          method: 'POST',
          headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ class_id: f.class_id })
        });

        sections = await response.json();
        renderSectionsList();

      } catch (error) {
        console.error('Error loading sections:', error);
        toast('Error loading sections', 'danger');
      }
    }

    function renderSectionsList() {
      const container = document.getElementById('sectionListContainer');
      if (!sections || sections.length === 0) {
        container.innerHTML = `
          <div class="text-muted text-center py-4">
            <i class="fas fa-inbox" style="font-size: 2rem; opacity: 0.3;"></i>
            <p class="mt-3">No sections found</p>
          </div>`;
        return;
      }

      const className = document.querySelector('#class_id option:checked')?.text || '';
      let html = '';
      sections.forEach(section => {
        const isActive = currentSection && currentSection.id === section.id ? 'active' : '';
        html += `
          <div class="section-item ${isActive}" data-section-id="${section.id}" data-section-name="${section.name}">
            <div class="section-name">${section.name}</div>
            <div class="section-info">${className}</div>
            <div class="section-actions">
              <button class="action-btn edit-btn" onclick="editSection(${section.id}, '${section.name.replace(/'/g, "\\'")}')" title="Edit Routine">
                <i class="fas fa-edit"></i><span>EDIT</span>
              </button>
              <button class="action-btn view-btn" onclick="viewSection(${section.id}, '${section.name.replace(/'/g, "\\'")}')" title="View Routine">
                <i class="fas fa-eye"></i><span>VIEW</span>
              </button>
            </div>
          </div>`;
      });

      container.innerHTML = html;
    }

    // ===================== LOAD ROUTINE =====================
   async function loadRoutineForSection(sectionId) {
      const f = currentFilters();

      // 🔥 IMPORTANT: clear previous UI immediately
      showTableLoader();

      try {
        // Load active slots
        const s = await getJSON('{{ route("routine.activeSlots") }}', {
          shift_id: f.shift_id,
          routine_type_id: f.routine_type_id || null,
          routine_section_id: f.routine_section_id || null
        });

        slots = s.slots || [];

        // Fetch routines once
        const routineParams = {
          session_id: f.session_id,
          class_id: f.class_id,
          section_id: sectionId,
          shift_id: f.shift_id,
          routine_type_id: f.routine_type_id || null,
          routine_section_id: f.routine_section_id || null
        };

        const res = await getJSON('{{ route("routine.fetch") }}', routineParams);

        routineCache = res.routines || [];
        buildRoutineIndex(routineCache);

        renderTable(routineCache);

      } catch (error) {
        console.error(error);
        document.getElementById('routineTableWrap').innerHTML = `
      <div class="text-danger text-center py-4">
        Failed to load routine
      </div>
    `;
      }
    }

    // ===================== HEADER / NAV =====================
    window.editSection = async function(sectionId, sectionName) {
      currentSection = { id: sectionId, name: sectionName, mode: 'edit' };
      document.querySelectorAll('.section-item').forEach(item => item.classList.remove('active'));
      document.querySelector(`[data-section-id="${sectionId}"]`)?.classList.add('active');

      document.getElementById('routineHeaderInfo').classList.remove('d-none');
      const className = document.querySelector('#class_id option:checked')?.text || '';
      document.getElementById('routineTitle').innerHTML =
        `${className} - ${sectionName} <span class="mode-indicator edit-mode"><i class="fas fa-edit me-1"></i>EDIT MODE</span>`;

      await loadRoutineForSection(sectionId);
    };

    window.viewSection = async function(sectionId, sectionName) {
      currentSection = { id: sectionId, name: sectionName, mode: 'view' };
      document.querySelectorAll('.section-item').forEach(item => item.classList.remove('active'));
      document.querySelector(`[data-section-id="${sectionId}"]`)?.classList.add('active');

      document.getElementById('routineHeaderInfo').classList.remove('d-none');
      const className = document.querySelector('#class_id option:checked')?.text || '';
      document.getElementById('routineTitle').innerHTML =
        `${className} - ${sectionName} <span class="mode-indicator view-mode"><i class="fas fa-eye me-1"></i>VIEW MODE</span>`;

      await loadRoutineForSection(sectionId);
    };

    document.getElementById('backToList').addEventListener('click', function () {
      currentSection = null;
      routineCache = [];
      routineIndex = new Map();

      document.getElementById('routineHeaderInfo').classList.add('d-none');

      // 🔥 RESET RIGHT SIDE FULLY
      document.getElementById('routineTableWrap').innerHTML = `
    <div class="text-muted text-center py-5">
      <i class="fas fa-calendar-check" style="font-size: 3rem; opacity: 0.3;"></i>
      <p class="mt-3">Select a section from left panel<br>and click <b>Edit</b> to create/edit routine</p>
    </div>`;
    });

    document.getElementById('loadSections').addEventListener('click', loadSectionsList);

    // ===================== RENDER TABLE (O(7*slots)) =====================
    function renderTable() {
      const wrap = document.getElementById('routineTableWrap');
      if (!slots || slots.length === 0) {
        wrap.innerHTML = '<div class="text-center p-4 text-dark">No active time slots for selected shift.</div>';
        return;
      }

      const isViewMode = currentSection && currentSection.mode === 'view';
      if (isViewMode) renderViewMode();
      else renderEditMode();
    }

    function renderViewMode() {
      const wrap = document.getElementById('routineTableWrap');

      let thead = '<thead><tr><th class="day-header">Day</th>';
      for (const s of slots) {
        const start = to12Hour(s.start_time);
        const end = to12Hour(s.end_time);
        thead += `<th>${s.name}<br><small>${start} - ${end}</small></th>`;
      }
      thead += '</tr></thead>';

      let tbody = '<tbody>';
      for (let d = 1; d <= 7; d++) {
        // Skip off days
        if (isOffDay(d)) continue;

        tbody += `<tr><th>${days[d]}</th>`;
        for (const s of slots) {
          const key = `${d}-${s.id}`;
          const hits = routineIndex.get(key) || [];

          if (hits.length === 0) {
            const isTiffin = s.name && s.name.toLowerCase().includes('tiffin');
            tbody += isTiffin ? `<td class="tiffin-cell">TIFFIN</td>` : `<td class="empty-cell">-</td>`;
          } else {
            let content = '';
            for (const hit of hits) {
              const sub = hit.subject?.name ?? '';
              const teacher = hit.teacher?.name ?? '';
              content += `<span class="subject-name">${sub}</span>`;
              content += `<span class="teacher-name">( ${teacher} )</span>`;
            }
            tbody += `<td>${content}</td>`;
          }
        }
        tbody += '</tr>';
      }
      tbody += '</tbody>';

      wrap.innerHTML = `
        <div class="table-responsive">
          <table class="view-mode-table">${thead}${tbody}</table>
        </div>
        <div class="print-btn-wrapper">
          <button class="print-routine-btn" onclick="printRoutine()">
            <i class="fas fa-print"></i>PRINT
          </button>
        </div>`;
    }

    function renderEditMode() {
      const wrap = document.getElementById('routineTableWrap');

      let thead = '<thead><tr><th style="width:80px">Day</th>';
      for (const s of slots) {
        const start = to12Hour(s.start_time);
        const end = to12Hour(s.end_time);
        thead += `<th data-slot="${s.id}">${s.name}<div class="small">${start} - ${end}</div></th>`;
      }
      thead += '</tr></thead>';

      let tbody = '<tbody>';
      for (let d = 1; d <= 7; d++) {
        // Skip off days
        if (isOffDay(d)) continue;

        tbody += `<tr><th>${days[d]}</th>`;
        for (const s of slots) {
          const key = `${d}-${s.id}`;
          const hits = routineIndex.get(key) || [];
          const isTiffin = s.name && s.name.toLowerCase().includes('tiffin');
          let cellClass = "routine-cell p-2";
          let inner = "";
          let clickable = true;

          // Make tiffin slots non-clickable
          if (isTiffin) {
            cellClass += " tiffin-slot text-center";
            inner = "<b>TIFFIN BREAK</b>";
            clickable = false;
          } else if (hits.length === 0) {
            cellClass += " routine-empty text-center text-dark";
            inner = "<i>Empty</i>";
          } else {
            if (hits.some(r => r.locked)) {
              cellClass = "routine-cell routine-locked p-2";
              inner = "<b class='text-danger'>Locked</b>";
            } else {
              cellClass += (hits.length === 1) ? " routine-single" : " routine-multiple";
              let content = `<div></div>`;
              for (const hit of hits) {
                const sub = hit.subject?.name ?? '';
                const teacher = hit.teacher?.name ?? '';
                const teacherId = hit.teacher?.id ?? '';
                content += `<div><b>${sub}</b></div><div class="text-dark">(${teacher})<i class="teacher-icon" data-teacher="${teacherId}" title="View Routine">&#128065;</i></div>`;
              }
              inner = content;
            }
          }

          const clickAttr = clickable ? 'data-clickable="true"' : '';
          tbody += `<td class="${cellClass}" data-day="${d}" data-slot="${s.id}" ${clickAttr}>${inner}</td>`;
        }
        tbody += '</tr>';
      }
      tbody += '</tbody>';

      wrap.innerHTML = `<div class="table-responsive"><table class="table table-bordered align-middle">${thead}${tbody}</table></div>`;

      // Attach click handler once per render
      wrap.querySelectorAll('.routine-cell[data-clickable="true"]').forEach(cell => {
        cell.onclick = function() { window.openAssignModal(cell); };
      });

      wrap.querySelectorAll('.teacher-icon').forEach(icon => {
        icon.onclick = (ev) => {
          ev.stopPropagation();
          window.openTeacherRoutine(icon.dataset.teacher);
        };
      });
    }

    // ===================== CONFLICT CHECK (single, awaitable, race-safe) =====================
    async function runConflictCheck({ teacherId, day_of_week, time_slot_id, f }) {
      if (!teacherId) return { has_conflict: false };

      const key = `${teacherId}-${day_of_week}-${time_slot_id}-${f.session_id}-${f.class_id}-${currentSection?.id}-${f.routine_type_id}-${f.routine_section_id}`;
      if (conflictInFlight && conflictLastKey === key) {
        // let current request finish, but don't spam
      }
      conflictLastKey = key;

      const token = ++conflictToken;
      conflictInFlight = true;

      const saveBtn = document.querySelector('#assignForm button.btn.btn-primary');
      if (saveBtn) saveBtn.disabled = true;

      try {
        const conflictCheck = await getJSON('{{ route("routine.checkTeacherConflict") }}', {
          teacher_id: teacherId,
          day_of_week,
          time_slot_id,
          session_id: f.session_id,
          class_id: f.class_id,
          section_id: currentSection.id,
          routine_type_id: f.routine_type_id || null,
          routine_section_id: f.routine_section_id || null
        });

        // outdated response ignore
        if (token !== conflictToken) return { has_conflict: false };

        const conflictDetails = document.getElementById('conflictDetails');
        const conflictDetailsContent = document.getElementById('conflictDetailsContent');
        const conflictOptions = document.getElementById('conflictOptions');
        const assignError = document.getElementById('assignError');

        if (conflictCheck.has_conflict) {
          const tSel = document.getElementById('teacher_id');
          const teacherName = tSel?.options[tSel.selectedIndex]?.text?.replace(' (assigned)', '') || 'Teacher';

          let conflictHTML = `<div style="color:#721c24;"><strong style="font-size:14px;">${teacherName} has following classes at this day & time -</strong></div>`;
          conflictHTML += `<ul style="margin:8px 0 0 0; padding-left:20px; color:#721c24;">`;
          (conflictCheck.conflicts || []).forEach(c => {
            conflictHTML += `<li style="margin-bottom:4px;"><strong>${c.subject_name}</strong> in class <strong>${c.class_name}</strong> (<strong>${c.section_name}</strong>)</li>`;
          });
          conflictHTML += `</ul>`;

          conflictDetailsContent.innerHTML = conflictHTML;
          conflictDetails.classList.remove('d-none');
          conflictOptions.classList.remove('d-none');
          assignError.classList.add('d-none');
        } else {
          document.getElementById('conflictOptions').classList.add('d-none');
          document.getElementById('conflictDetails').classList.add('d-none');
          document.getElementById('assignError').classList.add('d-none');
        }

        return conflictCheck;
      } catch (e) {
        // fail-safe: don't lock UI
        console.error('Conflict check failed:', e);
        return { has_conflict: false };
      } finally {
        conflictInFlight = false;
        if (token === conflictToken && saveBtn) saveBtn.disabled = false;
      }
    }

    // ===================== TEACHER FILTERING HELPERS =====================
    function renderTeacherList(teachers) {
      const tSel = document.getElementById('teacher_id');
      const selectedValue = tSel.value; // Preserve selected value
      let options = `<option value="">-- Select Teacher --</option>`;

      options += teachers.map(t =>
      `<option value="${t.id}" data-assigned="${t.assigned ? 1 : 0}">
        ${t.name}${t.assigned ? ' (assigned)' : ''}
      </option>`
    ).join('');

    tSel.innerHTML = options;

    if (selectedValue && teachers.find(t => t.id == selectedValue)) {
      tSel.value = selectedValue;
    }
    }

    function filterTeachersBySubject(showAll) {
      const subjectId = document.getElementById('subject_id').value;
      const tSel = document.getElementById('teacher_id');

      if (!window.allTeachersData || !subjectId) {
        renderTeacherList(window.allTeachersData || []);
        return;
      }

      let filteredTeachers;

      if (showAll) {
        // Show all teachers
        filteredTeachers = window.allTeachersData;
      } else {
        // Filter teachers who are assigned to the selected subject
        filteredTeachers = window.allTeachersData.filter(t => {
          return t.assigned_subjects && t.assigned_subjects.includes(parseInt(subjectId));
        });
      }

      // Update hint message
      const totalCount = window.allTeachersData.length;
      const filteredCount = filteredTeachers.length;
      const hintEl = document.getElementById('teacherHint');

      if (!showAll && filteredCount < totalCount) {
        hintEl.innerText = `Showing ${filteredCount} of ${totalCount} teachers assigned to this subject`;
        hintEl.style.color = '#0d6efd';
      } else if (showAll) {
        hintEl.innerText = `Showing all ${totalCount} teachers`;
        hintEl.style.color = '#6c757d';
      } else {
        hintEl.innerText = '';
      }

      // Render filtered list
      renderTeacherList(filteredTeachers);

      // If no teachers found, show message
      if (filteredTeachers.length === 0) {
        tSel.innerHTML = '<option value="">No teachers assigned to this subject</option>';
        hintEl.innerText = 'No teachers are assigned to teach this subject. Enable "Show All Teachers" to see other teachers.';
        hintEl.style.color = '#dc3545';
      }
    }

    // ===================== ASSIGN MODAL (FAST) =====================
    window.openAssignModal = async function(cell) {
      if (!currentSection) {
        toast('Please select a section first', 'warning');
        return;
      }

      const f = currentFilters();
      const day_of_week = Number(cell.dataset.day);
      const time_slot_id = Number(cell.dataset.slot);

      const form = document.getElementById('assignForm');
      const tSel = document.getElementById('teacher_id');

      // Find slot information and update modal title
      const currentSlot = slots.find(s => s.id === time_slot_id);
      const dayName = days[day_of_week] || 'Unknown';
      const modalTitle = document.getElementById('assignModalTitle');

      if (currentSlot) {
        const startTime = to12Hour(currentSlot.start_time);
        const endTime = to12Hour(currentSlot.end_time);
        modalTitle.innerHTML = `<div><b>${currentSlot.name}</b> - ${dayName}</div><small class="text-muted">${startTime} - ${endTime}</small>`;
      } else {
        modalTitle.textContent = 'Assign Slot';
      }

      // reset UI blocks
      document.getElementById('conflictOptions').classList.add('d-none');
      document.getElementById('conflictDetails').classList.add('d-none');
      document.getElementById('assignError').classList.add('d-none');
      document.getElementById('assignError').innerText = '';
      document.getElementById('teacherHint').innerText = '';

      // Reset show all teachers checkbox
      document.getElementById('showAllTeachers').checked = false;

      // fill hidden fields
      form.session_id.value = f.session_id;
      form.class_id.value = f.class_id;
      form.section_id.value = currentSection.id;
      form.day_of_week.value = day_of_week;
      form.time_slot_id.value = time_slot_id;
      form.shift_id.value = f.shift_id ? f.shift_id : 0;
      form.override_assignment.value = 0;
      form.routine_type_id.value = f.routine_type_id || '';
      form.routine_section_id.value = f.routine_section_id || '';

      // show modal instantly (skeleton)
      assignModal.show();

      try {
        // Parallel load subjects + teachers
        const [subjects, tdata] = await Promise.all([
          loadSubjects(f.class_id),
          getJSON('{{ route("routine.teachersForSlot") }}', {
            time_slot_id,
            day_of_week,
            session_id: f.session_id,
            routine_type_id: f.routine_type_id || null,
            routine_section_id: f.routine_section_id || null,
            class_id: f.class_id || null
          })
        ]);

        // Store all teachers data with assigned subjects
        window.allTeachersData = tdata.teachers || [];

        document.getElementById('subject_id').innerHTML =
          (subjects || []).map(s => `<option value="${s.id}">${s.name}</option>`).join('');

        // Initial teacher list render
        renderTeacherList(window.allTeachersData);

        const assignedCount = (tdata.teachers || []).filter(t => t.assigned).length;
        document.getElementById('teacherAssignedNote').innerText =
          assignedCount ? `${assignedCount} teacher(s) already assigned in this slot.` : '';

        document.getElementById('viewTeacherRoutineBtn').onclick = function () {
          const tid = tSel.value;
          if (tid) window.openTeacherRoutine(tid);
        };

        // Subject change handler - filter teachers by selected subject
        document.getElementById('subject_id').onchange = function() {
          const showAll = document.getElementById('showAllTeachers').checked;
          filterTeachersBySubject(showAll);
        };

        // Show all teachers toggle
        document.getElementById('showAllTeachers').onchange = function() {
          filterTeachersBySubject(this.checked);
        };

        // Preselect from routine cache (no extra fetch)
        const existingForThisCell = (routineIndex.get(`${day_of_week}-${time_slot_id}`) || [])
          .filter(r => Number(r.class_id) === Number(f.class_id) && Number(r.section_id) === Number(currentSection.id));

        let preselectedTeacherId = null;

        if (existingForThisCell.length > 0) {
          const ex = existingForThisCell[0];
          const subId = ex.subject_id ?? ex.subject?.id ?? null;
          const tId = ex.teacher_id ?? ex.teacher?.id ?? null;

          if (subId) document.getElementById('subject_id').value = String(subId);
          preselectedTeacherId = tId;

          if (ex.class_type) {
            const radio = form.querySelector(`input[name="class_type"][value="${ex.class_type}"]`);
            if (radio) radio.checked = true;
          }
        }

        // Trigger initial subject filter
        filterTeachersBySubject(false);

        // If teacher was preselected but not in filtered list, show all teachers
        if (preselectedTeacherId) {
          const currentOptions = Array.from(tSel.options).map(opt => parseInt(opt.value));
          if (!currentOptions.includes(parseInt(preselectedTeacherId))) {
            // Teacher not in filtered list, enable "Show All"
            document.getElementById('showAllTeachers').checked = true;
            filterTeachersBySubject(true);
          }
          // Now set the teacher value
          tSel.value = String(preselectedTeacherId);
        }

        document.getElementById('unassignBtn').classList.toggle('d-none', existingForThisCell.length === 0);

        // Bind teacher change ONCE (no multi listener)
        if (!teacherChangeBound) {
          teacherChangeHandler = async function() {
            const teacherId = tSel.value;
            if (!teacherId) return;
            await runConflictCheck({ teacherId, day_of_week: Number(form.day_of_week.value), time_slot_id: Number(form.time_slot_id.value), f: currentFilters() });
          };
          tSel.onchange = teacherChangeHandler;
          teacherChangeBound = true;
        } else {
          // ensure handler is set (overwrite style)
          tSel.onchange = teacherChangeHandler;
        }

        // Trigger initial conflict check (awaited to avoid double-save need)
        if (tSel.value) {
          await runConflictCheck({ teacherId: tSel.value, day_of_week, time_slot_id, f });
        }

      } catch (error) {
        console.error('openAssignModal error:', error);
        toast('Failed to load modal data', 'danger');
      }
    };

    // ===================== TEACHER ROUTINE MODAL =====================
    window.openTeacherRoutine = async function(teacher_id) {
      if (!teacher_id) return;

      const body = document.getElementById('teacherRoutineBody');
      const title = document.getElementById('teacherRoutineTitle');
      title.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading...';
      body.innerHTML = 'Loading...';

      teacherModal.show();

      try {
        const f = currentFilters();
        const data = await getJSON('{{ route("routine.teacherRoutine") }}', {
          teacher_id,
          shift_id: f.shift_id || 0,
          routine_type_id: f.routine_type_id || null,
          routine_section_id: f.routine_section_id || null
        });

        // Update modal title with teacher name
        title.innerHTML = '<i class="fas fa-chalkboard-teacher me-2"></i>' + (data.teacher_name || 'Teacher Routine');

        const parser = new DOMParser();
        const doc = parser.parseFromString(data.html, 'text/html');
        doc.querySelectorAll('td').forEach(td => {
          const t = td.innerText.trim();
          if (t === 'Empty') td.classList.add('teacher-routine-empty');
          else if (t === 'X') td.classList.add('teacher-routine-locked');
          else if (t.includes(',')) td.classList.add('teacher-routine-multiple');
          else td.classList.add('teacher-routine-single');
        });

        body.innerHTML = doc.body.innerHTML;

        // Add click handlers for section links
        const sectionLinks = body.querySelectorAll('.section-link');
        console.log('Found section links:', sectionLinks.length);

        sectionLinks.forEach((link, index) => {
          console.log(`Setting up link ${index + 1}:`, link.textContent.trim());
          link.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            console.log('Section link clicked!');
            console.log('Dataset:', this.dataset);

            const classId = this.dataset.classId;
            const sectionId = this.dataset.sectionId;
            const sessionId = this.dataset.sessionId;
            const shiftId = this.dataset.shiftId || '';
            const routineTypeId = this.dataset.routineTypeId || '';
            const routineSectionId = this.dataset.routineSectionId || '';

            console.log('Opening section routine view:', { sessionId, classId, sectionId, shiftId, routineTypeId, routineSectionId });

            // Build URL for section view (not builder)
            const viewUrl = '{{ route("routine.sectionView") }}';
            const params = new URLSearchParams({
              session_id: sessionId,
              class_id: classId,
              section_id: sectionId
            });

            // Add optional filters if they exist
            if (shiftId) params.set('shift_id', shiftId);
            if (routineTypeId) params.set('routine_type_id', routineTypeId);
            if (routineSectionId) params.set('routine_section_id', routineSectionId);

            const fullUrl = `${viewUrl}?${params.toString()}`;
            console.log('Opening URL:', fullUrl);

            // Open in new tab
            window.open(fullUrl, '_blank');
          });
        });
      } catch (e) {
        console.error(e);
        body.innerHTML = `<div class="text-danger">Failed to load teacher routine.</div>`;
      }
    };

    // ===================== UNASSIGN =====================
    document.getElementById('unassignBtn').addEventListener('click', async function () {
      const form = document.getElementById('assignForm');
      const payload = {
        session_id: Number(form.session_id.value),
        class_id: Number(form.class_id.value),
        shift_id: Number(form.shift_id.value) || 0,
        section_id: Number(form.section_id.value),
        day_of_week: Number(form.day_of_week.value),
        time_slot_id: Number(form.time_slot_id.value),
        routine_type_id: Number(form.routine_type_id.value) || null,
        routine_section_id: Number(form.routine_section_id.value) || null
      };

      try {
        await postJSON('{{ route("routine.unassign") }}', payload);
        assignModal.hide();
        toast('Successfully Removed!', 'danger');
        if (currentSection) await loadRoutineForSection(currentSection.id);
      } catch (e) {
        const err = document.getElementById('assignError');
        err.classList.remove('d-none');
        err.innerText = e.message || JSON.stringify(e);
      }
    });

    // ===================== ASSIGN SUBMIT (NO DOUBLE SAVE) =====================
    document.getElementById('assignForm').addEventListener('submit', async function (e) {
      e.preventDefault();
      const form = e.target;

      const err = document.getElementById('assignError');
      err.classList.add('d-none');
      err.innerText = '';

      const f = currentFilters();

      // Ensure conflict checked BEFORE submit
      const teacherId = form.teacher_id.value;
      if (teacherId) {
        await runConflictCheck({
          teacherId,
          day_of_week: Number(form.day_of_week.value),
          time_slot_id: Number(form.time_slot_id.value),
          f
        });
      }

      const conflictBox = document.getElementById('conflictOptions');
      let overrideVal = 0;
      if (!conflictBox.classList.contains('d-none')) {
        const sel = form.querySelector('input[name="conflict_action"]:checked')?.value || 'allow_multiple';
        overrideVal = (sel === 'replace' ? 1 : 2);
      }
      form.override_assignment.value = overrideVal;

      const payload = {
        session_id: Number(form.session_id.value),
        class_id: Number(form.class_id.value),
        section_id: Number(form.section_id.value),
        day_of_week: Number(form.day_of_week.value),
        time_slot_id: Number(form.time_slot_id.value),
        subject_id: Number(form.subject_id.value),
        teacher_id: Number(form.teacher_id.value),
        class_type: form.class_type.value || 'lecture',
        override_assignment: Number(form.override_assignment.value),
        shift_id: Number(form.shift_id.value) || 0,
        routine_type_id: Number(form.routine_type_id.value) || null,
        routine_section_id: Number(form.routine_section_id.value) || null
      };

      const saveBtn = form.querySelector('button.btn.btn-primary');
      if (saveBtn) saveBtn.disabled = true;

      try {
        await postJSON('{{ route("routine.assign") }}', payload);
        assignModal.hide();
        toast('Successfully Assigned!', 'success');
        if (currentSection) await loadRoutineForSection(currentSection.id);
      } catch (e) {
        // show conflict options if server indicates conflict
        if (e && (e.conflict || (e.message && String(e.message).includes('already assigned')))) {
          document.getElementById('conflictOptions').classList.remove('d-none');
        }
        err.classList.remove('d-none');
        err.innerText = e.message || JSON.stringify(e);
      } finally {
        if (saveBtn) saveBtn.disabled = false;
      }
    });

    // ===================== PRINT (kept same logic; uses cached slots/routines fetch fresh) =====================
    window.printRoutine = async function() {
      try {
        const schoolInfo = await getJSON('{{ route("routine.schoolInfo") }}');

        const f = currentFilters();
        const className = document.querySelector('#class_id option:checked')?.text || '';
        const sectionName = currentSection?.name || '';

        const printHeader = `
          <div>
            <h3>${schoolInfo.name}</h3>
            <h4>Class Routine - 2026</h4>
            <p>Class: ${className}, Section: ${sectionName}</p>
          </div>
        `;

        let thead = '<thead><tr><th class="day-header">Day</th>';
        slots.forEach(s => {
          const start = to12Hour(s.start_time);
          const end = to12Hour(s.end_time);
          thead += `<th>${s.name}<br><small style="font-size: 8px; font-weight: normal;">${start} - ${end}</small></th>`;
        });
        thead += '</tr></thead>';

        // fetch fresh for print (safe)
        const routineParams = {
          session_id: f.session_id,
          class_id: f.class_id,
          section_id: currentSection.id,
          shift_id: f.shift_id,
          routine_type_id: f.routine_type_id || null,
          routine_section_id: f.routine_section_id || null
        };
        const res = await getJSON('{{ route("routine.fetch") }}', routineParams);
        const routines = res.routines || [];

        // index for print
        const idx = new Map();
        for (const r of routines) {
          const k = `${Number(r.day_of_week)}-${Number(r.time_slot_id)}`;
          if (!idx.has(k)) idx.set(k, []);
          idx.get(k).push(r);
        }

        let tbody = '<tbody>';
        for (let d = 1; d <= 7; d++) {
          // Skip off days in print
          if (isOffDay(d)) continue;

          tbody += `<tr><th>${days[d]}</th>`;
          slots.forEach(s => {
            const hits = idx.get(`${d}-${s.id}`) || [];
            if (hits.length === 0) {
              const isTiffin = s.name && s.name.toLowerCase().includes('tiffin');
              tbody += isTiffin ? `<td class="tiffin-cell">TIFFIN</td>` : `<td>-</td>`;
            } else {
              let content = '';
              hits.forEach(hit => {
                const sub = hit.subject?.name ?? '';
                const teacher = hit.teacher?.name ?? '';
                content += `<span class="subject-name">${sub}</span>`;
                content += `<span class="teacher-name">( ${teacher} )</span>`;
              });
              tbody += `<td>${content}</td>`;
            }
          });
          tbody += '</tr>';
        }
        tbody += '</tbody>';

        const tableHTML = `<table>${thead}${tbody}</table>`;

        const printWindow = window.open('', '_blank');
        printWindow.document.write(`
          <!DOCTYPE html>
          <html>
          <head>
            <title>Class Routine - ${className} ${sectionName}</title>
            <style>
              @page { size: A4 portrait; margin: 10mm; }
              body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
              .print-container { display: block; }
              .routine-copy { width: 100%; margin-bottom: 15px; page-break-inside: avoid; }
              .routine-copy:first-child { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px dashed #999; }
              .routine-copy h3 { margin: 0; font-weight: 700; font-size: 14px; text-align: center; color: #000; }
              .routine-copy h4 { margin: 3px 0; font-weight: 600; font-size: 12px; text-align: center; color: #000; }
              .routine-copy p { margin: 3px 0 10px 0; font-size: 11px; text-align: center; color: #333; }
              table { width: 100%; border-collapse: collapse; }
              th, td { border: 1px solid #000; padding: 5px 3px; text-align: center; font-size: 10px; }
              thead th { background-color: #e0e0e0 !important; color: #000 !important; font-weight: 700; }
              tbody th { background-color: #f5f5f5 !important; font-weight: 700; text-transform: uppercase; }
              .subject-name { font-weight: 700; color: #000; display: block; font-size: 10px; }
              .teacher-name { font-weight: 500; color: #333; display: block; font-size: 9px; }
              .tiffin-cell { background-color: #f0f0f0 !important; font-weight: 700; }
              @media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
            </style>
          </head>
          <body>
            <div class="print-container">
              <div class="routine-copy">${printHeader}${tableHTML}</div>
              <div class="routine-copy">${printHeader}${tableHTML}</div>
            </div>
          </body>
          </html>
        `);
        printWindow.document.close();
        printWindow.focus();
        setTimeout(() => printWindow.print(), 200);

      } catch (error) {
        console.error('Print error:', error);
        alert('Error generating print preview: ' + (error.message || error));
      }
    };

    // ===================== INITIALIZE =====================
    // Load off days from database on page load
    loadOffDays();

  })();
  </script>
@endsection