@extends("LaravelVueAdmin.layouts.app")

@section("contentheader_title", "Monitoring")
@section("contentheader_description", "(".Auth::user()->roles->first()->display_name.")")
@section("section", "Monitoring")
@section("sub_section", "List Monitoring")
@section("htmlheader_title", "List Monitoring")

@section("headerElems")
@lv_access("Monitorings", "create")
	<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="Add Monitoring">
						<button class="btn btn-default btn-rounded btn-icon btn-float legitRipple" data-toggle="modal" data-target="#AddModal">
							<i class="icon-compose"></i>
						</button>
					</div>
				</li>
			</ul>
		</li>
	</ul>
@endlv_access
@endsection

@section("main-content")

@if (count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<!-- Ajax sourced data -->
<div class="panel panel-flat">
		<div class="panel-heading">
			<!-- h5 class="panel-title text-center">@yield("sub_section")</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>

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

		<table id="example1" class="table datatable-responsive-control-right table-xxs">
			<thead>
				<tr>
@foreach( $listing_cols as $col )
					<th>{{ $module->fields[$col]['label'] or ucfirst($col) }}</th>
@endforeach
@if($show_actions)
					<th>Actions</th>
@endif
				</tr>
			</thead>
		</table>
	</div>
		<!-- /ajax sourced data -->

@lv_access("Monitorings", "create")
<div class="modal fade nontabindex" 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">Add Monitoring</h4>
			</div>
			{!! Form::open(['action' => 'LaravelVueAdmin\MonitoringsController@store', 'id' => 'monitoring-add-form']) !!}
			<div class="modal-body">
				<div class="box-body">
                    @lv_form($module)

					{{--
					@lv_input($module, 'name')
					@lv_input($module, 'category')
					@lv_input($module, 'pic')
					@lv_input($module, 'periode')
					@lv_input($module, 'value')
					@lv_input($module, 'status')
					--}}
				</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

@endsection

@push('scripts')
<script type="text/javascript" src="{{ asset('/LaravelVueAdmin/assets/js/plugins/notifications/sweet_alert.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/LaravelVueAdmin/assets/js/pages/extra_fab.js') }}"></script>
<script src="{{ asset('LaravelVueAdmin/assets/plugins/datatables/datatables.min.js') }}"></script>
<script>
$(function(){
	$('.modal').on('shown.bs.modal', function() {
		$(this).find('[autofocus]').focus();
	});
	$("input[name='name']").attr('autofocus','autofocus');
	$(".nontabindex").removeAttr('tabindex');
});

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

	if($rows > 50){
		doms =  '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>';
	} else {
		doms =  '<"datatable-header"f><"datatable-scroll"t><"datatable-footer">';
	}
	var tabel = $("#example1").DataTable({
		processing: true,
        serverSide: true,
		autoWidth: false,
		responsive: true,
        ajax: "{{ url(config('LaravelVueAdmin.adminRoute') . '/monitoring_dt_ajax') }}",
		dom: doms,
		lengthMenu: [[50, 100, 150, -1], [50, 100, 150, "Semua"]],
		iDisplayLength: 50,
		language: {
			"url": "{{ asset('LaravelVueAdmin/assets/plugins/datatables/Indonesian.json') }}"
		},
		//Tambahan Roni JR 020218
		createdRow: function( row, data, dataIndex ) {
				$(row).addClass( 'row-'+data[0] );
		},
		columnDefs: [
			{ visible: false, targets: [0] }
			@if($show_actions),{ orderable: false, targets: [-1] }
			@else
			,{ visible: false, targets: [-1] }
			@endif],
			autoWidth: false,
			responsive: true,
	});
	$.fn.dataTable.ext.errMode = 'none';
	$('#example1').on('error.dt', function(e, settings, techNote, message) {
		(function($) {
			$('body').pgNotification({
				style: 'circle',
				message: 'Mohon <a class="alert-danger" onclick="window.location.reload(true);"><u><i class="fa fa-refresh"></i>Reload halaman</u></a>',
				position: "top-right",
				type: "danger",
				showClose: false,
				timeout: 0,
				title: 'PROSES DIHENTIKAN',
				thumbnail: '<i class="fa fa-exclamation-circle fa-4x"></i>'
			}).show();
		})(window.jQuery);
	});
	// $("#monitoring-add-form").validate({
	//
	// });

	$(document).on("click", ".hapus", function () {
	id=$(this).data('id');
	swal({
		title: "Apakah anda yakin?",
		text: "Data yang dihapus tidak dapat dikembalikan",
		type: "warning",
		showCancelButton: true,
		confirmButtonColor: "#EF5350",
		confirmButtonText: "Hapus",
		cancelButtonText: "Batal",
		closeOnConfirm: false,
		closeOnCancel: false
	},
	function(isConfirm){
		if (isConfirm) {
			$.ajax({
				url: $("#formHapus-"+id).attr('action'),
				data: $("#formHapus-"+id).serialize(),
				type: 'POST',
				dataType: 'json',
				beforeSend: function(){
						swal('Loading', 'Sedang menghapus data . . .', 'info');
				},
				success: function(res){
						if (res.result == 'success') {
								swal({
								  title: "Sukses!",
								  text: res.msg,
								  type: 'success',
								  confirmButtonColor: '#27ae60',
								  allowOutsideClick: false,
								},
								function(result){
									tabel.ajax.reload( null, false );
								});
						} else {
								swal('Error!', res.msg, 'error');
						}
				},
				error: function(errors){
						swal("Oops", errors.statusText, "error");
				}
		});
		}
		else {
			swal({
				title: "Batal",
				text: "Proses dibatalkan",
				confirmButtonColor: "#2196F3",
				type: "error"
			});
		}
	});
});
});

</script>
@endpush