templates/evenement/detailsFront.html.twig line 1

Open in your IDE?
  1. {% extends 'backfront.html.twig' %}
  3. {% block title %}Sessions de formation SIP Academy - Calendrier et inscription{% endblock %}
  4. {% block meta_description %}
  5.     Inscrivez-vous aux prochaines sessions de formation chez SIP Academy. Consultez le calendrier de nos cours en ligne et en présentiel et planifiez votre avenir.
  6. {% endblock %}
  12. {% block body %}
  13.     <style>
  14.         #captcha > div {
  15.             width: 100%; /* Default width for non-mobile devices */
  17.             /* Media query for screens with a maximum width of 768 pixels (adjust as needed) */
  18.             @media (max-width: 768px) {
  19.                 width: 200px; /* Adjust the width for mobile devices */
  20.                 margin: 0 auto; /* Center the reCAPTCHA element */
  21.             }
  22.         }
  23.     </style>
  24.     <script>
  25.         var recaptchaCallback = function (){
  26.             var btnSubmitt = document.getElementById("button-confirm");
  27.             var captcha = document.getElementById("captcha");
  28.             captcha.classList.add("hidden");
  29.             if ( btnSubmitt.disabled ) {
  30.                 btnSubmitt.disabled = false;
  31.             }
  32.             console.log('checked !');
  33.         }
  34.     </script>
  35. <!--Event Area Start-->
  36. <div class="event-details-area section-padding">
  37.     <div class="container">
  38.         {% for flashMessages in app.flashes('success') %}
  39.             <div class="alert  alert-success alert-dismissible fade show">
  40.                 <i class="bi-check-circle-fill"></i>
  41.                 <strong class="mx-2">         {{ flashMessages }}</strong>
  42.                 <!--begin::Close-->
  43.                 <button type="button" class="position-absolute  m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
  44.                 <span class="svg-icon svg-icon-2x svg-icon-muted">
  45.                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  46. <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor"/>
  47. <rect x="7" y="15.3137" width="12" height="2" rx="1" transform="rotate(-45 7 15.3137)" fill="currentColor"/>
  48. <rect x="8.41422" y="7" width="12" height="2" rx="1" transform="rotate(45 8.41422 7)" fill="currentColor"/>
  49. </svg>
  51.                 </span>
  52.                 </button>
  53.                 <!--end::Close-->
  54.             </div>
  55.         {% endfor %}
  58.         <div class="row">
  59.             <div class="col-lg-9 col--12">
  60.                 <div class="events-details-right-sidebar">
  61.                     <div class="events-details-img1 img-full">
  62.                         <h3>{{ evenement.titre }}</h3>
  65.                         {% if evenement.imgdetail %}
  66.                             <img  alt="" src="{{asset('uploads/evenement/'~ evenement.imgdetail  )}}">
  67.                         {% elseif evenement.formation %}
  68.                             <img  alt="" src="{{asset('uploads/formation/'~ evenement.formation.affiche  )}}">
  69.                             {% else %}
  70.                         {% endif %}
  74.                     </div>
  75.                     <div class="events-details-all">
  76.                         <div class="events-details-time">
  77.                             <div class="time-icon">
  78.                                 <i class="zmdi zmdi-time"></i>
  79.                             </div>
  80.                             <div class="time-text">
  81.                                 <span>Date Début</span>
  82.                                 <p class="time-mrg">{{ evenement.starttime |date('d-m-Y H:i') }}</p>
  84.                             </div>
  85.                         </div>
  86.                         <div class="events-details-time mrg-xs">
  87.                             <div class="time-icon">
  88.                                 <i class="zmdi zmdi-time"></i>
  89.                             </div>
  90.                             <div class="time-text">
  91.                                 <span>Date Fin</span>
  92.                                 <p class="time-mrg">{{  evenement.endtime |date('d-m-Y H:i') }}</p>
  93. {#                                <p>Monday,July 09,2016</p>#}
  94.                             </div>
  95.                         </div>
  96.                         <div class="events-details-time mrg-xs">
  97.                             <div class="time-icon">
  98.                                 <i class="zmdi zmdi-pin"></i>
  99.                             </div>
  100.                             <div class="time-text">
  101.                                 <span>Adresse</span>
  102.                                 <p class="time-mrg">{{ evenement.adresse }}</p>
  104.                             </div>
  105.                         </div>
  108.                         <div class="events-details-time  mrg-xs">
  109.                             <div class="time-icon">
  110.                                 <i class="zmdi zmdi-money"></i>
  111.                             </div>
  112.                             <div class="time-text">
  113.                                 {% if evenement.prixpromo == null %}
  114.                                     <span>Prix</span>
  115.                                     {% if evenement.formation %}
  116.                                     <p > {{ evenement.formation.prix }}DT</p>
  117. {% endif %}
  118.                                 {% else %}
  119.                                     <span>Prix Promo</span>
  120.                                     <p style="color: green"> {{ evenement.prixpromo }}DT</p>
  122.                                 {% endif %}
  123.                             </div>
  124.                         </div>
  125.                     </div>
  126.                     {% if evenement.lienprog %}
  127.                         <div class="programme-section ">
  128.                             <div class="programme-header d-flex flex-wrap align-items-center justify-content-between gap-3">
  129.                                 <div class="programme-title">
  130.                                     <div class="d-flex align-items-center gap-3">
  131.                                         <div class="programme-icon">
  132.                                             <i class="zmdi zmdi-file-text"></i>
  133.                                         </div>
  134.                                         <div>
  135.                                             <h3 class="mb-0 fw-bold" style="color: #1F3971;">Programme Détaillé</h3>
  136.                                             <p class="text-muted small mb-0">Téléchargez le programme complet de la formation</p>
  137.                                         </div>
  138.                                     </div>
  139.                                 </div>
  141.                                 <div class="programme-download">
  142.                                     <a href="{{ asset('uploads/evenement/' ~ evenement.lienprog) }}"
  143.                                        download
  144.                                        class="btn-download-programme"
  145.                                        title="Télécharger le programme">
  146.                                         <i class="zmdi zmdi-download"></i>
  147.                                         <span>Télécharger le programme</span>
  148.                                         <i class="zmdi zmdi-file-pdf"></i>
  149.                                     </a>
  150.                                 </div>
  151.                             </div>
  154.                         </div>
  156.                         <style>
  157.                             .programme-section {
  159.                                 background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
  160.                                 border-radius: 20px;
  161.                                 padding: 25px 30px;
  162.                                 margin: 30px 0;
  163.                                 border: 1px solid rgba(31,57,113,0.1);
  164.                                 transition: all 0.3s ease;
  165.                             }
  167.                             .programme-section:hover {
  168.                                 box-shadow: 0 10px 30px rgba(31,57,113,0.1);
  169.                                 transform: translateY(-2px);
  170.                             }
  172.                             .programme-icon {
  173.                                 width: 50px;
  174.                                 height: 50px;
  175.                                 background: linear-gradient(135deg, #1F3971, #2d52b0);
  176.                                 border-radius: 15px;
  177.                                 display: flex;
  178.                                 align-items: center;
  179.                                 justify-content: center;
  180.                                 color: white;
  181.                                 font-size: 24px;
  182.                             }
  184.                             .btn-download-programme {
  185.                                 display: inline-flex;
  186.                                 align-items: center;
  187.                                 gap: 12px;
  188.                                 background: linear-gradient(135deg, #FFAE27, #e09500);
  189.                                 color: #1F3971;
  190.                                 padding: 12px 28px;
  191.                                 border-radius: 50px;
  192.                                 text-decoration: none;
  193.                                 font-weight: 600;
  194.                                 font-size: 14px;
  195.                                 transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  196.                                 border: none;
  197.                                 cursor: pointer;
  198.                                 box-shadow: 0 4px 15px rgba(255,174,39,0.2);
  199.                             }
  201.                             .btn-download-programme:hover {
  202.                                 background: linear-gradient(135deg, #e09500, #FFAE27);
  203.                                 transform: translateY(-3px);
  204.                                 box-shadow: 0 8px 25px rgba(255,174,39,0.35);
  205.                                 color: #1F3971;
  206.                             }
  208.                             .btn-download-programme i {
  209.                                 font-size: 20px;
  210.                             }
  212.                             .btn-download-programme i:first-child {
  213.                                 font-size: 18px;
  214.                             }
  216.                             .btn-download-programme i:last-child {
  217.                                 font-size: 22px;
  218.                             }
  220.                             .programme-info {
  221.                                 padding-top: 15px;
  222.                                 border-top: 1px solid rgba(31,57,113,0.1);
  223.                             }
  225.                             .info-item {
  226.                                 display: inline-flex;
  227.                                 align-items: center;
  228.                                 gap: 8px;
  229.                                 color: #6c757d;
  230.                                 font-size: 13px;
  231.                             }
  233.                             .info-item i {
  234.                                 color: #FFAE27;
  235.                                 font-size: 16px;
  236.                             }
  238.                             @media (max-width: 768px) {
  239.                                 .programme-section {
  240.                                     padding: 20px;
  241.                                 }
  243.                                 .programme-header {
  244.                                     flex-direction: column;
  245.                                     text-align: center;
  246.                                 }
  248.                                 .programme-title {
  249.                                     width: 100%;
  250.                                 }
  252.                                 .programme-title .d-flex {
  253.                                     justify-content: center;
  254.                                 }
  256.                                 .btn-download-programme {
  257.                                     width: 100%;
  258.                                     justify-content: center;
  259.                                 }
  261.                                 .programme-info {
  262.                                     justify-content: center;
  263.                                 }
  264.                             }
  265.                         </style>
  266.                     {% endif %}
  267.                     <div class="about-lectures">
  268.                         <h3>Description</h3>
  270.                             {{ evenement.description|raw}}
  271.                                   </div>
  272.                     <br>
  273.                     {% if sections  != null %}
  274.                         <div class="course-duration " style="margin-bottom: 20px">
  275.                             <div class="duration-title">
  276.                                 <div class="text"><span>Sections</span> <span class="text-right"> Durée</span></div>
  277.                             </div>
  278.                             <div class="duration-text">
  279.                                 {%  for section  in sections %}
  280.                                     <div class="text"><span >{{ section.titre }}</span> <span class="text-right">{{ section.duree }}</span></div>
  282.                                 {% endfor %}
  283.                             </div>
  284.                         </div>
  285.                     {% endif %}
  287.                     {% if evenement.imgprog %}
  288. {#                        {{ evenement.imgprog  }}#}
  289.                     <div class="events-details-img1 img-full">
  291.                             <img  alt="" src="{{asset('uploads/evenement/'~ evenement.imgprog )}}">
  293.                     </div>
  294.                     {% endif %}
  298.                     <div class=" yellow-bg">
  299.                         <div class="contact-form-wrap">
  300.                             <h2 class="contact-title">Formulaire Inscription</h2>
  301.                             {{ form_start(form) }}
  302.                                 <div class="row">
  303.                                     <div class="col-6">
  304.                                         <div class="contact-form-style mb-20">
  306.                                             {{ form_widget(form.nom,{'attr':{'class':'form-control form-control-solid','rows':'3', 'placeholder':"Nom*",'required':'true'}}) }}
  308.                                         </div>
  309.                                     </div>
  310.                                     <div class="col-6">
  311.                                         <div class="contact-form-style mb-20">
  312.                                             {{ form_widget(form.prenom,{'attr':{'class':'form-control form-control-solid','rows':'3', 'placeholder':"Prénom*",'required':'true'}}) }}
  315.                                         </div>
  316.                                     </div>
  317.                                     <div class="col-12">
  318.                                         <div class="contact-form-style mb-20">
  319.                                             {{ form_widget(form.email,{'attr':{'class':'form-control form-control-solid','rows':'3', 'placeholder':"Email*",'required':'true'}}) }}
  320.                                         </div>
  321.                                     </div>
  322.                                     <div class="col-6">
  323.                                         <div class="contact-form-style mb-20">
  324.                                             {{ form_widget(form.phone,{'attr':{'class':'form-control form-control-solid','rows':'3', 'placeholder':"Téléphone*",'required':'true'}}) }}
  325.                                         </div>
  326.                                     </div>
  327.                                     <div class="col-6">
  328.                                         <div class="contact-form-style mb-20">
  329.                                             {{ form_widget(form.whatsapp,{'attr':{'class':'form-control form-control-solid','rows':'3', 'placeholder':"WhatsApp"}}) }}
  330.                                         </div>
  331.                                     </div>
  332.                                     <div class="col-12">
  333.                                         <div class="contact-form-style mb-20">
  334.                                             {{ form_widget(form.adresse,{'attr':{'class':'form-control form-control-solid','rows':'3', 'placeholder':"Adresse*",'required':'true'}}) }}
  335.                                         </div>
  336.                                     </div>
  338.                                     <div class="col-12">
  339.                                         <div class="form-check form-check-inline">
  342.                                             {% for op in form.mode %}
  343.                                                 <label class="form-check-label">
  344.                                                     {{ form_errors(op) }}
  345.                                                     {{ form_widget(op ,{'attr':{'class':'form-check-input','rows':'2' }}) }}
  346.                                                     <h4 style="color: white">{{ op.vars.label }}</h4>
  347.                                                     &nbsp;&nbsp;&nbsp;&nbsp; </label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  348.                                             {% endfor %}
  349.                                         </div>
  350.                                     </div>
  352.                                     <div class="mb-3 d-flex align-items-center flex-wrap gap-3">
  353.                                         {{ form_label(form.disponibilte, 'Disponibilité', {
  354.                                             'label_attr': {'class': 'form-label mb-0 me-3 text-gray fs-6'}
  355.                                         }) }}
  357.                                         {% for op in form.disponibilte %}
  358.                                             <div class="form-check form-check-inline mb-0">
  359.                                                 {{ form_widget(op, {'attr': {'class': 'form-check-input'}}) }}
  360.                                                 {{ form_label(op, null, {'label_attr': {'class': 'form-check-label ms-1 mb-0 text-light fs-6'}}) }}
  361.                                                 {{ form_errors(op) }}
  362.                                             </div>
  363.                                         {% endfor %}
  364.                                     </div>
  368.                                     <div class="col-12">
  369.                                         <div class="contact-form-style mb-20">
  370.                                             <input name="idvoucher" class="form-control form-control-solid" placeholder="Voucher si vous avez">
  371.                                         </div>
  372.                                     </div>
  373.                                     <div class="col-md-12">
  375.                                         <div class="contact-form-style">
  376.                                             {{ form_widget(form.message,{'attr':{'class':'form-control form-control-solid','rows':'3', 'placeholder':"Message*",'required':'true'}}) }}</div>
  377.                                     </div>
  378.                                     <div class="col-md-6">
  381.                                             <div style="width: 100px;" id="captcha" class="g-recaptcha"
  382.                                                  data-sitekey="6LeIOc0lAAAAAHX9N25sC0hFU8IjprSY1GH7cVOp"
  383.                                                   data-callback="recaptchaCallback">
  385.                                             </div>
  386.                                             </div>
  388.                                             <button class="button-default"
  389.                                                     disabled
  390.                                                     id="button-confirm" type="submit"><span>Valider </span></button>
  392.                                 </div>
  393.                             {{ form_end(form) }}
  394.                             <p class="form-messege"></p>
  395.                         </div>
  396.                     </div>
  399. {#                    <div class="event-content">#}
  400. {#                        <h3 class="content2">Event Content</h3>#}
  401. {#                        <ul>#}
  402. {#                            <li>Over 40 lectures and 60 hours of content</li>#}
  403. {#                            <li>Live Project End to End Software Testing Training Included</li>#}
  404. {#                            <li>Information packed practical training starting from basics to advanced testing techniques.</li>#}
  405. {#                            <li>Course content designed by considering current software testing technology and the job market.</li>#}
  406. {#                            <li>Best suitable for beginners to advanced level users and who learn faster when demonstrated.</li>#}
  407. {#                            <li>Practical assignments at the end of every session.</li>#}
  408. {#                        </ul>#}
  409. {#                    </div>#}
  410. {#                    <div class="event-participants">#}
  411. {#                        <h3 class="content2">Event Participants</h3>#}
  412. {#                        <div class="row">#}
  413. {#                            <div class="col-lg-3 col-md-3 col-12">#}
  414. {#                                <div class="participants-details text-center img-full mb-30">#}
  415. {#                                    <a href="#">#}
  416. {#                                        <img src="img/teacher/l-1.jpg" alt="">#}
  417. {#                                    </a>#}
  418. {#                                    <h3>T Rayed</h3>#}
  419. {#                                    <p>Chif Principal</p>#}
  420. {#                                </div>#}
  421. {#                            </div>#}
  422. {#                            <div class="col-lg-3 col-md-3 col-12">#}
  423. {#                                <div class="participants-details text-center img-full mb-30">#}
  424. {#                                    <a href="#">#}
  425. {#                                        <img src="img/teacher/l-2.jpg" alt="">#}
  426. {#                                    </a>#}
  427. {#                                    <h3>S Tasnim</h3>#}
  428. {#                                    <p>Head Teacher</p>#}
  429. {#                                </div>#}
  430. {#                            </div>#}
  431. {#                            <div class="col-lg-3 col-md-3 col-12">#}
  432. {#                                <div class="participants-details text-center img-full mb-30">#}
  433. {#                                    <a href="#">#}
  434. {#                                        <img src="img/teacher/l-3.jpg" alt="">#}
  435. {#                                    </a>#}
  436. {#                                    <h3>FH Shuvo</h3>#}
  437. {#                                    <p>Chif Principal</p>#}
  438. {#                                </div>#}
  439. {#                            </div>#}
  440. {#                            <div class="col-lg-3 col-md-3 col-12">#}
  441. {#                                <div class="participants-details text-center img-full mb-30">#}
  442. {#                                    <a href="#">#}
  443. {#                                        <img src="img/teacher/l-4.jpg" alt="">#}
  444. {#                                    </a>#}
  445. {#                                    <h3>Lalen</h3>#}
  446. {#                                    <p>Head Teacher</p>#}
  447. {#                                </div>#}
  448. {#                            </div>#}
  449. {#                        </div>#}
  450. {#                    </div>#}
  454.                 </div>
  455.             </div>
  456.             <div class="col-lg-3">
  457.                 <div class="sidebar-widget">
  458.                     <div class="single-sidebar-widget">
  459.                         <h4 class="title">Prochaines Sessions</h4>
  460.                         <div class="recent-content">
  461.                             {% for eve in evenements|sort|reverse %}
  464. {#                            {% if evenement.id != eve.id %}#}
  465.                                 <div class="recent-content-item">
  466.                                     <a href="{{ path('app_details_session',{'slug':eve.slug}) }}">
  467.                                         {% if eve.imgdetail %}
  468.                                             <img  alt="" style="width: 70px;height: 65px"  src="{{asset('uploads/evenement/'~ eve.imgdetail  )}}">
  469.                                         {% elseif eve.formation %}
  470.                                             <img  alt="" style="width: 70px;height: 65px"  src="{{asset('uploads/formation/'~ eve.formation.affiche  )}}">
  471.                                             {% else %}
  472.                                         {% endif %}
  476.                                     </a>
  477.                                     <div class="recent-text">
  478.                                         <h4><a href="{{ path('app_details_session',{'slug':eve.slug}) }}">{{ eve.titre }}</a></h4>
  479.                                         <div class="single-item-comment-view">
  480.                                             <span><i class="zmdi zmdi-time"></i>{{ eve.starttime |date('d M H:i') }}</span>
  481.                                             <span><i class="zmdi zmdi-time"></i>{{ eve.endtime |date('d M H:i') }}</span>
  483.                                         </div>
  485.                                     </div>
  486.                                 </div>
  488. {#                            {% endif %}#}
  491.                             {% endfor %}
  495.                         </div>
  496.                     </div>
  498.                     <div class="single-sidebar-widget">
  499.                         <h4 class="title">Anciennes Sessions</h4>
  500.                         <div class="recent-content">
  501.                             {% for eve in ancienevents|sort|reverse %}
  504.                                 {% if evenement.id != eve.id %}
  505.                                     <div class="recent-content-item">
  506.                                         <a href="{{ path('app_details_session',{'slug':eve.slug}) }}">
  507.                                             {% if eve.imgdetail %}
  508.                                                 <img  alt="" style="width: 70px;height: 65px"  src="{{asset('uploads/evenement/'~ eve.imgdetail  )}}">
  509.                                             {% elseif eve.formation %}
  510.                                                 <img  alt="" style="width: 70px;height: 65px"  src="{{asset('uploads/formation/'~ eve.formation.affiche  )}}">
  511.                                             {% else %}
  512.                                             {% endif %}
  516.                                         </a>
  517.                                         <div class="recent-text">
  518.                                             <h4><a href="{{ path('app_details_session',{'slug':eve.slug}) }}">{{ eve.titre }}</a></h4>
  519.                                             <div class="single-item-comment-view">
  520.                                                 <span><i class="zmdi zmdi-time"></i>{{ eve.starttime |date('d M H:i') }}</span>
  521.                                                 <span><i class="zmdi zmdi-time"></i>{{ eve.endtime |date('d M H:i') }}</span>
  523.                                             </div>
  525.                                         </div>
  526.                                     </div>
  528.                                 {% endif %}
  531.                             {% endfor %}
  535.                         </div>
  536.                     </div>
  537.                     <div class="single-sidebar-widget">
  538.                         <h4 class="title">Dernières Actualités</h4>
  539.                         <div class="recent-content">
  540.                             {% for actualite in actualites %}
  541.                             <div class="recent-content-item">
  542.                                 <a href="{{ path('app_details_actualite',{'slug':actualite.slug}) }}"><img src="{{asset('uploads/actualite/'~ actualite.image  )}}" style="width: 70px;height: 65px" alt=""></a>
  543.                                 <div class="recent-text">
  544.                                     <h4><a href="{{ path('app_details_actualite',{'slug':actualite.slug}) }}">{{ actualite.titre }}</a></h4>
  545.                                     <a class="single-item-comment-view" style="height: 20px;margin-bottom: 0px;color: darkblue;font-size: 13px"
  546.                                        href="{{ path('app_details_actualite',{'slug':actualite.slug}) }}"
  547.                                     >Lire la suite</a>
  548.                                     <div class="single-item-comment-view">
  549.                                         <span><i class="zmdi zmdi-eye"></i>{{ actualite.nbvue }}</span>
  550.                                         <span><i class="zmdi zmdi-comments"></i>{{ actualite.nbcommentaire }}</span>
  551.                                     </div>
  553.                                 </div>
  554.                             </div>
  555. {% endfor %}
  556.                         </div>
  557.                     </div>
  558.                     <div class="single-sidebar-widget">
  559.                         <div class="widget-banner img-full">
  560.                             <a href="#"><img src="img/banner/event-banner1.jpg" alt=""></a>
  561.                         </div>
  562.                     </div>
  564.                 </div>
  565.             </div>
  566.         </div>
  567.     </div>
  568. </div>
  569. <!--End of Event Area-->
  570.     {# Dans votre formulaire d'inscription, ajoutez ce script #}
  572.     <script>
  573.         document.addEventListener('DOMContentLoaded', function() {
  574.             const emailInput = document.querySelector('input[name="inscrit_session[email]"]');
  575.             const voucherInput = document.querySelector('input[name="idvoucher"]');
  576.             let couponChecked = false;
  578.             if (emailInput && voucherInput) {
  579.                 emailInput.addEventListener('blur', function() {
  580.                     const email = this.value;
  581.                     const slug = '{{ evenement.slug }}';
  583.                     if (email && email.includes('@') && !couponChecked) {
  584.                         // Afficher un loader
  585.                         voucherInput.placeholder = 'Vérification en cours...';
  586.                         voucherInput.disabled = true;
  588.                         fetch('{{ path("app_check_available_coupon") }}', {
  589.                             method: 'POST',
  590.                             headers: {
  591.                                 'Content-Type': 'application/json',
  592.                             },
  593.                             body: JSON.stringify({
  594.                                 email: email,
  595.                                 slug: slug
  596.                             })
  597.                         })
  598.                             .then(response => response.json())
  599.                             .then(data => {
  600.                                 if (data.success && data.coupon_code) {
  601.                                     voucherInput.value = data.coupon_code;
  602.                                     couponChecked = true;
  604.                                     // Afficher une notification
  605.                                     showNotification(
  606.                                         '🎉 Bonne nouvelle !',
  607.                                         `Un coupon de réduction de ${data.reduction}% a été automatiquement appliqué à votre inscription.`,
  608.                                         'success'
  609.                                     );
  611.                                     // Ajouter une classe de succès au champ
  612.                                     voucherInput.classList.add('is-valid');
  613.                                     voucherInput.style.borderColor = '#28a745';
  614.                                 } else {
  615.                                     voucherInput.placeholder = 'Voucher si vous avez';
  616.                                     showNotification(
  617.                                         'ℹ️ Information',
  618.                                         'Aucun coupon disponible pour le moment. Vous pouvez toujours en utiliser un manuellement.',
  619.                                         'info'
  620.                                     );
  621.                                 }
  622.                                 voucherInput.disabled = false;
  623.                             })
  624.                             .catch(error => {
  625.                                 console.error('Erreur:', error);
  626.                                 voucherInput.disabled = false;
  627.                                 voucherInput.placeholder = 'Voucher si vous avez';
  628.                             });
  629.                     }
  630.                 });
  631.             }
  633.             function showNotification(title, message, type) {
  634.                 // Créer la notification
  635.                 const notification = document.createElement('div');
  636.                 notification.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 end-0 m-3`;
  637.                 notification.style.zIndex = '9999';
  638.                 notification.style.minWidth = '300px';
  639.                 notification.innerHTML = `
  640.             <strong>${title}</strong><br>
  641.             <small>${message}</small>
  642.             <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  643.         `;
  644.                 document.body.appendChild(notification);
  646.                 // Auto-supprimer après 5 secondes
  647.                 setTimeout(() => {
  648.                     notification.remove();
  649.                 }, 5000);
  650.             }
  651.         });
  652.     </script>
  654.     <style>
  655.         .is-valid {
  656.             border-color: #28a745 !important;
  657.             background-color: #f0fff0 !important;
  658.         }
  659.     </style>
  660. {% endblock %}