<?php
declare(strict_types=1);

require_once __DIR__ . '/../connect.php';
require_once __DIR__ . '/../config.php';

function h(string $v): string { return htmlspecialchars($v, ENT_QUOTES, 'UTF-8'); }

if (empty($_SESSION['admin_id'])) {
  header('Location: login.php');
  exit;
}

$adminName = isset($_SESSION['admin_name']) && $_SESSION['admin_name'] !== '' ? (string)$_SESSION['admin_name'] : (string)($_SESSION['admin_username'] ?? 'Admin');
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?= h(APP_NAME) ?> | Dashboard</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="../assets/styles.css">
  <link rel="icon" href="../assets/favicon.jpg" type="image/jpeg">

  <!-- DataTables -->
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">

  <style>
    /* Make dashboard full-width */
    .container { max-width: 100%; padding: 24px 12px; }
    .navbar { display:flex; justify-content:space-between; align-items:center; gap:12px; max-width: 100%; margin:0 auto 16px; }
    .nav-title { font-weight:700; font-size:20px; }
    .tools { display:flex; gap:10px; flex-wrap: wrap; }
    /* Make the table card span the full container (12 cols) */
    .card.table-card { max-width: 100%; width: 100%; }
    .table-card { padding: 12px; overflow-x: auto; }
    table.dataTable { width: 100% !important; table-layout: fixed; }
    table.dataTable thead th, table.dataTable tbody td { white-space: normal; }
    table.dataTable tbody td { word-break: break-word; overflow-wrap: anywhere; }
    table.dataTable thead th, table.dataTable tbody td { padding: 6px 8px; font-size: 13px; }
    /* Column sizing to help fit without horizontal scrolling */
    .col-id { width: 44px; text-align: center; }
    .col-name { width: 140px; }
    .col-email { width: 180px; word-break: break-all; }
    .col-phone { width: 100px; }
    .col-scfhs { width: 70px; }
    .col-national { width: 120px; }
    .col-speciality { width: 110px; }
    .col-hospital { width: 120px; }
    .col-created { width: 120px; white-space: nowrap; }
    .col-actions { width: 120px; white-space: nowrap; }
    /* Smaller buttons inside the table to save space */
    .table-card .btn { padding: 6px 10px; font-size: 12px; box-shadow: none; }
    .table-card .btn-plain, .table-card .btn-outline { border-width: 1px; }
    .btn-plain { background: transparent; border: 2px solid var(--accent); color: var(--text); }
  </style>
</head>
<body>
  <main class="container">
    <header class="header" style="margin-bottom:12px;">
      <img src="../assets/logo.jpg" alt="Logo" class="logo" />
      <h1 class="title">Dashboard</h1>
      <p class="subtitle">Welcome, <?= h($adminName) ?>.</p>
    </header>

    <div class="navbar">
      <div class="nav-title">Registrations</div>
      <div class="tools">
        <a id="btn-export" class="btn btn-outline" href="api.php?action=export_csv">Export as CSV</a>
        <button id="btn-reset" class="btn btn-outline" type="button">Reset All</button>
        <a class="btn" href="logout.php">Logout</a>
      </div>
    </div>

    <section class="card table-card">
      <table id="registrations-table" class="display compact" style="width:100%">
        <thead>
          <tr>
            <th class="col-id">ID</th>
            <th class="col-name">Name</th>
            <th class="col-email">Email</th>
            <th class="col-phone">Phone</th>
            <th class="col-scfhs">SCFHS</th>
            <th class="col-national">National ID</th>
            <th class="col-speciality">Speciality</th>
            <th class="col-hospital">Hospital</th>
            <th class="col-created">Created At</th>
            <th class="col-actions">Actions</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </section>
  </main>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="main.js"></script>
</body>
</html>
