<div class="page-header">
  <div>
    <div class="eyebrow">Academics</div>
    <h1>Attendance</h1>
    <p class="desc">Mark and review daily attendance by class.</p>
  </div>
</div>

<div class="card" style="margin-bottom:18px;">
  <div class="card-body">
    <form class="filter-bar" method="GET" action="/attendance" style="margin-bottom:0;">
      <select name="class_id" onchange="this.form.submit()">
        <% classes.forEach(function(c) { %>
          <option value="<%= c.id %>" <%= class_id == c.id ? 'selected' : '' %>><%= c.name %> <%= c.section %></option>
        <% }); %>
      </select>
      <input type="date" name="date" value="<%= date %>" onchange="this.form.submit()">
      <div style="margin-left:auto; display:flex; gap:10px;">
        <span class="badge badge-green"><%= summary.present %> Present</span>
        <span class="badge badge-red"><%= summary.absent %> Absent</span>
        <span class="badge badge-amber"><%= summary.late %> Late</span>
        <span class="badge badge-violet"><%= summary.leave %> Leave</span>
      </div>
    </form>
  </div>
</div>

<div class="card">
  <div class="card-head">
    <h3>Mark Attendance</h3>
    <div class="sub"><%= new Date(date).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }) %></div>
  </div>
  <% if (students.length === 0) { %>
    <div class="empty-state"><i class="fa-solid fa-clipboard-check"></i><h4>No active students in this class</h4></div>
  <% } else { %>
  <form method="POST" action="/attendance/mark">
    <input type="hidden" name="class_id" value="<%= class_id %>">
    <input type="hidden" name="date" value="<%= date %>">
    <div class="table-wrap">
      <table class="data-table">
        <thead><tr><th>Student</th><th>Admission No.</th><th style="width:340px;">Status</th></tr></thead>
        <tbody>
          <% students.forEach(function(s) { %>
            <tr>
              <td>
                <div class="row-person">
                  <div class="avatar sm" style="background:linear-gradient(135deg, var(--sky), var(--brand));"><%= s.name.split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase() %></div>
                  <div class="row-title"><%= s.name %></div>
                </div>
              </td>
              <td><span class="id-code"><%= s.admission_no %></span></td>
              <td>
                <div style="display:flex; gap:6px;">
                  <% ['present','absent','late','leave'].forEach(function(st) { %>
                    <label style="cursor:pointer;">
                      <input type="radio" name="status[s<%= s.id %>]" value="<%= st %>" <%= (existing[s.id] || 'present') === st ? 'checked' : '' %> style="display:none;" class="att-radio">
                      <span class="badge <%= st === 'present' ? 'badge-green' : st === 'absent' ? 'badge-red' : st === 'late' ? 'badge-amber' : 'badge-violet' %>" style="cursor:pointer; opacity: <%= (existing[s.id] || 'present') === st ? '1' : '0.35' %>;" onclick="var r=this.previousElementSibling; r.checked=true; var row=this.closest('td'); row.querySelectorAll('.badge').forEach(function(b){b.style.opacity='0.35';}); this.style.opacity='1';"><%= st %></span>
                    </label>
                  <% }); %>
                </div>
              </td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
    <div class="form-actions" style="margin: 0 22px 22px;">
      <button type="submit" class="btn btn-primary"><i class="fa-solid fa-check"></i> Save Attendance</button>
    </div>
  </form>
  <% } %>
</div>
