<!DOCTYPE html>
<html>
<head>
  <title>Riwayat Absensi</title>

  <!-- BOOTSTRAP -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- ICON -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

  <style>
    body {
      background: #f5f6fa;
      font-family: 'Segoe UI', sans-serif;
    }

    .navbar-custom {
      background-color: #e60023;
    }

    .navbar-brand {
      color: white;
      font-weight: bold;
    }

    .card-table {
      border-radius: 20px;
      padding: 20px;
      margin-top: 30px;
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
      background: white;
    }

    .thead-telkom {
      background-color: #e60023;
      color: white;
    }

    .foto {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 10px;
      border: 2px solid #e60023;
    }

    .table tbody tr:hover {
      background-color: #f2f2f2;
    }

    .title {
      font-weight: bold;
      margin-bottom: 15px;
    }

    .badge {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
    }
  </style>
</head>

<body>

<!-- NAVBAR -->
<nav class="navbar navbar-custom">
  <div class="container">
    <span class="navbar-brand">
      <i class="bi bi-clock-history"></i> Riwayat Absensi
    </span>

    <a href="/dashboard" class="btn btn-light btn-sm">
      <i class="bi bi-arrow-left"></i> Dashboard
    </a>
  </div>
</nav>

<div class="container">

  <div class="card card-table">

    <h5 class="title">Data Kehadiran</h5>

    <div class="table-responsive">
      <table class="table table-bordered align-middle text-center">

        <!-- HEADER -->
        <thead class="thead-telkom">
          <tr>
            <th>No</th>
            <th>Username</th>
            <th>Foto</th>
            <th>Tanggal</th>
            <th>Jam</th>
            <th>Status</th>
          </tr>
        </thead>

        <tbody>

          <% if (data.length === 0) { %>
            <tr>
              <td colspan="6">Belum ada data absensi</td>
            </tr>
          <% } %>

          <% data.forEach((row, index) => { %>
            <tr>
              <td><%= index + 1 %></td>

              <!-- USERNAME -->
              <td><%= row.username %></td>

              <!-- FOTO -->
              <td>
                <img src="<%= row.foto %>" class="foto">
              </td>

              <!-- TANGGAL -->
              <td>
                <%= new Date(row.tanggal).toLocaleDateString('id-ID') %>
              </td>

              <!-- JAM -->
              <td>
                <%= row.jam %>
              </td>

              <!-- ✅ STATUS DINAMIS -->
              <td>
                <% if (row.status === "Telat") { %>
                  <span class="badge bg-danger">Telat</span>
                <% } else { %>
                  <span class="badge bg-success">Hadir</span>
                <% } %>
              </td>

            </tr>
          <% }) %>

        </tbody>

      </table>
    </div>

  </div>

</div>

</body>
</html>