@extends('admin.admin_dashboard')

@section('customcss')
<style>
.card {
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    margin-bottom: 10px;
}
.table thead th {
    background: #f1f3f5;
    font-weight: 500;
    text-align: center;
    font-size: 12px;
}
.table tbody td {
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
}
.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    flex-wrap: wrap;
    gap: 10px;
}
.pagination li a,
.pagination li span {
    padding: 6px 12px;
    font-size: 13px;
}
/* search box */
#liveSearch {
    max-width: 260px;
    border-radius: 6px;
    border: 1px solid #ccc;
    height: 36px;
    padding-left: 35px;
    background: url('https://cdn-icons-png.flaticon.com/512/622/622669.png') no-repeat 8px center / 16px;
}
#liveSearch:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.1rem rgba(13,110,253,.25);
}
</style>
@endsection

@section('admin')
<div class="content-body">
  <div class="container-fluid">

    {{-- 🔹 Filter --}}
    <div class="row mb-3">
      <div class="col-12">
        <div class="card">
          <div class="card-header"><h4 class="card-title">Filter Exams</h4></div>
          <div class="card-body">
            <div class="row g-3">
              {{-- Session --}}
              <div class="col-md-3">
                <label>Session</label>
                <select id="filter_session" class="form-select">
                  <option value="">-- Select Session --</option>
                  @foreach($sessions as $session)
                    <option value="{{ $session->id }}"
                      {{ $currentSession && $currentSession->id == $session->id ? 'selected' : '' }}>
                      {{ $session->name }}
                    </option>
                  @endforeach
                </select>
              </div>

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

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

              {{-- 🔎 Live Search (client-side) --}}
              <div class="col-md-3">
                <label>Search</label>
                <input type="text" id="liveSearch" class="form-control" placeholder="Search by name, class, type...">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- 🔹 Table --}}
    <div class="row">
      <div class="col-12">
        <div id="examTableContainer">
          @include('admin.reports.all_result.partials.exam_table', ['exams' => $exams])
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('customjs')
<script>
$(document).ready(function(){

  // ========= Helpers =========
  function bindLiveSearch(){
    // unbind then bind to avoid duplicates after ajax loads
    $(document).off('input', '#liveSearch').on('input', '#liveSearch', function(){
      const q = $(this).val().toLowerCase();
      let visible = 0;

      $('#examTableContainer tbody tr').each(function(){
        const rowText = $(this).text().toLowerCase();
        const match = rowText.indexOf(q) > -1;
        $(this).toggle(match);
        if (match) visible++;
      });

      if (!visible) {
        if (!$('#noResultsRow').length) {
          $('#examTableContainer tbody').append(
            '<tr id="noResultsRow"><td colspan="5" class="text-center text-danger">No matching exams found</td></tr>'
          );
        }
      } else {
        $('#noResultsRow').remove();
      }
    });
  }

  function runFilter(url = "{{ route('admin.all.exam.result.filter') }}"){
    $.ajax({
      url: url,
      type: "POST",
      data: {
        session_id: $('#filter_session').val(),
        class_id: $('#filter_class').val(),
        exam_id: $('#filter_exam').val(),
        _token: '{{ csrf_token() }}'
      },
      success: function (response) {
        $('#examTableContainer').html(response.html);
        // re-apply live search to the freshly loaded table (and apply current query if any)
        bindLiveSearch();
        const q = $('#liveSearch').val();
        if (q) { $('#liveSearch').trigger('input'); }
      }
    });
  }

  function loadExamsForSessionClass(){
    const session_id = $('#filter_session').val();
    const class_id   = $('#filter_class').val();
    const examSelect = $('#filter_exam');

    examSelect.prop('disabled', true).html('<option value="">Loading...</option>');

    if (!session_id || !class_id) {
      examSelect.html('<option value="">-- Select Exam --</option>').prop('disabled', true);
      // auto filter (session/class may have changed → filter with what we have)
      runFilter();
      return;
    }

    $.ajax({
      url: "{{ route('exam.marks.examsBySessionAndClass') }}",
      type: "POST",
      data: { session_id, class_id, _token: '{{ csrf_token() }}' },
      success: function(res){
        examSelect.empty().append('<option value="">-- Select Exam --</option>');
        if(res.exams && res.exams.length){
          res.exams.forEach(ex => examSelect.append(`<option value="${ex.id}">${ex.exam_name}</option>`));
          examSelect.prop('disabled', false);
        } else {
          examSelect.html('<option value="">No exams found</option>');
        }
        // auto filter right after exams loaded
        runFilter();
      },
      error: function(){
        examSelect.html('<option value="">Error loading exams</option>');
        runFilter();
      }
    });
  }

  // ========= Auto Filter Triggers =========
  // 1) Session change → load exams for that session+class and filter
  $('#filter_session').on('change', function(){
    // reset selected exam when session changes
    $('#filter_exam').val('');
    loadExamsForSessionClass();
  });

  // 2) Class change → load exams for that session+class and filter
  $('#filter_class').on('change', function(){
    $('#filter_exam').val('');
    loadExamsForSessionClass();
  });

  // 3) Exam change → just filter
  $('#filter_exam').on('change', function(){
    runFilter();
  });

  // 4) Ajax Pagination (keeps filters + reapplies live search)
  $(document).on('click', '#examTableContainer .pagination a', function (e) {
    e.preventDefault();
    const url = $(this).attr('href');
    runFilter(url); // posts with same filters to that page url (GET also supported by controller response)
  });

  // Initial binds
  bindLiveSearch();

  // Optional: first load – if current session is preselected, we keep initial table.
  // If you want to force filter immediately on page load, uncomment next line:
  // runFilter();
});
</script>
@endsection