@extends('layouts.admin')
@section('content-title')
	{{ __('functionaries.New Functionary') }}
@endsection
@section('content-breadcrumbs')
	{{ Breadcrumbs::render('admin.functionaries.create')}}
@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-folder-open-o"></i> {{ __('functionaries.New Functionary') }}</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)!!}
		<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>
			@foreach($functionaries as $functionary)  
				<option value="{{$functionary->id}}">{{$functionary->first_name}} {{$functionary->last_name}}</option>
			@endforeach
			</select>
		</div>
		<div class="form-group row">
			<div class="col-md-3"></div>
			<div class="col-md-1">
				<label for="function ">{{__('data.Function')}}</label>
			</div>
			<select class="form-control select2 col-md-4" id="function" name="function_id"> 
				@foreach($functions as $function)  
				<option value="{{$function->id}}">{{$function->libelle}}</option>
				@endforeach
			</select>
		</div>
		<div class="form-group row">
			<div class="col-md-6 row">
				<label class="col-md-2">{!!(__('functionaries.sexe'))!!} :</label>
				<div class="col-md-2">
				{!!Form::radio('sex', (__('functionaries.Men')),'h')!!}
				</div>
				<div class="col-md-2">
				{!!Form::radio('sex',(__('functionaries.Women')), 'f')!!}
				</div>
			</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('last_name',(__('functionaries.last name')))->placeholder(__('functionaries.last name'))!!}
			</div>
			<div class="col">
			{!!Form::text('first_name', (__('functionaries.first name')))->placeholder(__('functionaries.first name'))!!}
			</div>
		</div>
		<div class="form-group row">
			<div class="col">
			{!!Form::text('mail',(__('functionaries.Email')))->placeholder(__('functionaries.Email'))!!}
			</div>
			<div class="col">
			{!!Form::text('gsm', (__('functionaries.GSM')))->placeholder(__('functionaries.GSM'))!!}
			</div>
		</div>
		<div class="row">
			<div class="col">
			{!!Form::text('birth_date',__('functionaries.birth date'))->placeholder(__('functionaries.birth date'))!!}
	 		</div>
	 		<div class="col">
			{!!Form::text('place_of_birth',(__('functionaries.place of birth')))->placeholder(__('functionaries.place of birth'))!!}
			</div>
		</div>
		{!!Form::textarea('biography',(__('functionaries.biography')))->placeholder(__('functionaries.biography'))!!}
 		{!!Form::text('status',(__('functionaries.status')))->placeholder(__('functionaries.status'))!!}		
		{!!Form::text('test',(__('functionaries.test')))->placeholder(__('functionaries.test'))!!}
		{!!Form::text('ap',(__('functionaries.ap')))->placeholder(__('functionaries.ap'))!!}
		<div class="row">
			<div class="col">
				<div class="slidecontainer">
				 <input type="range" min="1" max="6" name="risk" value="risk" class="slider" id="myRange">
				 <p>{{(__('functionaries.value'))}}: <span id="demo"></span></p>
				 <script>
				var slider = document.getElementById("myRange");
				var output = document.getElementById("demo");
				output.innerHTML = slider.value;
				slider.oninput = function() {
				output.innerHTML = this.value;
				}
				</script>
				</div>
			</div>
			<div class="col">
			{!!Form::checkbox('fep', 'fep', true)!!}
			</div>
			<div class="col">
			{!!Form::checkbox('mep', 'mep', true)!!}
			</div>
			<div class="col">
			{!!Form::checkbox('epimg', 'epimg', true)!!}
			</div>
			<div class="col">
			</div>
			<div class="col">
			</div>
		</div>
		{!!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() {
		$('input[name="birth_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) {
            $('input[name="birth_date"]').val(start.format('YYYY/MM/DD'));
        });

        $('input[name="eventDates"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD/M/Y hh:mm A') + ' - ' + picker.endDate.format('DD/M/Y hh:mm A'));
        });
	    $('.select2').select2();
	    $('.select2').on('change', function () {
	  //   	var datatypeName = $(this).val();
	  //   	$.ajax({
			//   type: "POST",
			//   url: '{{route("admin.data.entity.form")}}',
			//   data: { name: datatypeName},
			//   success: function (data) {
			//   	$("#reste").html(data);
			//   },
			//   dataType: "html"
			// });
	    });
	});
</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