@extends("LaravelVueAdmin.layouts.app")

@section("contentheader_title", "SOP")
@section("contentheader_description", "List SOP")
@section("section", "Data SOP")
@section("sub_section", "List Data SOP")
@section("htmlheader_title", "List Data SOP")

@section("headerElems")
@lv_access("Sops", "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="Tambah Kategori SOP">
					<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">
		<div class="heading-elements">
		</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>
				<th></th>
				<th>ID</th>
				<th>Judul</th>
				<th>Deskripsi</th>
				<!-- <th>Nama Kategori</th> -->
				<th>Update Terakhir</th>
				@if($show_actions)
				<th>Aksi</th>
				@endif

			</tr>
		</thead>
	</table>
</div>
<!-- /ajax sourced data -->
@lv_access("Sops", "create")
<div class="modal fade nontabindex" id="AddModal" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog  modal-lg" 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 SOP</h4>
			</div>
			{!! Form::open(['action' => 'LaravelVueAdmin\SopsController@doAdd', 'id' => 'sops-add-form']) !!}
			<div class="modal-body">
				<div class="box-body">
					@lv_input($module, 'title')
					@lv_input($module, 'description','','','form-control text-area')
					<div class="form-group">
						<label for="category_id">Kategori* :</label>
						<select name="category_id" class="form-control select2">
							@foreach($category  as $cat)
								<option value="{{$cat->id_category}}">{{$cat->name}} - {{$cat->name_category}}</option>
							@endforeach
						</select>
					</div>
				</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/js/plugins/tables/datatables/datatables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('LaravelVueAdmin/assets/js/plugins/pickers/color/spectrum.js')}}"></script>
<script type="text/javascript" src="{{ asset('LaravelVueAdmin/assets/js/pages/picker_color.js')}}"></script>
<script type="text/javascript" src="{{ asset('LaravelVueAdmin/assets/js/plugins/ui/ripple.min.js')}}"></script>
<script src="{{ asset('LaravelVueAdmin/assets/js/plugins/tables/datatables/extensions/responsive.min.js') }}"></script>
<script type="text/javascript" src="{{asset('LaravelVueAdmin/assets/js/plugins/editors/summernote/summernote.min.js')}}"></script>
<script type="text/javascript" src="{{asset('LaravelVueAdmin/assets/js/pages/editor_summernote.js')}}"></script>
<script>
	$(".select2").select2();
    $(".text-area").summernote({
        callbacks: {
            onImageUpload: function(files) {
                var $this = $(this);
                sendFile(files[0],function(url) {
                    $this.summernote("insertImage", url);
                });
            }
        }
    });
     function sendFile(file, callback) {
        var data = new FormData();
        data.append("image", file);//You can append as many data as you want. Check mozilla docs for this
        data.append("_token", "{{csrf_token()}}");
        $.ajax({
            data: data,
            type: "POST",
            url: "{{url(config('LaravelVueAdmin.adminRoute') . '/sops/doAddImage')}}",
            cache: false,
            contentType: false,
            processData: false,
            success: function(res) {
            	if(res.result == "success"){
            		new PNotify({
						text: res.msg,
						delay: 3000,
						addclass: 'bg-success'
					});
               	 callback(res.url);
            	}else{
            		new PNotify({
						text: res.msg,
						delay: 3000,
						addclass: 'bg-danger'
					});
            	}

            }
        });
    }
</script>
<script>

	$(function () {
		$(".nontabindex").removeAttr('tabindex');
		var doms="";
		var $rows = "";
		$.ajax({
				url:"{{ url(config('LaravelVueAdmin.adminRoute') . '/sops/datatable') }}",
				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">';
		}
		$.extend( $.fn.dataTable.defaults, {
			autoWidth: false,
			responsive: true,
			columnDefs: [{
				className: 'control',
				orderable: false,
				targets:   [0]
			}],
			dom: doms,
			lengthMenu: [[50, 100, 150, -1], [50, 100, 150, "Semua"]],
			iDisplayLength: 50,
			language: {
				"url": "{{ asset('LaravelVueAdmin/assets/js/plugins/tables/datatables/Indonesian.json') }}"
			},
			drawCallback: function () {
				$(this).find('tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
				$('[data-popup="tooltip"]').tooltip();
				$('[data-popup="popover"]').popover();
			},
			preDrawCallback: function() {
				$(this).find('tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
				$('[data-popup="tooltip"]').tooltip();
				 $('[data-popup="popover"]').popover();
			}
		});

		var tabel = $("#example1").DataTable({
			responsive: {
				details: {
					type: 'column',
					target: [0]
				}
			},
			processing: true,
			serverSide: true,
			"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();
			},
			ajax: "{{ url(config('LaravelVueAdmin.adminRoute') . '/sops/datatable') }}",
			columnDefs: [
			{
				className: 'control',
				orderable: false,
				targets: [0]
			},{
				orderable: false,
				visible: false,
				targets: [1]
			},@if($show_actions){
				className: 'text-center',
				orderable: false,
				width: "100px",
				targets: [5]
			}@endif],
		});
		$.fn.dataTable.ext.errMode = 'none';
		$('#example1').on('error.dt', function(e, settings, techNote, message) {
			(function($) {
					$.jGrowl('Terjadi kesalahan saat <strong>memuat data</strong>, Silahkan <a class="alert-link" onclick="window.location.reload(true);"><u><i class="icon-reload-alt"></i>MUAT ULANG</u></a> halaman!', {
						position: 'center',
						theme: 'bg-danger alert-styled-left',
						sticky: true,
						header: 'PROSES DIHENTIKAN'
					});
			})(window.jQuery);
		});
	$("#department-add-form").validate({

	});
	$('.modal').on('shown.bs.modal', function() {
		$(this).find('[autofocus]').focus();
	});
	$("input[name='name']").attr('autofocus','autofocus');
	$(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