@extends('admin.admin_dashboard')

@section('customcss')
  <style>
    body,
    .content-body,
    .card,
    table,
    th,
    td,
    .form-control,
    .form-select {
      color: #000000;
    }

    .card {
      box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    }

    .spinner {
      display: none;
    }

    .is-hidden {
      display: none !important;
    }

    .table {
      table-layout: fixed;
      width: 100%;
    }

    .table thead th {
      vertical-align: middle;
      text-align: center;
    }

    .col-sl {
      width: 60px;
    }

    .col-roll {
      width: 90px;
    }

    .col-student {
      text-align: left;
    }

    .mark-input {
      max-width: 90px;
      width: 90px;
      margin: 0 auto;
      text-align: center;
    }

    .absent-checkbox {
      transform: scale(1.1);
    }

    .table-striped>tbody>tr:nth-of-type(odd) {
      background-color: #fbfbfb;
    }

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

    .total-absent {
      color: #d9534f;
      font-weight: 700;
    }

    .row-locked {
      opacity: .55;
    }
  </style>
@endsection

@section('admin')
  <div class="content-body">
    <div class="container-fluid">
      <h3 class="mb-4">Marks Entry</h3>

      @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
      @endif

      @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
      @endif

      {{-- ==================== Filter Card ==================== --}}
      <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">Filter & Load</h5>
          <div class="spinner" id="globalSpinner">
            <span class="badge bg-secondary">Loading...</span>
          </div>
        </div>

        <div class="card-body">
          <form id="filterForm" class="row g-3">
            @csrf

            <div class="col-md-3">
              <label class="form-label">Session</label>
              <select id="session_id" class="form-select" required>
                <option value="">-- Select Session --</option>
                @foreach($sessions as $s)
                  <option value="{{ $s->id }}" {{ $currentSession && $currentSession->id == $s->id ? 'selected' : '' }}>
                    {{ $s->name }} {{ $s->is_current ? '(Current)' : '' }}
                  </option>
                @endforeach
              </select>
            </div>

            <div class="col-md-3">
              <label class="form-label">Class</label>
              <select id="class_id" class="form-select" disabled required>
                <option value="">-- Select Class --</option>
                @foreach($classes as $c)
                  <option value="{{ $c->id }}">{{ $c->name }}</option>
                @endforeach
              </select>
            </div>

            <div class="col-md-3" id="groupWrap" style="display:none;">
              <label class="form-label">Group</label>
              <select id="group_id" class="form-select" disabled>
                <option value="">-- Select Group --</option>
              </select>
            </div>

            <div class="col-md-3">
              <label class="form-label">Section</label>
              <select id="section_id" class="form-select" disabled required>
                <option value="">-- Select Section --</option>
              </select>
            </div>

            <div class="col-md-3">
              <label class="form-label">Exam</label>
              <select id="exam_id" class="form-select" disabled required>
                <option value="">-- Select Exam --</option>
              </select>
            </div>

            <div class="col-md-3">
              <label class="form-label">Subject</label>
              <select id="subject_id" class="form-select" disabled required>
                <option value="">-- Select Subject --</option>
              </select>
            </div>

            <div class="col-md-6 d-flex align-items-end gap-2">
              <button type="button" id="btnLoad" class="btn btn-primary" disabled>
                <i class="fas fa-download me-1"></i> Load Students & Components
              </button>
              <button type="button" id="btnReset" class="btn btn-outline-secondary">
                <i class="fas fa-undo me-1"></i> Reset
              </button>
            </div>
          </form>
        </div>
      </div>

      {{-- ==================== Marks Entry ==================== --}}
      <div class="card is-hidden" id="marksCard">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">Marks Entry</h5>
          <div>
            <span class="badge bg-info" id="summaryBadge">0 students | 0 components</span>
          </div>
        </div>

        <div class="card-body">
          <div class="alert alert-warning is-hidden" id="noComponentsMsg">
            <i class="fas fa-exclamation-triangle me-1"></i>
            No exam components configured for this subject & exam.
          </div>

          <div class="alert alert-info is-hidden" id="prefillInfo">
            Existing marks found. Values are pre-filled; saving will update them.
          </div>

          <div class="table-responsive">
            <form id="marksForm">
              @csrf

              <input type="hidden" name="exam_id" id="form_exam_id">
              <input type="hidden" name="class_id" id="form_class_id">
              <input type="hidden" name="section_id" id="form_section_id">
              <input type="hidden" name="group_id" id="form_group_id">
              <input type="hidden" name="subject_id" id="form_subject_id">
              <input type="hidden" name="session_id" id="form_session_id">

              <table class="table table-striped align-middle text-dark" id="marksTable">
                <thead id="marksThead"></thead>
                <tbody id="marksTbody"></tbody>
              </table>

              <div class="d-flex justify-content-between align-items-center mt-3">
                <div class="text-muted" id="saveHint">Tip: Press Enter to move across; values auto-validated.</div>
                <div>
                  <button type="button" id="btnSave" class="btn btn-success">
                    <i class="fas fa-save me-1"></i> Save / Update Marks
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>

    </div>
  </div>
