@extends('layouts.admin')
@section('content-title')
	{{ __('functionaries.Functionaries managements') }}
@endsection
@section('content-breadcrumbs')
	{{ Breadcrumbs::render('admin.functionaries')}}
@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{
		    padding: .25rem .5rem;
			font-size: 14px;
		}
		.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>

@endsection
@section('content')

<div class="card tilebox-one noradius">
	<div class="card-body">
		<h2 class="page-header">{{ __('functionaries.List of functionaries')}}</h2>
		<div class="row mb-3">
			<div class="col-sm-12 col-md-2">
				<div class="pull-left">
					<a href="{{ route('admin.functionaries.create')}}" class="btn btn-success">{{ __('functionaries.New Functionary') }}</a>
				</div>
			</div>
		</div>

		@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">{{ __('functionaries.Photo') }}</th>
					<th scope="col">{{ __('functionaries.last name') }}</th>
					<th scope="col">{{ __('functionaries.first name') }}</th>
					<th scope="col" width="150">{{ __('functionaries.Actions') }}</th>
				</tr>
			</thead>
		</table>
	</div>


<!-- Modal  -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header" style='background-color:#262d33;'>
	      	<h5 class="modal-title" id="myModalLabel" style="color:white;">view</h4>
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color:white;">×</button>
		      </div>
		      <div class="modal-body">
	       	<div id="modal-view-functionaries1" style="margin-bottom:0px;"></div>
	      </div>
	    </div>
	  </div>
	</div>
<!-- /Modal -->

</div>
@endsection

@section('js')

	<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">
	    $(".deletefunctionary").on("submit", function(){
	        return confirm("{{__('functionaries.Do you want to delete this item')}}");
	    });
	</script>

	<!-- modal view -->
	<script type="text/javascript">
	$(function() {

		$("#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.functionaries.ajax') }}",
		        "dataType": "json",
		        "type": "POST"
	      	},
      		"order": [[1, 'asc']],
      		"columns": [
	          	{ "data": "image", "orderable": false},
	          	{ "data": "nom" },
	          	{ "data": "prenom" },
	          	{ "data": "options", "orderable": false}
	      	]
    	});
		$('table').on('click', '.thumbnaill', function(){
	    	personID = $(this).data('id');
	       	window.open("{{route('admin.data.get.person.single',['peron_id'=>null])}}/"+personID, "popupWindow2", "width=700,height=530,scrollbars=yes");
	    });
    	// $('.loading').addClass('hide');
    	// $('.tgloading').removeClass('hide');
	    // var infoModal = $('#myModal');
	  //   $('.thumbnaill').on('click', function(){
	  //      	var x=$('#modal-view-functionaries1');
	  //      	var dataCntnr = $(this).parents('.viewmodal');
			// var html="<table style='width:100%'><td><img src='"+dataCntnr.data('img')+"'></td>"+
			// 	"<td><p><B>"+dataCntnr.data('fullname')+"</B></p></td></table><br>";
			// 	if (dataCntnr.data('sex')=='h') 
			// 		html +="<p>"+" <B>{{__('functionaries.sex')}}:</B> Home</p>";
			// 	if (dataCntnr.data('sex')=='f') 
			// 		html +="<p>"+"<B>{{__('functionaries.sex')}}:</B> Femme</p>";
			// 	    html +="<table style='width:100%'><td><B>{{__('functionaries.place of birth')}} :</B>"+
			// 	    dataCntnr.data('placebirth')+"</p></td>"+
			// 	"<td><p>"+"<B>date birth :</B>"+dataCntnr.data('datebirth')+
			// 	"</p></td></table>"+"<B>{{__('functionaries.political affiliation')}} :</B>"+dataCntnr.data('ap')+"</p>"+
			// 	"</p><table style='width:100%'><tr>";
			// 	if (dataCntnr.data('fep')==1) 
			// 		html +="<td><p>"+"<B>{{__('functionaries.fep')}} :</B> Oui</p></td>";
			// 	if (dataCntnr.data('mep')==1) 
			// 		html +="<td><p>"+"<B>{{__('functionaries.mep')}} :</B> Oui</p></td>";
			// 	if (dataCntnr.data('epimg')==1) 
			// 		html +="<td><p>"+"<B>{{__('functionaries.epimg')}} :</B> Oui</p></td>";
			// 	if (dataCntnr.data('status')==1) 
			// 		html +="<td><p>"+"<B>{{__('functionaries.status')}} :</B> Oui</p></td>";
			// 	html += "</tr></table>"+"<p>"+"<B>Biography :</B><br>"+dataCntnr.data('biography')+"</p><br>";
			// 	x.html(html);

	  //       infoModal.modal('show');
	  //       return false;
	  //   });
		});
	</script>

	@endsection