@extends('partials.default')
@section('title', 'AfricaWebStudent Inscription')
@section('content')
<section id="icon-boxes" class="icon-boxes pricing">
	    <div class="container ">
	        <div class="row" style=" margin: 0 auto;"  id="inscription-block">
	            <div class="col-md-6 col-lg-9 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="fade-up" style="margin: 0 auto;" data-aos-delay="100">
	                <div class="icon-box col-sm-12">
                    		<div class="display-table">
                    			<div class="display-table-cell">
                    						<div class="col-sm-12">
                    								<h4 class="section-title" style="font-size:13px;">LES ETAPES DE VOTRE PRE-INSCRIPTION</h4>
                    								<div class="col-sm-12">
                    									<form id="QuoteForm" action="{{url('traiteinscription')}}" name="QuoteForm" data-toggle="validator" class="QuoteForm"  enctype="multipart/form-data">
                    										<div class="section-wrap">
                    											<div id="section-1" class="section">
                    												<fieldset>
                    													<h3 class="section-title">ETAPE 1 of 5</h3>
                    													<div class="progress">
                    														<div class="progress-bar" style="width: 0%;">
                    															<div class="progress-bar-text">0% Complete</div>
                    														</div>
                    													</div>
                    													<div class="help-block with-errors mandatory-error"></div>
                    													<h4>Nom*:</h4>
                    													<div class="form-group validfname">
                    														<input class="form-control" name="nom" id="nom" type="text" placeholder="Nom*" required data-error="veuillez saisir votre nom" value="{{$identite->nom}}" readonly>
                    														<div class="input-group-icon"><i class="fa fa-user"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Prénoms*:</h4>
                    													<div class="form-group validlname">
                    														<input class="form-control" name="prenom" id="prenom" type="text" placeholder="Prénoms*" required data-error="veuillez saisir votre prénom" value="{{$identite->prenom}}" readonly>
                    														<div class="input-group-icon"><i class="fa fa-user"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Sexe*:</h4>
                    													<div class="form-group validgender">
                    														<select class="form-control" name="sexe" id="sexe" title="" required data-error="Sélectionner votre sexe">
                    															<option value="{{$identite->sexe}}">{{$identite->sexe}}</option>
                    														</select>
                    														<div class="input-group-icon"><i class="fa fa-mars"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    
                    													<h4>Situation de famille*:</h4>
                    													<div class="form-group validsituation">
                    														<span class="radio-inline mgsradio-circle-buttons">
                    															<input type="radio" name="situation" id="celibat" value="C"  checked>
                    															<label for="celibat">Célibataire</label>
                    															<div class="check"></div>
                    														</span>
                    														<span class="radio-inline mgsradio-circle-buttons">
                    															<input type="radio" name="situation" id="marie" value="M">
                    															<label for="marie">Marié(e)</label>
                    															<div class="check"></div>
                    														</span>
                    														<span class="radio-inline mgsradio-circle-buttons">
                    															<input type="radio" name="situation" id="divorce" value="D">
                    															<label for="divorce">Divorcé(e)</label>
                    															<div class="check"></div>
                    														</span>
                    														<span class="radio-inline mgsradio-circle-buttons">
                    															<input type="radio" name="situation" id="veuf" value="V">
                    															<label for="veuf">Veuf(ve)</label>
                    															<div class="check"></div>
                    														</span>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Votre adresse actuelle*:</h4>
                    													<div class="form-group validaddress">
                    														<input class="form-control" name="address" id="address" type="text" placeholder="Adresse*" required data-error="Please enter address">
                    														<div class="input-group-icon"><i class="fa fa-map-marker"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Code pays*:</h4>
                    													<div class="form-group validcountry_code">
                                                                            <select id="country_code" name="country_code" class="form-control"  required autofocus>
																				@foreach ($code_pays as $code)
																					@if( strcmp('+229', $code->country_code) == 0 )
																						<option value="{{$code->country_code}}" selected> {{$code->intitulePays}}</option>
																					@else
																						<option value="{{$code->country_code}}"> {{$code->intitulePays}}</option>
																					@endif
																				@endforeach
                                                                            </select>
                    														<div class="input-group-icon"><i class="fa fa-phone"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>													
                    													<h4>Votre téléphone*:</h4>
                    													<div class="form-group validphone">
                    														<input class="form-control" name="phone" id="phone" type="number" placeholder="Phone*" required data-error="Please enter valid phone" value="{{$identite->adresse}}" placeholder = "Exemple : 94172879" >
                    														<div class="input-group-icon"><i class="fa fa-phone"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>													
                    													<h4>Votre adresse mail*:</h4>
                    													<div class="form-group validemail">
                    														<input class="form-control" name="email" id="email" type="email" placeholder="Email*" required data-error="Please enter valid email">
                    														<div class="input-group-icon"><i class="fa fa-envelope"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<div class="form-group quoteForm-step-1">
                    														<button class="btn btn-default disable" type="button">Es-tu prêt?</button>
                    														<button class="btn btn-custom pull-right" onclick="nextStep2()" type="button">Suivant <span class="fa fa-arrow-right"></span></button> 
                    													</div>
                    												</fieldset>
                    											</div><!-- end section -->
                    
                    											<div id="section-2" class="section slide-right">
                    												<fieldset>
                    													<h3 class="section-title">ETAPE 2 of 5</h3>													
                    													<div class="progress">
                    														<div class="progress-bar" style="width: 25%;">
                    															<div class="progress-bar-text">25% Complete</div>
                    														</div>
                    													</div>
                    													<div class="help-block with-errors mandatory-error"></div>
                    													<h4>Code pays*:</h4>
                    													<div class="form-group validcountry_codep">
                                                                            <select id="country_codep" name="country_codep" class="form-control" required autofocus>
																				@foreach ($code_pays as $code)
																					@if( strcmp('+229', $code->country_code) == 0 )
																						<option value="{{$code->country_code}}" selected> {{$code->intitulePays}}</option>
																					@else
																						<option value="{{$code->country_code}}"> {{$code->intitulePays}}</option>
																					@endif
																				@endforeach
                                                                            </select>
                    														<div class="input-group-icon"><i class="fa fa-phone"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>													
                    													<h4>Téléphone d'un parent:*:</h4>
                    													<div class="form-group validphonep">
                    														<input class="form-control" name="telphonep" id="telphonep" type="number" placeholder="Phone*" required data-error="Please enter valid phone" placeholder = "Exemple : 94172879">
                    														<div class="input-group-icon"><i class="fa fa-phone"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Adresse mail du parent*:</h4>
                    													<div class="form-group validemailp">
                    														<input class="form-control" name="emailp" id="emailp" type="email" placeholder="Email*" required data-error="Please enter valid email">
                    														<div class="input-group-icon"><i class="fa fa-envelope"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Votre date naissance*:</h4>
                    													<div class="form-group validdate">
                    														<input class="form-control" name="dateNaissance" id="dateNaissance" type="text" placeholder="Date naissance*" required data-error="La date de naissance est requise" value="{{$identite->date_nais}}" readonly >
                    														<div class="input-group-icon"><i class="fa fa-calendar"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Votre lieu naissance*:</h4>
                    													<div class="form-group validlieu">
                    														<input class="form-control" name="lieuNaissance" id="lieuNaissance" type="text" placeholder="Lieu naissance*" required data-error="Le lieu de naissance est requis" value="{{$identite->lieu_nais}}"  readonly >
                    														<div class="input-group-icon"><i class="fa fa-map-marker"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Pays*:</h4>
                    													<div class="form-group validpays">
                    														<input class="form-control" name="pays" id="pays" type="text" placeholder="Pays*" required data-error="le pays est requis"  value="{{$identite->pays}}">
                    														<div class="input-group-icon"><i class="fa fa-map-marker"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Nationalité*:</h4>
                    													<div class="form-group validnationalite">
                    														<input class="form-control" name="nationalite" id="nationalite" type="text" placeholder="Votre nationalité*" required data-error="Nationalité requise" value="{{$identite->nationalite}}" readonly>
                    														<div class="input-group-icon"><i class="fa fa-map-marker"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Diplôme d'entrée à l'Université*:</h4>
                    													<div class="form-group validdiplome">
                    														<select class="form-control" name="diplomeEntree" id="diplomeEntree" title="" required data-error="Le diplôme d'entrée est requis">
																				<option value="" selected></option>
																				<option value="BAC">BAC</option>
																				<option value="DEAT">DEAT</option>
                    														</select>
                    														<div class="input-group-icon"><i class="fa fa-check-square-o"></i></div>
                    														<div class="help-block with-errors"></div>
                    														<input type="hidden" name="numeroTable" id="numeroTable" value="{{$numeroTable}}" >
                    													</div>
                    													<div class="form-group quoteForm-step-2">
                    														<button class="btn btn-custom" type="button" onclick="previousStep1()"><span class="fa fa-arrow-left"></span> Précédent</button> 
                    														<button class="btn btn-custom pull-right" type="button" onclick="nextStep3()">Suivant <span class="fa fa-arrow-right"></span></button> 
                    													</div>
                    												</fieldset>
                    											</div><!-- end section -->
                    
                    											<div id="section-3" class="section slide-right">
                    												<fieldset>
                    													<h3 class="section-title">ETAPE 3 of 5</h3>									
                    													<div class="progress">
                    														<div class="progress-bar" style="width: 50%;">
                    															<div class="progress-bar-text">50% Complete</div>
                    														</div>
                    													</div>
                    													<div class="help-block with-errors mandatory-error"></div>
                    													<h4>Série (BAC ou DEAT)*:</h4>
                    													<div class="form-group validserie">
                    														<input class="form-control" name="serieBac" id="serieBac" type="text" placeholder="Série BAC/DEAT*" required data-error="La série BAC/DEAT est requise"  value="{{$identite->serieBac}}"  maxlength = "4" readonly>
                    														<div class="input-group-icon"><i class="fa fa-check-square-o"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Année d'obtention (BAC ou DEAT)*:</h4>
                    													<div class="form-group validan">
                    														<input class="form-control" name="anDiplom" id="anDiplom" type="number" placeholder="Année d'obtention*" required data-error="Année d'obtention requise" value="{{$identite->anDiplom}}" readonly>
                    														<div class="input-group-icon"><i class="fa fa-calendar"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Lieu d'obtention (BAC ou DEAT)*:</h4>
                    													<div class="form-group validlieudiplom">
                    														<input class="form-control" name="lieuDiplom" id="lieuDiplom" type="text" placeholder="Lieu d'obtention*" required data-error="Le lieu d'obtention (BAC ou DEAT) est requis" value="{{$identite->lieuDiplom}}">
                    														<div class="input-group-icon"><i class="fa fa-map-marker"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Etablissement*:</h4>
                    													<div class="form-group validetablissement">
                    														<select class="form-control" name="idEtablissement" id="idEtablissement" title="" required data-error="Sélectionner votre établissement">
																				<option value="{{$idEtablissement}}">{{$nomEtablissement->descreta}}</option>
                    														</select>
                    														<div class="input-group-icon"><i class="fa fa-check-square-o"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Filière*:</h4>
                    													<div class="form-group validfiliere">
                    														<select class="form-control" name="filiere" id="filiere" title="" required data-error="Sélectionner votre filière">
																				<option value="{{$filiere->idFiliere}}">{{$filiere->intituleFilieres}}</option>
                    														</select>
                    														<div class="input-group-icon"><i class="fa fa-check-square-o"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Année d'étude*:</h4>
                    													<div class="form-group validanneeEtude">
                    														<select class="form-control" name="anneeEtude" id="anneeEtude" title="" required data-error="Sélectionner votre année d'étude">
																				@if( $code_inscription == NULL )
																					<option value="1">Première année</option>
																				@else
																					{!! $anneeEtude !!}
																				@endif
																			</select>
                    														<div class="input-group-icon"><i class="fa fa-calendar"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Niveau d'étude*:</h4>
                    													<div class="form-group validniveau">
                    														<select class="form-control" name="niveau" id="niveau" title="" required data-error="Sélectionner votre niveau d'étude">
                    															{!! $niveauFormation !!}
                    														</select>
                    														<div class="input-group-icon"><i class="fa fa-check-square-o"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<div class="form-group quoteForm-step-3">
                    														<button class="btn btn-custom" type="button" onclick="previousStep2()"><span class="fa fa-arrow-left"></span> Précédent</button> 
                    														<button id="nextStepFour" class="btn btn-custom pull-right" type="button" onclick="nextStep4()">Suivant <span class="fa fa-arrow-right"></span></button>
                    													</div>
                    												</fieldset>
                    											</div><!-- end section -->
                    											
                    											<div id="section-4" class="section slide-right">
                    												<fieldset>
                    													<h3 class="section-title">ETAPE 4 of 5</h3>								
                    													<div class="progress">
                    														<div class="progress-bar" style="width: 75%;">
                    															<div class="progress-bar-text">75% Complete</div>
                    														</div>
                    													</div>
                    													<div class="help-block with-errors mandatory-error"></div>
                    													<h4>Statut*:</h4>
                    													<div class="form-group validstatut">
                    														<select class="form-control" name="statut" id="statut" title="" required data-error="Sélectionner votre statut">
																				<option value="{{$statutInfo->idStatut}}" selected> {{$statutInfo->statut}}</option>
                    														</select>
                    														<div class="input-group-icon"><i class="fa fa-check-square-o"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Année académique*:</h4>
                    													<div class="form-group validanneeAcademique">
                    														<select class="form-control" name="anneeAcademique" id="anneeAcademique" title="" required data-error="Sélectionner votre l'année académique">
																				<option value="{{$annee_acad}}">{{$anneeacad}}</option>
                    														</select>
                    														<div class="input-group-icon"><i class="fa fa-calendar"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Nom et prénom du père*:</h4>
                    													<div class="form-group validnomPere">
                    														<input class="form-control" name="nomPere" id="nomPere" type="text" placeholder="Nom du père*" required data-error="veuillez saisir le nom"  value="{{$identite->nomPere}}" >
                    														<div class="input-group-icon"><i class="fa fa-user"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Nom et prénom de la mère*:</h4>
                    													<div class="form-group validnomMere">
                    														<input class="form-control" name="nomMere" id="nomMere" type="text" placeholder="Nom de la mère*" required data-error="veuillez saisir le nom" value="{{$identite->nomMere}}">
                    														<div class="input-group-icon"><i class="fa fa-user"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Profession du père*:</h4>
                    													<div class="form-group validprofessionPere">
                    														<select class="form-control" name="professionPere" id="professionPere" title="" required data-error="Sélectionner la profession">
                    														    <option value=""></option>
																				@foreach ($professions as $profession)
																					<option value="{{$profession->nomProfession}}" selected> {{$profession->nomProfession}}</option>
																				@endforeach
                    														</select>
                    														<div class="input-group-icon"><i class="fa fa-check-square-o"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Profession de la mère*:</h4>
                    													<div class="form-group validprofessionMere">
                    														<select class="form-control" name="professionMere" id="professionMere" title="" required data-error="Sélectionner la profession">
                    														    <option value=""></option>
																				@foreach ($professions as $profession)
																					<option value="{{$profession->nomProfession}}" selected> {{$profession->nomProfession}}</option>
																				@endforeach
                    														</select>
                    														<div class="input-group-icon"><i class="fa fa-check-square-o"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<h4>Departement d'origine*:</h4>
                    													<div class="form-group validdepartement">
                    														<select class="form-control" name="departement" id="departement" title="" required data-error="Sélectionner le département">
                    															<option value="" selected></option>
                    															<option value="1">Atlantique</option>
                    															<option value="2">Alibori</option>
                    															<option value="3">Atacora</option>
                    															<option value="4">Borgou</option>
                    															<option value="5">Couffo</option>
                    															<option value="6">Donga</option>
                    															<option value="7">Collines</option>
                    															<option value="8">Mono</option>
                    															<option value="9">Littoral</option>
                    															<option value="10">Ouémé</option>
                    															<option value="11">Plateau</option>
                    															<option value="12">Zou</option>
                    															<option value="13">Autre</option>
                    														</select>
                    														<div class="input-group-icon"><i class="fa fa-map-marker"></i></div>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													
                    													<div class="form-group validagree">
                    														<ul class="mgsstyle-checkbox mgscheckbox-style list-unstyled">
                    															<li><input name="aggre" id="aggre" value="1" type="checkbox"><label for="aggre">D'accord avec <a href="javascript:void(0)">Le règlement intérieur &amp; La charte d'utlisation des ressources informatiques</a></label></li>
                    														</ul>
                    														<div class="help-block with-errors"></div>
                    													</div>
                    													<div class="form-group quoteForm-step-4">
                    														<button class="btn btn-custom" type="button" onclick="previousStep3()"><span class="fa fa-arrow-left"></span> Précédent</button> 
                    														<button class="btn btn-custom pull-right" type="button" onclick="nextStep5()">Suivant <span class="fa fa-arrow-right"></span></button>
                    													</div>
                    												</fieldset>
                    											</div><!-- end section -->
                    											
                    											<div id="section-5" class="section review-submit-section slide-right">
                    												<fieldset>
                    													<h3 class="section-title">ETAPE 5 of 5: Review &amp; Submit</h3>
                    													<div class="progress">
                    														<div class="progress-bar" style="width: 100%;">
                    															<div class="progress-bar-text">100% Complete</div>
                    														</div>
                    													</div>
                    													
                    													<h4>La synthèse de vos informations:</h4>
                    													<div class="row">
                    														<div class="column col-md-6 col-sm-12">
                    															<h5>Etape 1</h5>
                    															<div class="section-info-box">
                    																<p id="addressData"></p>
                    																<p id="phoneData"></p>
                    																<p id="emailData"></p>
                    																<p id="celibatData"></p>
                    															</div>	
                    															
                    															<h5>Etape 2</h5>
                    															<div class="section-info-box">
                    																<p id="telphonepData"></p>
                    																<p id="emailpData"></p>
                    																<p id="paysData"></p>
                    															</div>
                    														</div>
                    														<div class="column col-md-6 col-sm-12">
                    															<h5>Etape 3</h5>
                    															<div class="section-info-box">
                    																<p id="anDiplomData"></p>
                    																<p id="lieuDiplomData"></p>
                    															</div>
                    															
                    															<h5>Etape 4</h5>
                    															<div class="section-info-box">
                    																<p id="nomPereData"></p>
                    																<p id="nomMereData"></p>
                    															</div>
                    														</div>
                    														<div class="col-sm-12">
                    															<div><strong>Joindre votre photo d'identité ici!!! [<font color = red>Attendre environ 5s pour le test sur la qualité de votre image. Merci de patienter.</font>]</strong></div>
                    															<div class="form-group attachmentFile">
                    																<label class="input-group-btn">
                    																	<span class="btn">
                    																		Choisir un fichier&hellip; <input name="photo" id="photo" type="file" accept="image/png, image/PNG, image/jpeg, image/jpg" >
                    																	</span>
                    																</label>
                    																<input type="text" id="attachedFile" class="form-control" placeholder="Aucun fichier choisi" readonly>
                    															</div><!-- end form-group -->
                    															<div id="face" >
                    															    <img style="max-width: 200px; max-height: 200px" id="imageView" src="">
                    															    <img style="max-width: 200px; max-height: 200px" id="imageViewResized" src="">
                    															</div>
                    														</div><!-- end col-sm-12 -->
                    														<br />
                    														<div class="form-group col-sm-12">
                    															<div id="humanCheckCaptchaBox"></div><div id="firstDigit"></div> + <div id="secondDigit"></div> = <input name="humanCheckCaptchaInput" id="humanCheckCaptchaInput" placeholder="" maxlength="3" class="form-control" type="text" required data-error="Effectuer l'opération">
                    															<div class="help-block with-errors"></div>
                    														</div><!-- end form-group -->
                    														<div class="col-sm-12">
                    															<p id="AggreData"><strong>D'accord avec <a href="javascript:void(0)">Le règlement intérieur &amp; La charte d'utlisation des ressources informatiques</a>:</strong> <input name="aggre2" id="aggre2" value="1" checked disabled type="checkbox"></p>
                    															<div id="mgsContactSubmit" class="hidden"></div>
                    															
                    															<div id="loading-image" style="display:none;">
                    																<img src="{!! asset('vue/img/loading-image.gif') !!}" alt="Processing" />
                    															</div><!-- end title-box -->
                        														<div id="ficheDinscription" class="form-group"  style="display:none;">
                                                                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#00b1f5; border:1px solid #00b1f5; border-radius:5px;">
                                                                                            <tr>
                                                                                                <td align="center" valign="middle" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;">
                        														                   <a href="javascript:window.location.href = '../vue/tcpdf/pdf/maFicheDePreinscription.php'">	TELECHARGER MA FICHE DE PREINSCRIPTION &raquo;</a>
                                                                                                </td>
                                                                                                
                                                                                            </tr>
                                                                                    </table>
                                                                                    
                        														</div>										
                    															    <br />
                    															<div id="final-step-buttons" class="form-group  quoteForm-step-5">
                    																<button class="btn btn-custom" type="button" onclick="previousStep4()"><span class="fa fa-arrow-left"></span> Précédent</button> 
                    																<button id="Submit" class="btn btn-custom pull-right" type="submit">Submit </button>
                    															</div>										
                    														</div>									
                    													</div>
                    												</fieldset>
                    											</div><!-- end section -->
                    										</div><!-- end section-wrap -->
                    									</form>
                    								</div><!-- end col-md-6 -->
                    						</div><!-- end col-sm-12 -->
                    			</div><!-- end display-table-cell -->
                    		</div><!-- end display-table -->
                    </div><!-- end icon-box text-center -->
                </div><!-- end col-md-6 col-lg-6 d-flex align-items-stretch mb-5 mb-lg-0 -->
            </div><!-- end row -->
        </div><!-- end container -->
	</section><!-- End Icon Boxes Section -->
	
	<!-- jQuery Library -->
	<script src="{!! asset('vue/assets/jsmultistep/jquery-3.4.1.min.js') !!}"></script>
	<!-- Bootstrap Datepicker -->  
	<script src="{!! asset('vue/assets/jsmultistep/bootstrap-datepicker.min.js') !!}"></script>
	<!-- Bootstrap Datetimepicker Calendar Language JS -->
	<script src="{!! asset('vue/assets/jsmultistep/locales/bootstrap-datepicker.fr.js') !!}"></script>
	<!-- sweetalert Js -->
    <script src="{!! asset('vue/assets/jsmultistep/sweetalert.min.js') !!}"></script>
	<!-- Form validator Js -->
	<script src="{!! asset('vue/assets/jsmultistep/validator.min.js') !!}"></script>
	<!-- plugin main Js -->
    <script src="{!! asset('vue/assets/jsmultistep/multistepform-pop-fr.js') !!}"></script>
	<script type="text/javascript" src="{!! asset('newjs/webcam.js') !!}"></script>
	<script src="{!! asset('blockui/jquery.blockUI.js') !!}"></script>
	<script src="{!! asset('vue/assets/objectdetect.js') !!}"></script>
    <script src="{!! asset('vue/assets/objectdetect.frontalface.js') !!}"></script>

	<script type="text/javascript">
		QuoteForm.addEventListener("keydown", function (e) {
			if (e.keyCode == 13)
				e.preventDefault()
		});
	</script>

	<script>
		function abs(a){
			if(a <0) return(-1*a)
			return(a)
		}
		function max(a,b){
			if(a>b) return(a)
			return(b)
		}

		function detectFaces(canvas, e) {
			//var context = canvas.getContext('2d');
			var aire_total = canvas.width*canvas.height
			console.log('width :'+canvas.width+',  height: '+canvas.height+ ',  aire totale: '+aire_total)
			var detector;
			var classifier = objectdetect.frontalface;
			var context = canvas.getContext('2d');
			console.log('e:  '+e.target.value)
			detector = new objectdetect.detector(canvas.width, canvas.height, 1.2, classifier);
			// Detect faces in the image:
			var rects = detector.detect(canvas);

			if( rects.length<5 ) return('1')
			else{
				// Draw rectangles around detected faces:
				var aires = []
				var max_aire = 0
				for (var i = 0; i < rects.length; ++i) {
					var coord = rects[i];
					var air = abs(coord[3]- coord[1])*abs(coord[0]- coord[2]) 
					max_aire = max( air, max_aire )
					aires.push( air )
					console.log('coord: ', coord)
					console.log('aire: ', air)
					context.beginPath();
					context.lineWidth = '' + coord[4] * .5;
					context.strokeStyle = 'rgba(0, 255, 255, 0.75)';
					context.rect(coord[0], coord[1], coord[2], coord[3]);
					context.stroke();
				}
				console.log('max aire: ', max_aire, ',  rapport: '+ aire_total/max_aire )
				if( aire_total/max_aire > 20  ) return( '-1')
				return('0')
			} 
		}
    </script>

