@extends('layouts.admin')
@section('content-title')
	{{ __('data.Entities') }}
@endsection
@section('content-breadcrumbs')
	{{ Breadcrumbs::render('admin.entities')}}
@endsection
@section('css')
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
	<style>
		.input-group-text{
			line-height: 0;
		}
		#ppe-chk{
			margin-right: 4px;
			margin-left: 4px;
		}
		.function-btns-search{
		    padding: .45rem 1.2rem;
			font-size: 14px;
		}
		.function-btns-search{
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
		.function-btns .fa{
            font-size: 14px;
            height: 11px;
            margin: 0;
            padding: 0;
            margin-right: 0px;
        }
		/* Save button */
		#my-btn {
			padding-top: 4px;
		}

		@media  screen and (max-width: 500px){
			.function-btns .btn{
				margin-bottom: 5px;
			}
		}
	</style>
<link href="/assets/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style type="text/css">
	/* Select2 Categories */
    .select2 {
        width: 100% !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #0f9df7;
        border-color:  #0f9df7;
        color: white;
        padding-bottom: 4px;
        font-weight: 700;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
        color: white;
    }
</style>
@endsection
@section('content')
<div class="card-box tilebox-one noradius">
	<section>
		<h2 class="page-header">{{ __('data.List of Entities')}}</h2>
		@if(session()->has('success'))
		<div class="alert alert-success alert-dismissible fade show" role="alert">
			{{ session()->get('success') }}
				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		@endif

		@if(session()->has('error'))
		<div class="alert alert-danger alert-dismissible fade show" role="alert">
			{{ session()->get('error') }}
				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		@endif

		<table class="table table-responsive-xl table-bordered table-striped" id="datatable">
			<thead>
				<tr>
					<th scope="col" width="10">#</th>
					<th scope="col">{{ __('data.Libelle') }}</th>
					<th scope="col"></th>
				</tr>
			</thead>
		</table>
	</section>
</div>
@endsection
@section('js')
<div class="modal fade" id="masterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  	<div class="modal-dialog" style="max-width: 100%">
  		<div class="modal-content" style="background-color: transparent;border: 0;">
  		<div class="modal-body">
   			<div id="contenu" style="margin:0px;"></div>
  		</div>
  		</div>
  	</div>
</div>
<div class="modal fade" id="childModalZ2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  	<div class="modal-dialog" style="max-width: 50%">
  		<div class="modal-content" style="background-color: transparent;border: 0;">
  		<div class="modal-body">
   			<div class="contenu" style="margin:0px;"></div>
  		</div>
  		</div>
  	</div>
</div>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="/assets/plugins/select2/js/select2.min.js"></script>
<script type="text/javascript">
	$(function() {
	    $('.select2').select2();
	    $('.select3').select2({
            tags: true,
        });
        $('.date').daterangepicker({
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            singleDatePicker: true,
    		showDropdowns: true,
            autoUpdateInput: false,
            // minDate: moment(),
            locale: {
                cancelLabel: 'Clear',
                format: 'DD/M/Y hh:mm A',
                daysOfWeek: [
                    '{{ __("daysOfWeek.Su")}}',
                    '{{ __("daysOfWeek.Mo")}}',
                    '{{ __("daysOfWeek.Tu")}}',
                    '{{ __("daysOfWeek.We")}}', 
                    '{{ __("daysOfWeek.Th")}}', 
                    '{{ __("daysOfWeek.Fr")}}',
                    '{{ __("daysOfWeek.Sa")}}'],
                monthNames: [
                    '{{ __("months.January")}}',
                    '{{ __("months.February")}}',
                    '{{ __("months.March")}}',
                    '{{ __("months.April")}}',
                    '{{ __("months.May")}}',
                    '{{ __("months.June")}}',
                    '{{ __("months.July")}}',
                    '{{ __("months.August")}}',
                    '{{ __("months.September")}}',
                    '{{ __("months.October")}}',
                    '{{ __("months.November")}}',
                    '{{ __("months.December")}}'],
            },
        }, function(start, end) {
            $('.date').val(start.format('YYYY/MM/DD'));
        });
	});
