@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;
  }

  .dokter-label.active{
  /*box-shadow: 0 0 0 62.5rem rgb(0 0 0 / 8%) inset;border: solid 1px #c2c2c2;*/
    background: lightgray;
  }

  /* .btn-check {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
  } */

  table.table-list tr:nth-child(odd) {
    background-color: #D6EEEE;
  }
</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-md-1">
              <a href="{{route('antrian.cari')}}">
                <button type="button" class="btn btn-primary" name="button">Home</button>
              </a>
            </div>
            <div class="col-11">
              <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">
          @if(session()->has('messages'))
            <div class="alert alert-warning">
                {{ session()->get('messages') }}
            </div>
          @endif

          @if(session()->has('message_sukses'))
            <div class="alert alert-success">
                {{ session()->get('message_sukses') }}
            </div>

          @endif
          <div class="row mb-2 justify-content-md-center">
            <!-- <a type="button" href="#" class="btn btn-primary btn-sm float-right" id="open-form" data-toggle="modal" data-target="#my-modal"><i class="fa fa-plus"></i> Create</a> -->

              <div class="col-md-6 mb-2">
                  <div class="card border-left-primary shadow h-10 py-2">
                      <div class="card-body">
                        <form class="" action="{{route('antrian.daftar-pasien')}}" method="post">
                          @csrf
                          <div class="row no-gutters align-items-center">
                              <div class="col mr-2">
                                <input type="hidden" name="no_rm" value="{{ $data->no_rm }}">
                                <table class="table-list">
                                  <tr>
                                    <td style="width:35%">Nama</td>
                                    <td>:</td>
                                    <td style="width:50%">{{ $data->nama }}</td>
                                  </tr>
                                  <tr>
                                    <td>No RM</td>
                                    <td>:</td>
                                    <td>{{ $data->no_rm }}</td>
                                  </tr>
                                  <tr>
                                    <td>Usia</td>
                                    <td>:</td>
                                    <td>{{ \Carbon\Carbon::parse($data->tgl_lahir)->diff(\Carbon\Carbon::now('Asia/Jakarta'))->format('%y') }}</td>
                                  </tr>
                                  <tr>
                                    <td>Alamat</td>
                                    <td>:</td>
                                    <td>{{ $data->alamat }}</td>
                                  </tr>
                                </table>

                                <div class="row mt-4">
                                  @if($doctor)
                                  @foreach($doctor as $val)

                                    <div class="col-md-12">
                                        <div class="card border-left-primary h-10 dokter-label doctor-{{$val->id}}">
                                          <label for="" class="">
                                            <div class="card-body" style="padding: 10px;">
                                                <div class="row no-gutters align-items-center">
                                                    <div class="col-md-1">
                                                      <input class="btn-check" data-id="{{$val->id}}" type="radio" name="doctor_id" value="{{ $val->id }}">
                                                    </div>
                                                    <div class="col-md-9">

                                                        <div class="text-xs font-weight-bold text-primary mb-1">
                                                            <p style="margin-bottom: 0; font-size: 16px;">{{ $val->nama }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                          </label>

                                        </div>
                                      </div>
                                    @endforeach
                                    @endif
                                  </div>

                              </div>
                          </div>
                          <div class="col-sm-12 text-center mt-4">
                            <button type="submit" class="btn btn-success rounded-pill px-4 py-2" name="button">Daftar</button>
                          </div>
                        </form>
                      </div>
                  </div>
              </div>
          </div>
        </div>
    </div>

</div>

<div class="modal fade" id="my-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

          <div class="card-body" style="padding: 0px;" id="table-antrian">

          </div>
          <!-- /.card-body -->

      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" onClick="printdiv('table-antrian');" class="btn btn-primary">Print</button>
        <button type="button"  class="btn btn-warning" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</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>

@if(session()->has('message_sukses'))
  $("#my-modal").modal("show")

  $("#table-antrian").html(`
    <table style="border: 1px solid black; margin-left: auto; margin-right: auto;" >
      <tbody style="padding: 10px;">
        <tr class="text-center" >
          <td style="padding-bottom: 0px; padding-top: 10px; border: 1px solid black;"><img class="card-img-top mb-2" src="{{asset('logo-klinik-gigi.png')}}" style="width:85px"></td>
        </tr>
        <tr class="text-center">
          <td style="padding-bottom: 10px; padding-top: 10px; border: 1px solid black;"><h6>Nomor Antrian</h6></td>
        </tr>
        <tr class="text-center">
          <td style="padding-bottom: 10px; padding-top: 10px; border: 1px solid black;"><h1>{{ session()->get('nomor_antrian') }}</h1></td>
        </tr>
        <tr class="text-center">
          <td style="padding-left: 30px; padding-right: 30px; padding-bottom: 10px; padding-top: 10px; border: 1px solid black;"><h6>{{\Carbon\Carbon::now('Asia/Jakarta')->format('l, d F Y H:i:s')}}</h6></td>
        </tr>
        <tr class="text-center">
          <td style="padding-bottom: 10px; padding-top: 10px; border: 1px solid black;"><h6>Nama : {{ session()->get('nama') }}</h6></td>
        </tr>
      </tbody>

    </table>
    `)

@endif

$(".btn-check").on("click", function (e) {
  console.log("tes");
  let id = $(this).attr("data-id")
  $(".dokter-label").removeClass("active");

  $(".doctor-"+id).addClass("active");

});

function printdiv(printpage) {
  var headstr = "<html><head><title></title></head><body>";
  var footstr = "</body>";
  var newstr = document.all.item(printpage).innerHTML;
  var oldstr = document.body.innerHTML;
  document.body.innerHTML = headstr + newstr + footstr;
  window.print();
  document.body.innerHTML = oldstr;

  setTimeout(function() {
                location.reload();
           }, 1000);
  // }

  return false;
}

$("#open-form").on("click", function (e) {
  $("#my-modal").modal("show")
  $("#table-antrian").html(`
    <table style="border: 1px solid black; margin-left: auto; margin-right: auto;" >
      <tbody style="padding: 10px;">
        <tr class="text-center" >
          <td style="padding-bottom: 0px; padding-top: 10px; border: 1px solid black;"><img class="card-img-top mb-2" src="{{asset('logo-klinik-gigi.png')}}" style="width:85px"></td>
        </tr>
        <tr class="text-center">
          <td style="padding-bottom: 10px; padding-top: 10px; border: 1px solid black;"><h6>Nomor Antrian</h6></td>
        </tr>
        <tr class="text-center">
          <td style="padding-bottom: 10px; padding-top: 10px; border: 1px solid black;"><h1>{{ session()->get('nomor_antrian') }}</h1></td>
        </tr>
        <tr class="text-center">
          <td style="padding-left: 30px; padding-right: 30px; padding-bottom: 10px; padding-top: 10px; border: 1px solid black;"><h6>{{\Carbon\Carbon::now('Asia/Jakarta')->format('l, d F Y H:i:s')}}</h6></td>
        </tr>
        <tr class="text-center">
          <td style="padding-bottom: 10px; padding-top: 10px; border: 1px solid black;"><h6>Nama : {{ session()->get('nama') }}</h6></td>
        </tr>
      </tbody>

    </table>
    `)
});

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