templates/home/fiche_vehicule.html.twig line 1

Open in your IDE?
  1. {% extends 'layout_website.html.twig' %}
  3. {% block title %} {{ vehicule.getMetaTitle }} - Fiche vehicule - {{parent()}}{% endblock %}
  5. {% block stylesheets %}
  6.     {{parent()}}
  7.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
  9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
  10.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css"/>
  11.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css"/>
  12.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"/>
  13.     <style type="text/css">
  14.         #titleproduct{
  15.             display:none;
  16.         }
  17. .nav-top{
  18.             padding:18px 7px;
  19.         }
  20.         .wrapper-list{
  21.             padding-bottom: 20px;
  22.         }
  23.         .wrapper-gallery{
  24.             background: #fff
  25.         }
  26.         .wrapper-item{
  27.             padding: 0 0;
  28.         }
  29.         .preview-image .img-item:not(:first-child){
  30.             margin-top: 6rem;
  31.         }
  32.         .preview-image{
  33.         /*    height: 75vh; */
  34.             height: auto;
  35.             max-height: 65vh;
  36.         }
  37.         .preview-image .slick-list{
  38.             height: 100%
  39.         }
  40.         .preview-image .slick-track{
  41.             height: 100%
  42.         }
  43.         .preview-image .slick-track img{
  44.             width: auto;
  45.             height: auto;
  46.             max-width: 100%;
  47.         /*    max-height: 100%; */
  48.             max-height: 50vh;
  49.             margin: auto;
  50.         }
  51.         .blockimgslid{
  52.             height: 100%;
  53.             display: block;
  54.             text-align: center;
  55.         }
  56.         .wrap-infos{
  57.             text-align: center;
  58.             color: #000;
  59.             background: #fff;
  60.             padding: 30px;
  61.             padding-bottom: 9rem;
  62.         }
  63.         .wrap-infos .title-product{
  64.             text-align: center;
  65.             color: #000;
  66.             font-weight: 700;
  67.             font-size: 1.8rem;
  68.         }
  69.         .btn.action{
  70.             border: 1px solid transparent;
  71.             border-radius: 30px;
  72.             background-color: #51c5a1;
  73.             font-weight: normal;
  74.             font-style: normal;
  75.             color: #fff;
  76.             cursor: pointer;
  77.             padding: 12px 27px;
  78.             font-size: 1.6rem;
  79.         /*    box-shadow: -250px 0px 100px -180px #687FED inset; */
  80.             transition: all 0.2s ease-in;
  81.         }
  82.         .btn.action:hover{
  83.             background : #fff;
  84.             color: #51c5a1;
  85.             border: 1px solid #51c5a1;
  86.             box-shadow: none;
  87.         }
  88.         .btn.action.voir-detail{
  89.             margin-top:2rem;
  90.         }
  91.         .ref {
  92.             font-size:1.5rem;
  93.         }
  94.         .ref .iconify{
  95.             vertical-align: middle;
  96.             font-size:1.5rem;
  97.         }
  98.         .box-cart >.content{display: none;text-align:left;}
  99.         .box-cart {
  100.                 box-shadow: 1px 5px 19px 0px #51c5a1 ;
  101.                 border-radius: 10px;
  102.                 padding: 1rem;
  103.                 font-size: .9rem;
  104.                 line-height: 1.6em;
  105.                 margin: auto;
  106.                 margin-top: 2rem;
  107.                 background: #fff;
  108.                 max-width: 60rem;
  109.         }
  110.         .box-cart:not(.open){
  111.             background: #fff;
  112.             box-shadow: 0px 0px 5px 3px #51c5a1;
  113.         }
  114.         .box-cart > .title{cursor: pointer;margin:0;text-align: center;}
  115.         .details-wrapper{display:none;}
  116.         .details-wrapper .box-cart {
  117.             background: #fff!important;
  118.             padding: 0;
  119.         }
  120.         .details-wrapper .box-cart > .title {
  121.             font-size: 1.4rem;
  122.             font-weight: 600;
  123.             padding: 1.5rem 0;
  124.             margin: 0;
  125.         }
  126.         .details-wrapper .box-cart > .title {
  127.             font-size: 1.4rem;
  128.             font-weight: 600;
  129.             padding: 1.5rem 0;
  130.             margin: 0;
  131.         }
  132.         .details-wrapper .box-cart.open > .title {
  133.             box-shadow: 0px 3px 7px 0px rgba(0, 0, 255, .2);
  134.         }
  135.         .details-wrapper .box-cart >.content {
  136.             padding: 1.4rem;
  137.         }
  138.         .blockprice{
  139.             display: flex;
  140. flex-direction: column;
  141.         }
  142.         .blockprice .prx{
  143.             text-align:center;
  144.             color: #51c5a1;
  145.             font-size: 2.2rem;
  146.         }
  147.         .blockprice .prxttc{
  148.             text-align:right;
  149.             font-size: 1.2rem;
  150.         }
  151.          
  152.         @media (min-width: 1400px){
  153.             .container {
  154.                 width: 1400px;
  155.             }
  156.         }
  157.         .nav-stape {
  158.             display: none;
  159.             background: #51c5a1;
  160.             padding: 21px 18px;
  161.             text-align: center;
  162.             color: #fff;
  163.         }
  164.         .nav-stape .content{
  165.             max-width: 600px;
  166.             margin: auto;
  167.             display: flex;
  168.             align-items: center;
  169.             justify-content: space-around;
  170.         }
  171.         .nav-stape .btn-nav{
  172.             border: 1px solid #fff;
  173.             padding: 8px 30px;
  174.             border-radius: 24px;
  175.             color: #fff;
  176.             transition: all 0.2s ease;
  177.         }
  178.         .nav-stape .btn-nav:hover{
  179.             background: #fff;
  180.             color: #000;
  181.         }
  182.         .btn-nav.next{
  183.             background: #fff;
  184.             color: #000;
  185.         }
  186.         .btn-nav.next:hover{
  187.             color: #fff;
  188.             background: #000;
  189.             border: 1px solid #fff;
  190.         }
  191.         .faq {
  192.             background: #FFFFFF;
  193.             box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.1);
  194.             border-radius: 4px;
  195.             margin:2rem 0;
  196.         }
  198.         .faq .card {
  199.             border: none;
  200.             background: none;
  201.             border-bottom: 1px dashed #CEE1F8;
  202.         }
  204.         .faq .card .card-header {
  205.             padding: 0px;
  206.             border: none;
  207.             background: none;
  208.             -webkit-transition: all 0.3s ease 0s;
  209.             -moz-transition: all 0.3s ease 0s;
  210.             -o-transition: all 0.3s ease 0s;
  211.             transition: all 0.3s ease 0s;
  212.         }
  214.         .faq .card .card-header:hover {
  215.             background: rgba(42, 30, 233, 0.1);
  216.             padding-left: 10px;
  217.         }
  218.         .faq .card .card-header .faq-title {
  219.             width: 100%;
  220.             text-align: left;
  221.             padding: 0px;
  222.             padding-left: 30px;
  223.             padding-right: 30px;
  224.             font-weight: 400;
  225.             font-size: 1.2rem;
  226.             letter-spacing: 1px;
  227.             color: #3B566E;
  228.             text-decoration: none !important;
  229.             -webkit-transition: all 0.3s ease 0s;
  230.             -moz-transition: all 0.3s ease 0s;
  231.             -o-transition: all 0.3s ease 0s;
  232.             transition: all 0.3s ease 0s;
  233.             cursor: pointer;
  234.             padding-top: 20px;
  235.             padding-bottom: 20px;
  236.             display: flex;
  237.             align-content: center;
  238.             align-items: center;
  240.         }
  242.         .faq .card .card-header .faq-title .badge {
  243.             display: inline-block;
  244.             width: 20px;
  245.             height: 20px;
  246.             line-height: 14px;
  247.             float: left;
  248.             -webkit-border-radius: 100px;
  249.             -moz-border-radius: 100px;
  250.             border-radius: 100px;
  251.             text-align: center;
  252.             background: #337ab7;
  253.             color: #fff;
  254.             font-size: 12px;
  255.             margin-right: 20px;
  256.         }
  258.         .faq .card .card-body {
  259.             padding: 2rem;
  260.             font-weight: 400;
  261.             font-size: 16px;
  262.             color: #6F8BA4;
  263.             line-height: 28px;
  264.             letter-spacing: 1px;
  265.             border-top: 1px solid #F3F8FF;
  266.             text-align: left;
  267.         }
  269.         .faq .card .card-body p {
  270.             margin-bottom: 14px;
  271.         }
  273.         @media (max-width: 991px) {
  274.             .faq {
  275.                 margin-bottom: 30px;
  276.             }
  277.             .faq .card .card-header .faq-title {
  278.                 line-height: 26px;
  279.                 margin-top: 10px;
  280.             }
  281.         }
  282.         .wrap-infos .title.tarif {
  283.             font-size: 1.6rem;
  284.             font-weight: 300;
  285.         }
  287.         .table{
  288.             border-collapse: separate;
  289.             border-spacing: 0 0.5em;
  290.         }
  291.         .descr{    
  292.             text-align: justify;
  293.         }
  294.         .caract ul {
  295.     list-style-type: none;
  296.     padding: 0 !important;
  297. }
  298.         .caract ul li{
  299.             text-align: left;
  300.         }
  301. /*
  302.         .details-wrapper strong.title {
  303.             padding: 0 11rem;
  304.             text-align: center;
  305.             display: block;
  306.             font-size: 1rem;
  307.             font-weight: 400;
  308.             font-style: italic;
  309.         }
  311.         .details-wrapper #calendar {
  312.             padding: 0 11rem;
  313.             margin-top: 2rem;
  314.         }
  316.         .details-wrapper #calendar .table-header {
  317.             display: flex;
  318.             align-items: center;
  319.             justify-content: space-between;
  320.             width: 100%;
  321.         }
  323.         .details-wrapper #calendar #left-arrow, .details-wrapper #calendar #right-arrow {
  324.             display: flex;
  325.             align-items: center;
  326.         }
  327.         .details-wrapper #calendar #left-arrow:hover,.details-wrapper #calendar #right-arrow:hover{
  328.             font-weight: 800;
  329.             cursor: pointer;
  330.         }
  331.         .details-wrapper #calendar #month-year {
  332.             text-transform: uppercase;
  333.             font-style: italic;
  334.             font-weight: 400;
  335.         }
  336.         
  337.         .details-wrapper #calendar .iconify.arrow {
  338.             font-size: 2.5rem;
  339.         }
  341.         .details-wrapper #calendar .table>thead>tr>th,
  342.         .details-wrapper #calendar .table>thead>tr>td,
  343.         .details-wrapper #calendar .table>tbody>tr>th,
  344.         .details-wrapper #calendar .table>tbody>tr>td{
  345.             border:none; 
  346.             text-align: center;
  347.             margin-top: 1rem;
  348.         }
  350.         
  351.         .details-wrapper #calendar .table>tbody>tr>th.select-date.active.start,
  352.         .details-wrapper #calendar .table>tbody>tr>td.select-date.active.start{
  353.             border-top-left-radius: 2rem;
  354.             border-bottom-left-radius: 2rem;
  355.         }
  357.         .details-wrapper #calendar .table>tbody>tr>th.select-date.active.end,
  358.         .details-wrapper #calendar .table>tbody>tr>td.select-date.active.end{
  359.             border-top-right-radius: 2rem;
  360.             border-bottom-right-radius: 2rem;
  361.         }
  363.         .details-wrapper #calendar .table>tbody>tr>th.empty:hover,
  364.         .details-wrapper #calendar .table>tbody>tr>td.empty:hover{
  365.             cursor:not-allowed;
  366.             background:initial;
  367.             color:initial;
  368.         }
  370.         .details-wrapper #calendar .table>tbody>tr>th.active,
  371.         .details-wrapper #calendar .table>tbody>tr>td.active{
  372.             background: #000;
  373.             color: rgb(255, 255, 255);
  374.         }
  376.         .details-wrapper #calendar .table>tbody>tr>th:hover,
  377.         .details-wrapper #calendar .table>tbody>tr>td:hover{
  378.             background: #000;
  379.             color: rgb(255, 255, 255);
  380.             cursor: pointer;
  381.         }
  383.         .details-wrapper #calendar tr td{
  384.             font-size: 1rem;
  385.         }
  386.         .details-wrapper #calendar sup {
  387.             font-size: .8rem;
  388.             color: #c1c1c1;
  389.             font-style: italic;
  390.         }
  392.         .details-wrapper .range{
  393.             margin-top:2rem;
  394.             text-align:center;
  395.         }
  396.         .details-wrapper div.title{
  397.             margin-bottom:1rem;
  398.             text-align:center;
  399.         }
  400.         .details-wrapper .total{
  401.             text-align:center;
  402.             font-size:1.4rem;
  403.             font-weight:500;
  404.             position: relative;
  405.         }
  406.         .details-wrapper .total .prix{
  407.             font-weight:300;
  408.         }
  409.         .details-wrapper .nb_vehicules{
  410.             text-align:center;
  411.             margin:2rem 0;
  412.         }
  414.         .details-wrapper .box-cart > .title.location,
  415.         .details-wrapper .box-cart > .title.equipement,
  416.         .details-wrapper .box-cart > .title.covering {
  417.             display: flex;
  418.             align-items: center;
  419.             align-content: center;
  420.             justify-content: center;
  421.             position: relative;
  422.         }
  424.         .details-wrapper .box-cart > .title svg.iconify{
  425.             position: absolute;
  426.             left: 2rem;
  427.         }
  429.         .details-wrapper .box-cart > .title.location svg.iconify {
  430.             font-size: 5rem;
  431.             height: 100%;
  432.             top: -0.5rem;
  433.         }
  435.         .details-wrapper .box-cart > .title.equipement svg.iconify {
  436.             font-size: 2rem;
  437.             height: 100%;
  438.             top: 0;
  439.         }
  441.         .details-wrapper .box-cart > .title.covering svg.iconify {
  442.             font-size: 2rem;
  443.             height: 100%;
  444.             top: 0;
  445.         }
  448.         .details-wrapper .box-cart.open > .title svg.iconify{
  449.             color: #59b18c;
  450.         }*/
  452.         .modal_bloc {
  453.             height: 100%;
  454.             left: 0;
  455.             top: 0;
  456.         }
  457.         .modal_bloc img {
  458.             max-height: 550px;
  459.         }
  460. /*
  461.         .slick-next {
  462.             top: 49% !important;
  463.             right: 10px !important;
  464.             z-index: 1800;
  465.             background-image: url("{{asset('img/arrow.png')}}") !important;
  466.             background-size: contain !important;
  467.             background-repeat: no-repeat !important;
  468.             background-position: center !important;
  469.             transform: rotate(180deg) !important;
  470.         }
  471.         .slick-next::before {
  472.             content: '' !important;
  473.         }
  474.         .slick-prev {
  475.             left: 10px !important;
  476.             z-index: 1800;
  477.             background-image: url("{{asset('img/arrow.png')}}") !important;
  478.             background-size: contain !important;
  479.             background-repeat: no-repeat !important;
  480.             background-position: center !important;
  481.         }
  482.         .slick-prev::before {
  483.             content: '' !important;
  484.         }*/
  485.         .modal {
  486.             z-index: 1800;
  487.         }
  488.         .img-modal-content {
  489.             background: transparent;
  490.             padding: 0;
  491.             margin: 0;
  492.             box-shadow: none;
  493.             border: none;
  494.         }
  495.         .img-modal-body {
  496.             padding: 0;
  497.             width: 100%;
  498.         }
  499.         .close {
  500.             font-size: 4rem;
  501.             font-weight: 500;
  502.         }
  503.         .img-zoom:hover {
  504.             cursor: zoom-in;
  505.         }
  506.         .content label {
  507.             color: #556d89;
  508.             font-weight: normal;
  509.             font-style: normal;
  510.         }
  511.         .selelem {
  512.             width: 30px;
  513.             margin-left: 10px;
  514.             border: none;
  515.             background-color: #ffffff;
  516.             color: #556d89;
  517.             font-weight: 600;
  518.             font-style: normal;
  519.             -webkit-appearance: none;
  520.             -moz-appearance: none;
  521.             appearance: none;
  522.         }
  523.         .details-wrapper #calendar .table>thead>tr>th.disable, .details-wrapper #calendar .table>thead>tr>td.disable, .details-wrapper #calendar .table>tbody>tr>th.disable, .details-wrapper #calendar .table>tbody>tr>td.disable{
  524.             color:#e0e0e0;
  525.         }
  526.         .details-wrapper #calendar .table>tbody>tr>th.disable:hover, .details-wrapper #calendar .table>tbody>tr>td.disable:hover {
  527.             background: transparent;
  528.             color:#e0e0e0;
  529.             cursor: not-allowed;
  530.         }
  531.         .pswp {
  532.             z-index: 9999;
  533.         }
  534.         #openPreview{
  535.             cursor:pointer;
  536.         }
  538.         @media screen and (max-width: 570px) {
  539.             .details-wrapper .box-cart > .content {
  540.                 padding: 1rem;
  541.             }
  542.             .details-wrapper strong.title {
  543.                 padding: 0 4rem;
  544.             }
  545.             .details-wrapper #calendar {
  546.                 padding: 0 4rem;
  547.             }
  548.         }
  549.         @media screen and (max-width: 470px) {
  550.             .details-wrapper #calendar {
  551.                 padding: 0 2rem;
  552.             }
  553.         }
  554.         @media screen and (max-width: 767px) {
  555.             .detailequip .prix {
  556.                 top: -4rem;
  557.             }
  558.         }
  559.         @media screen and (max-width: 396px) {
  560.             .detailequip .prix {
  561.                 top: -6rem;
  562.             }
  563.         }
  564.         
  566.         html,
  567.         body {
  568.         }
  569.         .material-icons {
  570.             font-size:inherit;
  571.         }
  573.     /*    header {
  574.             box-shadow: 1px 5px 19px 0 rgba(0, 0, 255, 0.2);
  575.             padding-bottom: 2rem;
  576.         }
  578.         header .logo-container {
  579.             text-align: center;
  580.             font-size: 37px;
  581.             font-weight: 900;
  582.             font-style: italic;
  583.             padding: 16px 10px 5px;
  584.             background: linear-gradient(to right, #e02608 100%, #545252 0%);
  585.             -webkit-background-clip: text;
  586.             -webkit-text-fill-color: transparent;
  587.         }
  589.         header .nav.list-item {
  590.             margin: auto;
  591.             display: flex;
  592.             align-items: center;
  593.             justify-content: space-around;
  594.             font-size: 18px;
  595.             max-width: 1100px;
  596.             color: #576f8a;
  597.             flex-wrap: wrap;
  598.         }
  600.         header .nav.list-item {
  601.             margin-top: 2rem;
  602.             padding: 0 2rem;
  603.         }*/
  605.         .nav.list-item .item-menu.active {
  606.             font-weight: 700
  607.         }
  609.         .item-menu .img-drap {
  610.             border-radius: 50%;
  611.             width: 23px;
  612.             height: 23px;
  613.         }
  614. #photocov{
  615.     display:none;
  616. }
  617. .minitexthover{
  618.     font-size: .8em;
  619. }
  620. .pagenextform{
  621.     position: inherit;
  622. }
  623. .blockpriceprx {
  624.     text-align: center;
  625.     color: #51c5a1;
  626.     font-size: 1.8rem;
  627.     margin-top: 0;
  628. }
  629. .caracdeon h5{
  630.     text-align: left;
  631.     cursor: pointer;
  632. }
  633. .caracdeon .caract{
  634.     overflow: hidden;
  635.     height : 0;
  636. }
  637. .caracdeon .caract ul{
  638.     margin: 5px 0 0;
  639. }
  640. .prxnbvehic{
  641.     line-height: 1rem;
  642. }
  643.     </style>
  644. {% endblock %}
  645.     
  646. {% block body_container %}  
  647. <div id="pages"></div>
  648.     <div   class="body-container container">
  649.         <div class="wrapper-list">
  650.             <div class="wrapper-item row">
  651.                 <div class="wrapper-gallery col-md-6">
  652.                     <div id="devisvalid" class="{{devisvalid}}"><h3>Votre devis a été transmis, après validation<br />Vous le recevrez directement dans votre boite email</h3></div>
  653.                     <div class="nav-top">
  654.                         <div></div>
  655.                         <img src="{{asset('img/icons/zoom-visionbox.png')}}" style="float: right;" id="openPreview">
  656.                     </div>
  657.                     <div class="preview-image">
  658.                     {% set idximages = 0 %}
  659.                         {% for img in Imagesjson %}
  660.                         <div class="blockimgslid">
  661.                         <img src="{{asset('uploads/images/optimise/'~img.Name)}}" data-index="{{idximages}}" alt="{{ img.Alt }}" class="img-responsive img-zoom">
  662.                         </div>
  663.                     {% set idximages = idximages + 1 %}
  664.                         {% endfor %}
  665.                     </div>
  666.                     <div style="display: flex; justify-content:space-around;">
  667.                         {% if 'Location' in vehicule.cat %}
  668.                         <div class="blockprice">
  669.                         <a href="{{ path('home') }}?location&filtre_nom={{ vehicule.getNom }}&catsel" id="showblock" class="btn action voir-detail">Location</a>
  670.                     {% set prxtbl = vehicule.PrixTable|json_decode %}
  671.                         <span class="prx">1 jour {{vehicule.prixLoc}} €<span class="prxttc"> HT</span></span>
  672.                         <span class="prx">7 jours {{prxtbl[7]}} €<span class="prxttc"> HT</span></span>
  673.                         <span class="prx">30 jours {{prxtbl[30]}} €<span class="prxttc"> HT</span></span>
  674.                         <span class="prx prxnbvehic"><span class="prxttc">{{VersionVehicules|length}} véhicule(s) en stock</span></span>
  675.                         
  676.                         </div>
  677.                         {% endif %}
  678.                         {% if 'Occasion' in vehicule.cat or 'Achat' in vehicule.cat %}
  679.                         {% set prxmin = 0 %}
  680.                         
  681.                         <div class="blockprice">
  682.                         <a href="{{ path('home') }}?achat&filtre_nom={{ vehicule.getNom }}&catsel" id="showblock2" class="btn action voir-detail" style="margin-top: 2rem;">Achat</a>
  683.                         {% if vehicule.prix > 0 %}
  684.                         {% set prxmin = vehicule.prix %}
  686.                         {% if 'Achat' in vehicule.cat %}
  687.                         <span class="prx">Neuf {{vehicule.prix}} €<span class="prxttc"> HT</span></span>
  688.                         {% endif %}
  689.                         {% endif %}
  690.                         
  691.                         {% if vehicule.prixoccas > 0 %}
  692.                         {% set prxmin = vehicule.prixoccas %}
  693.                         {% if 'Occasion' in vehicule.cat %}
  694.                         <span class="prx">Occasion {{vehicule.prixoccas}} €<span class="prxttc"> HT</span></span>
  695.                         <span class="prx prxnbvehic"><span class="prxttc">{{vehicule.NbOccasion}} véhicule(s) en stock</span></span>
  696.                         {% endif %} 
  697.                         {% endif %} 
  698.                         
  699.                         </div>
  700.                         {% endif %}
  701.                     </div> 
  702.                     <p class="blockpriceprx">Hors éventuelles remises</p>
  703.                     <div class="box-cart lienimg">
  704.                         <h4 class="title">Photos en situation</h4>
  705.                         <div class="listim content">
  706.                         {% set dexphot = 0 %}
  707.                             {% for Photos in vehicule.getPhotos|json_decode %}
  708.                             <div class="">
  709.                             <div class="image-wrapper">
  710.                             <img src="/uploads/images/optimise/{{Photos.Name}}" onclick="openPhotoSwipes({{dexphot}}, photocov)" alt="" class="" > 
  711.                             </div>
  712.                             </div>
  713.                             {% set dexphot = dexphot + 1 %}
  714.                             {% endfor %}
  715.                         </div>  
  716.                         <div id="photocov">
  717.                             {% for Photos in vehicule.getPhotos|json_decode %} 
  718.                             <img src="/uploads/images/optimise/{{Photos.Name}}" alt="" class="" >  
  719.                             {% endfor %}
  720.                         </div>  
  721.                     </div>
  722.                     <div class="box-cart">
  723.                         <h4 class="title">Dossier technique</h4>
  724.                         <div class="content"> 
  725.                             <ul>
  726.                                 {% for media in vehicule.getMedias|json_decode %}
  727.                                 <li>
  728.                                     <a href="{{asset('uploads/images/'~media.ImgFile)}}">{{ media.Name }}</a>
  729.                                 </li>
  730.                                 {% endfor %}
  731.                             </ul>
  732.                         </div>
  733.                     </div>
  734.                     <div class="box-cart">
  735.                         <h4 class="title">FAQ et conseils</h4>
  736.                         <div class="content faq" id="accordion"> 
  737.                             {% for faq in Faqs %}
  738.                             <div class="card">
  739.                                 <div class="card-header" id="faqHeading-{{ loop.index }}">
  740.                                     <div class="mb-0">
  741.                                         <h5 class="faq-title" data-toggle="collapse" data-target="#faqCollapse-{{ loop.index }}" data-aria-expanded="{% if loop.index == 1 %}true{% else %}false{% endif %}" data-aria-controls="faqCollapse-{{ loop.index }}">
  742.                                             <span class="badge">{{ loop.index }}</span>{{ faq.Titre | raw }}
  743.                                         </h5>
  744.                                     </div>
  745.                                 </div>
  746.                                 <div id="faqCollapse-{{ loop.index }}" class="collapse" aria-labelledby="faqHeading-{{ loop.index }}" data-parent="#accordion">
  747.                                     <div class="card-body">
  748.                                         {{ faq.Detail | raw }}
  749.                                     </div>
  750.                                 </div>
  751.                             </div>
  752.                             {% endfor %}
  753.                         </div>
  754.                     </div>
  755.                 </div>
  756.                 <div class="wrap-infos col-md-6">
  757.                     <h1 class="title-product">
  758.                         {{ vehicule.getNom }}
  759.                     </h1> 
  760.                     <div class="descr">
  761.                             {{ vehicule.getBlocText | raw }}
  762.                         </div> 
  764.                         {% for caractli in caractlistesArray %}
  765.                         {% if caractli.caractvehicule.getType == "Accordeon" %}
  766.                         {% set nameaccord = caractli.caractvehicule.getName %}
  767.                         {% set isused = false %}
  768.                                     {% for caractliste in caractlistesArray %}
  769.                                     {% if caractliste.caractvehicule.getType == nameaccord %}
  770.                                         {% set isused = true %}
  771.                                         {% endif %}
  772.                                     {% endfor %}
  774.                                     {% if isused == true %}
  775.                                     
  776.                           <div class="caracdeon">
  777.                               <h5 onclick="caracdeon(this)">{{caractli.caractvehicule.getName}}</h5>
  778.                               
  779.                             <div class="caract">
  780.                                 <ul>
  781.                                     {% for caractliste in caractlistesArray %}
  782.                                     {% if caractliste.caractvehicule.getType == nameaccord %}
  783.                                     
  784.                                         <li>
  785.                                             <b>{{ caractliste.caractvehicule.getName }} :</b> {{ caractliste.value }}
  786.                                         </li>
  787.                                         {% endif %}
  788.                                     {% endfor %}
  789.                                 </ul>
  790.                             </div> 
  791.                           </div>
  792.                           
  793.                                     {% endif %}
  794.                                     
  795. {% endif %}
  796.                         {% endfor %}
  797.                 
  799.                             <div class="caract">
  800.                                 <ul>
  801.                                     {% for caractliste in caractlistesArray %}
  802.                                     {% if caractliste.caractvehicule.getType == '' %}
  803.                                     
  804.                                         <li>
  805.                                             <b>{{ caractliste.caractvehicule.getName }} :</b> {{ caractliste.value }}
  806.                                         </li>
  807.                                         {% endif %}
  808.                                     {% endfor %}
  809.                                 </ul>
  810.                             </div> 
  811. <br />    
  812. <br />
  813.     <div class="shareblock">
  814.     <span>Partagez :</span>
  815.     {% set currentPath = absolute_url( path(app.request.attributes.get('_route'),
  816.                        app.request.attributes.get('_route_params')) )  %}
  817.     
  818. <!-- Facebook -->
  819.        <a target="_blank" title="Facebook" href="https://www.facebook.com/sharer.php?u={{currentPath}}" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;"><img class="iconshare" src="{{asset('/img/logo-fb-black.svg')}}" alt="Facebook" /></a>
  820. <!-- //Facebook -->
  822. <!-- Twitter -->
  823.         <a target="_blank" title="Twitter" href="https://twitter.com/share?url={{currentPath}}" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;"><img class="iconshare" src="{{asset('/img/logo-twitter-black.svg')}}" alt="Twitter" /></a>
  824. <!-- //Twitter -->
  827. <!-- Linkedin -->
  828.         <a target="_blank" title="Linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{currentPath}}" rel="nofollow" onclick="javascript:window.open(this.href, '','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><img class="iconshare" src="{{asset('/img/linkedin-icon.svg')}}" alt="Linkedin" /></a>
  829. <!-- //Linkedin -->
  831.         <a target="_blank" title="Pinterest" href="http://pinterest.com/pin/create/button/?url={{currentPath}}&media=http%3A%2F%2Fwww.aliasdmc.com%2Fimages%2Fthumbnail.jpg" rel="nofollow" onclick="javascript:window.open(this.href, '','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><img class="iconshare" src="{{asset('/img/pinterest-1.svg')}}" alt="Pinterest" /></a> 
  833. </div>
  835.                 </div>
  836.             </div>
  837.         </div>
  838.     </div>
  839.     <div class="details-wrapper">
  840.         
  841.         
  842.     <div id="findevis" style="text-align: center;width: 100% !important;margin-left: 0 !important;"></div>
  843.         <!-- style="background: #f7f8f9;padding-top: 9rem;" -->
  844.         <!-- <div>
  845.             <div class="nav-stape">
  846.                 <div class="content">
  847.                     <a href="javascript:void(0)" id="prev" class="prev btn-nav btn">Précédent</a>
  848.                     <span class="value" id="etapenb"> 
  849.                         Etape 1/4
  850.                     </span>
  851.                     <span class="value" id="prixTotal"> 
  852.                         HT : {{ vehicule.getPrixLoc|default(0) }} €  
  853.                     </span>
  854.                     <span class="value" id="prixTotalTTC">
  855.                     {% set prxttc = vehicule.getPrixLoc|default(0) + ((vehicule.getPrixLoc|default(0) * 20) / 100) %}
  856.                         TTC : {{ prxttc|number_format(2) }} €
  857.                     </span>
  858.                     <a href="javascript:void(0)" id="next" class="next btn-nav btn">Suivant</a>
  859.                 </div>
  860.             </div>
  861.         </div> -->
  862.         <input type="hidden" name="prixVehicule" id="prixVehicule" value="{{ vehicule.getPrixLoc|default(0) }}">
  863.         <input type="hidden" name="prixTable" id="prixTable" value="{{ vehicule.getPrixTable }}">
  864.         <input type="hidden" name="prixmoisplus" id="prixmoisplus" value="{{ vehicule.getPrixmoisplus|default(0) }}">
  865.         {% set carac = vehicule.Caractliste %}
  866.         <input type="hidden" name="caractliste" id="caractliste" value="{{ carac }}"> 
  867.     </div>
  868.     <!-- Root element of PhotoSwipe. Must have class pswp. -->
  869.     <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  871.         <!-- Background of PhotoSwipe. 
  872.             It's a separate element as animating opacity is faster than rgba(). -->
  873.         <div class="pswp__bg"></div>
  875.         <!-- Slides wrapper with overflow:hidden. -->
  876.         <div class="pswp__scroll-wrap">
  878.             <!-- Container that holds slides. 
  879.                 PhotoSwipe keeps only 3 of them in the DOM to save memory.
  880.                 Don't modify these 3 pswp__item elements, data is added later on. -->
  881.             <div class="pswp__container">
  882.                 <div class="pswp__item"></div>
  883.                 <div class="pswp__item"></div>
  884.                 <div class="pswp__item"></div>
  885.             </div>
  887.             <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
  888.             <div class="pswp__ui pswp__ui--hidden">
  890.                 <div class="pswp__top-bar">
  892.                     <!--  Controls are self-explanatory. Order can be changed. -->
  894.                     <div class="pswp__counter"></div>
  896.                     <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
  898.                     {# <button class="pswp__button pswp__button--share" title="Share"></button> #}
  900.                     <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
  902.                     <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
  904.                     <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
  905.                     <!-- element will get class pswp__preloader--active when preloader is running -->
  906.                     <div class="pswp__preloader">
  907.                         <div class="pswp__preloader__icn">
  908.                         <div class="pswp__preloader__cut">
  909.                             <div class="pswp__preloader__donut"></div>
  910.                         </div>
  911.                         </div>
  912.                     </div>
  913.                 </div>
  915.                 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
  916.                     <div class="pswp__share-tooltip"></div> 
  917.                 </div>
  919.                 <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
  920.                 </button>
  922.                 <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
  923.                 </button>
  925.                 <div class="pswp__caption">
  926.                     <div class="pswp__caption__center"></div>
  927.                 </div>
  929.             </div>
  931.         </div>
  933.     </div> 
  934.     {% set firstimg = '' %}
  935.     {% set isfirstimg = 0 %}
  936.     {% for img in vehicule.getImg %} 
  937.         {% if isfirstimg == 0 %}
  938.         {% set firstimg = img.getImgFile %}    
  939.     {% set isfirstimg = 1 %}    
  940.         {% endif %}         
  941.                         {% endfor %}  
  942.     <input type="hidden" id="jsondata" value='[{"id":{{ vehicule.getId }},"nb":0,"name":"{{ vehicule.getNom }}","ImgFile":"{{ firstimg }}","datedeb":"","datefin":"","nbjours":0,"service":"Location","soustot":0,"equip":[],"cover":[],"origine":"{{ vehicule.origine }}"}]'>
  944.     <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  945.         <div class="modal-dialog modal-lg" data-dismiss="modal">
  946.             <div class="modal-content img-modal-content" >              
  947.             <div class="modal-body img-modal-body">
  948.                 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
  949.                 <img src="" id="imagePreview" class="imagepreview" style="width: 100%;" >
  950.             </div>
  951.         </div>
  952.     </div>
  953.     <div id="titleproduct">{{vehicule.getNom}}</div>
  955.     <div id="localock">{{ LocationLockjson }}</div>
  956. {% endblock %}
  958. {% block javascripts %}
  959.     {{parent()}}
  960.     <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
  961.     <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>
  962.     <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>
  963.     <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
  964.     <script type="text/javascript">
  965.     /*
  966.     <scr ipt type="text/javascript" src="https://momentjs.com/downloads/moment.min.js"></scr ipt>
  967.     <scr ipt type="text/javascript" src="https://momentjs.com/downloads/moment-with-locales.min.js"></scr ipt>*/
  969. function caracdeon(el){
  970.       if( $(el).parent().find('.caract').height() == 0 ){
  971.     $(el).parent().find('.caract').height('auto')
  972.     }else{
  973.     $(el).parent().find('.caract').height(0)
  974.     }
  975. }
  976.     function formatDate(date) {
  977.     //var d = new Date(date),
  978.     //ou si envoyé au format date: 
  979.         var d = date
  980.          
  981.          let month = '' + (d.getMonth() + 1)
  982.          let day = '' + d.getDate()
  983.          let year = d.getFullYear()
  984.     
  985.       if (month.length < 2) 
  986.           month = '0' + month;
  987.       if (day.length < 2) 
  988.           day = '0' + day;
  989.     
  990.       return [year, month, day].join('-');
  991.     }
  992.     /*
  993. let jsondata = $('#jsondata').val()
  995.     jsondata = JSON.parse(jsondata);
  996.     
  997.   
  998. let jsondatastring = JSON.stringify( jsondata )
  999. $('#jsondata').val(jsondatastring) 
  1001. */
  1003.     /* 'equip':[{'name':'','nbmax':'0','TypePrix':'','PrixTable':'[]','Prixmoisplus':null,'prix':'0','id':0,'texte':null,'img':[],'modal':{'display':'none'},'nbchoisi':0}] */
  1005.     /*'cover':[{'name':'','nbmax':null,'TypePrix':'','PrixTable':'[]','Prixmoisplus':null,'prix':'0','id':0,'texte':null,'img':[],'modal':{'display':'none'},'nbchoisi':'0'}]*/
  1007.     function openopt(trg){ 
  1008.         if( $( '#'+ trg+ ' > .accordbot').height() == 0){
  1009.             $( '#'+ trg+ ' > .accordbot').height('auto')
  1010.             $( '#'+ trg+ ' > .accordbot').css('overflow',  'initial')
  1011.             $( '#'+ trg+ ' > .accordtop > img').css('transform',  'rotate(0deg)')
  1012.             
  1013.         }else{
  1014.             $( '#'+ trg+ ' > .accordbot').height(0)
  1015.             $( '#'+ trg+ ' > .accordbot').css('overflow',  'hidden')
  1016.             $( '#'+ trg+ ' > .accordtop img').css('transform',  'rotate(180deg)')
  1017.         }
  1018.         
  1019.     }
  1020.         
  1021.         $(document).on('click','.box-cart .title',function(){
  1022.             $(this).parent().toggleClass('open');
  1023.             $(this).parent().find('.content').slideToggle();
  1024.         });
  1026.         var start_date = 0;
  1027.         var end_date = 0;
  1028.         var prixVehicule = parseFloat($('#prixVehicule').val()) || 0;
  1030.         
  1031.         $(document).ready(function(){
  1033.             let queryString = window.location.search;  
  1034.         if( queryString == '?location' ){
  1035.             $('.body-container').hide()
  1036.             $('.details-wrapper').show()
  1037.             $('.nav-stape').show()
  1038.         }
  1040.             /*$('.img-zoom').on('click', function() {
  1041.                 $('#imagePreview').attr('src', $(this).attr('src'));
  1042.                 $('#imagemodal').modal('show');   
  1043.             });*/
  1045.             $(document).on('click','#openPreview',function(){ 
  1046.                 $('.slick-slide.slick-current.slick-active').children().click();
  1047.             })
  1048.             
  1049.             $("table tr td.disabled").click(function(event) {
  1050.                 this.onclick = null;
  1051.                 event.preventDefault();
  1052.                 event.returnValue = false;
  1053.                 return false;
  1054.             });
  1056.             /*$('.preview-image').slick({
  1057.                 dots: true,
  1058.                 infinite: true,
  1059.                 speed: 500,
  1060.                 fade: true,
  1061.                 cssEase: 'linear'
  1062.             });*/
  1064.             SlickZoom({selector:'.preview-image',item:'.img-zoom'});
  1067.             $(document).on("click",".minus",function(){
  1068.                 $val = parseInt($(this).next().val()) || 0;
  1069.                 nbmax = parseInt($(this).parents('.detailequip').data('nbmax'));
  1070.                 nbmax = nbmax - parseInt($(this).parents('.detailequip').find('.nbsel').val());
  1071.                 if($val<1){
  1072.                     $val = 0;
  1073.                 }
  1074.                 else{
  1075.                     $val--;
  1076.                 }
  1078.                 let Maxpv = parseInt($(this).parents('.detailequip').data('maxpv')); 
  1079.                 let nbve = Maxpv * parseInt($(this).parents('.detailequip').find('.nbvehicsel').val());
  1080.  
  1081.             if($('#nbJours').val() == 0){
  1082.                 $val = 0;
  1083.                 toastr.error("Attention ! Vous devez d'abord sélectionner vos dates ou une durée de location");
  1084.             }else if ($val>nbve) {
  1085.                 $(this).val(nbve);
  1086.                 $val = nbve;
  1087.                 //nb max : nbve
  1088.                 toastr.error("Attention ! Vous avez déjà atteint le nombre maximum pour ce type d'option");
  1089.             }else if ($val>nbmax) {
  1090.                     $(this).next().val(nbmax);
  1091.                     $val = nbmax;
  1092.                     toastr.error("Attention ! Vous avez déjà atteint le nombre maximum pour ce type d'option");
  1093.                 } else {
  1094.                     $(this).next().val($val);
  1095.                 }
  1097.                 
  1098.                 if($val==0){
  1099.                     $(this).parents('.detailequip').find('.prix').addClass('opaclair');
  1100.                 }
  1101.                 else{
  1102.                     $(this).parents('.detailequip').find('.prix').removeClass('opaclair');
  1103.                 }
  1104.             });
  1106.             $(document).on("click",".plus",function(){
  1107.                 $val = parseInt($(this).prev().val()) || 0; 
  1108.                 Maxpv = parseInt($(this).parents('.detailequip').data('maxpv')); 
  1109.                 nbmax = parseInt($(this).parents('.detailequip').data('nbmax'));
  1110.                 nbmax = nbmax -  parseInt($(this).parents('.detailequip').find('.nbsel').val());
  1111.                 
  1112.                 $val++;
  1113.                 if($val<1){
  1114.                     $val = 0;
  1115.                 }
  1117.                 let nbve 
  1118.                 if( Maxpv > 0){
  1119.                  nbve = Maxpv * parseInt($(this).parents('.detailequip').find('.nbvehicsel').val());
  1120.                 }else{
  1121.                  nbve = parseInt($(this).parents('.detailequip').find('.nbvehicsel').val());
  1123.                 }
  1124.                 
  1125.  
  1126.             if($('#nbJours').val() == 0){
  1127.                  
  1128.                 $val = 0;
  1129.                 toastr.error("Attention ! Vous devez d'abord sélectionner vos dates ou une durée de location");
  1130.             }else if ($val>nbve) {
  1131.                 $(this).val(nbve);
  1132.                 $val = nbve;
  1133.                 toastr.error("Attention ! Vous avez déjà atteint le nombre maximum pour ce type d'option");
  1134.             }else if ($val>nbmax) {
  1135.                     $(this).prev().val(nbmax);
  1136.                     $val = nbmax;
  1137.                     toastr.error("Attention ! Vous avez déjà atteint le nombre maximum pour ce type d'option");
  1138.                 } else {
  1139.                     $(this).prev().val($val);
  1140.                 }
  1142.                 if($val==0){
  1143.                     $(this).parents('.detailequip').find('.prix').addClass('opaclair');
  1144.                 }
  1145.                 else{
  1146.                     $(this).parents('.detailequip').find('.prix').removeClass('opaclair');
  1147.                 }
  1148.             });
  1150.             $(document).on('change','.chkbx',function(){
  1151.                 if($(this).is(':checked')){
  1152.                     $(this).parents('.detailequip').find('.prix').removeClass('opaclair');
  1153.                 }
  1154.                 else{
  1155.                     $(this).parents('.detailequip').find('.prix').addClass('opaclair');
  1156.                 }
  1157.             });
  1158. /*
  1159.             $(document).on('click','.select-date',function(){
  1160.                 var temp_date = new Date();
  1161.                 var temp_day = parseInt(temp_date.getDate());
  1162.                 var temp_month = parseInt(temp_date.getMonth());
  1163.                 var temp_year = parseInt(temp_date.getFullYear());
  1164.                 if(parseInt($(this).data('timestamp')) < (+new Date(temp_year, temp_month,temp_day))){
  1165.                     return false;
  1166.                 }
  1167.                 if(start_date==0){
  1168.                     start_date = $(this).attr('id');
  1169.                 }
  1170.                 else if(end_date==0){
  1171.                     end_date = $(this).attr('id');
  1172.                 }
  1173.                 else{
  1174.                     end_date = 0;
  1175.                     start_date = $(this).attr('id');
  1176.                 }
  1177.                 
  1178.                 if(end_date != 0 && $("#"+start_date).data('timestamp') > $("#"+end_date).data('timestamp') ){
  1179.                     let temp = start_date;
  1180.                     start_date = end_date;
  1181.                     end_date = temp;
  1182.                 }
  1184.                 $('.select-date').removeClass('active');
  1185.                 $('.select-date').removeClass('start');
  1186.                 $('.select-date').removeClass('end');
  1188.                 if(start_date!=0){
  1189.                     let day = $("#"+start_date).data('day');
  1190.                     if(day<10)
  1191.                         day = "0"+day;
  1192.                     let month = parseInt($("#"+start_date).data('month'))+1;
  1193.                     if(month<10)
  1194.                         month = "0"+month;
  1195.                     let year = $("#"+start_date).data('year');
  1196.                     $('#start_date').text(day+"/"+month+"/"+year);
  1197.                     $("#"+start_date).addClass('active');
  1198.                     $("#"+start_date).addClass('start');
  1199.                 }
  1200.                 else{
  1201.                     $('#start_date').text("--/--/---");
  1202.                 }
  1204.                 if(end_date!=0){
  1205.                     let day = $("#"+end_date).data('day');
  1206.                     if(day<10)
  1207.                         day = "0"+day;
  1208.                     let month = parseInt($("#"+end_date).data('month'))+1;
  1209.                     if(month<10)
  1210.                         month = "0"+month;
  1211.                     let year = $("#"+end_date).data('year');
  1212.                     $('#end_date').text(day+"/"+month+"/"+year);
  1213.                     $("#"+end_date).addClass('active');
  1214.                     $("#"+end_date).addClass('end');
  1215.                     $('#nbJours').val(datediff($('#start_date').text(), $('#end_date').text()));
  1216.                 }
  1217.                 else{
  1218.                     $('#nbJours').val(0);
  1219.                     $('#end_date').text("--/--/---");
  1220.                 }
  1221.                 
  1222. let jsondatas = $('#jsondata').val()
  1224.     jsondata = JSON.parse(jsondatas);
  1225.                 
  1226.                 if(start_date!=0 && end_date!=0){
  1228.                     start_date_day = parseInt($("#"+start_date).data('day'));
  1229.                     if(start_date_day<10)
  1230.                         start_date_day = "0"+start_date_day;
  1231.                     start_date_month = parseInt($("#"+start_date).data('month'))+1;
  1232.                     if(start_date_month<10)
  1233.                         start_date_month = "0"+start_date_month;
  1234.                     start_date_string = $("#"+start_date).data('year')+"-"+start_date_month+"-"+start_date_day;
  1236.                     end_date_day = parseInt($("#"+end_date).data('day'));
  1237.                     if(end_date_day<10)
  1238.                         end_date_day = "0"+end_date_day;
  1239.                     end_date_month = parseInt($("#"+end_date).data('month'))+1;
  1240.                     if(end_date_month<10)
  1241.                         end_date_month = "0"+end_date_month;
  1242.                     end_date_string = $("#"+end_date).data('year')+"-"+end_date_month+"-"+end_date_day;
  1244.                     start_date_string = $("#"+start_date).data('year')+"-"+start_date_month+"-"+start_date_day;
  1245.                     end_date_string = $("#"+end_date).data('year')+"-"+end_date_month+"-"+end_date_day;
  1247.                     dates = enumerateDaysBetweenDates(start_date_string,end_date_string);
  1248.                     for (let i = 0; i < dates.length; i++) {
  1249.                         $('#'+dates[i].getFullYear()+"-"+(dates[i].getMonth())+"-"+dates[i].getDate()).addClass('active');
  1250.                     }
  1251.                      
  1252.                 jsondata[0].datedeb = start_date_string
  1253.                 jsondata[0].datefin = end_date_string
  1254.                 jsondata[0].nbjours = datediff( $('#start_date').text(), $('#end_date').text() )
  1255.                 jsondata[0].soustot = $('#nb_vehicules').val() 
  1256.                 //add dimentions véhicule
  1257.                 jsondata[0].dimentions = $('#caractliste').val() 
  1259.                 }
  1260.                  
  1261.   
  1262. let jsondatastring = JSON.stringify( jsondata )
  1263.   $('#jsondata').val(jsondatastring) 
  1266.                 let id_vehicule = {{ vehicule.getId }} 
  1267.             let Nb_max = {{ vehicule.nbVehicules }} 
  1268.             let locationlock = $('#localock').text() 
  1269.             locationlock = JSON.parse(locationlock)
  1270.             for (let index = ( locationlock.length -1 ); index >= 0 ; index--) { 
  1271.                 const element = locationlock[index]; 
  1273.                 if( element.VehicId != id_vehicule ){ 
  1274.                     locationlock.splice(index, 1) 
  1275.                 }
  1276.             }  
  1278.         let disp_max = Nb_max
  1280.         dates = []
  1281.              
  1282.              if( typeof(start_date_string) !== 'undefined' && typeof(end_date_string) !== 'undefined' ){ 
  1283.                  dates = getDates(start_date_string,end_date_string);
  1284.              }
  1285.                     
  1287.                 dates.forEach(element => {
  1288.                     
  1289.                      let nb_dispo = Nb_max
  1290.                     
  1291.                     for (let index = 0; index < locationlock.length; index++) {  
  1292.                         let deb_date = new Date( locationlock[index].DateDeb.timestamp * 1000 )
  1293.                         let fin_date = new Date( locationlock[index].DateFin.timestamp * 1000 )
  1294.                         if( new Date( deb_date ) <= new Date(element) && new Date( fin_date ) >= new Date(element) ){ 
  1295.                             nb_dispo = nb_dispo - locationlock[index].Nbsel
  1296.                         }                         
  1297.                     } 
  1299.                     if( disp_max >= nb_dispo){
  1300.                         disp_max = nb_dispo
  1301.                     }
  1302.                     
  1303.                 });
  1305.             $('#nb_vehicules').empty();
  1307.             
  1308.             if( disp_max > 0){
  1309.                 for (let index = 1; index <= disp_max; index++) {
  1310.                  var option = document.createElement('option');
  1311.                     option.text = option.value = index;
  1313.                     document.getElementById("nb_vehicules").add(option, 0);
  1314.             } 
  1315.             } 
  1316.             
  1318.           
  1319.              
  1321.                 MiseAJourPrix();
  1322.             });*/
  1324.             function getDates(startDate, stopDate) {
  1325.     var dateArray = [];
  1326.     var currentDate = moment(startDate);
  1327.     var stopDate = moment(stopDate);
  1328.     while (currentDate <= stopDate) {
  1329.         dateArray.push( moment(currentDate).format('YYYY-MM-DD') )
  1330.         currentDate = moment(currentDate).add(1, 'days');
  1331.     }
  1332.     return dateArray;
  1333. }
  1335.             $(document).on('change','#nbJours', function() {
  1336.                 if(start_date!=0){
  1338.                     $('.select-date').removeClass('active');
  1339.                     $('.select-date').removeClass('start');
  1340.                     $('.select-date').removeClass('end');
  1342.                     start_date_day = parseInt($("#"+start_date).data('day'));
  1343.                     if(start_date_day<10)
  1344.                         start_date_day = "0"+start_date_day;
  1345.                     start_date_month = parseInt($("#"+start_date).data('month'))+1;
  1346.                     if(start_date_month<10)
  1347.                         start_date_month = "0"+start_date_month;
  1348.                     start_date_string = $("#"+start_date).data('year')+"-"+start_date_month+"-"+start_date_day;
  1350.                     $('#start_date').text(start_date_day+"/"+start_date_month+"/"+$("#"+start_date).data('year'));
  1351.                     $("#"+start_date).addClass('active');
  1352.                     $("#"+start_date).addClass('start'); 
  1354.                     nbJours = parseInt($('#nbJours').val())||0;
  1355.                     if(nbJours<0){
  1356.                         nbJours = 0;
  1357.                     }
  1358.                     if(nbJours>0){
  1359.                         nbJours--;
  1360.                     }
  1362.                     end_date = moment(start_date_string).add(nbJours,'days');
  1363.                     end_date_day = parseInt(end_date.format('D'));
  1364.                     end_date_month = (parseInt(end_date.format('M'))||0)-1;
  1365.                      end_date_year = end_date.format('YYYY')
  1366.                     end_date = end_date.format('YYYY')+'-'+end_date_month+'-'+end_date.format('D');
  1367.                      
  1368.                     end_date_day = end_date_day;
  1369.                     if(end_date_day<10)
  1370.                         end_date_day = "0"+end_date_day; 
  1371.                     if(end_date_month<10)
  1372.                         end_date_month = "0"+end_date_month;
  1373.                     end_date_string = end_date_year+"-"+(end_date_month +1 )+"-"+end_date_day;
  1375.                 /*    end_date_day = parseInt($("#"+end_date).data('day'));
  1376.                     if(end_date_day<10)
  1377.                         end_date_day = "0"+end_date_day;
  1378.                     end_date_month = parseInt($("#"+end_date).data('month'))+1;
  1379.                     if(end_date_month<10)
  1380.                         end_date_month = "0"+end_date_month;
  1381.                     end_date_string = $("#"+end_date).data('year')+"-"+end_date_month+"-"+end_date_day;*/
  1382.                     
  1383.                     $('#end_date').text(end_date_day+"/"+(end_date_month +1 )+"/"+end_date_year);
  1384.                     $("#"+end_date).addClass('active');
  1385.                     $("#"+end_date).addClass('end');
  1386.                     dates = enumerateDaysBetweenDates(start_date_string,end_date_string); 
  1387.                     for (let i = 0; i < dates.length; i++) {
  1388.                         $('#'+dates[i].getFullYear()+"-"+(dates[i].getMonth())+"-"+dates[i].getDate()).addClass('active');
  1389.                     }
  1392.                 }
  1393.                 else{
  1394.                     let jsondatas = $('#jsondata').val()
  1396.     jsondata = JSON.parse(jsondatas);
  1397.                   jsondata[0].datedeb = ''
  1398.                 jsondata[0].datefin = ''
  1399.                 jsondata[0].nbjours = $('#nbJours').val()  
  1400.   
  1401. let jsondatastring = JSON.stringify( jsondata )
  1402.   $('#jsondata').val(jsondatastring) 
  1403.                 //    console.log( $(this).val() );
  1404.                 }
  1405.  
  1406.                 MiseAJourPrix();
  1407.             });
  1410.         if($('.devisvalid').length > 0){
  1411.             setTimeout(() => {
  1412.                 $('#devisvalid').removeClass('devisvalid');
  1413.                 $('#devisvalid').addClass('devisvalid_hide'); 
  1414.                 document.cookie = "devis_page_{{ vehicule.getId }}=-1 ; path=/";
  1415.                 document.cookie = "validevis_page_{{ vehicule.getId }}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  1416.             }, 5000);
  1417.         }
  1419.         });
  1422.         $('.voir-detail').click(function(){
  1423.             //    $('html, body').animate({scrollTop:($(".details-wrapper").offset().top)}, 800);
  1424.             $('.body-container').hide()
  1425.             $('.details-wrapper').show()
  1426.             $('.nav-stape').show()
  1427.             
  1428.         });
  1430.     /*    $('.prev').click(function(){
  1431.             //    $('html, body').animate({scrollTop:($(".details-wrapper").offset().top)}, 800);
  1432.             $('.body-container').show()
  1433.             $('.nav-stape').hide()
  1434.             $('.details-wrapper').hide()
  1435.         });*/
  1437.         function getAllEvents(element) {
  1438.             var result = [];
  1439.             for (var key in element) {
  1440.                 if (key.indexOf('on') === 0) {
  1441.                     result.push(key.slice(2));
  1442.                 }
  1443.             }
  1444.             return result.join(' ');
  1445.         }
  1446. /*
  1447.         var el = $('input').bind(getAllEvents($('input')[0]), function(e) {
  1448.             MiseAJourPrix();
  1449.         });
  1450.         var el = $('select').bind(getAllEvents($('select')[0]), function(e) {
  1451.             MiseAJourPrix();
  1452.         });
  1453.         var el = $('.minus').bind(getAllEvents($('.minus')[0]), function(e) {
  1454.             MiseAJourPrix();
  1455.         });
  1456.         var el = $('.plus').bind(getAllEvents($('.plus')[0]), function(e) {
  1457.             MiseAJourPrix();
  1458.         });
  1459.         var el = $('.select-date').bind(getAllEvents($('.select-date')[0]), function(e) {
  1460.             MiseAJourPrix();
  1461.         });
  1462.         var el = $('.nbequ').bind(getAllEvents($('.nbequ')[0]), function(e) {
  1463.             $val = parseInt($(this).val()) || 0;
  1464.             nbmax = parseInt($(this).parents('.detailequip').data('nbmax'));
  1465.                 nbmax = nbmax - parseInt($(this).parents('.detailequip').find('.nbsel').val());
  1466.  
  1467.                 let Maxpv = parseInt($(this).parents('.detailequip').data('maxpv')); 
  1468.             let nbve = Maxpv * parseInt($(this).parents('.detailequip').find('.nbvehicsel').val());
  1470.             if($val<0){
  1471.                 $val = 0;
  1472.                 $(this).val($val);
  1473.             }
  1475.             if( $('#nbJours').val() == 0){
  1476.                 $val = 0;
  1477.                 toastr.error("Attention ! Vous devez d'abord sélectionner vos dates ou une durée de location");
  1478.             }else if ($val>nbve) {
  1479.                 $(this).val(nbve);
  1480.                 $val = nbve;
  1481.                 toastr.error("Attention ! Vous avez déjà atteint le nombre maximum pour ce type d'option");
  1482.             }else if ($val>nbmax) {
  1483.                 $(this).val(nbmax);
  1484.                 $val = nbmax;
  1485.                 toastr.error("Attention ! Vous avez déjà atteint le nombre maximum pour ce type d'option");
  1486.             } else {
  1487.                 $(this).val($val);
  1488.             }
  1490.             if($val==0){
  1491.                 $(this).parents('.detailequip').find('.prix').addClass('opaclair');
  1492.             }
  1493.             else{
  1494.                 $(this).parents('.detailequip').find('.prix').removeClass('opaclair');
  1495.             }
  1496.             MiseAJourPrix();
  1497.         });*/
  1499.     /*    function MiseAJourPrix(){
  1500.             let nbvehicule = parseInt($('#nb_vehicules').val()) || 0;
  1501.         //    let nbjours = datediff($('#start_date').text(), $('#end_date').text())
  1502.             let nbjours = $('#nbJours').val()
  1503.             let prixObject = calculPrixTotal();
  1504.             try {
  1505.                 var PrixTable =  JSON.parse( $("#prixTable").val() )
  1506.             } catch (error) {
  1507.                 var PrixTable =  $("#prixTable").val()
  1508.             }
  1509.             let prixmoisplus = parseFloat($('#prixmoisplus').val()) || 0;
  1510.             let prixLocation = 0; 
  1512.             if(PrixTable !== null){
  1513.                 if( nbjours >= 31 ){
  1514.                     let nbrestant = nbjours - 30
  1515.                     let prixunitsupp = prixmoisplus
  1516.                     prixLocation = ( (parseInt( PrixTable[30] , 10)|| 0) + ( prixunitsupp * nbrestant ) ) * nbvehicule ; 
  1517.             
  1518.                 }
  1519.                 else{
  1520.                     prixLocation = (parseFloat(PrixTable[nbjours])||0)  * nbvehicule
  1521.                     
  1522.                 }
  1523.             }
  1524.                 
  1525. let jsondatas = $('#jsondata').val()
  1527.     jsondata = JSON.parse(jsondatas);
  1528.                  
  1529.                       
  1530.                  
  1531.                 jsondata[0].nbjours = $('#nbJours').val() 
  1532.                 //add dimentions véhicule
  1533.                 jsondata[0].dimentions = $('#caractliste').val() 
  1534.                 jsondata[0].soustot = prixLocation
  1535.                 jsondata[0].nb = parseInt($('#nb_vehicules').val()) || 0;
  1537.           
  1538.   
  1539. let jsondatastring = JSON.stringify( jsondata )
  1540.   $('#jsondata').val(jsondatastring) 
  1541.   let prxttc =  (prixObject.prix + prixLocation) + (((prixObject.prix + prixLocation) * 20) / 100) 
  1542.             $('#prixTotal').html('HT : '+(prixObject.prix + prixLocation)+' €');
  1543.             $('#prixTotalTTC').html('TTC : ' + prxttc.toFixed(2) +' €');
  1544.             $('#prixLocationttc').html( calcttc(prixLocation) + ' € TTC');
  1545.             $('#prixLocation').html(prixLocation+' € HT');
  1546.             $('#prixCovering').html(prixObject.prixCovering+' € HT');
  1547.             $('#prixCoveringttc').html( calcttc(prixObject.prixCovering )+' € TTC');
  1548.             $('#prixEquipement').html(prixObject.prixEquipement+' € HT');
  1549.             $('#prixEquipementttc').html( calcttc(prixObject.prixEquipement )+' € TTC');
  1550.         }
  1552.         function calculPrixTotal(){
  1554.             let nbvehicule = parseInt($('#nb_vehicules').val()) || 0;
  1555.             $('.nbvehicsel').val(nbvehicule)
  1556.             let nbjours = parseInt($('#nbJours').val())||0;
  1557.             let start_date = $('#start_date').text()
  1558.             start_date = start_date.split('/');
  1559.             start_date = start_date[2] +'-'+ start_date[1] +'-'+start_date[0]
  1560.             start_date = new Date(  start_date )
  1561.             let end_date = $('#end_date').text()
  1562.             end_date = end_date.split('/');
  1563.             end_date = end_date[2] +'-'+ end_date[1] +'-'+end_date[0]
  1564.             end_date = new Date(  end_date )
  1565.             prixObject = { prix:0, prix0:0, prixCovering:0, prixEquipement:0 }
  1567.             
  1568. let jsondata = $('#jsondata').val()
  1570.     jsondata = JSON.parse(jsondata);     
  1572.             for (var i = 0 ; i < $('.detailequip').length ; i++) {
  1573.                 value = $('.detailequip')[i];
  1574.                 
  1575.                 let prix = 0
  1576.                 let prix0 = 0
  1577.                 let prixmoisplus = parseFloat($(value).data('prixmoisplus')) || 0;
  1578.                 let prixmois = parseFloat($(value).data('prixmois')) || 0;
  1579.                 let prixUn;
  1581.                 let localock = JSON.parse( $('#localock').text())
  1582.                 let nbsel = 0
  1584.                 localock.forEach(element => {
  1585.                     if( element.vehictrue == false){
  1586.                         if(  element.OptionId == $(value).data('idoption')){
  1587.                             let DateDeb = new Date( element.DateDeb.timestamp * 1000 ) 
  1588.                             let DateFin = new Date( element.DateFin.timestamp * 1000 )
  1589.                             if( start_date <= DateFin && end_date >= DateDeb){ 
  1590.                             nbsel = nbsel + parseInt( element.Nbsel )
  1591.                             } 
  1592.                         
  1593.                         }
  1594.                     }
  1595.                     
  1596.                     
  1597.                 }); 
  1598.                 $(value).find('.nbsel').val(nbsel)
  1599.                 //$(value).attr( "data-nbsel", nbsel)
  1600.                                 
  1601.                 if ($(value).data('typeprix') == 'Variable') {
  1603.                     let nbchoisi = parseInt($(value).find('.nbequ').val()) || 0;
  1604.                     if(nbchoisi<0){
  1605.                         nbchoisi = 0;
  1606.                     }
  1607.                     
  1608.                     try {
  1609.                         var PrixTable =  JSON.parse( $(value).data('prixtable') )
  1610.                     } catch (error) {
  1611.                         var PrixTable =  $(value).data('prixtable')
  1612.                     }
  1613.                     if(PrixTable !== null){
  1614.                         if( nbjours >= 31 ){
  1615.                             let nbrestant = nbjours - 30
  1616.                             let prixunitsupp = prixmoisplus
  1617.                             prix = ( (parseInt( PrixTable[30] , 10)|| 0) + ( prixunitsupp * nbrestant ) ) * nbchoisi ; 
  1618.                             prix0 = ( (parseInt( PrixTable[30] , 10)|| 0) + ( prixunitsupp * nbrestant ) ) * nbchoisi ; 
  1619.                             prixUn = ( (parseInt( PrixTable[30] , 10)|| 0) + ( prixunitsupp * nbrestant ) );
  1620.                 
  1621.                         }
  1622.                         else{
  1623.                             prix = (parseFloat(PrixTable[nbjours])||0)  * nbchoisi
  1624.                             prix0 =  (parseFloat(PrixTable[nbjours])||0) * nbchoisi 
  1625.                             prixUn = (parseFloat(PrixTable[nbjours])||0) ;
  1626.                         }
  1627.                     }
  1629.                     if(nbchoisi>0){
  1630.                         $(value).find('.prix').html(prix+" €");
  1631.                     }
  1632.                     else{
  1633.                         $(value).find('.prix').html(prixUn+" €");
  1634.                     }
  1636.                 }
  1637.                 else if ($(value).data('typeprix') == 'Fixe par véhicule') {
  1638.                     
  1639.                     let nbchoisi = parseInt($(value).find('.nbequ').val()) || 0;
  1640.                     if(nbchoisi<0){
  1641.                         nbchoisi = 0;
  1642.                     }
  1644.                     let prixunit = parseFloat($(value).data('prix')) || 0;
  1645.                     prix = parseInt( nbchoisi, 10) *  prixunit  ;
  1646.                     prix0 = prixunit ;
  1648.                     if(nbchoisi>0){
  1649.                         $(value).find('.prix').html(prix+" €");
  1650.                     }
  1651.                     else{
  1652.                         $(value).find('.prix').html(prix0+" €");
  1653.                     }
  1655.                 }
  1656.                 else if ($(value).data('typeprix') == 'base + fixe par vehicule') {
  1657.                     
  1658.                     let nbchoisi = parseInt($(value).find('.nbequ').val()) || 0;
  1659.                     if(nbchoisi<0){
  1660.                         nbchoisi = 0;
  1661.                     }
  1663.                     let prixunit = parseFloat($(value).data('prix')) || 0;
  1664.                     let prxbase = parseFloat($(value).data('prixmoisplus')) || 0;
  1665.                     prix = parseInt( nbchoisi, 10) *  prixunit  ;
  1666.                     prix = prix + prxbase
  1667.                     prix0 = prixunit + prxbase;
  1669.                     if(nbchoisi>0){
  1670.                         $(value).find('.prix').html(prix+" €");
  1671.                     }
  1672.                     else{
  1673.                         $(value).find('.prix').html(prix0+" €");
  1674.                     }
  1676.                 }
  1677.                 else {
  1679.                     let nbchoisi = 0;
  1680.                     if($(value).find('.chkbx').is(':checked')){
  1681.                         nbchoisi = 1;
  1682.                     }
  1684.                     let prixunit = parseFloat($(value).data('prix')) || 0;
  1685.                     prix =  nbchoisi * prixunit  ;
  1686.                     prix0 =  prixunit  ;
  1688.                     if($(value).find('.chkbx').is(':checked')){
  1689.                         $(value).find('.prix').html(prix+" €");
  1690.                     }
  1691.                     else{
  1692.                         $(value).find('.prix').html(prix0+" €");
  1693.                     }
  1696.                 }
  1697.  
  1699.         
  1700.                 //type
  1702.                 //nbchois
  1704.                 prixObject.prix = prixObject.prix + prix
  1705.                 prixObject.prix0 = prixObject.prix0 + prix0
  1707.                 let nbch = 0
  1708.                 if($(value).find('.chkbx').is(':checked') ){
  1709.                     nbch = 1
  1710.                 }
  1711.                 if( parseInt($(value).find('.nbequ').val()) > 0){
  1712.                     nbch = parseInt($(value).find('.nbequ').val())
  1713.                 }
  1715.                 let detequ = {
  1716.                     name: $(value).data('name'),
  1717.                     nbmax:null,
  1718.                     TypePrix: $(value).data('typeprix'),
  1719.                     PrixTable:  $(value).data('prixtable'),
  1720.                     Prixmoisplus: parseFloat($(value).data('prixmois')),
  1721.                     prix: $(value).data('prix'),
  1722.                     id: $(value).data('idoption'),
  1723.                     texte:null,
  1724.                     img:[],
  1725.                     modal:{'display':'none'},
  1726.                     nbchoisi: nbch
  1727.                     }
  1728.                     
  1729.                 
  1730.                 if($(value).data('option')=="covering"){
  1731.                     prixObject.prixCovering = prixObject.prixCovering + prix
  1732.                     let coverex = -1
  1733.                         for (let index = 0; index < jsondata[0].cover.length; index++) {
  1734.                             if( jsondata[0].cover[index].id == $(value).data('idoption') ){
  1735.                                 jsondata[0].cover[index] = detequ
  1736.                                 coverex = index
  1737.                             } 
  1738.                         }
  1739.                     if(nbch > 0){
  1740.                         
  1741.                         if( coverex == -1 ){
  1742.                             jsondata[0].cover.push(detequ)
  1743.                         }else{
  1744.                             jsondata[0].cover[coverex] = detequ
  1745.                         }
  1746.                     }else{
  1747.                         if( coverex >= 0){
  1748.                         jsondata[0].cover.splice( coverex , 1)
  1749.                         }
  1750.                     } 
  1751.                 }
  1752.                 else{
  1753.                     prixObject.prixEquipement = prixObject.prixEquipement + prix
  1754.                     let equipex = -1
  1755.                         for (let index = 0; index < jsondata[0].equip.length; index++) {
  1756.                             if( jsondata[0].equip[index].id == $(value).data('idoption') ){
  1757.                                 jsondata[0].equip[index] = detequ
  1758.                                 equipex = index
  1759.                             } 
  1760.                         }
  1761.                     if(nbch > 0){
  1762.                         
  1763.                         if( equipex == -1 ){
  1764.                             jsondata[0].equip.push(detequ)
  1765.                         }else{
  1766.                             jsondata[0].equip[equipex] = detequ
  1767.                         }
  1768.                     }else{
  1769.                         if( equipex >= 0){
  1770.                         jsondata[0].equip.splice( equipex , 1)
  1771.                         }
  1772.                     }
  1773.                 }
  1774.                 
  1775.             }
  1776.  
  1777.             
  1778. let jsondatastring = JSON.stringify( jsondata )
  1779. $('#jsondata').val(jsondatastring) 
  1781.             return prixObject;
  1782.             
  1783.         }
  1785.         function datediff(first, second) {
  1786.             first = moment(first, "DD/MM/YYYY");
  1787.             second = moment(second, "DD/MM/YYYY");
  1788.             days = parseInt(second.diff(first, 'days')) || 0;
  1789.             return days+1;
  1790.         }
  1792.         function enumerateDaysBetweenDates(startDate, endDate) {
  1793.             var dates = [];
  1795.             var currDate = moment(startDate).startOf('day');
  1796.             var lastDate = moment(endDate).startOf('day');
  1798.             while(currDate.add(1, 'days').diff(lastDate) < 0) {
  1799.                 dates.push(currDate.clone().toDate());
  1800.             }
  1802.             return dates;
  1803.         }*/
  1805.             //        openPhotoSwipes(0, photocov);
  1807.             let photocov = $('#photocov').slick({
  1808.                     dots: true,
  1809.                     infinite: true,
  1810.                     speed: 500,
  1811.                     fade: true,
  1812.                     cssEase: 'linear'
  1813.                 }); 
  1814.         
  1815.         function parseThumbnailElementss(el) {
  1816.                     var data = [];
  1817.                     el.find(  'img:not(.slick-cloned)').each(function() {
  1818.                         
  1819.                         var img = this;
  1820.                         data.push({
  1821.                             el: img,
  1822.                             src: img.src,
  1823.                             msrc: img.src,
  1824.                             w: img.naturalWidth,
  1825.                             h: img.naturalHeight
  1826.                         });
  1827.                     });
  1829.                     return data;
  1830.                 };
  1832.         function openPhotoSwipes(index, $gallery) {
  1833.                     if (isNaN(parseInt(index, 10))) { return; }
  1834.  
  1835.                  slickInstance = $('#photocov')
  1837.                     var pswpElement = $('.pswp')[0];
  1838.                     var gallery;
  1840.                     var items = parseThumbnailElementss($gallery);
  1842.                     // define options (if needed)
  1843.                     var options = {
  1844.                         galleryUID: $gallery.attr('data-pswp-uid'),
  1845.                         getThumbBoundsFn: function(index) {
  1846.                             // See Options->getThumbBoundsFn section of docs for more info
  1847.                             var thumbnail = items[index].el,
  1848.                                 pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
  1849.                                 rect = thumbnail.getBoundingClientRect();
  1851.                             return {
  1852.                                 x: rect.left,
  1853.                                 y: rect.top + pageYScroll,
  1854.                                 w: rect.width
  1855.                             };
  1856.                         }
  1857.                     };
  1859.                     options.index = parseInt(index, 10);
  1860.                     options.fullscreenEl = false;
  1862.                     // Pass data to PhotoSwipe and initialize it
  1863.                     gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
  1865.                     gallery.listen('beforeChange', function() {
  1866.                         var slideItem = $(gallery.currItem.el);
  1867.                         var currentIndex = slideItem.index() - (slideItem.siblings('.slick-slide.slick-cloned').length / 2);
  1868.                         if (slickInstance) {
  1869.                             slickInstance.slick('slickGoTo', currentIndex);
  1870.                         }
  1871.                     });
  1872.                     gallery.init();
  1873.                 };
  1875.         function SlickZoom(options) {
  1876.             options = options || {};
  1878.             if (!(options.selector && options.item)) {
  1879.                 return console.error('selector and item required');
  1880.             }
  1882.             $(options.selector).each(function(i) {
  1883.                 var container = $(this);
  1884.                 var items = container.find(options.item);
  1885.                 var slickInstance = null;
  1886.                 var slickOption = options.slickOption || {
  1887.                     dots: true,
  1888.                     infinite: true,
  1889.                     speed: 500,
  1890.                     fade: true,
  1891.                     cssEase: 'linear'
  1892.                 };
  1894.                 // init slick carousel if more than 2 items
  1895.                 if (items.length >= 2) {
  1896.                     slickInstance = container.slick(slickOption);
  1897.                 }
  1899.                 // init photoswipe
  1900.                 container
  1901.                 .attr('data-pswp-uid', i+1)
  1902.                 .on('click', options.item, function (e) {
  1903.                     e.preventDefault();
  1904.                     var slideItem = $(this); 
  1905.                     // var index = slideItem.index() - (slideItem.siblings('.slick-slide.slick-cloned').length / 2);
  1906.                     var index = slideItem[0].dataset.index
  1907.                     openPhotoSwipe(index, container);
  1908.                 });
  1911.                 function parseThumbnailElements(el) {
  1912.                     var data = [];
  1913.                     el.find(options.item + ':not(.slick-cloned)').each(function() {
  1914.                         var img = this;
  1915.                         data.push({
  1916.                             el: img,
  1917.                             src: img.src,
  1918.                             msrc: img.src,
  1919.                             w: img.naturalWidth,
  1920.                             h: img.naturalHeight
  1921.                         });
  1922.                     });
  1924.                     return data;
  1925.                 };
  1927.                 function openPhotoSwipe(index, $gallery) {
  1928.                     if (isNaN(parseInt(index, 10))) { return; }
  1930.                     var pswpElement = $('.pswp')[0];
  1931.                     var gallery;
  1933.                     var items = parseThumbnailElements($gallery);
  1935.                     // define options (if needed)
  1936.                     var options = {
  1937.                         galleryUID: $gallery.attr('data-pswp-uid'),
  1938.                         getThumbBoundsFn: function(index) {
  1939.                             // See Options->getThumbBoundsFn section of docs for more info
  1940.                             var thumbnail = items[index].el,
  1941.                                 pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
  1942.                                 rect = thumbnail.getBoundingClientRect();
  1944.                             return {
  1945.                                 x: rect.left,
  1946.                                 y: rect.top + pageYScroll,
  1947.                                 w: rect.width
  1948.                             };
  1949.                         }
  1950.                     };
  1952.                     options.index = parseInt(index, 10);
  1953.                     options.fullscreenEl = false;
  1955.                     // Pass data to PhotoSwipe and initialize it
  1956.                     gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
  1958.                     gallery.listen('beforeChange', function() {
  1959.                         var slideItem = $(gallery.currItem.el);
  1960.                         var currentIndex = slideItem.index() - (slideItem.siblings('.slick-slide.slick-cloned').length / 2);
  1961.                         if (slickInstance) {
  1962.                             slickInstance.slick('slickGoTo', currentIndex);
  1963.                         }
  1964.                     });
  1965.                     gallery.init();
  1966.                 };
  1968.             });
  1969.         }
  1971. $('.koikes').hover(function() {
  1972.     
  1973.     const image = $( this ).parent().find( ".onover" )[0]
  1974. const config = {
  1975.   rootMargin: '0px 0px 0px 0px',
  1976.   threshold: [0, 0.25, 0.75, 1]
  1977. };
  1979. observer = new IntersectionObserver((entries) => {
  1980.   entries.forEach(entry => {
  1981.       console.log( entry.intersectionRatio )
  1982.     if (entry.intersectionRatio < 1) {
  1983.         let classlist = entry.target.classList
  1984.         if( classlist.contains('changehover') ){
  1985.        entry.target.classList.remove('changehover');
  1986.         }else{
  1987.        entry.target.classList.add('changehover');
  1988.         }
  1989.     } else {
  1990.         observer.unobserve(image);
  1991.     }
  1992.   });
  1993. }, config);
  1994.  
  1995.   observer.observe(image); 
  1997. });
  1999. function parseThumbnailinfoimg(el) {
  2000.                     var data = []; 
  2001.                         
  2002.                         var img = el;
  2003.                         data.push({
  2004.                             el: img,
  2005.                             src: img.src,
  2006.                             msrc: img.src,
  2007.                             w: img.naturalWidth,
  2008.                             h: img.naturalHeight
  2009.                         }); 
  2011.                     return data;
  2012.                 };
  2013. function openinfoimgSwipes(item) {
  2014.     console.log(item)
  2015.     var gallery;
  2017.                     var items = parseThumbnailinfoimg(item);
  2018.     var options = {
  2019.                         galleryUID: $(item).attr('data-pswp-uid'),
  2020.                         getThumbBoundsFn: function(index) {
  2021.                             // See Options->getThumbBoundsFn section of docs for more info
  2022.                             var thumbnail = item,
  2023.                                 pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
  2024.                                 rect = thumbnail.getBoundingClientRect();
  2026.                             return {
  2027.                                 x: rect.left,
  2028.                                 y: rect.top + pageYScroll,
  2029.                                 w: rect.width
  2030.                             };
  2031.                         }
  2032.                     };
  2033.     options.fullscreenEl = false;
  2035.                     var pswpElement = $('.pswp')[0];
  2036. gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
  2037.     gallery.init()
  2038. }
  2040. $(document).ready(function () {
  2041. //    MiseAJourPrix();
  2042. });
  2044. function calcttc(prix){
  2045. let prxttc = prix + (( prix * 20) / 100) 
  2046.     return prxttc
  2047. }
  2049. $('.faq-title').on('click', function () {
  2050.     let trg = $(this).attr('data-target')
  2051.     if( $( trg ).hasClass( "collapse" ) ){
  2052.         $( trg ).removeClass('collapse') 
  2053.     }else{
  2054.         $( trg ).addClass('collapse') 
  2055.     }
  2056. })
  2057.     </script>
  2058.          {{ encore_entry_script_tags('app') }}
  2059.          {{ encore_entry_script_tags('formulaire') }}
  2060.          
  2061. {% endblock %}