</script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script type="text/javascript">
	$(function() {
	    $("#datatable").one("preInit.dt", function(){
	    	$(".dataTables_filter input[type='search']").off();
	      	$(".dataTables_filter").html(
	          	'<div style="width:320px" class="input-group pull-right">' +
	          	'<input type="search" class="form-control" placeholder="Search for...">' +
	          	'<span class="input-group-btn">' +
	          	'<button class="btn btn-primary function-btns-search function-btns" type="button">' +
	          	'<i class="fa fa-search fa-xs"></i></button>'+
	          	'</span>' +
	          	'</div>'
	      	);
	      	var sbox =  $(".dataTables_filter input[type='search']")
		        $(".dataTables_filter button").on("click", function(){
		            $("#datatable").DataTable().search(sbox.val()).draw();
	        });
	        sbox.on("keydown", function(evtObj){
	            if(evtObj.keyCode == 13){
	                $("#datatable").DataTable().search(sbox.val()).draw();
	            }
	        });
	        
	    });
		var dtable = $("#datatable").DataTable({
      		"info": false,
	      	"language": {
	            "sProcessing":     "<div class=\"loading2\">Veuillez patienter SVP!</div>",
	            "sSearch":         "Rechercher&nbsp;:",
	            "sLengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
	            "sInfo":           "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
	            "sInfoEmpty":      "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
	            "sInfoFiltered":   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
	            "sInfoPostFix":    "",
	            "sLoadingRecords": "Chargement en cours...",
	            "sZeroRecords":    "Aucun &eacute;l&eacute;ment &agrave; afficher",
	            "sEmptyTable":     "Aucune donn&eacute;e disponible dans le tableau",
	            "oPaginate": {
	                "sFirst":      "Premier",
	                "sPrevious":   "Pr&eacute;c&eacute;dent",
	                "sNext":       "Suivant",
	                "sLast":       "Dernier"
	            },
	            "oAria": {
	                "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
	                "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
	            }
	        },
	        "processing": true,
      		"serverSide": true,
      		"ajax":{
		        "url": "{{ route('admin.entities.ajax') }}",
		        "dataType": "json",
		        "type": "POST"
	      	},
      		"order": [[1, 'asc']],
      		"columns": [
	          	{ "data": "id", "orderable": false},
	          	{ "data": "libelle", "orderable": false},
	          	{ "data": "options", "orderable": false}
	      	]

    	});
		$('table').on("click", 'a.entity-details', function () {
	    	entity_id = $(this).data('id');
			$.ajax({
				url: "{{route('admin.data.get.entity',['entity_id'=>null])}}/"+entity_id,
				dataType: "html",
				success: function (data) {
					$('#contenu').html(data);
					$('#masterModal').modal('show');
				}
			});
		});
		$('.modal, table').on("click", 'a.entity-edit', function () {
	    	entity_id = $(this).data('id');
			$.ajax({
				url: '{{route('admin.data.edit.entity.ajax',['entity_id'=>null])}}/'+entity_id,
				dataType: "html",
				success: function (data) {
					$('#childModalZ2 .contenu').html(data);
					$('#childModalZ2').modal('show');
					$(".removefile").click(function () {$type = $(this).data('type');$(this).parent('.filelink').html('<input type="hidden" name="'+$type+'" value="delete">');});
					$('.select3').select2({
            			tags: true,
        			});
				}
			});
		});
		$('#childModalZ2').on("click", '#entity-save', function () {
			// var dataForm = $("#entityForm").serialize();
			var dataForm = new FormData($("#entityForm")[0]);
			$.ajax({
				url: '{{route('admin.data.entity.update.ajax')}}',
			  	type: "POST",
			  	data: dataForm,
			  	dataType: "json",
				success: function (data) {
					if (data.type=='success') {
						$('#childModalZ2').modal('hide');
						$('#masterModal').modal('hide');
						dtable.ajax.reload( null, false );
					}
					swal("", data.msg, data.type);
				},
				processData: false,
            	contentType: false,
			});
			return false;
		});
		$('.modal').on("click", '.detachperson', function () {
			var $table = $(this).parents('table');
			var entity_id = $(this).data('entity_id');
			var person_id = $(this).data('person_id');
			$.ajax({
				url: '{{route('admin.data.detach.person.ajax',['entity_id'=>null, 'person_id'=>null])}}/'+entity_id+'/'+person_id,
			  	type: "GET",
			  	dataType: "json",
				success: function (data) {
					swal("", data.msg, data.type);
					if (data.type=='success') {
						$table.remove();
					}
				}
			});
			return false;
		});
		// $('.table').on("click", '.entity-delete', function () {
		// 	var entity_id = $(this).data('id');
		// 	if (confirm("{{__('data.Do you really want to delete this entity')}}")){
		// 		$.ajax({
		// 			url: '',
		// 		  	type: "GET",
		// 		  	dataType: "json",
		// 			success: function (data) {
		// 				swal("", data.msg, data.type);
		// 				if (data.type=='success') {
		// 					dtable.ajax.reload( null, false );
		// 				}
		// 			}
		// 		});
		// 	}
		// 	return false;
		// });

		// $('.modal, table').on("click", 'a.person-edit', function () {
	 //    	var entity_id = $(this).data('entity_id');
		// 	var person_id = $(this).data('person_id');
		// 	$.ajax({
		// 		url: '',
		// 		dataType: "html",
		// 		success: function (data) {
		// 			$('#childModalZ2 .contenu').html(data);
		// 			$('#childModalZ2').modal('show');
		// 		}
		// 	});
		// });

		$('.modal, table').on("click", 'a.entity-delete', function () {
			if (confirm("{{__('data.Do you really want to delete this entity')}}")){
				var entity_id = $(this).data('id');
				$.ajax({
					url: '{{route('admin.data.destroy.entity',['entity_id'=>null])}}/'+entity_id,
				  	dataType: "json",
					success: function (data) {
						if (data.type=='success') {
							dtable.ajax.reload( null, false );
						}
							swal("", data.msg, data.type);
					}
				});
			}
		});

	});
</script>
@endsection