@extends('base.layout')

@section('content')
<div class="wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-9">
        <div class="card-box ribbon-box">
          <div class="ribbon ribbon-danger">Log Book Menu</div>
          <p class="m-b-0"></p>
          <div id="divawal"><div class="box-body"><div id='gridk1'></div></div></div>
          <div id="divpermission">
            <div class="box-body">
              <div class="form-group">
                <label>Add Sub Menu</label>
                <div class="row">
                  <div class="col-lg-2">
                    <button class="btn btn-white btn-danger btn-round btn-block" id="btnkembali"><i class="ace-icon fa fa-arrow-left bigger-120 red"></i>Back</button>
                  </div>
                  <div class="col-lg-4">
                    <input type="text" id="set_kelompok" class="form-control" disabled="disable">
                    <input type="hidden" id="set_kode" class="form-control" disabled="disable">
                  </div> 
                  <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" id="set_penyakit" class="form-control" Placeholder="Write Disease Name to Add New">
                        <div class="input-group-btn">
                          <button type="button" id="btnaddnewrules" class="btn btn-danger no-border btn-sm"><i class="ace-icon fa fa-check icon-on-right bigger-110"></i></button>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id='griddetail'></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3">
        <div class="card-box ribbon-box">
          <div class="ribbon ribbon-primary">Control Panel</div>
          <p class="m-b-0"></p>
          <button type="button" class="btn btn-custom waves-light waves-effect" id="btnaddnewstase">Add New Stase</button>
          <br><br>
          <div id="message"></div>
        </div>
        <div class="card-box ribbon-box">
          <div class="ribbon ribbon-danger">History</div>
          <p class="m-b-0"></p>
          <br><br>
          @if(isset($riwayat) && !empty($riwayat))
            <table class="table table-striped table-hover">
              <thead><tr><th>Action</th><th>PIC</th><th>Date</th></tr></thead>
              <tbody>
                @foreach($riwayat as $pengumuman)
                  <tr><td>{!! $pengumuman['jawaban'] !!}</td><td>{!! $pengumuman['inputor'] !!}</td><td>{!! $pengumuman['created_at'] !!}</td></tr>
                @endforeach
              </tbody>
            </table>
          @endif
        </div>
      </div>
    </div>
  </div>
</div>
<div id="modaladdstase" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Add Stase</h4>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label>Code</label>
        <input type="text" id="id_kodene" class="form-control">
      </div>
      <div class="form-group">
        <label>Full Stase Name</label>
        <input type="text" id="id_stase" class="form-control">
      </div>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-warning pull-right" id="btnaddstase">Add Stase</button>
    <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>	
    </div>
  </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="modalhapusstase" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Del Stase </h4>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label>Stase Name</label>
        <input type="text" id="del_nama" name="del_nama" class="form-control" disabled="disable">
      </div>
      <div class="form-group">
        <label>Are you sure.? if you do write "SURE" at this form</label>
        <input type="text" id="del_verifikasi" name="del_verifikasi" class="form-control">			  
      </div>
      <div class="center">
        <p><strong><font color=red>If You delete this, all dieases in this group will be deleted to</font></strong></p>
      </div>
    </div>
    <div class="modal-footer">
      <input type="hidden" class="form-control" id="del_idstase">
      <button type="button" class="btn btn-success pull-right" id="btndeletestase">DEL</button>
      <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>	
    </div>
  </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="modalhapusmenu" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Del Disease</h4>
      </div>
    <div class="modal-body">
      <div class="form-group">
        <label>Disease Name</label>
        <input type="text" id="delmenu_nama" name="delmenu_nama" class="form-control" disabled="disable">
      </div>
      <div class="form-group">
        <label>Are you sure.? if you do write "SURE" at this form</label>
        <input type="text" id="delmenu_verifikasi" name="delmenu_verifikasi" class="form-control">			  
      </div>
    </div>
    <div class="modal-footer">
    <input type="hidden" class="form-control" id="del_idpenyakit">
    <button type="button" class="btn btn-success pull-right" id="btnhapusmenu">HAPUS</button>
    <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>	
    </div>
  </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="modaleditkuota" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Edit Disease</h4>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label>Disease Name</label>
        <input type="text" id="edit_penyakit" class="form-control">
      </div>
      <div class="form-group">
        <label>Target Senior</label>
        <input type="text" id="edit_target" class="form-control">			  
      </div>
      <div class="form-group">
        <label>Kuota Senior (1 Patient For x PPDS)</label>
        <input type="text" id="edit_kuota" class="form-control">			  
      </div>
      <div class="form-group">
        <label>Target Middle</label>
        <input type="text" id="edit_target3" class="form-control">			  
      </div>
      <div class="form-group">
        <label>Kuota Middle (1 Patient For x PPDS)</label>
        <input type="text" id="edit_kuota3" class="form-control">			  
      </div>
      <div class="form-group">
        <label>Target Junior</label>
        <input type="text" id="edit_target2" class="form-control">			  
      </div>
      <div class="form-group">
        <label>Kuota Junior (1 Patient For x PPDS)</label>
        <input type="text" id="edit_kuota2" class="form-control">			  
      </div>
    </div>
    <div class="modal-footer">
      <input type="hidden" class="form-control" id="edit_idne">
      <button type="button" class="btn btn-success pull-right" id="btneditdata">Save</button>
      <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>	
    </div>
  </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<input type="hidden" id="getuserid" value="{{ Session('id') }}">
