@extends('layouts.website-subscribe')
@section('title') Transport @endsection
@section('nolife') current @endsection
@section('main')
<div id="checkout-loader" class="loading-mask d-none">
	<div class="loader">
		<div class="p-4 text-center">
			<div class="custom-loader"></div>
			<h3 class="my-3" style="font-weight:400!important;font-size:18">Chargement...</h3>
			<p class="mb-0">Traitement des données en cours, veuillez patienter</p>
		</div>
	</div>
</div>
<main>
	<div class="row container-lxx">
		<div class="col-12 col-md-6 col-lg-4">
			<div class="subscribe-banner bg_image bg_image-xl" style="background-image: url('{{ asset('assets/img/banner/bg-image-transport.jpg') }}');">
				<h3 class="title" style="color:#fff; display:none">Assurance Transport & Fret</h3>
			</div>
		</div>
		<div class="col-12 col-md-6 col-lg-8">
			<div id="wizard_container">
				<div class="text-center" style="padding-top:75px;">
					<h4 style="font-weight:500;color:#235d9b">SOUSCRIPTION ASSURANCE TRANSPORT & FRET</h4>
				</div>
				<div class="wizard-content">
					<form id="subscription_wizard" class="subscription_wizard wizard-circle wizard" autocomplete="off">
					@csrf
					
						<div class="col-md-6 block-content progress-block inner-full progress-items-rect" id="progress-fa917d37">
							<div style="padding-top:18px; padding-bottom:12px;" id="progress-bar">
								<span class="progress-item"></span>
								<span class="progress-item"></span>
								<span class="progress-item"></span>
								<span class="progress-item"></span>
								<span class="progress-item"></span>
								<span class="progress-item"></span>
								<span class="progress-item"></span>
								<span class="progress-item"></span>
								<span class="progress-item"></span>
								<span class="progress-item"></span>
								<span class="progress-item"></span>
								<span class="progress-item"></span>
							</div>
						</div>
						
						<h5>Démarrage</h5>
						<section class="step-1" id="tsubscription-step-1">
							<div class="step" data-state="budget">
								<div class="question_title">
									<h5>Démarrage de la souscription</h5>
									<p>Vous êtes sur le point de démarrer votre souscription à l'assurance TRANSPORT & FRET</p>
								</div>
								<div class="row justify-content-center">
									<div class="col-lg-7">
										<div class="box_general">
											<div class="text-center">
												<img src="{{asset('assets/img/icons/confirmed.svg')}}" alt="" width="120" />
											</div>
											<div class="about__list-box">
												<div class="col-12 p-5 justify-content-center">
													<div class="form-check">
														<input type="checkbox" class="form-check-input" id="handshakeBox" required>
														<label class="form-check-label font-size-14 line-height-26" for="handshakeBox">
															En souscrivant, vous consentez à la collecte de vos informations personnelles, utilisées uniquement pour la gestion de votre contrat d'assurance, et protégées en accord avec notre <a href="javascript:void(0)" class="font-weight-bold">politique de confidentialité</a>.
														</label>
													</div>
												</div>
												<input type="hidden" class="form-control" name="subscriber[subscription_product_id]" id="subscription_product_id" value="{{$product->id}}" required>
												<input type="hidden" class="form-control" name="subscription[partner]" id="partner">
											</div>
										</div>
									</div>
									<div class="form-row col-12 justify-content-center">
										<div class="text-right form-group col-md-6 col-sm-6 col-xs-12 btn-left-steps">
											<a href="{{ route('home') }}" class="btn btn-preview" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
												<span style="font-size:13px;">
													<i class="icon-copy" style="font-size:16px;"></i>&nbsp;&nbsp;REFUSER
												</span>
											</a>
										</div>
										<div class="text-left form-group col-md-6 col-sm-6 col-xs-12 btn-right-steps">
											<button type="button" class="btn btn-next-disclaimer" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
												<span style="font-size:13px;">ACCEPTER&nbsp;&nbsp;
													<i class="icon-copy" style="font-size:16px;"></i> 
												</span>
											</button>
										</div>
									</div>
								</div>
							</div>
							<div class="modal fade" id="disclaimerModal" role="dialog" style="display: none;" aria-modal="true">
								<div class="modal-dialog modal-dialog-centered">
									<div class="modal-content">
										<div class="Modal-header" style="">
											<div class=""></div>
											<div class="center">
												<img class="AtitoImg image" src="{{asset('assets/img/avatar-1.png')}}" alt="">
											</div>
											<button type="button" class="btn-close custom-btn-close border p-1 me-0 text-dark" data-bs-dismiss="modal" aria-label="Close">
												<i class="ti ti-x"></i>
											</button>
										</div>
										<div class="modal-body">
											<div class="text-center">
												<strong class="mt-4 mb-4 font-size-16 font-weight-bold text-danger">Information importante</strong><br><br>
												<p style="text-align: center; width: 100%; margin: 10px auto; font-size: 14px; word-wrap: break-word; color: #444; font-weight: 400" class="line-height-24">
												  Les déclarations de l’assuré constituent la base du contrat d’assurance.
												  </br>Nous vous invitons par conséquent à répondre aux questionnaires ci-après avec sincérité et exactitude.
												  </br></br>Notez que vos déclarations sont strictement confidentielles et permettent uniquement à l’assureur d’établir un contrat qui correspond à vos besoins spécifiques.
												  </br></br>À toutes fins utiles, nous vous rappelons que l’assureur, en application des dispositions des articles 18 et 19 du code CIMA, se réserve le droit de vérifier l’exactitude des déclarations au moment du sinistre et pourrait refuser de payer les capitaux garantis en cas de fausses déclarations intentionnelles.
												</p><br>
												<div class="d-flex align-items-center justify-content-center mb-3">
													<button type="button" class="btn" data-bs-dismiss="modal" style="background:#235d9b; width:100px;color:#ffffff;margin:0px 5px">
														<span style="font-size:13px;">Fermer</span>
													</button>				
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
						
						<h5>Type client</h5>
						<section class="step-2" id="tsubscription-step-2">
							<div class="" data-state="">
								<div class="question_title">
									<h5>Vous êtes ?</h5>
									<p>Veuillez nous indiquer si vous êtes un particulier ou une entreprise</p>
								</div>
								<div class="row justify-content-center">
									<div class="col-lg-5">
										<div class="box_general">
											<div class="Error text-danger justify-content-center">
												<div class="errorClientType align-items-center">
													<span class="ti ti-alert-triangle"></span>&nbsp;Vous devez indiquer si vous êtes un particulier ou une entreprise
												</div>
											</div>
											<div class="row">
												<div class="col-md-6 col-sm-6 mb-2">
													<div id="particular_client_checker" class="justify-content-center align-items-center text-center shadow border radio_checker" style="padding:30px; border-radius:8px;">
														<div class="col-12 justify-content-center align-items-center">
															<div class="row align-items-center justify-content-center text-center">
																<img src="{{ asset('assets/img/particular.png') }}" style="width:150px;height:100px;object-fit:contain" alt="" />
															</div>                    
														</div> 
														<div class="col-12" style="margin-top:5px">
															<label class="fs-13">PARTICULIER</label>
														</div>
														<div class="icheck-danger icheck-inline">
															<input class="checkbox" required onchange="checked_client_1()" type="radio" value="1" name="subscriber[client_type]" id="clientType1">
														</div>
													</div>
												</div>
												<div class="col-md-6 col-sm-6 mb-2">
													<div id="enterprise_client_checker" class="justify-content-center align-items-center text-center shadow border radio_checker" style="padding:30px; border-radius:8px;">
														<div class="col-12 justify-content-center align-items-center">
															<div class="row align-items-center justify-content-center text-center">
																<img src="{{ asset('assets/img/enterprise.png') }}" style="width:150px;height:100px;object-fit:contain" alt="" />
															</div>                    
														</div> 
														<div class="col-12" style="margin-top:5px">
															<label class="fs-13">ENTREPRISE</label>
														</div>
														<div class="icheck-danger icheck-inline">
															<input class="checkbox" required onchange="checked_client_2()" type="radio" value="2" name="subscriber[client_type]" id="clientType2">
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="form-row col-12 p-10 justify-content-center">
										<div class="text-right form-group col-md-6 col-sm-6 col-xs-12 btn-left-steps">
											<button type="button" class="btn btn-preview" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
												<span style="font-size:13px;">
													<i class="icon-copy" style="font-size:16px;"></i>&nbsp;&nbsp;PRECEDENT
												</span>
											</button>
										</div>
										<div class="text-left form-group col-md-6 col-sm-6 col-xs-12 btn-right-steps">
											<button type="button" class="btn btn-next-client" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
												<span style="font-size:13px;">SUIVANT&nbsp;&nbsp;
													<i class="icon-copy" style="font-size:16px;"></i>
												</span>
											</button>
										</div>
									</div>
								</div>
							</div>
						</section>
						
						<h5>Qui êtes-vous ?</h5>
						<section class="step-3" id="tsubscription-step-3">
							<div class="branc" id="whoareyou">
								<div class="ste" data-state="">
									<div class="question_title">
										<h5>Veuillez entrer les informations du souscripteur</h5>
										<p>Nous ne cherchons pas à être indiscret. Votre nom nous permettra de vous adresser un contrat personnalisé</p>
									</div>
									<div class="row justify-content-center">
										<div class="col-lg-5">
											<div class="box_general">
												<div class="box_general">
													<div class="row">
														<div class="justify-content-center d-none" id="enterprise_assured_info">
															<legend class="text-danger font-size-18">Informations de l'entreprise</legend>
															<div class="row">
																<div class="form-group col-md-12">
																	<label class="col-form-label">Nom de l'entreprise ou Raison sociale</label><strong style="color: red"> *</strong>
																	<input type="text" class="form-control" name="subscriber[company_name]" id="company_name" required> 
																</div>
																<div class="form-group col-md-12">
																	<label class="col-form-label">Email de l'entreprise</label><strong style="color: red"> *</strong>
																	<input type="email" class="form-control" name="subscriber[company_mail]" id="company_mail" required>
																</div>
																<div class="form-group col-md-12">
																	<label class="col-form-label">N° Téléphone de l'entreprise</label><strong style="color: red"> *</strong>
																	<input type="text" class="form-control" name="subscriber[company_contact]" id="company_contact" data-inputmask="'mask': ['99-99-99-99-99', '+999 99-99-99-99-99']" required data-mask />
																</div>
																<div class="form-group col-md-12">
																	<label class="col-form-label">Adresse de la société</label><strong style="color: red"> *</strong>
																	<input type="text" class="form-control" name="subscriber[company_address]" id="company_address" maxlength="50" required> 
																</div>
															</div>
														</div>
														<div id="particular_assured_info">
															<legend class="text-danger font-size-18 d-none" id="particular_title_info">Informations du responsable</legend>
															<div class="form-group col-md-12">
																 <label class="col-form-label">Civilité</label><strong style="color: red"> *</strong>
																 <select name="subscriber[civility]" id="civility" 
																	class="form-control custom-select" required>
																	<option value="" selected>--</option>
																	<option value="M.">Monsieur</option>
																	<option value="Mme.">Madame</option>
																	<option value="Mlle.">Mademoiselle</option>
																</select>
															</div>
															<div class="form-group col-md-12">
																<label class="col-form-label">Nom</label><strong style="color: red"> *</strong>
																<input type="text" class="form-control" name="subscriber[lastname]" id="lastname" required>
																<input type="hidden" class="form-control" name="subscriber[code]" id="subscriber_code">
															</div>
															<div class="form-group col-md-12">
																<label class="col-form-label">Prénom(s) de l'élève</label><strong style="color: red"> *</strong>
																<input type="text" class="form-control" name="subscriber[firstname]" id="firstname" required>
															</div>
															<div class="form-group col-md-12 d-none">
																<label class="col-form-label">Date de naissance</label><strong style="color: red"> *</strong>
																<input type="date" class="form-control" name="subscriber[birthdate]" id="birthdate" required>
															</div>
															<div class="form-group col-md-12 d-none">
																<label class="col-form-label">Lieu de naissance</label>
																<input type="text" class="form-control" name="subscriber[birthplace]" id="birthplace">
															</div>
															<div class="form-group col-md-12 d-none">
																<label class="col-form-label">Type de pièce d'identité</label><strong style="color: red"> *</strong>
																<select name="subscriber[identityType]" required id="identityType" class="form-control custom-select">
																	<option value="" selected>--</option>
																	<option value="CNI">Carte Nationale d'Identité</option>
																	<option value="P">Passeport</option>
																	<option value="AI">Attestation d'Identité</option>
																	<option value="CC">Carte Consulaire</option>
																	<option value="EN">Extrait de Naissance</option>
																</select>
															</div>
															<div class="form-group col-md-12 d-none">
																<label class="col-form-label">N° Pièce d'identité</label><strong style="color: red"> *</strong>
																<input type="text" class="form-control" name="subscriber[identityNumber]" id="identityNumber" required />
															</div>
															<div class="form-group col-md-12 d-none">
																<label class="col-form-label">Situation matrimoniale</label><strong style="color: red"> *</strong>
																<select name="subscriber[marital]" required id="marital" class="form-control custom-select">
																	<option value="" >--</option>
																	<option value="C" >Celibataire</option>
																	<option value="M" >Marié(e)</option>
																	<option value="D" >Divorcé(e)</option>
																	<option value="V" >Veuf(ve)</option>
																</select>
															</div>
															<div class="form-group col-md-12">
																<div class="d-flex align-items-center" style="">
																	<label class="col-form-label">N° Téléphone (WhatsApp)</label><strong style="color: red"> *</strong>
																	<div class="ms-2 InfoModal-button-open" data-bs-toggle="tooltip" data-bs-placement="left"
																		title="Votre numéro de téléphone sera utile pour recevoir vos accès à votre espace client. Idéalement, nous vous encourageons à fournir un numéro WhatsApp afin de recevoir directement des messages de la part de notre service client">
																		<div class="Tooltip-picto">?</div>
																	</div>
																</div>
																<input type="text" name="subscriber[contact]" id="contact" class="form-control" data-inputmask="'mask': ['99-99-99-99-99']" required data-mask />
															</div>
															<div class="form-group col-md-12">
																<div class="d-flex align-items-center" style="">
																	<label class="col-form-label">Adresse email</label><strong style="color: red"> *</strong>
																	<div class="ms-2 InfoModal-button-open" data-bs-toggle="tooltip" data-bs-placement="left"
																		title="Votre adresse email sera utilisée pour créer un compte client sur notre plateforme. Elle nous permettra également de vous envoyer le récapitulatif de votre bulletin de souscription mais aussi votre contrat d'assurance, et toute autre information importante">
																		<div class="Tooltip-picto">?</div>
																	</div>
																</div>
																<input type="email" name="subscriber[email]" id="subscriber_email" class="form-control" required onChange="mymail.verif(this);">
																<span id="existing-mail" class="existing-mail">Cet email est déjà utilisé. Choisissez-en un autre</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="modal fade" id="phoneModal" role="dialog" style="display: none;" aria-modal="true">
												<div class="modal-dialog modal-dialog-centered">
													<div class="modal-content">
														<div class="Modal-header" style="">
															<div class=""></div>
															<div class="center">
																<img class="AtitoImg image" src="{{asset('assets/img/avatar-1.png')}}" alt="">
															</div>
															<button type="button" class="btn-close custom-btn-close border p-1 me-0 text-dark" data-bs-dismiss="modal" aria-label="Close">
																<i class="ti ti-x"></i>
															</button>
														</div>
														<div class="modal-body">
															<div class="">
																<strong class="mt-4 mb-4 font-size-18 font-weight-bold text-danger">Votre numéro de téléphone est indispensable</strong><br><br>
																<p class="mb-4 font-size-15 line-height-24">Votre numéro de téléphone sera utile pour recevoir vos accès à votre espace client. Idéalement, nous vous encourageons à fournir un numéro WhatsApp afin de recevoir directement des messages de la part de notre service client. En utilisant WhatsApp, nous pouvons vous envoyer rapidement des notifications importantes, des mises à jour de votre contrat, ainsi que des réponses à vos questions en temps réel.</p>
																<div class="d-flex align-items-center justify-content-center mb-3">
																	<button type="button" class="btn" data-bs-dismiss="modal" style="background:#235d9b; width:100px;color:#ffffff;margin:0px 5px">
																		<span style="font-size:13px;">Fermer</span>
																	</button>				
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="modal fade" id="emailModal" role="dialog" style="display: none;" aria-modal="true">
												<div class="modal-dialog modal-dialog-centered">
													<div class="modal-content">
														<div class="Modal-header" style="">
															<div class=""></div>
															<div class="center">
																<img class="AtitoImg image" src="{{asset('assets/img/avatar-1.png')}}" alt="">
															</div>
															<button type="button" class="btn-close custom-btn-close border p-1 me-0 text-dark" data-bs-dismiss="modal" aria-label="Close">
																<i class="ti ti-x"></i>
															</button>
														</div>
														<div class="modal-body">
															<div class="">
																<strong class="mt-4 mb-4 font-size-18 font-weight-bold text-danger">Votre adresse email est indispensable</strong><br><br>
																<p class="mb-4 font-size-15 line-height-24">Votre adresse email sera utilisée pour créer un compte client sur notre plateforme. Elle nous permettra également de vous envoyer le récapitulatif de votre bulletin de souscription mais aussi votre contrat d'assurance, et toute autre information importante. En fournissant une adresse email valide, vous assurez que vous ne manquerez aucune communication essentielle de notre part</p>
																<div class="d-flex align-items-center justify-content-center mb-3">
																	<button type="button" class="btn" data-bs-dismiss="modal" style="background:#235d9b; width:100px;color:#ffffff;margin:0px 5px">
																		<span style="font-size:13px;">Fermer</span>
																	</button>				
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="form-row col-12 p-10 justify-content-center">
											<div class="text-right form-group col-md-6 col-sm-6 col-xs-12 btn-left-steps">
												<button type="button" class="btn btn-preview" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
													<span style="font-size:13px;">
														<i class="icon-copy" style="font-size:16px;"></i>&nbsp;&nbsp;PRECEDENT
													</span>
												</button>
											</div>
											<div class="text-left form-group col-md-6 col-sm-6 col-xs-12 btn-right-steps">
												<button type="button" class="btn btn-primary" id="btn-subscriber-info" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
													<span style="font-size:13px;">SUIVANT&nbsp;&nbsp;
														<i class="icon-copy" style="font-size:16px;"></i> 
													</span>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
						
						<h5>Mode de transport</h5>
						<section class="step-4" id="tsubscription-step-4">
							<div class="branc" id="periodCover">
								<div class="ste" data-state="">
									<div class="question_title">
										<h5>Quel moyen de transport utilisez-vous pour le transport de vos marchandises ?</h5>
										<p>Veuillez indiquer le mode de transport utilisé pour le transport de vos marchandises</p>
									</div>
									<div class="row justify-content-center">
										<div class="col-lg-9">
											<div class="box_general text-center">
												<div class="Error text-danger justify-content-center">
													<div class="errorModeTransport align-items-center">
														<span class="ti ti-alert-triangle"></span>&nbsp;Vous devez choisir un mode de transport
													</div>
												</div>
												<div class="row">
													<div class="col-md-12 col-sm-12 col-xs-12 row justify-content-around">
														<div id="transport_1_checker" class="col-md-3 col-sm-12 col-xs-12 justify-content-center align-items-center text-center shadow border radio_checker mb-2" style="padding:15px; border-radius:8px;">
															<div class="col-12 justify-content-center align-items-center">
																<div class="row align-items-center justify-content-center text-center">
																	<img src="{{ asset('assets/img/maritime.png') }}" style="width: 125px; height: 120px;object-fit:contain" alt="" />
																</div>                    
															</div> 
															<div class="col-12" style="margin-top:5px">
															  <label class="fs-13">MARITIME</label>
															</div>
															<div class="icheck-danger icheck-inline">
																<input class="checkbox" required onchange="checked_mode_1()" type="radio" name="subscription[mode_transport]" value="1" id="transport1">
															</div>
														</div>
														<div id="transport_2_checker" class="col-md-3 col-sm-12 col-xs-12 justify-content-center align-items-center text-center shadow border radio_checker mb-2" style="padding:15px; border-radius:8px;">
															<div class="col-12 justify-content-center align-items-center">
																<div class="row align-items-center justify-content-center text-center">
																	<img src="{{ asset('assets/img/airplane.png') }}" style="width: 125px; height: 120px;object-fit:contain" alt="" />
																</div>                    
															</div> 
															<div class="col-12" style="margin-top:5px">
															  <label class="fs-13">AERIEN</label>
															</div>
															<div class="icheck-danger icheck-inline">
																<input class="checkbox" required onchange="checked_mode_2()" type="radio" name="subscription[mode_transport]" value="2" id="transport2">
															</div>
														</div>
														<div id="transport_3_checker" class="col-md-3 col-sm-12 col-xs-12 justify-content-center align-items-center text-center shadow border radio_checker mb-2" style="padding:15px; border-radius:8px;">
															<div class="col-12 justify-content-center align-items-center">
																<div class="row align-items-center justify-content-center text-center">
																	<img src="{{ asset('assets/img/land.png') }}" style="width: 125px; height: 120px;object-fit:contain" alt="" />
																</div>                    
															</div> 
															<div class="col-12" style="margin-top:5px">
															  <label class="fs-13">TERRESTRE</label>
															</div>
															<div class="icheck-danger icheck-inline">
																<input class="checkbox" required onchange="checked_mode_3()" type="radio" name="subscription[mode_transport]" value="3" id="transport3">
															</div>
														</div>
													</div>
												</div>
											</div>		
											<input type="hidden" name="subscription[transport_type]" id="transport_mod">
											<input type="hidden" name="subscription[formula]" id="formula">
											<input type="hidden" name="subscription[destination]" id="destination">
										</div>
										<div class="form-row col-12 p-10 justify-content-center">
											<div class="text-right form-group col-md-6 col-sm-6 col-xs-12 btn-left-steps">
												<button type="button" class="btn btn-preview" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
													<span style="font-size:13px;">
														<i class="icon-copy" style="font-size:16px;"></i>&nbsp;&nbsp;PRECEDENT
													</span>
												</button>
											</div>
											<div class="text-left form-group col-md-6 col-sm-6 col-xs-12 btn-right-steps">
												<button type="button" class="btn btn-next-mode-transport" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
													<span style="font-size:13px;">SUIVANT&nbsp;&nbsp;
														<i class="icon-copy" style="font-size:16px;"></i>
													</span>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
						
						<h5>Formule de souscription</h5>
						<section class="step-5" id="tsubscription-step-5">
							<div class="branc" id="periodCover">
								<div class="ste" data-state="">
									<div class="question_title">
										<h5>Quelle formule de protection souhaitez-vous souscrire ?</h5>
										<p>Veuillez sélectionner la formule de couverture qui correspond le mieux à vos besoins</p>
									</div>
									<div class="row justify-content-center">
										<div class="col-lg-7">
											<!-- #Transport maritime -->
											<div id="transport_1_item" class="">
												<div class="box_general text-center">
													<div class="Error text-danger justify-content-center">
														<div class="errorFormulaMaritime align-items-center">
															<span class="ti ti-alert-triangle"></span>&nbsp;Vous devez choisir une formule de couverture avant de poursuivre
														</div>
													</div>
													<div class="row">
														<div class="col-md-12 col-sm-12 col-xs-12 row justify-content-around">
															<div id="maritime_1_checker" class="col-md-4 col-sm-12 col-xs-12 justify-content-center align-items-center text-center shadow border radio_checker mb-2" style="padding:15px; border-radius:8px;">
																<div class="col-12 justify-content-center align-items-center">
																	<div class="row align-items-center justify-content-center text-center">
																		<img src="{{ asset('assets/img/maritime.png') }}" style="width: 125px; height: 120px;object-fit:contain" alt="" />
																	</div>                    
																</div> 
																<div class="col-12" style="margin-top:5px">
																  <label class="fs-13">FAP SAUF</label>
																</div>
																<div class="icheck-danger icheck-inline">
																	<input class="checkbox" required onchange="unchecked_maritime2()" type="radio" name="subscription[formula_maritime]" value="1" id="maritime1">
																</div>
															</div>
															<div id="maritime_2_checker" class="col-md-4 col-sm-12 col-xs-12 justify-content-center align-items-center text-center shadow border radio_checker mb-2" style="padding:15px; border-radius:8px;">
																<div class="col-12 justify-content-center align-items-center">
																	<div class="row align-items-center justify-content-center text-center">
																		<img src="{{ asset('assets/img/maritime.png') }}" style="width: 125px; height: 120px;object-fit:contain" alt="" />
																	</div>                    
																</div> 
																<div class="col-12" style="margin-top:5px">
																  <label class="fs-13">TOUS RISQUES</label>
																</div>
																<div class="icheck-danger icheck-inline">
																	<input class="checkbox" required onchange="unchecked_maritime1()" type="radio" name="subscription[formula_maritime]" value="2" id="maritime2">
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="form-row col-12 p-10 justify-content-center">
													<div class="text-right form-group col-md-6 col-sm-6 col-xs-12 btn-left-steps">
														<button type="button" class="btn btn-preview" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
															<span style="font-size:13px;">
																<i class="icon-copy" style="font-size:16px;"></i>&nbsp;&nbsp;PRECEDENT
															</span>
														</button>
													</div>
													<div class="text-left form-group col-md-6 col-sm-6 col-xs-12 btn-right-steps">
														<button type="button" class="btn btn-next-formula-maritime" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
															<span style="font-size:13px;">SUIVANT&nbsp;&nbsp;
																<i class="icon-copy" style="font-size:16px;"></i>
															</span>
														</button>
													</div>
												</div>
											</div>
											<!-- #Transport aérien -->
											<div id="transport_2_item" class="">
												<div class="box_general text-center">
													<div class="Error text-danger justify-content-center">
														<div class="errorFormulaAir align-items-center">
															<span class="ti ti-alert-triangle"></span>&nbsp;Vous devez choisir une formule de couverture avant de poursuivre
														</div>
													</div>
													<div class="row">
														<div class="col-md-12 col-sm-12 col-xs-12 row justify-content-around">
															<div id="aerien_1_checker" class="col-md-4 col-sm-12 col-xs-12 justify-content-center align-items-center text-center shadow border radio_checker mb-2" style="padding:15px; border-radius:8px;">
																<div class="col-12 justify-content-center align-items-center">
																	<div class="row align-items-center justify-content-center text-center">
																		<img src="{{ asset('assets/img/airplane.png') }}" style="width: 125px; height: 120px;object-fit:contain" alt="" />
																	</div>                    
																</div> 
																<div class="col-12" style="margin-top:5px">
																  <label class="fs-13">ACCIDENTS MAJEURS</label>
																</div>
																<div class="icheck-danger icheck-inline">
																	<input class="checkbox" required onchange="unchecked_aerien2()" type="radio" name="subscription[formula_air]" value="1" id="aerien1">
																</div>
															</div>
															<div id="aerien_2_checker" class="col-md-4 col-sm-12 col-xs-12 justify-content-center align-items-center text-center shadow border radio_checker mb-2" style="padding:15px; border-radius:8px;">
																<div class="col-12 justify-content-center align-items-center">
																	<div class="row align-items-center justify-content-center text-center">
																		<img src="{{ asset('assets/img/airplane.png') }}" style="width: 125px; height: 120px;object-fit:contain" alt="" />
																	</div>                    
																</div> 
																<div class="col-12" style="margin-top:5px">
																  <label class="fs-13">TOUS RISQUES</label>
																</div>
																<div class="icheck-danger icheck-inline">
																	<input class="checkbox" required onchange="unchecked_aerien1()" type="radio" name="subscription[formula_air]" value="2" id="aerien2">
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="form-row col-12 p-10 justify-content-center">
													<div class="text-right form-group col-md-6 col-sm-6 col-xs-12 btn-left-steps">
														<button type="button" class="btn btn-preview" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
															<span style="font-size:13px;">
																<i class="icon-copy" style="font-size:16px;"></i>&nbsp;&nbsp;PRECEDENT
															</span>
														</button>
													</div>
													<div class="text-left form-group col-md-6 col-sm-6 col-xs-12 btn-right-steps">
														<button type="button" class="btn btn-next-formula-air" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
															<span style="font-size:13px;">SUIVANT&nbsp;&nbsp;
																<i class="icon-copy" style="font-size:16px;"></i>
															</span>
														</button>
													</div>
												</div>
											</div>
											<!-- #Transport terrestre -->
											<div id="transport_3_item" class="">
												<div class="box_general text-center">
													<div class="Error text-danger justify-content-center">
														<div class="errorFormulaLand align-items-center">
															<span class="ti ti-alert-triangle"></span>&nbsp;Vous devez choisir une formule de couverture avant de poursuivre
														</div>
													</div>
													<div class="row">
														<div class="col-md-12 col-sm-12 col-xs-12 row justify-content-around">
															<div id="terrestre_1_checker" class="col-md-4 col-sm-12 col-xs-12 justify-content-center align-items-center text-center shadow border radio_checker mb-2" style="padding:15px; border-radius:8px;">
																<div class="col-12 justify-content-center align-items-center">
																	<div class="row align-items-center justify-content-center text-center">
																		<img src="{{ asset('assets/img/land.png') }}" style="width: 125px; height: 120px;object-fit:contain" alt="" />
																	</div>                    
																</div> 
																<div class="col-12" style="margin-top:5px">
																  <label class="fs-13">ACCIDENTS CARACTERISÉS</label>
																</div>
																<div class="icheck-danger icheck-inline">
																	<input class="checkbox" required onchange="unchecked_terrestre2()" type="radio" name="subscription[formula_land]" value="1" id="terrestre1">
																</div>
															</div>
															<div id="terrestre_2_checker" class="col-md-4 col-sm-12 col-xs-12 justify-content-center align-items-center text-center shadow border radio_checker mb-2" style="padding:15px; border-radius:8px;">
																<div class="col-12 justify-content-center align-items-center">
																	<div class="row align-items-center justify-content-center text-center">
																		<img src="{{ asset('assets/img/land.png') }}" style="width: 125px; height: 120px;object-fit:contain" alt="" />
																	</div>                    
																</div> 
																<div class="col-12" style="margin-top:5px">
																  <label class="fs-13">ACCIDENTS CARACTERISÉS + CHARGEMENT & DÉCHARGEMENT</label>
																</div>
																<div class="icheck-danger icheck-inline">
																	<input class="checkbox" required onchange="unchecked_terrestre1()" type="radio" name="subscription[formula_land]" value="2" id="terrestre2">
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="form-row col-12 p-10 justify-content-center">
													<div class="text-right form-group col-md-6 col-sm-6 col-xs-12 btn-left-steps">
														<button type="button" class="btn btn-preview" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
															<span style="font-size:13px;">
																<i class="icon-copy" style="font-size:16px;"></i>&nbsp;&nbsp;PRECEDENT
															</span>
														</button>
													</div>
													<div class="text-left form-group col-md-6 col-sm-6 col-xs-12 btn-right-steps">
														<button type="button" class="btn btn-next-formula-land" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
															<span style="font-size:13px;">SUIVANT&nbsp;&nbsp;
																<i class="icon-copy" style="font-size:16px;"></i>
															</span>
														</button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
						
						<h5>Destination</h5>
						<section class="step-6" id="tsubscription-step-6">
							<div class="branc" id="periodCover">
								<div class="ste" data-state="">
									<div class="question_title">
										<h5>Quelle est la destination de vos marchandises ?</h5>
										<p>Indiquez si vos marchandises sont destinées à l'import, à l'export, ou au transport régional</p>
									</div>
									<div class="row justify-content-center">
										<div class="col-lg-7">
											<!-- #import/export -->
											<div id="destination-in-out" class="">
												<div class="box_general text-center">
													<div class="Error text-danger justify-content-center">
														<div class="errorDestinationInOut align-items-center">
															<span class="ti ti-alert-triangle"></span>&nbsp;Vous devez choisir une destination avant de poursuivre
														</div>
													</div>
													<div class="row">
														<div class="col-md-12 col-sm-12 col-xs-12 row justify-content-around">
															<div id="destination_1_checker" class="col-md-4 col-sm-12 col-xs-12 justify-content-center align-items-center text-center shadow border radio_checker mb-2" style="padding:15px; border-radius:8px;">
																<div class="col-12 justify-content-center align-items-center">
																	<div class="row align-items-center justify-content-center text-center">
																		<img src="{{ asset('assets/img/import-export.png') }}" style="width: 125px; height: 120px;object-fit:contain" alt="" />
																	</div>                    
																</div> 
																<div class="col-12" style="margin-top:5px">
																  <label class="fs-13">IMPORT</label>
																</div>
																<div class="icheck-danger icheck-inline">
																	<input class="checkbox" required onchange="unchecked_destination2()" type="radio" name="subscription[destination_in_out]" value="1" id="destination1">
																</div>
															</div>
															<div id="destination_2_checker" class="col-md-4 col-sm-12 col-xs-12 justify-content-center align-items-center text-center shadow border radio_checker mb-2" style="padding:15px; border-radius:8px;">
																<div class="col-12 justify-content-center align-items-center">
																	<div class="row align-items-center justify-content-center text-center">
																		<img src="{{ asset('assets/img/import-export.png') }}" style="width: 125px; height: 120px;object-fit:contain" alt="" />
																	</div>                    
																</div> 
																<div class="col-12" style="margin-top:5px">
																  <label class="fs-13">EXPORT</label>
																</div>
																<div class="icheck-danger icheck-inline">
																	<input class="checkbox" required onchange="unchecked_destination1()" type="radio" name="subscription[destination_in_out]" value="2" id="destination2">
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="form-row col-12 p-10 justify-content-center">
													<div class="text-right form-group col-md-6 col-sm-6 col-xs-12 btn-left-steps">
														<button type="button" class="btn btn-preview" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
															<span style="font-size:13px;">
																<i class="icon-copy" style="font-size:16px;"></i>&nbsp;&nbsp;PRECEDENT
															</span>
														</button>
													</div>
													<div class="text-left form-group col-md-6 col-sm-6 col-xs-12 btn-right-steps">
														<button type="button" class="btn btn-next-destination-in-out" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
															<span style="font-size:13px;">SUIVANT&nbsp;&nbsp;
																<i class="icon-copy" style="font-size:16px;"></i>
															</span>
														</button>
													</div>
												</div>
											</div>	
											
											<!-- #Zone -->
											<div id="destination-zone" class="">
												<div class="box_general text-center">
													<div class="Error text-danger justify-content-center">
														<div class="errorDestinationZone align-items-center">
															<span class="ti ti-alert-triangle"></span>&nbsp;Vous devez choisir une destination avant de poursuivre
														</div>
													</div>
													<div class="row">
														<div class="col-md-12 col-sm-12 col-xs-12 row justify-content-around">
															<div id="destination_zone_1_checker" class="col-md-4 col-sm-12 col-xs-12 justify-content-center align-items-center text-center shadow border radio_checker mb-2" style="padding:15px; border-radius:8px;">
																<div class="col-12 justify-content-center align-items-center">
																	<div class="row align-items-center justify-content-center text-center">
																		<img src="{{ asset('assets/img/globe.png') }}" style="width: 125px; height: 120px;object-fit:contain" alt="" />
																	</div>                    
																</div> 
																<div class="col-12" style="margin-top:5px">
																  <label class="fs-13">CÔTE D'IVOIRE <br>UNIQUEMENT</label>
																</div>
																<div class="icheck-danger icheck-inline">
																	<input class="checkbox" required onchange="unchecked_destinationzone2()" type="radio" name="subscription[destination_zone]" value="1" id="destinationzone1">
																</div>
															</div>
															<div id="destination_zone_2_checker" class="col-md-4 col-sm-12 col-xs-12 justify-content-center align-items-center text-center shadow border radio_checker mb-2" style="padding:15px; border-radius:8px;">
																<div class="col-12 justify-content-center align-items-center">
																	<div class="row align-items-center justify-content-center text-center">
																		<img src="{{ asset('assets/img/globe.png') }}" style="width: 125px; height: 120px;object-fit:contain" alt="" />
																	</div>                    
																</div> 
																<div class="col-12" style="margin-top:5px">
																  <label class="fs-13">ZONE CEDEAO</label>
																</div>
																<div class="icheck-danger icheck-inline">
																	<input class="checkbox" required onchange="unchecked_destinationzone1()" type="radio" name="subscription[destination_zone]" value="2" id="destinationzone2">
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="form-row col-12 p-10 justify-content-center">
													<div class="text-right form-group col-md-6 col-sm-6 col-xs-12 btn-left-steps">
														<button type="button" class="btn btn-preview" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
															<span style="font-size:13px;">
																<i class="icon-copy" style="font-size:16px;"></i>&nbsp;&nbsp;PRECEDENT
															</span>
														</button>
													</div>
													<div class="text-left form-group col-md-6 col-sm-6 col-xs-12 btn-right-steps">
														<button type="button" class="btn btn-next-destination-zone" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
															<span style="font-size:13px;">SUIVANT&nbsp;&nbsp;
																<i class="icon-copy" style="font-size:16px;"></i>
															</span>
														</button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
						
						<h5>Marchandise</h5>
						<section class="step-7" id="tsubscription-step-7">	
							@include('partials.Transport.form_subscription_merchandise_info')
							<input type="hidden" class="form-control" name="subscription[amount]" id="price_subscription">
						</section>
						
						<h5>Livraison</h5>
						<section class="step-8" id="tsubscription-step-8">
							<div class="branc" id="delivery">
								<div class="ste" data-state="">
									<div class="question_title">
										<h5>Souhaitez-vous une livraison de votre contrat d'assurance ?</h5>
										<p>Indiquez-nous si vous préférez recevoir votre contrat d'assurance par livraison ou le récupérer dans l'une de nos agences.</p>
									</div>
									<div class="row justify-content-center">
										<div class="col-lg-5">
											<div class="box_general">
												<div class="form-group">
													<label class="col-form-label text-center">
														<h6 class="font-size-18">Préférez-vous la livraison ou récupérer en agence ?</h6><br>
													</label>
													<div class="d-flex justify-content-center mt-4">
														<div class="col-md-3 justify-content-center text-center me-4">
															<label for="subcription_delivery_y">Livraison</label>
															<div class="icheck-danger icheck-inline">
																<input class="checkbox" required type="radio" value="1" checked name="subscription[delivery_option]" id="subscription_delivery_y">
															</div>
														</div>
														<div class="col-md-3 justify-content-center text-center me-4">
															<label for="subscription_delivery_n">En agence</label>
															<div class="icheck-danger icheck-inline">
																<input class="checkbox" required type="radio" value="2" name="subscription[delivery_option]" id="subscription_delivery_n">
															</div>
														</div>
													</div>
													<div id="delivery_option">
														<div class="text-center mt-4 mb-4">
															<small class="text-danger">* Votre contrat d'assurance TRANSPORT sera livré dans le lieu choisi dans la rubrique « Adresse de livraison (Quartier, Rue, etc..) » et cela dans un delai de 48H.</small>
														</div>
														<div class="form-group col-md-12">
															<label class="col-form-label">Zone de livraison</label><strong style="color: red"> *</strong>
															<select class="form-control" name="subscription[deliveryzone]" id="delivery_zone" required style="width:100%;">
																<option value="" selected>--</option>
																@foreach ($deliveryzones as $item)
																<option value="{{$item['id']}}">{{$item['municipality']}}</option>
																@endforeach
															</select>
														</div>
														<div class="form-group col-md-12">
															<label class="col-form-label">Adresse de livraison (Quartier, Rue, etc..)</label><strong style="color: red"> *</strong>
															<input type="text" class="form-control" name="subscription[instruction_address]" id="delivery_instruction_address" required>
														</div>
														<div class="text-center mt-2 mb-2 d-none">
															<small class="text-danger">Note importante:<br> Les frais de livraison ne sont pas compris dans le montant de la prime d'assurance</small>
														</div>
													</div>
													<div id="agency_option">
														<div class="text-center mt-4 mb-4">
															<small class="text-danger">* Votre contrat d'assurance TRANSPORT sera livré dans l'agence ou bureau direct de votre choix et cela dans un delai de 48H.</small>
														</div>
														<div class="form-group col-md-12">
															<label class="col-form-label">Zone géographique</label><strong style="color: red"> *</strong>
															<select class="form-control" name="subscription[deliveryzone]" id="agency_zone" required style="width:100%;">
																<option value="" selected>--</option>
																<option value="1">Abidjan</option>
																<option value="2">Intérieur du pays</option>
															</select>
														</div>
														<div class="form-group col-md-12">
															<label class="col-form-label">Agence ou bureau direct</label><strong style="color: red"> *</strong>
															<select class="form-control" name="subscription[instruction_address]" id="agency_instruction_address" required style="width:100%;">
																<option value="" selected>--</option>
															</select>
														</div>
														<div class="text-center mt-2 mb-2 d-none">
															<small class="text-danger">Note importante:<br> Les frais de livraison ne sont pas compris dans le montant de la prime d'assurance</small>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="form-row col-12 p-10 justify-content-center">
											<div class="text-right form-group col-md-6 col-sm-6 col-xs-12 btn-left-steps">
												<button type="button" class="btn btn-preview" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
													<span style="font-size:13px;">
														<i class="icon-copy" style="font-size:16px;"></i>&nbsp;&nbsp;PRECEDENT
													</span>
												</button>
											</div>
											<div class="text-left form-group col-md-6 col-sm-6 col-xs-12 btn-right-steps">
												<button type="button" class="btn btn-next" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
													<span style="font-size:13px;">SUIVANT&nbsp;&nbsp;
														<i class="icon-copy" style="font-size:16px;"></i> 
													</span>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
						
						<h5>Signature digitale</h5>
						<section class="step-14" id="hsubscription-step-14">
							<div class="branch" id="signature">
								<div class="step" data-state="">
									<div class="question_title">
										<h5>Veuillez fournir votre signature électronique</h5>
										<p>Votre signature numérique est requise pour valider votre contrat d'assurance. Cette démarche est sécurisée et juridiquement reconnue</p>
									</div>
									<div class="row justify-content-center">
										<div class="col-lg-7">
											<div class="box_general text-center">
												<div class="row">
													<label class="col-form-label"><span style="font-size:14px; font-weight:400;color:#fc0027;margin-bottom:30px">Votre signature digitale ici</span></label><br>
													<div class="form-group col-md-12">
														<canvas id="signature-pad" class="signature-pad" height="200" style=" border:1px solid #999;border-radius: 6px;" ></canvas>
														<input type="hidden" name="subscriber[signature]" id="SignupImage1">
													</div>
												</div>
												<div class="mt-1">
												   <button type="button" class="btn" id="clearSig" style="background:#fc0027; width:90px;color:#ffffff;font-size:13px"><i class="bi bi-trash"></i>&nbsp;Effacer</button>
												</div>
											</div>
										</div>
										<div class="form-row col-12 p-10 justify-content-center">
											<div class="text-right form-group col-md-6 col-sm-6 col-xs-12 btn-left-steps">
												<button type="button" class="btn btn-preview" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
													<span style="font-size:13px;">
														<i class="icon-copy" style="font-size:16px;"></i>&nbsp;&nbsp;PRECEDENT
													</span>
												</button>
											</div>
											<div class="text-left form-group col-md-6 col-sm-6 col-xs-12 btn-right-steps">
												<button type="button" class="btn btn-next-sign" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
													<span style="font-size:13px;">SUIVANT&nbsp;&nbsp;
														<i class="icon-copy" style="font-size:16px;"></i>
													</span>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
						
						<h5>Information importante</h5>
						<section class="step-9" id="tsubscription-step-9">
							<div class="branc" id="recap">
								<div class="ste" data-state="">
									<div class="question_title">
										<h4>Allez ! Vous y êtes presque</h4>
										<p>Vous êtes sur le point de finaliser le calcul de votre prime d'assurance et de générer votre contrat</p>
									</div>
									<div class="row justify-content-center">
										<div class="col-lg-6">
											<div class="box_general">
												<div class="text-center">
													<img src="{{asset('assets/img/avatar-1.png')}}" alt="" width="100" />
												</div>
												<div class="text-center" style="padding:10px 20px"><br>
												  <p class="font-size-15 line-height-26">
												  Je soussigné, certifie avoir répondu avec sincérité, sans aucune réticence et n’avoir fait aucune declaration frauduleuse ayant pour effet ou pour but
													d’induire la COMPAGNIE en erreur et prend acte que toute réticence ou fausse déclaration intentionnelle de ma part entraînera la nullité du contrat.
												  </br></br>J’autorise expressément la COMPAGNIE à prendre toutes informations qu’elle jugerait utiles et nécessaires auprès des organismes compétents.
												  </br></br>J’autorise les organismes compétents à communiquer à la COMPAGNIE tous les renseignements demandés.</p>
												</div>
												<div class="form-row col-12 justify-content-center">
													<div class="text-right form-group col-md-6 col-sm-6 col-xs-12 btn-left-steps">
														<button type="button" class="btn btn-preview" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
															<span style="font-size:13px;">
																<i class="icon-copy" style="font-size:16px;"></i>&nbsp;&nbsp;PRÉCÉDENT
															</span>
														</button>
													</div>
													<div class="text-left form-group col-md-6 col-sm-6 col-xs-12 btn-right-steps">
														<button type="button" class="btn btn-primary" id="btn-next-main-info" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
															<span style="font-size:13px;">J'ACCEPTE&nbsp;&nbsp;
																<i class="icon-copy" style="font-size:16px;"></i>
															</span>
														</button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
						
						<h5>Recapitulatif</h5>
						<section class="step-10" id="tsubscription-step-10">
							<div class="branc" id="recapitulatif">
								<div class="ste" data-state="">
									<div class="question_title">
										<h4>Récapitulatif des informations renseignées</h4>
										<p>Voici le récapitulatif de toutes vos informations saisies</p>
									</div>
									<div class="row justify-content-center">
										@include('partials.School.form_subscription_summary')
										<div class="form-row col-12 p-10 justify-content-center">
											<div class="text-right form-group col-md-6 col-sm-6 col-xs-12 btn-left-steps">
												<button type="button" class="btn btn-preview" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
													<span style="font-size:13px;">
														<i class="icon-copy" style="font-size:16px;"></i>&nbsp;&nbsp;PRÉCÉDENT
													</span>
												</button>
											</div>
											<div class="text-left form-group col-md-6 col-sm-6 col-xs-12 btn-right-steps">
												<button type="button" class="btn btn-verif-data" style="background:#235d9b; width:120px;color:#ffffff;margin:0px 5px">
													<span style="font-size:13px;">SUIVANT&nbsp;&nbsp;
														<i class="icon-copy" style="font-size:16px;"></i>
													</span>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
						
						<h5>Paiement</h5>
						<section class="step-11" id="tsubscription-step-11">
							<div class="branc" id="payment">
								<div class="ste" data-state="">
									<div class="question_title">
										<h4>Par quel moyen souhaitez-vous effectuer le paiement ?</h4>
										<p>Veuillez selectionner un moyen de paiement pour le règlement de votre prime d'assurance</p>
									</div>
									<div class="row justify-content-center">
										<div class="col-lg-10">
											<div class="box_general">
												<div class="form-row col-12 justify-content-center">
													<div class="col-md-5 left-panel">
														<div class="company-logo">
															<img src="{{ asset('assets/img/logo.jpg') }}" alt="" style="width:120px;height:45px">
														</div>
														<div class="payment-details">
															<p><strong>Bénéficiaire:<br></strong> <span class="font-size-14">{{$config->fullname}}</span></p>
															<p><strong>N° cotation:<br></strong> <span class="font-size-14" id="summary_code"></span></p>
															@if (!Auth::check() || (!isset(auth()->user()->subscriber)))
															<p><strong>Client facturé:<br></strong> <span class="font-size-14" id="summary_assured"></span></p>
															@elseif (Auth::check() && (isset(auth()->user()->subscriber)))
															<p><strong>Client facturé:<br></strong> <span class="font-size-14">{{ Auth::user()->subscriber->civility }} {{ Auth::user()->subscriber->lastname }} {{ Auth::user()->subscriber->firstname }}</span></p>
															@endif
															<p><strong>Description:<br></strong> <span class="font-size-14">Paiement Assurance TRANSPORT & FRET</span></p>
															<p class="amount"><strong>Montant à payer:<br></strong><strong  class="text-danger" style="font-size:18px;"><span id="summary_amount"></span> <small class="small-fcfa">F CFA</small></strong></p>
														</div>
														<input type="hidden" value="text" name="subscription_code"  id="subscription_code" />
														<input type="hidden" value="text" name="subscription_amount"  id="subscription_amount" />
													</div>
													<div class="col-md-7 right-panel">
														<h2>Veuillez choisir votre methode de paiement :</h2>
														<div class="payment-options">
															<input type="hidden" name="momo_pay" id="momo_pay">
															<div class="col-md-12 col-sm-12 col-xs-12 row justify-content-start">
																<div id="momo1_checker" class="card rounded-4 shadow border radio_checker mb-2" style="padding:25px;">
																	<div class="d-flex align-items-center" style="margin:10px 0">
																		<div class="icheck-cover icheck-inline">
																			<input class="checkbox" required onchange="checked_momo_1();" type="radio" checked value="CINETPAY" name="subscription_paymod" id="subscription_paymod_cinetpay" style="width:50px">
																		</div>
																		<img src="{{ asset('assets/img/icons/mobile-pay.svg') }}" style="width:auto;height:60px;objectif-fit:contain;" alt="" />
																		<label for="formula1" class="card-title text-h-orange font-weight-regular font-size-14 text-black">&nbsp;&nbsp;Mobile money</label>
																	</div>
																	<div class="row">
																		<div class="col-12">
																			<p class="card-text text-black-50 small">Optez pour le paiement Mobile Money, une méthode simple et rapide pour vos transactions</p>
																		</div>
																	</div>
																</div>
																<div id="momo2_checker" class="card rounded-4 shadow border radio_checker mb-2" style="padding:25px; pointer-events: none; opacity: 0.6;">
																	<div class="d-flex align-items-center" style="margin:10px 0">
																		<div class="icheck-cover icheck-inline">
																			<input class="checkbox" disabled onchange="checked_momo_2();" type="radio" value="ESPECE" name="subscription_paymod" id="subscription_paymod_espece" style="width:50px">
																		</div>
																		<img src="{{ asset('assets/img/icons/wallet.svg') }}" style="width:auto;height:60px;objectif-fit:contain;" alt="" />
																		<label for="formula1" class="card-title text-h-orange font-weight-regular font-size-14 text-black">&nbsp;&nbsp;Espèce</label>
																	</div>
																	<div class="row">
																		<div class="col-12">
																			<p class="card-text text-black-50 small">Vous pouvez payer en espèces dans nos agences, où nos conseillers seront disponibles pour vous assister</p>
																		</div>
																	</div>
																</div>
																<div class="form-group col-md-12 d-none" id="cashreceiptpayment">
																	<label class="col-form-label">Télécharger le reçu de paiement</label><strong style="color: red"> *</strong>
																	<input type="file" class="form-control" name="subscription[receiptcashpayment]" id="receiptcashpayment" required>
																</div>	
																<div id="momo3_checker" class="card rounded-4 shadow border radio_checker mb-2" style="padding:25px; pointer-events: none; opacity: 0.6;">
																	<div class="d-flex align-items-center" style="margin:10px 0">
																		<div class="icheck-cover icheck-inline">
																			<input class="checkbox" disabled onchange="checked_momo_3();" type="radio" value="CHEQUE" name="subscription_paymod" id="subscription_paymod_check" style="width:50px">
																		</div>
																		<img src="{{ asset('assets/img/icons/card.svg') }}" style="width:auto;height:60px;objectif-fit:contain;" alt="" />
																		<label for="formula1" class="card-title text-h-orange font-weight-regular font-size-14 text-black">&nbsp;&nbsp;Chèque</label>
																	</div>
																	<div class="row">
																		<div class="col-12">
																			<p class="card-text text-black-50 small">Le paiement par chèque est également accepté pour vos souscriptions</p>
																		</div>
																	</div>
																</div>
																<div class="form-group col-md-12 d-none" id="checkreceiptpayment">
																	<label class="col-form-label">Télécharger le reçu de paiement</label><strong style="color: red"> *</strong>
																	<input type="file" class="form-control" name="subscription[receiptchequepayment]" id="receiptchequepayment" required>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="form-row col-12 p-10 d-flex justify-content-center">
											<div class="form-group col-md-12 col-sm-12 col-xs-12 d-flex justify-content-center">
												<button type="button" class="btn btn-payment-transport" id="btn-payment-transport" style="background:#235d9b; width:auto;color:#ffffff;margin:0px 5px">
													<span style="font-size:13px;">PROCEDER AU PAIEMENT&nbsp;&nbsp;
														<i class="icon-copy" style="font-size:16px;"></i>
													</span>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
						
					</form>
				</div>
			</div>
		
		</div>
	</div>
