<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pendaftaran Pasien - RS Sehat</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- FontAwesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
  <!-- AOS CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">

  <style>
    html { scroll-behavior: smooth; }
    body {
      background-color: #f8fcff;
      font-family: 'Segoe UI', sans-serif;
      padding-top: 80px; /* space untuk fixed navbar */
    }
    section[id] { scroll-margin-top: 90px; } /* offset anchor */

    .navbar { background-color: #0097B2; }
    .navbar-brand, .nav-link { color: #fff !important; font-weight: 600; }

    /* Toggler icon agar terlihat di bg custom */
    .navbar .navbar-toggler { border-color: rgba(255,255,255,.5); }
    .navbar .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .hero{
      background: linear-gradient(rgba(0,151,178,.8), rgba(0,151,178,.8)),
                  url('https://klinik-pratama.poltekkes-smg.id/storage/general/01K0S3X64EM9N1M5FGZKFDZTZD.jpg') center/cover no-repeat;
      color:#fff; min-height:80vh; display:flex; align-items:center; text-align:center;
    }
    .hero h1 { font-size: 2.8rem; font-weight: 700; }

    .form-card{ background:#fff; border-radius:16px; padding:30px; box-shadow:0 6px 20px rgba(0,0,0,.1); }
    .section-title{ color:#0097B2; font-weight:700; }

    .icon-box{ background:#72E8D2; color:#0097B2; font-size:2rem; border-radius:12px; padding:20px; display:inline-block; margin-bottom:15px; }
  </style>
</head>

<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="fa-solid fa-hospital"></i> RS Sehat</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a href="#daftar" class="nav-link">Pendaftaran</a></li>
          <li class="nav-item"><a href="#layanan" class="nav-link">Layanan</a></li>
          <li class="nav-item"><a href="#kontak" class="nav-link">Kontak</a></li>
          <li class="nav-item"><a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#loginPetugasModal"><i class="fa-solid fa-user-shield"></i> Masuk</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Modal Login Petugas -->
  <div class="modal fade" id="loginPetugasModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content rounded-4 shadow">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title"><i class="fa-solid fa-user-shield"></i> Masuk</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body p-4">

          <form id="formLoginPetugas" action="<?= site_url('auth/login_petugas_ajax'); ?>" method="post" novalidate>
            <!-- CSRF -->
            <?php if ($this->config->item('csrf_protection')): ?>
              <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">
            <?php endif; ?>

            <div class="mb-3">
              <label class="form-label"><i class="fa-solid fa-id-badge"></i> Username</label>
              <input type="text" name="username" class="form-control" placeholder="Masukkan username" required>
              <div class="invalid-feedback" data-error="username"></div>
            </div>

            <div class="mb-3">
              <label class="form-label"><i class="fa-solid fa-lock"></i> Password</label>
              <input type="password" name="password" class="form-control" placeholder="Masukkan password" required>
              <div class="invalid-feedback" data-error="password"></div>
            </div>

            <button type="submit" class="btn btn-primary w-100">
              <span class="btn-text">Masuk</span>
              <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
            </button>
          </form>

        </div>
      </div>
    </div>
  </div>

  <!-- Hero -->
  <section class="hero">
    <div class="container" data-aos="fade-up">
      <h1>Selamat Datang di RS Sehat</h1>
      <p class="lead">Pendaftaran pasien online dengan mudah, cepat, dan aman</p>
      <a href="#daftar" class="btn btn-light btn-lg mt-3"><i class="fa-solid fa-user-plus"></i> Daftar Sekarang</a>
    </div>
  </section>

  <!-- Form Pendaftaran -->
  <section id="daftar" class="py-5">
    <div class="container">
      <h2 class="section-title text-center mb-4" data-aos="zoom-in">Formulir Pendaftaran Pasien</h2>
      <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6" data-aos="fade-up">
          <div class="form-card">
            <form action="<?= base_url('pendaftaran/simpan'); ?>" method="post">
              <div class="mb-3">
                <label class="form-label"><i class="fa-solid fa-user"></i> Nama Lengkap</label>
                <input type="text" name="nama" class="form-control" placeholder="Masukkan nama lengkap" required>
              </div>
              <div class="mb-3">
                <label class="form-label"><i class="fa-solid fa-id-card"></i> NIK</label>
                <input type="text" name="nik" class="form-control" placeholder="Masukkan NIK" required>
              </div>
              <div class="mb-3">
                <label class="form-label"><i class="fa-solid fa-phone"></i> Nomor Telepon</label>
                <input type="text" name="telepon" class="form-control" placeholder="Masukkan nomor telepon" required>
              </div>
              <div class="mb-3">
                <label class="form-label"><i class="fa-solid fa-calendar-days"></i> Tanggal Lahir</label>
                <input type="date" name="tgl_lahir" class="form-control" required>
              </div>
              <div class="mb-3">
                <label class="form-label"><i class="fa-solid fa-venus-mars"></i> Jenis Kelamin</label>
                <select name="gender" class="form-select" required>
                  <option value="">Pilih</option>
                  <option value="L">Laki-Laki</option>
                  <option value="P">Perempuan</option>
                </select>
              </div>
              <button type="submit" class="btn btn-primary w-100"><i class="fa-solid fa-paper-plane"></i> Daftar</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Layanan -->
  <section id="layanan" class="py-5 bg-light">
    <div class="container text-center">
      <h2 class="section-title mb-4" data-aos="zoom-in">Layanan Unggulan</h2>
      <div class="row g-4">
        <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
          <div class="icon-box"><i class="fa-solid fa-stethoscope"></i></div>
          <h5>Konsultasi Dokter</h5>
          <p>Konsultasi dengan dokter spesialis terbaik secara mudah.</p>
        </div>
        <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
          <div class="icon-box"><i class="fa-solid fa-flask"></i></div>
          <h5>Laboratorium</h5>
          <p>Pemeriksaan laboratorium lengkap dengan teknologi modern.</p>
        </div>
        <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
          <div class="icon-box"><i class="fa-solid fa-ambulance"></i></div>
          <h5>Emergency</h5>
          <p>Layanan darurat 24 jam dengan tim medis profesional.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Kontak -->
  <section id="kontak" class="py-5">
    <div class="container text-center">
      <h2 class="section-title mb-4" data-aos="zoom-in">Hubungi Kami</h2>
      <p data-aos="fade-right"><i class="fa-solid fa-location-dot"></i> Jl. Sehat No. 123, Jakarta</p>
      <p data-aos="fade-right" data-aos-delay="150"><i class="fa-solid fa-phone"></i> (021) 123456</p>
      <p data-aos="fade-right" data-aos-delay="300"><i class="fa-solid fa-envelope"></i> info@rssehat.com</p>
    </div>
  </section>

  <!-- Footer -->
  <footer class="text-center py-3" style="background:#0097B2; color:#fff;">
    <p>&copy; <?= date('Y'); ?> RS Sehat - Semua Hak Dilindungi</p>
  </footer>

  <!-- JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <!-- AOS JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
  <!-- SweetAlert2 -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <script>
    AOS.init({ duration: 1000, once: true });

    // Smooth scroll fix untuk anchor + navbar fixed (sudah dibantu CSS scroll-margin-top)
    document.querySelectorAll('a.nav-link[href^="#"]').forEach(a=>{
      a.addEventListener('click', e=>{
        const id = a.getAttribute('href').slice(1);
        const el = document.getElementById(id);
        if (el) { e.preventDefault(); el.scrollIntoView({behavior:'smooth'}); }
      });
    });

    (function() {
      const form = document.getElementById('formLoginPetugas');
      if (!form) return;

      const submitBtn = form.querySelector('button[type="submit"]');
      const btnText   = submitBtn.querySelector('.btn-text');
      const spinner   = submitBtn.querySelector('.spinner-border');

      function setSubmitting(state) {
        submitBtn.disabled = state;
        spinner.classList.toggle('d-none', !state);
        btnText.textContent = state ? 'Memproses...' : 'Masuk';
      }
      function clearErrors() {
        form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
        form.querySelectorAll('[data-error]').forEach(el => el.textContent = '');
      }
      function showErrors(errors) {
        Object.entries(errors || {}).forEach(([field, msg]) => {
          const input = form.querySelector(`[name="${field}"]`);
          const errEl = form.querySelector(`[data-error="${field}"]`);
          if (input) input.classList.add('is-invalid');
          if (errEl) errEl.textContent = msg || 'Invalid';
        });
      }
      function updateCsrf(newHash) {
        const csrfInput = form.querySelector('input[type="hidden"][name*="csrf"]');
        if (csrfInput && newHash) csrfInput.value = newHash;
      }

      form.addEventListener('submit', async function(e) {
        e.preventDefault();
        clearErrors();
        setSubmitting(true);

        try {
          const res = await fetch(form.action, {
            method: 'POST',
            body: new FormData(form),
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
          });
          const data = await res.json();
          updateCsrf(data.csrf);

          if (data.ok && data.redirect) {
            location.assign(data.redirect);
            return;
          }
          showErrors(data.errors);
        } catch (err) {
          // fallback error global
          const pass = form.querySelector('[name="password"]');
          const errEl = form.querySelector('[data-error="password"]');
          if (pass) pass.classList.add('is-invalid');
          if (errEl) errEl.textContent = 'Login gagal. Coba lagi.';
          console.error(err);
        } finally {
          setSubmitting(false);
        }
      });
    })();

    // Flash error dari server → tampilkan modal & alert
    <?php if ($this->session->flashdata('login_error')): ?>
      document.addEventListener("DOMContentLoaded", function() {
        const modal = new bootstrap.Modal(document.getElementById('loginPetugasModal'));
        modal.show();
        Swal.fire({ icon:'error', title:'Login gagal', text:'<?= $this->session->flashdata('login_error'); ?>' });
      });
    <?php endif; ?>
  </script>
</body>
</html>
