@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 my-3">
          <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-3" 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 class="col-md-8 my-3" id="result_test">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title text-center">Lakukan Tes</h5>
              <h6 class="card-subtitle mb-2 text-body-secondary text-center" id="result_test_title">Kalau kamu sudah siap menjalankan tes, klik tombol di bawah untuk mulai tes kecemasan dari sistem kami!</h6>
              <div class="row justify-content-center">
                <div class="col-md-12 text-center my-3">
                  <span>Status tes kamu: <span id="result_test_status" class="fw-bold text-white bg-secondary p-2 rounded-pill">Belum Dimulai</span></span>
                </div>
                <div class="col-md-9 mb-3">
                  <div class="row justify-content-center">
                    <form action="" method="POST" id="result_test_form">
                      @csrf
                      <input type="hidden" name="id_booking" id="id_booking_input">
                      <div class="row justify-content-center">
                        <button type="button" class="btn btn-primary text-white fw-bold" onclick="startSessionTest()">Mulai Tes</button>
                      </div>
                    </form>
                    <a href="#" class="btn btn-primary text-white fw-bold" id="result_test_link">Mulai Tes</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section><!-- /About Section -->

@endsection

@section('script')
  <script>
    $('#result_data').hide();
    $('#result_test').hide();
    $('#result_test_form').hide();
    $('#result_test_link').hide();
    function searchUserStatus() {
      $('#result_data').hide();
      $('#result_test').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!');

              let test_session = getTestSession(response.id_booking);
              $('#result_test').show();
              $('#result_test_title').html('Kamu sudah dikonfirmasi oleh psikolog! Kalau kamu sudah siap menjalankan tes, klik tombol di bawah untuk mulai tes kecemasan dari sistem kami!');
              if(test_session.status) {
                if(test_session.status_session == 0) {
                  $('#result_test_status').html('Belum Dimulai');
                  $('#result_test_status').removeClass();
                  $('#result_test_status').addClass('fw-bold text-white bg-secondary p-2 rounded-pill');
                  $('#result_test_form').show();
                } else if(test_session.status_session == 1) {
                  $('#result_test_status').html('Sedang Berlangsung');
                  $('#result_test_status').removeClass();
                  $('#result_test_status').addClass('fw-bold text-white bg-warning p-2 rounded-pill');
                } else if(test_session.status_session == 2) {
                  $('#result_test_status').html('Selesai');
                  $('#result_test_status').removeClass();
                  $('#result_test_status').addClass('fw-bold text-white bg-success p-2 rounded-pill');
                }
              } else if(!test_session.status) {
                console.log(test_session.msg);
                $('#result_test').show();
                $('#result_test_title').html('Kamu sudah dikonfirmasi oleh psikolog! Kalau kamu sudah siap menjalankan tes, klik tombol di bawah untuk mulai tes kecemasan dari sistem kami!');

                $('#result_test_status').html('Belum Dimulai');
                $('#result_test_status').removeClass();
                $('#result_test_status').addClass('fw-bold text-white bg-secondary p-2 rounded-pill');
                $('#result_test_form').show();
              }
            } 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();
    }

    function getTestSession(id_booking) {
      let xhttp = new XMLHttpRequest();
      let result = {
        'status': false,
        'msg': 'Data tidak ditemukan (' + id_booking + ')',
      };

      xhttp.onreadystatechange = function() {
        if(this.readyState == 4 && this.status == 200) {
          let response = JSON.parse(this.responseText);
          if(response.status) {
            result = {
              'status': true,
              'msg': 'Data ditemukan (' + id_booking + ')',
              'id_booking': response.id_booking,
              'status_session': response.status_session,
              'token_session': response.token_session
            };
          }
        }
      };

      let url = '{{ route('test-sessions.show', ['__ID__']) }}';
      xhttp.open('GET', url.replace('__ID__', id_booking), false);
      xhttp.send();

      return result;
    }

    function startSessionTest() {
      let id_booking = $('#id_booking_input').val();
      let url = '{{ route('test-sessions.store') }}';
      let form = $('#result_test_form');
      Swal.fire({
        title: 'Konfirmasi',
        text: 'Apakah kamu yakin ingin memulai tes sekarang?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Ya, mulai tes!',
        cancelButtonText: 'Nggak jadi deh'
      }).then((result) => {
        if(result.isConfirmed) {
          form.attr('action', url);
          form.submit();
        }
      });
    }
  </script>
@endsection