@extends('layouts.website')
@section('title') Prendre un rendez-vous @endsection
@section('contact') active @endsection
@section('main')
<div id="checkout-loader" class="loading-mask d-none">
	<div class="loader">
		<img src="{{asset('assets/img/loader-1.gif')}}" alt="Loading..." style="position: absolute;">
	</div>
</div>
<!-- Title Bar -->
<div class="pbmit-title-bar-wrapper-app">
	<div class="container">
		<div class="pbmit-title-bar-content">
			<div class="pbmit-title-bar-content-inner">
				<h1 class="pbmit-tbar-title">Prendre un RDV</h1>
				<div class="pbmit-breadcrumb">
					<div class="pbmit-breadcrumb-inner">
						<span><a title="" href="{{route('home')}}" class="home"><span>Accueil</span></a></span>
						<span class="sep">
							<i class="pbmit-base-icon-angle-right"></i>
						</span>
						<span><span class="post-root post post-post current-item">Prendre un rendez-vous</span></span>
					</div>
				</div>
			</div>
		</div> 
	</div> 
</div>
<!-- Title Bar End-->

<!-- Contact Us Content -->
<div class="page-content"> 
	<!-- Contact Form -->
	<section class="section-lgx">
		<div class="container">
			<div class="row g-0">
				<div class="col-md-4 contact_col_1">
					<div class="pbmit-heading-subheading animation-style2">
						<h4 class="pbmit-subtitle">Nous contacter</h4>
						<h2 class="pbmit-title">Prendre un rendez-vous</h2>
					</div>
					<div class="contact-form_leftbox-appointment">
						<div class="contact-us-left_inner">
							<div class="contact-form-left_title">
								<div class="pbmit-heading-subheading mb-0 animation-style2">
									<h2 class="pbmit-title"></h2>
								</div>
							</div>
							<div class="pbmit-social-link">
								<h3>Suivez-nous sur :</h3>
								<ul class="pbmit-social-links">
									<li class="pbmit-social-li pbmit-social-facebook">
										<a href="javascript:void(0)" target="_blank">
											<span><i class="pbmit-base-icon-facebook-squared"></i></span>
										</a>
									</li>
									<li class="pbmit-social-li pbmit-social-twitter">
										<a href="javascript:void(0)" target="_blank">
											<span><i class="pbmit-base-icon-twitter"></i></span>
										</a>
									</li>
									<li class="pbmit-social-li pbmit-social-instagram">
										<a href="javascript:void(0)" target="_blank">
											<span><i class="pbmit-base-icon-instagram"></i></span>
										</a>
									</li>
									<li class="pbmit-social-li pbmit-social-youtube">
										<a href="javascript:void(0)" target="_blank">
											<span><i class="pbmit-base-icon-youtube-play"></i></span>
										</a>
									</li>
								 </ul>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-8 contact_col_2">
					<div class="contact-form_main">
						<p>Prenez rendez-vous avec un conseiller. Nous serons ravis de vous accueillir dans nos locaux.</p>
						<div class="contact_form">
							<form class="form_appointment" id="appointment-form" autocomplete="off">
							@csrf
								<h2>Rendez-vous</h2>
								<div class="row">
									<div class="col-md-12">
										<input type="text" class="form-control" placeholder="Nom & Prenom(s)" name="name" required>
									</div>
									<div class="col-md-6">
										<input type="email" class="form-control" placeholder="Email" name="email" required>
									</div>
									<div class="col-md-6">
										<input type="text" class="form-control" placeholder="N° Téléphone*" name="phone" data-mask data-inputmask="'mask': ['99-99-99-99-99', '+999 99-99-99-99-99']" required>
									</div>
									<div class="col-md-12">
										<select class="form-control custom-select" name="subject" required>
										  <option selected="" value="">Selectionnez l'objet du rendez-vous</option>
										  <option value="Souscrire">Nouvelle souscription</option>
										  <option value="Réassurance">Réassurance</option>
										  <option value="Réclamation">Réclamation</option>
										  <option value="Demander un devis">Demander un devis</option>
										  <option value="Conseil">Conseil</option>
										  <option value="Investir">Investir dans la société</option>
										  <option value="Apporter une affaire">Apporter une affaire</option>
										  <option value="Autres">Autres</option>
										</select>
									</div>
									<div class="col-md-6">
										<input type="date" class="form-control" placeholder="Date du RDV" name="appointmentDate" min=2026-01-16 required>
									</div>
									<div class="col-md-6">
										<input type="time" class="form-control" placeholder="Heure du RDV" name="appointmentHour" required>
									</div>
									<div class="col-md-12">
										<textarea name="message" cols="40" rows="10" class="form-control" placeholder="Laissez votre message ici..." required></textarea>
									</div>
									<div class="col-sm-12">
										<button type="button" id="btn-appointment" class="pbmit-btn pbmit-btn-shape-round">
											<i class="form-btn-loader fa fa-circle-o-notch fa-spin fa-fw margin-bottom d-none"></i>
											<span class="pbmit-button-content-wrapper">
												<span class="pbmit-button-icon pbmit-align-icon-right">
													<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="pbmit-svg-arrow" x="0px" y="0px" width="10" height="19" viewBox="0 0 19 19" xml:space="preserve">
														<line x1="1" y1="18" x2="17.8" y2="1.2"></line>
														<line x1="1.2" y1="1" x2="18" y2="1"></line>
														<line x1="18" y1="17.8" x2="18" y2="1"></line>
													</svg>
												</span>
												<span class="pbmit-button-text">Envoyer</span>
											</span>
										</button>
									</div>
									<div class="col-md-12 col-lg-12 message-status"></div>
								</div>
							</form> 
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</div>
<!-- Contact Us Content End -->

