@extends('admin.admin_dashboard')

@section('admin')
<div class="content-body default-height" x-data="examMarksReview()">
  <div class="container-fluid">

    {{-- 🔹 Filter Section --}}
    <div class="filter cm-content-box box-primary mb-4">
      <div class="content-title SlideToolHeader">
        <div class="cpa"><i class="fa fa-filter me-2"></i>Filter Option </div>
      </div>
      <div class="cm-content-body form excerpt">
        <div class="card-body">
          <div class="row g-3">
            {{-- Session --}}
            <div class="col-md-2">
              <label class="form-label fw-bold">Session</label>
              <select class="form-control" x-model="filters.session_id" @change="onSessionChange()">
                <option value="">Select Session</option>
                @foreach($sessions as $s)
                  <option value="{{ $s->id }}" {{ $currentSession && $currentSession->id == $s->id ? 'selected' : '' }}>
                    {{ $s->name }}
                  </option>
                @endforeach
              </select>
            </div>

            {{-- Class --}}
            <div class="col-md-2">
              <label class="form-label fw-bold">Class</label>
              <select class="form-control" x-model="filters.class_id" @change="onClassChange()">
                <option value="">Select Class</option>
                @foreach($classes as $c)
                  <option value="{{ $c->id }}">{{ $c->name }}</option>
                @endforeach
              </select>
            </div>

            {{-- Section --}}
            <div class="col-md-2">
              <label class="form-label fw-bold">Section <span x-show="sections.length > 0" class="badge bg-success" x-text="`${sections.length} found`"></span></label>
              <select class="form-control" x-model="filters.section_id" :disabled="!filters.class_id" @change="loadExamSubjects()">
                <option value="">All Sections</option>
                <template x-for="sec in sections" :key="sec.id">
                  <option :value="sec.id" x-text="sec.name"></option>
                </template>
              </select>
            </div>

            {{-- Group --}}
            <div class="col-md-2">
              <label class="form-label fw-bold">Group <small>(optional)</small> <span x-show="groups.length > 0" class="badge bg-info" x-text="`${groups.length} found`"></span></label>
              <select class="form-control" x-model="filters.group_id" :disabled="!filters.class_id" @change="loadExamSubjects()">
                <option value="">All Groups</option>
                <template x-for="grp in groups" :key="grp.id">
                  <option :value="grp.id" x-text="grp.name"></option>
                </template>
              </select>
            </div>

            {{-- Exam --}}
            <div class="col-md-2">
              <label class="form-label fw-bold">Exam <span x-show="exams.length > 0" class="badge bg-primary" x-text="`${exams.length} found`"></span></label>
              <select class="form-control" x-model="filters.exam_id" :disabled="!filters.class_id" @change="loadExamSubjects()">
                <option value="">Select Exam</option>
                <template x-for="ex in exams" :key="ex.id">
                  <option :value="ex.id" x-text="ex.exam_name"></option>
                </template>
              </select>
            </div>

            {{-- Marks Entry Status --}}
            <div class="col-md-2">
              <label class="form-label fw-bold">Marks Entry Status</label>
              <select class="form-control" x-model="filters.marks_status" @change="loadExamSubjects()">
                <option value="">All Status</option>
                <option value="completed">Completed</option>
                <option value="pending">Pending</option>
              </select>
            </div>
          </div>
          
          <div class="row mt-3">
            <div class="col-md-12">
              <button class="btn btn-primary" type="button" @click="loadExamSubjects()" :disabled="!filters.exam_id">
                <i class="fa fa-search me-1"></i>Load Data
              </button>
              <button class="btn btn-secondary ms-2" type="button" @click="resetFilters()">
                <i class="fa fa-redo me-1"></i>Reset
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- 🔹 Exam + Subject Table --}}
    <div class="filter cm-content-box box-primary mt-3">
      <div class="content-title SlideToolHeader d-flex justify-content-between align-items-center">
        <div class="cpa">
          <i class="fa fa-table me-2"></i>Exam-wise Subject List
        </div>

        {{-- ✅ Search Box --}}
        <div class="search-box">
          <input type="text" class="form-control form-control-sm" placeholder="Search here..."
                 x-model="searchQuery" style="width: 220px;">
        </div>
      </div>

      <div class="cm-content-body form excerpt">
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-bordered table-striped text-center align-middle">
              <thead class="table-light">
                <tr>
                  <th>Exam Name</th>
                  <th>Class</th>
                  <th>Section</th>
                  <th>Group</th>
                  <th>Subject</th>
                  <th>Marks Entry Status</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <template x-if="!filteredSubjects.length">
                  <tr><td colspan="7" class="text-muted py-4">No data found</td></tr>
                </template>

                <template x-for="(item, i) in filteredSubjects" :key="i">
                  <tr>
                    <td x-text="item.exam_name"></td>
                    <td x-text="item.class_name"></td>
                    <td x-text="item.section_name"></td>
                    <td x-text="item.group_name || '-'"></td>
                    <td x-text="item.subject_name"></td>
                    <td>
                      <span class="badge" :class="item.marks_entered ? 'badge-success' : 'badge-warning'" 
                            x-text="item.marks_entered ? 'Completed' : 'Pending'"></span>
                      <br><small class="text-muted" x-show="item.debug_student_count !== undefined">
                        Students: <span x-text="item.debug_student_count"></span> | 
                        Marks: <span x-text="item.debug_marks_count || 0"></span>
                      </small>
                    </td>
                    <td>
                      <div class="dropdown">
                        <button class="btn btn-success btn-sm dropdown-toggle" data-bs-toggle="dropdown">Action</button>
                        <ul class="dropdown-menu dropdown-menu-end"
																style="position: absolute !important;">
                          <li><a class="dropdown-item"
                            :href="`/admin/exam/marksheet/${item.exam_id}/${item.class_id}/${item.section_id}/${item.subject_id}`"
                            target="_blank">Mark Sheet</a></li>
                          <li><a class="dropdown-item"
                            :href="`/admin/exam/marksheet-rollwise/${item.exam_id}/${item.class_id}/${item.section_id}/${item.subject_id}`"
                            target="_blank">Roll-wise Sheet</a></li>
                        </ul>
                      </div>
                    </td>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
