<?= $this->extend('Mobile/Layouts/App') ?>
<?= $this->section('css') ?>

<style>
  .blink_me {
    animation: blinker 1s linear infinite;
  }

  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }

  table {
    width: unset !important;
  }

  .questions-body>* {
    color: unset;
  }

  .options-body>* {
    color: unset;
  }

  .shortentry-respond {
    border: 1px solid black;
  }

  .block-html {
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 9999;
    background-color: #ffffff;
    cursor: progress;
    padding-top: 15%;
    display: none;
  }
</style>
<?= $this->endSection() ?>
<?= $this->section('header') ?>
<div class="block-html text-center">
  <div class="d-flex justify-content-center align-items-center">
    <div>
      <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
      </div>
      <div>
        Mempersiapkan...
      </div>
    </div>
  </div>
</div>
<div class="header-area" id="headerArea">
  <div class="container">
    <!-- Header Content -->
    <div class="header-content position-relative d-flex align-items-center justify-content-between">
      <!-- Back Button -->

      <!-- Page Title -->
      <div class="page-heading">
        <h6 class="mb-0" v-if="localConfig.expiredAt==null">Memuat Informasi...</h6>
        <h6 class="mb-0" v-else-if="localConfig.expiredAt">Waktu Ujian : {{localConfig.expiredAt}}</h6>
        <h6 class="mb-0" v-else>Ujian Selesai</h6>

      </div>
      <div class="setting-wrapper">
        <a href=""><i class="fas fa-sync"></i></a>

      </div>
      <!-- Settings -->
      <div v-if="false" class="setting-wrapper">
        <div class="setting-trigger-btn">
          <a href="<?= base_url("ujian/jadwal") ?>">
            <i class="bi bi-calendar"></i>
            <!-- tambahin sendiri -->
          </a>
          <span></span>
        </div>
      </div>
    </div>
  </div>
</div>
<?= $this->endSection() ?>
<?= $this->section('content') ?>
<ujian ref="field-ujian"></ujian>
<?= $this->endSection() ?>
<?= $this->section('after-content') ?>

<!-- Footer Nav -->
<div class="footer-nav-area" id="footerNav">
  <div class="container px-0">
    <!-- =================================== -->
    <!-- Paste your Footer Content from here -->
    <!-- =================================== -->
    <!-- Footer Content -->
    <div class="footer-nav position-relative">
      <ul class="h-100 d-flex align-items-center justify-content-between ps-0">
        <li v-if="soalActive>1&&!$store.state.exam.loading"><a title="Sebelumnya" ref="BtnPrevSoal" id="prev-soal" @click="prevSoal()" href="javascript:void(0)">
            <i style="font-size:16px" class="bi bi-arrow-left-circle"></i>
            <span>Sebelumnya</span></a></li>
        <li v-if="!$store.state.exam.loading&&jumlahSoal>0" style="cursor:pointer"><a title="Daftar Soal" ref="BtnListSoal" id="list-soal" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">
            <i style="font-size:16px;" class="bi bi-list-ol"></i>
            <span>Daftar Soal</span></a></li>
        <li v-if="soalActive<jumlahSoal&&!$store.state.exam.loading"><a title="Selanjutnya" ref="BtnNextSoal" id="next-soal" @click="nextSoal()" href="javascript:void(0)">
            <i style="font-size:16px" class="bi bi-arrow-right-circle"></i>
            <span>Selanjutnya</span></a></li>
        <li v-if="!$store.state.exam.loading&&jumlahSoal==soalActive&&jumlahSoal>0" style="cursor:pointer">
          <a title="Selesai" ref="BtnFinishSoal" id="finish-soal" cur data-bs-toggle="modal" data-bs-target="#finishModal">
            <i style="font-size:16px" class="bi bi-box-arrow-right"></i>
            <span>Selesai</span></a>
        </li>
      </ul>
    </div>
  </div>
</div>
<div data-bs-toggle="offcanvas" data-bs-target="#shortcut-info" id="show-shortcut"></div>
<div class="offcanvas offcanvas-start" id="shortcut-info" tabindex="-1" aria-labelledby="Shortcut Info">
  <!-- Close Button -->
  <button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  <!-- Offcanvas Body -->
  <div class="offcanvas-body">
    <h5>Pintasan</h5>
    <ul class="ps-0 mb-4">
      <li class="fz-14 pb-2"><code class="bg-dark text-white rounded p-1 me-1">CTRL + i</code>untuk menampilkan info shortcut.</li>
      <li class="fz-14 pb-2"><code class="bg-dark text-white rounded p-1 me-1">CTRL + f</code>untuk selesai.</li>
      <li class="fz-14 pb-2"><code class="bg-dark text-white rounded p-1 me-1">CTRL + l</code>untuk menampilkan daftar soal.</li>
      <li class="fz-14 pb-2"><code class="bg-dark text-white rounded p-1 me-1"><i class="bi bi-arrow-left-square"></i></code>Soal Sebelumnya.</li>
      <li class="fz-14 pb-2"><code class="bg-dark text-white rounded p-1 me-1"><i class="bi bi-arrow-right-square"></i></code>Soal Selanjutnya.</li>
      <li class="fz-14 pb-2"><code class="bg-dark text-white rounded p-1 me-1">a</code>Pilih Opsi A.</li>
      <li class="fz-14 pb-2"><code class="bg-dark text-white rounded p-1 me-1">b</code>Pilih Opsi B.</li>
      <li class="fz-14 pb-2"><code class="bg-dark text-white rounded p-1 me-1">c</code>Pilih Opsi C.</li>
      <li class="fz-14 pb-2"><code class="bg-dark text-white rounded p-1 me-1">d</code>Pilih Opsi D.</li>
      <li class="fz-14"><code class="bg-dark text-white rounded p-1 me-1">e</code>Pilih Opsi E.</li>
    </ul>
  </div>
