@extends('layouts.admin')
@section('content-title')
	{{ __('functionaries.Edit Functionaries') }}
@endsection
@section('content-breadcrumbs')
	{{ Breadcrumbs::render('admin.functionaries.edit')}}
@endsection
@section('css')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endsection
@section('content')
<div class="card-box tilebox-one noradius">
	<section>
		<h2 class="page-header">{{ __('functionaries.Edit Functionaries') }}</h2>


		{!!Form::open()->locale('functionaries')->put()->multipart()->route('admin.functionaries.update')->fill($data)!!}
		{!!Form::hidden('id')!!}
		<div class="row">
			<div class="col">
				<label >{!!(__('functionaries.sexe'))!!}</label>
				<div class="row">
				<div class="col">
				{!!Form::radio('sexe', (__('functionaries.Men')),'h')!!}
				</div>
				<div class="col">
				{!!Form::radio('sexe',(__('functionaries.Women')), 'f')!!}
				</div>
				</div>
			</div>
		<br>
		<div class="row">
			<div class="col-md-4">


				<span class="border border-white">
					@if($data->img_perso_url=='0')
					<img id="img_view" class="rounded" height="130" src="/uploads/functionaries/avatar.jpg" />
					@else
					<img id="img_view" class="rounded" height="130" src="/uploads/uploads/thumbs/{{$data->img_perso_url}}" />
					@endif

					
				</span>
					

			</div>
		</div>
			<div class="col">
				<input  name="personal_image_url2" type="hidden" value="{{$data->img_perso_url}}">
				<input id="file_img" type="file" name="img_perso_url" onchange="previewFile()"><br>
				
<script>

   function previewFile(){

       var preview = document.querySelector('img[id=img_view]'); //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 = "";
       }
   }
    // previewFile(); calls the function named previewFile()
  </script>

			</div>
		</div>

		<div class="row">
			<div class="col">
				{!!Form::text('nom',(__('functionaries.last name')))->placeholder(__('functionaries.last name'))!!}
			</div>
			<div class="col">
				{!!Form::text('prenom', (__('functionaries.first name')))->placeholder(__('functionaries.first name'))!!}
			</div>
		</div>

		<div class="row">
			<div class="col">
				<label> {!!(__('functionaries.birth date'))!!} </label>
		 		<input type="text" name="date_naissance" value="{{$data->date_naissance}}" class="form-control">
	 		</div>
	 		<div class="col">
				{!!Form::text('lieu_naissance',(__('functionaries.place of birth')))->placeholder(__('place of birth'))!!}
			</div>
		</div>
		{!!Form::text('ap',(__('functionaries.political affiliation')))->placeholder(__('functionaries.political affiliation'))!!}
		{!!Form::textarea('biographie',(__('functionaries.biography')))->placeholder(__('functionaries.biography'))!!}

		<div class="row">
			<div class="col">
				  <div class="slidecontainer">
				  <input type="range" min="1" max="6" name="risk" value="{{$data->risk}}" class="slider" id="myRange">
				  <p>Value: <span id="demo">{{$data->risk}}</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', (__('functionaries.fep')), true)!!}
			</div>
			<div class="col">
			{!!Form::checkbox('mep', (__('functionaries.mep')), true)!!}
			</div>
			<div class="col">
			{!!Form::checkbox('epimg', (__('functionaries.epimg')), true)!!}
			</div>
			
		</div>
		<br><br>




		{!!Form::submit('Save')->id('my-btn')!!}
		{!!Form::close()!!}
	</section>
</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 type="text/javascript">
	$(function() {

		$('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'));
        });

	});
</script>
@endsection