<!-- Success Modal -->
<div id="succesModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-sm modal-dialog-centered">
		<div class="modal-content modal-filled bg-success">
			<div class="modal-body p-4">
				<div class="text-center text-white">
					<i class="fa fa-check fz26"></i>
					<h3 class="mt-2 text-white">Bravo !</h3>
					<p class="mt-3 text-white">Votre demande de RDV a été envoyée avec succès</p>
					<a href="javascript:void(0)" class="btn-success text-white" data-bs-dismiss="modal">Fermer</a>
				</div>
			</div>
		</div>
	</div>
</div>	

<div id="errorModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-sm modal-dialog-centered">
		<div class="modal-content modal-filled bg-danger">
			<div class="modal-body p-4">
				<div class="text-center text-white">
					<i class="fa fa-check fz26"></i>
					<h3 class="mt-2 text-white">Ooops !</h3>
					<p class="mt-3 text-white" id="request-response">Un ou plusieurs champs ne sont pas correctement remplis. Vérifiez vos entrées, puis réessayez.</p>
					<a href="javascript:void(0)" class="btn-danger text-white" data-bs-dismiss="modal">Fermer</a>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection

@section('script')
<script>

    var form_appointment = $(".form_appointment");
	
		$("#btn-appointment").click(function() {
			if (!form_appointment.valid()){
				form_appointment.validate().settings.ignore = ":disabled,:hidden";
				$('#errorModal').modal('toggle');
				return form_appointment.valid();
			}else{
				sendRequest();
			}
		});
			
			
	//~~~~~~~~~~~~~#################~~~~~~~~~~~~~
	//~~~~~~~~~~      SEND EMAIL         ~~~~~~~~
	//~~~~~~~~~~~~~#################~~~~~~~~~~~~~
		
	var sendRequest = function() {
		
        var formdata = new FormData($("#appointment-form")[0]);

        $.ajax({
            type: 'POST',
            url: "{{ route('request.appointment.store') }}",
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: formdata,
            "timeout": 0,
            "mimeType": "multipart/form-data",
            processData: false,
            contentType: false,
            success: function(data) {
				
				 // Aficher la fenêtre modale
				 $('#succesModal').modal('toggle');
				 
				 // Réinitialisation du formulaire
				 $("#appointment-form")[0].reset();
				
			},
			error: function(xhr, ajaxOptions, thrownError) {
				console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
			}

        });
    }
		
</script>
@endsection