@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 masukkan Nomor Rekam Medis.</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">
          @if(session()->has('messages'))
            <div class="alert alert-warning">
                {{ session()->get('messages') }}
            </div>
          @endif
          <div class="row mb-2 justify-content-md-center">
              <div class="col-md-6 mb-2">
                <form class="" action="{{route('antrian.list-pasien')}}" method="get">
                  @csrf
                  <div class="row form-group">
                    <div class="col-sm-12">
                      <input type="text" class="form-control" name="cari" value="" placeholder="Masukkan nomor No Rekam Medis">
                    </div>
                  </div>
                  <div class="form-group row">
                    <div class="col-sm-12 text-center">
                      <button type="submit" class="btn btn-success rounded-pill px-4 py-2" name="button">Submit</button>
                    </div>
                  </div>
                </form>
              </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