templates/souscription/indexAuto.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}{% endblock %}
  5. {% block body %}
  7.     <!-- Customized Bootstrap Stylesheet -->
  8.     <link
  9.     href="{{asset('assets/css/form/formAuto.css')}}" rel="stylesheet"/>
  12.     <!-- google font -->
  13.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
  14.     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
  15.     <link href="/assets/prof/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
  16.     <script src="/assets/prof/js/scripts.bundle.js"></script>
  18.     {% for flashMessage in app.session.flashbag.get('noTarif') %}
  20.         <script>
  21.             window.onload = function () {
  22.             Swal.fire({
  23.             text:"{{ flashMessage }}",
  24.             icon: "error",
  25.             buttonsStyling: false,
  26.             confirmButtonText: "Ok",
  27.               background: '#f8f9fa', // Couleur d'arrière-plan personnalisée
  28.             customClass: {
  29.             confirmButton: "btn btn-danger"
  30.             }
  31.             });
  32.             };
  33.         </script>
  35.     {% endfor %}
  37.     {% for flashMessage in app.session.flashbag.get('attentePaiement') %}
  39.             <script>
  40.             window.onload = function () {
  41.             Swal.fire({
  42.             text:"{{ flashMessage }}",
  43.             icon: "error",
  44.             buttonsStyling: false,
  45.             confirmButtonText: "Ok",
  46.               background: '#f8f9fa', // Couleur d'arrière-plan personnalisée
  47.             customClass: {
  48.             confirmButton: "btn btn-danger"
  49.             }
  50.             });
  51.             };
  52.         </script>
  54.     {% endfor %}
  56.     {% for flashMessage in app.session.flashbag.get('validiter') %}
  57.         <script>
  58.             window.onload = function () {
  59.             Swal.fire({
  60.             text:"{{ flashMessage }}",
  61.             icon: "error",
  62.             buttonsStyling: false,
  63.             confirmButtonText: "Ok",
  64.               background: '#f8f9fa', // Couleur d'arrière-plan personnalisée
  65.             customClass: {
  66.             confirmButton: "btn btn-danger"
  67.             }
  68.             });
  69.             };
  70.         </script>
  71.     {% endfor %}
  74.     <style>
  76. .custom-img {
  77.   width: 100%; /* Remplir toute la largeur disponible */
  78.   height: 40vh; /* Remplir la moitié de la hauteur de la fenêtre du navigateur */
  79.   object-fit: cover; /* L'image couvre la zone sans déformation */
  80. }
  81. </style>
  84. <!-- Carousel Start -->
  85. <div class="container-fluid p-0 mb-0 wow fadeIn" data-wow-delay="0.1s">
  86.       <div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
  87.         <div class="carousel-inner">
  88.           <div class="carousel-item active">
  89.             {# <img class="h-50 w-80" src="{{asset('assets/img/IMAGE4.jpg')}}" alt="Image" /> #}
  90.             <img class="custom-img" src="{{asset('assets/img/IMAGE4.jpg')}}" alt="Image" />
  92.             <div class="absolute-div">
  93.               <div class="carousel-caption">
  94.                           <!-- Service Start -->
  95.     <div class="container-xl py-5 mb-5">
  96.       <div class="container">
  97.         <div class="text-center mx-auto">
  98.           <h1 class="display-5 mb-0 text-white " id="heading">
  99.             Souscription assurance automobile
  100.           </h1>
  101.         </div>
  102.        
  103.       </div>
  104.     </div>
  105.     <!-- Service End -->
  106.               </div>
  107.             </div>
  108.           </div>
  109.         </div>
  110.       </div>
  111.     </div>
  112.     <!-- Carousel End -->
  114.     <!--begin::Wrapper container-->
  115.     <div
  116.         class="app-container container-xxl d-flex">
  117.         <!--begin::Main-->
  118.         <div
  119.             class="app-main flex-column flex-row-fluid" id="kt_app_main">
  120.             <!--begin::Content wrapper-->
  121.             <div
  122.                 class="d-flex flex-column flex-column-fluid">
  123.                 <!--begin::Content-->
  124.                 <div
  125.                     id="kt_app_content" class="app-content">
  126.                     <!--begin::About card-->
  127.                     <div
  128.                         class="card">
  129.                         <!--begin::Body-->
  130.                         <div
  131.                             class="card-body p-lg-30">
  132.                             <!--begin::About-->
  133.                             <div
  134.                                 class="mb-18">
  135.                                 <!--begin::Wrapper-->
  136.                                 <div
  137.                                     class="mb-10">
  138.                                     <!--begin::Overlay-->
  139.                                     {# <div
  140.                                         class="overlay col-12">
  141.                                         <!--begin::Image-->
  142.                                         <img
  143.                                         class="w-100 card-rounded" src="{{asset('assets/img/auto/2.jpg')}}" style="height: 250px;" alt=""/>
  144.                                     <!--end::Image-->
  145.                                     </div> #}
  147.                                     <div class="container-fluid">
  148.                                         <div class="row justify-content-center">
  149.                                             {# <div class="col-12 col-sm-12 col-md-12 col-lg-10 col-xxl-9 text-center p-0 mb-2"> #}
  150.                                             <div class="col-12 col-sm-12 col-md-12 col-lg-10 col-xxl-9 text-center p-0 mt-3 mb-2">
  151.                                                 <div class="card px-3 py-3 pb-0 mt-3 mb-3 border border-light rounded">
  154.                                                 {# <div class="card px-3 py-3 pb-0 mt-3 mb-3 border border-light rounded"> #}
  155.                                                     <h2 id="heading">Commandez votre assurance automobile en quelques minutes</h2>
  156.                                                     <p>Veuillez remplir tous les champs du formulaire de souscription</p>
  158.                                                     <form enctype="multipart/form-data" id="msform" method="POST" action="{{path('app_souscription_auto')}}">
  159.                                                         <!-- progressbar -->
  160.                                                         <ul id="progressbar">
  161.                                                             <li class="active" id="personal">
  162.                                                                 <strong class="d-none d-md-block">Informations personnelles</strong>
  163.                                                             </li>
  164.                                                             <li id="vehicle">
  165.                                                                 <strong class="d-none d-md-block">Informations du véhicule</strong>
  166.                                                             </li>
  167.                                                             <li id="asurance">
  168.                                                                 <strong class="d-none d-md-block">Détails assurance</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 - 3</h2>
  184.                                                                     </div>
  185.                                                                 </div>
  187.                                                                 <div class="row">
  188.                                                                     <div class="col-12 col-md-6">
  189.                                                                         <label class="fieldlabels">Nom:
  190.                                                                             <span class="text-danger">*</span>
  191.                                                                         </label>
  192.                                                                         <input type="text" id="nom" name="nom" placeholder="Saisissez votre nom" value="{% if app.session.get('nom') != null %} {{app.session.get('nom')}} {% endif%}"/>
  193.                                                                     </div>
  194.                                                                     <div class="col-12 col-md-6">
  195.                                                                         <label class="fieldlabels">Prénom:
  196.                                                                             <span class="text-danger">*</span>
  197.                                                                         </label>
  198.                                                                         <input type="text" id="prenom" name="prenom" placeholder="Saisissez votre prénom" value="{% if app.session.get('prenom') != null %} {{app.session.get('prenom')}} {% endif%}"/>
  199.                                                                     </div>
  200.                                                                 </div>
  202.                                                                 <div class="row">
  203.                                                                     <div class="col-12 col-md-6">
  204.                                                                         <label class="fieldlabels">Téléphone:
  205.                                                                             <span class="text-danger">*</span>
  206.                                                                         </label>
  207.                                                                         <input type="tel" id="phone" name="phone" placeholder="Numéro de téléphone" value="{% if app.session.get('telephone') != null %} {{app.session.get('telephone')}} {% endif%}" maxlength="8" onkeypress="chiffres(event)"/>
  208.                                                                     </div>
  209.                                                                     <div class="col-12 col-md-6">
  210.                                                                         <label class="fieldlabels">Usage:
  211.                                                                             <span class="text-danger">*</span>
  212.                                                                         </label>
  213.                                                                         <select id="usage" name="usage">
  214.                                                                             <option {% if app.session.get('usage') == null %} selected {% endif%}>Selectionnez le type d'usage</option>
  215.                                                                             <option {% if app.session.get('usage') != null and app.session.get('usage') == 1 %} selected {% endif%} value="1">Véhicule Particulier</option>
  216.                                                                             <option {% if app.session.get('usage') != null and app.session.get('usage') == 2 %} selected {% endif%} value="2">Moto</option>
  217.                                                                         </select>
  218.                                                                     </div>
  219.                                                                 </div>
  221.                                                             </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 col-md-7">
  229.                                                                         <h2 class="fs-title"></h2>
  230.                                                                     </div>
  231.                                                                     <div class="col-6 col-md-5">
  232.                                                                         <h2 class="steps">Etape 2 - 3</h2>
  233.                                                                     </div>
  234.                                                                 </div>
  236.                                                                 <div class="row">
  237.                                                                     <div class="col-12 col-md-6">
  238.                                                                         <label class="fieldlabels">Marque:
  239.                                                                             <span class="text-danger">*</span>
  240.                                                                         </label>
  241. {# <select required name="marque" class="form-select" id="basic-usage" data-placeholder="Choose one thing">
  242. <option {% if app.session.get('marque') != "" %} value="{{app.session.get('marque')}}" {% endif%}>Selectionnez la marque</option>
  243. {% for liste in marques %}
  244. <option value="{{liste.libelle}}">{{liste.libelle}}
  245. </option>
  246. {% endfor %}
  247. </select> #}
  248.                                                                         <input type="text" id="marque" name="marque" placeholder="Saisissez la marque de votre automobile" value="{% if app.session.get('marque') != null %} {{app.session.get('marque')}} {% endif%}"/>
  249.                                                                     </div>
  250.                                                                     
  252.                                                                     <div class="col-12 col-md-6">
  253.                                                                             <label class="fieldlabels col-6 col-md-6 ">Energie:
  254.                                                                                 <span class="text-danger">*</span>
  255.                                                                             </label>
  256.                                                                             <div class="row    ">
  257.                                                                                 <div class="col-md-4">
  258.                                                                                     <label class="d-flex ">
  259.                                                                                         <input class="mt-3" id="energie" name="energie" type="radio" value="1" style="width: 25px;" checked/>
  260.                                                                                         <span class="mt-2" style="font-family: montserrat; font-size: 15px; letter-spacing: 0px;">E (Essence)</span>
  261.                                                                                     </label>
  262.                                                                                 </div>
  263.                                                                                 <div class="col-md-4">
  264.                                                                                     <label class="d-flex">
  265.                                                                                         <input class="mt-3" id="energie" name="energie" type="radio" style="width: 25px;" value="2"/>
  266.                                                                                         <span class="mt-2" style="font-family: montserrat; font-size: 15px; letter-spacing: 0px;">D (Diesel)</span>
  267.                                                                                     </label>
  268.                                                                                 </div>
  269.                                                                                 <div class="col-md-4"></div>
  270.                                                                             </div>
  271.                                                                         </div>
  272.                                                                 </div>
  273.                                                                         <div class="row">
  274.                                                                  <div class="col-12 col-md-6">
  275.                                                                         <label class="fieldlabels">Modèle:
  276.                                                                             <span class="text-danger">*</span>
  277.                                                                         </label>
  278.                                                                         <span id="eligibilityMessage" class="text-danger" style="display: none; margin-left: 10px;">Le modèle sélectionné n'est pas éligible.</span>
  280.                                                                         <input type="text" id="modele" name="modele" placeholder="Saisissez le modèle de votre automobile" value="{% if app.session.get('modele') != null %} {{app.session.get('modele')}} {% endif%}" oninput="checkEligibility()"/>
  281.                                                                         </div>
  282.                                                                         
  284.                                                                         <div class="col-12 col-md-6">
  285.                                                                             <label class="fieldlabels">Puissance:
  286.                                                                                 <span class="text-danger">*</span>
  287.                                                                             </label>
  288.                                                                             <input
  289.                                                                             type="text" autocomplete="off" class="form-control" id="puissance" onkeypress="chiffres(event)" maxlength="11" placeholder="Entrez la puissance" name="puissance" required="required" value="{% if app.session.get('puissance') != null %} {{app.session.get('puissance')}} {% endif%}"/>
  291.                                                                         </div>
  293.                                                                     </div>
  295.                                                                 <div class="row">
  296.                                                                     <div class="col-12 col-md-6">
  297.                                                                         <label class="fieldlabels">Plaque ou Chassis:
  298.                                                                             <span class="text-danger">*</span>
  299.                                                                         </label>
  300.                                                                         <input type="text" id="plaque" name="plaque" placeholder="Saisissez le numéro de plaque ou chassis" value="{% if app.session.get('plaque') != null %} {{app.session.get('plaque')}} {% endif%}"/>
  301.                                                                     </div>
  302.                                                                     <div class="col-12 col-md-6">
  304.                                                                         <label class="fieldlabels">Nombre de places: *</label>
  305.                                                                         <!--begin::Dialer-->
  306.                                                                         <div
  307.                                                                             class="position-relative " id="kt_modal_create_project_budget_setup" data-kt-dialer="true" data-kt-dialer-min="1" data-kt-dialer-max="70">
  308.                                                                             <!--begin::Decrease control-->
  309.                                                                             <button
  310.                                                                                 type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 start-0" data-kt-dialer-control="decrease">
  311.                                                                                 <!--begin::Svg Icon | path: icons/duotune/general/gen042.svg-->
  312.                                                                                 <span class="svg-icon svg-icon-1">
  313.                                                                                     <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  314.                                                                                         <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor"/>
  315.                                                                                         <rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="currentColor"/>
  316.                                                                                     </svg>
  317.                                                                                 </span>
  318.                                                                                 <!--end::Svg Icon-->
  319.                                                                             </button>
  320.                                                                             <!--end::Decrease control-->
  321.                                                                             <!--begin::Input control-->
  322.                                                                             <input type="text" name="place" class="form-control text-center form-control-solid border-0 ps-12" data-kt-dialer-control="input" placeholder="Amount" name="budget_setup" readonly="readonly" value="{% if app.session.get('place') != null %} {{app.session.get('place')}} {% endif%}"/>
  323.                                                                             <!--end::Input control-->
  324.                                                                             <!--begin::Increase control-->
  325.                                                                                 <button
  326.                                                                                 type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 end-0" data-kt-dialer-control="increase"> <!--begin::Svg Icon | path: icons/duotune/general/gen041.svg-->
  327.                                                                                 <span class="svg-icon svg-icon-1">
  328.                                                                                     <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  329.                                                                                         <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor"/>
  330.                                                                                         <rect x="10.8891" y="17.8033" width="12" height="2" rx="1" transform="rotate(-90 10.8891 17.8033)" fill="currentColor"/>
  331.                                                                                         <rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="currentColor"/>
  332.                                                                                     </svg>
  333.                                                                                 </span>
  334.                                                                                 <!--end::Svg Icon-->
  335.                                                                             </button>
  336.                                                                             <!--end::Increase control-->
  337.                                                                         </div>
  338.                                                                         <!--end::Dialer-->
  340.                                                                     </div>
  342.                                                                 </div>
  345.                                                             </div>
  346.                                                             <input type="button" name="next" class="next action-button" value="Suivant"/>
  347.                                                             <input type="button" name="previous" class="previous action-button-previous" value="Précédent"/>
  348.                                                         </fieldset>
  349.                                                         <fieldset>
  350.                                                             <div class="form-card">
  351.                                                                 <div class="row">
  352.                                                                     <div class="col-6 col-md-7">
  353.                                                                         <h2 class="fs-title"></h2>
  354.                                                                     </div>
  355.                                                                     <div class="col-6 col-md-5">
  356.                                                                         <h2 class="steps">Etape 3 - 3</h2>
  357.                                                                     </div>
  358.                                                                 </div>
  359.                                                             
  361.                                                                 <div class="row">
  362.                                                                 
  363.                                                                     <div class="col-12 col-md-6">
  364.                                                                         <label class="fieldlabels col-lg-3 ">Durée/mois:
  365.                                                                             <span class="text-danger">*</span>
  366.                                                                         </label>
  367.                                                                         <select id="duree" name="duree">
  368.                                                                             <option {% if app.session.get('duree') == null %} value="" {% endif%}>Selectionnez la durée</option>
  369.                                                                             {% for liste in durees %}
  370.                                                                                 <option {% if app.session.get('duree') != null and app.session.get('duree') == liste.id %} selected {% endif%} value="{{liste.id}}">{{liste.libelle}}
  371.                                                                                     mois</option>
  372.                                                                             {% endfor %}
  373.                                                                         </select>
  374.                                                                     </div>
  376.                                                                     
  377.                                                                     <div class="col-12 col-md-6">
  378.                                                                         <label class="fieldlabels col-md-6 ">Date effet(A compter de):
  379.                                                                             <span class="text-danger">*</span>
  380.                                                                             
  381.                                                                         </label>
  382.                                                                         <div class="col-md-12">
  383.                                                                             <input type="date" autocomplete="off" class="form-control" id="date_effet" placeholder="Entrez la date effet" name="date_effet" required="required"/>
  384.                                                                         </div>
  385.                                                                     </div>
  387.                                                                 </div>
  388.                                                             
  389.                                                                 
  390.                                                                 <div class="row">
  391.                                                                     <div class="col-12 col-md-6">
  392.                                                                         <label class="fieldlabels col-md-6 ">Avance recours:
  393.                                                                             <span class="text-danger">*</span>
  394.                                                                             <a href="#" data-toggle="tooltip" data-placement="top" title="Information concernant l'option avance recours">
  395.                                                                                 <i class="bi bi-question-circle-fill text-primary" style="font-size: 1.5rem; color: black;"></i>
  396.                                                                             </a>
  397.                                                                         </label>
  398.                                                                         <div class="col-md-6">
  399.                                                                             <div class="row">
  400.                                                                                 <div class="col-md-4">
  401.                                                                                     <label class="d-flex ">
  402.                                                                                         <input class="mt-3" id="avance_recours" name="avance_recours" type="radio" value="2" style="width: 25px;" checked/>
  403.                                                                                         <span class="mt-2" style="font-family: montserrat; font-size: 14px; letter-spacing: 1px;">Non</span>
  404.                                                                                     </label>
  405.                                                                                 </div>
  406.                                                                                 <div class="col-md-6">
  407.                                                                                     <label class="d-flex">
  408.                                                                                         <input class="mt-3" id="avance_recours" name="avance_recours" type="radio" style="width: 25px;" value="1"/>
  409.                                                                                         <span class="mt-2" style="font-family: montserrat; font-size: 14px; letter-spacing: 1px;">Oui</span>
  410.                                                                                     </label>
  411.                                                                                 </div>
  412.                                                                             </div>
  413.                                                                         </div>
  414.                                                                     </div>
  416.                                                                     <div class="col-12 col-md-6">
  417.                                                                             <label class="fieldlabels">Photo carte grise:
  418.                                                                                 <span class="text-danger">*</span>
  419.                                                                             </label>
  420.                                                                             <input type="file"  accept="image/*" class="form-control" id="carteGrise" placeholder="Importer la carte grise" name="carteGrise" />
  422.                                                                         </div>
  423.                                                                 </div>
  424.                                                                 <div class="row">
  425.                                                                     <div class="col-12 col-md-6">
  426.                                                                         <label class="fieldlabels col-md-6 ">Sécurité conducteur:
  427.                                                                             <span class="text-danger">*</span>
  428.                                                                             <a href="#" data-toggle="tooltip" data-placement="top" title="Information concernant l'option securité conducteur">
  429.                                                                                 <i class="bi bi-question-circle-fill text-primary" style="font-size: 1.5rem; color: black;"></i>
  430.                                                                             </a>
  431.                                                                         </label>
  432.                                                                         <div class="col-md-6">
  433.                                                                             <div class="row">
  434.                                                                                 <div class="col-md-4">
  435.                                                                                     <label class="d-flex ">
  436.                                                                                         <input class="mt-3" id="option" name="option" type="radio" value="2" style="width: 25px;" checked/>
  437.                                                                                         <span class="mt-2" style="font-family: montserrat; font-size: 14px; letter-spacing: 1px;">Non</span>
  438.                                                                                     </label>
  439.                                                                                 </div>
  440.                                                                                 <div class="col-md-6">
  441.                                                                                     <label class="d-flex">
  442.                                                                                         <input class="mt-3" id="option" name="option" type="radio" style="width: 25px;" value="1"/>
  443.                                                                                         <span class="mt-2" style="font-family: montserrat; font-size: 14px; letter-spacing: 1px;">Oui</span>
  444.                                                                                     </label>
  445.                                                                                 </div>
  447.                                                                             </div>
  448.                                                                         </div>
  449.                                                                     </div>
  450.                                                                     <div class="col-12 col-md-6">
  451.                                                                         
  452.                                                                     </div>
  453.                                                                     
  455.                                                                 </div>
  456.                                                                 <div class="row"></div>
  458.                                                                 <hr class="d-sm-block d-md-none">
  460.                                                             </div>
  461.                                                             <input type="button" name="initiation" id="initiation" class="valider" value="Valider " onclick="verif(this);"/>
  463.                                                             <input type="button" name="previous" class="previous action-button-previous" value="Précédent"/>
  464.                                                         </fieldset>
  466.                                                     </form>
  467.                                                 </div>
  468.                                             </div>
  469.                                         </div>
  470.                                     </div>
  472.                                     <!--end::Overlay-->
  473.                                 </div>
  474.                                 <!--end::Wrapper-->
  475.                             </div>
  476.                             <!--end::About-->
  477.                         </div>
  478.                         <!--end::Body-->
  479.                     </div>
  480.                     <!--end::About card-->
  481.                 </div>
  482.                 <!--end::Content-->
  483.             </div>
  484.             <!--end::Content wrapper-->
  485.         </div>
  486.         <!--end::Main-->
  487.     </div>
  488.     <!--end::Wrapper container-->
  490.     <script>
  491.   function checkEligibility() {
  492.     const modele = document.getElementById('modele').value.toLowerCase();
  493.     const eligibilityMessage = document.getElementById('eligibilityMessage');
  495.     // Vérification des modèles non éligibles
  496.     if (modele.includes('hard top') || modele.includes('hilux') || modele.includes('tricycle')) {
  497.       eligibilityMessage.style.display = 'inline'; // Affiche le message à côté
  498.     } else {
  499.       eligibilityMessage.style.display = 'none'; // Cache le message si éligible
  500.     }
  501.   }
  502. </script>
  503.     <script>
  505.         function keydownFunction() {
  506. var valSaisie = document.getElementById('montant_envoi').value;
  507. var valSaisie2 = addCommas2(valSaisie);
  509. // console.log(valSaisie2);
  510. var maxMontant = document.getElementById('montant_max_requiert_carte').value;
  511. var maxMontant2 = addCommas2(maxMontant);
  512. // console.log(maxMontant2);
  514. var total = (valSaisie2 - maxMontant2);
  515. console.log(total);
  517. // verification si le montant saisie est superieur au montant enregistres
  518. if (total > 0) {
  519. document.getElementById('identifiant_de_ma_div').style.display = "block";
  520. } else {
  521. document.getElementById('identifiant_de_ma_div').style.display = "none";
  522. }
  523. }
  525. function onChangeMotifEnvoi() {
  526. var motifEnvoi = document.getElementById('motif_envoi').value;
  528. console.log(motifEnvoi);
  529. // verification si le montant saisie est superieur au montant enregistres
  530. if (motifEnvoi == 6) {
  531. document.getElementById('identifint_motif_envoi').style.display = "block";
  532. } else {
  533. document.getElementById('identifint_motif_envoi').style.display = "none";
  534. }
  535. }
  538. function keydownFunction2() {
  539. var puissance = document.getElementById('puissance').value;
  540. var energie = document.getElementById('energie').value;
  541. var duree = document.getElementById('duree').value;
  542. var usage = $('#usage').val();
  543. var option = document.getElementById('option').value;
  544. var avance_recours = document.getElementById('avance_recours').value;
  547. var parametros = {
  548. 'puissance': puissance,
  549. 'energie': energie,
  550. 'duree': duree,
  551. 'option': option,
  552. 'usage': usage,
  553. 'avance_recours': avance_recours
  554. };
  555. $.ajax({
  556. url: '/liste_tarif/filtre',
  557. type: "POST",
  558. dataType: "json",
  559. data: parametros,
  560. async: true,
  561. success: function (response) {
  563. console.log("response")
  564. console.log(response)
  565. // $("#montant_total").val(puissance);
  567. // $("#puissance").html("<option value=''>Selectionnez la puissance</option>" + response);
  569. },
  570. error: function (xhr, ajaxOptions, thrownError) {
  571. alert(xhr.status + " " + thrownError);
  572. }
  574. });
  576. /* 
  577. var puissance = addCommas(puissance);
  579. verification si le montant saisie est superieur 0 0 
  580.             if(valSaisie2 == "")
  581.             {
  582. console.log("test 1")
  583. var montantEnvoi = $('#puissance').val();
  585. $('#Valider').attr('disabled', true);
  587. $("#montant_total").val(puissance);
  588. // desactivation du bouton a l' envoi
  589. // $('#Valider').attr('disabled', false);
  590. // document.getElementById('loader').style.display = "none";
  592. }else
  593.             {
  594.                 console.log("test 2")
  596.                 $("#montant_total").val(' ');
  597.                 $('#Valider').attr('disabled', true);
  598.             }*/
  600. }
  602. function addCommas(str) {
  603. return str.replace(/^0+/, '').replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  604. }
  607. function test() {
  608. var val = document.getElementById('montant_envoi').value;
  609. document.getElementById('montant_envoi').value = addCommas(val);
  610. }
  611.     </script>
  613.     <script>
  614.         jQuery.noConflict()(function ($) {
  616. $(document).ready(function () {
  618. var current_fs,
  619. next_fs,
  620. previous_fs; // fieldsets
  621. var opacity;
  622. var current = 1;
  623. var steps = $("fieldset").length;
  625. setProgressBar(current);
  627. $(".next").click(function () {
  629. current_fs = $(this).parent();
  630. next_fs = $(this).parent().next();
  632. // Add Class Active
  633. $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  635. // show the next fieldset
  636. next_fs.show();
  637. // hide the current fieldset with style
  638. current_fs.animate({
  639. opacity: 0
  640. }, {
  641. step: function (now) { // for making fielset appear animation
  642. opacity = 1 - now;
  644. current_fs.css({'display': 'none', 'position': 'relative'});
  645. next_fs.css({'opacity': opacity});
  646. },
  647. duration: 500
  648. });
  649. setProgressBar(++ current);
  650. });
  652. $(".nextForm").click(function () {
  654. current_fs = 3;
  655. next_fs = 3;
  657. // Add Class Active
  658. $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  660. // show the next fieldset
  661. next_fs.show();
  662. // hide the current fieldset with style
  663. current_fs.animate({
  664. opacity: 0
  665. }, {
  666. step: function (now) { // for making fielset appear animation
  667. opacity = 1 - now;
  669. current_fs.css({'display': 'none', 'position': 'relative'});
  670. next_fs.css({'opacity': opacity});
  671. },
  672. duration: 500
  673. });
  674. setProgressBar(++ current);
  675. });
  677. $(".previous").click(function () {
  679. current_fs = $(this).parent();
  680. previous_fs = $(this).parent().prev();
  682. // Remove class active
  683. $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  685. // show the previous fieldset
  686. previous_fs.show();
  688. // hide the current fieldset with style
  689. current_fs.animate({
  690. opacity: 0
  691. }, {
  692. step: function (now) { // for making fielset appear animation
  693. opacity = 1 - now;
  695. current_fs.css({'display': 'none', 'position': 'relative'});
  696. previous_fs.css({'opacity': opacity});
  697. },
  698. duration: 500
  699. });
  700. setProgressBar(-- current);
  701. });
  703. function setProgressBar(curStep) {
  704. var percent = parseFloat(100 / steps) * curStep;
  705. percent = percent.toFixed();
  706. $(".progress-bar").css("width", percent + "%")
  707. }
  709. $(".submit").click(function () {
  710. return false;
  711. })
  713. });
  715. });
  718. function getCheckboxValue() {
  719. var lang1 = document.getElementById("s1");
  720. var lang2 = document.getElementById("s2");
  721. if (lang1.checked == true) {
  722. var lg1 = document.getElementById("s1").value;
  723. document.getElementById('vehicule').style.display = "block";
  724. document.getElementById('moto').style.display = "none";
  725. } else if (lang2.checked == true) {
  726. var lg2 = document.getElementById("s2").value;
  727. document.getElementById('vehicule').style.display = "none";
  728. document.getElementById('moto').style.display = "block";
  729. }
  731. }
  733. function livraison() {
  734. var lang1 = document.getElementById("l1");
  735. var lang2 = document.getElementById("l2");
  736. if (lang1.checked == true) {
  737. var lg1 = document.getElementById("l1").value;
  738. document.getElementById('oui').style.display = "block";
  739. document.getElementById('non').style.display = "none";
  740. } else if (lang2.checked == true) {
  741. var lg2 = document.getElementById("l2").value;
  742. document.getElementById('oui').style.display = "none";
  743. document.getElementById('non').style.display = "block";
  744. }
  745. }
  747. function payement() {
  748. var lang1 = document.getElementById("i1");
  750. console.log(lang1, lang2, lang3, lang4, lang5);
  752. if (lang1.checked == true) {
  753. var lg1 = document.getElementById("i1").value;
  754. document.getElementById('tel2').style.display = "block";
  755. result = lg1 + " ";
  756. }
  758. document.getElementById('resultat').style.display = "block";
  759. return document.getElementById("result").innerHTML = "Vous avez selectionnez " + "Airtel Money";
  760. }
  762. function verif(bouton) {
  763. form = bouton.form;
  764. var lang1 = document.getElementById("s1");
  766. console.log(document.getElementById('puissance').value);
  768. if ((form.nom.value == "")) {
  769.     event.preventDefault(); // Empêche la soumission du formulaire
  770.     Swal.fire({
  771.         icon: 'warning',
  772.         title: 'Attention',
  773.         text: 'Veuillez remplir le champ nom au niveau des informations personnelles.',
  774.         confirmButtonColor: '#3085d6',
  775.         confirmButtonText: 'OK',
  776.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  777.     });
  778. return false;
  779. } else {
  780. if ((form.prenom.value == "")) {
  781. event.preventDefault(); // Empêche la soumission du formulaire
  782.     Swal.fire({
  783.         icon: 'warning',
  784.         title: 'Attention',
  785.         text: 'Veuillez remplir le champ prénom au niveau des informations personnelles.',
  786.         confirmButtonColor: '#3085d6',
  787.         confirmButtonText: 'OK',
  788.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  789.     });
  790. return false;
  791. } else {
  792. if ((form.phone.value == "")) {
  794.     event.preventDefault(); // Empêche la soumission du formulaire
  795.     Swal.fire({
  796.         icon: 'warning',
  797.         title: 'Attention',
  798.         text: 'Veuillez remplir le champ téléphone au niveau des informations personnelles.',
  799.         confirmButtonColor: '#3085d6',
  800.         confirmButtonText: 'OK',
  801.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  802.     });
  803. return false;
  804. } else {
  805. if ((form.marque.value == "")) {
  806.         event.preventDefault(); // Empêche la soumission du formulaire
  807.     Swal.fire({
  808.         icon: 'warning',
  809.         title: 'Attention',
  810.         text: 'Veuillez remplir le champ marque au niveau des informations sur le vehicule.',
  811.         confirmButtonColor: '#3085d6',
  812.         confirmButtonText: 'OK',
  813.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  814.     });
  815. return false;
  816. } else {
  817. if ((form.modele.value == "")) {
  818.             event.preventDefault(); // Empêche la soumission du formulaire
  819.     Swal.fire({
  820.         icon: 'warning',
  821.         title: 'Attention',
  822.         text: 'Veuillez remplir le champ modèle au niveau des informations sur le vehicule.',
  823.         confirmButtonColor: '#3085d6',
  824.         confirmButtonText: 'OK',
  825.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  826.     });
  827. return false;
  828. } else {
  829. if ((form.plaque.value == "")) {
  830.             event.preventDefault(); // Empêche la soumission du formulaire
  831.     Swal.fire({
  832.         icon: 'warning',
  833.         title: 'Attention',
  834.         text: 'Veuillez remplir le champ plaque au niveau des informations sur le vehicule.',
  835.         confirmButtonColor: '#3085d6',
  836.         confirmButtonText: 'OK',
  837.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  838.     });
  839. return false;
  840. } else {
  841. if ((document.getElementById('puissance').value == "")) {
  842.             event.preventDefault(); // Empêche la soumission du formulaire
  843.     Swal.fire({
  844.         icon: 'warning',
  845.         title: 'Attention',
  846.         text: 'Veuillez remplir le champ puissance au niveau des informations sur le vehicule.',
  847.         confirmButtonColor: '#3085d6',
  848.         confirmButtonText: 'OK',
  849.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  850.     });
  851. return false;
  852. } else {
  853. if ((form.energie.value == "")) {
  854.                 event.preventDefault(); // Empêche la soumission du formulaire
  855.     Swal.fire({
  856.         icon: 'warning',
  857.         title: 'Attention',
  858.         text: 'Veuillez selectionnez l energie au niveau des détails de l assurance.',
  859.         confirmButtonColor: '#3085d6',
  860.         confirmButtonText: 'OK',
  861.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  862.     });
  863. return false;
  864. } else {
  865. if ((form.energie.duree == "")) {
  866.             event.preventDefault(); // Empêche la soumission du formulaire
  867.     Swal.fire({
  868.         icon: 'warning',
  869.         title: 'Attention',
  870.         text: 'Veuillez selectionnez la durée au niveau des détails de l assurance.',
  871.         confirmButtonColor: '#3085d6',
  872.         confirmButtonText: 'OK',
  873.         background: '#f8f9fa' // Couleur d'arrière-plan personnalisée
  874.     });
  875. return false;
  876. } else {
  877. form.submit();
  878. }
  880. }
  881. }
  882. }
  883. }
  884. }
  885. }
  886. }
  887. }
  888. }
  890. function ListePuissance() {
  892. var puissance = $('#usage').val();
  894. console.log(puissance);
  896. var parametros = {
  897. 'usage': puissance
  898. };
  899. $.ajax({
  900. url: '/liste_puissance/filtre',
  901. type: "POST",
  902. dataType: "json",
  903. data: parametros,
  904. async: true,
  905. success: function (response) {
  907. $("#puissance").html("<option value=''>Selectionnez la puissance</option>" + response);
  909. },
  910. error: function (xhr, ajaxOptions, thrownError) {
  911. alert(xhr.status + " " + thrownError);
  912. }
  914. });
  915. }
  916.     </script>
  917.     <script>
  918.         $('#basic-usage').select2({
  919. theme: "bootstrap-5",
  920. width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
  921. placeholder: $(this).data('placeholder')
  922. });
  923.     </script>
  925. {% endblock %}