@extends("LaravelVueAdmin.layouts.app")
@section('has_left','has-detached-left')
@section("contentheader_title", "Detail Monitoring")
@section("section", "Detail")
@section("sub_section", "Monitoring")
@section("htmlheader_title", "Detail Monitoring")
@section("headerElems")
<ul class="fab-menu fab-menu-absolute fab-menu-top-right affix-top" data-fab-toggle="click" id="fab-menu-affixed-right">
	<li>
		<a class="fab-menu-btn btn bg-primary-300 btn-float btn-rounded btn-icon legitRipple">
			<i class="fab-icon-open icon-grid3"></i>
			<i class="fab-icon-close icon-cross2"></i>
		</a>
		<ul class="fab-menu-inner">
			<li>
				<div data-fab-label="Tambah Monitoring">
					<a href="#" class="btn btn-default btn-rounded btn-icon btn-float legitRipple quickReply" data-toggle="modal" data-title="Tambah Monitoring"   data-target="#AddModal" >
						<i class="icon-plus2"></i>
					</a>
				</div>
			</li>
		</ul>
	</li>
</ul>
@endsection
@section("mini")
@if (count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="row ">
  <div class="col-md-12">
  <div class="col-md-4">
    <div class="panel panel-flat">
        <div class="panel-heading">
          <div class="heading-elements">
            <ul class="icons-list">
              <li><a data-action="collapse"></a></li>
            </ul>
          </div>
        </div>
        <div class="table-responsive">
        <table id="example1" class="table table-xxs datatable-ajax">
          <thead>
            <tr>
              <th>ID</th>
              <th>Kategori</th>
              <!-- <th>Last Update</th> -->
                <!-- <th>PIC</th> -->
              <!-- <th>Periode</th> -->
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
    <div class="col-md-8">
<!-- Ajax sourced data -->
    <div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title text-center" id="title">

      </h5>
			<div class="heading-elements">
				<ul class="icons-list">
					<!-- <li><a data-action="reload"></a></li> -->
					<li><a data-action="collapse"></a></li>
				</ul>
			</div>
      <div id="btn-tambah">

      </div>
		</div>
    <div class="table-responsive">
      <table id="myTable" class="table datatable-responsive-control-right table-xxs">
        <thead id="headers">
          <tr id="row">
            <th>&nbsp;</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
						<th>&nbsp;</th>
            <th>&nbsp;</th>
          </tr>
        </thead>
      </table>
    </div>

		@hasSection('description')
		<div class="panel-body">
			@yield('description')
		</div>
		@endif
  </div>
</div>
</div>
</div>

@endsection
@section("main-content")
@lv_access("Monitoring_ds", "create")
<div class="modal fade" id="AddModal" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<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>
				<h4 class="modal-title" id="myModalLabel">Tambah Stok Monitor</h4>
			</div>
			{!! Form::open(['action' => 'LaravelVueAdmin\Monitoring_dsController@store', 'id' => 'monitoring_d-add-form']) !!}
			<div class="modal-body">
				<div class="box-body">
					<input class="form-control" type="hidden" id="monitor_id" name="monitor_id"></input>
          <table width="500px;">
            <tr>
                <td><label for="name">Nama Kategori</label></td>
                <td>:</td>
                <td><span id="name" class="label label-primary"></span></td>
            </tr>
            <tr>
              <td><label for="pic">PIC</label></td>
              <td>:</td>
              <td><span id="pic"  class="label label-primary"></span></td>
            </tr>
            <tr>
              <td><label for="periode">Periode</label></td>
              <td>:</td>
              <td><span id="periode" class="label label-primary"></span></td>
            </tr>
          </table>

					<div id="value">
          </div>
					<!-- @lv_input($detail, 'monitor_id') -->
					<div class="form-group"><label for="note">Catatan :</label><textarea class="form-control" placeholder="Enter Catatan" cols="30" rows="6" name="note"></textarea></div>
          <div class="form-group">
						<label for="doc" style="display:block;">Attachment :</label>
						<input class="form-control" placeholder="Enter Attachment" name="doc" type="hidden" value="[]">
						<div class="uploaded_files"></div>
						<a class="btn btn-default btn_upload_files legitRipple" file_type="files" selecter="doc" style="margin-top:5px;">Upload <i class="icon-upload"></i>
						</a>
					</div>
					@lv_input($detail, 'created_by')
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				{!! Form::submit( 'Submit', ['class'=>'btn btn-success']) !!}
			</div>
			{!! Form::close() !!}
		</div>
	</div>
</div>
@endlv_access

@lv_access("Monitoring_ds", "edit")
<div class="modal fade" id="EditModal" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<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>
				<h4 class="modal-title" id="myModalLabel">Edit Stok Monitor</h4>
			</div>
      <form id="edit_monitoring" mehtod="POST" enctype="multipart/form-data" action="{{url(config('LaravelVueAdmin.adminRoute') . '/updates')}}">
			<div class="modal-body">
				<div class="box-body">
          <input class="form-control" type="hidden" id="monitor_id-edit" name="monitor_id"></input>
          <input class="form-control" type="hidden" id="id_edit" name="id"></input>
					<input class="form-control" type="hidden" name="_token" value="{{csrf_token()}}"></input>
          <table width="500px;">
            <tr>
                <td><label for="name">Nama Kategori</label></td>
                <td>:</td>
                <td><span id="name-edit" class="label label-primary"></span></td>
            </tr>
            <tr>
              <td><label for="pic">PIC</label></td>
              <td>:</td>
              <td><span id="pic-edit"  class="label label-primary"></span></td>
            </tr>
            <tr>
              <td><label for="periode-edit">Periode</label></td>
              <td>:</td>
              <td><span id="periode-edit" class="label label-primary"></span></td>
            </tr>
          </table>

					<div id="value-edit">
          </div>
          <div id="value-doc">
          </div>

				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				{!! Form::submit( 'Update', ['class'=>'btn btn-success']) !!}
			</div>
			{!! Form::close() !!}
		</div>
	</div>
</div>
@endlv_access

@endsection

@push('scripts')
<script src="{{ asset('LaravelVueAdmin/assets/js/plugins/tables/datatables/datatables.min.js') }}"></script>
<script src="{{ asset('LaravelVueAdmin/assets/js/pages/components_popups.js') }}"></script>
<script type="text/javascript" src="{{ asset('LaravelVueAdmin/assets/js/core/libraries/jquery_ui/core.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('/LaravelVueAdmin/assets/js/plugins/notifications/sweet_alert.min.js') }}"></script>

<script>
$(function(){
	$('.modal').on('shown.bs.modal', function() {
		$(this).find('[autofocus]').focus();
	});
	$("input[name='name']").attr('autofocus','autofocus');
});

$(function () {
  if (! $.fn.dataTable.isDataTable( '#example1' ) )
  {

    var doms="";
    var $rows = "";
    $.ajax({
        url:"{{ url(config('LaravelVueAdmin.adminRoute') . '/monitoring_d_dt_ajax') }}",
        type:"GET",
        success:function(res){
          rows = res.recordsTotal;
        }
    });

    if($rows > 50){
      doms =  '<"datatable-scroll"t><"datatable-footer"ip>';
    } else {
      doms = '<"datatable-scroll"t><"datatable-footer">';
    }


	var tabel = $("#example1").DataTable({
    processing: true,
    serverSide: true,
    autoWidth: false,
    responsive: true,
    ajax: "{{ url(config('LaravelVueAdmin.adminRoute') . '/monitoring_d_dt_ajax') }}",
    // dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
		dom:   doms,
    lengthMenu: [[50, 100, 150, -1], [50, 100, 150, "Semua"]],
    iDisplayLength: 50,
		language: {
			"url": "{{ asset('LaravelVueAdmin/assets/plugins/datatables/Indonesian.json') }}"
		},

    order: [[1, 'asc']],
    createdRow: function( row, data, dataIndex ) {
				$(row).addClass( 'row-'+data[0] );
				$(row).addClass('Rowtooltip');
				$(row).attr('title','PIC : '+ data[3]+' - '+'Periode : '+ data[4]);
				$(row).attr('data-toggle','tooltip');
		    $(row).css('cursor','pointer');
		},
				"fnDrawCallback": function (oSettings) {
					 $('#example1 tbody tr').each(function () {
						 $('[data-popup="tooltip"]').tooltip();
						 $('[data-popup="popover"]').popover();
					 });
				},
				drawCallback: function () {
						$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
						 $('[data-popup="tooltip"]').tooltip();
							$('[data-popup="popover"]').popover();
				},
				preDrawCallback: function() {
						$(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
						$('[data-popup="tooltip"]').tooltip();
						$('[data-popup="popover"]').popover();
				},
				columnDefs: [
						{
								"targets": [ 0 ],
								"visible": false,
								"searchable": false
						},
            {
                 "targets": [1],
                 render: function ( data, type, full, meta ) {
                   var  render='';
                        render += '<a href="#" class="monitorings" data-id="'+full[0]+'" data-url="