alrahma_sunday_school/app/Views/administrator/absence_vacation.php

<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>
<div class="container-xxl py-4">
  <div class="container">
    <div class="text-center mx-auto mb-4" style="max-width:700px;">
      <h4 class="text-dark" style="font-family:Arial,sans-serif;">TimeOff Request</h4>
      <div class="text-muted">Logged in as: <strong><?= esc($admin_name ?? 'Administrator') ?></strong></div>
      <?php if (!empty($semester) && !empty($schoolYear)): ?>
        <div class="small text-muted">Term: <?= esc($semester) ?> — <?= esc($schoolYear) ?></div>
      <?php endif; ?>
    </div>

    <?php if (session()->getFlashdata('message')): ?>
      <?php $status = session()->getFlashdata('status') ?? 'info';
            $cls = $status === 'success' ? 'alert-success' : ($status === 'error' ? 'alert-danger' : 'alert-info'); ?>
      <div class="alert <?= $cls ?> text-center" role="alert">
        <?= esc(session()->getFlashdata('message')) ?>
      </div>
    <?php endif; ?>

    <div class="card shadow-sm mb-4">
      <div class="card-header bg-light"><strong>Submit Upcoming Absences</strong></div>
      <div class="card-body">
        <form action="<?= site_url('/administrator/absence') ?>" method="post" id="absenceForm">
          <?= csrf_field() ?>

          <?php $hasDates = !empty($availableDates) && is_array($availableDates); ?>
          <div class="mb-3">
            <label class="form-label">Select Sunday Date(s)</label>
            <div id="datesContainer">
              <div class="d-flex align-items-center gap-2 mb-2 date-row">
                <select name="dates[]" class="form-select" style="max-width:260px;" <?= $hasDates ? '' : 'disabled' ?> required>
                  <option value="" disabled selected>Select Sunday date</option>
                  <?php foreach (($availableDates ?? []) as $d): ?>
                    <option value="<?= esc($d) ?>"><?= esc($d) ?></option>
                  <?php endforeach; ?>
                </select>
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="addDateRow()" <?= $hasDates ? '' : 'disabled' ?>>
                  <i class="bi bi-plus-lg"></i> Add another
                </button>
              </div>
            </div>
            <div class="form-text">Future Sundays from September to May are available only.</div>
            <?php if (!$hasDates): ?>
              <div class="alert alert-info mt-2">No future Sundays are available in the current term.</div>
            <?php endif; ?>
          </div>

          <div class="row g-3 mb-3">
            <div class="col-sm-6">
              <label class="form-label" for="reason_type">Reason Type</label>
              <select id="reason_type" name="reason_type" class="form-select">
                <option value="vacation">Vacation</option>
                <option value="sick">Sick</option>
                <option value="personal">Personal</option>
                <option value="other">Other</option>
              </select>
            </div>
            <div class="col-sm-6">
              <label class="form-label" for="reason">Reason <span class="text-danger">*</span></label>
              <input type="text" id="reason" name="reason" class="form-control" placeholder="Provide a reason" required>
            </div>
          </div>

          <div class="d-flex justify-content-center">
            <button type="submit" class="btn btn-primary px-5" <?= $hasDates ? '' : 'disabled' ?> >
              Submit Absence
            </button>
          </div>
        </form>
      </div>
    </div>

    <div class="card shadow-sm">
      <div class="card-header bg-light"><strong>Your Reported Status (This Term)</strong></div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-bordered table-striped m-0 align-middle no-mgmt-sticky wrap-headers">
            <thead class="table-light">
              <tr>
                <th class="text-center" style="width:80px;">#</th>
                <th>Date</th>
                <th>Status</th>
                <th>Reason</th>
              </tr>
            </thead>
            <tbody>
              <?php if (!empty($existing)): ?>
                <?php $i=1; foreach ($existing as $row): ?>
                  <tr>
                    <td class="text-center"><?= $i++ ?></td>
                    <td><?= esc(!empty($row['date']) ? local_date($row['date'], 'm-d-Y') : '') ?></td>
                    <td>
                      <?php $st = strtolower((string)($row['status'] ?? ''));
                            $badge = $st==='absent'?'danger':($st==='late'?'warning text-dark':'success'); ?>
                      <span class="badge bg-<?= $badge ?>"><?= ucfirst($st ?: 'n/a') ?></span>
                    </td>
                    <td><?= esc($row['reason'] ?? '') ?></td>
                  </tr>
                <?php endforeach; ?>
              <?php else: ?>
                <tr><td colspan="4" class="text-center">No reported entries yet.</td></tr>
              <?php endif; ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  </div>

<?= $this->endSection() ?>

<?= $this->section('styles') ?>
<style>
  /* Allow header labels to wrap if needed on smaller screens */
  .wrap-headers thead th { white-space: normal !important; }
</style>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
  const AVAILABLE_DATES = <?= json_encode(array_values($availableDates ?? [])) ?>;
  function addDateRow() {
    if (!AVAILABLE_DATES || AVAILABLE_DATES.length === 0) return;
    const container = document.getElementById('datesContainer');
    const row = document.createElement('div');
    row.className = 'd-flex align-items-center gap-2 mb-2 date-row';

    const select = document.createElement('select');
    select.name = 'dates[]';
    select.className = 'form-select';
    select.style.maxWidth = '260px';
    select.required = true;

    const def = document.createElement('option');
    def.value = '';
    def.disabled = true;
    def.selected = true;
    def.textContent = 'Select Sunday date';
    select.appendChild(def);

    AVAILABLE_DATES.forEach(function(d) {
      const opt = document.createElement('option');
      opt.value = d;
      opt.textContent = d;
      select.appendChild(opt);
    });

    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'btn btn-outline-danger btn-sm';
    btn.innerHTML = '<i class="bi bi-x-lg"></i> Remove';
    btn.addEventListener('click', function(){ row.remove(); });

    row.appendChild(select);
    row.appendChild(btn);
    container.appendChild(row);
  }
</script>
<?= $this->endSection() ?>