<input type="hidden" id="getkelompok" value="{{ Session('previlage') }}">

@endsection

@push('script')
<script type="text/javascript">
    function opendatalogbook( jQuery ){
      var set01=document.getElementById('getuserid').value;
      var set02='Examination';
      var set03=document.getElementById('getkelompok').value;
      var sourcedatalogbook = {
        datatype: "json",
        datafields: [
          { name: 'id'},
          { name: 'kode',type: 'text'},
          { name: 'kepanjangan',type: 'text'},
        ],
        type: 'POST',
        data: {val01:set01, val02:set02, val03:set03, _token: "{{ csrf_token() }}"},
        url: "logbook/datalistlogbook"
      };
      var jsondatalogbook = new $.jqx.dataAdapter(sourcedatalogbook);
      $("#gridk1").jqxGrid({
        width: '100%',
        enablebrowserselection: true,
        pageable: true,
        autoheight: true,
        filterable: true,
        filtermode: 'excel',
        source: jsondatalogbook,
        columnsresize: true,
        theme: "energyblue",
        selectionmode: 'multiplecellsextended',
        columns: [
          { text: 'Code', datafield: 'kode', width: '20%', align: 'center' },
          { text: 'Full Name', datafield: 'kepanjangan', width: '60%', cellsalign: 'left', align: 'center' },
          { text: 'Disease List', columntype: 'button', width: '10%', align: 'center', cellsrenderer: function () {
            return "View";
            }, buttonclick: function (row) {
              editrow = row;	
              var offset 		  = $("#gridk1").offset();
              var dataRecord 	= $("#gridk1").jqxGrid('getrowdata', editrow);
              var val01		    = dataRecord.kode;
              var val02		    = '0';
              $("#set_kelompok").val(dataRecord.kepanjangan);
		        	$("#set_kode").val(dataRecord.kode);
              var source = {
                datatype: "json",
                datafields: [
                  { name: 'id2'},
                  { name: 'kuota',type: 'text'},
                  { name: 'target',type: 'text'},
                  { name: 'kuota2',type: 'text'},
                  { name: 'target2',type: 'text'},
                  { name: 'kuota3',type: 'text'},
                  { name: 'target3',type: 'text'},
                  { name: 'kode2',type: 'text'},
                  { name: 'kepanjangan2',type: 'text'},
                ],
                type: 'POST',
                data: {set01:val01, set02:val02, _token: "{{ csrf_token() }}"},
                url: "logbook/jsonviewlistlogbookppds"
              };
              $('#divpermission').show();
              $('#divawal').hide();
              var dataAdapter = new $.jqx.dataAdapter(source);
              $("#griddetail").jqxGrid({
                width: '100%',
                enablebrowserselection: true,
                filterable: true,
                filtermode: 'excel',
                source: dataAdapter,
                columnsresize: true,
                theme: "orange",
                sortable: true,		
                autoheight: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Edit', columntype: 'button', width: '7%', align: 'center', cellsrenderer: function () {
                      return "Edit";
                      }, buttonclick: function (row) {
                        editrow = row;	
                        var offset 		= $("#griddetail").offset();
                        var dataRecord 	= $("#griddetail").jqxGrid('getrowdata', editrow);
                        var goook		= dataRecord.id;
                        $("#edit_idne").val(dataRecord.id2);
                        $("#edit_penyakit").val(dataRecord.kepanjangan2);
                        $("#edit_kuota").val(dataRecord.kuota);
                        $("#edit_target").val(dataRecord.target);
                        $("#edit_kuota2").val(dataRecord.kuota2);
                        $("#edit_target2").val(dataRecord.target2);
                        $("#edit_kuota3").val(dataRecord.kuota3);
                        $("#edit_target3").val(dataRecord.target3);
                        $("#modaleditkuota").modal('show');
                      }
                  },
                  { text: 'Stase', datafield: 'kode2', width: '7%', cellsalign: 'left', align: 'center' },
                  { text: 'Full Disease Name', datafield: 'kepanjangan2', width: '37%', cellsalign: 'left', align: 'center' },
                  { text: 'Target', columngroup: 'senior', datafield: 'target', width: '7%', align: 'center' },
                  { text: 'Kuota', columngroup: 'senior', datafield: 'kuota', width: '7%', align: 'center' },
                  { text: 'Target', columngroup: 'middle', datafield: 'target3', width: '7%', align: 'center' },
                  { text: 'Kuota', columngroup: 'middle', datafield: 'kuota3', width: '7%', align: 'center' },
                  { text: 'Target', columngroup: 'junior', datafield: 'target2', width: '7%', align: 'center' },
                  { text: 'Kuota', columngroup: 'junior', datafield: 'kuota2', width: '7%', align: 'center' },
                  { text: 'Del', columntype: 'button', width: '7%', align: 'center', cellsrenderer: function () {
                      return "Del";
                      }, buttonclick: function (row) {
                        editrow = row;	
                        var offset 		= $("#griddetail").offset();
                        var dataRecord 	= $("#griddetail").jqxGrid('getrowdata', editrow);
                        var goook		= dataRecord.id;
                        $("#delmenu_nama").val(dataRecord.kepanjangan2);
                        $("#del_idpenyakit").val(dataRecord.id2);
                        $("#modalhapusmenu").modal('show');
                      }
                  },
                ],
                columngroups: 
                [
                  { text: 'Senior', align: 'center', name: 'senior' },
				          { text: 'Middle', align: 'center', name: 'middle' },
                  { text: 'Junior', align: 'center', name: 'junior' }
                ]
              });
            }
          },
          { text: 'DEL', columntype: 'button', width: '8%', align: 'center', cellsrenderer: function () {
              return "DEL";
              }, buttonclick: function (row) {
                editrow = row;	
                var offset 		= $("#gridk1").offset();
                var dataRecord 	= $("#gridk1").jqxGrid('getrowdata', editrow);
                var goook		= dataRecord.id;
                $("#del_nama").val(dataRecord.kepanjangan);
                $("#del_idstase").val(dataRecord.id);
                $("#modalhapusstase").modal('show');
              }
          },
        ],
      });
    }
    $(window).on('load', function () {
      opendatalogbook();
    });
    $(document).ready(function() {
		    $('#divpermission').hide();
        $("#btnkembali").click(function(){
          $('#divpermission').hide();
          $('#divawal').show();
        });
        
        $("#btneditdata").click(function(){
            var val01=document.getElementById('edit_idne').value;
            var val02=document.getElementById('edit_kuota').value;
            var val03=document.getElementById('set_kelompok').value;
            var val04=document.getElementById('edit_target').value;
            var val05=document.getElementById('edit_penyakit').value;
            var val06=document.getElementById('edit_kuota2').value;
            var val07=document.getElementById('edit_target2').value;
            var val08=document.getElementById('edit_kuota3').value;
            var val09=document.getElementById('edit_target3').value;
            $.post('logbook/exmenuslogbook', { _token: "{{ csrf_token() }}", set01: val01, set02: val02, set03: val03, set04: val04, set05: val05, set06: val06, set07: val07, set08: val08, set09: val09 },
            function(data){
                $("#modaleditkuota").modal('hide');
                $("#griddetail").jqxGrid('updatebounddata');			
                $.toast({
                    heading: data.status,
                    text: data.message,
                    position: 'top-right',
                    loaderBg: data.warna,
                    icon: data.icon,
                    hideAfter: 5000,
                    stack: 1
                });
                return false;
            });
        });
        $("#btnhapusmenu").click(function(){
            var val01=document.getElementById('delmenu_verifikasi').value;
            var val02=document.getElementById('del_idpenyakit').value;	
            var val03='delpenyakit';
            var val04='-';
            $.post('logbook/exmenuslogbook', { _token: "{{ csrf_token() }}", set01: val01, set02: val02, set03: val03, set04: val04, set05: '', set06: '', set07: '', set08: '', set09: '' },
            function(data){
                $("#modalhapusmenu").modal('hide');
                $("#griddetail").jqxGrid('updatebounddata');			
                $.toast({
                    heading: data.status,
                    text: data.message,
                    position: 'top-right',
                    loaderBg: data.warna,
                    icon: data.icon,
                    hideAfter: 5000,
                    stack: 1
                });
                return false;
            });
        });
        $("#btndeletestase").click(function(){
            var val01=document.getElementById('del_verifikasi').value;
            var val02=document.getElementById('del_idstase').value;	
            var val03='delstase';
            var val04='-';
            $.post('logbook/exmenuslogbook', { _token: "{{ csrf_token() }}", set01: val01, set02: val02, set03: val03, set04: val04, set05: '', set06: '', set07: '', set08: '', set09: '' },
            function(data){
                $("#modalhapusstase").modal('hide');
                $("#gridk1").jqxGrid('updatebounddata');			
                $.toast({
                    heading: data.status,
                    text: data.message,
                    position: 'top-right',
                    loaderBg: data.warna,
                    icon: data.icon,
                    hideAfter: 5000,
                    stack: 1
                });
                return false;
            });	
        });	
        $("#btnaddstase").click(function(){
            var val01=document.getElementById('id_kodene').value;
            var val02=document.getElementById('id_stase').value;	
            var val03='stase';
            var val04='-';
            $.post('logbook/exmenuslogbook', { _token: "{{ csrf_token() }}", set01: val01, set02: val02, set03: val03, set04: val04, set05: '', set06: '', set07: '', set08: '', set09: '' },
            function(data){
                $("#modaladdstase").modal('hide');
                $("#gridk1").jqxGrid('updatebounddata');			
                $.toast({
                    heading: data.status,
                    text: data.message,
                    position: 'top-right',
                    loaderBg: data.warna,
                    icon: data.icon,
                    hideAfter: 5000,
                    stack: 1
                });
                return false;
            });	
        });	
        $("#btnaddnewrules").click(function(){
            var val02=document.getElementById('set_penyakit').value;	
            $("#edit_penyakit").val(val02);
		        $("#edit_idne").val('new');
		        $("#modaleditkuota").modal('show');
        });
        $("#btnaddnewstase").click(function(){
            $("#modaladdstase").modal('show');
        });	
    });
</script>
@endpush