templates/souscription/indexVoyage.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}{% endblock %}
  5. {% block body %}
  7.     <!-- Customized Bootstrap Stylesheet -->
  8.     <link href="{{asset('assets/css/form/formVoyage.css')}}" rel="stylesheet"/>
  10.     <script src="https://common.olemiss.edu/_js/sweet-alert/sweet-alert.min.js"></script>
  11.     <link
  12.     rel="stylesheet" type="text/css" href="https://common.olemiss.edu/_js/sweet-alert/sweet-alert.css">
  14.     <!-- google font -->
  15.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
  16.     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
  17.     <link href="/assets/profile/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
  18.     <script src="/assets/profile/js/scripts.bundle.js"></script>
  22.         {% for flashMessage in app.session.flashbag.get('noTarif') %}
  24.         <script>
  25.             window.onload = function () {
  26.             Swal.fire({
  27.             text:"{{ flashMessage }}",
  28.             icon: "error",
  29.             buttonsStyling: false,
  30.             confirmButtonText: "Ok",
  31.               background: '#f8f9fa', // Couleur d'arrière-plan personnalisée
  32.             customClass: {
  33.             confirmButton: "btn btn-danger"
  34.             }
  35.             });
  36.             };
  37.         </script>
  39.     {% endfor %}
  41.     {% for flashMessage in app.session.flashbag.get('attentePaiement') %}
  43.             <script>
  44.             window.onload = function () {
  45.             Swal.fire({
  46.             text:"{{ flashMessage }}",
  47.             icon: "error",
  48.             buttonsStyling: false,
  49.             confirmButtonText: "Ok",
  50.               background: '#f8f9fa', // Couleur d'arrière-plan personnalisée
  51.             customClass: {
  52.             confirmButton: "btn btn-danger"
  53.             }
  54.             });
  55.             };
  56.         </script>
  58.     {% endfor %}
  60.     {% for flashMessage in app.session.flashbag.get('validiter') %}
  61.         <script>
  62.             window.onload = function () {
  63.             Swal.fire({
  64.             text:"{{ flashMessage }}",
  65.             icon: "error",
  66.             buttonsStyling: false,
  67.             confirmButtonText: "Ok",
  68.               background: '#f8f9fa', // Couleur d'arrière-plan personnalisée
  69.             customClass: {
  70.             confirmButton: "btn btn-danger"
  71.             }
  72.             });
  73.             };
  74.         </script>
  75.     {% endfor %}
  76.     
  78.     <style>
  80. .custom-img {
  81.   width: 100%; /* Remplir toute la largeur disponible */
  82.   height: 40vh; /* Remplir la moitié de la hauteur de la fenêtre du navigateur */
  83.   object-fit: cover; /* L'image couvre la zone sans déformation */
  84. }
  85. </style>
  88. <!-- Carousel Start -->
  89. <div class="container-fluid p-0 mb-0 wow fadeIn" data-wow-delay="0.1s">
  90.       <div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
  91.         <div class="carousel-inner">
  92.           <div class="carousel-item active">
  93.             {# <img class="h-50 w-80" src="{{asset('assets/img/IMAGE4.jpg')}}" alt="Image" /> #}
  94.             <img class="custom-img" src="{{asset('assets/img/IMAGE4.jpg')}}" alt="Image" />
  96.             <div class="absolute-div">
  97.               <div class="carousel-caption">
  98.                           <!-- Service Start -->
  99.     <div class="container-xl py-5 mb-5">
  100.       <div class="container">
  101.         <div class="text-center mx-auto">
  102.           <h1 class="display-5 mb-0 text-white " id="heading">
  103.             Souscription assurance voyage
  104.           </h1>
  105.         </div>
  106.        
  107.       </div>
  108.     </div>
  109.     <!-- Service End -->
  110.               </div>
  111.             </div>
  112.           </div>
  113.         </div>
  114.       </div>
  115.     </div>
  116.     <!-- Carousel End -->
  117.     
  120.     <!--begin::Wrapper container-->
  121.     <div
  122.         class="app-container container-xxl d-flex">
  123.         <!--begin::Main-->
  124.         <div
  125.             class="app-main flex-column flex-row-fluid" id="kt_app_main">
  126.             <!--begin::Content wrapper-->
  127.             <div
  128.                 class="d-flex flex-column flex-column-fluid">
  129.                 <!--begin::Content-->
  130.                 <div
  131.                     id="kt_app_content" class="app-content">
  132.                     <!--begin::About card-->
  133.                     <div
  134.                         class="card">
  135.                         <!--begin::Body-->
  136.                         <div
  137.                             class="card-body p-lg-30">
  138.                             <!--begin::About-->
  139.                             <div
  140.                                 class="mb-18">
  141.                                 <!--begin::Wrapper-->
  142.                                 <div
  143.                                     class="mb-10">
  144.                                     <!--begin::Overlay-->
  145.                                     {# <div
  146.                                         class="overlay">
  147.                                         <!--begin::Image-->
  148.                                         <img
  149.                                         class="w-100 card-rounded" src="{{asset('assets/img/img4.jpg')}}" height="50%" alt=""/>
  150.                                     <!--end::Image-->
  151.                                     </div> #}
  153.                                     <div class="container-fluid">
  154.                                         <div class="row justify-content-center">
  155.                                             <div class="col-12 col-sm-12 col-md-12 col-lg-10 col-xxl-9 text-center p-0 mt-3 mb-2">
  156.                                                 <div class="card px-3 py-3 pb-0 mt-3 mb-3 border border-light rounded">
  157.                                                     <h2 id="heading">Commandez votre assurance voyage en quelques minutes</h2>
  158.                                                     <p>Veuillez remplir tous les champs du formulaire de souscription</p>
  160.                                                     <form enctype="multipart/form-data"
  161.                                                         id="msform" method="POST" action="{{path('app_souscription_Voyage')}}">
  162.                                                         <!-- progressbar -->
  163.                                                         <ul id="progressbar">
  164.                                                             <li class="active" id="personal">
  165.                                                                 <strong class="d-none d-md-block">Informations personnelles</strong>
  166.                                                             </li>
  167.                                                             <li id="plane">
  168.                                                                 <strong class="d-none d-md-block">Informations sur le voyage</strong>
  169.                                                             </li>
  170.                                                         </ul>
  171.                                                         <div class="progress">
  172.                                                             <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
  173.                                                         </div>
  174.                                                         <br>
  175.                                                         <!-- fieldsets -->
  176.                                                         <fieldset>
  177.                                                             <div class="form-card">
  178.                                                                 <div class="row">
  179.                                                                     <div class="col-6">
  180.                                                                         <h2 class="fs-title"></h2>
  181.                                                                     </div>
  182.                                                                     <div class="col-6">
  183.                                                                         <h2 class="steps">Etape 1 - 2</h2>
  184.                                                                     </div>
  185.                                                                 </div>
  187.                                                                 <div class="row">
  188.                                                                     <div class="col-12 col-md-4">
  189.                                                                         <label class="fieldlabels">Nom: <span class="text-danger">*</span></label>
  190.                                                                         <input type="text" name="nom" placeholder="Votre nom" value="{% if app.session.get('nom') != null %} {{app.session.get('nom')}} {% endif%}"/>
  191.                                                                     </div>
  192.                                                                     <div class="col-12 col-md-4">
  193.                                                                         <label class="fieldlabels">Prénom: <span class="text-danger">*</span></label>
  194.                                                                         <input type="text" name="prenom" placeholder="Votre prénom" value="{% if app.session.get('prenom') != null %} {{app.session.get('prenom')}} {% endif%}"/>
  195.                                                                     </div>
  197.                                                                     <div class="col-12 col-md-4">
  198.                                                                         <label class="fieldlabels">Téléphone: <span class="text-danger">*</span></label>
  199.                                                                         <input type="text" maxlength="8" id="telephone" name="phone" placeholder="N° téléphone" onkeypress="chiffres(event)" value="{% if app.session.get('telephone') != null %} {{app.session.get('telephone')}} {% endif%}">
  200.                                                                     </div>
  201.                                                                     <div class="col-12 col-md-4">
  202.                                                                         <label class="fieldlabels">Email:
  203.                                                                         </label>
  204.                                                                         <input type="text" name="email" placeholder="Votre email" value="{% if app.session.get('email') != null %} {{app.session.get('email')}} {% endif%}"/>
  205.                                                                     </div>
  207.                                                                     <div class="col-12 col-md-4">
  208.                                                                         <label class="fieldlabels">N° du Passeport: <span class="text-danger">*</span></label>
  209.                                                                         <input type="text" name="reference" placeholder="N° de votre passeport" value="{% if app.session.get('numPasseport') != null %} {{app.session.get('numPasseport')}} {% endif%}"/>
  210.                                                                     </div>
  211.                                                                     <div class="col-12 col-md-4">
  212.                                                                         <label class="fieldlabels">Date d'expiration du passeport: <span class="text-danger">*</span></label>
  213.                                                                         <input type="date" name="expiration" min="{{today}}" value="{% if app.session.get('dateExp') != null %} {{app.session.get('dateExp')}} {% endif%}">
  214.                                                                     </div>
  216.                                                                     <div class="col-12 col-md-4">
  217.                                                                         <label class="fieldlabels">Photo du Passeport: </label>
  218.                                                                         <input type="file"  accept="image/*" class="form-control" id="file" placeholder="Importer la Photo du passeport" name="file" />
  219.                                                                     </div>
  220.                                                                 </div>
  222.                                                             </div>
  223.                                                             <input type="button" name="next" class="next action-button" value="Suivant"/>
  224.                                                         </fieldset>
  225.                                                         <fieldset>
  226.                                                             <div class="form-card">
  227.                                                                 <div class="row">
  228.                                                                     <div class="col-6">
  229.                                                                         <h2 class="fs-title"></h2>
  230.                                                                     </div>
  231.                                                                     <div class="col-6">
  232.                                                                         <h2 class="steps">Etape 2 - 2</h2>
  233.                                                                     </div>
  234.                                                                 </div>
  236.                                                                 <div class="row">
  237.                                                                     <div class="col-12 col-md-4">
  238.                                                                         <label class="fieldlabels">Zone: <span class="text-danger">*</span></label>
  239.                                                                         <select id="zone" name="zone" onchange="ListeVille();">
  240.                                                                             <option selected>Selectionnez la zone</option>
  241.                                                                             {% for liste in zoneVoyage %}
  242.                                                                                 <option value="{{liste.id}}">{{liste.libelle}}</option>
  243.                                                                             {% endfor %}
  244.                                                                         </select>
  245.                                                                     </div>
  246.                                                                     <div class="col-12 col-md-4">
  247.                                                                         <label class="fieldlabels">Date de départ: <span class="text-danger">*</span></label>
  248.                                                                         <input type="date" name="dateDepart" value="{% if app.session.get('dateDep') != null %} {{app.session.get('dateDep')}} {% endif%}"/>
  249.                                                                     </div>
  250.                                                                     <div class="col-12 col-md-4">
  251.                                                                         <label class="fieldlabels">Nombre de jours: <span class="text-danger">*</span></label>
  252.                                                                         <input type="number" name="nbrJour" placeholder="Nombre de jours de votre séjour"/>
  253.                                                                     </div>
  255.                                                                     <div class="col-12 col-md-4">
  256.                                                                         <label class="fieldlabels">Destination: <span class="text-danger">*</span></label>
  257.                                                                         <select id="destination" name="destination"></select>
  258.                                                                     </div>
  259.                                                                     <div class="col-12 col-md-4">
  260.                                                                         <label class="fieldlabels">Motif du voyage:</label>
  261.                                                                         <input type="text" name="motifVoya" placeholder="Motif du voyage" value="{% if app.session.get('motif') != null %} {{app.session.get('motif')}} {% endif%}"/>
  262.                                                                     </div>
  263.                                                                     <div class="col-12 col-md-4">
  264.                                                                         <label class="fieldlabels">Compagnie de transport:</label>
  265.                                                                         <input type="text" name="compagnieTrans" placeholder="Compagnie de transport" value="{% if app.session.get('compagnie') != null %} {{app.session.get('compagnie')}} {% endif%}"/>
  266.                                                                     </div>
  267.                                                                 </div>
  269.                                                                 <div class="row">
  270.                                                                     <div class="col-12 col-md-4">
  271.                                                                         <label class="fieldlabels">Adresse de séjour:</label>
  272.                                                                         <input type="text" name="addressSejour" placeholder="Saisissez l'adresse de séjour" value="{% if app.session.get('address') != null %} {{app.session.get('address')}} {% endif%}"/>
  273.                                                                     </div>
  274.                                                                 </div>
  277.                                                             </div>
  278.                                                             <input type="button" class="valider" value="Valider " onclick="verif(this);"/>
  280.                                                             <input type="button" name="previous" class="previous action-button-previous" value="Précédent"/>
  281.                                                         </fieldset>
  283.                                                     </form>
  284.                                                 </div>
  285.                                             </div>
  286.                                         </div>
  287.                                     </div>
  289.                                     <!--end::Overlay-->
  290.                                 </div>
  291.                                 <!--end::Wrapper-->
  292.                             </div>
  293.                             <!--end::About-->
  294.                         </div>
  295.                         <!--end::Body-->
  296.                     </div>
  297.                     <!--end::About card-->
  298.                 </div>
  299.                 <!--end::Content-->
  300.             </div>
  301.             <!--end::Content wrapper-->
  302.         </div>
  303.         <!--end::Main-->
  304.     </div>
  305.     <!--end::Wrapper container-->
  307.     <script>
  309.         jQuery.noConflict()(function ($) {
  311. $(document).ready(function () {
  313. var current_fs,
  314. next_fs,
  315. previous_fs; // fieldsets
  316. var opacity;
  317. var current = 1;
  318. var steps = $("fieldset").length;
  320. setProgressBar(current);
  322. $(".next").click(function () {
  324. current_fs = $(this).parent();
  325. next_fs = $(this).parent().next();
  327. // Add Class Active
  328. $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  330. // show the next fieldset
  331. next_fs.show();
  332. // hide the current fieldset with style
  333. current_fs.animate({
  334. opacity: 0
  335. }, {
  336. step: function (now) { // for making fielset appear animation
  337. opacity = 1 - now;
  339. current_fs.css({'display': 'none', 'position': 'relative'});
  340. next_fs.css({'opacity': opacity});
  341. },
  342. duration: 500
  343. });
  344. setProgressBar(++ current);
  345. });
  347. $(".previous").click(function () {
  349. current_fs = $(this).parent();
  350. previous_fs = $(this).parent().prev();
  352. // Remove class active
  353. $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  355. // show the previous fieldset
  356. previous_fs.show();
  358. // hide the current fieldset with style
  359. current_fs.animate({
  360. opacity: 0
  361. }, {
  362. step: function (now) { // for making fielset appear animation
  363. opacity = 1 - now;
  365. current_fs.css({'display': 'none', 'position': 'relative'});
  366. previous_fs.css({'opacity': opacity});
  367. },
  368. duration: 500
  369. });
  370. setProgressBar(-- current);
  371. });
  373. function setProgressBar(curStep) {
  374. var percent = parseFloat(100 / steps) * curStep;
  375. percent = percent.toFixed();
  376. $(".progress-bar").css("width", percent + "%")
  377. }
  379. $(".submit").click(function () {
  380. return false;
  381. })
  383. });
  385. });
  387. function verif(bouton) {
  388. form = bouton.form;
  390. if ((form.nom.value == "")) {
  391.         event.preventDefault(); // Empêche la soumission du formulaire
  392.     Swal.fire({
  393.         icon: 'warning',
  394.         title: 'Attention',
  395.         text: 'Veuillez remplir le champ nom au niveau des informations personnelles.',
  396.         confirmButtonColor: '#3085d6',
  397.         confirmButtonText: 'OK',
  398.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  399.     });
  400. return false;
  401. } else {
  402. if ((form.prenom.value == "")) {
  403.             event.preventDefault(); // Empêche la soumission du formulaire
  404.     Swal.fire({
  405.         icon: 'warning',
  406.         title: 'Attention',
  407.         text: 'Veuillez remplir le champ prénom au niveau des informations personnelles.',
  408.         confirmButtonColor: '#3085d6',
  409.         confirmButtonText: 'OK',
  410.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  411.     });
  412. return false;
  413. } else {
  414. if ((form.phone.value == "")) {
  415.                 event.preventDefault(); // Empêche la soumission du formulaire
  416.     Swal.fire({
  417.         icon: 'warning',
  418.         title: 'Attention',
  419.         text: 'Veuillez remplir le champ téléphone au niveau des informations personnelles.',
  420.         confirmButtonColor: '#3085d6',
  421.         confirmButtonText: 'OK',
  422.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  423.     });
  424. return false;
  425. } else {
  426. if ((form.reference.value == "")) {
  427.                 event.preventDefault(); // Empêche la soumission du formulaire
  428.     Swal.fire({
  429.         icon: 'warning',
  430.         title: 'Attention',
  431.         text: 'Veuillez remplir le n° Passeport au niveau des informations personnelles.',
  432.         confirmButtonColor: '#3085d6',
  433.         confirmButtonText: 'OK',
  434.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  435.     });
  436. return false;
  437. } else {
  438. if ((form.expiration.value == "")) {
  439.                 event.preventDefault(); // Empêche la soumission du formulaire
  440.     Swal.fire({
  441.         icon: 'warning',
  442.         title: 'Attention',
  443.         text: 'Veuillez remplir la date d expiration du passeport au niveau des informations personnelles.',
  444.         confirmButtonColor: '#3085d6',
  445.         confirmButtonText: 'OK',
  446.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  447.     });
  448. return false;
  449. } else {
  450. if ((form.expiration.value == "")) {
  451.                 event.preventDefault(); // Empêche la soumission du formulaire
  452.     Swal.fire({
  453.         icon: 'warning',
  454.         title: 'Attention',
  455.         text: 'Veuillez remplir la date d expiration du passeport au niveau des informations personnelles.',
  456.         confirmButtonColor: '#3085d6',
  457.         confirmButtonText: 'OK',
  458.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  459.     });
  460. return false;
  461. } else {
  462. if ((document.getElementById('zone').value == "Selectionnez la zone")) {
  463.                 event.preventDefault(); // Empêche la soumission du formulaire
  464.     Swal.fire({
  465.         icon: 'warning',
  466.         title: 'Attention',
  467.         text: 'Veuillez selectionnez la zone au niveau des informations sur le voyage.',
  468.         confirmButtonColor: '#3085d6',
  469.         confirmButtonText: 'OK',
  470.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  471.     });
  472. return false;
  473. } else {
  474. if ((form.dateDepart.value == "")) {
  475.                 event.preventDefault(); // Empêche la soumission du formulaire
  476.     Swal.fire({
  477.         icon: 'warning',
  478.         title: 'Attention',
  479.         text: 'Veuillez selectionnez la date de départ au niveau des informations sur le voyage.',
  480.         confirmButtonColor: '#3085d6',
  481.         confirmButtonText: 'OK',
  482.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  483.     });
  484. return false;
  485. } else {
  486. if ((form.nbrJour.value == "")) {
  487.                 event.preventDefault(); // Empêche la soumission du formulaire
  488.     Swal.fire({
  489.         icon: 'warning',
  490.         title: 'Attention',
  491.         text: 'Veuillez remplir le nombre de jours au niveau des informations sur le voyage.',
  492.         confirmButtonColor: '#3085d6',
  493.         confirmButtonText: 'OK',
  494.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  495.     });
  496. return false;
  497. } else {
  498. if ((document.getElementById('destination').value == "")) {
  499.                 event.preventDefault(); // Empêche la soumission du formulaire
  500.     Swal.fire({
  501.         icon: 'warning',
  502.         title: 'Attention',
  503.         text: 'Veuillez saisir la destination au niveau des informations sur le voyage.',
  504.         confirmButtonColor: '#3085d6',
  505.         confirmButtonText: 'OK',
  506.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  507.     });
  508. return false;
  509. } else {
  510. if ((form.nbrJour.value) < 0) {
  511.     event.preventDefault(); // Empêche la soumission du formulaire
  512.     Swal.fire({
  513.         icon: 'warning',
  514.         title: 'Attention',
  515.         text: 'Vous ne pouvez pas mettre de nombre de jours négative au niveau des informations sur le voyage.',
  516.         confirmButtonColor: '#3085d6',
  517.         confirmButtonText: 'OK',
  518.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  519.     });
  520. return false;
  521. } else {
  522. form.submit();
  523. }
  524. }
  525. }
  526. }
  527. }
  528. }
  529. }
  530. }
  531. }
  532. }
  533. }
  534. }
  536. function ListeVille() {
  538. var zone = $('#zone').val();
  540. console.log(zone);
  542. var parametros = {
  543. 'zone': zone
  544. };
  545. $.ajax({
  546. url: '/liste_ville/filtre',
  547. type: "POST",
  548. dataType: "json",
  549. data: parametros,
  550. async: true,
  551. success: function (response) {
  553. $("#destination").html("<option value=''>Selectionnez la destination</option>" + response);
  555. },
  556. error: function (xhr, ajaxOptions, thrownError) {
  557. alert(xhr.status + " " + thrownError);
  558. }
  560. });
  561. }
  562.     </script>
  565. {% endblock %}