| Current File : /home/digitaw/Ycof/.history/voyage_20230608160754.php |
<?php
include 'menu.php';
?>
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
require_once'configuration.php';
$destination=$_POST['destination'];
$numeroPassport=$_POST['numeroPassport'];
$dateDepart=$_POST['dateDepart'];
$dateRetour=$_POST['dateRetour'];
}
?>
<link rel="stylesheet" href="css/voyag.css">
<html>
<body>
<!-- Page Header End -->
<div class="container-fluid page-header2 mb-5 wow fadeIn" data-wow-delay="0.1s">
<div class="container">
</div>
</div>
<!--Service Start -->
<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>Hospitalisation</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>Annulation et retards des vols
</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>Rapatriement</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-4" type="button">
<h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>Vol, perte et destruction des
bagages</h5>
</button>
</div>
</div>
<div class="col-lg-7">
<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">Hospitalisation</h3>
<p class="mb-4">L'assurance voyage est un contrat permettant de protéger celui qui
la souscrit des aléas de son voyage.</p>
<p><i class="fa fa-check text-primary me-3"></i></p>
<p><i class="fa fa-check text-primary me-3"></i></p>
<p><i class="fa fa-check text-primary me-3"></i></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">Annulation et retards des vols</h3>
<p class="mb-4">L’assurance Maladie est un dispositif permettant aux assurés de se
prémunir contre les risques Maladie, Accidents et Maternité .</p>
<p><i class="fa fa-check text-primary me-3"></i></p>
<p><i class="fa fa-check text-primary me-3"></i> </p>
<p><i class="fa fa-check text-primary me-3"></i></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">Repatriement</h3>
<p class="mb-4">Elle couvre le bâtiment et son contenu ainsi que le « recours des
voisins et des tiers » contre l’occupant en cas d’incendie et dégâts des eaux.
</p>
<p><i class="fa fa-check text-primary me-3"></i></p>
<p><i class="fa fa-check text-primary me-3"></i></p>
<p><i class="fa fa-check text-primary me-3"></i></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">Vol, perte et destruction des bagages</h3>
<p class="mb-4">Elle couvre la responsabilité civile, à savoir les dommages
matériels
et corporels que votre véhicule pourrait causer à un tiers.</p>
<p><i class="fa fa-check text-primary me-3"></i></p>
<p><i class="fa fa-check text-primary me-3"></i></p>
<p><i class="fa fa-check text-primary me-3"></i></p>
<a href="#" class="btn btn-primary py-3 px-5 mt-3">Voir plus</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<div class="wrapper shadow p-4">
<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>
</ul>
</div>
<form method="POST" id="voyage">
<div class="form_wrap">
<div class="form_1 data_info">
<h3>Détail de l'assurance voyage</h3>
<div class="form_container" id="formu">
<div class="input_wrap" id="formule">
<label for="dest">Destination:</label>
<input type="text" name="destination" id="destination" class="form-control" onkeyup="validateDestination()">
<b id="destinationError"></b>
</div>
<div class="input_wrap">
<label for="nub_pass">Numéro passport:</label>
<input type="text" name="numeroPassport" id="numpass" class="form-control" oninput="validateNumPassPort()">
<span id="numpass-error"></span>
</div>
<div class="input_wrap">
<label for="dat_depart">Date de depart:</label>
<input type="date" name="dateDepart" id="depart" class="form-control" oninput="validateDepart()">
<span id="DepartError"></span>
</div>
<div class="input_wrap">
<label for="dat_retour">Date de retour:</label>
<input type="date" name="dateRetour" id="retour" class="form-control" oninput="validateRetour()">
<span id="RetourError"></span>
</div>
</div>
</div>
<div class="form_2 data_info" style="display: none;">
<h3>Garanties</h3>
<div class="form_container">
<div class="form-check">
<input class="form-check-input" name="annulation" type="checkbox" value="Annulation et retards des vols" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">Annulation et retards des
vols</label>
</div>
<div class="form-check">
<input class="form-check-input" name="vol" type="checkbox" value="Vol, perte et destruction des bagages" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">Vol, perte et destruction des
bagages </label>
</div>
<div class="form-check">
<input class="form-check-input" name="frais" type="checkbox" value="Les frais médicaux et d’hospitalisation à l’étranger consécutifs à un accident ou une maladie subite " id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">Les frais médicaux et
d’hospitalisation à l’étranger consécutifs à un accident ou une maladie
subite</label>
</div>
<div class="form-check">
<input class="form-check-input" name="incendie" type="checkbox" value="Incendie " id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">Incendie </label>
</div>
<div class="form-check">
<input class="form-check-input" name="bris" type="checkbox" value="Bris de glaces" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">Bris de glaces</label>
</div>
</div>
</div>
<div class="form_3 data_info" style="display: none;">
<h3>Bénéficiaires</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()">
<span id="nomError"></span>
</div>
<div class="input_wrap">
<label for="experience">Prénom</label>
<input type="text" name="prenom" id="prenom" class="form-control" oninput="validatePrenom()">
<span id="prenomError"></span>
</div>
<div class="input_wrap">
<label for="designation">Email</label>
<input type="email" name="email" id="email" class="form-control" oninput="validateEmail()">
<span id="emailError"></span>
</div>
<div class="input_wrap">
<label for="designation">Numero de tel</label>
<input type="tel" name="phone" id="phone" class="form-control" oninput="validatePhone()">
<span id="phoneError"></span>
</div>
<div class="input_wrap">
<label for="designation">Age</label>
<input type="number" name="age" id="age" class="form-control" oninput="validateAge()">
<span id="ageError"></span>
</div>
</div>
</div>
<div class="form_4 data_info" style="display: none;">
<h3>Récapitulatif Devis</h3>
<div class="form_container">
<div class="input_wrap">
<label for="company">Destination : </label>
<b id="dest"></b>
</div>
<div class="input_wrap">
<label for="experience">Numero passport : </label>
<b id="numero"></b>
</div>
<div class="input_wrap">
<label for="designation">Date de depart : </label>
<b id="dateDepart"></b>
</div>
<div class="input_wrap">
<label for="dat_retour">Date de retour : </label>
<b id="dateRetour"></b>
</div>
</div>
</div>
</div>
<div class="btns_wrap">
<div class="common_btns form_1_btns">
<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_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="submit" class="btn_done">Done</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Start -->
<?php
include 'footer.php';
?>
<script src="js/voyage.js"></script>
</body>
</html>