</main>

<!-- Modal -->
<div class="modal fade" id="modal-existing-subscriber" role="dialog" style="display: none;" aria-modal="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
            <div class="Modal-header" style="">
                <div class=""></div>
                <div class="center">
                    <img class="AtitoImg image" src="{{asset('assets/img/avatar-1.png')}}" alt="">
                </div>
				<button type="button" class="btn-close custom-btn-close border p-1 me-0 text-dark" data-bs-dismiss="modal" aria-label="Close">
					<i class="ti ti-x"></i>
				</button>
            </div>
			<div class="modal-body">
				<div class="text-center">
					<strong class="mt-4 mb-4 font-size-28 font-weight-bold text-danger">Ooops !</strong><br><br>
					<p class="mb-4 font-size-15">Cette adresse email est déjà associée à un compte utilisateur. Si vous en êtes le propriétaire, 
					veuillez vous connecter à votre espace client pour finaliser votre souscription.</p>
					<div class="d-flex align-items-center justify-content-center mb-3">
						<button type="button" class="btn" data-bs-dismiss="modal" style="background:#235d9b; width:100px;color:#ffffff;margin:0px 5px">
							<span style="font-size:13px;">Fermer</span>
						</button>	
						<a href="{{route('signin')}}" class="btn" style="background:#235d9b; width:100px;color:#ffffff;margin:0px 5px">
							<span style="font-size:13px;">Connexion</span>
						</a>				
					</div>
				</div>
			</div>
		</div>
	</div>
