<?php

declare(strict_types=1); ?>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dallah Hospitals | Registration</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">
</head>

<body>
  <main class="container">
    <header class="header">
      <img src="assets/logo.jpg" alt="Logo" class="logo" />
      <h1 class="title">Registration</h1>
      <p class="subtitle">Please fill all required fields to complete your registration.</p>
    </header>

    <section class="card" aria-labelledby="form-title">
      <h2 id="form-title" class="sr-only">Registration form</h2>
      <form id="registration-form" action="api/submit.php" method="post" novalidate>
        <div class="grid">
          <div class="field">
            <label for="first_name">First Name</label>
            <input id="first_name" name="first_name" type="text" required placeholder="John" autocomplete="given-name" />
          </div>
          <div class="field">
            <label for="last_name">Last Name</label>
            <input id="last_name" name="last_name" type="text" required placeholder="Doe" autocomplete="family-name" />
          </div>
          <div class="field">
            <label for="email">Email</label>
            <input id="email" name="email" type="email" required placeholder="john@example.com" autocomplete="email" />
          </div>
          <div class="field">
            <label for="phone">Phone Number</label>
            <input id="phone" name="phone" type="tel" required placeholder="+9665XXXXXXXX" pattern="^\+?[0-9]{7,15}$" autocomplete="tel" />
          </div>
          <div class="field">
            <label for="scfhs_id">SCFHS</label>
            <input id="scfhs_id" name="scfhs_id" type="text" required placeholder="ABC12345" pattern="^[A-Za-z0-9\\-]+$" />
          </div>
          <div class="field">
            <label for="national_id">National ID / Iqama</label>
            <input id="national_id" name="national_id" type="text" required placeholder="10-digit ID" pattern="^[0-9]{8,15}$" />
          </div>
          <div class="field">
            <label for="speciality">Speciality</label>
            <input id="speciality" name="speciality" type="text" required placeholder="Cardiology" />
          </div>
          <div class="field">
            <label for="hospital">Hospital</label>
            <input id="hospital" name="hospital" type="text" required placeholder="Hospital Name" />
          </div>
        </div>

        <div class="actions">
          <button id="submit-btn" class="btn" type="submit">
            <span class="btn-label">Submit Registration</span>
            <span class="spinner" aria-hidden="true"></span>
          </button>
        </div>
        <p id="form-message" class="form-message" role="alert" aria-live="polite"></p>
      </form>
    </section>

    <section id="success-panel" class="success hidden" aria-live="polite">
      <h3>Thank you!</h3>
      <p>Your registration has been received. A confirmation email has been sent to your inbox.</p>
      <div class="success-actions">
        <a id="qr-download" class="btn btn-outline" href="#" download>Download your QR</a>
      </div>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="assets/app.js"></script>
</body>

</html>