templates/front/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {# {% block title %}{% endblock %} #}
  4. {% block stylesheets %}
  5. <link rel="stylesheet" href="{{ asset('assets/css/slider.css') }}?v=1.0.0"/>
  6. <!-- Link Swiper's CSS -->
  7. <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  8. <style>
  9. .aniBG {
  10.     position: fixed;
  11.     top:0;
  12.     left:0;
  13.     width:100%;
  14.     height:100%;
  15.     /*background-size: contain;*/
  16.     background-size: 50%;
  17.     background-position: center;
  18.     opacity: 0.3;
  19.     z-index: 1;
  20. }
  21. .aniBG.type_signs {
  22.     background-image:url('{{ asset('assets/img/bg/signs.png') }}');
  23. }
  24. .aniBG.type_auto {
  25.     background-image:url('{{ asset('assets/img/bg/car.png') }}');
  26.     animation: aniBGAnimAuto 6s infinite;
  27. }
  28. .aniBG.type_code {
  29.     background-image:url('{{ asset('assets/img/bg/licence.png') }}');
  30.     animation: aniBGAnimCode 6s infinite;
  31. }
  32. .aniBG.type_moto {
  33.     background-image:url('{{ asset('assets/img/bg/moto.png') }}');
  34.     animation: aniBGAnimMoto 6s infinite;
  35. }
  37. body.type_moto .aniBG.type_code, body.type_moto .aniBG.type_auto,
  38. body.type_code .aniBG.type_auto, body.type_code .aniBG.type_moto,
  39. body.type_auto .aniBG.type_code, body.type_auto .aniBG.type_moto {
  40.     display: none;
  41. }
  43. .homeSubType {
  44.     display: none;
  45. }
  47. .remainingPlaces {
  48.     position: absolute;
  49.     right: -1px;
  50.     bottom: 0px;
  51.     line-height: initial;
  52.     background: white;
  53.     text-align: center;
  54.     padding: 3px 9px;
  55.     font-size: 11px;
  56.     border-radius: 3px 0 0 3px;
  57.     color: #c61c61;
  58. }
  60. @keyframes aniBGAnimAuto {
  61.     0% {
  62.         opacity:0;
  63.     }
  64.     25% {
  65.         opacity:1;
  66.     }
  67.     50% {
  68.         opacity:0;
  69.     }
  70. }
  72. @keyframes aniBGAnimCode {
  73.     0% {
  74.         opacity:0;
  75.     }
  76.     25% {
  77.         opacity:0;
  78.     }
  79.     50% {
  80.         opacity:1;
  81.     }
  82.     75% {
  83.         opacity:0;
  84.     }
  85. }
  87. @keyframes aniBGAnimMoto {
  88.     0% {
  89.         opacity:0;
  90.     }
  91.     50% {
  92.         opacity:0;
  93.     }
  94.     75% {
  95.         opacity:1;
  96.     }
  97.     100% {
  98.         opacity:0;
  99.     }
  100. }
  102. .homeSubType img {
  103.     width: 80%;
  104.     background: #0a58ca;
  105.     border-radius: 10px;
  106.     padding: 15%;
  107.     transform: translate(0, 250%);
  108.     transition-duration:2s;
  109. }
  111. .homeSubType button {
  112.     width: 27%;
  113.     text-align: center;
  114. }
  116. .homeSubType button span {
  117.     margin-top: 20px;
  118.     display: block;
  119.     font-weight: bold;
  120.     font-size: 23px;
  121. }
  123. .homeSubType_inner {
  124.     display: flex;
  125.     align-items: center;
  126.     justify-content: center;
  127.     padding: 40px 0px;
  128.     overflow: hidden;
  129. }
  131. body[class*="type_"] .homeSubType img {
  132.     transform: translate(0, 0);
  133. }
  135. body.type_auto .homeSubType button:last-child img {
  136.     transition-delay: 0.5s;
  137. }
  139. body.type_code .homeSubType button:first-child img {
  140.     transition-delay: 1s;
  141. }
  143. body.type_code .homeSubType button:last-child img {
  144.     transition-delay: 1.5s;
  145. }
  147. #homeChoosedType_auto .auto,
  148. #homeChoosedType_auto .manuelle,
  149. #homeChoosedType_code .stage,
  150. #homeChoosedType_code .online {
  151.     opacity:0;
  152.     position: absolute;
  153.     width: 18%;
  154.     background: #c61e61;
  155.     border-radius: 7px;
  156.     padding: 2%;
  157.     z-index: 1;
  158.     top: 1%;
  159.     margin-left: -2%;
  160. }
  161. .homeChoosedType {
  162.     background: #36165a;
  163.     width: 50%;
  164.     margin: auto;
  165.     padding: 0 15%;
  166.     border-radius: 0 0px 10px 10px;
  167.     position: relative;
  168.     display: none;
  169. }
  171. div#homeChoosedType_auto img.car,
  172. div#homeChoosedType_code img.code,
  173. div#homeChoosedType_moto img.moto {
  174.     width: 100%;
  175. }
  177. #homeChoosedType_auto .auto,
  178. #homeChoosedType_auto .manuelle,
  179. #homeChoosedType_code .stage,
  180. #homeChoosedType_moto .moto_a2,
  181. #homeChoosedType_code .online {
  182.     animation: animHomeChoosedTypeIcon 10s infinite;
  183. }
  185. #homeChoosedType_moto .moto_a2 {
  186.     position: absolute;
  187.     z-index: 2;
  188.     background: #c61e61;
  189.     color: #fff;
  190.     border-radius: 7px;
  191.     padding: 1%;
  192.     text-align: center;
  193.     font-weight: bold;
  194.     font-size: 2.2em;
  195. }
  197. @keyframes animHomeChoosedTypeIcon {
  198.     0% {
  199.         transform: translate(0, 0);
  200.     }
  201.     20% {
  202.         transform: translate(10px, 7px);
  203.     }
  204.     80% {
  205.         transform: translate(-10px, 3px);
  206.     }
  207.     100% {
  208.         transform: translate(0px, 0px);
  209.     }
  210. }
  212. .homeChoosedType i.close {
  213.     position: absolute;
  214.     z-index: 2;
  215.     background: #fff;
  216.     right: -3px;
  217.     font-size: 2em;
  218.     padding: 0 19px;
  219.     border-radius: 3px;
  220.     color: #36165a;
  221.     font-weight: bold;
  222.     cursor: pointer;
  223. }
  225. .subType_cta {
  226.     text-align: center;
  227.     padding-top: 30px;
  228.     font-weight: bold;
  229.     font-size: 23px;
  230.     animation: focus-in-expand 2s;
  231. }
  233. @media all and (max-width:640px){
  234.     .homeChoosedType i.close {
  235.         font-size: 1em;
  236.         padding: 0 9px;
  237.     }
  238.     #homeChoosedType_moto .moto_a2 {
  239.         font-size: 1.2em;
  240.     }
  241.     .homeChoosedType {
  242.         width: 60%;
  243.     }
  244.     .subType_cta {
  245.         padding-top: 20px;
  246.         font-size: 19px;
  247.     }
  248.     .homeSubType_inner {
  249.         padding: 20px 0px;
  250.     }
  251.     .homeSubType button {
  252.     }
  253.     .homeSubType button span {
  254.         font-size: 17px;
  255.     }
  256.     .between {
  257.         text-align: center;
  258.         font-size: 13px;
  259.     }
  260.     #homeSubType_code button {
  261.         width: 50%;
  262.     }
  263.     #home_examDates .infWrp {
  264.         flex-direction: column;
  265.         width: 100%;
  266.         padding: 10px;
  267.     }
  268.     #home_examDates .swiper-slide .btn {
  269.         width: 100%;
  270.         border: none !important;
  271.     }
  272.     #home_examDates .centerName, #home_examDates .date {
  273.         line-height: normal;
  274.     }
  275. }
  278. @-webkit-keyframes focus-in-expand {
  279.   0% {
  280.     letter-spacing: -0.5em;
  281.     -webkit-filter: blur(12px);
  282.             filter: blur(12px);
  283.     opacity: 0;
  284.   }
  285.   100% {
  286.     -webkit-filter: blur(0px);
  287.             filter: blur(0px);
  288.     opacity: 1;
  289.   }
  290. }
  291. @keyframes focus-in-expand {
  292.   0% {
  293.     letter-spacing: -0.5em;
  294.     -webkit-filter: blur(12px);
  295.             filter: blur(12px);
  296.     opacity: 0;
  297.   }
  298.   100% {
  299.     -webkit-filter: blur(0px);
  300.             filter: blur(0px);
  301.     opacity: 1;
  302.   }
  303. }
  305. .no_pack_img_wrp {
  306.     padding: 12%;
  307.     background: #e2e2e2;
  308. }
  310. .no_pack_img_wrp img {
  311.     width: 50% !important;
  312.     margin: auto;
  313.     display: block;
  314. }
  316. #home_boost_wrp .slidecontainer {
  317.   width: 100%; /* Width of the outside container */
  318.   height: 25px;
  319. }
  321. /* The slider itself */
  322. #home_boost_wrp .slider {
  323.     appearance: none;
  324.     width: 100%;
  325.     height: 15px;
  326.     outline: none;
  327.     opacity: 0.7;
  328.     -webkit-appearance: none;
  329.     -webkit-transition: .2s;
  330.     transition: opacity .2s;
  331.     border-radius: 10px;
  332.     background: repeating-linear-gradient(to right, red 0%, blue 50%, red 100%);
  333.     width: 100%;
  334.     background-size: 200% auto;
  335.     background-position: 0 100%;
  336.     animation: gradientAnimation 2s infinite;
  337.     animation-fill-mode: forwards;
  338.     animation-timing-function: linear;
  339.     cursor: grab;
  340.     /*
  341.     background: #d3d3d3;
  342.     -webkit-transition: .2s;
  343.     transition: opacity .2s;
  344.     border-radius: 10px;*/
  345. }
  347. /* Mouse-over effects */
  348. #home_boost_wrp .slider:hover {
  349.   opacity: 1; /* Fully shown on mouse-over */
  350. }
  352. #home_boost_wrp .slider::-webkit-slider-thumb {
  353.   -webkit-appearance: none;
  354.   appearance: none;
  355.   width: 32px;
  356.   height: 32px;
  357.   background: #36165a;
  358.   cursor: pointer;
  359.   border-radius: 50%;
  360.   border: 3px solid #fff;
  361. }
  363. #home_boost_wrp .slider::-moz-range-thumb {
  364.   width: 32px;
  365.   height: 32px;
  366.   background: #36165a;
  367.   cursor: pointer;
  368.   border-radius: 50%;
  369.   border: 3px solid #fff;
  370. }
  373. #home_boost_wrp {
  374.     padding-bottom: 30px;
  375. }
  377. #home_examDates .infWrp {
  378.     width: calc(100% - 78px);
  379.     display: flex;
  380.     float: left;
  381.     justify-content: center;
  382.     position: relative;
  383. }
  385. #home_examDates .date {
  386.     margin-left: 20px;
  387. }
  389. #home_examDates .centerName {
  390.     margin-left: 10px;
  391. }
  393. @keyframes home_boost_wrpSliderAnim {
  394.     0%{
  395.         transform: scale(1);
  396.     }
  397.     70%{
  398.         transform: scale(1);
  399.     }
  400.     75%{
  401.         transform: scale(0.5);
  402.     }
  403.     80%{
  404.         transform: scale(1);
  405.     }
  406.     85%{
  407.         transform: scale(0.5);
  408.     }
  409.     90%{
  410.         transform: scale(1);
  411.     }
  412.     100%{
  413.         transform: scale(1);
  414.     }
  415. }
  417. #home_boost_wrp h2 {
  418.     text-align: center;
  419.     margin: 40px auto 20px;
  420. }
  422. #home_boost_wrp, #home_boost_choices > li {
  423.     display: none;
  424. }
  426. #home_examDates .swiper-slide.full {
  427.     background: gray;
  428. }
  430. #home_examDates .swiper-slide.full .btn {
  431.     background: #3d3d3d;
  432. }
  434. ul#home_boost_choices {
  435.     text-align: center;
  436.     list-style: none;
  437.     padding: 0;
  438. }
  440. ul#home_boost_choices ul {
  441.     padding: 0;
  442.     list-style: none;
  443. }
  445. img.boost_icn {
  446.     background: #2196f3;
  447.     border-radius: 7px;
  448.     margin-bottom: 10px;
  449.     margin-top: 20px;
  450.     width: 90px;
  451.     padding: 17px;
  452.     animation: home_boost_wrpSliderAnim 3s infinite;
  453.     -moz-animation: home_boost_wrpSliderAnim 3s infinite;
  454. }
  456. ul#home_boost_choices .infos {
  457.     font-size: 13px;
  458. }
  460. button#home_boost_confirm {
  461.     margin: auto;
  462.     display: block;
  463.     font-weight: bold;
  464.     text-transform: uppercase;
  465.     font-size: 23px;
  466.     color: #989898;
  467. }
  468. .aniBG,
  469. #page_top_wrp,
  470. #page_bottom_wrp {
  471.     /*display: none;*/
  472. }
  473. div#updatingQuestionsModal .modal-body {background: red;color: #fff;}
  475. h5#updatingQuestionsModalLabel {
  476.     color: red;
  477. }
  478. </style>
  479. {% endblock %}
  481. {% block pageTop %}
  482.     <p>{{"Passez votre examen en 1 jour avec ESR Auto Moto"|trans}}</p>
  483. {% endblock %}
  485. {% block body %}
  486. <!-- Swiper -->
  487. <div id="home_slider" class="swiper mySwiper">
  488.     <div class="swiper-wrapper">
  489.         <div class="swiper-slide">
  490.             <div class="block block_voiture">
  491.                 {{"Voiture"|trans}}
  492.                 <button data-type="auto" type="button" class="btn choose_type_btn">{{"Choisir"|trans}}</button>
  493.             </div>
  494.         </div>
  495.         <div class="swiper-slide codeSlide">
  496.             <div class="block block_code">
  497.                 {{"Code de la route"|trans}}
  498.                 <button data-type="code" type="button" class="btn choose_type_btn">{{"Choisir"|trans}}</button>
  499.             </div>
  500.         </div>
  501.         <div class="swiper-slide">
  502.             <div class="block block_moto">
  503.                 {{"Moto"|trans}}
  504.                 <button data-type="moto" type="button" class="btn choose_type_btn">{{"Choisir"|trans}}</button>
  505.             </div>
  506.         </div>
  507.     </div>
  508.     <div class="swiper-button-next"></div>
  509.     <div class="swiper-button-prev"></div>
  510. </div>
  511. <div class="container">
  512.     <div id="has_code_wrp">
  513.         <h2 id="has_code_wrp_title">{{"Avez-vous déjà votre code ?"|trans}}</h2>
  514.         <div class="inner">
  515.             <button type="button" data-type="yes" class="btn">{{"Oui"|trans}}</button>
  516.             <button type="button" data-type="no" class="btn">{{"Non"|trans}}</button>
  517.         </div>
  518.     </div>
  519.     <div id="needCodeFirstWarning">{{"Vous devez passer votre code en premier"|trans}}</div>
  520.     <div id="homeChoosedType_auto" class="homeChoosedType">
  521.         <i class="close">x</i>
  522.         <img class="auto" src="{{ asset('assets/img/icons/automatic-transmission.png') }}" />
  523.         <img class="manuelle" src="{{ asset('assets/img/icons/manual-transmission.png') }}" />
  524.         <img class="car" src="{{ asset('assets/img/icons/eco-car.png') }}" />
  525.     </div>
  526.     <div id="homeChoosedType_code" class="homeChoosedType">
  527.         <i class="close">x</i>
  528.         <img class="stage" src="{{ asset('assets/img/icons/fast.png') }}" />
  529.         <img class="online" src="{{ asset('assets/img/icons/laptop.png') }}" />
  530.         <img class="code" src="{{ asset('assets/img/icons/driving-license.png') }}" />
  531.     </div>
  532.     <div id="homeChoosedType_moto" class="homeChoosedType">
  533.         <i class="close">x</i>
  534.         <div class="moto_a2">A2</div>
  535.         <img class="moto" src="{{ asset('assets/img/icons/motorbike.png') }}" />
  536.     </div>
  537.     <div id="homeSubType_auto" class="homeSubType">
  538.         <div class="subType_cta">{{"Que la force soit avec vous !"|trans}}</div>
  539.         <div class="homeSubType_inner">
  540.             <button type="button" data-subType="auto" class="btn">
  541.                 <img src="{{ asset('assets/img/icons/automatic-transmission.png') }}" />
  542.                 <span>{{"Automatique"|trans}}</span>
  543.             </button>
  544.             <div class="between">{{"Ou bien"|trans}}</div>
  545.             <button type="button" data-subType="manuelle" class="btn">
  546.                 <img src="{{ asset('assets/img/icons/manual-transmission.png') }}" />
  547.                 <span>{{"Manuel"|trans}}</span>
  548.             </button>
  549.         </div>
  550.     </div>
  551.     <div id="homeSubType_code" class="homeSubType">
  552.         <div class="subType_cta">{{"Passez votre examen en 1 jour !"|trans}}</div>
  553.         <div class="homeSubType_inner">
  554.             <button type="button" data-subType="stage" class="btn">
  555.                 <img src="{{ asset('assets/img/icons/fast.png') }}" />
  556.                 <span>{{"Stage code 1 jour"|trans}}</span>
  557.             </button>
  558.             <div class="between">{{"Ou bien"|trans}}</div>
  559.             <button type="button" data-subType="online" class="btn">
  560.                 <img src="{{ asset('assets/img/icons/laptop.png') }}" />
  561.                 <span>{{"Code en ligne"|trans}}</span>
  562.             </button>
  563.         </div>
  564.     </div>
  565.     <div id="home_boost_wrp">
  566.         <h2 id="home_boost_title">{{"Choisissez votre Boost"|trans}}</h2>
  567.         <div class="slidecontainer">
  568.             <input type="range" min="1" max="3" value="3" step="1" class="slider" id="home_boost_range">
  569.         </div>
  570.         <ul id="home_boost_choices">
  571.             <li data-level="1">
  572.                 <img src="{{ asset('assets/img/icons/forward.png')}}" class="boost_icn" />
  573.                 <h4>{{"C. Libre"|trans}}</h4>
  574.                 <ul class="infos">
  575.                     {# <li>Examen après 6 mois</li> #}
  576.                     <li>{{"Envie de programmer votre passage à l'examen, et de prendre votre temps ?<br />Ces formations sont faites pour vous. Au moyen d'un suivi personnalisé, vous apprendrez à votre rythme et selon vos attentes. Les premières leçons seront programmées pour environ 1an après inscription."|trans|raw}}</li>
  577.                 </ul>
  578.             </li>
  579.             <li data-level="2">
  580.                 <img src="{{ asset('assets/img/icons/fast-forward.png')}}" class="boost_icn" />
  581.                 <h4>{{"Accéléré"|trans}}</h4>
  582.                 <ul class="infos">
  583.                     {# <li>Examen après 2 mois</li> #}
  584.                     <li>{{"Envie de programmer votre passage à l'examen sur votre agenda ?<br />Ces formations sont faites pour vous. Au moyen d'un suivi personnalisé, vous apprendrez à votre rythme en prévoyant bien à l'avance vos disponibilités. Les premières leçons seront programmées pour environ 2 mois après inscription."|trans|raw}}</li>
  585.                 </ul>
  586.             </li>
  587.             <li data-level="3">
  588.                 <img src="{{ asset('assets/img/icons/boost.png')}}" class="boost_icn" />
  589.                 <h4>{{"Super accéléré"|trans}}</h4>
  590.                 <ul class="infos">
  591.                     {# <li>Examen avant 2 mois</li> #}
  592.                     <li>{{"Vous êtes pressé de passer votre permis ?<br />Ces formations sont faites pour vous ! Vous progressez en un temps record, avec un programme complet spécialement conçu pour vous et ce format. Une date vous est directement donnée, et votre formation commence maintenant."|trans|raw}}</li>
  593.                 </ul>
  594.             </li>
  595.         </ul>
  596.         <button type="button" id="home_boost_confirm" class="btn">{{"Valider"|trans}}</button>
  597.     </div>
  598.     <div id="home_examDates_wrp">
  599.         <h2 id="home_examDates_title">{{"Dates d'examen"|trans}}</h2>
  600.         <div class="nav_wrp">
  601.             <div class="swiper-button-next"></div>
  602.             <div class="swiper-button-prev"></div>
  603.         </div>
  604.         <div class="monthChooser">{{"Mois"|trans}}</div>
  605.         <div id="home_examDates">
  606.             <div class="swiper-wrapper">
  607.                 {# {% for examDate in examDates %}
  608.                     <div class="swiper-slide" data-date="{{examDate.date|date('Y-m-d')}}">
  609.                         {{examDate.date|date('d-m-Y')}}
  610.                         <div class="btn choose_ExamDate_btn">Choisir</div>
  611.                     </div>
  612.                 {% endfor %} #}
  613.             </div>
  614.         </div>
  615.         <div id="examDates_statuts">
  616.             <div class="free">{{"Libre"|trans}}</div>
  617.             <div class="temporary">{{"Temporaire"|trans}}</div>
  618.             <div class="full">{{"Saturée"|trans}}</div>
  619.         </div>
  620.     </div>
  621.     <div id="home_packs_wrp">
  622.         <h2 id="home_packs_title">{{"Packs"|trans}}</h2>
  623.         <ul id="home_packs_list">
  624.             {% for pack in packs %}
  625.                 <li data-id="{{pack.id}}" class="pack pack_id_{{pack.id}} pack_{{pack.category}} subtype_{{pack.type}} boost_{{pack.boost}}">
  626.                     <div class="left_wrp">
  627.                         {% if pack.image %}
  628.                             <img src="{{ asset('assets/img/packs/')  ~  pack.image }}" class="pack_img" />
  629.                         {% else %}
  630.                             <div class="no_pack_img_wrp"><img src="{{ asset('assets/img/icons/no-image.png') }}" /></div>
  631.                         {% endif %}
  632.                     </div>
  633.                     <div class="center_wrp">
  634.                         <h5>{{pack.name}} {% if pack.duration > 0 %}{{pack.duration}}H{% endif %}<i class="pack_infos">?</i></h5>
  635.                         <div class="description">{{pack.description|raw}}</div>
  636.                         <div class="long_description">{{pack.LongDescription|raw}}</div>
  637.                         {# <div class="description">{{pack.description|striptags|slice(0, 80)|raw}}</div> #}
  638.                     </div>
  639.                     <div class="right_wrp">
  640.                         <span class="pack_price">{{pack.price}} €</span>
  641.                         <button data-id="{{pack.id}}" type="button" class="btn choose_pack_btn">{{"Choisir"|trans}}</button>
  642.                     </div>
  643.                     <ul class="pack_availabilities"></ul>
  644.                     <div class="pack_warning"></div>
  645.                 </li>
  646.             {% endfor %}
  647.         </ul>
  648.     </div>
  649. </div>
  650. {% endblock %}
  652. {% block pageBottom %}
  653.     <div class="swiper-wrapper">
  654.         <div class="swiper-slide blue">
  655.             <a href="https://moncompteformation.gouv.fr" target="_Blank">
  656.                 <img src="{{ asset('assets/img/cpf.png') }}" />
  657.                 <p>{{"Votre permis de conduite <span class=\"highlighted\">gratuit</span> ?<br />C’est possible grâce au CPF !"|trans|raw}}</p>
  658.             </a>
  659.         </div>
  660.         <div class="swiper-slide yellow">
  661.             <a href="https://moncompteformation.gouv.fr" target="_Blank">
  662.                 <img src="{{ asset('assets/img/logo_ecole_de_conduite.png') }}" />
  663.                 <p>{{"Un enseignement de <span class=\"highlighted\">qualité</span> et une information claire et transparente"|trans|raw}}</p>
  664.             </a>
  665.         </div>
  666.         <div class="swiper-slide red">
  667.             <a href="https://travail-emploi.gouv.fr/formation-professionnelle/acteurs-cadre-et-qualite-de-la-formation-professionnelle/article/qualiopi-marque-de-certification-qualite-des-prestataires-de-formation" target="_Blank">
  668.                 <img src="{{ asset('assets/img/LogoQualiopi.png') }}" />
  669.                 <p>{{"Marque de certification <span class=\"highlighted\">qualité</span> des prestataires de formation"|trans|raw}}</p>
  670.             </a>
  671.         </div>
  672.         <div class="swiper-slide red2">
  673.             <a href="https://getalma.eu/" target="_Blank">
  674.                 <img src="{{ asset('assets/img/logo-alma.png') }}" />
  675.                 <p>{{"Payez votre formation <span class=\"highlighted\">en 3 fois</span> grâce à Alma"|trans|raw}}</p>
  676.             </a>
  677.         </div>
  678.     </div>
  679. {% endblock %}
  681. {% block footerJavascripts %}
  682. <!-- Updating Questions Modal -->
  683. <div class="modal fade" id="updatingQuestionsModal" tabindex="-1" role="dialog" aria-labelledby="updatingQuestionsModalLabel" aria-hidden="true">
  684.     <div class="modal-dialog" role="document">
  685.         <div class="modal-content">
  686.             <div class="modal-header">
  687.                 <h5 class="modal-title" id="updatingQuestionsModalLabel">Attention !</h5>
  688.                 <button type="button" class="btn close" data-dismiss="modal" aria-label="Close">
  689.                     <span aria-hidden="true">&times;</span>
  690.                 </button>
  691.             </div>
  692.             <div class="modal-body">
  693.                 Les questions de l'examen sont actuellement en cours de mise à jour...
  694.             </div>
  695.             <div class="modal-footer">
  696.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
  697.             </div>
  698.         </div>
  699.     </div>
  700. </div>
  701. <!-- ! Updating Questions Modal -->
  702. <!-- Login Modal -->
  703. <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
  704.     <div class="modal-dialog" role="document">
  705.         <div class="modal-content">
  706.             <div class="modal-header">
  707.                 <h5 class="modal-title" id="loginModalLabel">{{"Identification"|trans}}</h5>
  708.                 <button type="button" class="btn close" data-dismiss="modal" aria-label="Close">
  709.                     <span aria-hidden="true">&times;</span>
  710.                 </button>
  711.             </div>
  712.             <div class="modal-body">
  713.                 <h3 class="insent_sentence">{{"Vous y êtes presque !<br />Identifiez-vous pour passer au paiement."|trans|raw}}</h3>
  714.                 <form id="popup_login_form">
  715.                     <div class="form-group">
  716.                         <label for="login_username">{{"Login"|trans}}</label>
  717.                         <input type="email" id="login_username" class="form-control" />
  718.                     </div>
  719.                     <div class="form-group">
  720.                         <label for="login_password">{{"Mot de passe"|trans}}</label>
  721.                         <input type="password" id="login_password" class="form-control" />
  722.                     </div>
  723.                 </form>
  724.                 <div class="other">
  725.                     {{"Vous n'avez pas encore de compte ?<br /><a href=\"#\" class=\"open_registrationPopup\">Cliquez ici</a> pour vous inscrire"|trans|raw}}
  726.                 </div>
  727.             </div>
  728.             <div class="modal-footer">
  729.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">{{"Annuler"|trans}}</button>
  730.                 <button id="popup_login_btn" type="button" class="btn btn-primary">{{"Connexion"|trans}}</button>
  731.             </div>
  732.         </div>
  733.     </div>
  734. </div>
  735. <!-- ! Login Modal -->
  736. <!-- Registration Modal -->
  737. <div class="modal fade" id="registrationModal" tabindex="-1" role="dialog" aria-labelledby="registrationModalLabel" aria-hidden="true">
  738.     <div class="modal-dialog" role="document">
  739.         <div class="modal-content">
  740.             <div class="modal-header">
  741.                 <h5 class="modal-title" id="registrationModalLabel">{{"Inscription"|trans}}</h5>
  742.                 <button type="button" class="btn close" data-dismiss="modal" aria-label="Close">
  743.                     <span aria-hidden="true">&times;</span>
  744.                 </button>
  745.             </div>
  746.             <div class="modal-body">
  747.                 <h3 class="insent_sentence">{{"Plus qu'une seule étape !<br />Inscrivez-vous pour passer au paiement."|trans|raw}}</h3>
  748.                 <form id="popup_register_form">
  749.                     <div class="form-group">
  750.                         <label for="registration_username">{{"Email"|trans}}</label>
  751.                         <input type="email" id="registration_username" class="form-control" />
  752.                     </div>
  753.                     <div class="form-group">
  754.                         <label for="registration_password">{{"Mot de passe"|trans}}</label>
  755.                         <input type="password" id="registration_password" class="form-control" />
  756.                     </div>
  757.                     <div class="form-group">
  758.                         <label for="registration_phone">Téléphone</label>
  759.                         <input type="text" id="registration_phone" class="form-control" name="registration_phone" />
  760.                     </div>
  761.                     <div class="form-group">
  762.                         <label for="registration_partner">{{"Code parrainage"|trans}}</label>
  763.                         <input type="text" id="registration_partner" class="form-control" />
  764.                     </div>
  765.                 </form>
  766.                 <div class="other">
  767.                     {{"Vous avez déjà un compte ?<br /><a href=\"#\" class=\"open_loginPopup\">Cliquez ici</a> pour vous connecter"|trans|raw}}
  768.                 </div>
  769.             </div>
  770.             <div class="modal-footer">
  771.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">{{"Annuler"|trans}}</button>
  772.                 <button id="popup_register_btn" type="button" class="btn btn-primary">{{"Valider"|trans}}</button>
  773.             </div>
  774.         </div>
  775.     </div>
  776. </div>
  777. <!-- ! Registration Modal -->
  778. <!-- Months Modal -->
  779. <div class="modal fade" id="monthsModal" tabindex="-1" role="dialog" aria-labelledby="monthsModalLabel" aria-hidden="true">
  780.     <div class="modal-dialog" role="document">
  781.         <div class="modal-content">
  782.             <div class="modal-header">
  783.                 <h5 class="modal-title" id="monthsModalLabel">{{"Choisissez un mois"|trans}}</h5>
  784.                 <button type="button" class="close btn" data-dismiss="modal" aria-label="Close">
  785.                     <span aria-hidden="true">&times;</span>
  786.                 </button>
  787.             </div>
  788.             <div class="modal-body">
  789.                 <ul id="monthsModal_list">
  790.                     {% for examMonth in examMonths %}
  791.                         <li>
  792.                             <button type="button" class="btn btn-info" data-date="{{examMonth.date}}">{{examMonth.readable}}</button>
  793.                         </li>
  794.                     {% endfor %}
  795.                 </ul>
  796.             </div>
  797.             <div class="modal-footer">
  798.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">{{"Annuler"|trans}}</button>
  799.             </div>
  800.         </div>
  801.     </div>
  802. </div>
  803. <!-- ! Months Modal -->
  804. <!-- Availability Details Modal -->
  805. <div class="modal fade" id="availabilityDetailsModal" tabindex="-1" role="dialog" aria-labelledby="availabilityDetailsModalLabel" aria-hidden="true">
  806.     <div class="modal-dialog" role="document">
  807.         <div class="modal-content">
  808.             <div class="modal-header">
  809.                 <h5 class="modal-title" id="availabilityDetailsModalLabel">{{"Détails de la disponibilité"|trans}}</h5>
  810.                 <button type="button" class="close btn" data-dismiss="modal" aria-label="Close">
  811.                     <span aria-hidden="true">&times;</span>
  812.                 </button>
  813.             </div>
  814.             <div class="modal-body">
  815.                 <table id="availabilityDetailsModal_list">
  816.                     <thead>
  817.                         <tr>
  818.                             <td>{{"Date"|trans}}</td>
  819.                             <td>{{"Heure de début"|trans}}</td>
  820.                             <td>{{"Heure de fin"|trans}}</td>
  821.                         </tr>
  822.                     </thead>
  823.                     <tbody></tbody>
  824.                 </table>
  825.             </div>
  826.             <div class="modal-footer">
  827.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">{{"Fermer"|trans}}</button>
  828.             </div>
  829.         </div>
  830.     </div>
  831. </div>
  832. <!-- ! Availability Details Modal -->
  833. <!-- Pack Details Modal -->
  834. <div class="modal fade" id="packDetailsModal" tabindex="-1" role="dialog" aria-labelledby="packDetailsModalLabel" aria-hidden="true">
  835.     <div class="modal-dialog" role="document">
  836.         <div class="modal-content">
  837.             <div class="modal-header">
  838.                 <h5 class="modal-title" id="packDetailsModalLabel">{{"Détails du pack"|trans}}</h5>
  839.                 <button type="button" class="close btn" data-dismiss="modal" aria-label="Close">
  840.                     <span aria-hidden="true">&times;</span>
  841.                 </button>
  842.             </div>
  843.             <div class="modal-body">
  844.                 <h6 class="choosedDate_dyn"></h6>
  845.                 <div class="pack_long_description">
  846.                 </div>
  847.             </div>
  848.             <div class="modal-footer">
  849.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">{{"Fermer"|trans}}</button>
  850.             </div>
  851.         </div>
  852.     </div>
  853. </div>
  854. <!-- ! Pack Details Modal -->
  856. <!-- Swiper JS -->
  857. <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  859. <!-- Initialize Swiper -->
  860. <script>
  861.     var swiper = new Swiper("#home_slider", {
  862.         loop: true,
  863.         navigation: {
  864.             nextEl: ".swiper-button-next",
  865.             prevEl: ".swiper-button-prev",
  866.         },
  867.         breakpoints: {
  868.             1024: {
  869.                 slidesPerView: 3,
  870.                 loop: false,
  871.             },
  872.         }
  873.     });
  874.     swiper.on('transitionEnd', function () {
  875.         $('#has_code_wrp').slideUp();
  876.     });
  877.     var bottomPageSwiper = new Swiper("#page_bottom_wrp", {
  878.         loop: true,
  879.         autoplay: {
  880.             delay: 1500,
  881.             disableOnInteraction: true,
  882.         },
  883.         speed: 1000, 
  884.         //effect: 'fade',
  885.         //fadeEffect: {
  886.         //    crossFade: true
  887.         //},
  888.         slidesPerView: 1
  889.     });
  890. </script>
  891. <script>
  892. $(document).ready(function($){
  893.     function localStorageAvailable() {
  894.         if (typeof(Storage) !== "undefined") {
  895.             return true;
  896.         } else {
  897.             return false;
  898.         }
  899.     }
  900.     if (localStorageAvailable()) {
  901.         var dontShowUpdatingQuestionsModal = localStorage.dontShowUpdatingQuestionsModal;
  902.         if(!dontShowUpdatingQuestionsModal){
  903.             //$('#updatingQuestionsModal').modal('show');
  904.         }
  905.         $('#updatingQuestionsModal').on('hidden.bs.modal', function() {
  906.             localStorage.dontShowUpdatingQuestionsModal = true;
  907.         });
  908.     }
  909.     {% if app.user %}
  910.         window.loggedIn = true;
  911.     {% endif %}
  912.     var datesSwiper;
  913.     var availabilitiesSwiper = null;
  914.     function animateBlocks(){
  915.         $('#choiceBlocks_wrp').slideDown();
  916.         $('#choiceBlocks_wrp block_1, #choiceBlocks_wrp block_2').addClass('animate');
  917.         setTimeout(function(){
  918.             $('#choiceBlocks_wrp block_1, #choiceBlocks_wrp block_2').removeClass('animate');
  919.         }, 10000);
  920.     }
  921.     $('i.pack_infos').on('click', function(e){
  922.         var packID = $(this).closest('li').attr('data-id');
  923.         $('#packDetailsModal .modal-body .pack_long_description').html($('#home_packs_list li.pack_id_'+packID+' .long_description').html());
  924.         $('#packDetailsModal').modal('show');
  925.     });
  926.     $('.homeSubType button').on('click', function(e){
  927.         window.subType = $(this).attr('data-subType');
  928.         $('.homeSubType').slideUp();
  929.         $('#homeChoosedType_'+window.choosedType+' img.'+window.subType).css({'opacity':1});
  930.         $('#home_packs_wrp li').each(function(i, e){
  931.             if(!$(e).hasClass('subtype_'+window.subType)){
  932.                 $(e).slideUp();
  933.             }
  934.         });
  935.         updateWinHash('subType', window.subType);
  936.         if(window.subType == 'online'){
  937.             window.choosedDate = null;
  938.             window.choosedDateID = null;
  939.             $('#home_packs_list .pack_availabilities').slideUp().html('');
  940.             $('#home_packs_wrp').slideDown();
  941.             customScrollTo($('#home_packs_wrp'));
  942.         } else if(window.choosedType == 'auto'){
  943.             /*$('#home_examDates_wrp, .choose_ExamDate_btn').slideDown();*/
  944.             $('#home_boost_wrp').slideDown();
  945.             customScrollTo($('#home_examDates_wrp'));
  946.         } else {
  947.             getExamDates('code');
  948.             customScrollTo($('#home_examDates_wrp'));
  949.         }
  950.     });
  951.     $('.open_registrationPopup').on('click', function(e){
  952.         e.preventDefault();
  953.         $('#loginModal').modal('hide');
  954.         $('#registrationModal').modal('show');
  955.     });
  956.     $('.monthChooser').on('click', function(e){
  957.         $('#monthsModal').modal('show');
  958.     });
  959.     $('body').on('click', '.pack_availabilities i.infos', function(e){
  960.         availabilitiesSwiper.autoplay.stop();
  961.         var rawData = $(this).closest('.swiper-slide').attr('data-raw');
  962.         rawData = JSON.parse(rawData);
  963.         $('#availabilityDetailsModal_list tbody').html('');
  964.         $.each(rawData, function(k, d){
  965.             $('#availabilityDetailsModal_list tbody').append('<tr><td>'+d[2]+'</td><td>'+d[0]+'H</td><td>'+d[1]+'H</td></tr>');
  966.         });
  967.         $('#availabilityDetailsModal').modal('show');
  968.     });
  969.     $('#monthsModal_list button').on('click', function(e){
  970.         if($(this).closest('li').hasClass('disabled')) return false;
  971.         $('#home_packs_list .pack_availabilities, #home_packs_list .pack_warning').slideUp().html('');
  972.         $('#home_packs_wrp').slideUp();
  973.         getExamDates(window.choosedType, $('#home_boost_range').val(), $(this).attr('data-date'));
  974.     });
  975.     $('.open_loginPopup').on('click', function(e){
  976.         e.preventDefault();
  977.         $('#registrationModal').modal('hide');
  978.         $('#loginModal').modal('show');
  979.     });
  980.     $(document).on('click', '.choose_ExamDate_btn' , function(e){
  981.         e.preventDefault();
  982.         if($(this).closest('.swiper-slide').hasClass('full')) return false;
  983.         //datesSwiper.autoplay = false;
  984.         datesSwiper.autoplay.stop();
  985.         $('#home_examDates_wrp .swiper-slide.selected').removeClass('selected');
  986.         $(this).closest('.swiper-slide').addClass('selected');
  987.         /*$('#home_examDates_wrp li:not(.selected)').slideUp();*/
  988.         window.choosedDate = $(this).closest('.swiper-slide').attr('data-date');
  989.         window.choosedDateID = $(this).closest('.swiper-slide').attr('data-dateID');
  990.         $('.choosedDate_dyn').html($(this).closest('.swiper-slide').attr('data-dateFr'));
  991.         $('#home_packs_list .pack_availabilities, #home_packs_list .pack_warning').slideUp().html('');
  992.         $('#home_packs_wrp').slideDown();
  993.         customScrollTo($(".homeChoosedType"));
  994.     });
  995.     $('#has_code_wrp button').on('click', function(){
  996.         $('#has_code_wrp button.selected').removeClass('selected');
  997.         $(this).addClass('selected');
  998.         window.hasCode = $(this).attr('data-type');
  999.         if(window.hasCode == 'yes'){
  1000.             $('#home_slider, #has_code_wrp, #needCodeFirstWarning').slideUp();
  1001.             $('#homeChoosedType_'+window.choosedType).slideDown();
  1002.             if(window.choosedType != 'moto'){
  1003.                 updateWinHash('type', 'auto');
  1004.                 $('#homeSubType_'+window.choosedType).slideDown();
  1005.                 //customScrollTo($('#homeChoosedType_'+window.choosedType));
  1006.             } else {
  1007.                 updateWinHash('type', 'moto');
  1008.                 getExamDates('moto');
  1009.                 //customScrollTo($('#home_examDates_wrp'));
  1010.             }
  1011.             $([document.documentElement, document.body]).animate({
  1012.                 scrollTop: 0
  1013.             }, 1000);
  1014.             $('body').addClass('type_'+window.choosedType);
  1015.         } else {
  1016.             $('#needCodeFirstWarning').slideDown();
  1017.             //window.talbiJSAlert.show('warning', "Vous devez passer votre code en premier");
  1018.             swiper.slideTo( 2,1000,false );
  1019.             //swiper.slideTo( $('.codeSlide').index(),1000,false );
  1020.             customScrollTo($("#home_slider"));
  1021.         }
  1022.     });
  1023.     var boostVals = ['none', 'fast', 'superFast'];
  1024.     $('#home_boost_confirm').on('click', function(){
  1025.         $('#homeChoosedType_auto').append($('#home_boost_choices li[data-level="'+$('#home_boost_range').val()+'"]').find('img.boost_icn'));
  1026.         var boostVal = boostVals[$('#home_boost_range').val() - 1];
  1027.         updateWinHash('boost', boostVal);
  1028.         var today = new Date();
  1029.         var year = today.getFullYear();
  1030.         var month = today.getMonth();
  1031.         var day = '01';//today.getDate();
  1033.         if(boostVal == 'none'){
  1034.             var dateFrom = new Date(year + 1, month, day);
  1035.         } else if(boostVal == 'fast'){
  1036.             var dateFrom = new Date(year, month + 2, day);
  1037.         }
  1038.         if(boostVal != 'superFast'){
  1039.             $('#monthsModal_list li').each(function(i, e){
  1040.                 var tDate = new Date($(e).find('button').attr('data-date')+'-01');
  1041.                 if(tDate < dateFrom) $(e).addClass('disabled');
  1042.             });
  1043.         }
  1044.         getExamDates('auto', $('#home_boost_range').val());
  1045.         $('#home_packs_wrp li').each(function(i, e){
  1046.             if(!$(e).hasClass('boost_'+boostVal)){
  1047.                 $(e).slideUp();
  1048.             }
  1049.         });
  1050.         $('#home_boost_wrp').slideUp();
  1051.     });
  1052.     $('#home_boost_range').on('change', function(){
  1053.         updateHomeBoost();
  1054.     });
  1055.     updateHomeBoost();
  1056.     function updateHomeBoost(){
  1057.         var level = $('#home_boost_range').val();
  1058.         $('#home_boost_choices > li').slideUp();
  1059.         $('#home_boost_choices li[data-level="'+level+'"]').slideDown();
  1060.     }
  1061.     function getExamDates(type, boost=null, month=null){
  1062.         window.talbiJSLoading.show();
  1063.         $.ajax({
  1064.             url: '/api/getExamDates',
  1065.             type: 'POST',
  1066.             dataType: 'json',
  1067.             data: { type:type, boost:boost, month:month},
  1068.             success: function(r){
  1069.                 window.talbiJSLoading.hide();
  1070.                 if(r.examDates){
  1071.                     var examDatesKeys = Object.keys(r.examDates);
  1072.                     $('#home_examDates_wrp .swiper-wrapper').html('');
  1073.                     $('#home_examDates_wrp').slideUp();
  1074.                     if(examDatesKeys.length > 0){
  1075.                         for (var ix in r.examDates) {
  1076.                             var e = r.examDates[ix];
  1077.                             if(e.status == -1){
  1078.                                 var dateFinal = e.dateStrn;
  1079.                                 var dateFr = e.dateStrn;
  1080.                                 var dataDate = e.date;
  1081.                                 var dExamCenter = '';
  1082.                             } else {
  1083.                                 var ev = new Date(e.date.split('T')[0]);
  1084.                                 var dateFinal = ev.toLocaleDateString();
  1085.                                 var dateFr = ev.toLocaleDateString();
  1086.                                 var dataDate = e.date.split('T')[0];
  1087.                                 var dExamCenter = '<div class="centerName">'+e.centerName+' à '+e.time+'</div>';
  1088.                             }
  1089.                             var remainingPlaces = e.places - e.booked;
  1090.                             var full = remainingPlaces > 0 ? '' : 'full';
  1091.                             var waiting = (e.status == 2 || e.status == -1) ? 'waiting' : '';
  1092.                             $('#home_examDates_wrp .swiper-wrapper').append(
  1093.                                 '<div class="swiper-slide '+full+' '+waiting+'" data-dateID="'+e.dateID+'" data-date="'+dataDate+'" data-dateFr="'+dateFr+'"><div class="infWrp"><div class="remainingPlaces">'+remainingPlaces+' {{"place"|trans}}'+(remainingPlaces == 1 ? '' : 's')+'</div><div class="date">'+dateFinal+'</div>'+dExamCenter+'</div><div class="btn choose_ExamDate_btn">Choisir</div></div>'
  1094.                             );
  1095.                         }
  1096.                         if(datesSwiper) datesSwiper.destroy();
  1097.                         datesSwiper = new Swiper("#home_examDates", {
  1098.                             loop: false,
  1099.                             navigation: {
  1100.                                 nextEl: ".swiper-button-next",
  1101.                                 prevEl: ".swiper-button-prev",
  1102.                             },
  1103.                             //longSwipes: true,
  1104.                             autoplay: {
  1105.                                 delay: 1000,
  1106.                                 disableOnInteraction: true,
  1107.                             },
  1108.                             breakpoints: {
  1109.                                 1420: {
  1110.                                     slidesPerView: 3,
  1111.                                     loop: false,
  1112.                                 },
  1113.                                 1024: {
  1114.                                     slidesPerView: 2,
  1115.                                     loop: false,
  1116.                                 },
  1117.                                 720: {
  1118.                                     slidesPerView: 1,
  1119.                                     loop: false,
  1120.                                 },
  1121.                             }
  1122.                         });
  1123.                         //datesSwiper.slideTo( 1,1000,false );
  1124.                         datesSwiper.autoplay.start();
  1125.                     } else {
  1126.                         $('#home_packs_wrp').slideUp();
  1127.                         $('#home_examDates_wrp .swiper-wrapper').append(
  1128.                             '<div class="alert alert-warning">Aucune date trouvée</div>'
  1129.                         );
  1130.                     }
  1131.                     if(month){
  1132.                         $('#monthsModal').modal('hide');
  1133.                     }
  1134.                     $('#home_examDates_wrp, .choose_ExamDate_btn').slideDown();
  1135.                 } else if(r.error) {
  1136.                     window.talbiJSAlert.show('danger', r.error);
  1137.                 } else {
  1138.                     window.talbiJSAlert.show('danger', "Une erreur s'est produite !");
  1139.                 }
  1140.             },
  1141.             error: function(r){
  1142.                 window.talbiJSLoading.hide();
  1143.                 window.talbiJSAlert.show('danger', "Une erreur s'est produite !");
  1144.             }
  1145.         });
  1146.     }
  1147.     $('.choose_type_btn').on('click', function(){
  1148.         window.choosedType = $(this).attr('data-type');
  1149.         if(window.choosedType != 'code'){
  1150.             $('#has_code_wrp').slideDown();
  1151.             $('.choose_ExamDate_btn').slideUp();
  1152.             customScrollTo($("#home_slider"));
  1153.         } else {
  1154.             $('#needCodeFirstWarning').slideUp();
  1155.             $('#home_slider, #has_code_wrp').slideUp();
  1156.             $('#homeChoosedType_'+window.choosedType).slideDown();
  1157.             $('#homeSubType_'+window.choosedType).slideDown();
  1158.             $('body').addClass('type_'+window.choosedType);
  1159.             updateWinHash('type', 'code');
  1160.             $([document.documentElement, document.body]).animate({
  1161.                 scrollTop: 0
  1162.             }, 1000);
  1163.         }
  1164.         $('#home_slider > .selected').removeClass('selected');
  1165.         $(this).closest('div').addClass('selected');
  1166.         $('#home_packs_wrp').slideUp();
  1167.         $('#home_packs_wrp li').each(function(i, e){
  1168.             if($(e).hasClass('pack_'+window.choosedType)){
  1169.                 $(e).slideDown();
  1170.             } else {
  1171.                 $(e).slideUp();
  1172.             }
  1173.         });
  1174.     });
  1175.     $('.homeChoosedType i.close').on('click', function(){
  1176.         window.location.href = '/';
  1177.     });
  1178.     $('#popup_register_btn').on('click', function(){
  1179.         var username = $('#registration_username').val();
  1180.         var password = $('#registration_password').val();
  1181.         var phone = $('#registration_phone').val();
  1182.         var partnerCode = $('#registration_partner').val();
  1183.         if(username == ''){
  1184.             window.talbiJSAlert.show('warning', "Vous devez saisir votre adresse email.");
  1185.             return false;
  1186.         } else if(password == ''){
  1187.             window.talbiJSAlert.show('warning', "Vous devez saisir votre mot de passe.");
  1188.             return false;
  1189.         }
  1190.         window.talbiJSLoading.show('Inscription');
  1191.         $.ajax({
  1192.             url: '/api/registration',
  1193.             type: 'POST',
  1194.             dataType: 'json',
  1195.             data: { username:username, password:password, partnerCode:partnerCode, phone:phone},
  1196.             success: function(r){
  1197.                 window.talbiJSLoading.hide();
  1198.                 if(r.user){
  1199.                     window.talbiJSAlert.show('success', "Bienvenue", 2000);
  1200.                     window.loggedIn = true;
  1201.                     $('#registrationModal').modal('toggle');
  1202.                     if(r.isPartner) {
  1203.                         window.isPartner = true;
  1204.                         window.affiliate = r.user;
  1205.                         chooseAvailability();
  1206.                     } else {
  1207.                         ajaxLogin(username, password);
  1208.                     }
  1209.                 } else if(r.error) {
  1210.                     window.talbiJSAlert.show('danger', r.error);
  1211.                 } else {
  1212.                     window.talbiJSAlert.show('danger', "Une erreur s'est produite, veuillez vérifier vos données.", 4000);
  1213.                 }
  1214.             },
  1215.             error: function(r){
  1216.                 window.talbiJSLoading.hide();
  1217.                 window.talbiJSAlert.show('danger', "Une erreur s'est produite !");
  1218.             }
  1219.         });
  1220.     });
  1221.     $('#popup_login_btn').on('click', function(){
  1222.         var login_username = $('#login_username').val();
  1223.         var login_password = $('#login_password').val();
  1224.         ajaxLogin(login_username, login_password);
  1225.     });
  1226.     function ajaxLogin(login_username, login_password){
  1227.         window.talbiJSLoading.show('Identification');
  1228.         $.ajax({
  1229.             url: '/api/login',
  1230.             type: 'POST',
  1231.             dataType: 'json',
  1232.             contentType: "application/json",
  1233.             data: JSON.stringify({email:login_username, password:login_password}),
  1234.             success: function(r){
  1235.                 window.talbiJSLoading.hide();
  1236.                 if(r.user){
  1237.                     window.talbiJSAlert.show('success', "Bienvenue", 2000);
  1238.                     window.loggedIn = true;
  1239.                     $('#loginModal').modal('toggle');
  1240.                     if(r.isPartner){
  1241.                         window.isPartner = true;
  1242.                         $('#registrationModalLabel').text('Inscription filleul');
  1243.                         $('#registration_partner').slideUp().remove();
  1244.                         $('#registrationModal').modal('show');
  1245.                     } else {
  1246.                         chooseAvailability();
  1247.                     }
  1248.                 } else {
  1249.                     window.talbiJSAlert.show('danger', 'Identifiants incorrects');
  1250.                 }
  1251.             },
  1252.             error: function(r){
  1253.                 window.talbiJSLoading.hide();
  1254.                 window.talbiJSAlert.show('danger', 'Identifiants incorrects');
  1255.             }
  1256.         });
  1257.     }
  1258.     $('.choose_pack_btn').on('click', function(){
  1259.         $this = $(this);
  1260.         if(window.choosedType == 'code'){
  1261.             $('#home_packs_list li.selected').removeClass('selected');
  1262.             $this.closest('li').addClass('selected');
  1263.             if(window.loggedIn){
  1264.                 if(window.isPartner){
  1265.                     $('#registrationModal').modal('show');
  1266.                 } else {
  1267.                     chooseAvailability();
  1268.                 }
  1269.             } else {
  1270.                 $('#loginModal').modal('toggle');
  1271.             }
  1272.             return;
  1273.         }
  1274.         var $availabilitiesTarget = $this.closest('li').find('.pack_availabilities');
  1275.         $availabilitiesTarget.html('<div class="swiper-wrapper"></div>');
  1276.         //$('#home_packs_list li.selected .pack_availabilities').slideUp().html('');
  1277.         $('#home_packs_list li.selected .pack_availabilities').slideUp();
  1278.         $('#home_packs_list li.selected .pack_warning').slideUp();
  1279.         var choosedPack = $this.attr('data-id');
  1280.         window.talbiJSLoading.show('Recherche des disponibilités');
  1281.         $.ajax({
  1282.             url: '/api/getAvailabilities',
  1283.             type: 'POST',
  1284.             dataType: 'json',
  1285.             data: {pack:choosedPack, date:window.choosedDate, dateID:window.choosedDateID},
  1286.             success: function(r){
  1287.                 window.talbiJSLoading.hide();
  1288.                 $this.closest('li').addClass('selected');
  1289.                 if(r.availabilities.length > 0){
  1290.                     if(document.querySelector("#home_packs_list li.pack_id_"+choosedPack+" .pack_availabilities").swiper) {
  1291.                         availabilitiesSwiper.removeAllSlides();
  1292.                     }
  1293.                     availabilitiesSwiper = new Swiper("#home_packs_list li.pack_id_"+choosedPack+" .pack_availabilities", {
  1294.                         //slidesPerView: 3,
  1295.                         spaceBetween: 20,
  1296.                         autoplay: {
  1297.                             delay: 1000,
  1298.                             disableOnInteraction: true,
  1299.                         },
  1300.                         breakpoints: {
  1301.                             640: {
  1302.                                 slidesPerView: 1,
  1303.                                 loop: false,
  1304.                             },
  1305.                             1024: {
  1306.                                 slidesPerView: 3,
  1307.                                 loop: false,
  1308.                             },
  1309.                         }
  1310.                     });
  1311.                     var availabilitiesSwiperContent = '';
  1312.                     r.availabilities.forEach(function(e){
  1313.                         availabilitiesSwiperContent += '<div data-raw=\''+JSON.stringify(e.raw)+'\' class="swiper-slide"><i class="infos">?</i><span class="from">Du '+e.start.date+' à '+e.start.hour+'H</span><span class="to">Au '+e.end.date+' à '+e.end.hour+'H</span><span class="btn choose_availability_btn">Réserver</span></div>';
  1314.                     });
  1315.                     availabilitiesSwiper.appendSlide(availabilitiesSwiperContent);
  1316.                     availabilitiesSwiper.update(true);
  1317.                     $availabilitiesTarget.slideDown();
  1318.                 } else {
  1319.                     $this.closest('li').find('.pack_warning').html('{{"Aucune disponibilité trouvée, merci de choisir une autre date d\'examen ou bien un autre pack"|trans}}').slideDown();
  1320.                     //window.talbiJSAlert.show('warning', "Aucune disponibilité trouvée, merci de choisir une autre date d'examen ou bien un autre pack", 3000);
  1321.                 }
  1322.             },
  1323.             error: function(r){
  1324.                 window.talbiJSLoading.hide();
  1325.                 window.talbiJSAlert.show('danger', "Une erreur s'est produite !");
  1326.             }
  1327.         })
  1328.     });
  1329.     $(document).on('click', '.choose_availability_btn', function(){
  1330.         window.selectedAvailability = $(this).closest('div');
  1331.         if(window.loggedIn){
  1332.             if(window.isPartner){
  1333.                 $('#registrationModal').modal('show');
  1334.             } else {
  1335.                 chooseAvailability();
  1336.             }
  1337.         } else {
  1338.             $('#loginModal').modal('toggle');
  1339.         }
  1340.     });
  1341.     function chooseAvailability(){
  1342.         var rawData, ajTarget;
  1343.         if(window.choosedType == 'code'){
  1344.             rawData = {};
  1345.             ajTarget = 'bookCodeAvailability';
  1346.         } else {
  1347.             rawData = window.selectedAvailability.attr('data-raw');
  1348.             ajTarget = 'bookAvailability';
  1349.         }
  1350.         var examDate = window.choosedDate;
  1351.         var examDateID = window.choosedDateID;
  1352.         var pack = $('#home_packs_list li.selected .choose_pack_btn').attr('data-id');
  1353.         var affiliate = window.affiliate;
  1354.         window.talbiJSLoading.show();
  1355.         $.ajax({
  1356.             url: '/api/'+ajTarget,
  1357.             type: 'POST',
  1358.             dataType: 'json',
  1359.             data: {examDate:examDate, examDateID:examDateID, rawData:rawData, pack:pack, affiliate:affiliate},
  1360.             success: function(r){
  1361.                 window.talbiJSLoading.hide();
  1362.                 if(r.success){
  1363.                     if(window.isPartner){
  1364.                         window.talbiJSAlert.show('success', "Lien de paiement envoyé par mail", 5000);
  1365.                     } else {
  1366.                         document.location.href = '/checkout/' + r.success;
  1367.                     }
  1368.                 } else if(r.errors){
  1369.                     window.talbiJSAlert.show('danger', r.errors.join('\n'));
  1370.                 } else {
  1371.                     window.talbiJSAlert.show('danger', "Une erreur s'est produite !");
  1372.                 }
  1373.             },
  1374.             error: function(r){
  1375.                 window.talbiJSLoading.hide();
  1376.                 window.talbiJSAlert.show('danger', "Une erreur s'est produite !");
  1377.             }
  1378.         });
  1379.     }
  1380.     function customScrollTo($element, timeOut=1000){
  1381.         $([document.documentElement, document.body]).animate({
  1382.             scrollTop: $element.offset().top - ($('#website_header').height() + 30)
  1383.         }, timeOut);
  1384.     }
  1386.     function parseWinHash(){
  1387.         const hash = window.location.hash.substring(1);
  1388.         const hashValues = hash.split('&');
  1389.         var finalReturn = {};
  1390.         if(hash && hashValues.length > 0){
  1391.             hashValues.forEach(function(e){
  1392.                 hashValueSplit = e.split('=');
  1393.                 finalReturn[hashValueSplit[0]] = hashValueSplit[1];
  1394.             });
  1395.         }
  1396.         return finalReturn;
  1397.     }
  1398.     window.parsedWinHash = parseWinHash();
  1399.     function processWinHash(){
  1400.         if(window.parsedWinHash){
  1401.             if(window.parsedWinHash['type']){
  1402.                 $('.choose_type_btn[data-type="'+window.parsedWinHash['type']+'"]').trigger('click');
  1403.                 if(window.parsedWinHash['type'] != 'code') $('#has_code_wrp button[data-type="yes"]').trigger('click');
  1404.             }
  1405.             if(window.parsedWinHash['subType']){
  1406.                 $('.homeSubType_inner button[data-subtype="'+window.parsedWinHash['subType']+'"]').trigger('click');
  1407.             }
  1408.             if(window.parsedWinHash['boost']){
  1409.                 var boostIndex = boostVals.indexOf(window.parsedWinHash['boost']);
  1410.                 $('#home_boost_range').val(boostIndex + 1);
  1411.                 $('#home_boost_confirm').trigger('click');
  1412.             }
  1413.         }
  1414.     }
  1415.     processWinHash();
  1416.     function updateWinHash(key, value) {
  1417.         window.removeEventListener('popstate', processPopstate);
  1418.         window.parsedWinHash[key] = value;
  1419.         var finalHash = Object.keys(window.parsedWinHash).map(function(x){return x + '=' + window.parsedWinHash[x];}).join('&');
  1420.         window.location.hash = '#' + finalHash;
  1421.         window.addEventListener('popstate', processPopstate);
  1422.     }
  1423.     var currentState = history.state;
  1424.     function processPopstate(){
  1425.         window.parsedWinHash = parseWinHash();
  1426.         parsedWinHashLength = Object.keys(window.parsedWinHash).length;
  1427.         if(parsedWinHashLength == 0){
  1428.             $('.homeChoosedType, .homeSubType').slideUp();
  1429.             $('#home_slider').slideDown();
  1430.         } else if(parsedWinHashLength == 1){
  1431.             $('#home_boost_wrp').slideUp();
  1432.         }
  1433.         if(!window.parsedWinHash['boost']){
  1434.             $('#home_examDates_wrp').slideUp();
  1435.         }
  1436.         processWinHash();
  1437.     }
  1438.     window.addEventListener('popstate', processPopstate);
  1439. });
  1441. var slideIndex = 1;
  1442. {# showSlides(slideIndex); #}
  1444. // Next/previous controls
  1445. function plusSlides(n) {
  1446.   showSlides(slideIndex += n);
  1447. }
  1449. // Thumbnail image controls
  1450. function currentSlide(n) {
  1451.   showSlides(slideIndex = n);
  1452. }
  1454. function showSlides(n) {
  1455.   var i;
  1456.   var slides = document.getElementsByClassName("mySlides");
  1457.   var dots = document.getElementsByClassName("dot");
  1458.   if (n > slides.length) {slideIndex = 1}
  1459.   if (n < 1) {slideIndex = slides.length}
  1460.   for (i = 0; i < slides.length; i++) {
  1461.       slides[i].style.display = "none";
  1462.   }
  1463.   for (i = 0; i < dots.length; i++) {
  1464.       dots[i].className = dots[i].className.replace(" active", "");
  1465.   }
  1466.   slides[slideIndex-1].style.display = "block";
  1467.   dots[slideIndex-1].className += " active";
  1468. }
  1469. </script>
  1470. {% endblock %}