<?php
include 'menu.php';
?>
<link rel="stylesheet" href="css/voyag.css">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#p1").hide();
$("#p2").hide();
$("#btn1").click(function() {
$("#p1").toggle();
$("#p2").hide();
});
$("#btn2").click(function() {
$("#p2").toggle();
$("#p1").hide();
});
});
</script>
<style>
@media only screen and (max-width: 600px) {
#numero{margin-left: 60%;}
.form_1_progessbar{width:4%;}
.form_2_progessbar{width:4%;}
.form_3_progessbar{width:4%;}
.form_4_progessbar{width:4%;}
}
</style>
</head>
<body>
<div class="container-fluid page-header3 mb-5 wow fadeIn" data-wow-delay="0.1s">
<div class="container">
</div>
</div>
<div class="container-xxl service py-5" id="distance">
<div class="container">
<div class="text-center mx-auto wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
<h1 class="display-5 mb-2">Description</h1>
<p class="mb-5">L'assurance voyage est un contrat permettant de protéger celui qui la souscrit des aléas
de son voyage </p>
</div>
<div class="row g-4 wow fadeInUp" data-wow-delay="0.3s" style="margin-left:5%">
<div class="col-lg-5">
<div class="nav nav-pills d-flex justify-content-between w-100 h-100 me-4">
<button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-4 active" data-bs-toggle="pill" data-bs-target="#tab-pane-1" type="button">
<h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>Vol</h5>
</button>
<button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-4" data-bs-toggle="pill" data-bs-target="#tab-pane-2" type="button">
<h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>Incendie</h5>
</button>
<button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-4" data-bs-toggle="pill" data-bs-target="#tab-pane-3" type="button">
<h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>Tierce/Dommage ou Tous Risques
</h5>
</button>
<button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-4" data-bs-toggle="pill" data-bs-target="#tab-pane-4" type="button">
<h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>Tierce Collision ou Dommage
Collision </h5>
</button>
<button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-0" data-bs-toggle="pill" data-bs-target="#tab-pane-5" type="button">
<h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>Tierce Plafonnée </h5>
</button>
</div>
</div>
<div class="col-lg-5">
<div class="nav nav-pills d-flex justify-content-between w-100 h-100 me-4">
<button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-4 " data-bs-toggle="pill" data-bs-target="#tab-pane-6" type="button">
<h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>La Responsabilité Civile (RC)
</h5>
</button>
<button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-4" data-bs-toggle="pill" data-bs-target="#tab-pane-7" type="button">
<h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>Défense et Recours </h5>
</button>
<button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-4" data-bs-toggle="pill" data-bs-target="#tab-pane-8" type="button">
<h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>Personnes Transportées</h5>
</button>
<button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-4" data-bs-toggle="pill" data-bs-target="#tab-pane-9" type="button">
<h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>Bris de Glaces</h5>
</button>
<button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-0" data-bs-toggle="pill" data-bs-target="#tab-pane-10" type="button">
<h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>Avance sur Recours</h5>
</button>
</div>
</div>
</div>
<div class="row g-4 wow fadeInUp" data-wow-delay="0.3s" style="margin-left:5%;margin-top:10px">
<div class="col-lg-12">
<div class="tab-content w-100">
<div class="tab-pane fade show active" id="tab-pane-1">
<div class="row g-4">
<div class="col-md-10 shadow p-3">
<h3 class="mb-2 text-primary">Vol</h3>
<p class="mb-4">Elle couvre les dommages résultant de la disparition (vol total) ou
de la détérioration du véhicule par la suite d’un vol ou d’une
tentative de vol.Cette garantie comporte une extension accordée avec surprime et
porte le champ de la garantie vol aux accessoires et
pièces de rechange, aux pneumatiques et aux accessoires hors-séries
(c’est-à-dire incorporés au véhicule par l’assuré lui-même).</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-pane-2">
<div class="row g-4">
<div class="col-md-10 shadow p-3">
<h3 class="mb-2 text-primary">Incendie</h3>
<p class="mb-4">Elle couvre les cas de destruction du véhicule par les flammes
(incendie, explosion, foudre, combustion spontanée…).
Cette garantie peut exclure les dommages causés au véhicule par les brûlures de
cigarette.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-pane-3">
<div class="row g-4">
<div class="col-md-10 shadow p-3">
<h3 class="mb-2 text-primary">Tierce Complète ou Tous Risques ou Dommage Complète
</h3>
<p class="mb-4">Elle couvre tous les dommages subis par votre véhicule, ses accessoires et pièces de rechanges à la
suite d’un accident avec ou sans collision.Cette garantie n’est accordée qu’aux véhicules de maximum trois (3) ans.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-pane-4">
<div class="row g-4">
<div class="col-md-10 shadow p-3">
<h3 class="mb-2 text-primary">Tierce Collision ou Dommage Collision </h3>
<p class="mb-4">Elle couvre les dommages résultant d’une collision avec un autre véhicule dont le propriétaire est identifié,
avec un piéton ou un animal identifié afin de préserver les chances d’un recours.Cette garantie couvre les dommages au
véhicule assuré à condition que la partie adverse de la collision soit identifiéeCette
garantie n’est accordée généralement qu’aux véhicules entre trois (3) ans et cinq (5) ans.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-pane-5">
<div class="row g-4">
<div class="col-md-10 shadow p-3">
<h3 class="mb-2 text-primary">Tierce Plafonnée </h3>
<p class="mb-4">La Tierce Plafonnée est une garantie Tierce Compléte ou "tous risques" accordée à hauteur d'un capital assuré
(inférieur à la valeur à neuf). Généralement sous conditions et uniquement pour les véhicules de 5 ans et plus.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-pane-6">
<div class="row g-4">
<div class="col-md-10 shadow p-3">
<h3 class="mb-2 text-primary">La Responsabilité Civile (RC) </h3>
<p class="mb-4">C’est la seule garantie obligatoire. Elle couvre la responsabilité du propriétaire du véhicule assuré,
ou toute autre personne ayant la garde même non autorisée du véhicule. La RC couvre les dommages corporels et matériels
que le véhicule assuré pourrait causer à un tiers.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-pane-7">
<div class="row g-4">
<div class="col-md-10 shadow p-3">
<h3 class="mb-2 text-primary">Défense et Recours</h3>
<p class="mb-4">Elle permet de défendre l’assuré à l’encontre du tiers responsable ou devant une juridiction légale.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-pane-8">
<div class="row g-4">
<div class="col-md-10 shadow p-3">
<h3 class="mb-2 text-primary">Personnes Transportées
</h3>
<p class="mb-4">Elle prend en charge le paiement d’une indemnité forfaitaire en cas de
dommages corporels des occupants du véhicule assuré. Trois options sont généralement proposées:
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-pane-9">
<div class="row g-4">
<div class="col-md-10 shadow p-3">
<h3 class="mb-2 text-primary">Bris de Glaces </h3>
<p class="mb-4">Elle couvre la réparation ou le remplacement des parties vitrées du véhicule assuré quel que soit la cause du dommage
(projection de cailloux, accident avec un autre véhicule).</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-pane-10">
<div class="row g-4">
<div class="col-md-10 shadow p-3">
<h3 class="mb-2 text-primary">Avance sur Recours </h3>
<p class="mb-4">Elle prend en charge le paiement anticipé d’une indemnité forfaitaire lors de dommages matériels subis par le véhicule assuré.</p>
</div>
</div>
</div>
</div>
</div>
</div><br /><br />
<!-- FORMULAIRE -->
<div class="row g-4 wow fadeInUp" data-wow-delay="0.3s" style="margin-left:5%">
<h3>choisissez votre option pour remplir votre demande d'assurance auto</h3><br>
<div class="col-lg-5">
<div class="nav nav-pills d-flex justify-content-between w-100 h-100 me-4">
<button id="btn1" class=" w-100 d-flex align-items-center text-start border p-4 mb-4 " type="button">
<h5 class="m-0"><i class="fa fa-check" aria-hidden="true"></i> Choix par carte grise</h5>
</button>
</div>
</div>
<div class="col-lg-5">
<div class="nav nav-pills d-flex justify-content-between w-100 h-100 me-4">
<button class="w-100 d-flex align-items-center text-start border p-4 mb-4 " id="btn2" type="button">
<h5 class="m-0"><i class="fa fa-check" aria-hidden="true"></i> Choix par formulaire
</h5>
</button>
</div>
</div>
</div>
<div class="row g-4 wow fadeInUp" data-wow-delay="0.3s" style="margin-left:5%;margin-top:10px">
<div class="col-lg-12">
<div class="tab-content w-100">
<div class="tab-pane fade show " id="p1">
<div class="row g-4">
<div class="col-md-10 shadow p-3">
<div class="wrapper">
<h4>Téléchargez votre Carte Grise. Nous récupérerons les détails.</h4>
<form id="grise">
<div class="input_wrap">
<label for="designation">Email : </label>
<input type="email" name="mail" id="email" class="form-control" oninput="validateEmail()">
<p id="email-error"></p>
</div>
<div class="input_wrap">
<label for="dat_retour">Telephone : </label>
<input type="tel" name="phone" id="telephone" maxlength="9" class="form-control" oninput="validatePhone()">
<p id="telephone-error"></p>
</div>
<div class="mb-3" style="margin-top:20px">
<input class="form-control shadow" required name="image" type="file" accept="image/png, image/jpeg" id="fileInput" style="height:4rem" oninput="validateFile()">
<br>
<img id="blash" style="width:20%;height:20%">
<p id="error"></p>
</div>
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="submit" id="envoyer" class="btn btn-primary">Envoyer</button>
</div>
</form>
<div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade show" id="p2">
<div class="row ">
<div class="col-md-10 shadow p-3">
<div class="wrapper">
<div class="header" >
<ul >
<li class="active form_1_progessbar">
<div>
<p>1</p>
</div>
</li>
<li class="form_2_progessbar">
<div>
<p>2</p>
</div>
</li>
<li class="form_3_progessbar">
<div>
<p>3</p>
</div>
</li>
<li class="form_4_progessbar">
<div>
<p>4</p>
</div>
</li>
<li class="form_4_progessbar">
<div>
<p>5</p>
</div>
</li>
</ul>
</div>
<form id="formulaire">
<div class="form_wrap">
<div class="form_1">
<h3>Détail de l'assurance auto</h3>
<h5>Véhicule</h5>
<div class="form_container">
<div class="form-check">
<input class="form-check-input" type="radio" name="vehicule" id="flexRadioDefault1" value="Véhicule particulier">
<label class="form-check-label" for="flexRadioDefault1">
Véhicule particulier
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="vehicule" id="flexRadioDefault2" checked value="Deux roues">
<label class="form-check-label" for="flexRadioDefault2">
Deux roues
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="vehicule" id="flexRadioDefault3" checked value="Véhicule utilitaire">
<label class="form-check-label" for="flexRadioDefault2">
Véhicule utilitaire
</label>
</div>
<div class="form_container">
<h5 class="mt-5">Carburation</h5>
<select class="form-select" aria-label="Default select example" name="carburation" id="carburant" onchange="validateCarburant()">
<option></option>
<option value="Electrique">Electrique</option>
<option value="Essence">Essence</option>
<option value="Hybride">Hybride</option>
<option value="Diesel">Diesel</option>
</select>
<b id="carError"></b>
</div>
</div>
</div>
<div class="form_2 data_info" style="display: none;">
<h3>Marque et Modèle</h3>
<div class="form_container">
<div class="input_wrap">
<label for="experience">Marque</label>
<input type="text" name="marque" id="marque" class="form-control" oninput="validateMarque()">
<b id="marque-error"></b>
</div>
<div class="input_wrap">
<label for="experience">Modéle</label>
<input type="text" name="modele" id="modele" class="form-control" oninput="validateModele()">
<b id="modele-error"></b>
</div>
</div>
</div>
<div class="form_3 data_info" style="display: none;">
<h3>Détails du véhicule</h3>
<form>
<div class="form_container">
<div class="input_wrap">
<label for="company">Puissances fiscales(nombre de chevaux)</label>
<select name="puissance" id="puissance" class="form-control" style="background-color:#ffffff" onchange="validatePuissance()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
<b id="puissance-error"></b>
</div>
<div class="input_wrap">
<label for="experience">Date du 1ére mise en circulation</label>
<input type="date" name="dateCirculation" id="experience" class="form-control" oninput="validateDateCirculation()">
<b id="circulation-error"></b>
</div>
<div class="input_wrap">
<label for="designation">Nombre de place</label>
<select name="nombrePlace" id="nombrePlace" class="form-control" style="background-color:#ffffff" onchange="validateNombrePlace()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<b id="nombrePlace-error"></b>
</div>
<div class="input_wrap">
<label for="experience">Valeur actuelle</label>
<input type="text" name="valeur" id="valeur" class="form-control" oninput="validateValeur()">
<b id="valeur-error"></b>
</div>
<b id="valeur-error"></b>
<div class="input_wrap">
<label for="experience">Immatriculation</label>
<input type="text" name="immatriculation" id="immatriculation" class="form-control" oninput="validateImmatriculation()">
<b id="immatriculation-error"></b>
</div>
</div>
</div>
<div class="form_4 data_info" style="display: none;">
<h3>BENEFICIAIRE</h3>
<div class="form_container">
<div class="input_wrap">
<label for="company">Nom : </label>
<input type="text" name="nom" id="nom" class="form-control" oninput="validateNom()">
<b id="nom-error"></b>
</div>
<div class="input_wrap">
<label for="experience">Prénom : </label>
<input type="text" name="prenom" id="prenom" class="form-control" oninput="validatePrenom()">
<b id="prenom-error"></b>
</div>
<div class="input_wrap">
<label for="designation">Email : </label>
<input type="email" name="mail" id="email" class="form-control" oninput="validateEmail()">
<p id="email-error"></p>
</div>
<div class="input_wrap">
<label for="dat_retour">Telephone : </label>
<input type="tel" name="phone" id="telephone" class="form-control" oninput="validatePhone()">
<p id="telephone-error"></p>
</div>
</div>
</div>
<div class="form_5 data_info" style="display: none;">
<h3>Récapitulatif Devis</h3>
<div class="form_container">
<div class="input_wrap">
<label for="company">Véhicule : <b id="vehicule-recap"></b></label>
</div>
<div class="input_wrap">
<label for="experience">Categorie : <b id="carburant-recap"></b></label>
</div>
<div class="input_wrap">
<label for="designation">Marque et Modèle: <b id="marque-recap"></b></label>
</div>
<div class="input_wrap">
<label for="designation"> Modèle: <b id="modele-recap"></b></label>
</div>
<div class="input_wrap">
<label for="dat_retour">Puissances fiscales(nombre de chevaux) : <b id="puissance-recap"></b></label>
</div>
<div class="input_wrap">
<label for="dat_retour">Date du 1ére mise en circulation: <b id="dateCirculation-recap"></b></label>
</div>
<div class="input_wrap">
<label for="dat_retour">Nombre de place : <b id="nombrePlace-recap"></b></label>
</div>
<div class="input_wrap">
<label for="dat_retour">Valeur actuelle : <b id="valeur-recap"></b></label>
</div>
<div class="input_wrap">
<label for="dat_retour">Immatriculation : <b id="immatriculation-recap"></b></label>
</div>
</div>
</div>
</div>
<div class="btns_wrap">
<div class="common_btns form_1_btns">
<button type="button" class="btn_next">Next <span class="icon"><ion-icon name="arrow-forward-sharp"></ion-icon></span></button>
</div>
<div class="common_btns form_2_btns" style="display: none;">
<button type="button" class="btn_back"><span class="icon"><ion-icon name="arrow-back-sharp"></ion-icon></span>Back</button>
<button type="button" class="btn_next">Next <span class="icon"><ion-icon name="arrow-forward-sharp"></ion-icon></span></button>
</div>
<div class="common_btns form_3_btns" style="display: none;">
<button type="button" class="btn_back"><span class="icon"><ion-icon name="arrow-back-sharp"></ion-icon></span>Back</button>
<button type="button" class="btn_next">Next <span class="icon"><ion-icon name="arrow-forward-sharp"></ion-icon></span></button>
</div>
<div class="common_btns form_4_btns" style="display: none;">
<button type="button" class="btn_back"><span class="icon"><ion-icon name="arrow-back-sharp"></ion-icon></span>Back</button>
<button type="button" class="btn_next" onclick="loadData()">Next <span class="icon"><ion-icon name="arrow-forward-sharp"></ion-icon></span></button>
</div>
<div class="common_btns form_5_btns" style="display: none;">
<button type="button" class="btn_back"><span class="icon"><ion-icon name="arrow-back-sharp"></ion-icon></span>Back</button>
<button type="submit" id="send" class="btn_done">Done</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- OPTION CARTE GRISE -->
<!--OPTION INFORMATIONS A REMPLIR -->
<!-- Footer Start -->
</div>
</div>
<?php
include 'footer.php';
?>
<script src="js/auto.js"></script>
</body>
</html>