@extends('admin.admin_dashboard')

@section('customcss')
<style>
  .is-hidden { display: none !important; }
  .table th, .table td { vertical-align: middle; }
</style>
@endsection

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

    {{-- Filter Card --}}
    <div class="card mb-4">
      <div class="card-body">
        <form id="filterForm" class="row g-3">
          @csrf

          {{-- Session --}}
          <div class="col-md-4">
            <label class="form-label">Session</label>
            <select id="session_id" class="form-select">
              <option value="">-- Select Session --</option>
              @foreach($sessions as $s)
                <option value="{{ $s->id }}">{{ $s->name }}</option>
              @endforeach
            </select>
          </div>

          {{-- Exam --}}
          <div class="col-md-4">
            <label class="form-label">Exam</label>
            <select id="exam_id" class="form-select">
              <option value="">-- Select Exam --</option>
            </select>
          </div>

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

          <div class="col-md-3 mt-2">
            <button type="button" id="btnLoad" class="btn btn-primary">Calculate & Load</button>
          </div>
        </form>
      </div>
    </div>

    {{-- Result Table --}}
    <div class="card is-hidden" id="resultCard">
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered" id="resultTable">
            <thead></thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>

  </div>
</div>
@endsection

@section('customjs')
<script>
(function(){
  const $ = sel=>document.querySelector(sel);
  const sessionSel = $('#session_id');
  const examSel    = $('#exam_id');
  const classSel   = $('#class_id');
  const btnLoad    = $('#btnLoad');
  const resultCard = $('#resultCard');
  const resultTable= $('#resultTable');

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

  // Session -> Exams
  sessionSel.addEventListener('change', async function(){
    const sessionId = this.value;
    resetSelect(examSel, '-- Select Exam --');
    classSel.value = '';

    if(!sessionId) return;

    try{
      const res = await fetch(`/admin/exams/by-session/${sessionId}`, { headers:{'Accept':'application/json'} });
      const data = await res.json();
      (data.exams||[]).forEach(ex=>{
        const opt = document.createElement('option');
        opt.value = ex.id;
        opt.textContent = `${ex.exam_name} ${ex.exam_type ? '('+ex.exam_type.name+')':''} ${ex.class ? '('+ex.class.name+')':''}`;
        opt.dataset.classId = ex.class?.id ?? '';
        examSel.appendChild(opt);
      });
    }catch(e){ console.error(e); alert('Failed to load exams'); }
  });

  // Exam -> Class auto-select
  examSel.addEventListener('change', function(){
    const exOpt = this.options[this.selectedIndex];
    const classId = exOpt.dataset.classId;
    classSel.value = classId;
  });

  // Load Term Result
  btnLoad.addEventListener('click', async function(){
    const sessionId = sessionSel.value;
    const examId    = examSel.value;
    const classId   = classSel.value;

    if(!sessionId || !examId || !classId){
      alert('Please complete all filters'); return;
    }

    try{
      const res = await fetch(`/admin/reports/term-result/fetch?session_id=${sessionId}&class_id=${classId}&exam_id=${examId}`, {
        headers:{'Accept':'application/json'}
      });
      const data = await res.json();
      if(data.success){
        resultCard.classList.remove('is-hidden');

        const tableRes = await fetch(`/admin/marks-entry/term-result-table?session_id=${sessionId}&class_id=${classId}&exam_id=${examId}`, {
          headers:{'Accept':'application/json'}
        });
        const tableJson = await tableRes.json();
        resultTable.innerHTML = tableJson.html;
      } else {
        alert(data.message || 'Term result calculation failed');
      }
    }catch(e){ console.error(e); alert('Failed to load term result'); }
  });

})();
</script>
@endsection