</div>
<div class="offcanvas offcanvas-bottom" id="offcanvasBottom" tabindex="-1" aria-labelledby="offcanvasBottomLabel">
  <!-- Close Button -->
  <!-- <button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button> -->
  <!-- Offcanvas Body -->
  <div class="offcanvas-body d-flex flex-wrap circle-btn-wrapper">
    <template v-for="i in jumlahSoal">
      <a :title="'Soal '+i" :class="soalActive==i?'btn-success':!(soalData[i-1]||{}).sync?'btn-warning':isSoalTerjawab(i)?'btn-primary':'btn-danger'" @click="soalActive=i" class="btn m-1 btn-circle" href="javascript:void(0)">{{i}}</a>
    </template>
  </div>
</div>

<!-- Bootstrap Basic Modal -->
<div class="modal fade" id="finishModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title" id="exampleModalLabel">{{semuaSoalTerjawab.state?'Konfirmasi Selesai':'Belum Lengkap!'}} </h6>
        <button @click="splitScreenListen.state=true" class="btn btn-close p-1 ms-auto" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div v-if="!semuaSoalTerjawab.state" class="modal-body text-center">
        <p v-if="semuaSoalTerjawab.notsync" class="mb-0">Soal Nomor {{semuaSoalTerjawab.index+1}} Masih Belum Terkirim ke Server, Tunggu Beberapa Saat! .</p>
        <p v-else class="mb-0">Soal Nomor {{semuaSoalTerjawab.index+1}} Masih Belum Dijawab! .</p>

        <button title="Lanjut Ujian" class="btn btn-sm btn-danger" type="button" @click="soalActive=semuaSoalTerjawab.index+1" data-bs-dismiss="modal">Lanjut Ujian</button>&nbsp;
      </div>
      <div v-else-if="!canFinishNow.state" class="modal-body text-center">
        <p class="mb-0">Waktu masih tersisa <span class="text-danger">{{localConfig.expiredAt}}</span>. Silahkan periksa jawaban anda lagi.</p>

        <button title="Lanjut Ujian" class="btn btn-sm btn-danger" type="button" data-bs-dismiss="modal">Lanjut Ujian</button>&nbsp;
      </div>
      <div v-else class="modal-body text-center">
        <p class="mb-0">Pastikan semua soal sudah diisi dan dijawab dengan benar jika sudah yakin silahkan ceklist dan tekan tombol selesai.</p>

        <button class="btn btn-sm btn-danger" title="Lanjut Ujian" type="button" data-bs-dismiss="modal">Lanjut Ujian</button>&nbsp;
        <a title="Selesai UJian" href="javascript:void(0)" @click="finish" class="btn btn-sm btn-success" type="button">Selesai UJian</a>
      </div>
      <!-- <div class="modal-footer text-center">
            
          </div> -->
    </div>
  </div>
</div>

<!-- Bootstrap Basic Modal -->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="grettingModal" tabindex="-1" aria-labelledby="grettingModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title" id="grettingModalLabel">{{$store.state.exam.grettingModalTitle}}</h6>
        <button @click="openFullscreen(),turnOnWakeLock(),this.splitScreenListen.state=false" class="btn btn-close p-1 ms-auto" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <p class="mb-0" v-if="localConfig.expiredAt">Waktu Ujian : <strong>{{localConfig.expiredAt}}</strong></p>
        <p class="mb-0">{{$store.state.exam.grettingModalBody}}</p>
        <p v-if="afk.timeParsed" class="mb-0">Kembali dalam {{afk.timeParsed}}</p>
      </div>
    </div>
  </div>
</div>
<?= $this->endSection() ?>
<?= $this->section('js') ?>
<script src="<?= base_url() ?>/vendors/@tinymce/tinymce-vue/lib/browser/tinymce-vue.min.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/vendors/jquery/jquery-1.9.0.min.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/vendors/jquery-zoom/jquery.zoom.min.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/mobile/js/pages/ujian/exam.js?v=<?= versioningjs() ?>"></script>
<script>
  // window.onload = () => (new bootstrap.Modal(document.getElementById('grettingModal'))).show()
  VAPP.component('editor', Editor);
  VAPP.component(VPujian.name, VPujian);


  document.addEventListener('touchstart', handleTouchStart, false);
  document.addEventListener('touchmove', handleTouchMove, false);

  var xDown = null;
  var yDown = null;

  function getTouches(evt) {
    return evt.touches || // browser API
      evt.originalEvent.touches; // jQuery
  }

  function handleTouchStart(evt) {
    const firstTouch = getTouches(evt)[0];
    xDown = firstTouch.clientX;
    yDown = firstTouch.clientY;
  };

  function handleTouchMove(evt) {
    if (!xDown || !yDown) {
      return;
    }

    var xUp = evt.touches[0].clientX;
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if (Math.abs(xDiff) > Math.abs(yDiff)) {
      /*most significant*/
      if (xDiff - 10 > 0) {
        /* right swipe */
        let next = document.getElementById('next-soal');
        if (next) next.click();
      } else if (xDiff + 10 < 0) {
        /* left swipe */
        let prev = document.getElementById('prev-soal');
        if (prev) prev.click();
      }
    } else {
      if (yDiff > 0) {
        /* down swipe */

      } else {
        /* up swipe */
      }
    }
    /* reset values */
    xDown = null;
    yDown = null;
  };
</script>

<?= $this->endSection() ?>