</div>				
@endsection


@section('style')
<style>
.select2-container--default .select2-selection--single {
	height: 50px;
	padding: 0 10px 6px 15px;
	border-radius: 10px;
	border: 1px solid #ced4da;
}

.select2-container--default .select2-selection--single:focus {
	border: 1px solid #daa520;
	outline: none;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #235d9b;
	color: white;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 50px;
}
</style>
@endsection

@section('script')

<script>
    // Passer l'état de l'authentification via une variable JavaScript
    const isUserAuthenticated = @json(Auth::check() && auth()->user()->subscriber !== null);
</script>

<script>

    var subscription_wizard = $(".subscription_wizard");
    var subscription_wizard_steps = $(".subscription_wizard");
	
	//~~~~~~~~~~~~~~~#################~~~~~~~~~~~~~~~~
    //~~~~~~~~        Gestion des slides      ~~~~~~~~
    //~~~~~~~~~~~~~~~#################~~~~~~~~~~~~~~~~
	
    $(".subscription_wizard").steps({
        headerTag: "h5",
        bodyTag: "section",
        enableAllSteps: false,
        enablePagination: false,
        transitionEffect: "fade",
        titleTemplate: '<span class="step">#index#</span> #title#',
        saveState: true,
        labels: {
            finish: "Submit"
        },
        onStepChanged: function(event, currentIndex, newIndex) {
			updateProgressBar(currentIndex);
            if (currentIndex > newIndex) {
                return true;
            }
            subscription_wizard.validate().settings.ignore = ":disabled,:hidden";
            return subscription_wizard.valid();
        },
        onFinished: function(event, currentIndex) {
            subscription_wizard.validate().settings.ignore = ":disabled";
            return subscription_wizard.valid();
        }
    });

    $(".btn-next").click(function() {
        if (subscription_wizard.valid()) {
            subscription_wizard.steps("next");
        } else {
            subscription_wizard.validate().settings.ignore = ":disabled,:hidden";
            return subscription_wizard.valid();
        }
    });

    $(".btn-preview").click(function() {
        subscription_wizard.steps("previous");
    });
	
    //~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~
    //~~~~~~~~   Gestion de la barre de progression  ~~~~~~~~
    //~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~
	
	function updateProgressBar(currentIndex) {
		// Sélectionner les éléments de la barre de progression
		var progressItems = $(".progress-item");
		
		// Réinitialiser toutes les barres
		progressItems.removeClass('filled');
		
		// Appliquer la classe 'filled' à l'étape courante et aux précédentes
		for (var i = 0; i <= currentIndex; i++) {
			progressItems.eq(i).addClass('filled');
		}
	}

	// Initial call to set the progress bar for the first step
	updateProgressBar(subscription_wizard.steps("getCurrentIndex"));
	
	//~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~~
	//~~~~~~~~   Gestion de la validation pour collecte  ~~~~~~~~ 
	//~~~~~~~~~~~     des données personnelles  ~~~~~~~~~~~~~~~~~
	//~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~
	
	document.querySelector('.btn-next-disclaimer').addEventListener('click', function() {
		const checkbox = document.getElementById('handshakeBox');
		
		if (!checkbox.checked) {
			swal("Ooops !", "", {
				icon: "error",
				buttons: {
					confirm: {
						className: 'btn btn-danger'
					}
				},
				content: {
					element: "div",
					attributes: {
						innerHTML: "Merci de cocher la case pour confirmer votre accord avant de poursuivre votre souscription"
					}
				}
			});
			return;
		}
		
		//On passe à l'etape suivante
		subscription_wizard_steps.steps("next");
		
	});
	
	//~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~~
    //~~~~~~~~   Gestion de la validation du type de client  ~~~~~~~~~~~~~
    //~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~~
	
	 // Cacher le message d'erreur au début
	const errorClientType = document.querySelector('.Error .errorClientType');
    errorClientType.style.display = 'none';
	
	// Sélectionner les boutons radio
    const clientRadios = document.querySelectorAll('input[name="subscriber[client_type]"]');
    const btnNextClient = document.querySelector('.btn-next-client');
	
	// Cacher l'alerte si un genre est sélectionné
    clientRadios.forEach(function(radio) {
        radio.addEventListener('change', function() {
            // Si un genre est sélectionné, cacher le message d'erreur
            errorClientType.style.display = 'none';
        });
    });
	
	// Lorsque l'utilisateur clique sur le bouton "SUIVANT"
    btnNextClient.addEventListener('click', function() {
        let isClientTypeSelected = false;

        // Vérifier si l'un des boutons radio est coché
        clientRadios.forEach(function(radio) {
            if (radio.checked) {
                isClientTypeSelected = true;
            }
        });

        // Si aucun genre n'est sélectionné, afficher le message d'erreur
        if (!isClientTypeSelected) {
            errorClientType.style.display = 'block';
            return;  // Ne pas passer à l'étape suivante
        }

        // Si un genre est sélectionné, cacher le message d'erreur et passer à l'étape suivante
        errorClientType.style.display = 'none';
        subscription_wizard_steps.steps("next");
    });
	
	//~~~~~~~~~~~~~~~~~~#################~~~~~~~~~~~~~~~~~~~~
    //~~~~~~~~              Subscriber               ~~~~~~~~
    //~~~~~~~~~~~~~~~~~~#################~~~~~~~~~~~~~~~~~~~~
	
	var createSubscriberAccount = function() {
		
		var formdata = new FormData($("#subscription_wizard")[0]);
		var email = formdata.get("subscriber[email]");

		// Vérifie si l'email est déjà dans le localStorage
		if (localStorage.getItem(email)) {
			// Mettez à jour le souscripteur
			{{--
			$.ajax({
				type: 'POST',
				url: "{{ route('subscription.subscriber.update.json') }}", // Route pour la mise à jour
				data: formdata,
				"timeout": 0,
				"mimeType": "multipart/form-data",
				processData: false,
				contentType: false,
				success: function(data) {
					try {
						var d = JSON.parse(data); // Tente de parser la réponse
						if (d.code == 10) {
							subscription_wizard_steps.steps("next");
						}
					} catch (e) {
						console.error("Erreur de parsing JSON :", e);
						alert("Une erreur s'est produite lors du traitement de la réponse. Veuillez réessayer.");
					}
				},
				error: function(xhr, status, error) {
					console.error("Erreur AJAX :", status, error);
					alert("Une erreur s'est produite lors de l'enregistrement. Veuillez réessayer.");
				}
			});
			--}}
			subscription_wizard_steps.steps("next");
		} else {
			// Nouveau souscripteur
			$.ajax({
				type: 'POST',
				url: "{{ route('subscription.subscriber.create.json') }}",
				data: formdata,
				"timeout": 0,
				"mimeType": "multipart/form-data",
				processData: false,
				contentType: false,
				success: function(data) {
					try {
						var d = JSON.parse(data); // Tente de parser la réponse
						if (d.code == 10) {
							// Enregistre les données dans le localStorage
							localStorage.setItem(email, JSON.stringify(d.data.subscriber));
							$("#subscriber_code").val(d.codeSubscriber);
							subscription_wizard_steps.steps("next");
						}
					} catch (e) {
						console.error("Erreur de parsing JSON :", e);
						alert("Une erreur s'est produite lors du traitement de la réponse. Veuillez réessayer.");
					}
				},
				error: function(xhr, status, error) {
					console.error("Erreur AJAX :", status, error);
					alert("Une erreur s'est produite lors de l'enregistrement. Veuillez réessayer.");
				}
			});
		}
	};
	

    $("#btn-subscriber-info").click(function() {
        if (subscription_wizard.valid())
		createSubscriberAccount();
		subscription_wizard.validate().settings.ignore = ":disabled,:hidden";
		return subscription_wizard.valid();
    });
	
	//#####################################################
	//############## Choix du type de client ##############
	//#####################################################
	
	 // Gestion des types de client
    var checked_client_1 = function() {
        $("#clientType1").prop("checked", true);
        $("#clientType2").prop("checked", false);
    };

    var checked_client_2 = function() {
        $("#clientType2").prop("checked", true);
        $("#clientType1").prop("checked", false);
    };
	
	$("#particular_client_checker").click(function() {
        checked_client_1();
        $(this).addClass('checker_add');
		errorClientType.style.display = 'none';
        $("#enterprise_client_checker").removeClass('checker_add');
    });

    $("#enterprise_client_checker").click(function() {
        checked_client_2();
        $(this).addClass('checker_add');
		errorClientType.style.display = 'none';
        $("#particular_client_checker").removeClass('checker_add');
    });
	
	//*******************************************
    // Particular or Enterprise assured info
    //*******************************************
    var hide_enterprise_form_info = function() {
        $("#enterprise_assured_info").removeClass("d-block").addClass("d-none");
        $("#particular_title_info").removeClass("d-block").addClass("d-none");
    }

    var show_enterprise_form_info = function() {
        $("#enterprise_assured_info").removeClass("d-none").addClass("d-block");
        $("#particular_title_info").removeClass("d-none").addClass("d-block");
    }

    $("#particular_client_checker").click(function() {
        hide_enterprise_form_info();
    })

    $("#enterprise_client_checker").click(function() {
        show_enterprise_form_info()
    })
	
	//~~~~~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~~~~~~~~~~
    //~~~~~~~~   Gestion de la validation du type de transport  ~~~~~~~~~~~~~
    //~~~~~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~~~~~~~~~~
	
	 // Cacher le message d'erreur au début
	const errorModeTransport = document.querySelector('.Error .errorModeTransport');
    errorModeTransport.style.display = 'none';
	
	// Sélectionner les boutons radio
    const transportRadios = document.querySelectorAll('input[name="subscription[mode_transport]"]');
    const btnNextModeTransport = document.querySelector('.btn-next-mode-transport');
	
	// Cacher l'alerte si un mode de transport est sélectionné
    transportRadios.forEach(function(radio) {
        radio.addEventListener('change', function() {
            // Si un mode de transport est sélectionné, cacher le message d'erreur
            errorModeTransport.style.display = 'none';
        });
    });
	
	// Lorsque l'utilisateur clique sur le bouton "SUIVANT"
    btnNextModeTransport.addEventListener('click', function() {
        let isModeTransportSelected = false;

        // Vérifier si l'un des boutons radio est coché
        transportRadios.forEach(function(radio) {
            if (radio.checked) {
                isModeTransportSelected = true;
            }
        });

        // Si aucun mode de transport n'est sélectionné, afficher le message d'erreur
        if (!isModeTransportSelected) {
            errorModeTransport.style.display = 'block';
            return;  // Ne pas passer à l'étape suivante
        }

        // Si un mode de transport est sélectionné, cacher le message d'erreur et passer à l'étape suivante
        errorModeTransport.style.display = 'none';
        subscription_wizard_steps.steps("next");
    });
	
	//############################################
	//########### Mode de transport ##############
	//############################################
	
	var checked_mode_1 = function() {
        $("#transport1").prop("checked", true);
        $("#transport2, #transport3").prop("checked", false);
	}
	
	var checked_mode_2 = function() {
        $("#transport2").prop("checked", true);
        $("#transport1, #transport3").prop("checked", false);
	}
	
	var checked_mode_3 = function() {
        $("#transport3").prop("checked", true);
        $("#transport1, #transport2").prop("checked", false);
	}
	
	//
	$("#transport_1_checker").click(function() {
        checked_mode_1();
        $(this).addClass('checker_add');
		errorModeTransport.style.display = 'none';
		getTransportItem('TP1');
        $("#transport_2_checker, #transport_3_checker").removeClass('checker_add');
		$("#transport_mod").val($("#transport1").val());
		$("#destination-in-out").removeClass("d-none").addClass("d-block");
        $("#destination-zone").removeClass("d-block").addClass("d-none");
    })

    $("#transport_2_checker").click(function() {
        checked_mode_2();
        $(this).addClass('checker_add');
		errorModeTransport.style.display = 'none';
		getTransportItem('TP2');
        $("#transport_1_checker, #transport_3_checker").removeClass('checker_add');
		$("#transport_mod").val($("#transport2").val());
		$("#destination-in-out").removeClass("d-none").addClass("d-block");
        $("#destination-zone").removeClass("d-block").addClass("d-none");
    })

    $("#transport_3_checker").click(function() {
        checked_mode_3();
        $(this).addClass('checker_add');
		errorModeTransport.style.display = 'none';
		getTransportItem('TP3');
        $("#transport_1_checker, #transport_2_checker").removeClass('checker_add');
		$("#transport_mod").val($("#transport3").val());
		$("#destination-in-out").removeClass("d-block").addClass("d-none");
        $("#destination-zone").removeClass("d-none").addClass("d-block");
    })
	
	var getTransportItem = function(item) {
			
        switch (item) {
			
            case "TP1":
            $("#transport_1_item").removeClass("d-none").addClass("d-block");
            $("#transport_2_item, #transport_3_item").removeClass("d-block").addClass("d-none");

            break;
            case "TP2":
            $("#transport_2_item").removeClass("d-none").addClass("d-block");
            $("#transport_1_item, #transport_3_item").removeClass("d-block").addClass("d-none");
            break;

            case "TP3":
            $("#transport_3_item").removeClass("d-none").addClass("d-block");
            $("#transport_1_item, #transport_2_item").removeClass("d-block").addClass("d-none");
            break;

        }
		
	}
	
	
	//~~~~~~~~~~~~~~~~~~~~~~~~~~~~##################################~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    //~~~~~~~~   Gestion de la validation de la formule de protection  (Maritime) ~~~~~~~~~~~~~~
    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~##################################~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	
	 // Cacher le message d'erreur au début
	const errorFormulaMaritime = document.querySelector('.Error .errorFormulaMaritime');
    errorFormulaMaritime.style.display = 'none';
	
	// Sélectionner les boutons radio
    const formulaMaritimeRadios = document.querySelectorAll('input[name="subscription[formula_maritime]"]');
    const btnNextFormulaMaritime = document.querySelector('.btn-next-formula-maritime');
	
	// Cacher l'alerte si une formule de protection est sélectionnée
    formulaMaritimeRadios.forEach(function(radio) {
        radio.addEventListener('change', function() {
            // Si un mode de transport est sélectionné, cacher le message d'erreur
            errorFormulaMaritime.style.display = 'none';
        });
    });
	
	// Lorsque l'utilisateur clique sur le bouton "SUIVANT"
    btnNextFormulaMaritime.addEventListener('click', function() {
        let isFormulaMaritimeSelected = false;

        // Vérifier si l'un des boutons radio est coché
        formulaMaritimeRadios.forEach(function(radio) {
            if (radio.checked) {
                isFormulaMaritimeSelected = true;
            }
        });

        // Si aucune formule de protection n'est sélectionné, afficher le message d'erreur
        if (!isFormulaMaritimeSelected) {
            errorFormulaMaritime.style.display = 'block';
            return;  // Ne pas passer à l'étape suivante
        }

        // Si une formule de protection est sélectionnée, cacher le message d'erreur et passer à l'étape suivante
        errorFormulaMaritime.style.display = 'none';
        subscription_wizard_steps.steps("next");
    });
	
	//~~~~~~~~~~~~~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    //~~~~~~~~~~~~~~~~   Gestion de la validation de la formule de protection (Aerien) ~~~~~~~~~~~~~~
    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	
	 // Cacher le message d'erreur au début
	const errorFormulaAir = document.querySelector('.Error .errorFormulaAir');
    errorFormulaAir.style.display = 'none';
	
	// Sélectionner les boutons radio
    const formulaAirRadios = document.querySelectorAll('input[name="subscription[formula_air]"]');
    const btnNextFormulaAir = document.querySelector('.btn-next-formula-air');
	
	// Cacher l'alerte si une formule de protection est sélectionnée
    formulaAirRadios.forEach(function(radio) {
        radio.addEventListener('change', function() {
            // Si un mode de transport est sélectionné, cacher le message d'erreur
            errorFormulaAir.style.display = 'none';
        });
    });
	
	// Lorsque l'utilisateur clique sur le bouton "SUIVANT"
    btnNextFormulaAir.addEventListener('click', function() {
        let isFormulaAirSelected = false;

        // Vérifier si l'un des boutons radio est coché
        formulaAirRadios.forEach(function(radio) {
            if (radio.checked) {
                isFormulaAirSelected = true;
            }
        });

        // Si aucune formule de protection n'est sélectionné, afficher le message d'erreur
        if (!isFormulaAirSelected) {
            errorFormulaAir.style.display = 'block';
            return;  // Ne pas passer à l'étape suivante
        }

        // Si une formule de protection est sélectionnée, cacher le message d'erreur et passer à l'étape suivante
        errorFormulaAir.style.display = 'none';
        subscription_wizard_steps.steps("next");
    });
	//~~~~~~~~~~~~~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~~~~~~~~~~
    //~~~~~~~~   Gestion de la validation de la formule de protection  (Terrestre) ~~~~~~~~~~~~~~
    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~~~~~~~~~~
	
	 // Cacher le message d'erreur au début
	const errorFormulaLand = document.querySelector('.Error .errorFormulaLand');
    errorFormulaLand.style.display = 'none';
	
	// Sélectionner les boutons radio
    const formulaLandRadios = document.querySelectorAll('input[name="subscription[formula_land]"]');
    const btnNextFormulaLand = document.querySelector('.btn-next-formula-land');
	
	// Cacher l'alerte si une formule de protection est sélectionnée
    formulaLandRadios.forEach(function(radio) {
        radio.addEventListener('change', function() {
            // Si un mode de transport est sélectionné, cacher le message d'erreur
            errorFormulaLand.style.display = 'none';
        });
    });
	
	// Lorsque l'utilisateur clique sur le bouton "SUIVANT"
    btnNextFormulaLand.addEventListener('click', function() {
        let isFormulaLandSelected = false;

        // Vérifier si l'un des boutons radio est coché
        formulaLandRadios.forEach(function(radio) {
            if (radio.checked) {
                isFormulaLandSelected = true;
            }
        });

        // Si aucune formule de protection n'est sélectionné, afficher le message d'erreur
        if (!isFormulaLandSelected) {
            errorFormulaLand.style.display = 'block';
            return;  // Ne pas passer à l'étape suivante
        }

        // Si une formule de protection est sélectionnée, cacher le message d'erreur et passer à l'étape suivante
        errorFormulaLand.style.display = 'none';
        subscription_wizard_steps.steps("next");
    });
	
	
	//*********************************************************************//
	//****************************FORMULA CHECKER***************************//
	//*********************************************************************//
	
	//formula checked
	var unchecked_formula = function() {
		$("#maritime1, maritime2").prop("checked", false);
		$("#maritime_1_checker, maritime_2_checker").removeClass('checker_add');
		
		$("#aerien1, aerien2").prop("checked", false);
		$("#aerien_1_checker, #aerien_2_checker").removeClass('checker_add');
		
		$("#terrestre1, terrestre2").prop("checked", false);
		$("#terrestre_1_checker, #terrestre_2_checker").removeClass('checker_add');
	}
	
	
	/************************/
	//********maritime*******
	/************************/
	
	//maritime checked
	var unchecked_maritime2 = function() {
		$("#maritime2").prop("checked", false);
	}
	
	var unchecked_maritime1 = function() {
		$("#maritime1").prop("checked", false);
	}

	//
	$("#maritime_1_checker").click(function() {
        $("#maritime1").prop("checked", true);
        unchecked_maritime2();
        $(this).addClass('checker_add');
        $("#maritime_2_checker").removeClass('checker_add');
		$("#formula").val($("#maritime1").val());
		errorFormulaMaritime.style.display = 'none';
    })

    $("#maritime_2_checker").click(function() {
        $("#maritime2").prop("checked", true);
        unchecked_maritime1();
        $(this).addClass('checker_add');
        $("#maritime_1_checker").removeClass('checker_add');
		$("#formula").val($("#maritime2").val());
		errorFormulaMaritime.style.display = 'none';
					
    })
	
	/*********************/
	//********aerien*******
	/*********************/
	
	//aerien checked
	var unchecked_aerien2 = function() {
		$("#aerien2").prop("checked", false);
	}
	
	var unchecked_aerien1 = function() {
		$("#aerien1").prop("checked", false);
	}

	//
	$("#aerien_1_checker").click(function() {
        $("#aerien1").prop("checked", true);
        unchecked_aerien2();
        $(this).addClass('checker_add');
        $("#aerien_2_checker").removeClass('checker_add');
		$("#formula").val($("#aerien1").val());
		errorFormulaAir.style.display = 'none';
    })

    $("#aerien_2_checker").click(function() {
        $("#aerien2").prop("checked", true);
        unchecked_aerien1();
        $(this).addClass('checker_add');
        $("#aerien_1_checker").removeClass('checker_add');
		$("#formula").val($("#aerien2").val());
		errorFormulaAir.style.display = 'none';
    })
	
	/************************/
	//********terrestre******
	/************************/
	
	//terrestre checked
	var unchecked_terrestre2 = function() {
		$("#terrestre2").prop("checked", false);
	}
	
	var unchecked_terrestre1 = function() {
		$("#terrestre1").prop("checked", false);
	}

	//
	$("#terrestre_1_checker").click(function() {
        $("#terrestre1").prop("checked", true);
        unchecked_terrestre2();
        $(this).addClass('checker_add');
        $("#terrestre_2_checker").removeClass('checker_add');
		$("#formula").val($("#terrestre1").val());
		errorFormulaLand.style.display = 'none';
    })

    $("#terrestre_2_checker").click(function() {
        $("#terrestre2").prop("checked", true);
        unchecked_terrestre1();
        $(this).addClass('checker_add');
        $("#terrestre_1_checker").removeClass('checker_add');
		$("#formula").val($("#terrestre2").val()); 
		errorFormulaLand.style.display = 'none';  
    })
	
	
	//~~~~~~~~~~~~~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    //~~~~~~~~~~~~~~~~   Gestion de la validation de la destination (Import-Export) ~~~~~~~~~~~~~~
    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	
	 // Cacher le message d'erreur au début
	const errorDestinationInOut = document.querySelector('.Error .errorDestinationInOut');
    errorDestinationInOut.style.display = 'none';
	
	// Sélectionner les boutons radio
    const destinationInOutRadios = document.querySelectorAll('input[name="subscription[destination_in_out]"]');
    const btnNextDestinationInOut = document.querySelector('.btn-next-destination-in-out');
	
	// Cacher l'alerte si une formule de protection est sélectionnée
    destinationInOutRadios.forEach(function(radio) {
        radio.addEventListener('change', function() {
            // Si un mode de transport est sélectionné, cacher le message d'erreur
            errorDestinationInOut.style.display = 'none';
        });
    });
	
	// Lorsque l'utilisateur clique sur le bouton "SUIVANT"
    btnNextDestinationInOut.addEventListener('click', function() {
        let isdestinationInOutSelected = false;

        // Vérifier si l'un des boutons radio est coché
        destinationInOutRadios.forEach(function(radio) {
            if (radio.checked) {
                isdestinationInOutSelected = true;
            }
        });

        // Si aucune formule de protection n'est sélectionné, afficher le message d'erreur
        if (!isdestinationInOutSelected) {
            errorDestinationInOut.style.display = 'block';
            return;  // Ne pas passer à l'étape suivante
        }

        // Si une formule de protection est sélectionnée, cacher le message d'erreur et passer à l'étape suivante
        errorDestinationInOut.style.display = 'none';
		getTransportInfoForm();
        subscription_wizard_steps.steps("next");
    });
	
	//~~~~~~~~~~~~~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    //~~~~~~~~~~~~~~~~   Gestion de la validation de la destination (Zone) ~~~~~~~~~~~~~~
    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~##########################~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	
	 // Cacher le message d'erreur au début
	const errorDestinationZone = document.querySelector('.Error .errorDestinationZone');
    errorDestinationZone.style.display = 'none';
	
	// Sélectionner les boutons radio
    const destinationZoneRadios = document.querySelectorAll('input[name="subscription[destination_zone]"]');
    const btnNextDestinationZone = document.querySelector('.btn-next-destination-zone');
	
	// Cacher l'alerte si une destination est sélectionnée
    destinationZoneRadios.forEach(function(radio) {
        radio.addEventListener('change', function() {
            // Si un mode de transport est sélectionné, cacher le message d'erreur
            errorDestinationZone.style.display = 'none';
        });
    });
	
	// Lorsque l'utilisateur clique sur le bouton "SUIVANT"
    btnNextDestinationZone.addEventListener('click', function() {
        let isdestinationZoneSelected = false;

        // Vérifier si l'un des boutons radio est coché
        destinationZoneRadios.forEach(function(radio) {
            if (radio.checked) {
                isdestinationZoneSelected = true;
            }
        });

        // Si aucune formule de protection n'est sélectionné, afficher le message d'erreur
        if (!isdestinationZoneSelected) {
            errorDestinationZone.style.display = 'block';
            return;  // Ne pas passer à l'étape suivante
        }

        // Si une formule de protection est sélectionnée, cacher le message d'erreur et passer à l'étape suivante
        errorDestinationZone.style.display = 'none';
		getTransportInfoForm();
        subscription_wizard_steps.steps("next");
    });
	
	var getTransportInfoForm = function() {

		//declaration
		var v_trans = $("#transport_mod").val();  
		var v_dest = $("#destination").val(); 
		
		//maritime (import/export)
		if(v_trans == "1" &&  v_dest == "1"){
			
			$("#sea_route_import_info_container").removeClass("d-none").addClass("d-block");
			$("#sea_route_export_info_container").removeClass("d-block").addClass("d-none");
			
            $("#airway_route_import_info_container").removeClass("d-block").addClass("d-none");
            $("#airway_route_export_info_container").removeClass("d-block").addClass("d-none");
			
            $("#ground_route_only_rci_info_container").removeClass("d-block").addClass("d-none");
            $("#ground_route_cedeao_info_container").removeClass("d-block").addClass("d-none");
			
			getPriceSeaImportSubscription();
			getFormulaInfoForm();
			
		}else if(v_trans== "1" && v_dest == "2"){ 
		
			$("#sea_route_import_info_container").removeClass("d-block").addClass("d-none");
			$("#sea_route_export_info_container").removeClass("d-none").addClass("d-block");
			
            $("#airway_route_import_info_container").removeClass("d-block").addClass("d-none");
            $("#airway_route_export_info_container").removeClass("d-block").addClass("d-none");
			
            $("#ground_route_only_rci_info_container").removeClass("d-block").addClass("d-none");
            $("#ground_route_cedeao_info_container").removeClass("d-block").addClass("d-none");
			
			getPriceSeaExportSubscription();
			getFormulaInfoForm();
		}
		
		//aerien (import/export)
		else if(v_trans == "2" && v_dest == "1"){
			
			$("#sea_route_import_info_container").removeClass("d-block").addClass("d-none");
			$("#sea_route_export_info_container").removeClass("d-block").addClass("d-none");
			
            $("#airway_route_import_info_container").removeClass("d-none").addClass("d-block");
            $("#airway_route_export_info_container").removeClass("d-block").addClass("d-none");
			
            $("#ground_route_only_rci_info_container").removeClass("d-block").addClass("d-none");
            $("#ground_route_cedeao_info_container").removeClass("d-block").addClass("d-none");
			
			getPriceAirwayImportSubscription();
			getFormulaInfoForm();
			
		}else if(v_trans== "2" && v_dest == "2"){ 
		
			$("#sea_route_import_info_container").removeClass("d-block").addClass("d-none");
			$("#sea_route_export_info_container").removeClass("d-block").addClass("d-none");
			
            $("#airway_route_import_info_container").removeClass("d-block").addClass("d-none");
            $("#airway_route_export_info_container").removeClass("d-none").addClass("d-block");
			
            $("#ground_route_only_rci_info_container").removeClass("d-block").addClass("d-none");
            $("#ground_route_cedeao_info_container").removeClass("d-block").addClass("d-none");
			
			getPriceAirwayExportSubscription();
			getFormulaInfoForm();
		}
		
		//terrestre
		else if(v_trans == "3" && v_dest == "1"){
			
			$("#sea_route_import_info_container").removeClass("d-block").addClass("d-none");
			$("#sea_route_export_info_container").removeClass("d-block").addClass("d-none");
			
            $("#airway_route_import_info_container").removeClass("d-block").addClass("d-none");
            $("#airway_route_export_info_container").removeClass("d-block").addClass("d-none");
			
            $("#ground_route_only_rci_info_container").removeClass("d-none").addClass("d-block");
            $("#ground_route_cedeao_info_container").removeClass("d-block").addClass("d-none");
			
			getPriceGroundRciSubscription();
			
		}else if(v_trans== "3" && v_dest == "2"){ 
		
			$("#sea_route_import_info_container").removeClass("d-block").addClass("d-none");
			$("#sea_route_export_info_container").removeClass("d-block").addClass("d-none");
			
            $("#airway_route_import_info_container").removeClass("d-block").addClass("d-none");
            $("#airway_route_export_info_container").removeClass("d-block").addClass("d-none");
			
            $("#ground_route_only_rci_info_container").removeClass("d-block").addClass("d-none");
            $("#ground_route_cedeao_info_container").removeClass("d-none").addClass("d-block");
			
			getPriceGroundCedeaoSubscription();
		}
	
    }
	
	var getFormulaInfoForm = function() {

		//declaration
		var v_formula = $("#formula").val();
		var v_trans = $("#transport_mod").val(); 
		
		if(v_trans !="3" && v_formula == "2"){
			$("#label-price-sea-import").removeClass("d-block").addClass("d-none");
			$("#label-price-sea-export").removeClass("d-block").addClass("d-none");
			
			$("#label-price-airway-import").removeClass("d-block").addClass("d-none");
			$("#label-price-airway-export").removeClass("d-block").addClass("d-none");
			
			$("#price_subscription").val(0);
			
		}else{ 
			$("#label-price-sea-import").removeClass("d-none").addClass("d-block");
			$("#label-price-sea-export").removeClass("d-none").addClass("d-block");
			
			$("#label-price-airway-import").removeClass("d-none").addClass("d-block");
			$("#label-price-airway-export").removeClass("d-none").addClass("d-block");
		}
		
    }
	
	//*********************************************************************//
	//****************************DESTINATION CHECKER**********************//
	//*********************************************************************//
	
	//formula checked
	var unchecked_destination = function() {
		$("#destination1").prop("checked", false);
		$("#destination_1_checker").removeClass('checker_add');
		$("#destination2").prop("checked", false);
		$("#destination_2_checker").removeClass('checker_add');
		//
		$("#destinationzone1").prop("checked", false);
		$("#destination_zone_1_checker").removeClass('checker_add');
		$("#destinationzone2").prop("checked", false);
		$("#destination_zone_2_checker").removeClass('checker_add');
	}
	
	//destination checked
	var unchecked_destination2 = function() {
		$("#destination2").prop("checked", false);
	}
	
	var unchecked_destination1 = function() {
		$("#destination1").prop("checked", false);
	}

	var unchecked_destinationzone2 = function() {
		$("#destinationzone2").prop("checked", false);
	}
	
	var unchecked_destinationzone1 = function() {
		$("#destinationzone1").prop("checked", false);
	}

	//
	$("#destination_1_checker").click(function() {
        $("#destination1").prop("checked", true);
        unchecked_destination2();
        $(this).addClass('checker_add');
        $("#destination_2_checker").removeClass('checker_add');
		$("#destination").val($("#destination1").val());
		errorDestinationInOut.style.display = 'none';
    })

    $("#destination_2_checker").click(function() {
        $("#destination2").prop("checked", true);
        unchecked_destination1();
        $(this).addClass('checker_add');
        $("#destination_1_checker").removeClass('checker_add');
		$("#destination").val($("#destination2").val());
		errorDestinationInOut.style.display = 'none';			
    })
	
	//
	$("#destination_zone_1_checker").click(function() {
        $("#destinationzone1").prop("checked", true);
        unchecked_destinationzone2();
        $(this).addClass('checker_add');
        $("#destination_zone_2_checker").removeClass('checker_add');
		$("#destination").val($("#destinationzone1").val());
		errorDestinationZone.style.display = 'none';
    })

    $("#destination_zone_2_checker").click(function() {
        $("#destinationzone2").prop("checked", true);
        unchecked_destinationzone1();
        $(this).addClass('checker_add');
        $("#destination_zone_1_checker").removeClass('checker_add');
		$("#destination").val($("#destinationzone2").val());
		errorDestinationZone.style.display = 'none';
    })
	
	//******************************//
	//************* END ************//
	//******************************//
	
	//###########################################################
	//################## Payment method checked #################
	//###########################################################

	// Gestion des méthodes de paiement
    var checked_momo_1 = function() {
        $("#subscription_paymod_cinetpay").prop("checked", true);
        $("#subscription_paymod_espece").prop("checked", false);
        $("#subscription_paymod_check").prop("checked", false);
    };

    var checked_momo_2 = function() {
        $("#subscription_paymod_espece").prop("checked", true);
        $("#subscription_paymod_cinetpay").prop("checked", false);
        $("#subscription_paymod_check").prop("checked", false);
    };

    var checked_momo_3 = function() {
        $("#subscription_paymod_check").prop("checked", true);
        $("#subscription_paymod_cinetpay").prop("checked", false);
        $("#subscription_paymod_espece").prop("checked", false);
    };

    $("#momo1_checker").click(function() {
        checked_momo_1();
        $(this).addClass('checker_add');
        $("#momo2_checker, #momo3_checker").removeClass('checker_add');
        $("#momo_pay").val($("#subscription_paymod_cinetpay").val());
		
		// Cacher les champs de téléchargement de fichiers
		$("#cashreceiptpayment, #checkreceiptpayment").addClass('d-none');
    });

    $("#momo2_checker").click(function() {
        checked_momo_2();
        $(this).addClass('checker_add');
        $("#momo1_checker, #momo3_checker").removeClass('checker_add');
        $("#momo_pay").val($("#subscription_paymod_espece").val());
		
		// Afficher le champ de téléchargement pour l'option Espèce
		$("#cashreceiptpayment").removeClass('d-none');
		$("#checkreceiptpayment").addClass('d-none');
    });
	
    $("#momo3_checker").click(function() {
        checked_momo_3();
        $(this).addClass('checker_add');
        $("#momo1_checker, #momo2_checker").removeClass('checker_add');
        $("#momo_pay").val($("#subscription_paymod_check").val());

		// Afficher le champ de téléchargement pour l'option Chèque
		$("#checkreceiptpayment").removeClass('d-none');
		$("#cashreceiptpayment").addClass('d-none');
	
    });
	
	
	// Fonction pour formater le nombre avec des espaces comme séparateur de milliers
	function formatNumberWithSpaces(num) {
		return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
	}
	
	/********** GETPRICE SEA IMPORT SUBSCRIPTION ***********/

	var getPriceSeaImportSubscription = function() {
		
		//declaration
		var v_cb = $('#imp_commercial_bill_value').val();
		var v_fb = $('#imp_freight_bill_value').val();
		var v_price = Math.round((parseInt(v_cb.replace(/ /g, "")) + parseInt(v_fb.replace(/ /g, "")))*0.0015);
		var v_formula = $("#formula").val();
		var v_trans = $("#transport_mod").val(); 

		//calcul price process	
		if (v_trans !="3" && v_formula=="2"){
			
			$("#price_subscription").val(0);
			$("#price_sea_imp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
		}
			
		else if(v_cb == "" || v_fb == ""){
			
			$("#price_subscription").val(0);
			$("#price_sea_imp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_cb!= "" && v_fb != "" && v_price >= 5000){ 
		
			$("#price_subscription").val(v_price + 2500);
			$("#price_sea_imp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_cb!= "" && v_fb != "" && v_price < 5000){ 
		
			$("#price_subscription").val(5000 + 2500);
			$("#price_sea_imp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}

	}
	/********** GETPRICE SEA EXPORT SUBSCRIPTION ***********/
	
	var getPriceSeaExportSubscription = function() {
		
		//declaration
		var v_cb = $('#exp_commercial_bill_value').val();
		var v_fb = $('#exp_freight_bill_value').val();
		var v_price = Math.round((parseInt(v_cb.replace(/ /g, "")) + parseInt(v_fb.replace(/ /g, "")))*0.0015);
		var v_formula = $("#formula").val();
		var v_trans = $("#transport_mod").val(); 
		
		//calcul price process	
		if (v_trans !="3" && v_formula=="2"){
			
			$("#price_subscription").val(0);
			$("#price_sea_imp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
		}
			
		else if(v_cb == "" || v_fb == ""){
			
			$("#price_subscription").val(0);
			$("#price_sea_exp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_cb!= "" && v_fb != "" && v_price >= 5000){ 
		
			$("#price_subscription").val(v_price + 2500);
			$("#price_sea_exp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_cb!= "" && v_fb != "" && v_price < 5000){ 
		
			$("#price_subscription").val(5000 + 2500);
			$("#price_sea_exp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}

	}
	
	/********** GETPRICE AIRWAY IMPORT SUBSCRIPTION ***********/

	var getPriceAirwayImportSubscription = function() {
		
		//declaration
		var v_cb = $('#airway_imp_commercial_bill_value').val();
		var v_fb = $('#airway_imp_freight_bill_value').val();
		var v_price = Math.round((parseInt(v_cb.replace(/ /g, "")) + parseInt(v_fb.replace(/ /g, "")))*0.0015);
		var v_formula = $("#formula").val();
		var v_trans = $("#transport_mod").val(); 
		
		//calcul price process	
		if (v_trans !="3" && v_formula=="2"){
			
			$("#price_subscription").val(0);
			$("#price_sea_imp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
		}
			
		else if(v_cb == "" || v_fb == ""){
			
			$("#price_subscription").val(0);
			$("#price_airway_imp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_cb!= "" && v_fb != "" && v_price >= 5000){ 
		
			$("#price_subscription").val(Math.round(((parseInt(v_cb.replace(/ /g, "")) + parseInt(v_fb.replace(/ /g, "")))*0.0015 + 2500)*1.07));
			$("#price_airway_imp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_cb!= "" && v_fb != "" && v_price < 5000){ 
		
			$("#price_subscription").val(Math.round((5000 + 2500)*1.07));
			$("#price_airway_imp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}

	}
	
	/********** GETPRICE AIRWAY EXPORT SUBSCRIPTION ***********/
	
	var getPriceAirwayExportSubscription = function() {
		
		//declaration
		var v_cb = $('#airway_exp_commercial_bill_value').val();
		var v_fb = $('#airway_exp_freight_bill_value').val();
		var v_price = Math.round((parseInt(v_cb.replace(/ /g, "")) + parseInt(v_fb.replace(/ /g, "")))*0.0015);
		var v_formula = $("#formula").val();
		var v_trans = $("#transport_mod").val(); 
		
		//calcul price process	
		if (v_trans !="3" && v_formula=="2"){
			
			$("#price_subscription").val(0);
			$("#price_sea_imp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
		}
			
		else if(v_cb == "" || v_fb == ""){
			
			$("#price_subscription").val(0);
			$("#price_airway_exp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_cb != "" && v_fb != "" && v_price >= 5000){ 
		
			$("#price_subscription").val(Math.round(((parseInt(v_cb.replace(/ /g, "")) + parseInt(v_fb.replace(/ /g, "")))*0.0015 + 2500)*1.07));
			$("#price_airway_exp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_cb != "" && v_fb != "" && v_price < 5000){ 
		
			$("#price_subscription").val(Math.round((5000 + 2500)*1.07));
			$("#price_airway_exp_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}

	}
	
	/********** GETPRICE GROUND ONLY RCI SUBSCRIPTION ***********/

	var getPriceGroundRciSubscription = function() {
		
		//declaration
		var v_cb = $('#rci_commercial_bill_value').val();
		var v_cb_price = v_cb.replace(/ /g, "");
		var v_price_sup = Math.round((parseInt(v_cb.replace(/ /g, "")))*0.0008);
		var v_price_inf = Math.round((parseInt(v_cb.replace(/ /g, "")))*0.0015);
		
		var v_formula = $("#formula").val(); 
		
		//calcul price process
		
		if(v_cb == ""){
			
			$("#price_subscription").val(0);
			$("#price_ground_rci_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}
		// formula : 1
		else if(v_formula == "1" && v_cb_price >100000000){ 
		
			$("#price_subscription").val(Math.round(((parseInt(v_cb_price)*0.0008) + 2500)*1.145));
			$("#price_ground_rci_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_formula == "1" && v_cb_price <=100000000 && v_price_inf > 10000){ 
		
			$("#price_subscription").val(Math.round(((parseInt(v_cb_price)*0.0015) + 2500)*1.145));
			$("#price_ground_rci_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_formula == "1" && v_cb_price <=100000000 && v_price_inf <= 10000){ 
		
			$("#price_subscription").val(Math.round((10000 + 2500)*1.145));
			$("#price_ground_rci_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
		}
		// formula : 2
		else if(v_formula == "2" && v_cb_price >100000000){ 
		
			$("#price_subscription").val(Math.round((parseInt(v_cb_price)*0.0008)*1.2));
			$("#price_ground_rci_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_formula == "2" && v_cb_price <=100000000 && v_price_inf > 10000){ 
		
			$("#price_subscription").val(Math.round((parseInt(v_cb_price)*0.0015)*1.2));
			$("#price_ground_rci_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_formula == "2" && v_cb_price <=100000000 && v_price_inf <= 10000){ 
		
			$("#price_subscription").val(Math.round(10000*1.2));
			$("#price_ground_rci_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
		}

	}
	
	/********** GETPRICE GROUND CEDEAO SUBSCRIPTION ***********/

	var getPriceGroundCedeaoSubscription = function() {
		
		//declaration
		var v_cb = $('#cedeao_commercial_bill_value').val();
		var v_cb_price = v_cb.replace(/ /g, "");
		var v_price_sup = Math.round((parseInt(v_cb.replace(/ /g, "")))*0.0008);
		var v_price_inf = Math.round((parseInt(v_cb.replace(/ /g, "")))*0.0015);
		
		var v_formula = $("#formula").val(); 
		
		//calcul price process
		
		if(v_cb == ""){
			
			$("#price_subscription").val(0);
			$("#price_ground_cedeao_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}
		// formula : 1
		else if(v_formula == "1" && v_cb_price >120000000){ 
		
			$("#price_subscription").val(Math.round((((parseInt(v_cb_price)*0.0008) + 2500)*1.145)*1.2));
			$("#price_ground_cedeao_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_formula == "1" && v_cb_price <=120000000 && v_price_inf > 10000){ 
		
			$("#price_subscription").val(Math.round((((parseInt(v_cb_price)*0.0015) + 2500)*1.145)*1.2));
			$("#price_ground_cedeao_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_formula == "1" && v_cb_price <=120000000 && v_price_inf <= 10000){ 
		
			$("#price_subscription").val(Math.round(((10000 + 2500)*1.145)*1.2));
			$("#price_ground_cedeao_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
		}
		// formula : 2
		else if(v_formula == "2" && v_cb_price >120000000){ 
		
			$("#price_subscription").val(Math.round(((((parseInt(v_cb_price)*0.0008) + 2500)*1.145)*1.2)*1.2));
			$("#price_ground_cedeao_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_formula == "2" && v_cb_price <=120000000 && v_price_inf > 10000){ 
		
			$("#price_subscription").val(Math.round(((((parseInt(v_cb_price)*0.0015) + 2500)*1.145)*1.2)*1.2));
			$("#price_ground_cedeao_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
			
		}else if(v_formula == "2" && v_cb_price <=120000000 && v_price_inf <= 10000){ 
		
			$("#price_subscription").val(Math.round((((10000 + 2500)*1.145)*1.2)*1.2));
			$("#price_ground_cedeao_subscription_amount").html($("#price_subscription").val().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
		}

	}

	//~~~~~~~~~~~~~~~~~~#################~~~~~~~~~~~~~~~~~~~~
	//~~~~~~~~~~             SUMMARY              ~~~~~~~~~~~
	//~~~~~~~~~~~~~~~~~~#################~~~~~~~~~~~~~~~~~~~~
	
	//Subscription creation and move to summary
	var getSummary = function() {
		var formdata = new FormData($("#subscription_wizard")[0]);
		$.ajax({

			type: 'POST',
			url: "{{ route('transport.new.json') }}",
			data: formdata,
			"timeout": 0,
			"mimeType": "multipart/form-data",
			processData: false,
			contentType: false,
			
			success: function(data) {
				var f = new Date();

				var date = f.getFullYear()+'-'+(f.getMonth()+1)+'-'+f.getDate();
				var time = f.getHours() + ":" + f.getMinutes() + ":" + f.getSeconds();
				var dateTime = date+' '+time;
				console.log("Call get summary ajax success "+dateTime)
				
				if (-1 != JSON.parse(data).data.class.status) {
					
					$("#form_subscription_summary_content").empty().append(JSON.parse(data).data.html);
					
					document.getElementById("summary_code").innerHTML = JSON.parse(data).data.class.data.code;
					document.getElementById("summary_amount").innerHTML = formatNumberWithSpaces(JSON.parse(data).data.int_prime);
					//document.getElementById("recipient_email").innerHTML = $('#subscriber_email').val();
					
					$("#subscription_code").val(JSON.parse(data).data.class.data.code)
					$("#subscription_amount").val(JSON.parse(data).data.int_prime);
					
					// Récupérer la civilité, le nom et le prénom
					var civility = $('#civility').val();
					var lastname = $('#lastname').val();
					var firstname = $('#firstname').val();
					
					if (!isUserAuthenticated){
						document.getElementById("summary_assured").innerHTML = civility + ' ' + lastname + ' ' + firstname;
					}
					
					// Supprimer l'email du localStorage après avoir récupéré le résumé
					var email = $('#subscriber_email').val();
					localStorage.removeItem(email);  // Suppression de l'email du localStorage
					
				} else {
					
					console.log("subscription error");
					
				}
				
				subscription_wizard_steps.steps("next");

			},
			error: function(data)
		    {
				return subscription_wizard.valid();
		    }
		});

	}
	
	$("#btn-next-main-info").click(function() {
		getSummary();
	})
	
	document.querySelector('.btn-verif-data').addEventListener('click', function() {
		
		const checkbox1 = document.getElementById('checkbox1');
		const checkbox2 = document.getElementById('checkbox2');
		
		if (!checkbox1.checked) {
			swal("Ooops !", "", {
				icon: "error",
				buttons: {
					confirm: {
						className: 'btn btn-danger'
					}
				},
				content: {
					element: "div",
					attributes: {
						innerHTML: "Vous devez cocher <strong>J'accepte les <a href='javascript:void(0)'><strong>conditions générales d'utilisation</strong></a>"
					}
				}
			});
			return;
		}
		
		if (!checkbox2.checked) {
			swal("Ooops !", "", {
				icon: "error",
				buttons: {
					confirm: {
						className: 'btn btn-danger'
					}
				},
				content: {
					element: "div",
					attributes: {
						innerHTML: "Vous devez cocher <strong>J'accepte le montant de la prime d'assurance et m'engage à le régler</strong> avant de poursuivre"
					}
				}
			});
			return;
		}
		
		//On passe à l'étape suivante
		subscription_wizard_steps.steps("next");
		
	});
	
	//~~~~~~~~~~~~~~~~~~#################~~~~~~~~~~~~~~~~~~~~~~~
    //~~~~~~~~        Subscription Payment              ~~~~~~~~
    //~~~~~~~~~~~~~~~~~~#################~~~~~~~~~~~~~~~~~~~~~~~
	
	$("#btn-payment-transport").click(function() {
        if (subscription_wizard.valid())
		createSubscriptionPayment();
		subscription_wizard.validate().settings.ignore = ":disabled,:hidden";
		return subscription_wizard.valid();
    });
	
	// En attente des API de paiement des primes
	var createSubscriptionPayment = function() {
		
		var isMobileMoney = document.getElementById("subscription_paymod_cinetpay");
		
		if(isMobileMoney.checked==true){
			//Paiement cinetpay
			checkout()
			//paymentCinetPay()
		}else{
			cashpayment()
		}
		
	}
	
	//~~~~~~~~~~~~~~~~~~#################~~~~~~~~~~~~~~~~~~
	//~~~~~~~~~~       PAYMENT  CINETPAY          ~~~~~~~~~
	//~~~~~~~~~~~~~~~~~~#################~~~~~~~~~~~~~~~~~~
	
	// Générer l'identifiant de transaction
	var transactionId = Math.floor(Math.random() * 100000000).toString(); // Identifiant unique
		
	var paymentCinetPay = function() {
		
		// Créer l'objet paymentdata
		var paymentdata = {
			"transaction_id": transactionId,
			"code": $('#subscription_code').val(),
			"product": $('#subscription_product_id').val(),
			"amount": $('#subscription_amount').val(),
			"payment_method": "OM",
			"currency": "XOF",
			"status": "ACCEPTED",
			"operator_id": "MP250122.1554.B30184",
			"payment_date": new Date().toISOString().slice(0, 19).replace('T', ' ')
		};
		
		// Enregistrement du paiement et mise à jour de la souscription
		$.ajax({
			type: 'POST',
			url: "{{ route('health.getcinetpay') }}",
			data: JSON.stringify(paymentdata), // Envoyer les données en tant que JSON
			contentType: 'application/json', // Indiquer que le contenu est en JSON
			dataType: 'json', // Attendre une réponse au format JSON
			success: function(data) {
				//On passe à l'etape suivante
				subscription_wizard_steps.steps("next");
			},
			error: function(xhr, status, error) {
				console.error("Erreur AJAX :", status, error);
				alert("Une erreur s'est produite lors de l'enregistrement. Veuillez réessayer.");
			}
		});	
	};
		
	function checkout() {
		
		CinetPay.setConfig({
			apikey: '1347440513672e0ae8340963.14284618', // YOUR APIKEY
			site_id: '5882787', // YOUR_SITE_ID
			notify_url: "{{ route('transport.notify_url')}}", // YOUR_NOTIFY_URL_END_POINT
			mode: 'PRODUCTION'
		});
		CinetPay.getCheckout({
			transaction_id: transactionId, // YOUR TRANSACTION ID
			amount: 100,
			//amount: $("#subscription_amount").val(),
			currency: 'XOF',
			channels: 'ALL',
			description: 'Paiement prime assurance', 
			metadata: $("#subscription_code").val(),  
			//Fournir ces variables pour le paiements par carte bancaire
			customer_name: $("#lastname").val(),//Le nom du client
			customer_surname: $("#firstname").val(),//Le prenom du client
			customer_email: $("#email").val(),//l'email du client
			customer_phone_number: $("#contact").val(),//Le téléphone du client
			customer_address : "BP 0024",//addresse du client
			customer_city: "Antananarivo",// La ville du client
			customer_country : "CM",// le code ISO du pays
			customer_state : "CM",// le code ISO l'état
			customer_zip_code : "06510", // code postal

		});
		CinetPay.waitResponse(function(data) {
			// En cas d'échec
			if (data.status == "REFUSED") {
				if (alert("Votre paiement a échoué")) {
					window.location.reload();
					//window.location = "{{ route('subscribe.health.failed')}}";
				}
			} 
			// En cas de succès
			else if (data.status == "ACCEPTED") {
				if (alert("Votre paiement a été effectué avec succès")) {
					//correct, on delivre le service
					window.location.reload();
					//window.location = "{{ route('subscribe.health.success')}}";
				}
			}
		});
		CinetPay.onError(function(data) {
			console.log(data);
		});
	}
	
	
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const deliveryOptionDiv = document.getElementById('delivery_option');
    const agencyOptionDiv = document.getElementById('agency_option');
    const deliveryZone = document.getElementById('delivery_zone');
    const instructionAddress = document.getElementById('delivery_instruction_address');
    const deliveryRadioY = document.getElementById('subscription_delivery_y');
    const deliveryRadioN = document.getElementById('subscription_delivery_n');
    const agencyZone = document.getElementById('agency_zone');
    const agencyInstructionAddress = document.getElementById('agency_instruction_address');

    // Fonction pour afficher/cacher les options de livraison et d'agence
    function toggleDeliveryOptions() {
        // Si l'option "Livraison" est sélectionnée
        if (deliveryRadioY.checked) {
            deliveryOptionDiv.style.display = 'block';
            agencyOptionDiv.style.display = 'none';  // Cache l'option "Agence"

            // Rendre les champs dans la div "delivery_option" obligatoires
            deliveryZone.setAttribute('required', 'required');
            instructionAddress.setAttribute('required', 'required');
            deliveryZone.setAttribute('name', 'subscription[deliveryzone]');
            instructionAddress.setAttribute('name', 'subscription[instruction_address]');

            // Enlever les champs "required" et "name" dans la div "agency_option"
            agencyZone.removeAttribute('required');
            agencyInstructionAddress.removeAttribute('required');
            agencyZone.removeAttribute('name');
            agencyInstructionAddress.removeAttribute('name');

        } 
        // Si l'option "En agence" est sélectionnée
        else if (deliveryRadioN.checked) {
            agencyOptionDiv.style.display = 'block';
            deliveryOptionDiv.style.display = 'none';  // Cache l'option "Livraison"

            // Rendre les champs dans la div "agency_option" obligatoires
            agencyZone.setAttribute('required', 'required');
            agencyInstructionAddress.setAttribute('required', 'required');
            agencyZone.setAttribute('name', 'subscription[deliveryzone]');
            agencyInstructionAddress.setAttribute('name', 'subscription[instruction_address]');

            // Enlever les champs "required" et "name" dans la div "delivery_option"
            deliveryZone.removeAttribute('required');
            instructionAddress.removeAttribute('required');
            deliveryZone.removeAttribute('name');
            instructionAddress.removeAttribute('name');
        }
    }

    // Ajouter des écouteurs d'événements sur les boutons radio
    deliveryRadioY.addEventListener('change', toggleDeliveryOptions);
    deliveryRadioN.addEventListener('change', toggleDeliveryOptions);

    // Initialiser la visibilité et les attributs des champs sur le chargement de la page
    toggleDeliveryOptions();
});
</script>

<script>

//~~~~~~~~~~~~~#################~~~~~~~~~~~~~~~
//~~~~~~~~~~      EMAIL EXISTE         ~~~~~~~~
//~~~~~~~~~~~~~#################~~~~~~~~~~~~~~~

var mymail = {
    'verif': function(e) {
        var mail = $("#subscriber_email").val();
        var mailformat = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

        if(mail.match(mailformat)){
            $.ajax({
                url: "{{ route('verifemail.json') }}",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                type: 'POST',
                data: 'email=' + mail,
                dataType: 'json',
                success: function(json) {
                    if (json['success']) {
                        console.log('success');
                        $("#subscriber_email").removeClass("error");
                        $("#btn-subscriber-info").prop("disabled", false);
                        $("#existing-mail").hide();
                    }
                    if (json['success'] == false) {
                        console.log('error');
                        $("#subscriber_email").addClass("error");
                        $('#modal-existing-subscriber').modal('show');
                        $("#btn-subscriber-info").prop("disabled", true);
                        $("#existing-mail").show();
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        }   
    }
}

function closeModal() {
	$('#modal-existing-subscriber').modal('hide');
	document.getElementById('subscriber_email').focus();
}

 $(document).ready(function(){
	$('#disclaimerModal').modal('show');
});

$("#phoneInfoModal").click(function() {
	$('#phoneModal').modal('show');
});

$("#emailInfoModal").click(function() {
	$('#emailModal').modal('show');
});	
</script>

<script>
// Initialisation du pad de signature et des boutons
var signature = {
    canvas: null,
    clearButton: null,
    saveButton: null,
    
    init: function init() {
        this.canvas = document.querySelector(".signature-pad");
        this.clearButton = document.getElementById('clearSig');
        this.saveButton = document.getElementById('addSig');
        signaturePad = new SignaturePad(this.canvas);

        // Effacer la signature
        this.clearButton.addEventListener('click', function (event) {
            signaturePad.clear();
            $('#SignupImage1').val(''); // Réinitialiser le champ caché
        });

        // Vérification et enregistrement de la signature au moment du passage à l'étape suivante
        $(".btn-next-sign").click(function() {
            // Vérifier si l'utilisateur a signé
            if (signaturePad.isEmpty()) {
                // Si le canvas est vide, afficher un message et empêcher le passage à l'étape suivante
                swal("Ooops !", "", {
					icon: "error",
					buttons: {
						confirm: {
							className: 'btn btn-danger'
						}
					},
					content: {
						element: "div",
						attributes: {
							innerHTML: "Nous avons besoin de votre signature pour poursuivre la procédure"
						}
					}
				});
                return false; // Empêche le passage à l'étape suivante
            } else {
                // Si la signature est présente, on enregistre l'image en base64 dans le champ caché
                var data = signaturePad.toDataURL('image/png');
                $('#SignupImage1').val(data);
                
                // Si le formulaire est valide, continuer vers l'étape suivante
                if (subscription_wizard.valid()) {
                    subscription_wizard.steps("next");
                } else {
                    subscription_wizard.validate().settings.ignore = ":disabled,:hidden";
                    return subscription_wizard.valid();
                }
            }
        });
    }
};

// Initialiser la signature
signature.init();

</script>
@endsection