@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">

              <div class="col-md-4 mb-2">
                  <div class="card border-left-primary shadow h-10 py-2">
                    <a href="{{route('antrian.cari')}}">
                      <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 mb-1">
                                      <h4 class="m-0 font-weight-bold text-primary p-2">Cari Pasien</h4>
                                  </div>
                              </div>
                              <div class="col-auto">
                                  <i class="fas fa-fw fa-tachometer-alt fa-2x text-gray-300"></i>
                              </div>
                          </div>
                      </div>
                      </a>
                  </div>
              </div>
              <div class="col-md-4 mb-2">
                  <div class="card border-left-warning shadow h-10 py-2">
                    <a href="{{route('antrian.panggil')}}">

                      <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 mb-1">

                                      <h4 class="m-0 font-weight-bold text-primary p-2">Panggil Antrian</h4>

                                    </div>
                              </div>
                              <div class="col-auto">
                                  <i class="fas fa-tachometer-alt fa-2x text-gray-300"></i>
                              </div>
                          </div>
                      </div>
                    </a>

                  </div>
              </div>
              <div class="col-md-4 mb-2">
                  <div class="card border-left-success shadow h-10 py-2">
                    <a href="{{route('antrian.tampilkan')}}">

                      <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 mb-1">
                                      <h4 class="m-0 font-weight-bold text-primary p-2">Tampilkan Antrian</h4>

                                  </div>
                              </div>
                              <div class="col-auto">
                                  <i class="fas fa-tachometer-alt fa-2x text-gray-300"></i>
                              </div>
                          </div>
                      </div>
                    </a>

                  </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>

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