@extends("antrian.master")

@push('css')

<link rel="stylesheet" href="{{asset('adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('adminlte/plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
<style media="screen">
  .container-antrian {
    padding-right: 150px;
    padding-left: 150px;
    margin-top: 50px;
    margin-bottom: 50px;
  }
</style>
@endpush

@section ('content')

<div class="container-fluid container-antrian">
  <section class="content-header">
    <div class="container-fluid breadcrumb-container">

    </div><!-- /.container-fluid -->
  </section>
    <!-- Page Heading -->

    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
          <div class="row">
            <div class="col-12">
              <h6 class="m-0 font-weight-bold text-primary w-75 p-2">Selamat Datang di Aplikasi Antrian Berbasis Web. Silahkan pilih halaman yang ingin ditampilkan.</h6>
              <h6 class="m-0 font-weight-bold text-default w-75 p-2">{{ \Carbon\Carbon::now('Asia/Jakarta')->translatedFormat('l, d F Y H:i:s')}}</h6>

            </div>

          </div>
        </div>
        <div class="card-body">

          <div class="row mb-2 justify-content-md-center">

            <div class="col-md-3 mb-2">
                <div class="card border-left-warning shadow h-10 py-2">
                    <div class="card-body" >
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    Sekarang</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" id="sekarang">0</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-fw fa-tachometer-alt fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
              </div>

              <div class="col-md-3 mb-2">
                  <div class="card border-left-primary shadow h-10 py-2">
                      <div class="card-body">
                          <div class="row no-gutters align-items-center">
                              <div class="col mr-2">
                                  <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                      Total Antrian</div>
                                  <div class="h5 mb-0 font-weight-bold text-gray-800" id="total">0</div>
                              </div>
                              <div class="col-auto">
                                  <i class="fas fa-fw fa-tachometer-alt fa-2x text-gray-300"></i>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
            <div class="col-md-3 mb-2">
                <div class="card border-left-success shadow h-10 py-2">
                    <div class="card-body" >
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    Selanjutnya</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" id="selanjutnya">0</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-fw fa-tachometer-alt fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-2">
                <div class="card border-left-danger shadow h-10 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    Sisa Antrian</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" id="sisa">0</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-fw fa-tachometer-alt fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>

          <div class="row mb-2">
            <table class="table table-bordered table-antrian">
              <thead>
                <tr>
                  <th style="width: 10px">#</th>
                  <th>Nama</th>
                  <th>No RM</th>
                  <th>No Antrian</th>
                  <th>Status</th>
                  <th style="width: 40px">Panggil</th>
                </tr>
              </thead>
              <tbody>
                @if(count($antrian) > 0)
                  @foreach ($antrian as $key => $val)
                    <tr>
                      <td>{{$key+1}}</td>
                      <td>{{ $val->pasien->nama }}</td>
                      <td>{{ $val->no_rm }}</td>
                      <td>
                        @if ($val->type_register == 1)
                        {{ $val->antrian }}
                        @else
                        Appointment
                        @endif
                      </td>
                      @if($val->status_antrian == 1)
                        <td id="status_antrian-{{$val->id}}"><span class="badge bg-success">Sudah dipanggil</span></td>
                      @else
                        <td id="status_antrian-{{$val->id}}"><span class="badge bg-warning">Pending</span></td>
                      @endif
                      @if ($val->type_register == 1)
                      <td><button class="btn btn-success btn-sm rounded-circle btn-voice" data-id="{{ $val->id }}" data-antrian="Nomor Antrian, {{ $val->antrian }}"><i class="fas fa-fw fa-microphone"></i></button></td>

                      @else
                      <td><button class="btn btn-success btn-sm rounded-circle btn-voice" data-id="{{ $val->id }}" data-antrian="Pasien Appointment, atasnama, {{ $val->pasien->nama }}"><i class="fas fa-fw fa-microphone"></i></button></td>
                      @endif
                    </tr>
                  @endforeach
                @endif
              </tbody>
            </table>

          </div>

        </div>
    </div>

</div>

@endsection

@push('js')
<!-- Page level custom scripts -->
<script src="{{asset('adminlte/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/jszip/jszip.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/toastr/toastr.min.js')}}"></script>
<audio id="tingtung" src="{{asset('tingtung.mp3')}}"></audio>
<script src="{{url('https://code.responsivevoice.org/responsivevoice.js?key=jQZ2zcdq')}}"></script>

<script>

setInterval(function() {
              updateData();
         }, 1000);

function updateData(){

  $.ajax({
      url:"{{ route('antrian.updateData') }}",
      method:"GET",
      success:function(res){
        // console.log(res);
        $("#sekarang").text(res.sekarang)
        $("#total").text(res.total)
        $("#selanjutnya").text(res.selanjutnya)
        $("#sisa").text(res.sisa)
      }
    })
}

$('.btn-voice').on('click', function() {
  // buat variabel untuk menampilkan audio bell antrian
  var bell = document.getElementById('tingtung');
  var id = $(this).attr("data-id");
  var antrian = $(this).attr("data-antrian");
  // mainkan suara bell antrian
  bell.pause();
  bell.currentTime = 0;
  bell.play();

  // set delay antara suara bell dengan suara nomor antrian
  durasi_bell = bell.duration * 770;

  // mainkan suara nomor antrian
  setTimeout(function() {
    responsiveVoice.speak(antrian + ", silahkan menuju ruang pemeriksaan", "Indonesian Female", {
      rate: 0.9,
      pitch: 1,
      volume: 1
    });
  }, durasi_bell);

  // proses update data
  $.ajax({
    type: "GET",               // mengirim data dengan method POST
    url: "{{route('antrian.updateStatus')}}",          // url file proses update data
    data: { id: id },
    success:function(res){
      if (res == true) {
        $("#status_antrian-"+id).html(`<span class="badge bg-success">Completed</span>`)
      }

    }         // tentukan data yang dikirim
  });
});

  $(function () {
    $("#example1").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false,
      "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });
  });
</script>
@endpush