@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 dan Jam Ujian (sesuai booking): <span id="tgl_booking"></span><span id="jam_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">
                      <input type="hidden" name="screen_w" id="screen_w">
                      <input type="hidden" name="screen_h" id="screen_h">
                      <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 -->

  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto"><i class="bi bi-exclamation-triangle"></i> Kesalahan</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        {{ session('error') }}
      </div>
    </div>
  </div>

@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 = ['Sesi anda dinonaktifkan karena telah kedaluwarsa atau belum sesuai jadwal yang telah di booking', '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(`<b>${response.tgl_booking}</b>`);
            $('#jam_booking').html(", Valid dari jam <b>" + response.start_test + "</b>, sampai dengan jam <b>" + response.end_test + "</b>");
            $('#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-warning');
              $('#alert_status').html('Session kamu dinonaktifkan atau belum sesuai jam yang telah di booking!');
            } else if(response.status_data == 1) {
              $('#alert_status').removeClass();
              $('#alert_status').addClass('alert alert-info');
              $('#alert_status').html('Kamu bisa memulai tes sekarang!');

              let test_session = getTestSession(response.id_booking);
              $('#result_test').show();
              $('#result_test_title').html('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) {
                  $('#id_booking_input').val(response.id_booking);
                  $('#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');
                  let test_url = '{{ route('tutorial-tes.index', ['id_test_sessions' => '__ID_TEST_SESSIONS__']) }}';
                  $('#result_test_form').hide();
                  $('#result_test_link').show();
                  $('#result_test_link').html('Tes Sedang Berlangsung, Klik untuk Lanjutkan Tes');
                  $('#result_test_link').attr('href', test_url.replace('__ID_TEST_SESSIONS__', test_session.id_test_sessions));
                } 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');
                  let test_url = '{{ route('hasil-tes.index', ['id_test_sessions' => '__ID_TEST_SESSIONS__']) }}';
                  $('#result_test_link').show();
                  $('#result_test_link').html('Tes Sudah Selesai, Klik untuk melihat hasil');
                  $('#result_test_link').attr('href', test_url.replace('__ID_TEST_SESSIONS__', test_session.id_test_sessions));
                }
              } else if(!test_session.status) {
                $('#id_booking_input').val(response.id_booking);
                $('#result_test').show();
                $('#result_test_title').html('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) {
              let test_session = getTestSession(response.id_booking);

              $('#alert_status').removeClass();
              $('#alert_status').addClass('alert alert-success');
              $('#alert_status').html('Kamu sudah melakukan tes, dan bisa cek hasil dengan tombol dibawah');

              $('#result_test_status').html('Selesai');
              $('#result_test_status').removeClass();
              $('#result_test_status').addClass('fw-bold text-white bg-success p-2 rounded-pill');
              let test_url = '{{ route('hasil-tes.index', ['id_test_sessions' => '__ID_TEST_SESSIONS__']) }}';
              $('#result_test_form').hide();
              $('#result_test_link').show();
              $('#result_test_link').html('Tes Sudah Selesai, Klik untuk melihat hasil');
              $('#result_test_link').attr('href', test_url.replace('__ID_TEST_SESSIONS__', test_session.id_test_sessions));

              $('#result_test').show();
            }
          } 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,
              'id_test_sessions': response.id_test_sessions,
              '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) {
          $('#screen_w').val(window.screen.width);
          $('#screen_h').val(window.screen.height);
          form.attr('action', url);
          form.submit();
        }
      });
    }
  </script>

  @if (session('error'))
    <script>
      $(document).ready(function() {
        var toast = new bootstrap.Toast(document.getElementById('liveToast'));
        toast.show();
      });
    </script>
  @endif
@endsection