@extends('layouts.app')

@section('css')
<!-- Plugins css-->
<link href="{{ asset('tema/plugins/switchery/switchery.min.css') }}" rel="stylesheet" />
<link href="{{ asset('tema/plugins/tagsinput/jquery.tagsinput.css') }}" rel="stylesheet" />
<link href="{{ asset('tema/plugins/clockpicker/jquery-clockpicker.min.css') }}" rel="stylesheet" />
<link href="{{ asset('tema/plugins/toggles/toggles.css') }}" rel="stylesheet" />
<link href="{{ asset('tema/plugins/timepicker/tempusdominus-bootstrap-4.css') }}" rel="stylesheet" />
<link href="{{ asset('tema/plugins/timepicker/bootstrap-material-datetimepicker.css') }}" rel="stylesheet">
<link href="{{ asset('tema/plugins/bootstrap-select/bootstrap-select.min.css') }}" rel="stylesheet" />
<link href="{{ asset('tema/plugins/colorpicker/asColorPicker.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('tema/plugins/jquery-multi-select/multi-select.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('tema/plugins/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('tema/plugins/sweet-alert/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />

<!-- Responsive and DataTables -->
<link href="{{ asset('tema/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('tema/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('tema/plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />

<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />

@endsection

@section('content')
<div class="page-head">
    <h4 class="mt-2 mb-2">Riwayat Pendaftaran</h4>
</div>
<div class="row">
    <div class="col-lg-12 col-sm-12">
        <div class="card m-b-30">
            <div class="card-body table-responsive">

                <div class="text-left">
                    <!-- <a class="btn btn-success" href="{{ route('registration.create') }}">Tambah</a> -->

                </div>
                <input type="date" name="date1" id="date1" value="{{ date('Y-m-01') }}" class="form-control">
                <input type="date" name="date2" id="date2" value="{{ date('Y-m-t') }}" class="form-control">
                <br>
                <table class="table table-hover" id="tabel">
                    <thead>
                        <th>No</th>
                        <th>Tanggal Periksa</th>
                        <th>Kode Periksa</th>
                        <th>No RM</th>
                        <th>Nama Pasien</th>
                        <th>Nama Dokter</th>
                        <th class="text-center">Aksi</th>
                    </thead>
                    <tbody>
                     @if($registrations->count() > 0)

                        @foreach($registrations as $registration)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $registration->check_date }}</td>
                                <td>{{ $registration->no_check }}</td>
                                <td>{{ $registration->no_rm }}</td>
                                <td>{{ $registration->patient->nm_patient }}</td>
                                <td>{{ $registration->doctor->nm_doctor }}</td>
                                <td class="text-center">
                                    <a href="{{ route('registration.open', [ 'id'=>$registration->id ]) }}" class="btn btn-xs btn-danger">
                                        Batal
                                    </a>

                                </td>
                            </tr>
                        @endforeach
                     @else
                        <tr>
                            <th colspan='7' class='text-center'>Tidak Ada Pendaftaran</th>
                        </tr>
                     @endif

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade"  tabindex="-1" id="modal-obat">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Pemberian Obat</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <input type="text" class="form-control ml-2" id="form-cari" placeholder="">
                    </div>

                    <button type="submit" class="btn btn-success ml-2" id='cari'>Search</button>
                </form>
                <input type="hidden" name="kode_periksa" id="" class="kode_periksa">
                <div style="height:350px;overflow-y: scroll;">
                    <table class="table table-hover tabel-obat" >
                        <thead>
                            <th>#</th>
                            <th>Obat</th>
                            <th>Jml</th>
                            <th>Aturan Pakai</th>
                        </thead>
                        <tbody id='data-obat'>


                        </tbody>
                    </table>
                </div>

            </div>
            <div class="modal-footer">
                <button id="simpan" type="button" class="btn btn-primary" >Save</button><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade"  tabindex="-1" id="modal-diagnosa">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Diagnosa Pasien</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form role="form" method="post" action="{{ route('patient_diagnosis.store') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <h6 class="light-dark mb-2">Diagnosa</h6>
                    <input type="hidden" name="kode_periksa" id="" class="kode_periksa">
                    <select multiple="multiple" class="multi_select_d" id="" name="diagnosa[]">

                    </select>
                    <br>
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <button type="submit" class="btn btn-success btn-md">Save</button>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script src="{{ asset('tema/plugins/timepicker/moment.js') }}"></script>
<script src="{{ asset('tema/plugins/clockpicker/jquery-clockpicker.min.js') }}"></script>
<script src="{{ asset('tema/plugins/tagsinput/jquery.tagsinput.min.js') }}"></script>
<script src="{{ asset('tema/plugins/switchery/switchery.min.js') }}"></script>
<script src="{{ asset('tema/plugins/toggles/toggles.min.js') }}"></script>
<script src="{{ asset('tema/plugins/timepicker/tempusdominus-bootstrap-4.js') }}"></script>
<script src="{{ asset('tema/plugins/timepicker/bootstrap-material-datetimepicker.js') }}"></script>
<!--colorpcker-->
<script src="{{ asset('tema/plugins/colorpicker/jquery-asColor.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/colorpicker/jquery-asGradient.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/colorpicker/jquery-asColorPicker.min.js') }}" type="text/javascript"></script>

<script src="{{ asset('tema/plugins/jquery-multi-select/jquery.multi-select.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/jquery-multi-select/jquery.quicksearch.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/bootstrap-inputmask/bootstrap-inputmask.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/bootstrap-select/bootstrap-select.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/spinner/spinner.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/select2/select2.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/pages/jquery.form-advance.init.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/sweet-alert/sweetalert2.min.js') }}"></script>

<!-- Responsive and datatable js -->
<script src="{{ asset('tema/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('tema/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('tema/plugins/datatables/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('tema/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>

<script>
  $(document).ready(function() {
    var url = "{{ url('/') }}";
    let data_obat = [];

    var table = $('#tabel').DataTable({
            "order": [[ 0, "asc" ]],
            "ordering": true,
            "dom": 'Bfrtip',
        "buttons": [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]

        });

        $.fn.dataTable.ext.search.push(
            function(settings, data, dataIndex) {
              var min = $('#date1').val();
              var max = $('#date2').val();

              var createdAt = data[1];  // -> rubah angka 4 sesuai posisi tanggal pada tabelmu, dimulai dari angka 0
              console.log(min+' '+max)
              if (
                (min == "" || max == "") ||
                (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
              ) {
                return true;
              }
              return false;
            }
        );

        table.draw();

        $('#date1, #date2').change(function() {
            table.draw();
        });
      });
</script>
@endsection