<script>
	
	var blobURL;
	var fileName;

	// Convert a base64 string into a binary Uint8 Array 
	// https://gist.github.com/borismus/1032746
	function convertDataURIToBinary(dataURI) {
		var BASE64_MARKER = ";base64,";
		var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
		var base64 = dataURI.substring(base64Index);
		var raw = window.atob(base64);
		var rawLength = raw.length;
		var array = new Uint8Array(new ArrayBuffer(rawLength));

		for(i = 0; i < rawLength; i++) {
			array[i] = raw.charCodeAt(i);
		}
		return array;
	}
	// File Reader
	// https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
	function readFile(e) {
		//on fixe la largeur à  maximale 
		const max = 250

	    const fileName = e.target.files[0].name;
	    const reader = new FileReader();
	    reader.readAsDataURL(e.target.files[0]);
	    reader.onload = event => {
	        const img = new Image();
	        img.src = event.target.result;
	        // on affiche l'image initiale
	        img.onload = () => {
	                const elem = document.createElement('canvas');
	                //Nouveau code---------
	                var width = img.width
	                var height = img.height
	                console.log('width: '+width+', height: '+height)
	                if( width< max ){
	                	var r = max/width
	                	height = r* height
	                }
	                else if( height < max ){
	                	var r = max/height
	                	width = r * width
	                }
	                else{
	                	var r = max/height
	                	width = max
	                	height = r*height
	                }
	                elem.width = width
	                elem.height = height
	                //Fin Nouveau code---------

	                console.log('width: '+width+', height: '+height)
	                
	                const ctx = elem.getContext('2d');
	                // img.width and img.height will contain the original dimensions
	                ctx.drawImage(img, 0, 0, width, height);
	                ctx.canvas.toBlob((blob) => {
	                    const file = new File([blob], fileName, {
	                        type: 'image/jpeg',
	                        lastModified: Date.now()
	                    });
	                    console.log('file, '+file)
	                }, 'image/jpeg', 1);
	                //On récupère et affiche l'images réduite
	                dataUrl = elem.toDataURL()
	                document.getElementById('imageView').src = dataUrl;
	                var resultat = detectFaces(elem, e)
	                if(resultat == -1 || resultat == 1) {
	                    $("#final-step-buttons").hide();
						Swal.fire("Oops...", "Veuillez changer cette image. Elle ne correspond pas aux exigences de la plateforme AfricaWebStudent pour une photo d'identité!!!", "error");
	                }else{
	                    $("#final-step-buttons").show();
						Swal.fire("<i>AfricaWebStudent</i> <u>Inscription</u>", "Félicitations à vous. Test de qualité réussie pour votre image. Cliquez sur le bouton <b>Ok</b> et ensuite sur <b>Submit</b> pour finaliser votre inscription.</Submit>!!!", "success");
	                }
	            },
	            reader.onerror = error => console.log(error);

	    };
	}
	document.getElementById('photo').addEventListener('change', readFile, false);
</script>

<script type="text/javascript">
    var uploadField = document.getElementById("photo");

    /*uploadField.onchange = function() {
        if(this.files[0].size > 1000000){
            sweetAlert("Oops...", "Veuillez choisir un fichier de taille < 1M!", "error");
            this.value = "";
        };
    };*/

</script>

@endsection