@endsection

@section('customjs')
  <script>
    (function () {
      const $ = (sel) => document.querySelector(sel);
      const $$ = (sel) => Array.from(document.querySelectorAll(sel));

      const spinner = $('#globalSpinner');
      const sessionSel = $('#session_id');
      const classSel = $('#class_id');
      const examSel = $('#exam_id');
      const sectionSel = $('#section_id');
      const groupWrap = $('#groupWrap');
      const groupSel = $('#group_id');
      const subjectSel = $('#subject_id');
      const btnLoad = $('#btnLoad');
      const btnReset = $('#btnReset');
      const marksCard = $('#marksCard');
      const noCompMsg = $('#noComponentsMsg');
      const prefillInfo = $('#prefillInfo');
      const summaryBadge = $('#summaryBadge');
      const marksThead = $('#marksThead');
      const marksTbody = $('#marksTbody');
      const btnSave = $('#btnSave');
      const formExamId = $('#form_exam_id');
      const formClassId = $('#form_class_id');
      const formSectionId = $('#form_section_id');
      const formGroupId = $('#form_group_id');
      const formSubjectId = $('#form_subject_id');
      const formSessionId = $('#form_session_id');

      // NEW:
      // existing marksheet route reuse করার জন্য base URL রাখা হয়েছে
      // এতে নতুন route/method না বানিয়েই save শেষে print page new tab-এ open করা যাবে
      const marksheetBaseUrl = "{{ url('/admin/exam/marksheet-rollwise') }}";

      let autoLoadTriggered = false;

      function setLoading(is) {
        spinner.style.display = is ? 'block' : 'none';
      }

      function resetSelect(sel, text) {
        sel.innerHTML = `<option value="">${text}</option>`;
        sel.disabled = true;
      }

      function show(el) {
        el.classList.remove('is-hidden');
      }

      function hide(el) {
        el.classList.add('is-hidden');
      }

      function resetAllBelow(level) {
        autoLoadTriggered = false;

        if (level === 'session') {

          groupWrap.style.display = 'none';
          resetSelect(groupSel, '-- Select Group --');
          resetSelect(sectionSel, '-- Select Section --');
          resetSelect(examSel, '-- Select Exam --');
          resetSelect(subjectSel, '-- Select Subject --');
        }

        if (level === 'class') {
          groupWrap.style.display = 'none';
          resetSelect(groupSel, '-- Select Group --');
          resetSelect(sectionSel, '-- Select Section --');
          resetSelect(examSel, '-- Select Exam --');
          resetSelect(subjectSel, '-- Select Subject --');
        }

        if (level === 'group') {
          resetSelect(sectionSel, '-- Select Section --');
          resetSelect(examSel, '-- Select Exam --');
          resetSelect(subjectSel, '-- Select Subject --');
        }

        if (level === 'section') {
          resetSelect(examSel, '-- Select Exam --');
        }

        hide(marksCard);
        marksThead.innerHTML = '';
        marksTbody.innerHTML = '';
      }

      async function fetchJSON(url) {
        const res = await fetch(url, {
          headers: { 'Accept': 'application/json' }
        });

        if (!res.ok) {
          throw new Error('Network error');
        }

        return await res.json();
      }

      // ============== ENTER to move to next field ==============
      document.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') {
          const active = document.activeElement;
          if (active && active.classList.contains('mark-input')) {
            e.preventDefault();
            const inputs = Array.from(document.querySelectorAll('.mark-input:not([disabled])'));
            const idx = inputs.indexOf(active);
            if (idx !== -1 && idx < inputs.length - 1) {
              inputs[idx + 1].focus();
              inputs[idx + 1].select();
            }
          }
        }
      });

      // NEW:
      // sequential entry helper রাখা হয়েছে যাতে একসাথে সব row edit না করে
      // step-by-step marks entry enforce করা যায়
      function rowInputs(tr) {
        return Array.from(tr.querySelectorAll('.mark-input'));
      }

      function rowAbsent(tr) {
        return tr.querySelector('.absent-checkbox');
      }

      function isRowComplete(tr) {
        const abs = rowAbsent(tr);
        if (abs && abs.checked) return true;

        return rowInputs(tr).some(i => (i.value ?? '').trim() !== '');
      }

      function setRowDisabled(tr, shouldDisable) {
        const abs = rowAbsent(tr);

        rowInputs(tr).forEach(i => {
          if (abs && abs.checked) {
            // NEW:
            // absent থাকলে inputs সবসময় disabled থাকবে
            // আগের absent logic যেনো break না হয় সেজন্য এই condition রাখা হয়েছে
            i.disabled = true;
          } else {
            i.disabled = !!shouldDisable;
          }
        });

        // NEW:
        // row lock থাকলে absent checkbox-ও disable করা হয়েছে
        // এতে পরের row unlock হওয়ার আগে previous row structure পরিবর্তন হবে না
        if (abs) abs.disabled = !!shouldDisable;

        tr.classList.toggle('row-locked', !!shouldDisable);
      }

      function applySequentialLocks() {
        const rows = Array.from(document.querySelectorAll('#marksTable tbody tr'));
        let firstIncompleteIdx = rows.findIndex(tr => !isRowComplete(tr));

        if (firstIncompleteIdx === -1) {
          firstIncompleteIdx = rows.length;
        }

        rows.forEach((tr, i) => {
          setRowDisabled(tr, i > firstIncompleteIdx);
        });
      }

      // ============== Session -> Class ==============
      sessionSel.addEventListener('change', function () {
        resetAllBelow('session');
        const sessionId = this.value;

        if (!sessionId) {
          btnLoad.disabled = true;
          return;
        }

        classSel.disabled = false;
        maybeEnableLoad();
      });

      // ============== Class -> Groups or Section ==============
      classSel.addEventListener('change', async function () {
        resetAllBelow('class');

        const classId = this.value;
        const sessionId = sessionSel.value;

        if (!classId || !sessionId) {
          btnLoad.disabled = true;
          return;
        }

        try {
          setLoading(true);

          const grp = await fetchJSON(`/admin/get-groups-by-class/${classId}`);
          const groups = grp.groups || [];

          if (groups.length) {
            groupWrap.style.display = 'block';
            resetSelect(groupSel, '-- Select Group --');

            groups.forEach(g => {
              const o = document.createElement('option');
              o.value = g.id;
              o.textContent = g.name;
              groupSel.appendChild(o);
            });

            groupSel.disabled = false;
            resetSelect(sectionSel, '-- Select Section --');
            resetSelect(examSel, '-- Select Exam --');
          } else {
            groupWrap.style.display = 'none';

            const sec = await fetchJSON(`/admin/get-sections-by-class/${classId}`);
            resetSelect(sectionSel, '-- Select Section --');

            (sec.sections || []).forEach(s => {
              const o = document.createElement('option');
              o.value = s.id;
              o.textContent = s.name;
              sectionSel.appendChild(o);
            });

            sectionSel.disabled = false;
            resetSelect(examSel, '-- Select Exam --');
          }
        } finally {
          setLoading(false);
        }

        maybeEnableLoad();
      });

      // ============== Exam -> Validate only ==============
      examSel.addEventListener('change', function () {
        maybeEnableLoad();
      });

      // ============== Section -> Exam (and Subjects if no group) ==============
      sectionSel.addEventListener('change', async function () {
        const classId = classSel.value;
        const sectionId = this.value;
        const sessionId = sessionSel.value;

        if (!classId || !sectionId || !sessionId) {
          btnLoad.disabled = true;
          return;
        }

        try {
          setLoading(true);

          const examData = await fetchJSON(`/admin/exams/by-session/${sessionId}`);
          resetSelect(examSel, '-- Select Exam --');

          const examsForClass = (examData.exams || []).filter(ex => ex.class && ex.class.id == classId);

          if (examsForClass.length === 0) {
            alert('No exams found for this session and class.');
            setLoading(false);
            return;
          }

          examsForClass.forEach(ex => {
            const o = document.createElement('option');
            o.value = ex.id;
            o.textContent = ex.exam_name;
            examSel.appendChild(o);
          });

          examSel.disabled = false;

          const hasGroup = groupWrap.style.display !== 'none' && groupSel.options.length > 1;

          if (!hasGroup) {
            await loadSubjects();
          }
        } finally {
          setLoading(false);
        }

        maybeEnableLoad();
      });

      // ============== Group -> Section & Subjects ==============
      groupSel.addEventListener('change', async function () {
        resetAllBelow('group');

        const classId = classSel.value;
        const groupId = this.value;

        if (!classId || !groupId) {
          btnLoad.disabled = true;
          return;
        }

        try {
          setLoading(true);

          const sec = await fetchJSON(`/admin/get-sections-by-class/${classId}`);
          resetSelect(sectionSel, '-- Select Section --');

          (sec.sections || []).forEach(s => {
            const o = document.createElement('option');
            o.value = s.id;
            o.textContent = s.name;
            sectionSel.appendChild(o);
          });

          sectionSel.disabled = false;
          await loadSubjects();
        } finally {
          setLoading(false);
        }

        maybeEnableLoad();
      });

      // ============== Subject -> Validate only ==============
      subjectSel.addEventListener('change', function () {
        maybeEnableLoad();
      });

      async function loadSubjects() {
        const cId = classSel.value;
        resetSelect(subjectSel, '-- Select Subject --');

        if (!cId) return;

        let url = `/admin/get-subjects-for-registration/${cId}`;
        const gId = (groupWrap.style.display !== 'none' && groupSel.value) ? groupSel.value : '';

        if (gId) {
          url += `?group_id=${gId}`;
        }

        try {
          const data = await fetchJSON(url);

          (data.subjects || []).forEach(s => {
            const o = document.createElement('option');
            o.value = s.id;
            o.textContent = s.name;
            subjectSel.appendChild(o);
          });

          subjectSel.disabled = false;
        } catch (e) {
          console.error('Failed to load subjects:', e);
        }
      }

      function maybeEnableLoad() {
        const hasGroup = groupWrap.style.display !== 'none' && groupSel.options.length > 1;
        let ok = false;

        if (hasGroup) {
          ok = !!(sessionSel.value && classSel.value && examSel.value && sectionSel.value && groupSel.value && subjectSel.value);
        } else {
          ok = !!(sessionSel.value && classSel.value && examSel.value && sectionSel.value && subjectSel.value);
        }

        btnLoad.disabled = !ok;

        if (ok && !autoLoadTriggered) {
          autoLoadTriggered = true;
          setTimeout(() => btnLoad.click(), 100);
        }
      }

      btnReset.addEventListener('click', () => {
        sessionSel.value = '';
        resetAllBelow('session');
        btnLoad.disabled = true;
        autoLoadTriggered = false;
      });

      // ============== Load Students & Components ==============
      btnLoad.addEventListener('click', async function () {
        const sessionId = sessionSel.value;
        const classId = classSel.value;
        const examId = examSel.value;
        const sectionId = sectionSel.value;
        const groupId = (groupWrap.style.display !== 'none') ? (groupSel.value || '') : '';
        const subjectId = subjectSel.value;

        if (!sessionId || !classId || !examId || !sectionId || !subjectId) {
          alert('Please select all required fields.');
          return;
        }

        setLoading(true);
        hide(marksCard);
        marksThead.innerHTML = '';
        marksTbody.innerHTML = '';
        hide(noCompMsg);
        hide(prefillInfo);

        try {
          const comp = await fetchJSON(`/admin/marks-entry/components?exam_id=${examId}&subject_id=${subjectId}`);
          const components = comp.components || [];

          if (!components.length) {
            show(noCompMsg);
            setLoading(false);
            return;
          }

          const stdUrl = groupId
            ? `/admin/students/by-class-section-group?session_id=${sessionId}&class_id=${classId}&section_id=${sectionId}&group_id=${groupId}&subject_id=${subjectId}`
            : `/admin/students/by-class-section?session_id=${sessionId}&class_id=${classId}&section_id=${sectionId}&subject_id=${subjectId}`;

          const std = await fetchJSON(stdUrl);
          const students = std.students || [];

          const existing = await fetchJSON(`/admin/marks-entry/existing?exam_id=${examId}&subject_id=${subjectId}&session_id=${sessionId}&class_id=${classId}&section_id=${sectionId}&group_id=${groupId}`);
          const marksMap = existing.marks || {};

          if (Object.keys(marksMap).length) {
            show(prefillInfo);
          }

          const headerRow = document.createElement('tr');
          headerRow.innerHTML = `
            <th class="col-sl">SL</th>
            <th>Student</th>
            <th class="col-roll">Roll</th>
            ${components.map(c => `<th>${c.component_name}<br><small>(${c.full_mark})</small></th>`).join('')}
            <th>Absent</th>
            <th>Total</th>
          `;
          marksThead.appendChild(headerRow);

          students.forEach((st, idx) => {
            const studentMarks = marksMap[st.id] || {};
            const hasAbsent = Object.keys(studentMarks).some(k => studentMarks[k]?.is_absent);
            const tr = document.createElement('tr');

            const compCells = components.map(c => {
              const val = (studentMarks[c.component_name]?.mark ?? '');
              return `
                <td>
                  <input
                    type="text"
                    class="form-control form-control-sm mark-input"
                    name="marks[${st.id}][${c.component_name}]"
                    data-full="${c.full_mark}"
                    value="${val}">
                </td>
              `;
            }).join('');

            tr.innerHTML = `
              <td class="text-center">${idx + 1}</td>
              <td>${st.name}</td>
              <td class="text-center">${st.roll ?? '-'}</td>
              ${compCells}
              <td class="text-center">
                <input type="checkbox" class="absent-checkbox" name="absent[${st.id}]" ${hasAbsent ? 'checked' : ''}>
              </td>
              <td class="text-center"><strong id="total_${st.id}">0</strong></td>
            `;

            marksTbody.appendChild(tr);

            tr.querySelectorAll('.mark-input').forEach(inp => {
              inp.addEventListener('input', function () {
                const full = parseFloat(this.dataset.full || 0);
                const val = parseFloat(this.value || 0);

                if (val > full) {
                  alert(`Value cannot exceed full mark (${full})`);
                  this.value = '';
                }

                recalcRowTotal(this);

                // NEW:
                // current row complete হলে পরের row unlock করার জন্য
                // sequential lock আবার apply করা হচ্ছে
                applySequentialLocks();
              });
            });

            const abs = tr.querySelector('.absent-checkbox');
            abs.addEventListener('change', function () {
              const inputs = tr.querySelectorAll('.mark-input');

              if (this.checked) {
                inputs.forEach(i => {
                  i.value = '';
                  i.disabled = true;
                });
              } else {
                inputs.forEach(i => i.disabled = false);
              }

              recalcRowTotal(tr.querySelector('.mark-input'));

              // NEW:
              // absent tick/untick করার পর row completion status বদলে যায়
              // তাই lock state refresh করা প্রয়োজন
              applySequentialLocks();
            });
          });

          function recalcRowTotal(inp) {
            const tr = inp.closest('tr');
            const totalCell = tr.querySelector('strong[id^="total_"]');
            const abs = tr.querySelector('.absent-checkbox');

            if (abs.checked) {
              totalCell.textContent = 'A';
              totalCell.classList.add('total-absent');
              return;
            }

            let sum = 0;
            tr.querySelectorAll('.mark-input').forEach(i => {
              const v = parseFloat(i.value);
              if (!isNaN(v)) sum += v;
            });

            totalCell.textContent = sum > 0 ? sum.toFixed(2) : '';
            totalCell.classList.remove('total-absent');
          }

          $$('#marksTable tbody tr').forEach(row => {
            const first = row.querySelector('.mark-input');
            if (first) recalcRowTotal(first);
          });

          // NEW:
          // prefilled data বা newly loaded rows-এর উপর initial lock apply করার জন্য
          // page load-এর পর কোন row editable হবে তা ঠিক করে
          applySequentialLocks();

          summaryBadge.textContent = `${students.length} students | ${components.length} components`;
          formExamId.value = examId;
          formClassId.value = classId;
          formSectionId.value = sectionId;
          formGroupId.value = groupId;
          formSubjectId.value = subjectId;
          formSessionId.value = sessionId;

          show(marksCard);
        } catch (e) {
          alert('Error loading data: ' + e.message);
        } finally {
          setLoading(false);
        }
      });

      // ============== Save Marks ==============
      btnSave.addEventListener('click', async function () {
        const form = $('#marksForm');
        const formData = new FormData(form);
        const rows = $$('#marksTable tbody tr');
        let invalid = false;

        rows.forEach(tr => {
          const marks = tr.querySelectorAll('input.mark-input');
          const abs = tr.querySelector('.absent-checkbox')?.checked;
          const hasVal = Array.from(marks).some(i => i.value.trim() !== '');

          if (!abs && !hasVal) {
            invalid = true;
            tr.style.backgroundColor = '#ffeaea';
          } else {
            tr.style.backgroundColor = '';
          }
        });

        if (invalid) {
          alert('⚠️ প্রতিটি ছাত্রের জন্য মার্ক দিন অথবা “Absent” টিক দিন!');
          return;
        }

        try {
          setLoading(true);

          const res = await fetch('/admin/marks-entry/store', {
            method: 'POST',
            headers: {
              'X-CSRF-TOKEN': form.querySelector('input[name="_token"]').value
            },
            body: formData
          });

          const data = await res.json();

          if (!res.ok) {
            throw new Error(data.message || 'Failed to save marks.');
          }

          toastr.success(data.message || 'Marks saved successfully.');

          const examId = formExamId.value;
          const classId = formClassId.value;
          const sectionId = formSectionId.value;
          const subjectId = formSubjectId.value;
          const groupId = formGroupId.value;

          // NEW:
          // save এর পর existing marksheet route reuse করে print page open করা হচ্ছে
          // এতে নতুন controller method বা route লাগছে না
          let printUrl = `${marksheetBaseUrl}/${examId}/${classId}/${sectionId}/${subjectId}?autoprint=1`;

          // NEW:
          // group-based subject হলে same print route-এ group query param পাঠানো হচ্ছে
          // এতে group wise marksheet-ও existing method দিয়েই render হবে
          if (groupId) {
            printUrl += `&group=${encodeURIComponent(groupId)}`;
          }

          // NEW:
          // new tab-এ marksheet open করার জন্য window.open use করা হয়েছে
          // current marks entry page বন্ধ না করে print dialog চালানোর সুবিধা হবে
          window.open(printUrl, '_blank');

          hide(marksCard);
          marksThead.innerHTML = '';
          marksTbody.innerHTML = '';
          hide(prefillInfo);
          autoLoadTriggered = false;
        } catch (e) {
          alert(e.message || 'Failed to save marks.');
        } finally {
          setLoading(false);
        }
      });

      if (sessionSel.value) {
        classSel.disabled = false;
      }
    })();
  </script> 
@endsection