@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.</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-6 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-lg font-weight-bold text-primary text-uppercase mb-1">
                                    Nomor Antrian Sekarang</div>
                                <div class="h1 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>
            <div class="row mb-2">
              <div class="col-md-4 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-4 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">
                                    Nomor Antrian 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-4 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>
    </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>


<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)
      }
    })
}



  $(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