@section('title', 'Beranda')
@extends('user.layouts.index')
@section('content')
  <!-- Hero Section -->
  <section id="hero" class="hero section">

    <div class="container" data-aos="fade-up" data-aos-delay="100">

      <div class="row align-items-center">
        <div class="col-lg-6">
          <div class="hero-content">

            <h1 data-aos="fade-right" data-aos-delay="300">
              Anxiety Detection <span class="highlight">Support System</span> for Psychological Consultation
            </h1>

            <p class="hero-description" data-aos="fade-right" data-aos-delay="400">
              Sistem berbasis web yang membantu proses asesmen kecemasan melalui analisis pergerakan pupil mata menggunakan teknologi eye-tracking dan machine learning.
            </p>

            <div class="hero-actions" data-aos="fade-right" data-aos-delay="600">
              <a href="#appointment" class="btn btn-primary">Coba Sekarang</a>
              <a href="https://www.youtube.com/watch?v=Y7f98aduVJ8" class="btn btn-outline glightbox">
                <i class="bi bi-archive me-2"></i>
                View Research
              </a>
            </div>

            <div class="emergency-contact" data-aos="fade-right" data-aos-delay="700">
              <div class="emergency-icon">
                <i class="bi bi-telephone-fill"></i>
              </div>
              <div class="emergency-info">
                <small>Hubungi Kami</small>
                <strong>+62 8233-7341-446</strong>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-6">
          <div class="hero-visual" data-aos="fade-left" data-aos-delay="400">
            <div class="main-image">
              <img src="{{ asset('assets/users/assets/img/health/depresi_crop.jpg') }}" alt="Modern Healthcare Facility" class="img-fluid">
            </div>
            <div class="background-elements">
              <div class="element element-1"></div>
              <div class="element element-2"></div>
              <div class="element element-3"></div>
            </div>
          </div>
        </div>
      </div>

    </div>

  </section><!-- /Hero Section -->

  <!-- Home About Section -->
  <section id="home-about" class="home-about section">

    <div class="container" data-aos="fade-up" data-aos-delay="100">

      <div class="row align-items-center">
        <div class="col-lg-6 mb-5 mb-lg-0" data-aos="fade-right" data-aos-delay="200">
          <div class="about-content">
            <h2 class="section-heading">About the System</h2>
            <p class="lead-text">Sistem ini dirancang untuk membantu mendeteksi tingkat kecemasan seseorang secara otomatis menggunakan analisis pergerakan pupil mata. 
              Sistem menggunakan kamera untuk menangkap pergerakan mata dan memprosesnya menggunakan algoritma machine learning.
            </p>
            <p>
              Sistem ini dirancang sebagai alat bantu analisis dalam proses konsultasi dan bukan sebagai alat diagnosis mandiri. Interpretasi hasil tetap dilakukan oleh tenaga profesional.
            </p>

            <div class="cta-section">
              <a href="{{ route('beranda.about') }}" class="btn-primary">Learn More About Us</a>
            </div>
          </div>
        </div>

        <div class="col-lg-6" data-aos="fade-left" data-aos-delay="300">
          <div class="about-visual">
            <div class="main-image">
              <img src="{{ asset('assets/users/assets/img/health/about.jpg') }}" alt="Modern medical facility" class="img-fluid">
            </div>
            {{-- <div class="floating-card">
              <div class="card-content">
                <div class="icon">
                  <i class="bi bi-heart-pulse"></i>
                </div>
                <div class="card-text">
                  <h4>Coba Kapan Saja</h4>
                  <p>Fitur kami tersedia 24/7</p>
                </div>
              </div>
            </div> --}}
            <div class="experience-badge">
              <div class="badge-content">
                <span class="years">50+</span>
                <span class="text">Pengguna telah mencoba</span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

  </section><!-- /Home About Section -->

  <!-- Services Section -->
  <section id="services" class="services section">
    <!-- Section Title -->
    <div class="container section-title" data-aos="fade-up">
      <h2>How It Works</h2>
      <p>How The System Works During Consultation</p>
    </div><!-- End Section Title -->

    <div class="container" data-aos="fade-up" data-aos-delay="100">
      <div class="row gy-4">
        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
          <div class="service-item">
            <div class="service-image">
              <img src="{{ asset('assets/users/assets/img/health/cardiology-2.webp') }}" alt="Cardiology Services" class="img-fluid">
              <div class="service-overlay">
                <i class="fas fa-message"></i>
              </div>
            </div>
            <div class="service-content">
              <h3>Consultation Session Begins</h3>
              <p>Pasien mengikuti sesi konsultasi dengan tenaga profesional.</p>
              <div class="service-features">
                <span class="feature-item"><i class="fas fa-check"></i> Wawancara</span>
                <span class="feature-item"><i class="fas fa-check"></i> Menjawab soal tes</span>
              </div>
              <a href="service-details.html" class="service-btn">
                <span>Learn More</span>
                <i class="fas fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </div><!-- End Service Item -->

        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="250">
          <div class="service-item">
            <div class="service-image">
              <img src="{{ asset('assets/users/assets/img/health/neurology-3.webp') }}" alt="Neurology Services" class="img-fluid">
              <div class="service-overlay">
                <i class="fas fa-face-rolling-eyes"></i>
              </div>
            </div>
            <div class="service-content">
              <h3>Eye Movement Capture</h3>
              <p>Kamera merekam pergerakan pupil selama proses asesmen.</p>
              <div class="service-features">
                <span class="feature-item"><i class="fas fa-check"></i> Alat Khusus</span>
                <span class="feature-item"><i class="fas fa-check"></i> Durasi</span>
              </div>
              <a href="service-details.html" class="service-btn">
                <span>Learn More</span>
                <i class="fas fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </div><!-- End Service Item -->

        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
          <div class="service-item">
            <div class="service-image">
              <img src="{{ asset('assets/users/assets/img/health/orthopedics-1.webp') }}" alt="Orthopedics Services" class="img-fluid">
              <div class="service-overlay">
                <i class="fas fa-chart-gantt"></i>
              </div>
            </div>
            <div class="service-content">
              <h3>Feature Analysis</h3>
              <p>Sistem menganalisis pola pergerakan mata.
              </p>
              <div class="service-features">
                <span class="feature-item"><i class="fas fa-check"></i> Hasil Analisis</span>
                <span class="feature-item"><i class="fas fa-check"></i> Grafik dan Chart</span>
              </div>
              <a href="service-details.html" class="service-btn">
                <span>Learn More</span>
                <i class="fas fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </div><!-- End Service Item -->

        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="350">
          <div class="service-item">
            <div class="service-image">
              <img src="{{ asset('assets/users/assets/img/health/pediatrics-4.webp') }}" alt="Pediatrics Services" class="img-fluid">
              <div class="service-overlay">
                <i class="fas fa-computer"></i>
              </div>
            </div>
            <div class="service-content">
              <h3>Anxiety Level Estimation</h3>
              <p>Model machine learning memprediksi tingkat kecemasan.</p>
              <div class="service-features">
                <span class="feature-item"><i class="fas fa-check"></i> Pre-trained Model</span>
                <span class="feature-item"><i class="fas fa-check"></i> Diawasi Pakar</span>
              </div>
              <a href="service-details.html" class="service-btn">
                <span>Learn More</span>
                <i class="fas fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </div><!-- End Service Item -->

        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">
          <div class="service-item">
            <div class="service-image">
              <img src="{{ asset('assets/users/assets/img/health/emergency-2.webp') }}" alt="Emergency Services" class="img-fluid">
              <div class="service-overlay">
                <i class="fas fa-ambulance"></i>
              </div>
            </div>
            <div class="service-content">
              <h3>Result for Professional Review</h3>
              <p>Hasil analisis digunakan sebagai bahan pertimbangan dalam konsultasi.</p>
              <div class="service-features">
                <span class="feature-item"><i class="fas fa-check"></i> Report</span>
                {{-- <span class="feature-item"><i class="fas fa-check"></i> </span> --}}
              </div>
              <a href="service-details.html" class="service-btn">
                <span>Learn More</span>
                <i class="fas fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </div><!-- End Service Item -->
      </div>
    </div>
  </section><!-- /Services Section -->

  <!-- Team Research Section -->
  <section id="find-a-doctor" class="find-a-doctor section">

    <!-- Section Title -->
    <div class="container section-title p-0" data-aos="fade-up">
      <h2>Research Team</h2>
      <p>Tim yang terlibat dalam penelitian ini</p>
    </div><!-- End Section Title -->

    <div class="container" data-aos="fade-up" data-aos-delay="100">
      <div class="doctors-grid" data-aos="fade-up" data-aos-delay="300">

        <div class="doctor-profile" data-aos="zoom-in" data-aos-delay="100">
          <div class="profile-header">
            <div class="doctor-avatar">
              <img src="{{ asset('assets/users/assets/img/person/mahayoga.jpg') }}" alt="Mahayoga Ksatria Hanafi Bahtiar" class="img-fluid">
            </div>
            <div class="doctor-details">
              <h4>Mahayoga Ksatria Hanafi Bahtiar</h4>
              <span class="specialty-tag">Mahasiswa</span>
              <div class="experience-info">
                <i class="bi bi-compass"></i>
                <span>Politeknik Negeri Jember</span>
              </div>
              <div class="experience-info">
                <i class="bi bi-envelope"></i>
                <span>myoga.bahtiar@gmail.com</span>
              </div>
            </div>
          </div>
        </div><!-- End Doctor Profile -->

        <div class="doctor-profile" data-aos="zoom-in" data-aos-delay="100">
          <div class="profile-header">
            <div class="doctor-avatar">
              <img src="{{ asset('assets/users/assets/img/person/khafid.png') }}" alt="Khafidurrohman Agustianto, S.Pd, M.Eng" class="img-fluid">
            </div>
            <div class="doctor-details">
              <h4>Khafidurrohman Agustianto, S.Pd, M.Eng</h4>
              <span class="specialty-tag">Dosen Pembimbing</span>
              <div class="experience-info">
                <i class="bi bi-compass"></i>
                <span>Politeknik Negeri Jember</span>
              </div>
              <div class="experience-info">
                <i class="bi bi-envelope"></i>
                <span>khafid@polije.ac.id</span>
              </div>
            </div>
          </div>
        </div><!-- End Doctor Profile -->
      </div>
    </div>

  </section><!-- /Team Research Section -->

  <!-- Appointmnet Section -->
  <section id="appointmnet" class="appointmnet section">

    <!-- Section Title -->
    <div class="container section-title my-5 p-0" data-aos="fade-up">
      <h1>Make an Appointment</h1>
    </div><!-- End Section Title -->

    <div class="container" data-aos="fade-up" data-aos-delay="100" id="appointment">

      <div class="row">
        <div class="col-lg-10 mx-auto">
          <div class="booking-wrapper">
            <div class="booking-header text-center" data-aos="fade-up" data-aos-delay="200">
              <h2>Schedule Your Appointment</h2>
              <p>Jika ingin mencoba sistem kami, jadwalkan periksa kamu dengan mengisi form dibawah ini yaa! Dan batalkan kapan saja!</p>
            </div>

            <div class="booking-steps" data-aos="fade-up" data-aos-delay="300">
              <div class="step">
                <div class="step-icon">
                  <i class="bi bi-calendar-check"></i>
                </div>
                <div class="step-content">
                  <h4>Isi Data Diri</h4>
                  <p>Mohon isi data diri Anda dengan lengkap</p>
                </div>
              </div>
              <div class="step">
                <div class="step-icon">
                  <i class="bi bi-clock"></i>
                </div>
                <div class="step-content">
                  <h4>Ambil Tanggal &amp; Waktu</h4>
                  <p>Pilih tanggal dan waktu yang paling cocok untuk Anda</p>
                </div>
              </div>
              <div class="step">
                <div class="step-icon">
                  <i class="bi bi-person-check"></i>
                </div>
                <div class="step-content">
                  <h4>Konfirmasi Detail</h4>
                  <p>Periksa kembali semua detail yang telah Anda masukkan</p>
                </div>
              </div>
            </div>

            <div class="appointment-form" data-aos="fade-up" data-aos-delay="400">
              <div class="php-email-form">
                <div class="row gy-4">
                  <div class="col-md-6">
                    <input type="text" name="nama_lengkap" id="nama_lengkap" class="form-control" placeholder="Nama Lengkap" required="">
                  </div>
                  <div class="col-md-6">
                    <input type="email" name="email" id="email" class="form-control" placeholder="Alamat Email Aktif" required="">
                  </div>
                  <div class="col-md-6">
                    <input type="tel" name="phone" id="no_telp" class="form-control" placeholder="Nomor Telepon" required="">
                  </div>
                  <div class="col-md-6">
                    <input type="text" name="date" id="tgl_book" class="form-control" required="" aria-describedby="dateHelp" placeholder="Pilih tanggal...">
                    <div id="dateHelp" class="form-text">Untuk detail jam, akan dikirim melalui email mu yaa.</div>
                  </div>
                  <div class="col-12">
                    <textarea name="message" class="form-control" rows="4" id="deskripsi"
                      placeholder="Tambahan deskripsi (optional)"></textarea>
                  </div>
                  <div class="col-12">
                    <div class="loading" id="loading_btn">Loading</div>
                    <div class="alert alert-danger" id="error_msg" role="alert" style="display: none"></div>
                    <div class="sent-message">Your appointment has been scheduled. Thank you!</div>
                    <button type="button" class="btn-book" onclick="sendAppointment()">Book Appointment Now</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="emergency-info" data-aos="fade-up" data-aos-delay="500">
              <p><i class="bi bi-exclamation-triangle"></i> Untuk darurat, harap hubungi <strong>112</strong>
                atau kunjungi rumah sakit terdekat.</p>
            </div>

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

    </div>

  </section><!-- /Appointmnet Section -->
