@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">Data 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-center">
                    <a class="btn btn-outline-success" href="{{ route('registration.create') }}"><i class="fa fa-plus"></i> Tambah</a>

                </div>
                <br>
                <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.edit', [ 'id'=>$registration->id ]) }}" class="btn btn-xs btn-info">
                                        Ubah
                                    </a> -->
                                    <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        Aksi
                                    </button>
                                    <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
                                        <a class="dropdown-item diagnosa" href="#" data-id='{{ $registration->no_check }}'>Diagnosa Pasien</a>
                                        <a class="dropdown-item obat" data-id='{{ $registration->no_check }}' href="#">Pemberian Obat</a>
                                        <a class="dropdown-item close-periksa" data-id='{{ $registration->id }}' href="#">Sudah Periksa</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="{{ route('registration.delete', [ 'id'=>$registration->id ]) }}">Hapus</a>
                                    </div>

                                </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://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />

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

    $('#import').click(function(){
        $('#my-modal').modal('show');
    });

    $("#tabel").on('click', '.obat', function() {
        var kode_periksa = $(this).attr('data-id');

        $('#modal-obat').modal('show');
        $('.kode_periksa').val(kode_periksa);
        $.ajax({
            url: url+'/api/beri_obat',
            dataType: 'json',
            type: 'post',
            //contentType: 'application/x-www-form-urlencoded',
            data: {
                kode_periksa : kode_periksa
            },
            beforeSend: function(data){

            },
            success: function( data, textStatus, jQxhr ){
                data_obat = data.data;
                console.log(data_obat);
                load_obat(data_obat);
            },
            error: function( jqXhr, textStatus, errorThrown ){
                alert('Ada kesalahan di server');
                console.log( errorThrown );
            }
        });
    });

    function load_obat(data){
        var html='';
        $.each(data, function (key, val) {
            var cek = val.checkbox==true || val.checkbox=='true' ? 'checked' : '';

// <input type="text" class="form-control form-control-sm use" value="'+val.use+'">
                html += '<tr>';
                html += '<td style="display:none">'+val.id+'</td>';
                html += '<td><input type="checkbox" value='+val.id+' class="cek" '+cek+'></td>';
                html += '<td>'+val.nm_medicine+'</td>';
                html += '<td class="jml"><input style="width:100px" value="'+val.jml+'" type="number" class="form-control form-control-sm qty"></td>';
                html += '<td><select class="form-control selectpicker use" id="select-country" data-live-search="true">';
                html += '<option data-tokens="'+val.use+'">'+val.use+'</option>';
                $.each(data_aturan_pakai, function (k,v) {
                html += '<option value="'+v+'">'+v+'</option>';
                });
                html += '</select></td>';
                html += '</tr>';

        });
        
        $('#data-obat').html(html);
        $('.selectpicker').selectpicker();

    }

    $('#cari').click(function(){
        event.preventDefault();
        var cari = $('#form-cari').val();

        let cari_data = data_obat;
        //console.log(data_obat);
        let temp = [];

        $.each(cari_data, function (key, val) {
            if(!val.nm_medicine.search(cari) || val.checkbox==true ){
                console.log(val.checkbox);
                temp.push({
                    id : val.id,
                    nm_medicine: val.nm_medicine,
                    use: val.use,
                    checkbox: val.checkbox,
                    jml: val.jml
                });
            }
        });

        var t = temp.sort((a) => (a.checkbox === false) ? 1 : -1 );

        load_obat(t);

    });

    $(".tabel-obat").on('input', '.jml', function(){
      var currentRow=$(this).closest("tr");
      currentRow.find("td:eq(1) .cek").prop('checked', false);
    });

    $(".tabel-obat").on('change', '.cek', function() {
        var currentRow=$(this).closest("tr");

        var id=currentRow.find("td:eq(0)").html();
        var jml=parseFloat(currentRow.find("td:eq(3) .qty").val()).toFixed(2);

        var aturan_pakai=currentRow.find("td:eq(4) .use button span").html();
        //console.log(aturan_pakai);
        if(jml<=0){
            alert('Jumlah 0');
            $(this).prop('checked', false);
            return false;
        }

        if(($(this).is(':checked'))){
            var cek = $(this).is(':checked');
            cek===true ? true : false;
            const newArray = data_obat.map(obj => {
              if (obj.id == id) {
                return {...obj, checkbox: cek, jml: jml, use: aturan_pakai };
              }

              return obj;
            });

            // console.log(newArray);

            // load_data(newArray);

            data_obat = newArray;
        }else{
            const newArray = data_obat.map(obj => {
              if (obj.id == id) {
                return {...obj, checkbox: false, jml: 0.00 };
              }

              return obj;
            });

            console.log(newArray);

            data_obat = newArray;
        }



    });

     $('#simpan').click(function(){
        event.preventDefault();

        kode_periksa = $('.kode_periksa').val();

        let array = [];
        $.each(data_obat, function (key, val) {
            if(val.checkbox===true || val.checkbox==='true' ){
                array.push({
                    kode_periksa: kode_periksa,
                    id : val.id,
                    nm_medicine: val.nm_medicine,
                    use: val.use,
                    jml: val.jml
                });
            }
        });

        $.ajax({
            url: url+'/api/beri_obat_pasien',
            dataType: 'json',
            type: 'post',
            //contentType: 'application/x-www-form-urlencoded',
            data: {
                kode_periksa: kode_periksa,
                beri_obat : array
            },
            beforeSend: function(data){
                console.log(array);


            },
            success: function( data, textStatus, jQxhr ){
                data_obat = data;
                //console.log(data_obat);

                if (data_obat != null) {
                    swal('Success!', 'Pemberian obat berhasil disimpan', 'success').then(function(){
                        location.reload();
                    });
                }else{
                    swal('Warning!', 'Pemberian obat kosong', 'warning').then(function(){
                        //location.reload();
                    });
                }

            },
            error: function( jqXhr, textStatus, errorThrown ){
                alert('Ada kesalahan di server');
                console.log( errorThrown );
            }
        });

     });

    $("#tabel").on('click', '.close-periksa', function() {
        var kode_periksa = $(this).attr('data-id');

        $.ajax({
            url: url+'/api/close_periksa',
            dataType: 'json',
            type: 'post',
            //contentType: 'application/x-www-form-urlencoded',
            data: {
                kode_periksa: kode_periksa,
            },
            beforeSend: function(data){

            },
            success: function( data, textStatus, jQxhr ){
                console.log(data);

                if (data.code == 200) {
                    swal('Success!', 'Pendaftaran diclose dan reminder obat sudah di set', 'success').then(function(){

                    }).then(function(){
                      location.reload();
                    });
                }else{
                    swal('Warning!', data.message, 'warning').then(function(){
                    }).then(function(){
                      location.reload();
                    });
                }


            },
            error: function( jqXhr, textStatus, errorThrown ){
                alert('Ada kesalahan di server');
                console.log(jqXhr.responseText);
            }
        });
    });
    $("#tabel").on('click', '.diagnosa', function() {
        var kode_periksa = $(this).attr('data-id');

        //return false;
        $('#modal-diagnosa').modal('show');
        $('.kode_periksa').val(kode_periksa);


        $.ajax({
            url: url+'/api/diagnosa_pasien',
            dataType: 'json',
            type: 'post',
            //contentType: 'application/x-www-form-urlencoded',
            data: {
                kode_periksa : kode_periksa
            },
            beforeSend: function(data){
                $('.multi_select_d').empty();

                //$('.multi_select_d').multiSelect('deselect_all');
            },
            success: function( data, textStatus, jQxhr ){
                let diagnosa = data.data;
                var html = '';
                $.each(diagnosa, function (key, val) {
                    //console.log(val.no_check);
                    var no_check = val.no_check==null ? '' : 'selected';
                    html += "<option value='"+val.code_diagnosis+"' "+no_check+">"+val.code_diagnosis+" - "+val.nm_diagnosis+"</option>";
                });

                $('.multi_select_d').html(html);

                $('.multi_select_d').multiSelect({
                    selectableHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
                    selectionHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
                    afterInit: function (ms) {
                        var that = this,
                            $selectableSearch = that.$selectableUl.prev(),
                            $selectionSearch = that.$selectionUl.prev(),
                            selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                            selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

                        that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                            .on('keydown', function (e) {
                                if (e.which === 40) {
                                    that.$selectableUl.focus();
                                    return false;
                                }
                            });

                        that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                            .on('keydown', function (e) {
                                if (e.which == 40) {
                                    that.$selectionUl.focus();
                                    return false;
                                }
                            });
                    },
                    afterSelect: function () {
                        this.qs1.cache();
                        this.qs2.cache();
                    },
                    afterDeselect: function () {
                        this.qs1.cache();
                        this.qs2.cache();
                    }
                });
                console.log($('.multi_select_d').html());
            },
            error: function( jqXhr, textStatus, errorThrown ){
                alert('Ada kesalahan di server');
                console.log( errorThrown );
            }
        });

    });


    let data_aturan_pakai = [
    "1 x 1 SESUDAH MAKAN",
"1 X 1 SIANG",
"1x1 malam",
"1x1 pagi",
"1X1 SEBELUM MAKAN",
"1X1 SENDOK TAKAR",
"1X1 SESUDAH MAKAN",
"1x1/2 sesudah makan",
"1x1/4 sesudah makan",
"2 hari sekali 1 tab",
"2 X 1 SESUDAH MAKAN",
"2 x 1 SEBELUM MAKAN",
"2 X 1/2 SENDOK TEH",
"2 x sehari dioleskan tipis",
"2x1 SEBELUM MAKAN",
"2x1 sesudah makan",
"2x1/2 sebelum makan",
"2x1/2 sendok takar",
"2x1/2 sesudah makan",
"2x2 sesudah makan",
"3 x 1 sendok takar",
"3 x 1 1/2 sendok takar",
"3 X 1 BILA PERLU",
"3 x 1 sebelum makan",
"3 x 1 sendok makan",
"3 X 1 SENDOK TEH",
"3 x 1 sesudah makan",
"3 X 1 TETES MATA KANAN KIRI",
"3 x 1 tetes mata kiri",
"3 X 1/2 SENDOK TEH",
"3 x 12 unit",
"3 X 2 sesudah makan",
"3 X 20 UNIT",
"3 x sehari dioleskan tipis pada kulit",
"3X1 BILA BATUK",
"3x1 sebelum makan",
"3x1 sesudah makan",
"3x1 tetes mata kanan",
"3x1/2 sendok takar",
"3x2 sesudah makan",
"BILA NYERI",
"BILA PERLU",
"PAGI 1 SIANG 1",
"SIANG 1 MALAM 1",
    ]

  });
</script>

@endsection