templates/souscription/indexHabitation.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/formHabitation.css')}}" rel="stylesheet"/>
  11.     <script src="https://common.olemiss.edu/_js/sweet-alert/sweet-alert.min.js"></script>
  12.     <link
  13.     rel="stylesheet" type="text/css" href="https://common.olemiss.edu/_js/sweet-alert/sweet-alert.css">
  15.     <!-- google font -->
  16.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
  17.     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
  18.     <link href="/assets/profile/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
  19.     <script src="/assets/profile/js/scripts.bundle.js"></script>
  23.     {% for flashMessage in app.session.flashbag.get('noTarif') %}
  25.         <script>
  26.             window.onload = function () {
  27.             Swal.fire({
  28.             text:"{{ flashMessage }}",
  29.             icon: "error",
  30.             buttonsStyling: false,
  31.             confirmButtonText: "Ok",
  32.               background: '#f8f9fa', // Couleur d'arrière-plan personnalisée
  33.             customClass: {
  34.             confirmButton: "btn btn-danger"
  35.             }
  36.             });
  37.             };
  38.         </script>
  40.     {% endfor %}
  42.     {% for flashMessage in app.session.flashbag.get('attentePaiement') %}
  44.             <script>
  45.             window.onload = function () {
  46.             Swal.fire({
  47.             text:"{{ flashMessage }}",
  48.             icon: "error",
  49.             buttonsStyling: false,
  50.             confirmButtonText: "Ok",
  51.               background: '#f8f9fa', // Couleur d'arrière-plan personnalisée
  52.             customClass: {
  53.             confirmButton: "btn btn-danger"
  54.             }
  55.             });
  56.             };
  57.         </script>
  59.     {% endfor %}
  61.     {% for flashMessage in app.session.flashbag.get('validiter') %}
  62.         <script>
  63.             window.onload = function () {
  64.             Swal.fire({
  65.             text:"{{ flashMessage }}",
  66.             icon: "error",
  67.             buttonsStyling: false,
  68.             confirmButtonText: "Ok",
  69.               background: '#f8f9fa', // Couleur d'arrière-plan personnalisée
  70.             customClass: {
  71.             confirmButton: "btn btn-danger"
  72.             }
  73.             });
  74.             };
  75.         </script>
  76.     {% endfor %}
  79.     <style>
  81. .custom-img {
  82.   width: 100%; /* Remplir toute la largeur disponible */
  83.   height: 40vh; /* Remplir la moitié de la hauteur de la fenêtre du navigateur */
  84.   object-fit: cover; /* L'image couvre la zone sans déformation */
  85. }
  86. </style>
  89. <!-- Carousel Start -->
  90. <div class="container-fluid p-0 mb-0 wow fadeIn" data-wow-delay="0.1s">
  91.       <div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
  92.         <div class="carousel-inner">
  93.           <div class="carousel-item active">
  94.             {# <img class="h-50 w-80" src="{{asset('assets/img/IMAGE4.jpg')}}" alt="Image" /> #}
  95.             <img class="custom-img" src="{{asset('assets/img/IMAGE4.jpg')}}" alt="Image" />
  97.             <div class="absolute-div">
  98.               <div class="carousel-caption">
  99.                           <!-- Service Start -->
  100.     <div class="container-xl py-5 mb-5">
  101.       <div class="container">
  102.         <div class="text-center mx-auto">
  103.           <h1 class="display-5 mb-0 text-white " id="heading">
  104.             Souscription assurance habitation
  105.           </h1>
  106.         </div>
  107.        
  108.       </div>
  109.     </div>
  110.     <!-- Service End -->
  111.               </div>
  112.             </div>
  113.           </div>
  114.         </div>
  115.       </div>
  116.     </div>
  117.     <!-- Carousel End -->
  118.     <!--begin::Wrapper container-->
  119.     <div
  120.         class="app-container container-xxl d-flex">
  121.         <!--begin::Main-->
  122.         <div
  123.             class="app-main flex-column flex-row-fluid" id="kt_app_main">
  124.             <!--begin::Content wrapper-->
  125.             <div
  126.                 class="d-flex flex-column flex-column-fluid">
  127.                 <!--begin::Content-->
  128.                 <div
  129.                     id="kt_app_content" class="app-content">
  130.                     <!--begin::About card-->
  131.                     <div
  132.                         class="card">
  133.                         <!--begin::Body-->
  134.                         <div
  135.                             class="card-body p-lg-30">
  136.                             <!--begin::About-->
  137.                             <div
  138.                                 class="mb-18">
  139.                                 <!--begin::Wrapper-->
  140.                                 <div
  141.                                     class="mb-10">
  142.                                     <!--begin::Overlay-->
  143.                                     {# <div
  144.                                         class="overlay">
  145.                                         <!--begin::Image-->
  146.                                         <img
  147.                                         class="w-100 card-rounded" src="{{asset('assets/img/img3.jpg')}}" height="50%" alt=""/>
  148.                                     <!--end::Image-->
  149.                                     </div> #}
  151.                                     <div class="container-fluid">
  152.                                         <div class="row justify-content-center">
  153.                                             <div class="col-12 col-sm-12 col-md-12 col-lg-10 col-xxl-9 text-center p-0 mt-3 mb-2">
  154.                                                 <div class="card px-3 pt-4 pb-0 mt-3 mb-3 border border-light rounded">
  155.                                                     <h2 id="heading">Commandez votre assurance habitation en quelques minutes</h2>
  156.                                                     <p>Veuillez choisir votre formule</p>
  158.                                                     <form
  159.                                                         id="msform" method="POST" action="{{path('app_souscription_Habitation')}}">
  160.                                                         <!-- progressbar -->
  161.                                                         <ul id="progressbar">
  162.                                                             <li class="active" id="home">
  163.                                                                 <strong class="d-none d-md-block">Formules assurance</strong>
  164.                                                             </li>
  165.                                                             <li id="personal">
  166.                                                                 <strong class="d-none d-md-block">Informations personnelles</strong>
  167.                                                             </li>
  169.                                                         </ul>
  170.                                                         <div class="progress">
  171.                                                             <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
  172.                                                         </div>
  173.                                                         <br>
  174.                                                         <!-- fieldsets -->
  175.                                                         <fieldset>
  176.                                                             <div class="form-card">
  177.                                                                 <div class="row">
  178.                                                                     <div class="col-6">
  179.                                                                         <h2 class="fs-title"></h2>
  180.                                                                     </div>
  181.                                                                     <div class="col-6">
  182.                                                                         <h2 class="steps">Etape 1 - 2</h2>
  183.                                                                     </div>
  184.                                                                 </div>
  186.                                                                 <div class="row mt-5">
  188.                                                                     {% for liste in formules %}
  190.                                                                         <div class="col-sm-6 col-md-3 border border-1 rounded-3 m-2">
  191.                                                                             <div class="img-boxF text-center">
  192.                                                                                 <label>
  193.                                                                                     <input class="mt-3" id="f1{{liste.id}}" name="formule" type="radio" style="width: 80px;" value="{{liste.id}}" onclick="getCheckboxVal()"/>
  194.                                                                                     {% if liste.id == 1 %}
  195.                                                                                         <img class=" d-none d-md-block border border-1 rounded-top " src="/assets/img/formule/h1.jpg" style="width:110%;margin-left:-12px;" alt="">
  196.                                                                                         <img
  197.                                                                                         class=" d-block d-md-none border border-1 rounded-top " src="/assets/img/formule/h1.jpg" style="width:107%;margin-left:-12px;" alt="">
  198.                                                                                         {# <img class="border border-1 rounded-top d-sm-block d-md-none" src="/assets/img/formule/h1.jpg" style="width:100%;margin-left:-12px;" alt=""> #}
  199.                                                                                         <span class="mt-3">
  200.                                                                                             <strong>FORMULE 1</strong>
  201.                                                                                         </span>
  203.                                                                                     {% elseif liste.id == 2 %}
  204.                                                                                         <img class=" d-none d-md-block border border-1 rounded-top " src="/assets/img/formule/h2.jpg" style="width:110%;margin-left:-12px;" alt="">
  205.                                                                                         <img class=" d-block d-md-none border border-1 rounded-top " src="/assets/img/formule/h2.jpg" style="width:107%;margin-left:-12px;" alt="">
  206.                                                                                         <span class="mt-3">
  207.                                                                                             <strong>FORMULE 2</strong>
  208.                                                                                         </span>
  209.                                                                                         {# <img src="/assets/img/formule/f2.jpg" alt=""> #}
  210.                                                                                     {% elseif liste.id == 3 %}
  211.                                                                                         <img class=" d-none d-md-block border border-1 rounded-top " src="/assets/img/formule/h3.jpg" style="width:110%;margin-left:-12px;" alt="">
  212.                                                                                         <img class=" d-block d-md-none border border-1 rounded-top " src="/assets/img/formule/h3.jpg" style="width:107%;margin-left:-12px;" alt="">
  213.                                                                                         <span class="mt-3">
  214.                                                                                             <strong>FORMULE 3</strong>
  215.                                                                                         </span>
  216.                                                                                         {# <img src="/assets/img/formule/f3.jpg" alt=""> #}
  217.                                                                                     {% endif %}
  219.                                                                                 </label>
  221.                                                                                 {% if liste.id == 1 %}
  222.                                                                                     <span class="fw-semibold text-gray-600 fs-6 mb-8 d-block mt-2 text-start" style="font-size:10px;">
  223.                                                                                         Pour une prime de 40.000 F CFA par an, obtenez une couverture allant jusqu'à 20.000.000 de F CFA pour votre bâtiment et 5.000.000 F CFA pour le contenu.
  224.                                                                                     </span>
  227.                                                                                 {% elseif liste.id == 2 %}
  228.                                                                                     <span class="fw-semibold text-gray-600 fs-6 mb-8 d-block mt-2 text-start">
  229.                                                                                         Pour une prime de 50.000 F CFA par an, obtenez une couverture allant jusqu'à 30.000.000 de F CFA pour votre bâtiment et 10.000.000 F CFA pour le contenu.
  230.                                                                                     </span>
  233.                                                                                 {% elseif liste.id == 3 %}
  234.                                                                                     <span class="fw-semibold text-gray-600 fs-6 mb-8 d-block mt-2 text-start">
  235.                                                                                         Pour une prime de 90.000 F CFA par an, obtenez. une couverture allant jusqu'à 50.000.000 de F CFA pour votre bâtiment et 15.000.000 F CFA pour le contenu.
  236.                                                                                     </span>
  238.                                                                                 {% endif %}
  240.                                                                             </div>
  241.                                                                         </div>
  243.                                                                     {% endfor %}
  245.                                                                     <div class="col-sm-12 col-md-2 border border-1 rounded-3 m-2">
  246.                                                                         <div class="img-boxF text-center row">
  247.                                                                             <label class="col-sm-6 col-md-12 ">
  248.                                                                                 <input class="mt-3" id="fs" name="formule" type="radio" style="width: 80px;" value="4" onclick="getCheckboxVal()"/>
  249.                                                                                 <img class=" d-none d-md-block border border-1 rounded-top " src="/assets/img/formule/h4.jpg" style="width:117%;margin-left:-12px;height:108%;" alt="">
  250.                                                                                 <img class=" d-block d-md-none border border-1 rounded-top " src="/assets/img/formule/h4.jpg" style="width:107%;margin-left:-12px;height:80%;" alt="">
  251.                                                                                 <span class="mt-3">
  252.                                                                                     <strong>TARIF SUR MESURE</strong>
  253.                                                                                 </span>
  255.                                                                             </label>
  256.                                                                             <span
  257.                                                                                 class="fw-semibold text-gray-600 fs-6 mb-8 d-block mt-5 col-sm-6 col-md-12 text-start" style="margin-bottom:-80px;">{# Tarif sur mesure #}
  258.                                                                             </span>
  259.                                                                         </div>
  260.                                                                     </div>
  262.                                                                 </div>
  263.                                                             </div>
  265.                                                             <input type="button" style="display:none" id="form" name="next" class="next action-button" value="Suivant"/>
  267.                                                             <div style="display:none" id="formS"></div>
  270.                                                         </fieldset>
  271.                                                         <fieldset>
  272.                                                             <div class="form-card">
  273.                                                                 <div class="row">
  274.                                                                     <div class="col-6">
  275.                                                                         <h2 class="fs-title"></h2>
  276.                                                                     </div>
  277.                                                                     <div class="col-6">
  278.                                                                         <h2 class="steps">Etape 2 - 2</h2>
  279.                                                                     </div>
  280.                                                                 </div>
  282.                                                                 <div class="row">
  283.                                                                     <div class="col-12 col-md-4">
  284.                                                                         <label class="fieldlabels">Nom: <span class="text-danger">*</span></label>
  285.                                                                         <input type="text" name="nom" placeholder="Votre nom"/>
  286.                                                                     </div>
  287.                                                                     <div class="col-12 col-md-4">
  288.                                                                         <label class="fieldlabels">Prénom: <span class="text-danger">*</span></label>
  289.                                                                         <input type="text" name="prenom" placeholder="Votre prénom"/>
  290.                                                                     </div>
  291.                                                                     <div class="col-12 col-md-4">
  292.                                                                         <label class="fieldlabels">Email:
  293.                                                                         </label>
  294.                                                                         <input type="text" name="email" placeholder="Votre email"/>
  295.                                                                     </div>
  297.                                                                     <div class="col-12 col-md-4">
  298.                                                                         <label class="fieldlabels">Quartier: <span class="text-danger">*</span>
  299.                                                                         </label>
  300.                                                                         <input type="text" name="quartier" placeholder="Quartier de résidence"/>
  301.                                                                     </div>
  302.                                                                     <div class="col-12 col-md-4">
  303.                                                                         <label class="fieldlabels">Téléphone: <span class="text-danger">*</span></label>
  304.                                                                         <input type="text" name="phone" placeholder="N° de téléphone" maxlength="8" onkeypress="chiffres(event)"/>
  305.                                                                     </div>
  306.                                                                     <div class="col-12 col-md-4">
  307.                                                                         <label class="fieldlabels">N° Ilot: <span class="text-danger">*</span></label>
  308.                                                                         <input type="number" name="ilot" placeholder="N° ilot"/>
  309.                                                                     </div>
  310.                                                                 </div>
  312.                                                                 <div class="row">
  313.                                                                     <div class="col-12 col-md-4">
  314.                                                                         <label class="fieldlabels">N° parcelle: <span class="text-danger">*</span></label>
  315.                                                                         <input type="text" name="parcelle" placeholder="N°  parcelle"/>
  316.                                                                     </div>
  317.                                                                 </div>
  320.                                                             </div>
  321.                                                             <input type="button" class="valider" value="Valider " onclick="verif(this);"/>
  323.                                                             <input type="button" name="previous" class="previous action-button-previous" value="Précédent"/>
  324.                                                         </fieldset>
  325.                                                     </form>
  326.                                                 </div>
  327.                                             </div>
  328.                                         </div>
  329.                                     </div>
  331.                                     <!--end::Overlay-->
  332.                                 </div>
  333.                                 <!--end::Wrapper-->
  334.                             </div>
  335.                             <!--end::About-->
  336.                         </div>
  337.                         <!--end::Body-->
  338.                     </div>
  339.                     <!--end::About card-->
  340.                 </div>
  341.                 <!--end::Content-->
  342.             </div>
  343.             <!--end::Content wrapper-->
  344.         </div>
  345.         <!--end::Main-->
  346.     </div>
  347.     <!--end::Wrapper container-->
  349.     <script>
  350.         jQuery.noConflict()(function ($) {
  352. $(document).ready(function () {
  354. var current_fs,
  355. next_fs,
  356. previous_fs; // fieldsets
  357. var opacity;
  358. var current = 1;
  359. var steps = $("fieldset").length;
  361. setProgressBar(current);
  363. $(".next").click(function () {
  365. current_fs = $(this).parent();
  366. next_fs = $(this).parent().next();
  368. // Add Class Active
  369. $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  371. // show the next fieldset
  372. next_fs.show();
  373. // hide the current fieldset with style
  374. current_fs.animate({
  375. opacity: 0
  376. }, {
  377. step: function (now) { // for making fielset appear animation
  378. opacity = 1 - now;
  380. current_fs.css({'display': 'none', 'position': 'relative'});
  381. next_fs.css({'opacity': opacity});
  382. },
  383. duration: 500
  384. });
  385. setProgressBar(++ current);
  386. });
  388. $(".previous").click(function () {
  390. current_fs = $(this).parent();
  391. previous_fs = $(this).parent().prev();
  393. // Remove class active
  394. $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  396. // show the previous fieldset
  397. previous_fs.show();
  399. // hide the current fieldset with style
  400. current_fs.animate({
  401. opacity: 0
  402. }, {
  403. step: function (now) { // for making fielset appear animation
  404. opacity = 1 - now;
  406. current_fs.css({'display': 'none', 'position': 'relative'});
  407. previous_fs.css({'opacity': opacity});
  408. },
  409. duration: 500
  410. });
  411. setProgressBar(-- current);
  412. });
  414. function setProgressBar(curStep) {
  415. var percent = parseFloat(100 / steps) * curStep;
  416. percent = percent.toFixed();
  417. $(".progress-bar").css("width", percent + "%")
  418. }
  420. $(".submit").click(function () {
  421. return false;
  422. })
  424. });
  426. });
  428. function verif(bouton) {
  429. form = bouton.form;
  431. if ((form.formule.value == "")) {
  432.         event.preventDefault(); // Empêche la soumission du formulaire
  433.     Swal.fire({
  434.         icon: 'warning',
  435.         title: 'Attention',
  436.         text: 'Veuillez selectionnez votre formule.',
  437.         confirmButtonColor: '#3085d6',
  438.         confirmButtonText: 'OK',
  439.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  440.     });
  441. return false;
  442. } else {
  444. if ((form.nom.value == "")) {
  445.         event.preventDefault(); // Empêche la soumission du formulaire
  446.     Swal.fire({
  447.         icon: 'warning',
  448.         title: 'Attention',
  449.         text: 'Veuillez remplir le champ nom au niveau des informations personnelles.',
  450.         confirmButtonColor: '#3085d6',
  451.         confirmButtonText: 'OK',
  452.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  453.     });
  454. return false;
  455. } else {
  456. if ((form.prenom.value == "")) {
  457.         event.preventDefault(); // Empêche la soumission du formulaire
  458.     Swal.fire({
  459.         icon: 'warning',
  460.         title: 'Attention',
  461.         text: 'Veuillez remplir le champ prénom au niveau des informations personnelles.',
  462.         confirmButtonColor: '#3085d6',
  463.         confirmButtonText: 'OK',
  464.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  465.     });
  466. return false;
  467. } else {
  468. if ((form.phone.value == "")) {
  469.         event.preventDefault(); // Empêche la soumission du formulaire
  470.     Swal.fire({
  471.         icon: 'warning',
  472.         title: 'Attention',
  473.         text: 'Veuillez remplir le champ téléphone au niveau des informations personnelles.',
  474.         confirmButtonColor: '#3085d6',
  475.         confirmButtonText: 'OK',
  476.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  477.     });
  478. return false;
  479. } else {
  480. if ((form.quartier.value == "")) {
  481.         event.preventDefault(); // Empêche la soumission du formulaire
  482.     Swal.fire({
  483.         icon: 'warning',
  484.         title: 'Attention',
  485.         text: 'Veuillez remplir le champ quartier au niveau des informations personnelles.',
  486.         confirmButtonColor: '#3085d6',
  487.         confirmButtonText: 'OK',
  488.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  489.     });
  490. return false;
  491. } else {
  492. if ((form.ilot.value == "")) {
  493.         event.preventDefault(); // Empêche la soumission du formulaire
  494.     Swal.fire({
  495.         icon: 'warning',
  496.         title: 'Attention',
  497.         text: 'Veuillez remplir le n° du ilot au niveau des informations personnelles.',
  498.         confirmButtonColor: '#3085d6',
  499.         confirmButtonText: 'OK',
  500.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  501.     });
  502. return false;
  503. } else {
  504. if ((form.parcelle.value == "")) {
  505.         event.preventDefault(); // Empêche la soumission du formulaire
  506.     Swal.fire({
  507.         icon: 'warning',
  508.         title: 'Attention',
  509.         text: 'Veuillez remplir le n° du parcelle au niveau des informations personnelles.',
  510.         confirmButtonColor: '#3085d6',
  511.         confirmButtonText: 'OK',
  512.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  513.     });
  514. return false;
  515. } else {
  516. form.submit();
  517. }
  518. }
  519. }
  520. }
  521. }
  522. }
  524. }
  526. }
  529. function getCheckboxVal() {
  531. var lang1 = document.querySelector('input[type=radio]:checked');
  533. console.log(lang1.value);
  535. if (lang1.value != "4") {
  536. document.getElementById('form').style.display = "none";
  537. document.getElementById('formS').style.display = "none";
  538. $(document).ready(function () {
  539. $('#form').trigger("click");
  540. });
  541. } else {
  543. document.getElementById('form').style.display = "none";
  544. document.getElementById('formS').style.display = "block";
  546. swal.setDefaults({confirmButtonColor: '#2a1266'});
  547. swal({title: "Information!", text: 'Pour un tarif sur mesure veuillez contacter le 96265109.'})
  549. }
  551. }
  552.     </script>
  555. {% endblock %}