@section('title', 'Ujian Kecemasan')
{{-- @section('body_status_overflow', 'overflow: hidden;') --}}
@section('main_style', 'min-height: 100vh;')
@extends('user.layouts.test_layout.index')
@section('content')
  <div class="container-fluid p-0 d-flex flex-column" style="min-height: 100vh">
    <nav class="navbar navbar-expand-lg bg-body-tertiary px-2">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Smart Anxiety</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
          <div class="d-flex fw-bold">Time Left: <span id="time_left"></span></div>
        </div>
      </div>
    </nav>

    <div class="d-flex flex-grow-1 container-fluid">
      <div class="row flex-grow-1">
        <div class="col-md-9 border-end">
          <div class="row justify-content-center flex-column p-4">
            <div class="col-md-12 border-bottom fs-4 fw-bold p-2">Soal</div>
            <div class="col-md-12 p-2" style="text-align: justify">{{ $data_question->pertanyaan }}</div>
            <div class="col-md-12">
              <div class="fs-4 fw-bold p-2">Jawaban:</div>
              <div class="form-check m-2">
                <input class="form-check-input" type="radio" name="jawaban_final" id="jawaban_a">
                <label class="form-check-label" for="jawaban_a">{{ $data_question->jawaban_a }}</label>
              </div>
              <div class="form-check m-2">
                <input class="form-check-input" type="radio" name="jawaban_final" id="jawaban_b">
                <label class="form-check-label" for="jawaban_b">{{ $data_question->jawaban_b }}</label>
              </div>
              <div class="form-check m-2">
                <input class="form-check-input" type="radio" name="jawaban_final" id="jawaban_c">
                <label class="form-check-label" for="jawaban_c">{{ $data_question->jawaban_c }}</label>
              </div>
              <div class="form-check m-2">
                <input class="form-check-input" type="radio" name="jawaban_final" id="jawaban_d">
                <label class="form-check-label" for="jawaban_d">{{ $data_question->jawaban_d }}</label>
              </div>
              <div class="form-check m-2">
                <input class="form-check-input" type="radio" name="jawaban_final" id="jawaban_e">
                <label class="form-check-label" for="jawaban_e">{{ $data_question->jawaban_e }}</label>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="row p-3">
            <div class="col-md-12 border-bottom fs-4 fw-bold p-2 mb-3">Navigasi Soal</div>
            @for ($i = 0; $i < $total_question; $i++)
              <div onclick="changeQuestion({{ $i + 1 }})" class="col-md-1 btn d-flex justify-content-center align-items-center bg-light-subtle border rounded p-0 m-1" style="aspect-ratio: 1/1.5;">{{ $i + 1 }}</div>
            @endfor

            <div class="col-md-12 p-0 mt-3">
              @if ($question_number > 1)
                <div class="btn btn-secondary" onclick="changeQuestion({{ $question_number - 1 }})">Previous</div>
              @endif

              @if ($is_last_question)
                <div class="btn btn-success" onclick="finishExam()">Finish</div>
              @else
                <div class="btn btn-primary" onclick="changeQuestion({{ $question_number + 1 }})">Next</div>
              @endif
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('script')
  <script>
    const ws = new WebSocket('{{ env("WEBSOCKET_URL") }}');
    let SESSION_ID = '{{ $data_session->id_test_sessions }}';
    let TOKEN_SESSION = '{{ $data_session->token_session }}';

    function changeQuestion(num) {
      let url_temp = window.location.href;
      let current_num = new URLSearchParams(window.location.search).get('question');
      stopTobii();
      if(!url_temp.includes('question')) {
        window.location.href = url_temp + '&question=' + num;
      } else if(url_temp.includes('question')) {
        window.location.href = window.location.href.replace('&question=' + current_num, '&question=' + num);
      }
    }

    function finishExam() {
      ws.send(JSON.stringify({
        type: "command",
        action: "stop",
        session_id: SESSION_ID
      }));

      //send_data_to_db
      ws.send(JSON.stringify({
        type: "send_data_to_db",
        session_id: SESSION_ID
      }));

      ws.send(JSON.stringify({
        type: "update_status",
        status_sessions: false,
        session_id: SESSION_ID
      }));
    }

    function startTobii() {
      ws.send(JSON.stringify({
        type: "command",
        action: "start",
        session_id: SESSION_ID
      }));
    }

    function stopTobii() {
      ws.send(JSON.stringify({
        type: "command",
        action: "stop",
        session_id: SESSION_ID
      }));
    }

    $(document).ready(function() {
      ws.onopen = () => {
        console.log("Connected to WebSocket");
        ws.send(JSON.stringify({
          type: "register",
          session_id: SESSION_ID,
          token_session: TOKEN_SESSION,
          role: "web"
        }));

        ws.send(JSON.stringify({
          type: "update_status",
          status_sessions: true,
          session_id: SESSION_ID
        }));

        startTobii();
      };
    });
  </script>
@endsection