@extends('teacher.teacher_dashboard')

@section('admin')
<style>
/* =========================================================
   ✅ MOBILE: 6 columns visible on one screen (NO H-scroll)
   Columns: SL | Name | Roll | P | A | N | Remark (compact)
   ========================================================= */
@media (max-width: 576px){

  /* make table fit screen */
  .attendance-table{
    width: 100% !important;
    table-layout: fixed !important;  /* important */
    font-size: 11px;
  }

  .attendance-table th,
  .attendance-table td{
    padding: 2px 3px !important;
    vertical-align: middle;
    border-color: rgba(0,0,0,.08);
  }

  /* fixed widths so 6 columns fit */
  .attendance-table .sl-col{ width: 26px; text-align:center; }
  .attendance-table .name-col{
    width: 110px;                /* name stays readable by wrapping */
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.1;
  }
  .attendance-table .roll-col{ width: 34px; text-align:center; }

  .attendance-table .status-col{ width: 34px; text-align:center; } /* P/A/N */
  .attendance-table .remark-col{ width: 70px; }                    /* compact remark */

  /* Header compact: hide "All" text on mobile (design not changed, only small text hidden) */
  .attendance-table thead small{ display:none !important; }
  .attendance-table thead br{ display:none !important; }

  /* shrink checkbox + radio for touch */
  #select_all_present, #select_all_absent, #select_all_notset{
    transform: scale(.85);
    margin-left: 2px;
  }

  .attendance-table input[type="radio"]{
    transform: scale(.85);
    margin: 0;
  }

  /* remark input compact + prevent iOS zoom */
  .attendance-table .remark{
    font-size: 16px;     /* iOS zoom prevent */
    height: 26px;
    padding: 2px 4px;
  }
}

/* Desktop/tablet unchanged */
</style>

<div class="content-body">
  <div class="container-fluid">

    <!-- ==================  FILTER CARD ================== -->
    <div class="card mb-4 shadow-sm">
      <div class="card-header bg-primary text-white">
        <h5 class="mb-0">Take Student Attendance</h5>
      </div>
      <div class="card-body">
        <div class="row g-3">

          {{-- 🔥 SESSION --}}
          <div class="col-md-3">
            <label>Session</label>
            <select id="session_id" 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="class_id" class="form-select">
              <option value="">Select Class</option>
            </select>
          </div>

          {{-- 🔥 SECTION --}}
          <div class="col-md-3">
            <label>Section</label>
            <select id="section_id" class="form-select">
              <option value="">Select Section</option>
            </select>
          </div>

          <div class="col-md-3">
            <label>Date</label>
            <input type="date" id="attendance_date" class="form-control" value="{{ date('Y-m-d') }}">
          </div>
        </div>

        <button class="btn btn-success mt-3" id="load_students">Load Students</button>
      </div>
    </div>

    <!-- ================== ATTENDANCE CARD ================== -->
    <div class="card shadow-sm" id="attendance_card" style="display:none;">
      <div class="card-header bg-info text-white">
        <h5 class="mb-0">Student Attendance List</h5>
      </div>
      <div class="card-body">

        <table class="table table-bordered table-hover attendance-table">
          <thead>
            <tr>
              <th class="sl-col">#SL</th>
              <th class="name-col">Name</th>
              <th class="roll-col">Roll</th>

              <th class="status-col text-center">
                P
                <input type="checkbox" id="select_all_present" title="Select All Present">
                <small>All</small>
              </th>

              <th class="status-col text-center">
                A
                <input type="checkbox" id="select_all_absent" title="Select All Absent">
                <small>All</small>
              </th>

              <th class="status-col text-center">
                N
                <input type="checkbox" id="select_all_notset" title="Select All Not Set">
                <small>All</small>
              </th>

              <th class="remark-col">Remark</th>
            </tr>
          </thead>

          <tbody id="attendance_table_body"></tbody>
        </table>

        <div class="mt-3">
          <span class="badge bg-primary">Total: <span id="total_students">0</span></span>
          <span class="badge bg-success">Present: <span id="total_present">0</span></span>
          <span class="badge bg-danger">Absent: <span id="total_absent">0</span></span>
        </div>

        <button class="btn btn-primary mt-3" id="save_attendance">Save Attendance</button>
      </div>
    </div>

  </div>
</div>
@endsection


@section('customjs')
<meta name="csrf-token" content="{{ csrf_token() }}">