@endsection

@section('customjs')
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script>
function examMarksReview(){
  return {
    filters:{
      session_id: '{{ $currentSession->id ?? "" }}',
      class_id:'',
      section_id:'',
      group_id:'',
      exam_id:'',
      marks_status:''
    },
    sections:[],
    groups:[],
    exams:[],
    examSubjects:[],
    searchQuery:'',

    csrf(){return document.querySelector('meta[name=csrf-token]').getAttribute('content');},

    init() {
      console.log('Alpine.js initialized', this.filters);
    },

    onSessionChange(){ 
      console.log('Session changed:', this.filters.session_id);
      this.sections = [];
      this.groups = [];
      this.exams = []; 
      this.examSubjects = []; 
      this.filters.class_id = '';
      this.filters.section_id = '';
      this.filters.group_id = '';
      this.filters.exam_id = ''; 
    },

    async onClassChange(){
      console.log('Class changed:', this.filters.class_id);
      console.log('Session:', this.filters.session_id);
      
      this.filters.section_id = '';
      this.filters.group_id = '';
      this.filters.exam_id = '';
      this.sections = [];
      this.groups = [];
      this.exams = [];
      this.examSubjects = [];
      
      if(!this.filters.session_id || !this.filters.class_id) {
        console.log('Session or Class not selected');
        return;
      }
      
      try {
        // Load sections
        const sectionsRes = await fetch(`{{ route('exam.marks.sectionsByClass') }}`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': this.csrf()
          },
          body: JSON.stringify({
            session_id: this.filters.session_id, 
            class_id: this.filters.class_id
          })
        });
        const sectionsData = await sectionsRes.json();
        this.sections = sectionsData.sections || [];
        console.log('Sections loaded:', this.sections);
        
        // Load groups
        const groupsRes = await fetch(`{{ route('exam.marks.groupsByClass') }}`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': this.csrf()
          },
          body: JSON.stringify({
            session_id: this.filters.session_id, 
            class_id: this.filters.class_id
          })
        });
        const groupsData = await groupsRes.json();
        this.groups = groupsData.groups || [];
        console.log('Groups loaded:', this.groups);
        
        // Load exams
        const examsRes = await fetch(`{{ route('exam.marks.examsBySessionAndClass') }}`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': this.csrf()
          },
          body: JSON.stringify({
            session_id: this.filters.session_id,
            class_id: this.filters.class_id
          })
        });
        const examsData = await examsRes.json();
        this.exams = examsData.exams || [];
        console.log('Exams loaded:', this.exams);
        
      } catch (error) {
        console.error('Error loading data:', error);
        alert('Error loading data. Check console for details.');
      }
    },

    async loadExamSubjects(){
      if(!this.filters.exam_id || !this.filters.class_id) {
        console.log('Exam or Class not selected');
        return;
      }
      
      const payload = {
        exam_id: this.filters.exam_id,
        class_id: this.filters.class_id,
        section_id: this.filters.section_id || null,
        group_id: this.filters.group_id || null,
        marks_status: this.filters.marks_status || null
      };
      
      console.log('Loading subjects with payload:', payload);
      
      try {
        const response = await fetch(`{{ route('exam.marks.examSubjectList') }}`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': this.csrf()
          },
          body: JSON.stringify(payload)
        });
        const data = await response.json();
        this.examSubjects = data.list || [];
        console.log('Subjects loaded:', this.examSubjects);
      } catch (error) {
        console.error('Error loading subjects:', error);
        alert('Error loading subjects. Check console for details.');
      }
    },

    resetFilters(){
      this.filters = {
        session_id: '{{ $currentSession->id ?? "" }}',
        class_id:'',
        section_id:'',
        group_id:'',
        exam_id:'',
        marks_status:''
      };
      this.sections = [];
      this.groups = [];
      this.exams = [];
      this.examSubjects = [];
      this.searchQuery = '';
      console.log('Filters reset');
    },

    /* ✅ Local JS Search Filter */
    get filteredSubjects(){
      if(!this.searchQuery) return this.examSubjects;
      const q = this.searchQuery.toLowerCase();
      return this.examSubjects.filter(item =>
        (item.exam_name && item.exam_name.toLowerCase().includes(q)) ||
        (item.class_name && item.class_name.toLowerCase().includes(q)) ||
        (item.section_name && item.section_name.toLowerCase().includes(q)) ||
        (item.group_name && item.group_name.toLowerCase().includes(q)) ||
        (item.subject_name && item.subject_name.toLowerCase().includes(q))
      );
    },
  }
}
</script>
@endsection