@endsection

@section('script')
  <script>
    function sendAppointment() {
      $('#error_msg').hide();
      Swal.fire({
        title: "Loading",
        text: "Sedang memproses booking kamu, tunggu sebentar yaa!",
        icon: "info",
        showConfirmButton: false,
        allowOutsideClick: false
      });
      
      let name = $('#nama_lengkap').val();
      let email = $('#email').val();
      let no_telp = $('#no_telp').val();
      let tgl_book = $('#tgl_book').val();
      let deskripsi = $('#deskripsi').val();

      if(!name) {
        $('#error_msg').html('<i class="bi bi-exclamation-octagon"></i> Silahkan lengkapi nama lengkap kamu yaa!');
        $('#error_msg').show();
      }
      if(!email) {
        $('#error_msg').html('<i class="bi bi-exclamation-octagon"></i> Silahkan lengkapi email kamu yaa!');
        $('#error_msg').show();
      }
      if(!no_telp) {
        $('#error_msg').html('<i class="bi bi-exclamation-octagon"></i> Silahkan lengkapi nomor telepon kamu kamu yaa!');
        $('#error_msg').show();
      }
      if(!tgl_book) {
        $('#error_msg').html('<i class="bi bi-exclamation-octagon"></i> Silahkan lengkapi tanggal booking kamu yaa!');
        $('#error_msg').show();
      }

      let xhttp = new XMLHttpRequest();
      let formData = new FormData();

      formData.append('nama_lengkap', name);
      formData.append('email', email);
      formData.append('no_telp', no_telp);
      formData.append('tgl_booking', tgl_book);
      if(!deskripsi) {
        formData.append('deskripsi_tambahan', 'Tidak ada (tidak diisi)');
      } else {
        formData.append('deskripsi_tambahan', deskripsi);
      }
      formData.append('_token', document.getElementById('_token').getAttribute('value'));

      xhttp.onreadystatechange = function() {
        if(this.readyState == 4 && this.status == 200) {
          let response = JSON.parse(this.responseText);
          if(response.status) {
            Swal.fire({
              title: "Info",
              text: "Kamu berhasil daftar. Cek email kamu untuk lebih lanjut!",
              icon: "success"
            });
            $('#nama_lengkap').val('');
            $('#email').val('');
            $('#no_telp').val('');
            $('#tgl_book').val('');
            $('#deskripsi').val('');
          } else if(response.status == false) {
            Swal.fire({
              title: "Info",
              text: "Terjadi kesalahan, coba ulangi lagi yaa!",
              icon: "warning"
            });
          } else {
            Swal.fire({
              title: "Info",
              text: "Terjadi kesalahan dari server, coba lagi nanti!",
              icon: "danger"
            });
          }
        }
      }

      xhttp.open('POST', '{{ route('booking.store') }}');
      xhttp.send(formData);
      
    }

    $(document).ready(function() {
      flatpickr("#tgl_book", {
        enableTime: false,
        dateFormat: "Y-m-d",
        minDate: 'today',
        maxDate: new Date().fp_incr(7)
      });
    });
  </script>
@endsection