<script>
document.addEventListener('DOMContentLoaded', function () {

    /*===========================================================
      🔥 When SESSION changed → Load Classes
    ===========================================================*/
    document.getElementById('session_id').addEventListener('change', function () {
        fetch('{{ route("teacher.all_attendance.getClasses") }}', {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ session_id: this.value })
        })
        .then(res => res.json())
        .then(data => {
            let cls = `<option value="">Select Class</option>`;
            data.forEach(c => cls += `<option value="${c.id}">${c.name}</option>`);
            document.getElementById('class_id').innerHTML = cls;
            document.getElementById('section_id').innerHTML = `<option value="">Select Section</option>`;
        });
    });

    // Auto-load classes if current session is selected
    const sessionSelect = document.getElementById('session_id');
    if (sessionSelect.value) {
        sessionSelect.dispatchEvent(new Event('change'));
    }

    /*===========================================================
      🔥 When CLASS changed → Load Sections
    ===========================================================*/
    document.getElementById('class_id').addEventListener('change', function () {
        let sessionId = document.getElementById('session_id').value;

        fetch('{{ route("teacher.all_attendance.getSections") }}', {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ class_id: this.value, session_id: sessionId })
        })
        .then(res => res.json())
        .then(data => {
            let sec = `<option value="">Select Section</option>`;
            data.forEach(s => sec += `<option value="${s.id}">${s.name}</option>`);
            document.getElementById('section_id').innerHTML = sec;
        });

    });

    /*===========================================================
      🔥 Load Students Attendance via AJAX
    ===========================================================*/
    document.getElementById('load_students').addEventListener('click', function () {
        const date = document.getElementById('attendance_date').value;
        const sessionId = document.getElementById('session_id').value;
        const classId = document.getElementById('class_id').value;
        const sectionId = document.getElementById('section_id').value;

        if (!date || !sessionId || !classId || !sectionId) return alert('Please fill all fields');

        fetch('{{ route('teacher.all_attendance.loadStudents') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ date, session_id: sessionId, class_id: classId, section_id: sectionId })
        })
        .then(res => res.json())
        .then(data => {
            let tbody = "";

            if (data.students.length === 0){
                tbody = `<tr><td colspan="7" class="text-center text-muted">No students found</td></tr>`;
            } else {
                data.students.forEach((std, index) => {
                    let status = data.attendance[std.id]?.status ?? 'not_set';
                    tbody += `
                    <tr>
                        <td class="sl-col">${index + 1}</td>
                        <td class="name-col">${std.name}</td>
                        <td class="roll-col">${std.class_roll}</td>

                        <td class="status-col text-center"><input type="radio" name="attendance_${std.id}" value="present" ${status=='present'?'checked':''}></td>
                        <td class="status-col text-center"><input type="radio" name="attendance_${std.id}" value="absent" ${status=='absent'?'checked':''}></td>
                        <td class="status-col text-center"><input type="radio" name="attendance_${std.id}" value="not_set" ${status=='not_set'?'checked':''}></td>

                        <td class="remark-col">
                          <input type="text" class="form-control remark" data-student="${std.id}" value="${data.attendance[std.id]?.remark ?? ''}">
                        </td>
                    </tr>`;
                });
            }

            document.getElementById('attendance_table_body').innerHTML = tbody;
            document.getElementById('attendance_card').style.display = 'block';
            summary();
        });
    });

    /*===========================================================
      🔥 Save Attendance
    ===========================================================*/
    document.getElementById('save_attendance').addEventListener('click', function () {
        const rows = document.querySelectorAll('#attendance_table_body tr');
        let attendance = {}, remarks = {};

        rows.forEach(row => {
            let id = row.querySelector('input[type=radio]').name.split('_')[1];
            let status = row.querySelector(`input[name="attendance_${id}"]:checked`);
            attendance[id] = status ? status.value : 'not_set';
            remarks[id] = row.querySelector('.remark')?.value ?? '';
        });

        fetch('{{ route('teacher.all_attendance.store') }}', {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                attendance_date: attendance_date.value,
                session_id: session_id.value,
                class_id: class_id.value,
                section_id: section_id.value,
                attendance, remarks
            })
        })
        .then(r => r.json())
        .then(d => alert(d.message));
    });

    /*===========================================================
      Summary Update
    ===========================================================*/
    function summary() {
        let present = 0, absent = 0;
        document.querySelectorAll('#attendance_table_body tr').forEach(r=>{
            let id = r.querySelector('input[type="radio"]').name.split('_')[1];
            let sel = r.querySelector(`input[name="attendance_${id}"]:checked`);
            if(sel?.value=='present') present++;
            if(sel?.value=='absent') absent++;
        });
        document.getElementById('total_students').innerText = document.querySelectorAll('#attendance_table_body tr').length;
        document.getElementById('total_present').innerText = present;
        document.getElementById('total_absent').innerText = absent;
    }

    document.addEventListener('change', e=>{
        if(e.target.type=='radio') summary();
    });

    /*===========================================================
      🔥 Select All Present / Absent / Not Set
    ===========================================================*/
    document.addEventListener('click', function(e) {
        if (e.target.id === 'select_all_present') {
            document.querySelectorAll('#attendance_table_body tr').forEach(row => {
                row.querySelector('input[type=radio][value="present"]')?.click();
            });
            document.getElementById('select_all_absent').checked = false;
            document.getElementById('select_all_notset').checked = false;
            summary();
        }

        if (e.target.id === 'select_all_absent') {
            document.querySelectorAll('#attendance_table_body tr').forEach(row => {
                row.querySelector('input[type=radio][value="absent"]')?.click();
            });
            document.getElementById('select_all_present').checked = false;
            document.getElementById('select_all_notset').checked = false;
            summary();
        }

        if (e.target.id === 'select_all_notset') {
            document.querySelectorAll('#attendance_table_body tr').forEach(row => {
                row.querySelector('input[type=radio][value="not_set"]')?.click();
            });
            document.getElementById('select_all_present').checked = false;
            document.getElementById('select_all_absent').checked = false;
            summary();
        }
    });

});
</script>
@endsection