@extends('layouts.admin')
@section('content-title')
	@if (isset($person->id))
		{{ __('data.Edit Functionary') }}
	@else
		{{ __('data.New Functionary') }}
	@endif
@endsection
@section('content-breadcrumbs')
@if (isset($person->id))
	{{ Breadcrumbs::render('admin.functionaries.edit')}}
@else
	{{ Breadcrumbs::render('admin.functionaries.create')}}
@endif
@endsection
@section('css')
<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" />
@endsection
@section('content')

<div class="card">
	<div class="card-header">
		<h3><i class="fa fa-user"></i> 
		@if (isset($person->id))
			{{ __('data.Edit Functionary') }}
		@else
			{{ __('data.New Functionary') }}
		@endif
		</h3>
	</div>
	<div class="card-body">
		{!!Form::open()->post()->multipart()->route('admin.data.store.person', ['entity_id' => $entity_id])!!}
		{!!Form::hidden('entity_id', $entity_id)!!}
		<input type="hidden" name="rootCat" value="{{$rootCat}}">
		<div class="form-group row">
			<div class="col-md-3"></div>
			<div class="col-md-1">
				<label for="functionary ">{{__('data.Person')}}</label>
			</div>
			<select class="form-control select2 col-md-4" id="functionary" name="functionary_id"> 
				<option value="new">{{__('data.New Functionary')}}</option>
			
			</select>
		</div>
		<div class="form-group row">
			<div class="col-md-3"></div>
			<div class="col-md-1">
				<label for="function" class="required-label">{{__('data.Function')}}</label>
			</div>
			<select class="form-control select2 col-md-4" id="function" name="function_id" required> 
				<option value="">{{__('data.Choose')}}</option>
			</select>
		</div>
		<div class="form-group row">
			<div class="col-md-6 row">
				
			</div>
			<div class="col-md-6">
				<input id="file_img" type="file" name="personal_image_url" onchange="previewFile()">
				<img src="" id="img" height="50"  alt="Image preview...">
			</div>
		</div>
		<div class="form-group row">
			<div class="col">
			{!!Form::text('nom',(__('data.last name').'<span class="required-label"></span>'))->placeholder(__('data.last name'))->attrs(['required'=>''])!!}
			</div>
			<div class="col">
			{!!Form::text('prenom', (__('data.first name').'<span class="required-label"></span>'))->placeholder(__('data.first name'))->attrs(['required'=>''])!!}
			</div>
		</div>
		<div class="form-group row">
			<div class="col">
			{!!Form::text('mail',(__('data.Email')))->placeholder(__('data.Email'))!!}
			</div>
			<div class="col">
			{!!Form::text('gsm', (__('data.GSM')))->placeholder(__('data.GSM'))!!}
			</div>
		</div>
		<div class="row">
			<div class="col">
			{!!Form::text('date_naissance',__('data.birth date'))->placeholder(__('data.birth date'))!!}
	 		</div>
	 		<div class="col">
			{!!Form::text('lieu_naissance',(__('data.place of birth')))->placeholder(__('data.place of birth'))!!}
			</div>
		</div>
		{!!Form::textarea('biographie',(__('data.biography')))->placeholder(__('data.biography'))!!}
		{!!Form::submit('save')->id('my-btn')!!}
		{!!Form::close()!!}
	</div>
</div>
@endsection
@section('js')
<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({minimumInputLength: 3,});
		$("#functionary").select2({
	      	minimumInputLength: 3,
	      	ajax: {
	          	url: "{{ route('admin.data.persons.ajax') }}",
	          	dataType: 'json',
	          	type: "POST",
	          	data: function (params) {
	              	return {
	                  	q: $.trim(params.term)
	              	};
	          	},
	          	processResults: function (data) {
	              	return {
	                  	results: data
	              	};
	          	},
	          	cache: true
  			}
    	});
		$("#function").select2({
	      	minimumInputLength: 3,
	      	ajax: {
	          	url: "{{ route('admin.data.functions.ajax') }}",
	          	dataType: 'json',
	          	type: "POST",
	          	data: function (params) {
	              	return {
	                  	q: $.trim(params.term)
	              	};
	          	},
	          	processResults: function (data) {
	              	return {
	                  	results: data
	              	};
	          	},
	          	cache: true
  			}
    	});
		$('input[name="date_naissance"]').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) {
            $('input[name="date_naissance"]').val(start.format('YYYY/MM/DD'));
        });
	    $('#functionary').on('change', function () {
	    	var functionary = $('#functionary').val();
	    	if (functionary!== "new")
	    	$.ajax({
			  type: "POST",
			  url: '{{route("admin.data.functionary")}}',
			  data: { functionaryID: functionary, entity_id:{{$entity_id}}},
			  success: function (data) {
			  	// $('#function').val(data.functionid).trigger('change');
			  	$('#function').select2("trigger", "select", {data: {id:data.functionid, text:data.functionLibelle}});
			  	if (data.sexe=="h")
		    		$('#sexe-h').attr('checked', 'checked');
			  	else
		    		$('#sexe-f').attr('checked', 'checked');
		    	if (data.img_perso_url) {
		    		$('#img').attr('src', '/uploads/uploads/thumbs/'+data.img_perso_url);
		    	}else{
		    		$('#img').attr('src', '/uploads/functionaries/avatar.jpg');
		    	}
		    	$('#nom').val(data.nom);
		    	$('#prenom').val(data.prenom);
		    	$('#mail').val(data.mail);
		    	$('#gsm').val(data.gsm);
		    	$('#date_naissance').val(data.date_naissance);
		    	$('#lieu_naissance').val(data.lieu_naissance);
		    	$('#biographie').val(data.biographie);
		    	$('#ap').val(data.ap);
		    	$('#myRange').val(data.risk);
		    	$('#demo').text(data.risk);
		    	if (data.fep)
		    		$('#fep').attr('checked', true);
		    	if (data.mep)
		    		$('#mep').attr('checked', true);
		    	if (data.epimg)
		    		$('#epimg').attr('checked', true);
			  },
			  dataType: "json"
			});
	    	else{
	    		$('#sex-h').attr('checked', 'checked');
		    	$('#img').attr('src', '/uploads/functionaries/avatar.jpg');
		    	$('#nom').val("");
		    	$('#prenom').val("");
		    	$('#mail').val("");
		    	$('#gsm').val("");
		    	$('#date_naissance').val("");
		    	$('#lieu_naissance').val("");
		    	$('#biographie').val("");
		    	$('#ap').val("");
		    	$('#myRange').val(0);
	    		$('#fep').attr('checked', false);
	    		$('#mep').attr('checked', false);
	    		$('#epimg').attr('checked', false);
	    	}
	    });
	    @if (isset($person->id))
			$('#functionary').select2("trigger", "select", {data: {id:{{$person->id}}, text:'{{$person->nom.' '.$person->prenom}}'}});
		@endif
	});
</script>
<script>

   	function previewFile(){
       var preview = document.querySelector('img[id=img]'); //selects the query named img
       var file    = document.querySelector('input[id=file_img]').files[0]; //sames as here
       var reader  = new FileReader();
       reader.onloadend = function () {
           preview.src = reader.result;
       }
       if (file) {
           reader.readAsDataURL(file); //reads the data as a URL
       } else {
           preview.src = "/uploads/functionaries/avatar.jpg";
       }
  	}
  	previewFile();  //calls the function named previewFile()
</script>
@endsection