templates/circuit/detailcircuit.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     <link href="{{ asset('front/plugins/colorbox/colorbox.css') }}" rel="stylesheet" type="text/css">
  5.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_style.css') }}">
  6.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_responsive.css') }}">
  7.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_style.css') }}">
  8.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_responsive.css') }}">
  9.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/about_style.css') }}">
  10.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/about_responsive.css') }}">
  12.     <style>
  13.         .carousel {
  14.             position: relative;
  15.         }
  16.         .carousel-item img {
  17.             object-fit: cover;
  18.         }
  19.         #carousel-thumbs {
  20.             background: rgba(255,255,255,.3);
  21.             bottom: 0;
  22.             left: 0;
  23.             padding: 0 50px;
  24.             right: 0;
  25.         }
  26.         #carousel-thumbs img {
  27.             border: 5px solid transparent;
  28.             cursor: pointer;
  29.         }
  30.         #carousel-thumbs img:hover {
  31.             border-color: rgba(255,255,255,.3);
  32.         }
  33.         #carousel-thumbs .selected img {
  34.             border-color: #fff;
  35.         }
  36.         .carousel-control-prev,
  37.         .carousel-control-next {
  38.             width: 50px;
  39.         }
  40.         @media all and (max-width: 767px) {
  41.             .carousel-container #carousel-thumbs img {
  42.                 border-width: 3px;
  43.             }
  44.             
  45.             .single-pricing{
  46.             width:115% !important;
  47.             margin-left: -18px;
  48.             }
  49.             p {
  50.     font-size: 12px !important;
  51. }
  52. }
  53.         @media all and (min-width: 576px) {
  54.             .carousel-container #carousel-thumbs {
  55.                 position: absolute;
  56.             }
  57.         }
  58.         @media all and (max-width: 576px) {
  59.             .carousel-container #carousel-thumbs {
  60.                 background: #ccccce;
  61.                 width:100%!important;
  62.             }
  63.         }
  64.         .offers_item{
  65.             position: relative;
  66.             width: 205%;
  67.             overflow: hidden;
  68.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  69.             transition: all 300ms;
  70.             margin-bottom: 30px;
  71.             border-radius: 20px;
  72.             color: rgba(0, 0, 0, 0.87);
  73.             background: #fff;
  74.         }
  75.         .offers_item:hover {
  76.             transform: translateY(-2px);
  77.             box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  78.         }
  79.         .latest_posts_container {
  80.             margin: 35px;
  81.         }
  82.         .hotel_location {
  83.             font-size: 24px;
  84.             color: #929191;
  85.             margin-top: 9px;
  86.             font-weight: 700;
  87.         }
  89.         /*price style*/
  92.         .pricing-content{}
  93.         .single-pricing{
  94.             background:#fff;
  95.             margin-top: 25px;
  96.             width: 255%;
  97.             padding:40px 20px;
  98.             border-radius:5px;
  99.             position:relative;
  100.             z-index:2;
  101.             border:1px solid #d8d5d5;
  102.             box-shadow: 0 10px 40px -10px rgba(0,64,128,.09);
  103.             transition:0.3s;
  104.         }
  105.         @media only screen and (max-width:480px) {
  106.             .single-pricing {margin-bottom:30px;}
  107.         }
  108.         .single-pricing:hover{
  109.             box-shadow:0px 60px 60px rgba(0,0,0,0.1);
  110.             z-index:100;
  111.             transform: translate(0, -10px);
  112.         }
  113.         .price-label {
  114.             color: #fff;
  115.             background: #ff9100;
  116.             font-size: 16px;
  117.             width: 100px;
  118.             margin-bottom: 15px;
  119.             display: block;
  120.             -webkit-clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
  121.             clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
  122.             margin-left: -20px;
  123.             position: absolute;
  124.         }
  125.         .price-head h2 {
  126.             font-weight: 600;
  127.             margin-bottom: 0px;
  128.             text-transform: capitalize;
  129.             font-size: 35px;
  130.         }
  131.         .price-head span {
  132.             display: inline-block;
  133.             background:#ff9100;
  134.             width: 6px;
  135.             height: 6px;
  136.             border-radius: 30px;
  137.             margin-bottom: 20px;
  138.             margin-top: 15px;
  139.         }
  140.         .price {
  141.             font-weight: 500;
  142.             font-size: 50px;
  143.             margin-bottom: 0px;
  144.         }
  145.         .single-pricing{}
  146.         .single-pricing h5 {
  147.             font-size: 14px;
  148.             margin-bottom: 0px;
  149.             text-transform: uppercase;
  150.         }
  151.         .single-pricing ul{
  152.             list-style: none;
  153.             margin-bottom: 20px;
  154.             margin-top: 30px;
  155.         }
  157.         .single-pricing ul li{line-height: 35px;}
  158.         .single-pricing button {
  159.             background:#ff9100;
  160.             border: 2px solid #ff9100;
  161.             border-radius: 5000px;
  162.             color: white;
  163.             display: inline-block;
  164.             font-size: 16px;
  165.             width: -webkit-fill-available;
  166.             overflow: hidden;
  167.             padding:10px 45px;
  168.             text-transform: capitalize;
  169.             transition: all 0.3s ease 0s;
  170.         }
  171.         .single-pricing button:hover, .single-pricing a:focus{
  172.             background:#ff9100;
  173.             color: #ffffff;
  174.             border: 2px solid #ff9100;
  175.         }
  176.         .single-pricing-white{background: #5b0909
  177.         }
  178.         .single-pricing-white ul li{color:#fff;}
  179.         .single-pricing-white h2{color:#fff;}
  180.         .single-pricing-white h1{color:#fff;}
  181.         .single-pricing-white h5{color:#fff;}
  183.         /*breadcrumb style*/
  184.         .hm-gradient {
  185.             background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
  186.         }
  187.         .darken-grey-text {
  188.             color: #2E2E2E;
  189.         }
  190.         .bc-icons .breadcrumb-item + .breadcrumb-item::before {
  191.             content: none; }
  192.         .bc-icons .breadcrumb-item.active {
  193.             color: #eeeeee; }
  195.         .bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
  196.             content: none; }
  197.         .bc-icons-2 .breadcrumb-item.active {
  198.             color: #455a64; }
  199.         .light-font .breadcrumb-item + .breadcrumb-item::before {
  200.             color: #fff; }
  201.         .light-font .breadcrumb-item.active {
  202.             color: #cfd8dc; }
  204.         .dark-font .breadcrumb-item + .breadcrumb-item::before {
  205.             color: #000; }
  206.         .dark-font .breadcrumb-item.active {
  207.             color: #455a64; }
  208.         .breadcrumb{
  209.             background-color: transparent;
  210.         }
  212.         .container {
  213.             max-width: 1440px!important;
  214.         }
  216.         .main_nav_item a {
  217.             font-family: 'Open Sans', sans-serif;
  218.             font-size: 15px;
  219.             font-weight: 700;
  220.             color: #0093a9!important;
  221.             text-transform: uppercase;
  222.             padding-bottom: 10px;
  223.             padding-top: 10px;
  224.         }
  225.         .main_nav_item::after {
  226.             display: block;
  227.             position: absolute;
  228.             left: -1px;
  229.             bottom: -11px;
  230.             width: calc(100% + 2px);
  231.             height: 2px;
  232.             background: linear-gradient(to right, #b29b63, #0093a9)!important;
  233.             content: '';
  234.             opacity: 0;
  235.             -webkit-transition: all 200ms ease;
  236.             -moz-transition: all 200ms ease;
  237.             -ms-transition: all 200ms ease;
  238.             -o-transition: all 200ms ease;
  239.             transition: all 200ms ease;
  240.         }
  241.     </style>
  242. {% endblock %}
  243. {% block body %}
  244.     <!-- Home -->
  245.     <div class="home" style="height: 100px">
  246.     </div>
  247.     <!-- Blog -->
  248.     <div class="blog">
  249.         <div class="container">
  250.             <div class="row">
  251.                 <div class="col-lg-8">
  252.                     <div class="blog_post_container">
  253.                         <div class="hotel_title_container d-flex flex-lg-row flex-column">
  254.                             <div class="hotel_title_content">
  255.                                 {% set total = c.prix +  c.marge %}
  256.                                 <h1 class="hotel_title"><strong><i class="fa fa-map-marker"></i> Circuit: {{c.libelle}}</h1></strong>
  257.                                 <div class="hotel_location" style="color: #0093a9">à partir de {{total}} TND</div>
  258.                             </div>
  259.                         </div>
  260.                         <div class="blog_post">
  261.                             <div class="blog_post_image">
  262.                                 <div class="container mt-5">
  263.                                     <div class="carousel-container position-relative row">
  264.                                         <div id="myCarousel" class="carousel slide" data-ride="carousel">
  265.                                             <div class="carousel-inner">
  266.                                                 {% for img in c.imagescircuits %}
  267.                                                     <div class="carousel-item {{ loop.first ? 'active' }}">
  268.                                                         <img src="{{ asset('./rusticav/public/uploads/circuits/'~img.name) }}" class="d-block w-100 img-fluid" alt="..." style="height:448px;width: 750px!important;" data-type="image" data-toggle="lightbox" data-gallery="example-gallery">
  269.                                                     </div>
  270.                                                 {% endfor %}
  271.                                             </div>
  272.                                         </div>
  274.                                         <!-- Carousel Navigation -->
  275.                                         <div id="carousel-thumbs" class="carousel slide" data-ride="carousel">
  276.                                             <div class="carousel-inner">
  277.                                                 <div class="carousel-item active">
  278.                                                     <div class="row mx-0" style="display:flex;justify-content: center;align-items: center;">
  279.                                                         {% for img in c.imagescircuits %}
  280.                                                             <div id="carousel-selector-{{ loop.index0 }}" class="thumb col-4 col-sm-2 px-1 py-2 selected" data-target="#myCarousel" data-slide-to="{{ loop.index0 }}">
  281.                                                                 <img src="{{ asset('./rusticav/public/uploads/circuits/'~img.name) }}" style="width: 100px; height: 65px" class="img-fluid" alt="...">
  282.                                                             </div>
  283.                                                         {% endfor %}
  284.                                                     </div>
  285.                                                 </div>
  286.                                             </div>
  287.                                             <a class="carousel-control-prev" href="#carousel-thumbs" role="button" data-slide="prev">
  288.                                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  289.                                                 <span class="sr-only">Previous</span>
  290.                                             </a>
  291.                                             <a class="carousel-control-next" href="#carousel-thumbs" role="button" data-slide="next">
  292.                                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  293.                                                 <span class="sr-only">Next</span>
  294.                                             </a>
  295.                                         </div>
  297.                                     </div> <!-- /row -->
  298.                                 </div> <!-- /container -->
  299.                             </div>
  300.                             <div class="blog_post_meta">
  301.                                 <ul>
  302.                                     <li class="blog_post_meta_item"><a href="" style="color: black"><i class="fa fa-pencil"></i> Description</a></li>
  303.                                     <li class="blog_post_meta_item"><a href="" style="color: black"><i class="fa fa-map-marker"></i> {{ c.libelle }}</a></li>
  304.                                     <li class="blog_post_meta_item"><a href="" style="color: black"><i class="fa fa-clock-o"></i> Durée : {{c.nbrejour}} Jours /{{c.nbrejour-1 }} Nuits</a></li>
  305.                                 </ul>
  306.                             </div>
  307.                             <div class="offers_item" style="width:100%;margin-top:20px;">
  308.                             <div class="blog_post_meta" style="margin-left: 22px;margin-right: 22px;">
  309.                                 <ul>
  310.                                     {{c.description|raw}}
  311.                                 </ul>
  312.                             </div>
  313.                             </div>
  314.                             <div class="container">
  315.                                 <div class="packs-container">
  316.                                     <br><br>
  317.                                     {% for pack, packData in dataByPack %}
  318.                                         {% set isFirstPack = loop.first %}
  319.                                         <input type="radio" name="packSelector" id="{{ pack }}" value="{{ pack }}" {% if isFirstPack %}checked{% endif %}>
  320.                                         <label for="{{ pack }}">{{ pack }}</label>
  321.                                         <div class="date-ranges">
  322.                                             {% for dateRange in packData.dateRanges %}
  323.                                                 <label class="date-label">
  324.                                                     <input
  325.                                                             type="radio"
  326.                                                             name="dateRanges"
  327.                                                             value="{{ dateRange.dated }}-{{ dateRange.datef }}"
  328.                                                             data-tarifbb="{{ dateRange.tarifbb }}"
  329.                                                             data-roomdata="{{ dateRange.roomData | json_encode }}"
  330.                                                             {% if isFirstPack and loop.index == 1 %}checked{% endif %}
  331.                                                     >
  332.                                                     {{ dateRange.dated }} - {{ dateRange.datef }}
  333.                                                 </label>
  334.                                                 <br>
  335.                                             {% endfor %}
  336.                                         </div>
  338.                                     {% endfor %}
  339.                                 </div>
  340.                                 <div id="selectedData" class="selected-data">
  341.                                     <section id="pricing" class="pricing-content section-padding">
  342.                                         <div class="container">
  343.                                             <div class="row text-center">
  344.                                                 <div class="col-lg-4 col-sm-4 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.2s" data-wow-offset="0">
  345.                                                     <div class="single-pricing">
  346.                                                         <div class="price-head">
  347.                                                             <h2 id="selectedPackTitle" style="color: #0093a9"></h2>
  348.                                                             <span></span>
  349.                                                             <span></span>
  350.                                                             <span></span>
  351.                                                             <span></span>
  352.                                                             <span></span>
  353.                                                             <span></span>
  354.                                                         </div>
  355.                                                         <ul>
  356.                                                             <li id="chambreInfo"></li>
  357.                                                             
  358.                                                             <li style="font-size: 17px;font-weight: 600;color: #635959;text-align: justify">
  359.                                                             <i class="fa fa-check"></i>Tarif bébé <strong id="tarifbb" style="float: right;margin-right: 25px;"></strong>
  360.                                                             </li>
  361.                                                         </ul>
  362.                                                         <form id="reservationForm" method="post" action="{{ path('nouvelle',{'circuitId':c.id}) }}" >
  363.                                                             <input type="hidden" id="tarifbbInput" name="tarifbb">
  364.                                                             <input type="hidden" id="roomDataInput" name="roomData">
  365.                                                             <input type="hidden" id="selectedPackInput" name="selectedPack">
  366.                                                             <input type="hidden" id="selectedDateInput" name="selectedDate">
  367.                                                             <!-- Ajoutez d'autres champs au besoin -->
  368.                                                             <button type="submit" id="redirectButton" onclick="redirectToNewPage({{ c.id }})">Réserver</button>
  369.                                                         </form>
  371.                                                     </div>
  372.                                                 </div><!--- END COL -->
  373.                                             </div>
  374.                                         </div>
  375.                                     </section>
  376.                                 </div>
  377.                             </div>
  380.                             <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  381.                             <script>
  382.                                 $(document).ready(function () {
  383.                                     // Sélectionnez le premier pack et sa première date par défaut
  384.                                     var firstPackRadio = $('input[name="packSelector"]:first-child');
  385.                                     var firstDateRadio = firstPackRadio.closest('form').find('input[name="dateRanges"]:first-child');
  386.                                     firstPackRadio.prop('checked', true);
  387.                                     firstDateRadio.prop('checked', true);
  389.                                     // Ajoutez un événement "change" manuel pour déclencher l'affichage des données sélectionnées
  390.                                     firstDateRadio.trigger('change');
  392.                                     // Affichez les informations sélectionnées du premier date de la première pack lors du chargement
  393.                                     displaySelectedData();
  394.                                 });
  396.                                 var packRadios = $('input[name="packSelector"]');
  397.                                 var dateRadios = $('input[name="dateRanges"]');
  398.                                 var selectedDataDiv = $('#selectedData');
  400.                                 
  402.                                 // Fonction pour afficher les informations sélectionnées
  403.                                 function displaySelectedData() {
  404.                                     var selectedPackRadio = $('input[name="packSelector"]:checked');
  405.                                     if (selectedPackRadio.length > 0) {
  406.                                         // Récupérez le nom du pack sélectionné
  407.                                         var selectedPack = selectedPackRadio.val();
  409.                                         // Affichez le nom du pack dans le titre
  410.                                         $('#selectedPackTitle').text(selectedPack);
  412.                                         var selectedRadioButton = $('input[name="dateRanges"]:checked');
  413.                                         if (selectedRadioButton.length > 0) {
  414.                                             var tarifbb = selectedRadioButton.data('tarifbb');
  415.                                             var roomData = selectedRadioButton.data('roomdata');
  416.                                             var dated = selectedRadioButton.data('dated');
  417.                                             var datef = selectedRadioButton.data('datef');
  419.                                             if (tarifbb === "" || parseFloat(tarifbb) === 0) {
  420.                                                 tarifbb = "Sur demande";
  421.                                             } else {
  422.                                                 // Formater le tarif bb avec trois zéros après la virgule
  423.                                                 tarifbb = parseFloat(tarifbb).toFixed(3)+ ' TND';
  424.                                             }
  426.                                             // Affichez le tarif BB dans le span
  427.                                             $('#tarifbb').text(tarifbb);
  430.                                             // Affichez les informations sur les chambres dans la div
  431.                                             var chambreInfoDiv = $('#chambreInfo');
  432.                                             chambreInfoDiv.empty().append('<p> </p>');
  434.                                             $.each(roomData, function (chambreName, room) {
  435.                                                 chambreInfoDiv.append('<p style="font-size: 17px;font-weight: 600;color: #635959;text-align: justify"><i class="fa fa-check"></i>  Adulte en ' + chambreName +'<strong style="float: right;margin-right: 25px;">'+ '<strong> ' + room.price.toFixed(3) + ' TND</strong>'+'</span>'+ '</p>');
  436.                                             });
  438.                                             // Affichez les dates dans la div
  439.                                             $('#dated').text(dated);
  440.                                             $('#datef').text(datef);
  441.                                         }
  442.                                     }
  443.                                 }
  445.                                 // Ajoutez un écouteur d'événements pour les changements d'état des boutons radio du sélecteur de pack
  446.                                 packRadios.on('change', function () {
  447.                                     deselectOtherDates();
  448.                                     displaySelectedData();
  449.                                 });
  451.                                 // Ajoutez un écouteur d'événements pour les changements d'état des boutons radio
  452.                                 dateRadios.on('change', displaySelectedData);
  454.                                 // Ajoutez un écouteur d'événements pour le bouton de redirection
  455.                                 $('#redirectButton').on('click', function () {
  456.                                     redirectToNewPage({{ c.id }});
  457.                                 });
  459.                                 // Fonction pour désélectionner les autres dates de toutes les classes
  460.                                 function deselectOtherDates() {
  461.                                     dateRadios.prop('checked', false);
  462.                                 }
  463.                                 // Fonction pour rediriger vers la nouvelle page
  464.                                 function redirectToNewPage(circuitId) {
  465.                                     var selectedRadioButton = $('input[name="dateRanges"]:checked');
  466.                                     if (selectedRadioButton.length > 0) {
  467.                                         var tarifbb = selectedRadioButton.data('tarifbb');
  468.                                         var roomData = selectedRadioButton.data('roomdata');
  469.                                         var selectedPack = $('input[name="packSelector"]:checked').val();
  470.                                         var selectedDate = selectedRadioButton.val();
  472.                                         // Remplissez les champs du formulaire avec les données sélectionnées
  473.                                         $('#tarifbbInput').val(tarifbb);
  474.                                         $('#roomDataInput').val(JSON.stringify(roomData));
  475.                                         $('#selectedPackInput').val(selectedPack);
  476.                                         $('#selectedDateInput').val(selectedDate);
  478.                                         // Soumettez le formulaire
  479.                                         $('#reservationForm').submit();
  480.                                     }
  481.                                 }
  482.                             
  483.                                 // Fonction pour ajouter un champ caché au formulaire
  484.                                 function addHiddenField(form, name, value) {
  485.                                     var input = document.createElement('input');
  486.                                     input.setAttribute('type', 'hidden');
  487.                                     input.setAttribute('name', name);
  488.                                     input.setAttribute('value', value);
  489.                                     form.appendChild(input);
  490.                                 }
  491.                             </script>
  492.                         </div>
  493.                     </div>
  494.                 </div>
  495.                 <!-- Blog Sidebar -->
  496.                 
  497.                 <div class="col-lg-4 sidebar_col">
  498.                     <!-- Sidebar Latest Posts -->
  499.                     <div class="sidebar_latest_posts">
  500.                         <div class="offers_item" style="width: 110%;">
  501.                             <div class="sidebar_title text-center" style="color: white;font-size: 21px;margin: 36px;background: #ff9100">Circuits à la une</div>
  502.                             <div class="latest_posts_container">
  503.                                 <ul>
  504.                                     {% for v in circuit %}
  505.                                         {% if v.id != c.id and loop.index <= 5 %}
  506.                                             <li class="latest_post clearfix">
  507.                                                 <div class="latest_post_image">
  508.                                                     <a href="#">
  509.                                                         {% for img in v.imagescircuits %}
  510.                                                         {% if loop.first %}
  511.                                                             <img src="{{ asset('./rusticav/public/uploads/circuits/'~img.name) }}" alt="" style="width: 85px; height: 65px" />
  512.                                                         {% endif %}
  513.                                                     {% endfor %}
  514.                                                     </a>
  515.                                                 </div>
  516.                                                 <div class="latest_post_content">
  517.                                                     <div class="latest_post_title trans_200" style="color: black">
  518.                                                         <i class="fa fa-map-marker"></i>
  519.                                                         {{ v.libelle }}
  520.                                                     </div>
  521.                                                     <div class="latest_post_title trans_200" style="color: black">
  522.                                                         <i class="fa fa-clock-o"></i>
  523.                                                         {{v.nbrejour}} jours / {{v.nbrejour-1}} Nuits
  524.                                                     </div>
  525.                                                     <div class="latest_post_title trans_200">
  526.                                                         <a href="{{ path('detailcircuit', {'id': v.id}) }}" style="color: #d7000e;font-size: 16px;font-weight: 700">Voir détails  <i class="fa fa-angle-double-right" aria-hidden="true"></i>
  527.                                                         </a>
  528.                                                     </div> 
  529.                                                 </div>
  530.                                             </li>
  531.                                         {% endif %}
  532.                                     {% endfor %}
  533.                                 </ul>
  534.                             </div>
  535.                         </div>
  536.                         <div class="offers_item" style="width:110%;">
  537.                         <div class="blog_post_text" style="margin-left:13px;">
  538.                             <p style="font-size: 18px">{{c.serviceinclus|raw}}</p>
  539.                         </div></div>
  540.                         <div class="offers_item" style="width:110%;">
  541.                         <div class="blog_post_text"style="margin-left:13px;">
  542.                             <p style="font-size: 18px">{{c.servicenoninclus|raw}}</p>
  543.                         </div>
  544.                         </div>
  545.                     
  546.                     </div>
  548.                 </div>
  549.                 {# <!-- Blog Sidebar -->
  550.                 <div class="col-lg-4 sidebar_col">
  551.                     <!-- Sidebar Latest Posts -->
  552.                     <div class="sidebar_latest_posts">
  553.                         <div class="sidebar_title" style="color: #b29b63">À la une</div>
  554.                         <div class="latest_posts_container">
  555.                             <ul>
  556.                                 {% for c in circuit %}
  557.                                     {% if c.id != c.id and loop.index <= 5 %}
  558.                                         <li class="latest_post clearfix">
  559.                                             <div class="latest_post_image">
  560.                                                 <a href="#">
  561.                                                     {% for img in c.imagescircuits %}
  562.                                                         {% if loop.first %}
  563.                                                             <img src="{{ asset('./uploads/circuits/'~img.name) }}" alt="" style="width: 85px; height: 65px" />
  564.                                                         {% endif %}
  565.                                                     {% endfor %}
  566.                                                 </a>
  567.                                             </div>
  568.                                             <div class="latest_post_content">
  569.                                                 <div class="latest_post_title trans_200" style="color: black">
  570.                                                     <i class="fa fa-map-marker"></i>
  571.                                                     {{ c.titre }}
  572.                                                 </div>
  573.                                                 <div class="latest_post_title trans_200" style="color: black">
  574.                                                     <i class="fa fa-clock-o"></i>
  575.                                                     {{c.nbrejour}} jours / {{c.nbrejour-1}} Nuits
  576.                                                 </div>
  577.                                                 <div class="latest_post_title trans_200">
  578.                                                     <a href="{{ path('reserver', {'id': c.id}) }}" style="color: #b29b63;">Voir plus</a>
  579.                                                 </div>
  580.                                             </div>
  581.                                         </li>
  582.                                     {% endif %}
  583.                                 {% endfor %}
  584.                             </ul>
  585.                         </div>
  586.                     </div>
  588.                 </div> #}
  589.             </div>
  590.         </div>
  591.     </div>
  594. {% endblock %}
  596. {% block javascripts %}
  597.     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  598.     <script>
  599.         $('#myCarousel').carousel({
  600.             interval: false
  601.         });
  602.         $('#carousel-thumbs').carousel({
  603.             interval: false
  604.         });
  606.         $('[id^=carousel-selector-]').click(function() {
  607.             var id_selector = $(this).attr('id');
  608.             var id = parseInt( id_selector.substr(id_selector.lastIndexOf('-') + 1) );
  609.             $('#myCarousel').carousel(id);
  610.         });
  611.         // Only display 3 items in nav on mobile.
  612.         if ($(window).width() < 575) {
  613.             $('#carousel-thumbs .row div:nth-child(4)').each(function() {
  614.                 var rowBoundary = $(this);
  615.                 $('<div class="row mx-0">').insertAfter(rowBoundary.parent()).append(rowBoundary.nextAll().addBack());
  616.             });
  617.             $('#carousel-thumbs .carousel-item .row:nth-child(even)').each(function() {
  618.                 var boundary = $(this);
  619.                 $('<div class="carousel-item">').insertAfter(boundary.parent()).append(boundary.nextAll().addBack());
  620.             });
  621.         }
  622.         // Hide slide arrows if too few items.
  623.         if ($('#carousel-thumbs .carousel-item').length < 2) {
  624.             $('#carousel-thumbs [class^=carousel-control-]').remove();
  625.             $('.machine-carousel-container #carousel-thumbs').css('padding','0 5px');
  626.         }
  627.         // when the carousel slides, auto update
  628.         $('#myCarousel').on('slide.bs.carousel', function(e) {
  629.             var id = parseInt( $(e.relatedTarget).attr('data-slide-number') );
  630.             $('[id^=carousel-selector-]').removeClass('selected');
  631.             $('[id=carousel-selector-'+id+']').addClass('selected');
  632.         });
  633.         // when user swipes, go next or previous
  634.         $('#myCarousel').swipe({
  635.             fallbackToMouseEvents: true,
  636.             swipeLeft: function(e) {
  637.                 $('#myCarousel').carousel('next');
  638.             },
  639.             swipeRight: function(e) {
  640.                 $('#myCarousel').carousel('prev');
  641.             },
  642.             allowPageScroll: 'vertical',
  643.             preventDefaultEvents: false,
  644.             threshold: 75
  645.         });
  647.         $('#myCarousel .carousel-item img').on('click', function(e) {
  648.             var src = $(e.target).attr('data-remote');
  649.             if (src) $(this).ekkoLightbox();
  650.         });
  651.     </script>
  652. {% endblock %}