@section('title', 'Cek Status')
@extends('user.layouts.index')
@section('content')
  <!-- Page Title -->
  <div class="page-title">
    <div class="heading">
      <div class="container">
        <div class="row d-flex justify-content-center text-center">
          <div class="col-lg-8">
            <h1 class="heading-title">Cek Status</h1>
            <p class="mb-0">
              Cek status data kamu dari sini ya, jika kamu sudah mendapatkan kode dari email setelah melakukan booking, kamu bisa melakukan tes kecemasan dari pakar atau juga cek hasil tes disini dengan kode tadi.
            </p>
          </div>
        </div>
      </div>
    </div>
    <nav class="breadcrumbs">
      <div class="container">
        <ol>
          <li><a href="index.html">Home</a></li>
          <li class="current">Cek Status</li>
        </ol>
      </div>
    </nav>
  </div><!-- End Page Title -->

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

    <div class="container" data-aos="fade-up" data-aos-delay="100">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title text-center">Form Cek</h5>
              <h6 class="card-subtitle mb-2 text-body-secondary text-center">Masukkan kode yang kamu dapatkan disini</h6>
              <div class="row justify-content-center">
                <div class="col-md-9 my-3">
                  <input class="form-control" type="text" name="kode_cek" id="kode_cek" placeholder="Kode kamu....">
                </div>
                <div class="col-md-9 mb-3">
                  <div class="row justify-content-center">
                    <button type="button" class="btn btn-primary text-white fw-bold" onclick="searchUserStatus()">Cari</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-12 my-5" id="result_data">
          <div class="row justify-content-center">
            <div class="col-md-8">
              <div class="card">
                <div class="card-header">
                  Hasil Pencarian
                </div>
                <ul class="list-group list-group-flush">
                  <li class="list-group-item">Nama Lengkap: <span id="nama_lengkap"></span></li>
                  <li class="list-group-item">Kode Unik: <span id="kode_unik"></span></li>
                  <li class="list-group-item">Tgl Booking: <span id="tgl_booking"></span></li>
                  <li class="list-group-item">Deskripsi Tambahan: <span id="deskripsi"></span></li>
                  <li class="list-group-item">Status Tes: <span id="status"></span></li>
                </ul>
              </div>
            </div>
            <div class="col-md-8 my-4">
              <div class="alert alert-primary" role="alert" id="alert_status">
                A simple primary alert—check it out!
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section><!-- /About Section -->

@endsection

@section('script')
  <script>
    $('#result_data').hide();
    function searchUserStatus() {
      $('#result_data').hide();
      Swal.fire({
        title: 'Status',
        text: 'Mencari data...',
        icon: 'info',
        showConfirmButton: false,
        allowOutsideClick: false,
        allowEscapeKey: false
      });
      let the_code = $('#kode_cek').val();
      let xhttp = new XMLHttpRequest();

      xhttp.onreadystatechange = function() {
        if(this.readyState == 4 && this.status == 200) {
          let response = JSON.parse(this.responseText);
          let status_dict = ['Belum dikonfirmasi (cek email anda)', 'Sudah dikonfirmasi, belum melakukan/menyelesaikan tes', 'Sudah melakukan tes'];
          if(response.status) {
            $('#result_data').show();
            $('#nama_lengkap').html(response.nama_lengkap);
            $('#kode_unik').html(response.kode_unik);
            $('#tgl_booking').html(response.tgl_booking);
            $('#deskripsi').html(response.deskripsi_tambahan);
            $('#status').html(status_dict[response.status_data]);
            Swal.close();

            if(response.status_data == 0) {
              $('#alert_status').removeClass();
              $('#alert_status').addClass('alert alert-primary');
              $('#alert_status').html('Kamu belum dikonfirmasi dengan psikolog, cek waktu konsultasi pada email anda untuk melakukan aktivasi!');
            } else if(response.status_data == 1) {
              $('#alert_status').removeClass();
              $('#alert_status').addClass('alert alert-info');
              $('#alert_status').html('Kamu sudah dikonfirmasi oleh psikolog!');
            } else if(response.status_data == 2) {
              $('#alert_status').removeClass();
              $('#alert_status').addClass('alert alert-success');
              $('#alert_status').html('Kamu sudah melakukan tes, dan bisa cek hasil dengan tombol dibawah');
            }
          } else {
            Swal.fire({
              title: 'Status',
              text: 'Data tidak ditemukan',
              icon: 'error',
            });
            // Swal.close();
          }
        }
      };

      let url = '{{ route('cek-status.show', ['__CODE__']) }}';
      xhttp.open('GET', url.replace('__CODE__', the_code));
      xhttp.send();
    }
  </script>
@endsection