(function () {
  var config = window.VUIAttendanceOfflineConfig || {};
  if (!config.enabled) return;

  var root = document.querySelector('[data-offline-attendance="1"]');
  if (!root) return;

  var STORAGE_KEY = 'vuimedia_attendance_offline_state_v1';
  var DEVICE_KEY = 'vuimedia_attendance_offline_device_uuid_v1';
  var STUDENT_DEVICE_KEY = 'vuimedia_attendance_device_id';
  var state = loadState();
  var syncTimer = null;

  var els = {
    status: root.querySelector('.js-offline-connection-status'),
    deviceId: root.querySelector('.js-offline-device-id'),
    lastRefresh: root.querySelector('.js-offline-last-refresh'),
    pendingCount: root.querySelector('.js-offline-pending-count'),
    lastSync: root.querySelector('.js-offline-last-sync'),
    refreshBtn: root.querySelector('.js-offline-refresh'),
    syncBtn: root.querySelector('.js-offline-sync'),
    sessionSelect: root.querySelector('.js-offline-session'),
    studentSearch: root.querySelector('.js-offline-student-search'),
    students: root.querySelector('.js-offline-students'),
    log: root.querySelector('.js-offline-log')
  };

  if (!state.deviceUuid) {
    state.deviceUuid = readOrCreateDeviceUuid();
    persistState();
  }

  function loadState() {
    try {
      var raw = window.localStorage.getItem(STORAGE_KEY);
      if (!raw) {
        return {
          deviceUuid: '',
          bootstrap: null,
          pendingEvents: [],
          history: [],
          lastBootstrapAt: '',
          lastSyncAt: '',
          lastSyncSummary: ''
        };
      }
      var parsed = JSON.parse(raw);
      return {
        deviceUuid: String(parsed.deviceUuid || ''),
        bootstrap: parsed.bootstrap && typeof parsed.bootstrap === 'object' ? parsed.bootstrap : null,
        pendingEvents: Array.isArray(parsed.pendingEvents) ? parsed.pendingEvents : [],
        history: Array.isArray(parsed.history) ? parsed.history : [],
        lastBootstrapAt: String(parsed.lastBootstrapAt || ''),
        lastSyncAt: String(parsed.lastSyncAt || ''),
        lastSyncSummary: String(parsed.lastSyncSummary || '')
      };
    } catch (error) {
      return {
        deviceUuid: '',
        bootstrap: null,
        pendingEvents: [],
        history: [],
        lastBootstrapAt: '',
        lastSyncAt: '',
        lastSyncSummary: ''
      };
    }
  }

  function persistState() {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
  }

  function readOrCreateDeviceUuid() {
    try {
      var existing = String(window.localStorage.getItem(DEVICE_KEY) || '').trim();
      if (existing) {
        return existing;
      }
      var next = createUuid();
      window.localStorage.setItem(DEVICE_KEY, next);
      return next;
    } catch (error) {
      return createUuid();
    }
  }

  function createUuid() {
    if (window.crypto && typeof window.crypto.randomUUID === 'function') {
      return window.crypto.randomUUID();
    }
    return 'offline-' + Date.now() + '-' + Math.random().toString(16).slice(2, 12);
  }

  function nowIso() {
    return new Date().toISOString();
  }

  function formatTime(value) {
    if (!value) return 'Not yet synced';
    var date = new Date(value);
    if (isNaN(date.getTime())) return value;
    return date.toLocaleString();
  }

  function log(message, isError) {
    if (!els.log) return;
    var item = document.createElement('div');
    item.className = 'a-offline-logitem' + (isError ? ' a-offline-logitem--error' : '');
    item.textContent = message;
    els.log.prepend(item);
    while (els.log.children.length > 8) {
      els.log.removeChild(els.log.lastChild);
    }
  }

  function setStatus(text, mode) {
    if (!els.status) return;
    els.status.textContent = text;
    els.status.className = 'a-offline-status js-offline-connection-status';
    if (mode === 'warn') {
      els.status.classList.add('a-offline-status--warn');
    } else if (mode === 'error') {
      els.status.classList.add('a-offline-status--error');
    }
  }

  function deviceMeta() {
    return {
      device_name: config.userLabel + ' device',
      platform_name: navigator.platform || navigator.userAgent || 'browser',
      app_version: 'attendance-offline-v1'
    };
  }

  function apiUrl(action) {
    return config.endpoint + '?action=' + encodeURIComponent(action);
  }

  function isStudentMode() {
    return String(config.role || '').toLowerCase() === 'student';
  }

  function readCookieValue(key) {
    var cookies = String(document.cookie || '').split(';');
    for (var i = 0; i < cookies.length; i += 1) {
      var part = cookies[i].trim();
      if (part.indexOf(key + '=') === 0) {
        return decodeURIComponent(part.substring(key.length + 1));
      }
    }
    return '';
  }

  function writeCookieValue(key, value) {
    document.cookie = key + '=' + encodeURIComponent(value) + '; path=/; max-age=' + String(60 * 60 * 24 * 365 * 2) + '; SameSite=Lax';
  }

  function createStudentDeviceIdentifier() {
    if (window.crypto && typeof window.crypto.randomUUID === 'function') {
      return 'dv-' + window.crypto.randomUUID().replace(/[^a-zA-Z0-9]/g, '');
    }
    return 'dv-' + String(Date.now()) + String(Math.random()).replace(/[^0-9]/g, '').slice(0, 18);
  }

  function readStudentDeviceIdentifier() {
    try {
      var existing = String(window.localStorage.getItem(STUDENT_DEVICE_KEY) || '').trim();
      if (existing) {
        writeCookieValue(STUDENT_DEVICE_KEY, existing);
        return existing;
      }
      existing = String(readCookieValue(STUDENT_DEVICE_KEY) || '').trim();
      if (existing) {
        window.localStorage.setItem(STUDENT_DEVICE_KEY, existing);
        return existing;
      }
      var next = createStudentDeviceIdentifier();
      window.localStorage.setItem(STUDENT_DEVICE_KEY, next);
      writeCookieValue(STUDENT_DEVICE_KEY, next);
      return next;
    } catch (error) {
      var fallback = String(readCookieValue(STUDENT_DEVICE_KEY) || '').trim();
      if (fallback) return fallback;
      fallback = createStudentDeviceIdentifier();
      writeCookieValue(STUDENT_DEVICE_KEY, fallback);
      return fallback;
    }
  }

  function readStudentGeo() {
    return new Promise(function (resolve, reject) {
      if (!navigator.geolocation || typeof navigator.geolocation.getCurrentPosition !== 'function') {
        reject(new Error('Location access is required for offline student attendance.'));
        return;
      }
      navigator.geolocation.getCurrentPosition(function (position) {
        var coords = position && position.coords ? position.coords : {};
        if (typeof coords.latitude !== 'number' || typeof coords.longitude !== 'number') {
          reject(new Error('Location access is required for offline student attendance.'));
          return;
        }
        resolve({
          lat: Number(coords.latitude),
          lng: Number(coords.longitude),
          accuracy: typeof coords.accuracy === 'number' ? Number(coords.accuracy) : null
        });
      }, function (error) {
        var code = Number(error && error.code || 0);
        if (code === 1) {
          reject(new Error('Allow location access before queueing offline student attendance.'));
          return;
        }
        reject(new Error('Unable to verify your location for offline student attendance.'));
      }, {
        enableHighAccuracy: true,
        timeout: 15000,
        maximumAge: 0
      });
    });
  }

  function csrfToken() {
    return String(config.csrfToken || '');
  }

  function requestBootstrap() {
    var url = apiUrl('bootstrap') + '&device_uuid=' + encodeURIComponent(state.deviceUuid)
      + '&device_name=' + encodeURIComponent(deviceMeta().device_name)
      + '&platform_name=' + encodeURIComponent(deviceMeta().platform_name)
      + '&app_version=' + encodeURIComponent(deviceMeta().app_version)
      + '&_ts=' + encodeURIComponent(String(Date.now()));
    return fetch(url, {
      cache: 'no-store',
      credentials: 'same-origin',
      headers: { 'Accept': 'application/json' }
    }).then(readJson).then(function (payload) {
      if (!payload.ok) {
        throw new Error(payload.message || payload.raw_text || 'Offline bootstrap failed.');
      }
      state.bootstrap = payload.data || null;
      state.lastBootstrapAt = nowIso();
      persistState();
      window.VUIAttendanceOfflineLastBootstrap = payload.data || null;
      return payload;
    });
  }

  function pushPendingEvents() {
    if (!state.pendingEvents.length) {
      render();
      return Promise.resolve();
    }
    if (!navigator.onLine) {
      setStatus('Offline. Pending marks will sync when internet returns.', 'warn');
      return Promise.resolve();
    }

    var events = state.pendingEvents.slice();
    var payload = {
      device_uuid: state.deviceUuid,
      batch_uuid: createUuid(),
      events: events,
      device_name: deviceMeta().device_name,
      platform_name: deviceMeta().platform_name,
      app_version: deviceMeta().app_version,
      csrf_token: csrfToken()
    };

    setStatus('Syncing pending offline marks...', 'warn');
    return fetch(apiUrl('push'), {
      method: 'POST',
      cache: 'no-store',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/json; charset=UTF-8',
        'Accept': 'application/json',
        'X-CSRF-Token': csrfToken()
      },
      body: JSON.stringify(payload)
    }).then(readJson).then(function (response) {
      if (!response.ok) {
        throw new Error(response.message || 'Offline sync failed.');
      }
      var data = response.data || {};
      var results = Array.isArray(data.results) ? data.results : [];
      if (results.length) {
        var resultMap = {};
        results.forEach(function (item) {
          resultMap[String(item.event_uuid || '')] = item;
        });
        state.pendingEvents = state.pendingEvents.filter(function (event) {
          var eventId = String(event.event_uuid || '');
          var result = resultMap[eventId];
          if (!result) return true;
          state.history.unshift({
            event_uuid: eventId,
            status: String(result.status || 'accepted'),
            message: String(result.message || ''),
            student_user_id: Number(event.student_user_id || 0),
            lecture_session_id: Number(event.lecture_session_id || 0),
            marked_at_device: String(event.marked_at_device || ''),
            synced_at: nowIso()
          });
          return false;
        });
      } else {
        state.pendingEvents = [];
      }
      state.history = state.history.slice(0, 80);
      state.lastSyncAt = nowIso();
      state.lastSyncSummary = summarizeSync(data.summary || {});
      persistState();
      render();
      if (navigator.onLine) {
        requestBootstrap().then(render).catch(function () {
          render();
        });
      }
      log(state.lastSyncSummary || 'Offline marks synced.', false);
      logProblemSyncResults(results, events);
    }).catch(function (error) {
      var details = explainRequestError(error);
      setStatus(error.message || 'Sync failed.', 'error');
      log(details, true);
      render();
    });
  }

  function summarizeSync(summary) {
    var accepted = Number(summary.accepted_events || 0);
    var duplicate = Number(summary.duplicate_events || 0);
    var rejected = Number(summary.rejected_events || 0);
    var processed = Number(summary.processed_events || 0);
    return processed + ' processed, ' + accepted + ' accepted, ' + duplicate + ' duplicate, ' + rejected + ' rejected';
  }

  function syncResultReason(syncResult) {
    if (!syncResult) return '';
    return String(syncResult.message || syncResult.rejection_reason || '').trim();
  }

  function syncResolutionHint(reason) {
    var text = String(reason || '').toLowerCase();
    if (!text) return 'Retry after refreshing the offline copy.';
    if (text.indexOf('not registered') !== -1) {
      return 'Register the student for the course in the active session/semester, then refresh the offline copy.';
    }
    if (text.indexOf('window closed') !== -1) {
      return 'Start or reuse an active session and refresh the offline copy before marking.';
    }
    if (text.indexOf('lecture location') !== -1 || text.indexOf('location') !== -1 || text.indexOf('distance') !== -1) {
      return 'Move within the lecture venue range or ask admin to confirm the venue coordinates/radius.';
    }
    if (text.indexOf('device') !== -1 || text.indexOf('browser') !== -1) {
      return 'Use the registered attendance device/browser or ask admin to reset the device binding.';
    }
    if (text.indexOf('already exists') !== -1 || text.indexOf('duplicate') !== -1) {
      return 'No action needed if this mark is already present in the attendance record.';
    }
    if (text.indexOf('not available') !== -1 || text.indexOf('not found') !== -1) {
      return 'Refresh the offline copy while online, then try again with the current session.';
    }
    return 'Resolve the reason above, refresh the offline copy, then retry.';
  }

  function sessionLabelForEvent(event) {
    var sessionId = Number(event && event.lecture_session_id || 0);
    var session = getSessions().find(function (item) {
      return Number(item.id || 0) === sessionId;
    });
    if (!session) return 'session #' + String(sessionId || '-');
    var label = String(session.course_code || '') + ' - ' + String(session.course_title || '');
    label = label.trim() || ('session #' + String(sessionId || '-'));
    return label + ' (' + String(session.session_date || '-') + ')';
  }

  function studentLabelForEvent(event) {
    var sessionId = Number(event && event.lecture_session_id || 0);
    var studentId = Number(event && event.student_user_id || 0);
    var roster = getRosterForSession(sessionId);
    var row = roster.find(function (item) {
      return Number(item.student_user_id || 0) === studentId;
    });
    if (!row) return isStudentMode() ? 'Your mark' : 'student #' + String(studentId || '-');
    var code = String(row.student_id || row.registration_no || '').trim();
    return String(row.full_name || (isStudentMode() ? 'Your mark' : 'Student')) + (code ? ' [' + code + ']' : '');
  }

  function logProblemSyncResults(results, events) {
    if (!Array.isArray(results) || !results.length) return;
    var eventMap = {};
    (Array.isArray(events) ? events : []).forEach(function (event) {
      eventMap[String(event.event_uuid || '')] = event;
    });
    results.forEach(function (item) {
      var status = String(item.status || '').toLowerCase();
      if (status !== 'rejected' && status !== 'duplicate') return;
      var event = eventMap[String(item.event_uuid || '')] || {};
      var reason = syncResultReason(item) || (status === 'duplicate' ? 'Attendance already exists for this student and session.' : 'No reason supplied by server.');
      var prefix = status === 'duplicate' ? 'Duplicate' : 'Rejected';
      log(prefix + ': ' + studentLabelForEvent(event) + ' | ' + sessionLabelForEvent(event) + ' | Reason: ' + reason + ' | Fix: ' + syncResolutionHint(reason), true);
    });
  }

  function readJson(response) {
    return response.text().then(function (text) {
      var data = {};
      var trimmed = String(text || '').trim();
      var contentType = String(response.headers.get('content-type') || '').toLowerCase();
      if (text) {
        try {
          data = JSON.parse(text);
        } catch (error) {
          data = {
            ok: false,
            raw_text: trimmed.slice(0, 500),
            response_status: Number(response.status || 0),
            response_url: String(response.url || ''),
            response_content_type: contentType
          };
          if (trimmed) {
            if (trimmed.charAt(0) === '<' || contentType.indexOf('text/html') !== -1) {
              var preview = trimmed
                .replace(/<script[\s\S]*?<\/script>/gi, ' ')
                .replace(/<style[\s\S]*?<\/style>/gi, ' ')
                .replace(/<[^>]+>/g, ' ')
                .replace(/\s+/g, ' ')
                .trim()
                .slice(0, 220);
              var lowerPreview = preview.toLowerCase();
              var reason = 'HTML page returned';
              if (lowerPreview.indexOf('login') !== -1 || lowerPreview.indexOf('sign in') !== -1 || lowerPreview.indexOf('password') !== -1) {
                reason = 'login or account-step page returned';
              } else if (lowerPreview.indexOf('fatal error') !== -1 || lowerPreview.indexOf('warning') !== -1 || lowerPreview.indexOf('parse error') !== -1) {
                reason = 'PHP error page returned';
              }
              data.message = 'Offline endpoint returned HTML instead of JSON (' + reason + ').';
              data.html_preview = preview;
            } else {
              data.message = trimmed.slice(0, 240);
            }
          }
        }
      }
      if (!response.ok && !data.message) {
        data.message = 'Request failed with status ' + response.status + '.';
      }
      return data;
    });
  }

  function explainRequestError(error) {
    if (!error) return 'Request failed.';
    if (typeof error === 'string') return error;
    var parts = [];
    if (error.message) {
      parts.push(String(error.message));
    }
    if (error.response_status) {
      parts.push('HTTP ' + String(error.response_status));
    }
    if (error.response_content_type) {
      parts.push(String(error.response_content_type));
    }
    if (error.html_preview) {
      parts.push('Preview: ' + String(error.html_preview));
    } else if (error.raw_text) {
      parts.push('Preview: ' + String(error.raw_text).slice(0, 220));
    }
    return parts.join(' | ') || 'Request failed.';
  }

  function getSessions() {
    if (!state.bootstrap || !Array.isArray(state.bootstrap.sessions)) return [];
    return state.bootstrap.sessions.slice().sort(function (a, b) {
      return String(b.session_date || '').localeCompare(String(a.session_date || ''))
        || String(b.start_time || '').localeCompare(String(a.start_time || ''));
    });
  }

  function getRosterForSelectedSession() {
    var sessionId = Number(els.sessionSelect && els.sessionSelect.value || 0);
    if (!sessionId) return [];
    return getRosterForSession(sessionId);
  }

  function getRosterForSession(sessionId) {
    sessionId = Number(sessionId || 0);
    if (!sessionId) return [];
    var session = getSessions().find(function (item) {
      return Number(item.id || 0) === sessionId;
    });
    if (!session || !Array.isArray(state.bootstrap && state.bootstrap.rosters)) return [];
    var pendingByStudent = {};
    state.pendingEvents.forEach(function (item) {
      if (Number(item.lecture_session_id || 0) === sessionId) {
        pendingByStudent[Number(item.student_user_id || 0)] = item;
      }
    });
    var historyByStudent = {};
    state.history.forEach(function (item) {
      if (Number(item.lecture_session_id || 0) === sessionId && !historyByStudent[Number(item.student_user_id || 0)]) {
        historyByStudent[Number(item.student_user_id || 0)] = item;
      }
    });
    return state.bootstrap.rosters.filter(function (row) {
      return Number(row.course_id || 0) === Number(session.course_id || 0);
    }).map(function (row) {
      row = Object.assign({}, row);
      row.pendingEvent = pendingByStudent[Number(row.student_user_id || 0)] || null;
      row.syncResult = historyByStudent[Number(row.student_user_id || 0)] || null;
      return row;
    });
  }

  function renderSessions() {
    if (!els.sessionSelect) return;
    var sessions = getSessions();
    var previous = Number(els.sessionSelect.value || 0);
    els.sessionSelect.innerHTML = '<option value="">' + (isStudentMode() ? 'Select synced attendance session' : 'Select synced lecture session') + '</option>';
    sessions.forEach(function (session) {
      var option = document.createElement('option');
      var label = String(session.course_code || '') + ' - ' + String(session.course_title || '');
      label += ' | ' + String(session.session_date || '-');
      label += ' ' + String(session.start_time || '-');
      label += ' | ' + String(session.status || 'closed');
      option.value = String(session.id || '');
      option.textContent = label;
      els.sessionSelect.appendChild(option);
    });
    if (previous && sessions.some(function (session) { return Number(session.id || 0) === previous; })) {
      els.sessionSelect.value = String(previous);
    } else {
      var openSession = sessions.find(function (session) {
        return String(session.status || '').toLowerCase() === 'open';
      });
      if (openSession) {
        els.sessionSelect.value = String(openSession.id || '');
      } else if (sessions.length) {
        els.sessionSelect.value = String(sessions[0].id || '');
      }
    }
  }

  function renderStudents() {
    if (!els.students) return;
    var roster = getRosterForSelectedSession();
    var search = String(els.studentSearch && els.studentSearch.value || '').trim().toLowerCase();
    if (search) {
      roster = roster.filter(function (row) {
        var haystack = [
          row.full_name,
          row.student_id,
          row.registration_no,
          row.email
        ].join(' ').toLowerCase();
        return haystack.indexOf(search) !== -1;
      });
    }
    if (!roster.length) {
      els.students.innerHTML = '<div class="a-offline-empty">' + buildEmptyStateMessage() + '</div>';
      return;
    }
    els.students.innerHTML = '';
    roster.forEach(function (row) {
      var card = document.createElement('div');
      var statusText = isStudentMode() ? 'Ready to queue your offline attendance' : 'Ready to mark offline';
      card.className = 'a-offline-student';
      if (row.pendingEvent) {
        card.classList.add('is-pending');
        statusText = 'Queued offline at ' + formatTime(row.pendingEvent.marked_at_device);
      } else if (row.syncResult) {
        if (String(row.syncResult.status || '') === 'rejected') {
          card.classList.add('is-rejected');
        }
        statusText = String(row.syncResult.status || 'synced') + ' at ' + formatTime(row.syncResult.synced_at);
        var reasonText = syncResultReason(row.syncResult);
        if (reasonText) {
          statusText += ' | Reason: ' + reasonText + ' | Fix: ' + syncResolutionHint(reasonText);
        }
      }

      var meta = document.createElement('div');
      meta.className = 'a-offline-student-meta';
      var title = document.createElement('strong');
      title.textContent = String(row.full_name || (isStudentMode() ? 'My attendance entry' : 'Student'));
      var sub = document.createElement('div');
      sub.className = 'a-offline-student-sub';
      sub.textContent = [
        row.student_id || row.registration_no || '-',
        row.email || 'No email',
        statusText
      ].join(' | ');
      meta.appendChild(title);
      meta.appendChild(sub);

      var button = document.createElement('button');
      button.type = 'button';
      button.className = row.pendingEvent ? 'btn btn--ghost' : 'btn btn--primary';
      button.textContent = row.pendingEvent ? 'Queued' : (isStudentMode() ? 'Queue Offline Mark' : 'Mark Offline');
      button.disabled = !!row.pendingEvent;
      button.addEventListener('click', function () {
        var queued = queueStudent(row);
        if (queued && typeof queued.catch === 'function') {
          queued.catch(function (error) {
            log(error && error.message ? error.message : 'Unable to queue offline attendance.', true);
          });
        }
      });

      card.appendChild(meta);
      card.appendChild(button);
      els.students.appendChild(card);
    });
  }

  function buildEmptyStateMessage() {
    if (!isStudentMode()) {
      return 'No synced students match this lecture session or search.';
    }
    var search = String(els.studentSearch && els.studentSearch.value || '').trim();
    var sessions = getSessions();
    var courses = state.bootstrap && Array.isArray(state.bootstrap.courses) ? state.bootstrap.courses : [];
    var rosters = state.bootstrap && Array.isArray(state.bootstrap.rosters) ? state.bootstrap.rosters : [];
    var activeSemester = String(config.activeSemester || state.bootstrap && state.bootstrap.settings && state.bootstrap.settings.active_semester || '').trim();
    if (search) {
      return 'No synced attendance entry matches this session or search.';
    }
    if (!sessions.length && courses.length && rosters.length) {
      return 'Your registration matches the active semester' + (activeSemester ? ' (' + activeSemester + ')' : '') + ', but no lecture session from the last 14 days was synced for it yet. Switch the active semester or create/open a matching session, then refresh the offline copy.';
    }
    if (!sessions.length && !courses.length) {
      return 'No registered course in the active session/semester is available for offline attendance on this device. Refresh the offline copy after your registration is confirmed.';
    }
    return 'No synced attendance entry matches this session or search.';
  }

  function queueStudent(row, sessionIdOverride, sourceMethodOverride) {
    var sessionId = Number(sessionIdOverride || els.sessionSelect && els.sessionSelect.value || 0);
    if (!sessionId) {
      log(isStudentMode() ? 'Choose a synced attendance session first.' : 'Choose a synced lecture session first.', true);
      throw new Error(isStudentMode() ? 'Choose a synced attendance session first.' : 'Choose a synced lecture session first.');
    }
    var duplicate = state.pendingEvents.find(function (event) {
      return Number(event.lecture_session_id || 0) === sessionId
        && Number(event.student_user_id || 0) === Number(row.student_user_id || 0);
    });
    if (duplicate) {
      log(isStudentMode()
        ? 'You already have a pending offline mark for the selected session.'
        : 'This student already has a pending offline mark for the selected session.', true);
      renderStudents();
      throw new Error(isStudentMode()
        ? 'You already have a pending offline mark for the selected session.'
        : 'This student already has a pending offline mark for the selected session.');
    }
    if (isStudentMode()) {
      return readStudentGeo().then(function (geo) {
        var event = {
          event_uuid: createUuid(),
          lecture_session_id: sessionId,
          student_user_id: Number(row.student_user_id || 0),
          marked_at_device: nowIso(),
          source_method: String(sourceMethodOverride || 'manual'),
          device_identifier: readStudentDeviceIdentifier(),
          device_info: String(navigator.userAgent || 'Offline attendance').slice(0, 180),
          geo_lat: geo.lat,
          geo_lng: geo.lng,
          geo_accuracy: geo.accuracy
        };
        state.pendingEvents.unshift(event);
        persistState();
        render();
        log('Queued your offline attendance mark.', false);
        if (navigator.onLine) {
          pushPendingEvents();
        } else {
          setStatus('Offline. Marks are being queued on this device.', 'warn');
        }
        return event;
      });
    }
    var event = {
      event_uuid: createUuid(),
      lecture_session_id: sessionId,
      student_user_id: Number(row.student_user_id || 0),
      marked_at_device: nowIso(),
      source_method: String(sourceMethodOverride || 'manual'),
      device_identifier: 'offline:' + state.deviceUuid,
      device_info: String(navigator.userAgent || 'Offline attendance').slice(0, 180)
    };
    state.pendingEvents.unshift(event);
    persistState();
    render();
    log('Queued offline mark for ' + String(row.full_name || 'student') + '.', false);
    if (navigator.onLine) {
      pushPendingEvents();
    } else {
      setStatus('Offline. Marks are being queued on this device.', 'warn');
    }
    return event;
  }

  function normalizeLookupValue(value) {
    return String(value || '').trim().toLowerCase();
  }

  function findRosterStudentByReference(sessionId, reference) {
    var lookup = normalizeLookupValue(reference);
    if (!lookup) return null;
    var roster = getRosterForSession(sessionId);
    for (var i = 0; i < roster.length; i += 1) {
      var row = roster[i];
      var candidates = [
        row.student_id,
        row.registration_no,
        row.email,
        row.full_name
      ];
      for (var j = 0; j < candidates.length; j += 1) {
        if (normalizeLookupValue(candidates[j]) === lookup) {
          return row;
        }
      }
    }
    return null;
  }

  function queueByReference(sessionId, reference) {
    sessionId = Number(sessionId || 0);
    if (!sessionId) {
      throw new Error('Select a lecture session first.');
    }
    if (!state.bootstrap) {
      throw new Error('Offline attendance copy is not ready on this device. Open Offline Attendance and refresh it while internet is available.');
    }
    var session = getSessions().find(function (item) {
      return Number(item.id || 0) === sessionId;
    });
    if (!session) {
      throw new Error('This lecture session is not available in the offline attendance copy. Refresh the offline copy while online and try again.');
    }
    var row = findRosterStudentByReference(sessionId, reference);
    if (!row) {
      throw new Error('Student was not found in the synced offline roster for this session. Use the matric number or registration number after refreshing the offline copy.');
    }
    if (els.sessionSelect) {
      els.sessionSelect.value = String(sessionId);
    }
    var queuedEvent = queueStudent(row, sessionId);
    return {
      queued: true,
      event: queuedEvent,
      studentName: String(row.full_name || 'student'),
      message: navigator.onLine
        ? 'Connection dropped. The mark was queued offline for ' + String(row.full_name || 'student') + ' and will sync automatically.'
        : 'You are offline. The mark was queued on this device for ' + String(row.full_name || 'student') + ' and will sync when internet returns.'
    };
  }

  function queueFingerprint(sessionId, studentUserId) {
    sessionId = Number(sessionId || 0);
    studentUserId = Number(studentUserId || 0);
    if (!state.bootstrap) throw new Error('Offline attendance copy is not ready. Refresh it while online first.');
    var row = getRosterForSession(sessionId).find(function (item) {
      return Number(item.student_user_id || 0) === studentUserId;
    });
    if (!row) throw new Error('Matched student is not available in the synced offline roster.');
    var event = queueStudent(row, sessionId, 'fingerprint');
    return {
      queued: true,
      event: event,
      studentName: String(row.full_name || 'student'),
      message: 'Fingerprint attendance queued offline for ' + String(row.full_name || 'student') + '.'
    };
  }

  function render() {
    if (els.deviceId) {
      els.deviceId.textContent = state.deviceUuid || '-';
    }
    if (els.lastRefresh) {
      els.lastRefresh.textContent = formatTime(state.lastBootstrapAt);
    }
    if (els.pendingCount) {
      els.pendingCount.textContent = String(state.pendingEvents.length);
    }
    if (els.lastSync) {
      els.lastSync.textContent = state.lastSyncSummary
        ? state.lastSyncSummary + ' (' + formatTime(state.lastSyncAt) + ')'
        : 'No sync yet';
    }

    if (navigator.onLine) {
      setStatus('Online. Offline attendance copy is ready on this device.', 'ok');
    } else if (state.bootstrap) {
      setStatus('Offline. Using the last synced attendance copy on this device.', 'warn');
    } else {
      setStatus('Offline and no attendance copy is stored yet.', 'error');
    }

    renderSessions();
    renderStudents();
  }

  function installHandlers() {
    if (els.refreshBtn) {
      els.refreshBtn.addEventListener('click', function () {
        if (!navigator.onLine) {
          setStatus('Cannot refresh while offline. Existing cached copy remains available.', 'warn');
          return;
        }
        setStatus('Refreshing offline attendance copy...', 'warn');
        requestBootstrap().then(function (payload) {
          render();
          var data = payload && payload.data && typeof payload.data === 'object' ? payload.data : {};
          var sessionCount = Array.isArray(data.sessions) ? data.sessions.length : 0;
          var rosterCount = Array.isArray(data.rosters) ? data.rosters.length : 0;
          log('Offline attendance copy refreshed for this device. ' + sessionCount + ' session(s), ' + rosterCount + ' roster entr' + (rosterCount === 1 ? 'y' : 'ies') + '.', false);
        }).catch(function (error) {
          var details = explainRequestError(error);
          setStatus(error.message || 'Refresh failed.', 'error');
          log(details, true);
          render();
        });
      });
    }

    if (els.syncBtn) {
      els.syncBtn.addEventListener('click', function () {
        pushPendingEvents();
      });
    }

    if (els.sessionSelect) {
      els.sessionSelect.addEventListener('change', renderStudents);
    }

    if (els.studentSearch) {
      els.studentSearch.addEventListener('input', renderStudents);
    }

    window.addEventListener('online', function () {
      render();
      if (state.pendingEvents.length) {
        pushPendingEvents();
      } else {
        requestBootstrap().then(function () {
          render();
          log('Connection restored and offline copy refreshed.', false);
        }).catch(function () {
          render();
        });
      }
    });

    window.addEventListener('offline', render);
  }

  function startBackgroundSync() {
    if (syncTimer) {
      window.clearInterval(syncTimer);
    }
    syncTimer = window.setInterval(function () {
      if (!navigator.onLine) return;
      if (state.pendingEvents.length) {
        pushPendingEvents();
      }
    }, 30000);
  }

  installHandlers();
  render();
  startBackgroundSync();

  window.VUIAttendanceOffline = {
    queueByReference: queueByReference,
    queueFingerprint: queueFingerprint
  };

  if (navigator.onLine) {
    requestBootstrap().then(function (payload) {
      render();
      var data = payload && payload.data && typeof payload.data === 'object' ? payload.data : {};
      var sessionCount = Array.isArray(data.sessions) ? data.sessions.length : 0;
      var rosterCount = Array.isArray(data.rosters) ? data.rosters.length : 0;
      log('Offline attendance copy loaded for this device. ' + sessionCount + ' session(s), ' + rosterCount + ' roster entr' + (rosterCount === 1 ? 'y' : 'ies') + '.', false);
      if (state.pendingEvents.length) {
        return pushPendingEvents();
      }
    }).catch(function (error) {
      var details = explainRequestError(error);
      setStatus(error.message || 'Offline bootstrap failed.', 'error');
      log(details, true);
      render();
    });
  }
})();<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="manifest" href="/manifest.webmanifest?v=20260707a" />
  <meta name="theme-color" content="#159a8c" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <meta name="apple-mobile-web-app-title" content="VUI" />
  <link rel="apple-touch-icon" href="/assets/img/vui-logo.png" />
  <link rel="icon" type="image/png" href="/assets/img/vui-logo.png" />
  <title>Campus Flow | VUI ID Card Portal</title>
  <link rel="stylesheet" href="assets/css/styles.css?v=20260227a" />
  <style>
    main.container.shell{width:calc(100% - 24px);max-width:none}
    .shell{display:grid;grid-template-columns:270px 1fr;gap:18px;align-items:start}
    .sidebar{position:sticky;top:74px;border-radius:var(--r2);border:1px solid rgba(11,18,32,.14);background:rgba(255,255,255,.72);box-shadow:0 12px 30px rgba(11,18,32,.10);overflow:hidden}
    .content{border-radius:var(--r2);border:1px solid rgba(11,18,32,.14);background:rgba(255,255,255,.62);box-shadow:0 12px 30px rgba(11,18,32,.10);padding:18px;overflow:hidden}
    .active-dialogue{border-color:rgba(21,154,140,.35);background:linear-gradient(135deg,rgba(135,226,193,.2),rgba(255,255,255,.8))}
    .btn--danger{color:#fff;background:#dc2626;border-color:#dc2626}
    .btn--danger:hover{background:#b91c1c;border-color:#b91c1c}
    .campus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
    .campus-stat{padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.78)}
    .campus-stat__k{font:800 12px/1 var(--sans);letter-spacing:.35px;text-transform:uppercase;opacity:.7}
    .campus-stat__v{font:900 34px/1.05 var(--serif);margin-top:6px}
    .campus-layout{display:grid;grid-template-columns:1fr;gap:14px}
    .a-face-modal{position:fixed;inset:0;background:rgba(15,33,42,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:1200}
    .a-face-modal.is-open{display:flex}
    .a-face-dialog{width:min(920px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:24px;border:1px solid rgba(18,59,66,.12);box-shadow:0 28px 80px rgba(15,33,42,.25);padding:18px}
    .a-face-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
    .a-face-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(260px,320px);gap:16px}
    .a-face-stage{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#f7fdfb,#eef8f6);padding:14px}
    .a-face-video-wrap{position:relative;border-radius:18px;overflow:hidden;background:#08161a;aspect-ratio:4/3}
    .a-face-video,.a-face-canvas{width:100%;height:100%;display:block;object-fit:cover}
    .a-face-canvas{display:none}
    .a-face-crosshair{position:absolute;inset:14% 22%;border:2px solid rgba(255,255,255,.85);border-radius:28px;box-shadow:0 0 0 999px rgba(8,22,26,.16)}
    .a-face-tools{display:grid;gap:10px;margin-top:12px}
    .a-face-log{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fbfefd}
    .a-face-loglist{display:grid;gap:8px;max-height:320px;overflow:auto;margin-top:10px}
    .a-face-logitem{border:1px solid rgba(21,154,140,.12);border-radius:14px;padding:10px 12px;background:#fff}
    .a-face-logitem--error{border-color:#ef9a9a;background:#fff6f6}
    .a-face-meta{display:grid;gap:8px;font-size:13px;color:#456}
    .a-face-mini{font-size:12px;color:#5f767a}
    @media (max-width:980px){.shell{grid-template-columns:1fr}.sidebar{position:relative;top:0}}
    @media (max-width:620px){main.container.shell{width:calc(100% - 14px)}}
    @media (max-width:1080px){.campus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media (max-width:620px){.campus-grid{grid-template-columns:1fr}}
    @media (max-width:980px){.a-face-grid{grid-template-columns:1fr}}
  </style>
</head>
<body>
    <div class="bg"><div class="bg__grid"></div><div class="bg__blob bg__blob--a"></div><div class="bg__blob bg__blob--b"></div></div>
      <header class="topbar">
      <a class="brand" href="/" aria-label="Home">
        <span class="brand__mark">VUI</span>
        <span>
          <span class="brand__text">VUI</span>
          <span class="brand__sub">ID Card, Campus &amp; Health Platform</span>
        </span>
      </a>
      <nav class="topbar__nav">
        <a class="link" href="https://veniteuniversity.edu.ng/">Main Home</a>
        <a class="link" href="/">Home</a>
        <a class="link" href="/campus">Campus Flow</a>
        <a class="link" href="/health">Health Center</a>
        <a class="link" href="/attendance">Attendance</a>
        <a class="link" href="/user/login">User Login</a>
        <a class="link" href="/admin/login">Admin</a>
      </nav>
    </header>
  <main class="container shell">
    <aside class="sidebar">
      <div class="sidebar__head">
        <div class="sidebar__title">Campus Flow</div>
                  <div class="sidebar__meta">Guest session</div>
          <div class="sidebar__meta">Login required for agent actions</div>
              </div>
      <nav class="nav">
        <a href="/campus?p=zjDxtt7uYttlb8LuHRiKb20_tjoo_GDHOFGK6hnIVRbJ5LeD7IuAOTGCzMeyHape6LyraqIRff3AhePHLDQs9KZZ3O1Wuv9o9Zg" aria-current="page"><span>Overview</span><span class="badge">Live</span></a>
        <a href="/campus?p=xNWpDmklsIdv0GsOWNihOCoJN7eL0efecdNVl5xSUIuaBdjChufEMcBNl2tDbitYn1iX6GPM_rPWajODuEQiw4twwZ-S5Xo"><span>Exeat Flow</span><span class="badge">Workflow</span></a>
                              </nav>
            <nav class="nav" style="border-top:1px solid var(--line)">
                  <a href="/campus?p=a1sTCn31SmRdZULqtDm59gtWFJUXWCy_esDzFpWpHYTo1v4Vxl605ycrty4o0h95x3PgOlEzpeQesoro1fYjszhgAJu8xsoN_CKh78FBlqjDymFRIBQ7TxQGAik" aria-current="page"><span>Campus Login</span><span class="badge">View</span></a>
              </nav>
          </aside>

    <section class="content">
      <div class="grid">
        <section class="card card--full">
          <h1 class="h2">Campus Entry, Exit, Visitor and Exeat Flow</h1>
          <p class="card__sub">Student apply -> Student Affairs/Admin review -> Porter accept/reject -> Security gate exit/return logs.</p>
        </section>

        <section class="card card--full active-dialogue">
          <h3 class="card__title">Active Dialogue</h3>
          <p class="card__sub">Login with your ID card profile to continue.</p>
        </section>

        
        
        
        
        
                  <section class="card card--full">
            <h3 class="card__title">Campus Agent Login</h3>
            <p class="card__sub">Login with the same ID card credentials (email/student ID/registration no/staff ID + password).</p>
            <form class="form" method="post">
              <input type="hidden" name="action" value="campus_login" />
              <input type="hidden" name="geo_lat" class="geo-lat" />
              <input type="hidden" name="geo_lng" class="geo-lng" />
              <input type="hidden" name="geo_label" class="geo-label" />
              <div class="field"><label>Login ID</label><input name="identity" required /></div>
              <div class="field"><label>Password</label><input type="password" name="password" required /></div>
              <div class="field field--full"><button class="btn btn--primary" type="submit">Login</button></div>
            </form>
          </section>
        
              </div>
    </section>
  </main>
  <div id="PaymentContainer"></div>
  <script>
    (function () {
      const millisecondsPerDay = 86400000;
      const applyForm = document.getElementById('exeatApplyForm');
      const intendedReturnField = document.getElementById('exeatIntendedReturnField');
      const calculatedDurationField = document.getElementById('exeatCalculatedDurationField');
      const calculatedDurationOutput = document.getElementById('exeatCalculatedDuration');
      const reviewForm = document.getElementById('studentExeatReviewForm');
      const reviewButtons = Array.prototype.slice.call(document.querySelectorAll('.js-review-exeat'));
      const deleteForms = Array.prototype.slice.call(document.querySelectorAll('.js-delete-student-exeat'));

      function localDateTimeValue(date) {
        const offset = date.getTimezoneOffset();
        return new Date(date.getTime() - offset * 60000).toISOString().slice(0, 16);
      }

      function calculateDuration(returnValue, referenceTime) {
        const intendedReturn = new Date(returnValue);
        if (!returnValue || Number.isNaN(intendedReturn.getTime())) return 0;
        return Math.ceil((intendedReturn.getTime() - referenceTime.getTime()) / millisecondsPerDay);
      }

      function formatDateTime(date) {
        return new Intl.DateTimeFormat(undefined, {
          dateStyle: 'medium',
          timeStyle: 'short'
        }).format(date);
      }

      if (applyForm && intendedReturnField && calculatedDurationField && calculatedDurationOutput) {
        function updateApplicationDuration() {
          const intendedReturn = new Date(intendedReturnField.value);
          const duration = calculateDuration(intendedReturnField.value, new Date());
          if (duration <= 0 || duration > 65535 || Number.isNaN(intendedReturn.getTime())) {
            calculatedDurationField.value = '';
            calculatedDurationOutput.textContent = intendedReturnField.value
              ? 'Select a future return date and time.'
              : 'Select when you intend to return.';
            intendedReturnField.setCustomValidity(intendedReturnField.value ? 'Select a future return date and time.' : '');
            return;
          }
          intendedReturnField.setCustomValidity('');
          calculatedDurationField.value = String(duration);
          calculatedDurationOutput.textContent = duration + ' calculated day(s) · Return by ' + formatDateTime(intendedReturn);
        }
        intendedReturnField.min = localDateTimeValue(new Date(Date.now() + 60000));
        intendedReturnField.addEventListener('input', updateApplicationDuration);
        intendedReturnField.addEventListener('change', updateApplicationDuration);
        applyForm.addEventListener('submit', updateApplicationDuration);
        updateApplicationDuration();
      }

      function submitReview(button, values) {
        if (!reviewForm) return;
        document.getElementById('studentExeatReviewId').value = button.dataset.exeatId || '';
        document.getElementById('studentExeatReviewReason').value = values.reason;
        document.getElementById('studentExeatReviewDuration').value = values.duration;
        document.getElementById('studentExeatReviewReturnAt').value = values.returnAt;
        document.getElementById('studentExeatReviewDestination').value = values.destination;
        reviewForm.submit();
      }

      reviewButtons.forEach(function (button) {
        button.addEventListener('click', function () {
          const initialDuration = Number(button.dataset.durationDays || '0');
          const fallbackReturn = initialDuration > 0
            ? localDateTimeValue(new Date(Date.now() + initialDuration * millisecondsPerDay))
            : '';
          const initial = {
            reason: button.dataset.reason || '',
            duration: button.dataset.durationDays || '',
            returnAt: button.dataset.intendedReturnAt || fallbackReturn,
            destination: button.dataset.destination || ''
          };
          if (!window.Swal || typeof window.Swal.fire !== 'function') {
            const reason = window.prompt('Reason', initial.reason);
            if (reason === null) return;
            const returnAt = window.prompt('Intended Return Date & Time (YYYY-MM-DDTHH:MM)', initial.returnAt);
            if (returnAt === null) return;
            const duration = calculateDuration(returnAt.trim(), new Date());
            if (duration <= 0) {
              window.alert('Select a future intended return date and time.');
              return;
            }
            const destination = window.prompt('Destination', initial.destination);
            if (destination === null) return;
            submitReview(button, { reason: reason.trim(), duration: String(duration), returnAt: returnAt.trim(), destination: destination.trim() });
            return;
          }
          window.Swal.fire({
            title: 'Review ' + (button.dataset.purpose || 'exeat') + ' application',
            html:
              '<div style="text-align:left">' +
                '<label for="swal-exeat-reason" style="display:block;margin-bottom:6px;font-weight:700">Reason</label>' +
                '<textarea id="swal-exeat-reason" class="swal2-textarea" style="width:100%;margin:0 0 14px"></textarea>' +
                '<label for="swal-exeat-return-at" style="display:block;margin-bottom:6px;font-weight:700">Intended Return Date &amp; Time</label>' +
                '<input id="swal-exeat-return-at" class="swal2-input" type="datetime-local" style="width:100%;margin:0 0 6px" />' +
                '<div id="swal-exeat-duration-output" style="margin:0 0 14px;color:#64748b;font-size:13px"></div>' +
                '<label for="swal-exeat-destination" style="display:block;margin-bottom:6px;font-weight:700">Destination</label>' +
                '<input id="swal-exeat-destination" class="swal2-input" style="width:100%;margin:0" />' +
              '</div>',
            showCancelButton: true,
            confirmButtonText: 'Save changes',
            focusConfirm: false,
            didOpen: function () {
              document.getElementById('swal-exeat-reason').value = initial.reason;
              const returnInput = document.getElementById('swal-exeat-return-at');
              const durationOutput = document.getElementById('swal-exeat-duration-output');
              const updateReviewDuration = function () {
                const duration = calculateDuration(returnInput.value, new Date());
                durationOutput.textContent = duration > 0 ? duration + ' calculated day(s)' : 'Select a future return date and time.';
              };
              returnInput.min = localDateTimeValue(new Date(Date.now() + 60000));
              returnInput.value = initial.returnAt;
              returnInput.addEventListener('input', updateReviewDuration);
              returnInput.addEventListener('change', updateReviewDuration);
              updateReviewDuration();
              document.getElementById('swal-exeat-destination').value = initial.destination;
            },
            preConfirm: function () {
              const reason = document.getElementById('swal-exeat-reason').value.trim();
              const returnAt = document.getElementById('swal-exeat-return-at').value.trim();
              const duration = calculateDuration(returnAt, new Date());
              const destination = document.getElementById('swal-exeat-destination').value.trim();
              if (!reason || duration < 1 || duration > 65535 || !destination) {
                window.Swal.showValidationMessage('Reason, a future return date and time, and destination are required.');
                return false;
              }
              return { reason: reason, duration: String(duration), returnAt: returnAt, destination: destination };
            }
          }).then(function (result) {
            if (result.isConfirmed && result.value) {
              submitReview(button, result.value);
            }
          });
        });
      });

      deleteForms.forEach(function (form) {
        form.addEventListener('submit', function (event) {
          event.preventDefault();
          const submitDelete = function () {
            HTMLFormElement.prototype.submit.call(form);
          };
          if (!window.Swal || typeof window.Swal.fire !== 'function') {
            if (window.confirm('Delete this DSA-pending exeat application? This action cannot be undone.')) {
              submitDelete();
            }
            return;
          }
          window.Swal.fire({
            icon: 'warning',
            title: 'Delete exeat application?',
            text: 'This application is still awaiting DSA review. This action cannot be undone.',
            showCancelButton: true,
            confirmButtonColor: '#dc2626',
            confirmButtonText: 'Yes, delete it',
            cancelButtonText: 'Cancel'
          }).then(function (result) {
            if (result.isConfirmed) submitDelete();
          });
        });
      });
    })();
  </script>
    <div class="a-face-modal" id="campusExeatFaceGrantModal" aria-hidden="true">
    <div class="a-face-dialog">
      <div class="a-face-head">
        <div>
          <h3 class="card__title" id="campus-exeat-face-title" style="margin-bottom:4px;">Student Gate Face Verification</h3>
          <div class="a-face-mini" id="campusExeatFaceGrantLabel">Capture the student face to confirm this gate processing action.</div>
        </div>
        <button class="btn btn--ghost js-campus-exeat-face-close" type="button">Close</button>
      </div>
      <div class="a-face-grid">
        <div class="a-face-stage">
          <div class="a-face-video-wrap">
            <video class="a-face-video js-campus-exeat-face-video" autoplay muted playsinline></video>
            <canvas class="a-face-canvas js-campus-exeat-face-canvas"></canvas>
            <div class="a-face-crosshair"></div>
          </div>
          <div class="a-face-tools">
            <button class="btn btn--primary" type="button" id="campusExeatFaceGrantCaptureBtn">Capture & Grant</button>
            <button class="btn btn--ghost js-campus-exeat-face-close" type="button">Cancel</button>
          </div>
        </div>
        <div class="a-face-log">
          <div class="a-face-meta">
            <strong>Gate confirmation</strong>
            <span>FaceLog verifies the selected student against the saved face profile before exit or return is logged.</span>
          </div>
          <div class="a-face-loglist">
            <div class="a-face-logitem" id="campusExeatFaceGrantStatus">Choose FaceGrant to begin verification.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
    <footer class="footer"><div class="container footer__inner"><div class="muted">Campus Flow</div><div class="muted">&copy; <span data-year></span> Venite University</div></div></footer>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="assets/js/app.js?v=20260707b"></script>
  <script>
    (function () {
      if (!navigator.geolocation) return;
      var forms = document.querySelectorAll('form');
      if (!forms.length) return;

      function setGeoInForm(form, lat, lng, label) {
        var latField = form.querySelector('.geo-lat');
        var lngField = form.querySelector('.geo-lng');
        var labelField = form.querySelector('.geo-label');
        if (!latField || !lngField || !labelField) return;
        latField.value = String(lat);
        lngField.value = String(lng);
        labelField.value = label || '';
      }

      function canUseGeo() {
        return !!(window.isSecureContext || location.hostname === 'localhost' || location.hostname === '127.0.0.1');
      }

      function captureForForm(form, done) {
        if (!canUseGeo()) {
          done();
          return;
        }
        navigator.geolocation.getCurrentPosition(function (pos) {
          var lat = Number(pos.coords.latitude || 0);
          var lng = Number(pos.coords.longitude || 0);
          if (Number.isFinite(lat) && Number.isFinite(lng)) {
            setGeoInForm(form, lat, lng, 'Browser geolocation');
          }
          done();
        }, function () {
          done();
        }, {
          enableHighAccuracy: true,
          timeout: 9000,
          maximumAge: 60000
        });
      }

      function submitFormWithHandlers(form) {
        if (!form) return;
        if (typeof form.requestSubmit === 'function') {
          form.requestSubmit();
          return;
        }
        var submitControl = document.createElement('button');
        submitControl.type = 'submit';
        submitControl.hidden = true;
        form.appendChild(submitControl);
        submitControl.click();
        form.removeChild(submitControl);
      }

      forms.forEach(function (form) {
        if (!form.querySelector('.geo-lat')) return;
        form.addEventListener('submit', function (e) {
          if (form.dataset.geoReady === '1') return;
          e.preventDefault();
          captureForForm(form, function () {
            form.dataset.geoReady = '1';
            submitFormWithHandlers(form);
          });
        });
      });
    })();
  </script>
    <div id="PaymentContainer"></div>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
      <script>
    (function () {
      const app = window.CampusPaymentGateways = window.CampusPaymentGateways || {};

      app.config = {
        currency: "NGN",
        exeatAmount: Number("0.00"),
        exeatAmountMinor: Math.round(Number("0.00") * 100),
        paystackEnabled: true,
        monnifyEnabled: true,
        fountainpayEnabled: false,
        manualPaymentEnabled: false,
        manualPaymentBankName: "",
        manualPaymentAccountNo: "",
        manualPaymentAccountName: "",
        manualPaymentInstruction: "",
        manualPaymentWhatsappNo: "",
        paystackPublicKey: "",
        monnifyPublicKey: "",
        monnifyContractCode: "",
        monnifyTestMode: true,
        fountainpayPublicKey: "",
        fountainpayCheckoutUrl: "",
        fountainpayHostedCheckoutUrl: "",
        fountainpayWalletDetails: "",
        fountainpayDebug: false,
        studentEmail: "",
        studentName: "",
        studentId: "",
        studentIdLabel: "User ID",
        studentPhone: "",
        parentContact1: "",
        parentContact2: "",
        exeatPaymentEnabled: false,
        hasActiveExeat: false,
        csrfToken: "8a9815e13203e31d5e86156d313460939e0a75b6a82ac485489f43f12a77acc9",
        campusUrl: "/campus",
      };

      app.exeat = app.exeat || {};
      app.overtime = app.overtime || {};

      app.notifyError = function (title, message) {
        window.appShowAlert({ icon: 'error', title: title, text: message });
      };

      app.notifyInfo = function (title, message) {
        window.appShowAlert({ icon: 'info', title: title, text: message });
      };

      app.openWhatsappChat = function (phone, lines) {
        const digits = String(phone || '').replace(/[^0-9]/g, '');
        if (!digits) return false;
        const text = Array.isArray(lines) ? lines.join('\n') : String(lines || '');
        const url = 'https://wa.me/' + digits + '?text=' + encodeURIComponent(text);
        window.open(url, '_blank', 'noopener');
        return true;
      };

      app.generateReference = function (prefix, suffix) {
        const mid = suffix ? '-' + suffix : '';
        return String(prefix).toUpperCase() + mid + '-' + Date.now() + '-' + Math.floor(Math.random() * 900000 + 100000);
      };

      app.normalizePhoneDigits = function (value) {
        return String(value || '').replace(/\D+/g, '');
      };

      app.sanitizeFountainPayPhone = function (value) {
        const digits = String(value || '').replace(/[^0-9]/g, '').trim();
        return digits.length >= 7 && digits.length <= 15 ? digits : '';
      };

      app.maskKey = function (value) {
        const raw = String(value || '');
        if (!raw) return '';
        if (raw.length <= 10) return raw.slice(0, 2) + '***';
        return raw.slice(0, 8) + '...' + raw.slice(-4);
      };

      app.logFountainPayDebug = function (stage, payload) {
        if (!app.config.fountainpayDebug || typeof console === 'undefined') return;
        try {
          console.groupCollapsed('[FountainPay Debug] ' + stage);
          console.log(payload);
          console.groupEnd();
        } catch (e) {
          console.log('[FountainPay Debug] ' + stage, payload);
        }
      };


      app.buildFountainPayCustomer = function (fullName, email, phone) {
        const rawName = String(fullName || 'Campus Student').trim();
        const parts = rawName.split(/\s+/, 2).filter(Boolean);
        const lastName = parts[0] || 'Campus';
        const otherName = parts[1] || 'Student';
        const customer = {
          email: String(email || '').trim(),
          lastName: lastName,
          otherName: otherName
        };
        const cleanPhone = app.sanitizeFountainPayPhone(phone)
          || app.sanitizeFountainPayPhone(app.config.parentContact1)
          || app.sanitizeFountainPayPhone(app.config.parentContact2);
        if (cleanPhone) {
          customer.phoneNo = cleanPhone;
        }
        return customer;
      };

      app.validateFountainPayCustomer = function (customer, titlePrefix) {
        const label = titlePrefix || 'User profile';
        if (!customer || !String(customer.email || '').trim()) {
          return label + ' email is required for FountainPay checkout.';
        }
        if (!String(customer.lastName || '').trim()) {
          return label + ' last name is required for FountainPay checkout.';
        }
        if (!String(customer.otherName || '').trim()) {
          return label + ' first name is required for FountainPay checkout.';
        }
        if (!String(customer.phoneNo || '').trim()) {
          return label + ' phone number is required for FountainPay checkout.';
        }
        return '';
      };

      app.fallbackFountainPayReference = function (message, onCancel) {
        const ref = window.prompt(message, '');
        if (!ref) {
          if (typeof onCancel === 'function') onCancel();
          return '';
        }
        return String(ref).trim();
      };

      app.chooseGatewayHtml = function (name, amount, currency, options, note) {
        let html = '<div style="text-align:left;margin-top:8px">';
        if (note) {
          html += '<div style="margin-bottom:10px">' + note + '</div>';
        }
        if (options.paystack) {
          html += '<label style="display:block;margin:8px 0"><input type="radio" name="' + name + '" value="paystack"> Paystack</label>';
        }
        if (options.monnify) {
          html += '<label style="display:block;margin:8px 0"><input type="radio" name="' + name + '" value="monnify"> Monnify</label>';
        }
        if (options.fountainpay) {
          html += '<label style="display:block;margin:8px 0"><input type="radio" name="' + name + '" value="fountainpay"> FountainPay</label>';
        }
        if (options.manual) {
          html += '<label style="display:block;margin:8px 0"><input type="radio" name="' + name + '" value="manual"> Manual Payment</label>';
        }
        html += '<div style="margin-top:12px;font-weight:700">Amount: ' + currency + ' ' + amount + '</div></div>';
        return html;
      };

      app.recordTransaction = function (payload) {
        try {
          const params = new URLSearchParams();
          params.set('csrf_token', app.config.csrfToken || '');
          params.set('action', 'record_payment_transaction');
          Object.keys(payload || {}).forEach(function (key) {
            const value = payload[key];
            if (value === undefined || value === null) return;
            if (typeof value === 'object') {
              params.set(key, JSON.stringify(value));
              return;
            }
            params.set(key, String(value));
          });
          return fetch(app.config.campusUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
            credentials: 'same-origin',
            body: params.toString()
          }).then(function (response) {
            return response.json().catch(function () { return null; });
          }).catch(function () { return null; });
        } catch (e) {
          return Promise.resolve(null);
        }
      };

      app.checkPendingTransaction = function (payload) {
        try {
          const params = new URLSearchParams();
          params.set('csrf_token', app.config.csrfToken || '');
          params.set('action', 'check_pending_payment_transaction');
          Object.keys(payload || {}).forEach(function (key) {
            const value = payload[key];
            if (value === undefined || value === null || value === '') return;
            params.set(key, String(value));
          });
          return fetch(app.config.campusUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
            credentials: 'same-origin',
            body: params.toString()
          }).then(function (response) {
            return response.json().catch(function () { return null; });
          }).catch(function () { return null; });
        } catch (e) {
          return Promise.resolve(null);
        }
      };

      app.exeatMetadata = function (purposeField, form, parentContact1Field, parentContact2Field) {
        return {
          purpose: purposeField ? String(purposeField.value || 'emergency').toLowerCase().trim() : 'emergency',
          reason: String((form.querySelector('[name=\"reason\"]') || {}).value || '').trim(),
          duration_days: Number((form.querySelector('[name=\"duration_days\"]') || {}).value || 0),
          destination: String((form.querySelector('[name=\"destination\"]') || {}).value || '').trim(),
          parent_contact_1: String((parentContact1Field || {}).value || '').trim(),
          parent_contact_2: String((parentContact2Field || {}).value || '').trim()
        };
      };

      app.overtimeMetadata = function (form) {
        const exeatIdField = form.querySelector('[name=\"exeat_id\"]');
        return {
          exeat_id: Number((exeatIdField || {}).value || 0),
          purpose: String(form.getAttribute('data-purpose') || '').toLowerCase(),
          overtime_days: Number(form.getAttribute('data-overtime-days') || '0'),
          overtime_total: Number(form.getAttribute('data-overtime-total') || '0')
        };
      };

      app.exeat.manual = function (metadata) {
        const instruction = String(app.config.manualPaymentInstruction || '').trim()
          || 'Make your transfer, then click I have transferred to record it before confirmation.';
        const cleanStudentName = String(app.config.studentName || 'Student')
          .replace(/\s*-\s*student\s*$/i, '')
          .trim() || 'Student';
        const cleanStudentId = String(app.config.studentId || '').trim();
        const studentIdentity = cleanStudentId
          ? cleanStudentName + ' - ' + cleanStudentId
          : cleanStudentName;
        const studentLineLabel = 'Name';
        const lines = [
          '<div style="text-align:left;display:grid;gap:8px;">',
          '<div><strong>Bank Name:</strong> ' + (app.config.manualPaymentBankName || '-') + '</div>',
          '<div><strong>Account No:</strong> ' + (app.config.manualPaymentAccountNo || '-') + '</div>',
          '<div><strong>Account Name:</strong> ' + (app.config.manualPaymentAccountName || '-') + '</div>',
          '<div><strong>WhatsApp No:</strong> ' + (app.config.manualPaymentWhatsappNo || '-') + '</div>',
          '<div><strong>Instruction:</strong><div style="margin-top:6px;white-space:pre-wrap;line-height:1.5;">' + instruction + '</div></div>',
          '<div style="margin-top:10px;font-weight:700">Amount: ' + app.config.currency + ' ' + app.config.exeatAmount + '</div>',
          '</div>'
        ].join('');

        const ref = app.generateReference('MANUAL', 'EXEAT');
        Swal.fire({
          title: 'Manual Payment',
          html: lines,
          confirmButtonText: 'I have transferred',
          showCancelButton: true,
          cancelButtonText: 'Cancel'
        }).then(function (result) {
          if (!result.isConfirmed) return;
          app.recordTransaction({
            module: 'campus',
            purpose: 'campus_exeat',
            transaction_id: ref,
            gateway: 'manual',
            status: 'inprogress',
            amount: app.config.exeatAmount,
            currency: app.config.currency,
            reference: ref,
            source_type: 'campus_exeat',
            metadata: metadata,
            note: 'Manual campus payment submitted. Awaiting confirmation.'
          }).then(function (result) {
            if (result && result.pending) {
              app.notifyInfo('Payment pending', result.message || 'You have a pending Payment for this Purpose.');
              return;
            }
            app.openWhatsappChat(app.config.manualPaymentWhatsappNo, [
              'Hello, I have transferred for campus exeat payment.',
              studentLineLabel + ': ' + studentIdentity,
              'Reference: ' + ref,
              'Amount: ' + app.config.currency + ' ' + app.config.exeatAmount
            ]);
            window.location.href = app.config.campusUrl + '?tab=transactions';
          });
        });
      };
    })();
  </script>
  <script>
    (function () {
      const app = window.CampusPaymentGateways;
      const exeatForm = document.getElementById('exeatApplyForm');
      if (exeatForm && app && app.config.exeatPaymentEnabled) {
        const gatewayField = document.getElementById('paymentGatewayField');
        const refField = document.getElementById('paymentReferenceField');
        const txField = document.getElementById('paymentTransactionIdField');
        const flowReadyField = document.getElementById('paymentFlowReadyField');
        const purposeField = document.getElementById('exeatPurposeField');
        const parentContact1Field = document.getElementById('exeatParentContact1');
        const parentContact2Field = document.getElementById('exeatParentContact2');
        let started = false;

        if (flowReadyField) {
          flowReadyField.value = '1';
        }

        function hasValidParentContact() {
          return [parentContact1Field, parentContact2Field].some(function (field) {
            const digits = app.normalizePhoneDigits(field && field.value ? field.value : '');
            return digits.length >= 7 && digits.length <= 15;
          });
        }

        app.exeat.submitWithReference = function (gateway, reference, transactionId) {
          if (!gatewayField || !refField || !txField) {
            app.notifyError('Payment failed', 'Payment fields are missing from the form.');
            return;
          }
          if (flowReadyField) {
            flowReadyField.value = '1';
          }
          gatewayField.value = gateway;
          refField.value = reference;
          txField.value = transactionId || reference;
          started = true;
          exeatForm.submit();
        };

        app.exeat.onPaymentClosed = function () {
          started = false;
        };

        exeatForm.addEventListener('submit', function (e) {
          if (started) {
            return;
          }
          if (typeof exeatForm.reportValidity === 'function' && !exeatForm.reportValidity()) {
            e.preventDefault();
            return;
          }
          if (app.config.hasActiveExeat) {
            e.preventDefault();
            app.notifyError('Request blocked', 'You already have an active exeat request. Complete or return from it before paying for another one.');
            return;
          }
          if (!hasValidParentContact()) {
            e.preventDefault();
            app.notifyError('Payment failed', 'At least one of Parent Contact 1 or Parent Contact 2 must be a valid phone number. Update profile via admin.');
            return;
          }
          const purpose = purposeField ? String(purposeField.value || 'emergency').toLowerCase().trim() : 'emergency';
          if (purpose === 'holiday') {
            if (gatewayField) gatewayField.value = '';
            if (refField) refField.value = '';
            if (txField) txField.value = '';
            if (flowReadyField) flowReadyField.value = '1';
            started = true;
            return;
          }
          if (!flowReadyField || flowReadyField.value !== '1') {
            e.preventDefault();
            app.notifyError('Payment failed', 'Payment gateway selector is not ready. Reload the page and try again.');
            return;
          }
          e.preventDefault();
          app.checkPendingTransaction({ module: 'campus', purpose: 'campus_exeat' }).then(function (pendingResult) {
            if (pendingResult && pendingResult.pending) {
              app.notifyInfo('Payment pending', pendingResult.message || 'You have a pending Payment for this Purpose.');
              return;
            }
            if (!Number.isFinite(app.config.exeatAmount) || app.config.exeatAmount <= 0) {
              app.notifyError('Payment failed', 'Invalid payment amount configured.');
              return;
            }
            if (!app.config.paystackEnabled && !app.config.monnifyEnabled && !app.config.fountainpayEnabled && !app.config.manualPaymentEnabled) {
              app.notifyError('Payment failed', 'No payment gateway is currently enabled. Contact admin.');
              return;
            }
            if (typeof Swal === 'undefined') {
              const defaultGateway = app.config.paystackEnabled ? 'paystack' : (app.config.monnifyEnabled ? 'monnify' : (app.config.fountainpayEnabled ? 'fountainpay' : 'manual'));
              const gateway = window.prompt('Choose payment gateway: monnify, paystack, fountainpay or manual', defaultGateway);
              if (!gateway) return;
              if (gateway.toLowerCase().trim() === 'paystack' && app.config.paystackEnabled) return app.exeat.paystack();
              if (gateway.toLowerCase().trim() === 'monnify' && app.config.monnifyEnabled) return app.exeat.monnify();
              if (gateway.toLowerCase().trim() === 'fountainpay' && app.config.fountainpayEnabled) return app.exeat.fountainpay();
              if (gateway.toLowerCase().trim() === 'manual' && app.config.manualPaymentEnabled) return app.exeat.manual(app.exeatMetadata(purposeField, exeatForm, parentContact1Field, parentContact2Field));
              app.notifyError('Payment failed', 'Selected gateway is not enabled.');
              return;
            }

            Swal.fire({
              title: 'Choose payment gateway (Emergency)',
              html: app.chooseGatewayHtml('gateway', app.config.exeatAmount, app.config.currency, {
                paystack: app.config.paystackEnabled,
                monnify: app.config.monnifyEnabled,
                fountainpay: app.config.fountainpayEnabled,
                manual: app.config.manualPaymentEnabled
              }),
              confirmButtonText: 'Proceed to payment',
              showCancelButton: true,
              didOpen: function () {
                const first = document.querySelector('input[name="gateway"]');
                if (first) first.checked = true;
              },
              preConfirm: function () {
                const checked = document.querySelector('input[name="gateway"]:checked');
                if (!checked) {
                  Swal.showValidationMessage('Select a gateway');
                  return false;
                }
                return checked.value;
              }
            }).then(function (result) {
              if (!result.isConfirmed || !result.value) return;
              if (result.value === 'paystack' && app.config.paystackEnabled) return app.exeat.paystack();
              if (result.value === 'monnify' && app.config.monnifyEnabled) return app.exeat.monnify();
              if (result.value === 'fountainpay' && app.config.fountainpayEnabled) return app.exeat.fountainpay();
              if (result.value === 'manual' && app.config.manualPaymentEnabled) return app.exeat.manual(app.exeatMetadata(purposeField, exeatForm, parentContact1Field, parentContact2Field));
              app.notifyError('Payment failed', 'Selected gateway is not enabled.');
            });
          });
        });
      }

      const overtimeForms = Array.prototype.slice.call(document.querySelectorAll('.js-security-return-form'));
      if (!overtimeForms.length || !app) return;

      function submitFormWithHandlers(form) {
        if (!form) return;
        if (typeof form.requestSubmit === 'function') {
          form.requestSubmit();
          return;
        }
        const submitControl = document.createElement('button');
        submitControl.type = 'submit';
        submitControl.hidden = true;
        form.appendChild(submitControl);
        submitControl.click();
        form.removeChild(submitControl);
      }

      app.overtime.submitWithReference = function (form, gateway, reference, transactionId) {
        const gatewayField = form.querySelector('.js-overtime-gateway');
        const refField = form.querySelector('.js-overtime-reference');
        const txField = form.querySelector('.js-overtime-transaction-id');
        if (!gatewayField || !refField || !txField) {
          app.notifyError('Overtime payment failed', 'Overtime payment fields are missing from the form.');
          return;
        }
        gatewayField.value = gateway;
        refField.value = reference;
        txField.value = transactionId || reference;
        form.dataset.paymentStarted = '1';
        submitFormWithHandlers(form);
      };

      app.overtime.onPaymentClosed = function (form) {
        form.dataset.paymentStarted = '';
      };

      function chooseOvertimeGateway(form, amount, studentName, studentEmail, studentPhone, overtimeDays) {
        if (!Number.isFinite(amount) || amount <= 0) {
          app.notifyError('Overtime payment failed', 'Invalid overtime amount configured.');
          return;
        }
        if (!app.config.paystackEnabled && !app.config.monnifyEnabled && !app.config.fountainpayEnabled && !app.config.manualPaymentEnabled) {
          app.notifyError('Overtime payment failed', 'No payment gateway is currently enabled. Contact admin.');
          return;
        }
        if (typeof Swal === 'undefined') {
          const defaultGateway = app.config.paystackEnabled ? 'paystack' : (app.config.monnifyEnabled ? 'monnify' : (app.config.fountainpayEnabled ? 'fountainpay' : 'manual'));
          const gateway = window.prompt('Choose payment gateway: monnify, paystack, fountainpay or manual', defaultGateway);
          if (!gateway) return;
          if (gateway.toLowerCase().trim() === 'paystack' && app.config.paystackEnabled) return app.overtime.paystack(form, amount, studentEmail);
          if (gateway.toLowerCase().trim() === 'monnify' && app.config.monnifyEnabled) return app.overtime.monnify(form, amount, studentName, studentEmail, studentPhone);
          if (gateway.toLowerCase().trim() === 'fountainpay' && app.config.fountainpayEnabled) return app.overtime.fountainpay(form, amount, studentName, studentEmail, studentPhone);
          if (gateway.toLowerCase().trim() === 'manual' && app.config.manualPaymentEnabled) return app.overtime.manual(form, amount);
          app.notifyError('Overtime payment failed', 'Selected gateway is not enabled.');
          return;
        }

        Swal.fire({
          icon: 'warning',
          title: 'Pay For Overtime',
          html: app.chooseGatewayHtml(
            'overtime_gateway_choice',
            amount.toFixed(2),
            app.config.currency,
            {
              paystack: app.config.paystackEnabled,
              monnify: app.config.monnifyEnabled,
              fountainpay: app.config.fountainpayEnabled,
              manual: app.config.manualPaymentEnabled
            },
            'Exeat exceeded by <strong>' + overtimeDays + '</strong> day(s).'
          ),
          confirmButtonText: 'Proceed to payment',
          showCancelButton: true,
          didOpen: function () {
            const first = document.querySelector('input[name="overtime_gateway_choice"]');
            if (first) first.checked = true;
          },
          preConfirm: function () {
            const checked = document.querySelector('input[name="overtime_gateway_choice"]:checked');
            if (!checked) {
              Swal.showValidationMessage('Select a gateway');
              return false;
            }
            return checked.value;
          }
        }).then(function (result) {
          if (!result.isConfirmed || !result.value) return;
          if (result.value === 'paystack' && app.config.paystackEnabled) return app.overtime.paystack(form, amount, studentEmail);
          if (result.value === 'monnify' && app.config.monnifyEnabled) return app.overtime.monnify(form, amount, studentName, studentEmail, studentPhone);
          if (result.value === 'fountainpay' && app.config.fountainpayEnabled) return app.overtime.fountainpay(form, amount, studentName, studentEmail, studentPhone);
          if (result.value === 'manual' && app.config.manualPaymentEnabled) return app.overtime.manual(form, amount);
          app.notifyError('Overtime payment failed', 'Selected gateway is not enabled.');
        });
      }

      app.overtime.manual = function (form, amount) {
        const metadata = app.overtimeMetadata(form);
        const exeatId = Number(metadata.exeat_id || 0);
        if (exeatId <= 0) {
          app.notifyError('Overtime payment failed', 'Exeat record is missing for manual overtime payment.');
          return;
        }
        const instruction = String(app.config.manualPaymentInstruction || '').trim()
          || 'Make your transfer, then click I have transferred to record it before confirmation.';
        const studentName = String(form.getAttribute('data-student-name') || app.config.studentName || 'Student').trim();
        const ref = app.generateReference('MANUAL', 'OT');
        const lines = [
          '<div style="text-align:left;display:grid;gap:8px;">',
          '<div><strong>Bank Name:</strong> ' + (app.config.manualPaymentBankName || '-') + '</div>',
          '<div><strong>Account No:</strong> ' + (app.config.manualPaymentAccountNo || '-') + '</div>',
          '<div><strong>Account Name:</strong> ' + (app.config.manualPaymentAccountName || '-') + '</div>',
          '<div><strong>WhatsApp No:</strong> ' + (app.config.manualPaymentWhatsappNo || '-') + '</div>',
          '<div><strong>Instruction:</strong><div style="margin-top:6px;white-space:pre-wrap;line-height:1.5;">' + instruction + '</div></div>',
          '<div><strong>Overtime:</strong> ' + String(metadata.overtime_days || 0) + ' day(s)</div>',
          '<div style="margin-top:10px;font-weight:700">Amount: ' + app.config.currency + ' ' + Number(amount).toFixed(2) + '</div>',
          '</div>'
        ].join('');

        Swal.fire({
          title: 'Manual Overtime Payment',
          html: lines,
          confirmButtonText: 'I have transferred',
          showCancelButton: true,
          cancelButtonText: 'Cancel'
        }).then(function (result) {
          if (!result.isConfirmed) return;
          app.recordTransaction({
            module: 'campus',
            purpose: 'campus_exeat_overtime',
            transaction_id: ref,
            gateway: 'manual',
            status: 'inprogress',
            amount: amount,
            currency: app.config.currency,
            reference: ref,
            source_type: 'campus_exeat_overtime',
            source_id: exeatId,
            metadata: metadata,
            note: 'Manual overtime payment submitted. Awaiting confirmation.'
          }).then(function (recordResult) {
            if (recordResult && recordResult.pending) {
              app.notifyInfo('Payment pending', recordResult.message || 'You have a pending Payment for this Purpose.');
              return;
            }
            app.openWhatsappChat(app.config.manualPaymentWhatsappNo, [
              'Hello, I have transferred for campus overtime payment.',
              'Name: ' + studentName,
              'Reference: ' + ref,
              'Exeat ID: ' + String(exeatId),
              'Amount: ' + app.config.currency + ' ' + Number(amount).toFixed(2)
            ]);
            window.location.href = app.config.campusUrl + '?tab=transactions';
          });
        });
      };

      app.overtime.requiresPayment = function (form) {
        if (!form) return false;
        const purpose = String(form.getAttribute('data-purpose') || '').toLowerCase();
        const holidayOvertimeEnabled = String(form.getAttribute('data-holiday-overtime-enabled') || '0') === '1';
        const overtimeDays = Number(form.getAttribute('data-overtime-days') || '0');
        const overtimeTotal = Number(form.getAttribute('data-overtime-total') || '0');
        return (
          (purpose === 'emergency' || (purpose === 'holiday' && holidayOvertimeEnabled)) &&
          Number.isFinite(overtimeTotal) &&
          overtimeTotal > 0 &&
          overtimeDays > 0
        );
      };

      app.overtime.start = function (form) {
        if (!form || !app.overtime.requiresPayment(form)) {
          return false;
        }
        app.checkPendingTransaction({
          module: 'campus',
          purpose: 'campus_exeat_overtime',
          source_id: String((form.querySelector('[name="exeat_id"]') || {}).value || '')
        }).then(function (pendingResult) {
          if (pendingResult && pendingResult.pending) {
            app.notifyInfo('Payment pending', pendingResult.message || 'You have a pending Payment for this Purpose.');
            return;
          }
          chooseOvertimeGateway(
            form,
            Number(form.getAttribute('data-overtime-total') || '0'),
            String(form.getAttribute('data-student-name') || ''),
            String(form.getAttribute('data-student-email') || ''),
            String(form.getAttribute('data-student-phone') || ''),
            Number(form.getAttribute('data-overtime-days') || '0')
          );
        });
        return true;
      };

      overtimeForms.forEach(function (form) {
        form.addEventListener('submit', function (event) {
          if (form.dataset.paymentStarted === '1') {
            return;
          }
          if (!app.overtime.requiresPayment(form)) {
            form.dataset.paymentStarted = '1';
            return;
          }
          event.preventDefault();
          app.overtime.start(form);
        });
      });
    })();
  </script>
    <script>
    (function () {
      const app = window.CampusPaymentGateways;
      if (!app) return;

      app.exeat.paystack = function () {
        if (!app.config.paystackPublicKey) {
          app.notifyError('Payment failed', 'Paystack public key is not configured by admin.');
          return;
        }
        if (!app.config.studentEmail) {
          app.notifyError('Payment failed', 'Student email is required for Paystack checkout.');
          return;
        }
        if (typeof PaystackPop === 'undefined') {
          app.notifyError('Payment failed', 'Paystack SDK failed to load. Check internet connection and try again.');
          return;
        }
        const reference = app.generateReference('paystack');
        const metadata = app.exeatMetadata(
          document.getElementById('exeatPurposeField'),
          document.getElementById('exeatApplyForm'),
          document.getElementById('exeatParentContact1'),
          document.getElementById('exeatParentContact2')
        );
        app.recordTransaction({
          module: 'campus',
          purpose: 'campus_exeat',
          transaction_id: reference,
          gateway: 'paystack',
          status: 'inprogress',
          amount: app.config.exeatAmount,
          currency: app.config.currency,
          reference: reference,
          source_type: 'campus_exeat',
          metadata: metadata
        });
        const handler = PaystackPop.setup({
          key: app.config.paystackPublicKey,
          email: app.config.studentEmail,
          amount: app.config.exeatAmountMinor,
          currency: app.config.currency,
          ref: reference,
          metadata: {
            custom_fields: [
              { display_name: 'Campus Module', variable_name: 'module', value: 'campus_exeat' }
            ]
          },
          callback: function (response) {
            const ref = String(response && response.reference ? response.reference : '').trim();
            if (!ref) {
              app.notifyError('Payment failed', 'Paystack did not return a valid payment reference.');
              app.recordTransaction({ module: 'campus', purpose: 'campus_exeat', transaction_id: reference, gateway: 'paystack', status: 'failed', amount: app.config.exeatAmount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat', metadata: metadata, note: 'Missing payment reference from Paystack callback.' });
              app.exeat.onPaymentClosed();
              return;
            }
            app.recordTransaction({ module: 'campus', purpose: 'campus_exeat', transaction_id: reference, gateway: 'paystack', status: 'successful', amount: app.config.exeatAmount, currency: app.config.currency, reference: ref, source_type: 'campus_exeat', metadata: metadata });
            app.exeat.submitWithReference('paystack', ref, reference);
          },
          onClose: function () {
            app.recordTransaction({ module: 'campus', purpose: 'campus_exeat', transaction_id: reference, gateway: 'paystack', status: 'failed', amount: app.config.exeatAmount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat', metadata: metadata, note: 'Payment popup closed by user.' });
            app.exeat.onPaymentClosed();
          }
        });
        handler.openIframe();
      };

      app.overtime.paystack = function (form, amount, email) {
        if (!app.config.paystackPublicKey) {
          app.notifyError('Overtime payment failed', 'Paystack public key is not configured by admin.');
          return;
        }
        if (!email) {
          app.notifyError('Overtime payment failed', 'Student email is required for Paystack checkout.');
          return;
        }
        if (typeof PaystackPop === 'undefined') {
          app.notifyError('Overtime payment failed', 'Paystack SDK failed to load. Check internet connection and try again.');
          return;
        }
        const reference = app.generateReference('paystack', 'OT');
        const metadata = app.overtimeMetadata(form);
        app.recordTransaction({
          module: 'campus',
          purpose: 'campus_exeat_overtime',
          transaction_id: reference,
          gateway: 'paystack',
          status: 'inprogress',
          amount: amount,
          currency: app.config.currency,
          reference: reference,
          source_type: 'campus_exeat_overtime',
          source_id: metadata.exeat_id || '',
          metadata: metadata
        });
        PaystackPop.setup({
          key: app.config.paystackPublicKey,
          email: email,
          amount: Math.round(amount * 100),
          currency: app.config.currency,
          ref: reference,
          metadata: {
            custom_fields: [
              { display_name: 'Campus Module', variable_name: 'module', value: 'campus_exeat_overtime' }
            ]
          },
          callback: function (response) {
            const ref = String(response && response.reference ? response.reference : '').trim();
            if (!ref) {
              app.notifyError('Overtime payment failed', 'Paystack did not return a valid payment reference.');
              app.recordTransaction({ module: 'campus', purpose: 'campus_exeat_overtime', transaction_id: reference, gateway: 'paystack', status: 'failed', amount: amount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat_overtime', source_id: metadata.exeat_id || '', metadata: metadata, note: 'Missing payment reference from Paystack callback.' });
              app.overtime.onPaymentClosed(form);
              return;
            }
            app.recordTransaction({ module: 'campus', purpose: 'campus_exeat_overtime', transaction_id: reference, gateway: 'paystack', status: 'successful', amount: amount, currency: app.config.currency, reference: ref, source_type: 'campus_exeat_overtime', source_id: metadata.exeat_id || '', metadata: metadata });
            app.overtime.submitWithReference(form, 'paystack', ref, reference);
          },
          onClose: function () {
            app.recordTransaction({ module: 'campus', purpose: 'campus_exeat_overtime', transaction_id: reference, gateway: 'paystack', status: 'failed', amount: amount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat_overtime', source_id: metadata.exeat_id || '', metadata: metadata, note: 'Payment popup closed by user.' });
            app.overtime.onPaymentClosed(form);
          }
        }).openIframe();
      };
    })();
  </script>
    <script>
    (function () {
      const app = window.CampusPaymentGateways;
      if (!app) return;

      app.exeat.monnify = function () {
        if (!app.config.monnifyPublicKey || !app.config.monnifyContractCode) {
          app.notifyError('Payment failed', 'Monnify public key/contract code is not configured by admin.');
          return;
        }
        if (!Number.isFinite(app.config.exeatAmount) || app.config.exeatAmount < 100) {
          app.notifyError('Payment failed', 'Monnify minimum payment amount is NGN 100.');
          return;
        }
        if (!app.config.studentEmail) {
          app.notifyError('Payment failed', 'Student email is required for Monnify checkout.');
          return;
        }
        if (typeof MonnifySDK === 'undefined' || typeof MonnifySDK.initialize !== 'function') {
          app.notifyError('Payment failed', 'Monnify SDK failed to load. Check internet connection and try again.');
          return;
        }
        const reference = app.generateReference('monnify');
        const metadata = app.exeatMetadata(
          document.getElementById('exeatPurposeField'),
          document.getElementById('exeatApplyForm'),
          document.getElementById('exeatParentContact1'),
          document.getElementById('exeatParentContact2')
        );
        app.recordTransaction({
          module: 'campus',
          purpose: 'campus_exeat',
          transaction_id: reference,
          gateway: 'monnify',
          status: 'inprogress',
          amount: app.config.exeatAmount,
          currency: app.config.currency,
          reference: reference,
          source_type: 'campus_exeat',
          metadata: metadata
        });
        MonnifySDK.initialize({
          amount: app.config.exeatAmount,
          currency: app.config.currency,
          reference: reference,
          customerFullName: app.config.studentName || 'Campus Student',
          customerEmail: app.config.studentEmail,
          customerMobileNumber: app.config.studentPhone || undefined,
          apiKey: app.config.monnifyPublicKey,
          contractCode: app.config.monnifyContractCode,
          paymentDescription: 'Campus Exeat Payment',
          isTestMode: app.config.monnifyTestMode,
          metadata: { module: 'campus_exeat' },
          onComplete: function (response) {
            const status = String((response && (response.paymentStatus || response.status)) || '').toUpperCase();
            const ref = String((response && (response.transactionReference || response.paymentReference || response.reference)) || reference).trim();
            if (status !== 'PAID' && status !== 'SUCCESS') {
              app.notifyError('Payment failed', 'Monnify payment was not successful.');
              app.recordTransaction({ module: 'campus', purpose: 'campus_exeat', transaction_id: reference, gateway: 'monnify', status: 'failed', amount: app.config.exeatAmount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat', metadata: metadata, note: 'Monnify returned status ' + status + '.' });
              app.exeat.onPaymentClosed();
              return;
            }
            if (!ref) {
              app.notifyError('Payment failed', 'Monnify did not return a valid payment reference.');
              app.recordTransaction({ module: 'campus', purpose: 'campus_exeat', transaction_id: reference, gateway: 'monnify', status: 'failed', amount: app.config.exeatAmount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat', metadata: metadata, note: 'Missing payment reference from Monnify callback.' });
              app.exeat.onPaymentClosed();
              return;
            }
            app.recordTransaction({ module: 'campus', purpose: 'campus_exeat', transaction_id: reference, gateway: 'monnify', status: 'successful', amount: app.config.exeatAmount, currency: app.config.currency, reference: ref, source_type: 'campus_exeat', metadata: metadata });
            app.exeat.submitWithReference('monnify', ref, reference);
          },
          onClose: function () {
            app.recordTransaction({ module: 'campus', purpose: 'campus_exeat', transaction_id: reference, gateway: 'monnify', status: 'failed', amount: app.config.exeatAmount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat', metadata: metadata, note: 'Payment popup closed by user.' });
            app.exeat.onPaymentClosed();
          }
        });
      };

      app.overtime.monnify = function (form, amount, studentName, email, studentPhone) {
        if (!app.config.monnifyPublicKey || !app.config.monnifyContractCode) {
          app.notifyError('Overtime payment failed', 'Monnify public key/contract code is not configured by admin.');
          return;
        }
        if (!Number.isFinite(amount) || amount < 100) {
          app.notifyError('Overtime payment failed', 'Monnify minimum payment amount is NGN 100.');
          return;
        }
        if (!email) {
          app.notifyError('Overtime payment failed', 'Student email is required for Monnify checkout.');
          return;
        }
        if (typeof MonnifySDK === 'undefined' || typeof MonnifySDK.initialize !== 'function') {
          app.notifyError('Overtime payment failed', 'Monnify SDK failed to load. Check internet connection and try again.');
          return;
        }
        const reference = app.generateReference('monnify', 'OT');
        const metadata = app.overtimeMetadata(form);
        app.recordTransaction({
          module: 'campus',
          purpose: 'campus_exeat_overtime',
          transaction_id: reference,
          gateway: 'monnify',
          status: 'inprogress',
          amount: amount,
          currency: app.config.currency,
          reference: reference,
          source_type: 'campus_exeat_overtime',
          source_id: metadata.exeat_id || '',
          metadata: metadata
        });
        MonnifySDK.initialize({
          amount: amount,
          currency: app.config.currency,
          reference: reference,
          customerFullName: studentName || 'Campus Student',
          customerEmail: email,
          customerMobileNumber: studentPhone || undefined,
          apiKey: app.config.monnifyPublicKey,
          contractCode: app.config.monnifyContractCode,
          paymentDescription: 'Campus Exeat Overtime Payment',
          isTestMode: app.config.monnifyTestMode,
          metadata: { module: 'campus_exeat_overtime' },
          onComplete: function (response) {
            const status = String((response && (response.paymentStatus || response.status)) || '').toUpperCase();
            const ref = String((response && (response.transactionReference || response.paymentReference || response.reference)) || reference).trim();
            if (status !== 'PAID' && status !== 'SUCCESS') {
              app.notifyError('Overtime payment failed', 'Monnify payment was not successful.');
              app.recordTransaction({ module: 'campus', purpose: 'campus_exeat_overtime', transaction_id: reference, gateway: 'monnify', status: 'failed', amount: amount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat_overtime', source_id: metadata.exeat_id || '', metadata: metadata, note: 'Monnify returned status ' + status + '.' });
              app.overtime.onPaymentClosed(form);
              return;
            }
            if (!ref) {
              app.notifyError('Overtime payment failed', 'Monnify did not return a valid payment reference.');
              app.recordTransaction({ module: 'campus', purpose: 'campus_exeat_overtime', transaction_id: reference, gateway: 'monnify', status: 'failed', amount: amount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat_overtime', source_id: metadata.exeat_id || '', metadata: metadata, note: 'Missing payment reference from Monnify callback.' });
              app.overtime.onPaymentClosed(form);
              return;
            }
            app.recordTransaction({ module: 'campus', purpose: 'campus_exeat_overtime', transaction_id: reference, gateway: 'monnify', status: 'successful', amount: amount, currency: app.config.currency, reference: ref, source_type: 'campus_exeat_overtime', source_id: metadata.exeat_id || '', metadata: metadata });
            app.overtime.submitWithReference(form, 'monnify', ref, reference);
          },
          onClose: function () {
            app.recordTransaction({ module: 'campus', purpose: 'campus_exeat_overtime', transaction_id: reference, gateway: 'monnify', status: 'failed', amount: amount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat_overtime', source_id: metadata.exeat_id || '', metadata: metadata, note: 'Payment popup closed by user.' });
            app.overtime.onPaymentClosed(form);
          }
        });
      };
    })();
  </script>
    <script>
    (function () {
      const app = window.CampusPaymentGateways;
      if (!app) return;

      app.exeat.fountainpay = function () {
        app.logFountainPayDebug('start', {
          sdkLoaded: typeof Fountainpay !== 'undefined' && typeof Fountainpay.setup === 'function',
          paymentEnabled: app.config.exeatPaymentEnabled,
          publicKeyMasked: app.maskKey(app.config.fountainpayPublicKey),
          checkoutUrl: app.config.fountainpayCheckoutUrl || '',
          hasWalletDetails: !!app.config.fountainpayWalletDetails,
          amount: app.config.exeatAmount,
          currency: app.config.currency,
          studentEmail: app.config.studentEmail || '',
          studentPhone: app.config.studentPhone || '',
          studentName: app.config.studentName || ''
        });
        if (!app.config.fountainpayPublicKey) {
          app.notifyError('Payment failed', 'FountainPay public key is not configured by admin.');
          return;
        }
        if (!app.config.studentEmail) {
          app.notifyError('Payment failed', 'Student email is required for FountainPay checkout.');
          return;
        }
        if (app.config.fountainpayHostedCheckoutUrl) {
          window.open(app.config.fountainpayHostedCheckoutUrl, '_blank', 'noopener,noreferrer');
          const hostedRef = app.fallbackFountainPayReference(
            'Complete payment in the opened FountainPay page and enter the transaction reference.',
            function () {
              app.exeat.onPaymentClosed();
            }
          );
          if (!hostedRef) return;
          app.exeat.submitWithReference('fountainpay', String(hostedRef).trim(), String(hostedRef).trim());
          return;
        }
        if (typeof Fountainpay === 'undefined' || typeof Fountainpay.setup !== 'function') {
          if (app.config.fountainpayCheckoutUrl) {
            window.open(app.config.fountainpayCheckoutUrl, '_blank', 'noopener,noreferrer');
          }
          const hint = app.config.fountainpayCheckoutUrl
            ? 'FountainPay inline SDK is unavailable. Complete payment in the opened FountainPay page and enter the transaction reference.'
            : 'FountainPay inline SDK failed to load. Enter the transaction reference after payment.';
          const ref = app.fallbackFountainPayReference(hint, function () {
            app.exeat.onPaymentClosed();
          });
          if (!ref) return;
          app.exeat.submitWithReference('fountainpay', String(ref).trim(), String(ref).trim());
          return;
        }

        const reference = app.generateReference('fountainpay');
        const metadata = app.exeatMetadata(
          document.getElementById('exeatPurposeField'),
          document.getElementById('exeatApplyForm'),
          document.getElementById('exeatParentContact1'),
          document.getElementById('exeatParentContact2')
        );
        app.recordTransaction({
          module: 'campus',
          purpose: 'campus_exeat',
          transaction_id: reference,
          gateway: 'fountainpay',
          status: 'inprogress',
          amount: app.config.exeatAmount,
          currency: app.config.currency,
          reference: reference,
          source_type: 'campus_exeat',
          metadata: metadata
        });
        const payload = {
          publicKey: app.config.fountainpayPublicKey,
          tnxRef: reference,
          amount: app.config.exeatAmount,
          currency: app.config.currency,
          narration: 'Campus Exeat Payment',
          // channels: ['card', 'directDebit', 'qrcode', 'qrcode'],
          customer: app.buildFountainPayCustomer(app.config.studentName, app.config.studentEmail, app.config.studentPhone),
          metadata: {
            minimized: false,
            theme: {
              disableDarkMode: false,
              mode: 'light'
            },
            module: 'campus_exeat'
          },
          callback: function (response) {
            app.logFountainPayDebug('callback', response || null);
            const ref = String((response && (response.transaction_ref || response.tnxRef || response.reference || response.transactionReference)) || reference).trim();
            if (!ref) {
              app.notifyError('Payment failed', 'FountainPay did not return a valid payment reference.');
              app.recordTransaction({ module: 'campus', purpose: 'campus_exeat', transaction_id: reference, gateway: 'fountainpay', status: 'failed', amount: app.config.exeatAmount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat', metadata: metadata, note: 'Missing payment reference from FountainPay callback.' });
              app.exeat.onPaymentClosed();
              return;
            }
            app.recordTransaction({ module: 'campus', purpose: 'campus_exeat', transaction_id: reference, gateway: 'fountainpay', status: 'successful', amount: app.config.exeatAmount, currency: app.config.currency, reference: ref, source_type: 'campus_exeat', metadata: metadata });
            app.exeat.submitWithReference('fountainpay', ref, reference);
          },
          close: function (error) {
            app.logFountainPayDebug('close', error || null);
            app.recordTransaction({ module: 'campus', purpose: 'campus_exeat', transaction_id: reference, gateway: 'fountainpay', status: 'failed', amount: app.config.exeatAmount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat', metadata: metadata, note: 'Payment popup closed by user.' });
            app.exeat.onPaymentClosed();
            if (app.config.fountainpayWalletDetails) {
              app.notifyInfo('Payment closed', app.config.fountainpayWalletDetails);
            }
          }
        };
        const customerError = app.validateFountainPayCustomer(payload.customer, 'User profile');
        if (customerError) {
          app.notifyError('Payment failed', customerError);
          app.exeat.onPaymentClosed();
          return;
        }
        const originalCallback = payload.callback;
        const originalClose = payload.close;
        payload.callback = function (response) {
          originalCallback(response);
        };
        payload.close = function (error) {
          originalClose(error);
        };
        app.logFountainPayDebug('payload', {
          publicKeyMasked: app.maskKey(payload.publicKey),
          tnxRef: payload.tnxRef,
          amount: payload.amount,
          currency: payload.currency,
          narration: payload.narration,
          channels: Array.isArray(payload.channels) ? payload.channels.slice() : [],
          customer: {
            email: payload.customer.email,
            phoneNo: payload.customer.phoneNo || '',
            lastName: payload.customer.lastName,
            otherName: payload.customer.otherName
          },
          metadata: payload.metadata
        });
        Fountainpay.setup(payload);
      };

      app.overtime.fountainpay = function (form, amount, studentName, email, phone) {
        if (!app.config.fountainpayPublicKey) {
          app.notifyError('Overtime payment failed', 'FountainPay public key is not configured by admin.');
          return;
        }
        if (!email) {
          app.notifyError('Overtime payment failed', 'Student email is required for FountainPay checkout.');
          return;
        }
        if (app.config.fountainpayHostedCheckoutUrl) {
          window.open(app.config.fountainpayHostedCheckoutUrl, '_blank', 'noopener,noreferrer');
          const hostedRef = app.fallbackFountainPayReference(
            'Complete payment in the opened page and enter the transaction reference.',
            function () {
              app.overtime.onPaymentClosed(form);
            }
          );
          if (!hostedRef) return;
          app.overtime.submitWithReference(form, 'fountainpay', String(hostedRef).trim(), String(hostedRef).trim());
          return;
        }
        if (typeof Fountainpay === 'undefined' || typeof Fountainpay.setup !== 'function') {
          if (app.config.fountainpayHostedCheckoutUrl) {
            window.open(app.config.fountainpayHostedCheckoutUrl, '_blank', 'noopener,noreferrer');
          }
          const hint = app.config.fountainpayHostedCheckoutUrl
            ? 'FountainPay inline SDK is unavailable. Complete payment in the opened page and enter the transaction reference.'
            : 'FountainPay inline SDK failed to load. Enter the transaction reference after payment.';
          const ref = app.fallbackFountainPayReference(hint, function () {
            app.overtime.onPaymentClosed(form);
          });
          if (!ref) return;
          app.overtime.submitWithReference(form, 'fountainpay', String(ref).trim(), String(ref).trim());
          return;
        }
        const reference = app.generateReference('fountainpay', 'OT');
        const metadata = app.overtimeMetadata(form);
        app.recordTransaction({
          module: 'campus',
          purpose: 'campus_exeat_overtime',
          transaction_id: reference,
          gateway: 'fountainpay',
          status: 'inprogress',
          amount: amount,
          currency: app.config.currency,
          reference: reference,
          source_type: 'campus_exeat_overtime',
          source_id: metadata.exeat_id || '',
          metadata: metadata
        });
        const payload = {
          publicKey: app.config.fountainpayPublicKey,
          tnxRef: reference,
          amount: amount,
          currency: app.config.currency,
          narration: 'Campus Exeat Overtime Payment',
          channels: ['card', 'directDebit', 'qrcode', 'qrcode'],
          customer: app.buildFountainPayCustomer(studentName, email, phone),
          metadata: {
            minimized: false,
            theme: {
              disableDarkMode: false,
              mode: 'light'
            },
            module: 'campus_exeat_overtime'
          },
          callback: function (response) {
            const ref = String((response && (response.transaction_ref || response.tnxRef || response.reference || response.transactionReference)) || reference).trim();
            if (!ref) {
              app.notifyError('Overtime payment failed', 'FountainPay did not return a valid payment reference.');
              app.recordTransaction({ module: 'campus', purpose: 'campus_exeat_overtime', transaction_id: reference, gateway: 'fountainpay', status: 'failed', amount: amount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat_overtime', source_id: metadata.exeat_id || '', metadata: metadata, note: 'Missing payment reference from FountainPay callback.' });
              app.overtime.onPaymentClosed(form);
              return;
            }
            app.recordTransaction({ module: 'campus', purpose: 'campus_exeat_overtime', transaction_id: reference, gateway: 'fountainpay', status: 'successful', amount: amount, currency: app.config.currency, reference: ref, source_type: 'campus_exeat_overtime', source_id: metadata.exeat_id || '', metadata: metadata });
            app.overtime.submitWithReference(form, 'fountainpay', ref, reference);
          },
          close: function () {
            app.recordTransaction({ module: 'campus', purpose: 'campus_exeat_overtime', transaction_id: reference, gateway: 'fountainpay', status: 'failed', amount: amount, currency: app.config.currency, reference: reference, source_type: 'campus_exeat_overtime', source_id: metadata.exeat_id || '', metadata: metadata, note: 'Payment popup closed by user.' });
            app.overtime.onPaymentClosed(form);
            if (app.config.fountainpayWalletDetails) {
              app.notifyInfo('Payment closed', app.config.fountainpayWalletDetails);
            }
          }
        };
        const customerError = app.validateFountainPayCustomer(payload.customer, 'Student');
        if (customerError) {
          app.notifyError('Overtime payment failed', customerError);
          app.overtime.onPaymentClosed(form);
          return;
        }
        const originalCallback = payload.callback;
        const originalClose = payload.close;
        payload.callback = function (response) {
          originalCallback(response);
        };
        payload.close = function () {
          originalClose();
        };
        Fountainpay.setup(payload);
      };
    })();
  </script>
  <script>
    (function () {
      const form = document.getElementById('liveLogForm');
      if (!form) return;
      const hostLookup = document.getElementById('hostUserLookup');
      const hostId = document.getElementById('hostAppUserId');
      const userPhone = document.getElementById('liveUserPhone');
      const users = [];

      const userMap = new Map();
      users.forEach((u) => userMap.set(String(u.display).toLowerCase(), u));

      function syncFromLookup() {
        if (!hostLookup || !hostId) return;
        const key = hostLookup.value.trim().toLowerCase();
        const hit = userMap.get(key);
        if (!hit) {
          hostId.value = '';
          if (userPhone) userPhone.value = '';
          return;
        }
        hostId.value = String(hit.id);
        if (userPhone) userPhone.value = hit.phone || '';
      }

      if (hostLookup) {
        hostLookup.addEventListener('change', syncFromLookup);
        hostLookup.addEventListener('input', syncFromLookup);
      }
      function showLookupError(message) {
        if (typeof Swal !== 'undefined') {
          Swal.fire({ icon: 'error', title: 'Invalid selection', text: message });
          return;
        }
        alert(message);
      }
      form.addEventListener('submit', function (e) {
        syncFromLookup();
        if (!hostId || !hostId.value) {
          e.preventDefault();
          hostLookup.focus();
          showLookupError('Select a valid host user from the suggestion list.');
        }
      });
      syncFromLookup();
    })();
  </script>
  <script>
    (function () {
      const form = document.getElementById('staffLogForm');
      if (!form) return;
      const staffLookup = document.getElementById('staffLookup');
      const staffId = document.getElementById('staffAppUserId');
      const staffPhone = document.getElementById('staffPhone');
      const staffUsers = [];

      const staffMap = new Map();
      staffUsers.forEach((u) => staffMap.set(String(u.display).toLowerCase(), u));

      function syncStaff() {
        if (!staffLookup || !staffId) return;
        const key = staffLookup.value.trim().toLowerCase();
        const hit = staffMap.get(key);
        if (!hit) {
          staffId.value = '';
          if (staffPhone) staffPhone.value = '';
          return;
        }
        staffId.value = String(hit.id);
        if (staffPhone) staffPhone.value = hit.phone || '';
      }

      if (staffLookup) {
        staffLookup.addEventListener('change', syncStaff);
        staffLookup.addEventListener('input', syncStaff);
      }
      function showStaffLookupError(message) {
        if (typeof Swal !== 'undefined') {
          Swal.fire({ icon: 'error', title: 'Invalid selection', text: message });
          return;
        }
        alert(message);
      }
      form.addEventListener('submit', function (e) {
        syncStaff();
        if (!staffId || !staffId.value) {
          e.preventDefault();
          staffLookup.focus();
          showStaffLookupError('Select a valid staff user from the suggestion list.');
          return;
        }
      });
      syncStaff();
    })();
  </script>
    <script>
    (function () {
      const modal = document.getElementById('campusExeatFaceGrantModal');
      const labelNode = document.getElementById('campusExeatFaceGrantLabel');
      const statusNode = document.getElementById('campusExeatFaceGrantStatus');
      const captureBtn = document.getElementById('campusExeatFaceGrantCaptureBtn');
      const video = modal ? modal.querySelector('.js-campus-exeat-face-video') : null;
      const canvas = modal ? modal.querySelector('.js-campus-exeat-face-canvas') : null;
      if (!modal || !captureBtn || !video || !canvas) return;

      const ctx = canvas.getContext('2d', { willReadFrequently: true });
      let stream = null;
      let busy = false;
      let pendingGateForm = null;

      function showAlert(icon, title, text) {
        if (window.Swal && typeof window.Swal.fire === 'function') {
          window.Swal.fire({ icon: icon, title: title, text: text });
          return;
        }
        alert(text || title);
      }

      function openModal(form) {
        pendingGateForm = form;
        const studentName = String(form.getAttribute('data-student-name') || 'Selected student');
        const studentCode = String(form.getAttribute('data-student-code') || '').trim();
        const gateAction = String(form.getAttribute('data-gate-action') || '').trim();
        const actionLabel = gateAction === 'return' ? 'return logging' : 'exit logging';
        if (labelNode) {
          labelNode.textContent = 'Capture the face for ' + studentName + (studentCode ? ' [' + studentCode + ']' : '') + ' to confirm ' + actionLabel + '.';
        }
        if (statusNode) {
          statusNode.textContent = 'Align the student face inside the camera frame.';
        }
        modal.classList.add('is-open');
        modal.setAttribute('aria-hidden', 'false');
        if (stream) return;
        navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }, audio: false }).then(function (nextStream) {
          stream = nextStream;
          video.srcObject = nextStream;
          return video.play();
        }).catch(function (err) {
          showAlert('error', 'Camera unavailable', err.message || 'Unable to access the camera.');
        });
      }

      function submitFormWithHandlers(form) {
        if (!form) return;
        if (typeof form.requestSubmit === 'function') {
          form.requestSubmit();
          return;
        }
        const submitControl = document.createElement('button');
        submitControl.type = 'submit';
        submitControl.hidden = true;
        form.appendChild(submitControl);
        submitControl.click();
        form.removeChild(submitControl);
      }

      function closeModal() {
        if (pendingGateForm) {
          const modeInput = pendingGateForm.querySelector('.js-gate-log-mode');
          if (modeInput && modeInput.value !== 'verified-face') {
            modeInput.value = 'direct';
          }
        }
        if (stream) {
          stream.getTracks().forEach(function (track) { track.stop(); });
          stream = null;
        }
        video.pause();
        video.srcObject = null;
        modal.classList.remove('is-open');
        modal.setAttribute('aria-hidden', 'true');
      }

      async function captureHash() {
        const width = video.videoWidth || 640;
        const height = video.videoHeight || 480;
        if (!width || !height) {
          throw new Error('Camera frame is not ready.');
        }
        let sourceX = Math.round(width * 0.2);
        let sourceY = Math.round(height * 0.12);
        let sourceW = Math.round(width * 0.6);
        let sourceH = Math.round(height * 0.72);
        if (window.FaceDetector) {
          try {
            const detector = new window.FaceDetector({ fastMode: true, maxDetectedFaces: 1 });
            const detections = await detector.detect(video);
            if (detections && detections[0] && detections[0].boundingBox) {
              const box = detections[0].boundingBox;
              sourceX = Math.max(0, Math.round(box.x));
              sourceY = Math.max(0, Math.round(box.y));
              sourceW = Math.min(width - sourceX, Math.max(80, Math.round(box.width)));
              sourceH = Math.min(height - sourceY, Math.max(80, Math.round(box.height)));
            }
          } catch (err) {}
        }
        canvas.width = 64;
        canvas.height = 64;
        ctx.drawImage(video, sourceX, sourceY, sourceW, sourceH, 0, 0, 64, 64);
        const imageData = ctx.getImageData(0, 0, 64, 64);
        const hashParts = [];
        for (let y = 0; y < 64; y += 8) {
          for (let x = 0; x < 64; x += 2) {
            const indexA = ((y * 64) + x) * 4;
            const indexB = ((y * 64) + x + 1) * 4;
            const lumA = (imageData.data[indexA] * 3 + imageData.data[indexA + 1] * 4 + imageData.data[indexA + 2]) / 8;
            const lumB = (imageData.data[indexB] * 3 + imageData.data[indexB + 1] * 4 + imageData.data[indexB + 2]) / 8;
            hashParts.push(lumA >= lumB ? 'f' : '0');
          }
        }
        while (hashParts.join('').length < 64) hashParts.push('a');
        return hashParts.join('').slice(0, 64);
      }

      modal.querySelectorAll('.js-campus-exeat-face-close').forEach(function (node) {
        node.addEventListener('click', closeModal);
      });

      Array.prototype.slice.call(document.querySelectorAll('.js-security-gate-trigger')).forEach(function (button) {
        button.addEventListener('click', function () {
          const form = button.closest('form.js-security-gate-form, form.js-security-return-form');
          if (!form) return;
          const modeInput = form.querySelector('.js-gate-log-mode');
          const gateAction = String(form.getAttribute('data-gate-action') || '').trim();
          const directLabel = gateAction === 'return' ? 'DrectLogRtn' : 'DirectLogExt';
          const faceLabel = gateAction === 'return' ? 'FaceLogRtn' : 'FaceLogExt';
          const directSubmit = function () {
            if (modeInput) modeInput.value = 'direct';
            if (
              gateAction === 'return' &&
              window.CampusPaymentGateways &&
              window.CampusPaymentGateways.overtime &&
              typeof window.CampusPaymentGateways.overtime.start === 'function' &&
              window.CampusPaymentGateways.overtime.start(form)
            ) {
              return;
            }
            submitFormWithHandlers(form);
          };
          const faceSubmit = function () {
            if (modeInput) modeInput.value = 'face';
            openModal(form);
          };

          Swal.fire({
            icon: 'question',
            title: button.textContent || 'Choose Action',
            text: 'Choose how to continue.',
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: directLabel,
            denyButtonText: faceLabel,
            cancelButtonText: 'Cancel'
          }).then(function (result) {
            if (result.isConfirmed) {
              directSubmit();
              return;
            }
            if (result.isDenied) {
              faceSubmit();
            }
          });
        });
      });

      captureBtn.addEventListener('click', function () {
        if (busy || !pendingGateForm) return;
        const exeatId = String(pendingGateForm.getAttribute('data-exeat-id') || '').trim();
        const studentAppUserId = String(pendingGateForm.getAttribute('data-student-app-user-id') || '').trim();
        const gateAction = String(pendingGateForm.getAttribute('data-gate-action') || '').trim();
        if (!exeatId || !studentAppUserId) {
          showAlert('error', 'Student required', 'The selected exeat row is missing a linked student account.');
          return;
        }
        if (gateAction !== 'exit' && gateAction !== 'return') {
          showAlert('error', 'Gate action required', 'The selected gate action is invalid.');
          return;
        }
        busy = true;
        captureBtn.disabled = true;
        if (statusNode) {
          statusNode.textContent = 'Capturing and verifying student face...';
        }
        captureHash()
          .then(function (faceHash) {
            const body = new URLSearchParams();
            body.set('action', 'verify_exeat_student_face');
            body.set('exeat_id', exeatId);
            body.set('student_app_user_id', studentAppUserId);
            body.set('gate_action', gateAction);
            body.set('face_hash', faceHash);
            body.set('csrf_token', "8a9815e13203e31d5e86156d313460939e0a75b6a82ac485489f43f12a77acc9");
            return fetch(window.location.pathname + window.location.search, {
              method: 'POST',
              credentials: 'same-origin',
              headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
              body: body.toString()
            });
          })
          .then(function (response) {
            return response.text().then(function (text) {
              let data = {};
              try { data = text ? JSON.parse(text) : {}; } catch (err) {}
              if (!response.ok || data.ok === false) {
                throw new Error(data.message || 'Student face verification failed.');
              }
              return data;
            });
          })
          .then(function () {
            const modeInput = pendingGateForm.querySelector('.js-gate-log-mode');
            if (modeInput) modeInput.value = 'verified-face';
            closeModal();
            if (
              gateAction === 'return' &&
              window.CampusPaymentGateways &&
              window.CampusPaymentGateways.overtime &&
              typeof window.CampusPaymentGateways.overtime.start === 'function' &&
              window.CampusPaymentGateways.overtime.start(pendingGateForm)
            ) {
              return;
            }
            submitFormWithHandlers(pendingGateForm);
          })
          .catch(function (err) {
            if (statusNode) {
              statusNode.textContent = err.message || 'Student face verification failed.';
            }
            showAlert('error', 'Verification failed', err.message || 'Student face verification failed.');
          })
          .finally(function () {
            busy = false;
            captureBtn.disabled = false;
          });
      });
    })();
  </script>
    <script>
    (function () {
      const increaseForms = document.querySelectorAll('.js-increase-exeat-duration-form');
      increaseForms.forEach(function (form) {
        const input = form.querySelector('input[name="increase_days"]');
        if (!input) return;
        function submitIncrease() {
          const value = Number(input.value || '0');
          if (!Number.isFinite(value) || value <= 0 || form.dataset.submitting === '1') return;
          form.dataset.submitting = '1';
          if (typeof form.requestSubmit === 'function') {
            form.requestSubmit();
            return;
          }
          form.submit();
        }
        input.addEventListener('keydown', function (event) {
          if (event.key === 'Enter') {
            event.preventDefault();
            submitIncrease();
          }
        });
        input.addEventListener('blur', submitIncrease);
      });

      const reviewForms = document.querySelectorAll('.exeat-review-form');
      reviewForms.forEach(function (form) {
        const dateInput = form.querySelector('input[name="expiration_datetime"]');
        const adjustedDurationInput = form.querySelector('input[name="adjusted_duration_days"]');
        const reviewOutput = form.querySelector('.exeat-duration-review');
        const durationDays = Number(form.dataset.durationDays || '0');
        const filedExpirationValue = form.dataset.intendedReturnAt || '';
        if (!dateInput || !adjustedDurationInput || !reviewOutput) return;

        function localDateTimeValue(date) {
          const offset = date.getTimezoneOffset();
          return new Date(date.getTime() - offset * 60000).toISOString().slice(0, 16);
        }

        function formatDateTime(date) {
          return new Intl.DateTimeFormat(undefined, {
            dateStyle: 'medium',
            timeStyle: 'short'
          }).format(date);
        }

        const reviewReference = new Date();
        const storedExpiration = new Date(filedExpirationValue);
        const originalExpiration = filedExpirationValue && !Number.isNaN(storedExpiration.getTime())
          ? storedExpiration
          : new Date(reviewReference.getTime() + durationDays * 86400000);

        function reviewDuration() {
          if (!dateInput.value || !Number.isFinite(durationDays) || durationDays <= 0) {
            adjustedDurationInput.value = '';
            reviewOutput.textContent = 'Select a valid exeat expiration date and time.';
            return;
          }
          const selectedExpiration = new Date(dateInput.value);
          if (Number.isNaN(selectedExpiration.getTime())) {
            adjustedDurationInput.value = '';
            reviewOutput.textContent = 'Select a valid exeat expiration date and time.';
            return;
          }
          const adjustedDurationDays = Math.ceil((selectedExpiration.getTime() - reviewReference.getTime()) / 86400000);
          if (adjustedDurationDays <= 0) {
            adjustedDurationInput.value = '';
            reviewOutput.textContent = 'Expiration must leave at least one exeat day.';
            return;
          }
          adjustedDurationInput.value = String(adjustedDurationDays);
          reviewOutput.textContent = adjustedDurationDays + ' day(s) · Expires ' + formatDateTime(selectedExpiration);
        }

        dateInput.value = localDateTimeValue(originalExpiration);
        dateInput.addEventListener('input', reviewDuration);
        dateInput.addEventListener('change', reviewDuration);
        reviewDuration();
      });

      document.querySelectorAll('.js-bulk-affairs-form').forEach(function (form) {
        const dateInput = form.querySelector('input[name="expiration_datetime"]');
        const reviewOutput = form.querySelector('.js-bulk-duration-review');
        if (!dateInput || !reviewOutput) return;
        function updateBulkDuration() {
          const expiration = new Date(dateInput.value);
          if (!dateInput.value || Number.isNaN(expiration.getTime())) {
            reviewOutput.textContent = 'Select the expiration applied to every approved request.';
            return;
          }
          const days = Math.ceil((expiration.getTime() - Date.now()) / 86400000);
          reviewOutput.textContent = days > 0
            ? days + ' day(s) will be applied to every approved request.'
            : 'Expiration must leave at least one exeat day for approval.';
        }
        dateInput.addEventListener('input', updateBulkDuration);
        dateInput.addEventListener('change', updateBulkDuration);
      });

      document.querySelectorAll('.js-bulk-exeat-form').forEach(function (form) {
        form.addEventListener('submit', function (event) {
          if (form.dataset.confirmed === '1') return;
          event.preventDefault();
          const submitter = event.submitter;
          const actionText = submitter ? submitter.textContent.trim() : 'Process All Eligible';
          const targetText = form.dataset.bulkLabel || 'all eligible requests';
          window.appShowConfirm({
            icon: 'warning',
            title: actionText + '?',
            text: 'This will process ' + targetText + ', including requests outside the current page.',
            confirmButtonText: actionText,
            confirmButtonColor: '#0d9488',
            cancelButtonText: 'Cancel'
          }).then(function (confirmed) {
            if (!confirmed) return;
            form.dataset.confirmed = '1';
            if (submitter && submitter.name) {
              const decision = document.createElement('input');
              decision.type = 'hidden';
              decision.name = submitter.name;
              decision.value = submitter.value;
              form.appendChild(decision);
            }
            form.submit();
          });
        });
      });

      const forms = document.querySelectorAll('.js-delete-pending-exeat');
      if (!forms.length) return;
      forms.forEach(function (form) {
        form.addEventListener('submit', function (e) {
          e.preventDefault();
          window.appShowConfirm({
            icon: 'warning',
            title: 'Delete Pending Request?',
            text: 'This will permanently remove the pending exeat request.',
            confirmButtonText: 'Delete',
            confirmButtonColor: '#dc2626',
            cancelButtonText: 'Cancel'
          }).then(function (confirmed) {
            if (confirmed) {
              form.submit();
            }
          });
        });
      });
    })();
  </script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script></body>
</html>