<?php 
defined('BASEPATH') OR exit('No direct script access allowed');
?>

<!DOCTYPE html>
<html lang="en">

<!-- Head -->
<?php $this->load->view("_top_not_nav/head.php") ?>

<body class="layout-top-nav">
  <div class="wrapper">
    <div class="content-wrapper" style="padding: 5px; background: #808080; ">
      <div class="row">
        <div class="col-6">    
          <div class="card card-primary card-outline" id="content-box-1">
            <div class="card-header">  
              <h4>INFORMASI</h4>  
            </div>
            <div class="card-body"> 
              <video width="100%" autoplay controls id="video"></video>
            </div>
          </div>
        </div>
        <div class="col-6" id="content-box">
        </div>
      </div>
    </div>
  </div>

  <input type="hidden" name="sedang_panggil" value="false">

  <!-- Script -->
  <?php $this->load->view("_top_not_nav/script.php") ?>


  <script type="text/javascript">
    var url = window.location;
    var base_url        = url.protocol+'<?php echo str_replace("http:", "", base_url()); ?>';
    var controller_url  = base_url+'<?php echo $this->uri->segment(1); ?>';
  </script>

  <script type="text/javascript">
    $(document).ready(function(){
      tabel();

      var body = document.body,
      html = document.documentElement;

      var height = Math.max(body.scrollHeight, body.offsetHeight, 
       html.clientHeight, html.scrollHeight, html.offsetHeight );

      document.getElementById('content-box-1').style.height = (height-20)+"px";
    })  

    const swalWithTimer = Swal.mixin({
      timer: 10000,
      timerProgressBar: true,     
      showConfirmButton: false
    })

    setInterval(function()
    {
      tabel(); 
    }, 60000);

    function tabel()
    {
      $.ajax({
        url: controller_url+'/tabel',
        type: 'POST',
        success: function(response){
          $('#content-box').html(response);
        },
        error: function (xhr, ajaxOptions, thrownError) { 
         console.log(xhr.responseText);
       }
     });
    }

    var videoSource = new Array();
    <?php $i = 0;  foreach ($video as $key) { ?>
      videoSource[<?php echo $i ?>] = '_asset/video/<?php echo $key ?>';
      <?php $i++; 
    } ?>
    var videoCount = videoSource.length;
    document.getElementById("video").setAttribute("src", videoSource[0]);
    document.getElementById("video").volume = 0.1;

    function videoPlay(videoNum) {
      document.getElementById("video").setAttribute("src", videoSource[videoNum]);
      document.getElementById("video").load();
      document.getElementById("video").play();
    }
    document.getElementById('video').addEventListener('ended', myHandler, false);

    var i = 0;

    function myHandler() {
      i++;
      if (i == videoCount) {
        window.location.href = window.location.href;
      } else {
        videoPlay(i);
      }
    }
  </script>

  <script type="text/javascript">

    setInterval(function(){

      if($('input[name=sedang_panggil]').val() == 'false')
      {
        $.ajax({
          url: base_url+'pemanggil_obat/cek',
          dataType:'json',
          success: function(response){  
            console.log(response);
            if(response.jumlah != '0')
            { 
              speakQueueNumber(response.data);
            }
          },
          error: function (xhr, ajaxOptions, thrownError) { 
            console.log(xhr.responseText);
          }
        });
      } 
    }, 2000)

    function speakQueueNumber(response) 
    {      
      swalWithTimer.fire({
        icon: 'info',
        html: '<h1>'+response.value+'</h1>'
      })

      $('input[name=sedang_panggil]').val('true');

      var tingtung = new Audio('_asset/tingtung.mp3');

      tingtung.pause();
      tingtung.currentTime = 0;
      tingtung.play();

      delay = 1700;

      setTimeout(function() {
       var text = `Pasien ${response.value}, mohon ke penyerahan obat`;           
       responsiveVoice.setVolume(1);
       responsiveVoice.speak(text, "Indonesian Female");

       setTimeout(() => {
        var data = {
          id: response.id,
          status: 'selesai'
        };

        $.ajax({
          url: base_url+'pemanggil_obat/update_status',
          type: 'POST',
          data: data,
          dataType:'json', 
          success: function(response){  
            $('input[name=sedang_panggil]').val('false');
          },
          error: function (xhr, ajaxOptions, thrownError) { 
            console.log(xhr.responseText);
          }
        });
      }, 5000);
     }, delay);

    }
  </script>

</body>
</html>
