<?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 class="row">
                <div class="col-6">  
                  <div class="small-box bg-olive" style="height: 100px">
                    <div class="inner">
                      <h4>Praktek Pagi</h4>
                      <h3 id="jadwal_pagi">0</h3>
                    </div>
                    <div class="icon">
                      <i class="fas fa-user"></i>
                    </div>
                  </div>
                </div>
                <div class="col-6">  
                  <div class="small-box bg-info" style="height: 100px">
                    <div class="inner">
                      <h4>Praktek Sore</h4>
                      <h1 id="jadwal_sore">0</h1>
                    </div>
                    <div class="icon">
                      <i class="fas fa-user"></i>
                    </div>
                  </div>
                </div>
              </div>
              <table class="table table-sm table-bordered table-striped">
                <thead>                  
                  <tr>
                    <th style="text-align: center;">Hari</th>
                    <th style="text-align: center; width: 100px">Jam</th>
                    <th style="text-align: center; width: 150px">Praktek</th>
                    <th style="text-align: center; width: 100px">Jam</th>
                    <th style="text-align: center; width: 150px">Praktek</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th style="text-align: ">Senin</th>
                    <td align="center">Pagi</td>
                    <td align="center"><?php if($jadwal_praktek->senin_pagi != '00:00-00:00'){ echo $jadwal_praktek->senin_pagi; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                    <td align="center">Sore</td>
                    <td align="center"><?php if($jadwal_praktek->senin_sore != '00:00-00:00'){ echo $jadwal_praktek->senin_sore; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                  </tr>
                  <tr>
                    <th style="text-align: ">Selasa</th>
                    <td align="center">Pagi</td>
                    <td align="center"><?php if($jadwal_praktek->selasa_pagi != '00:00-00:00'){ echo $jadwal_praktek->selasa_pagi; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                    <td align="center">Sore</td>
                    <td align="center"><?php if($jadwal_praktek->selasa_sore != '00:00-00:00'){ echo $jadwal_praktek->selasa_sore; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                  </tr>
                  <tr>
                    <th style="text-align: ">Rabu</th>
                    <td align="center">Pagi</td>
                    <td align="center"><?php if($jadwal_praktek->rabu_pagi != '00:00-00:00'){ echo $jadwal_praktek->rabu_pagi; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                    <td align="center">Sore</td>
                    <td align="center"><?php if($jadwal_praktek->rabu_sore != '00:00-00:00'){ echo $jadwal_praktek->rabu_sore; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                  </tr>
                  <tr>
                    <th style="text-align: ">Kamis</th>
                    <td align="center">Pagi</td>
                    <td align="center"><?php if($jadwal_praktek->kamis_pagi != '00:00-00:00'){ echo $jadwal_praktek->kamis_pagi; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                    <td align="center">Sore</td>
                    <td align="center"><?php if($jadwal_praktek->kamis_sore != '00:00-00:00'){ echo $jadwal_praktek->kamis_sore; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                  </tr>
                  <tr>
                    <th style="text-align: ">Jumat</th>
                    <td align="center">Pagi</td>
                    <td align="center"><?php if($jadwal_praktek->jumat_pagi != '00:00-00:00'){ echo $jadwal_praktek->jumat_pagi; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                    <td align="center">Sore</td>
                    <td align="center"><?php if($jadwal_praktek->jumat_sore != '00:00-00:00'){ echo $jadwal_praktek->jumat_sore; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                  </tr>
                  <tr>
                    <th style="text-align: ">Sabtu</th>
                    <td align="center">Pagi</td>
                    <td align="center"><?php if($jadwal_praktek->sabtu_pagi != '00:00-00:00'){ echo $jadwal_praktek->sabtu_pagi; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                    <td align="center">Sore</td>
                    <td align="center"><?php if($jadwal_praktek->sabtu_sore != '00:00-00:00'){ echo $jadwal_praktek->sabtu_sore; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                  </tr>
                  <tr>
                    <th style="text-align: ">Minggu</th>
                    <td align="center">Pagi</td>
                    <td align="center"><?php if($jadwal_praktek->minggu_pagi != '00:00-00:00'){ echo $jadwal_praktek->minggu_pagi; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                    <td align="center">Sore</td>
                    <td align="center"><?php if($jadwal_praktek->minggu_sore != '00:00-00:00'){ echo $jadwal_praktek->minggu_sore; } else echo '<span class="badge bg-danger">Libur</span>'; ?></td>
                  </tr>
                </tbody>
              </table>
            </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: 20000,
      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.03;

    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(){

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

      setTimeout(() => {
        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, 'obat');
              }
            },
            error: function (xhr, ajaxOptions, thrownError) { 
              console.log(xhr.responseText);
            }
          });
        } 
      }, 1000);

    }, 2000)

    function speakQueueNumber(response, table) 
    {      
      swalWithTimer.fire({
        width: '90%',
        html: '<h1 style="font-size: 10em; height: 100%">'+response.value+'</h1>'
      })

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

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

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

      delay = 1500;

      setTimeout(function() {
        var text = `pasien ${response.value}, mohon ke ruang pemeriksaan`;
        var url = base_url+'pemanggil_poli/update_status';

        if(table == 'obat')
        {
          var text = `pasien ${response.value}, mohon ke penyerahan obat`; 
          var url = base_url+'pemanggil_obat/update_status'; 
        } 

        responsiveVoice.speak(text, "Indonesian Female", {
          volume: 1,
          rate: 0.85,
          pitch: 0.9
        });

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

          $.ajax({
            url: url,
            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>
