<?php
/**
 * Attendance Edit Modal
 *
 * @param array  $student   Student data
 * @param int    $classId   Class ID
 * @param int    $sectionId Section ID
 * @param string $sid       Student ID
 */
?>

<!-- Modal -->
<div class="modal fade" id="editAttendanceModal-<?= $sid ?>" tabindex="-1"
     aria-labelledby="editAttendanceModalLabel-<?= $sid ?>" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editAttendanceModalLabel-<?= $sid ?>">
          Edit Attendance for <?= esc($student['firstname'] . ' ' . $student['lastname']) ?>
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <form action="<?= base_url('attendance/update') ?>" method="post">
          <?= csrf_field() ?>
          <input type="hidden" name="student_id" value="<?= $sid ?>">
          <input type="hidden" name="class_id" value="<?= $classId ?>">
          <input type="hidden" name="class_section_id" value="<?= $sectionId ?>">

          <div class="mb-3">
            <label for="status-<?= $sid ?>" class="form-label">Status</label>
            <select name="status" class="form-select attendance-status" id="status-<?= $sid ?>" required>
              <option value="present">Present</option>
              <option value="late">Late</option>
              <option value="absent">Absent</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="date-<?= $sid ?>" class="form-label">Date</label>
            <input type="date" class="form-control" id="date-<?= $sid ?>" name="date"
                   value="<?= local_date(utc_now(), 'Y-m-d') ?>" required>
          </div>

          <div class="mb-3">
            <label for="reason-<?= $sid ?>" class="form-label">Reason</label>
            <textarea name="reason" id="reason-<?= $sid ?>" class="form-control attendance-reason"
                      rows="3" placeholder="Enter reason for absence or lateness"></textarea>
          </div>

          <!-- Absence Reported? (shown only when Status = Absent) -->
          <div class="mb-3 d-none" id="reported-group-<?= $sid ?>">
            <label for="reported-<?= $sid ?>" class="form-label">Absence Reported?</label>
            <select name="reported" id="reported-<?= $sid ?>" class="form-select">
              <option value="0" selected>No</option>
              <option value="1">Yes</option>
            </select>
            <div class="form-text">Select “Yes” if the parent/guardian reported this absence.</div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  const statusEl   = document.getElementById('status-<?= $sid ?>');
  const reasonEl   = document.getElementById('reason-<?= $sid ?>');
  const reportedGp = document.getElementById('reported-group-<?= $sid ?>');
  const reportedEl = document.getElementById('reported-<?= $sid ?>');

  function syncFields() {
    const v = statusEl.value;

    // Reason: required for absent/late, disabled otherwise
    if (v === 'absent' || v === 'late') {
      reasonEl.removeAttribute('disabled');
      reasonEl.setAttribute('required', 'required');
    } else {
      reasonEl.value = '';
      reasonEl.removeAttribute('required');
      reasonEl.setAttribute('disabled', 'disabled');
    }

    // Reported selector: visible only for absent; reset to "No" otherwise
    if (v === 'absent') {
      reportedGp.classList.remove('d-none');
    } else {
      reportedEl.value = '0';
      reportedGp.classList.add('d-none');
    }
  }

  statusEl.addEventListener('change', syncFields);
  syncFields(); // init on modal load
})();
</script>
