templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Meilleur Agence de voyages en Tunisie - Rustica Voyages{% endblock %}
  4. {% block stylesheets %}
  5.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_style.css') }}">
  6.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_responsive.css') }}">
  7.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_style.css') }}">
  8.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_responsive.css') }}">
  10.     <link href="{{ asset('front/searchbar/vendor/mdi-font/css/material-design-iconic-font.min.css') }}" rel="stylesheet" media="all">
  11.     <link href="{{ asset('front/searchbar/vendor/font-awesome-4.7/css/font-awesome.min.css') }}" rel="stylesheet" media="all">
  12.     <!-- Font special for pages-->
  13.     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  14.     <!-- Vendor CSS-->
  15.     <link href="{{ asset('front/searchbar/vendor/select2/select2.min.css') }}" rel="stylesheet" media="all">
  16.     <link href="{{ asset('front/searchbar/vendor/datepicker/daterangepicker.css') }}" rel="stylesheet" media="all">
  17.     <!-- Main CSS-->
  18.     <link href="{{ asset('front/searchbar/css/main.css') }}" rel="stylesheet" media="all">
  19.     <!-- Modal Css -->
  20.     <link rel="stylesheet" href="{{ asset('front/modals/fonts/icomoon/stylecommons.css') }}">
  21.     <!-- Bootstrap CSS -->
  22.     <link rel="stylesheet" href="{{ asset('front/modals/css/bootstrapcss.min.css') }}">
  23.     <link rel="stylesheet" type="text/css" href="{{ asset('front/plugins/OwlCarousel2-2.2.1/owl.carousel.css') }}">
  24.     <link rel="stylesheet" type="text/css" href="{{ asset('front/plugins/OwlCarousel2-2.2.1/owl.theme.default.css') }}">
  25.     <link rel="stylesheet" type="text/css" href="{{ asset('front/plugins/OwlCarousel2-2.2.1/animate.css') }}">
  26.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  28.     
  30.     <!-- Style -->
  31.     {#    <link rel="stylesheet" href="{{ asset('front/modals/css/stylemodals.css') }}">#}
  32.         <style>
  33.         .owl-theme .owl-dots {
  34.             text-align: center;
  35.             -webkit-tap-highlight-color: transparent;
  36.             display: none;
  37.         }
  38.         .owl-theme .owl-nav {
  39.             margin-top: 10px;
  40.             text-align: center;
  41.             -webkit-tap-highlight-color: transparent;
  42.             z-index: 10000;
  43.             background: red;
  44.             display: none;
  45.         }
  46.         .cta {
  47.             padding-top: 190px;
  48.             padding-bottom: 183px;
  49.             background: linear-gradient(to right, #b29b63, #0093a9);
  50.         }
  51.         .search_tab.active {
  52.             background: linear-gradient(to right, #b29b63, #0093a9);
  53.             color: #FFFFFF;
  54.         }
  55.         .search_tab:hover {
  56.             background: linear-gradient(to right, #0093a9, #b29b63);
  57.             color: #FFFFFF;
  58.         }
  59.         .content {
  60.             max-height: 3em; /* Limite initiale de hauteur en fonction du nombre de lignes */
  61.             overflow: hidden;
  62.         }
  64.         .expanded {
  65.             max-height: none; /* Agrandir la hauteur lorsque le paragraphe est étendu */
  66.         }
  68.         .read-more {
  69.             cursor: pointer;
  70.             color: blue;
  71.         }
  72.         .home_slider_background {
  73.             height: 80;
  74.             width: 100%;
  75.             background-size: cover;
  76.             background-position: center center;
  77.             background-repeat: no-repeat;
  78.             margin-top:40px;
  79.         }
  80.         .offers_price {
  81.             display: inline-block;
  82.             font-size: 29px;
  83.             font-weight: 700;
  84.             color: #ff9100;
  85.             line-height: 25px;
  86.         }
  87.         .offers_price a{
  88.             display: inline-block;
  89.             font-size: 22px;
  90.             font-weight: 700;
  91.             color: #0093a9;
  92.             line-height: 25px;
  93.         }
  94.         .offer_name{
  95.             display: block;
  96.             font-size: 22px;
  97.             font-weight: 700;
  98.             background: #0093a9;
  99.             color: #FFFFFF;
  100.             width: 310px;
  101.             line-height: 35px;
  102.             padding-left: 12px;
  103.         }
  104.         .offers_item {
  105.             border-radius: 12px;
  106.             overflow: hidden;
  107.             position: relative;
  108.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  109.             transition: all 300ms;
  110.         }
  112.         .offers_item:hover {
  113.             transform: translateY(-2px);
  114.             box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  115.         }
  117.         .offers_image_background {
  118.             position: relative;
  119.             margin: auto;
  120.             overflow: hidden;
  121.         }
  122.         .offers_image_background img {
  123.             max-width: 100%;
  124.             transition: all 0.3s;
  125.             display: block;
  126.             transform: scale(1);
  127.         }
  129.         .offers_image_background:hover img {
  130.             transform: scale(1.1);
  131.         }
  133.         .offers_content {
  134.             margin-top: 22px;
  135.             margin-left: 17px;
  136.             margin-bottom: 22px;
  137.             margin-right: 17px;
  138.         }
  140.         .offers_link {
  141.             margin-top: 24px;
  142.         }
  143.          .intro_price {
  144.              font-size: 20px;
  145.              font-weight: 600;
  146.              color: #FFFFFF;
  147.              margin-top: -4px;
  148.          }
  149.          
  150.          .intro{
  151.             padding-bottom: 50px;
  152.          }
  153.         .button a:hover {
  154.             background-color: #ff9100;
  155.             color: white;
  156.         }
  157.         .ctaBackground {
  158.             position: absolute;
  159.             top: 0;
  160.             left: 0;
  161.             width: 100%;
  162.             height: 210%;
  163.             background-repeat: no-repeat;
  164.             background-size: cover;
  165.             background-position: center center;
  166.             opacity: 0.27;
  167.         }
  168.         img {
  169.             max-width: 100%;
  170.             height: 100%;
  171.         }
  173.         .container {
  174.             max-width: 1440px!important;
  175.         }
  177.         .main_nav_item a {
  178.             font-family: 'Open Sans', sans-serif;
  179.             font-size: 15px;
  180.             font-weight: 700;
  181.             color: #0093a9!important;
  182.             text-transform: uppercase;
  183.             padding-bottom: 10px;
  184.             padding-top: 10px;
  185.         }
  186.         .main_nav_item::after {
  187.             display: block;
  188.             position: absolute;
  189.             left: -1px;
  190.             bottom: -11px;
  191.             width: calc(100% + 2px);
  192.             height: 2px;
  193.             background: linear-gradient(to right, #b29b63, #0093a9)!important;
  194.             content: '';
  195.             opacity: 0;
  196.             -webkit-transition: all 200ms ease;
  197.             -moz-transition: all 200ms ease;
  198.             -ms-transition: all 200ms ease;
  199.             -o-transition: all 200ms ease;
  200.             transition: all 200ms ease;
  201.         }
  203.         .section-title h2 {
  204.             text-align: center;
  205.             font-size: 18px;
  206.             font-weight: 600;
  207.             text-transform: uppercase;
  208.             padding-bottom: 6px;
  209.             color: #000;
  210.             letter-spacing: 0.3px;
  211.             padding: 0;
  212.         }
  213.         .section-title::after {
  214.             content: "";
  215.             height: 3px;
  216.             background: #fbb900;
  217.             width: 80px;
  218.             position: absolute;
  219.             left: 0;
  220.             right: 0;
  221.             margin: auto;
  222.         }
  223.         /****************/
  224.         /*     BX-SLIDER     */
  225.         /****************/
  226.        /* section.client {
  227.             padding:4em 0em;
  229.         }*/
  230.         section.client .section-title {
  231.             margin-bottom: 6em;
  232.         }
  233.         .bx-controls {
  234.             position: relative;
  235.         }
  236.         .bx-wrapper{
  237.             margin: auto;
  238.             margin-top: 70px;
  239.         }
  240.         .bx-wrapper .bx-pager {
  241.             text-align: center;
  242.             padding-top: 30px;
  243.             display: none;
  244.         }
  245.         .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  246.             display: inline-block;
  247.             *zoom: 1;
  248.             *display: inline;
  249.         }
  250.         .bx-wrapper .bx-pager.bx-default-pager a {
  251.             background: #666;
  252.             text-indent: -9999px;
  253.             display: block;
  254.             width: 10px;
  255.             height: 10px;
  256.             margin: 0 5px;
  257.             outline: 0;
  258.             -moz-border-radius: 5px;
  259.             -webkit-border-radius: 5px;
  260.             border-radius: 5px;
  261.         }
  262.         
  263.         /**/
  264.         
  265.                /* Default styles */
  266.         .filter {
  267.             background: #f3f6f9;
  268.             margin-top: -24px;
  269.         }
  270.         .container {
  271.             padding: 0 15px;
  272.             margin: 0 auto;
  273.         }
  274.         .card {
  275.             border: none;
  276.             background: transparent;
  277.             width: 100%;
  278.            /* max-width: 1070px;*/
  279.             margin: 0 auto;
  280.         }
  281.         .card-body {
  282.             margin-top: 25px;
  283.         }
  284.         .input-group {
  285.             width: calc(25% - 20px);
  286.             max-width: 200px;
  287.             margin-bottom: 10px;
  288.         }
  289.         .label {
  290.             color: black;
  291.             font-weight: 500;
  292.             display: block;
  293.         }
  294.         .btn-submit {
  295.             font-size: 16px;
  296.             font-weight: 500;
  297.             border: 1px solid black;
  298.             background: #FFFFFF;
  299.             color: black;
  300.             margin-bottom: 10px;
  301.             max-width:335px;
  302.         }
  304.         /* Media Queries */
  305.         @media screen and (max-width: 768px) {
  306.             .input-group {
  307.                 width: 100%;
  308.                 max-width: none;
  309.             }
  310.                 .home_slider_container{
  311.                 display:none;
  312.             }
  313.             .cta{
  314.             display:none;
  315.             }
  316.             .filter{margin-top:-140px;}
  317.             .offers{padding-top:55px;}
  318.             .intro{padding-top:55px;}
  319.             .section_title{font-size:20px !important;}
  320.             .offers_items {
  321.                 margin-top: 30px;
  322.             }
  323.             .intro_col
  324.             {
  325.                 min-width: 395px;
  326.                 margin-left: -45px;
  328.             }
  330.             .banniere
  331.             {
  332.                 width:100%;
  333.                 height:50%!important;
  334.             }
  335.         }
  337.         .home_slider_container {
  338.     position: absolute;
  339.     top: 0;
  340.     left: 0;
  341.     width: 100%;
  342.     height: 100%;
  343.     z-index: 10;
  344.     background: #ffffff;
  345. }
  346. .home_slider_background{
  347.     opacity: unset
  348. }
  349.     </style>
  350. {% endblock %}
  351. {% block body %}
  352.     <div class="home" style="height: 100px;">
  353.     </div>
  354.     <!-- Blog -->
  355.     <div class="cta">
  356.         <div class="home_slider_container" style="height: 132%">
  357.             {# <div class="owl-carousel owl-theme home_slider">
  358.                 {% for b in banniere%}
  359.                 <div class="owl-item home_slider_item">
  360.                     <div class="home_slider_background">
  361.                         {% for img in b.imagesbannieres %}
  362.                                 <img class="banniere" src="{{ asset('./rusticav/public/uploads/bannieres/'~img.name) }}" alt="" width="100%" height="74%" />
  363.                         {% endfor %}
  364.                     </div>
  365.                 </div>
  366.                 {% endfor %}
  367.             </div> #}
  368.             <div class="owl-carousel owl-theme home_slider">
  369.             {% for b in banniere%}
  370.             <div class="owl-carousel owl-theme home_slider">
  371.                 <div class="home_slider_background">
  372.                     {% for img in b.imagesbannieres %}
  373.                     <img class="banniere" src="{{ asset('./rusticav/public/uploads/bannieres/'~img.name) }}" alt="" width="100%" height="74%" />
  374.                     {% endfor %}
  375.                 </div>
  376.             </div>
  377.             {% endfor %}
  378.         </div>
  380.             <!-- Home Slider Nav - Prev -->
  381.             <div class="home_slider_nav home_slider_prev">
  382.                 <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  383.                      width="28px" height="33px" viewBox="0 0 28 33" enable-background="new 0 0 28 33" xml:space="preserve">
  384.                     <defs>
  385.                         <linearGradient id='home_grad_prev'>
  386.                             <stop offset='0%' stop-color='#fa9e1b'/>
  387.                             <stop offset='100%' stop-color='#8d4fff'/>
  388.                         </linearGradient>
  389.                     </defs>
  390.                     <path class="nav_path" fill="#F3F6F9" d="M19,0H9C4.029,0,0,4.029,0,9v15c0,4.971,4.029,9,9,9h10c4.97,0,9-4.029,9-9V9C28,4.029,23.97,0,19,0z
  391.                     M26,23.091C26,27.459,22.545,31,18.285,31H9.714C5.454,31,2,27.459,2,23.091V9.909C2,5.541,5.454,2,9.714,2h8.571
  392.                     C22.545,2,26,5.541,26,9.909V23.091z"/>
  393.                     <polygon class="nav_arrow" fill="#F3F6F9" points="15.044,22.222 16.377,20.888 12.374,16.885 16.377,12.882 15.044,11.55 9.708,16.885 11.04,18.219
  394.                     11.042,18.219 "/>
  395.                 </svg>
  396.             </div>
  398.             <!-- Home Slider Nav - Next -->
  399.             <div class="home_slider_nav home_slider_next">
  400.                 <svg version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  401.                      width="28px" height="33px" viewBox="0 0 28 33" enable-background="new 0 0 28 33" xml:space="preserve">
  402.                     <defs>
  403.                         <linearGradient id='home_grad_next'>
  404.                             <stop offset='0%' stop-color='#fa9e1b'/>
  405.                             <stop offset='100%' stop-color='#8d4fff'/>
  406.                         </linearGradient>
  407.                     </defs>
  408.                     <path class="nav_path" fill="#F3F6F9" d="M19,0H9C4.029,0,0,4.029,0,9v15c0,4.971,4.029,9,9,9h10c4.97,0,9-4.029,9-9V9C28,4.029,23.97,0,19,0z
  409.                 M26,23.091C26,27.459,22.545,31,18.285,31H9.714C5.454,31,2,27.459,2,23.091V9.909C2,5.541,5.454,2,9.714,2h8.571
  410.                 C22.545,2,26,5.541,26,9.909V23.091z"/>
  411.                     <polygon class="nav_arrow" fill="#F3F6F9" points="13.044,11.551 11.71,12.885 15.714,16.888 11.71,20.891 13.044,22.224 18.379,16.888 17.048,15.554
  412.                 17.046,15.554 "/>
  413.                 </svg>
  414.             </div>
  416.             <!-- Home Slider Dots -->
  418.             <div class="home_slider_dots">
  419.                 <ul id="home_slider_custom_dots" class="home_slider_custom_dots">
  420.                     <li class="home_slider_custom_dot active"><div></div>01.</li>
  421.                     <li class="home_slider_custom_dot"><div></div>02.</li>
  422.                     <li class="home_slider_custom_dot"><div></div>03.</li>
  423.                 </ul>
  424.             </div>
  426.         </div>
  428.     </div>
  429.     <!-- Inclure jQuery (nécessaire pour Owl Carousel) -->
  430. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  431. <!-- Inclure le fichier JavaScript de Owl Carousel -->
  432. <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  434. <script>
  435.     $(document).ready(function(){
  436.         // Initialisez le carrousel avec Owl Carousel
  437.         $('.home_slider').owlCarousel({
  438.             loop: true,
  439.             items: 1,
  440.             autoplay: true,
  441.             autoplayTimeout: 5000, // Durée entre chaque diapositive en millisecondes (5 secondes)
  442.             autoplayHoverPause: true, // Mettre en pause le carrousel lorsque survolé
  443.             nav: true, // Activer les flèches de navigation
  444.             dots: true // Activer les points de navigation
  445.         });
  447.         // Écoutez l'événement 'changed.owl.carousel' pour détecter le changement de diapositive
  448.         $('.home_slider').on('changed.owl.carousel', function(event) {
  449.             var currentSlide = event.item.index;
  450.             var slideCount = event.item.count;
  451.             if (currentSlide === slideCount - 1) {
  452.                 // Si c'est la dernière diapositive, retournez à la première diapositive
  453.                 $('.home_slider').trigger('to.owl.carousel', [0, 500]);
  454.             }
  455.         });
  456.     });
  457. </script>
  458. </div>
  460.     <br><br><br><br><br><br>
  461.         <div class="filter">
  462.         <div class="container">
  463.             <div class="card card-7">
  464.                 <div class="card-body">
  465.                     {{ form_start(form,{'attr':{'class':'search_panel_content d-flex flex-wrap align-items-center justify-content-between'}}) }}
  466.                     <div class="input-group">
  467.                         <label class="label">Destination</label>
  468.                         {{ form_widget(form.ville,{'attr':{'class':'input--style-1','style':'font-size:15px;width:100%;border:none'}}) }}
  469.                     </div>
  470.                     <div class="input-group">
  471.                         <label class="label">Départ</label>
  472.                         {{ form_widget(form.dateDepart,{'attr':{'class':'input--style-1'}}) }}
  473.                     </div>
  474.                     <div class="input-group">
  475.                         <label class="label">Arrivé</label>
  476.                         {{ form_widget(form.dateArrive,{'attr':{'class':'input--style-1'}}) }}
  477.                     </div>
  478.                     <div class="input-group">
  479.                         <label class="label">Nuitée</label>
  480.                         {{ form_widget(form.nombreNuits,{'attr':{'class':'input--style-1'}}) }}
  481.                     </div>
  482.                     <button type="button" class="btn-submit" data-toggle="modal" data-target="#roomModal">
  483.                         Ajouter une chambre
  484.                     </button>
  485.                     <!-- Modal -->
  486.                                 <div class="modal fade" id="roomModal" tabindex="-1" role="dialog" aria-labelledby="roomModalLabel" aria-hidden="true">
  487.                                     <span class="modal-dialog modal-dialog-centered" role="document">
  488.                                         <span class="modal-content rounded-0">
  489.                                             <span class="modal-content" style="width: 85%;margin-top: 131px;margin-left:30px;">
  490.                                                 <span class="modal-body bg-3">
  491.                                                     <div class="modal-header" style="border-bottom: none">
  492.                                                         <h5 class="modal-title" id="roomModalLabel" style="color: #0093a9;font-size: 22px;margin-left: -30px;font-weight: 700">Chambre et Occupation</h5>
  493.                                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  494.                                                             <span aria-hidden="true">&times;</span>
  495.                                                         </button>
  496.                                                     </div>
  497.                                                     <ul class="rooms" data-prototype="{{ form_widget(form.rooms.vars.prototype, {'attr': {'style': 'display:contents;color:black;font-size:18px'}})|e }}">
  498.                                                         <div style="display: contents">
  499.                                                             {% for roomForm in form.rooms %}
  500.                                                                 <li class="row room-item">
  501.                                                                     <span>
  502.                                                                         <label class="input--style-1" style="color: black">Adultes</label>
  503.                                                                         {{ form_widget(roomForm.nbadultes, {'attr': {'class': 'input--style-1', 'style': 'border:1px solid black'}}) }}
  504.                                                                     </span>
  505.                                                                     <span style="margin-right: 10px;"></span>
  506.                                                                     <span>
  507.                                                                         <label class="input--style-1" style="color: black">Enfants</label>
  508.                                                                         {{ form_widget(roomForm.nbfnfants, {'attr': {'class': 'input--style-1', 'style': 'border:1px solid black'}}) }}
  509.                                                                     </span>
  510.                                                                 </li>
  511.                                                             {% endfor %}
  512.                                                         </div>
  513.                                                     </ul>
  514.                                                     <div class="modal-footer">
  515.                                                         <button type="button" class="btn btn-primary" id="saveButtonModal" style="color: #FFFFFF;background:#ff9100 ">Valider</button>
  516.                                                     </div>
  517.                                                 </span>
  518.                                             </span>
  519.                                         </span>
  520.                                     </span>
  521.                                 </div>
  522.                     <button class="btn-submit" type="submit">Voir disponibilité</button>
  523.                     {{ form_end(form) }}
  524.                 </div>
  525.             </div>
  526.         </div>
  527.     </div>
  529.     <!-- Offers -->
  531.     <div class="offers">
  532.         <div class="container">
  533.             <div class="row">
  534.                 <div class="col text-center">
  535.                     <h2 class="section_title">Nos Meilleurs Hôtels en Tunisie</h2>
  536.                 </div>
  537.             </div>
  538.             <div class="row offers_items">
  539.                 {% for h in hotel |slice(0, 4) %}
  540.                     <!-- Offers Item -->
  541.                     <div class="col-lg-6 offers_col">
  542.                         <div class="offers_item">
  543.                             <div class="row">
  544.                                 <div class="col-lg-6">
  545.                                     <div class="offers_image_container">
  546.                                         <div class="offers_image_background" >
  547.                                             {% for img in h.imageshotels %}
  548.                                                 {% if loop.first %}
  549.                                                     <img src="{{ asset('./rusticav/public/uploads/hotels/'~img.name) }}" alt="" width="100%" height="100%" />
  550.                                                 {% endif %}
  551.                                             {% endfor %}
  552.                                         </div>
  553.                                         <div class="offer_name">{{ h.name }}
  554.                                         </div>
  555.                                     </div>
  556.                                 </div>
  557.                                 <div class="col-lg-6">
  558.                                     <div class="offers_content">
  559.                                         <div class="offers_price">
  560.                                             {% set totalprix = 0 %}
  561.                                             {% if h.hotelrooms is defined and h.hotelrooms|length > 0 %}
  562.                                                 {% set firstHotelRoom = h.hotelrooms[0] %}
  563.                                                 {% if firstHotelRoom.pricerooms is defined and firstHotelRoom.pricerooms|length > 0 %}
  564.                                                     {% set firstPriceRoom = firstHotelRoom.pricerooms[0] %}
  565.                                                     {% if firstPriceRoom.price is defined %}
  566.                                                         {% set totalprix = totalprix + firstPriceRoom.price %}
  567.                                                     {% endif %}
  568.                                                 {% endif %}
  569.                                             {% endif %}
  570.                                             {% if h.hotelarrangements is defined and h.hotelarrangements|length > 0 %}
  571.                                                 {% set firstHotelArrangements = h.hotelarrangements[0] %}
  572.                                                 {% if firstHotelArrangements.pricearrangements is defined and firstHotelArrangements.pricearrangements|length > 0 %}
  573.                                                     {% set firstPriceArrangements = firstHotelArrangements.pricearrangements[0] %}
  574.                                                     {% if firstPriceArrangements.price is defined %}
  575.                                                         {% set totalprix = totalprix + firstPriceArrangements.price %}
  576.                                                     {% endif %}
  577.                                                 {% endif %}
  578.                                             {% endif %}
  579.                                             <span style="margin-left: 0px">A partir de:</span> {{ totalprix }} TND
  580.                                         </div>
  581.                                         <div class="rating_r rating_r_4 offers_rating" style="color:#b29b63">
  582.                                             {% for i in 1..h.star %}
  583.                                                 <img src="{{asset('front/images/etoil.png')}}" class="" alt="...">
  584.                                             {% endfor %}
  585.                                         </div>
  586.                                         <style>
  587.                                             .full-paragraph {
  588.                                                 display: none;
  589.                                             }
  591.                                             .short-paragraph {
  592.                                                 display: block;
  593.                                             }
  595.                                         </style>
  596.                                         <div class="offer">
  597.                                             <p class="short-paragraph"style="color: black">{{ h.shortdesc|striptags|slice(0, 100) }}{% if h.shortdesc|length > 100 %}...{% endif %}</p>
  598.                                             <p class="full-paragraph" style="display: none;color: black">{{ h.shortdesc|raw }}</p>
  599.                                             <a href="#" class="read-more-link" onclick="toggleParagraph(this); return false;">Suite</a>
  600.                                         </div>
  602.                                         <script>
  603.                                             function toggleParagraph(link) {
  604.                                                 var offer = link.closest('.offer');
  605.                                                 var shortParagraph = offer.querySelector('.short-paragraph');
  606.                                                 var fullParagraph = offer.querySelector('.full-paragraph');
  608.                                                 if (shortParagraph.style.display === 'none') {
  609.                                                     shortParagraph.style.display = 'block';
  610.                                                     fullParagraph.style.display = 'none';
  611.                                                     link.innerText = 'Suite';
  612.                                                 } else {
  613.                                                     shortParagraph.style.display = 'none';
  614.                                                     fullParagraph.style.display = 'block';
  615.                                                     link.innerText = 'Moins';
  616.                                                 }
  617.                                             }
  618.                                         </script>
  619.                                         <div class="offers_icons">
  620.                                             <ul class="offers_icons_list">
  621.                                                 <li class="offers_icons_item"><img src="{{ asset('front/images/post.png') }}" alt=""></li>
  622.                                                 <li class="offers_icons_item"><img src="{{ asset('front/images/compass.png') }}" alt=""></li>
  623.                                                 <li class="offers_icons_item"><img src="{{ asset('front/images/bicycle.png') }}" alt=""></li>
  624.                                                 <li class="offers_icons_item"><img src="{{ asset('front/images/sailboat.png') }}" alt=""></li>
  625.                                             </ul>
  626.                                         </div>
  627.                                         <div class="offers_link"><a href="{{ path('detailhotel',{'id':h.id}) }}" class="btn btn-primary" style="color: #FFFFFF;background: #ff9100;border: none">Voir Détails</a></div>
  628.                                     </div>
  629.                                 </div>
  630.                             </div>
  631.                         </div>
  632.                     </div>
  633.                 {% endfor %}
  634.             </div>
  635.         </div>
  636.     </div>
  638.     <div class="cta">
  639.         <!-- Image by https://unsplash.com/@thanni -->
  640.         <div class="cta_background" style="background-image:url(./front/images/Slider_3.png);opacity: unset ; background-size: cover;background-position: center;width: 100%;"></div>
  642.         <div class="container">
  643.             <div class="row">
  644.                 <div class="col">
  645.                 </div>
  646.             </div>
  647.         </div>
  649.     </div>
  650.     <!-- Intro -->
  651.     
  652.     <div class="intro">
  653.         <div class="container">
  654.             <div class="row">
  655.                 <div class="col text-center">
  656.                     <h2 class="section_title" style="font-size: 33px;color: #0093a9">Croisière</h2>
  657.                 </div>
  658.             </div>
  659.             <div class="intro">
  660.                 <div class="container mt-4">
  661.                     <div class="row intro_items" style="margin-top: -100px; margin-left:20px;">
  662.                         {% for c in croisiere|slice(0, 3) %}
  663.                             <div class="col-lg-4 intro_col">
  664.                                 <div class="intro_item" style="width: 90%;height: 400px;box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);">
  665.                                     <div class="intro_item_overlay" style="background: #301c405c"></div>
  666.                                     <div class="intro_item_background">
  667.                                         {% for img in c.imagescroisieres %}
  668.                                             {% if loop.first %}
  669.                                                 <img src="{{ asset('./rusticav/public/uploads/croisieres/'~img.name) }}" alt="" width="100%" height="100%" />
  670.                                             {% endif %}
  671.                                         {% endfor %}
  672.                                     </div>
  673.                                     <div class="intro_item_content d-flex flex-column align-items-center justify-content-center" style="margin-top: 60px;">
  674.                                         <div class="button intro_button" style="margin-bottom: -5px;">
  675.                                             <div class="button_bcg" style="background: #0093a9;"></div>
  676.                                             <a href="{{ path('details', {'croisiereId': c.id}) }}" style="font-size: 14px">
  677.                                                 Voir plus<span></span><span></span><span></span>
  678.                                             </a>
  679.                                         </div>
  680.                                         <div class="intro_center text-center">
  681.                                             <a href="{{ path('details', {'croisiereId': c.id}) }}" style="color:#000;font-size: 23px"><h1 style="font-size: 34px;text-transform: uppercase">{{c.name}}</h1></a>
  682.                                         </div>
  683.                                     </div>
  684.                                 </div>
  685.                             </div>
  686.                         {% endfor %}
  687.                     </div>
  688.                 </div>
  689.                 <div class="text-right mt-4" style="margin-right: 79px;">
  690.                     <a href="{{path('app_croisiere')}}" style="color: #0093a9">
  691.                         Découvrir Nos Croisières <i class="fa fa-angle-double-right"></i>
  692.                     </a>
  693.                 </div>
  694.             </div>
  695.         </div>
  697.         <!-- CTA -->
  699.         <div class="cta">
  700.             <!-- Image by https://unsplash.com/@thanni -->
  701.             <div class="cta_background" style="background-image:url(./front/images/Slider_1.png);opacity: unset; background-size: cover;background-position: center;width: 100%;"></div>
  703.             <div class="container">
  704.                 <div class="row">
  705.                     <div class="col">
  706.                     </div>
  707.                 </div>
  708.             </div>
  710.         </div>
  711.         <!-- Intro -->
  712.         <div class="intro">
  713.             <div class="container">
  714.                 <div class="row">
  715.                     <div class="col text-center">
  716.                         <h2 class="section_title" style="font-size: 33px;color: #0093a9">Voyages Organisés</h2>
  717.                     </div>
  718.                 </div>
  719.                 <div class="intro">
  720.                     <div class="container mt-4">
  721.                         <div class="row intro_items" style="margin-top: -62px; margin-left:20px;">
  722.                             {% for s in sejour|slice(0, 3) %}
  723.                                 <div class="col-lg-4 intro_col">
  724.                                     <div class="intro_item" style="width: 90%;height: 400px;box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);">
  725.                                         <div class="intro_item_overlay" style="background: #301c405c"></div>
  726.                                         <div class="intro_item_background">
  727.                                             {% for img in s.imageSejours %}
  728.                                                 {% if loop.first %}
  729.                                                     <img src="{{ asset('./rusticav/public/uploads/sejours/'~img.name) }}" alt="" width="100%" height="100%" />
  730.                                                 {% endif %}
  731.                                             {% endfor %}
  732.                                         </div>
  733.                                         <div class="intro_item_content d-flex flex-column align-items-center justify-content-center" style="margin-top: 60px;">
  734.                                             <div class="intro_date" style="background-color:#ff9100; top: 74px;font-size: 12px;font-weight: 700"> {{s.dated|date("d-m-Y")}} Au {{s.datef|date("d-m-Y")}}</div>
  735.                                             <div class="button intro_button" style="margin-bottom: -5px;">
  736.                                                 <div class="button_bcg" style="background: #0093a9;"></div>
  737.                                                 <a href="{{ path('detailsejour', {'id': s.id}) }}" style="font-size: 14px">
  738.                                                     Voir plus<span></span><span></span><span></span>
  739.                                                 </a>
  740.                                             </div>
  741.                                             <div class="intro_center text-center">
  742.                                                 <a href="{{ path('detailsejour', {'id': s.id}) }}" style="color:#000;font-size: 23px"><h1 style="font-size: 34px;text-transform: uppercase">{{s.titre}}</h1></a>
  743.                                                 <div class="intro_price" style="font-weight: 600;font-size: 20px">À partir de <strong>{{s.prix + s.marge}} TND</strong> </div>
  744.                                             </div>
  745.                                         </div>
  746.                                     </div>
  747.                                 </div>
  748.                             {% endfor %}
  749.                         </div>
  750.                     </div>
  751.                     <div class="text-right mt-4" style="margin-right: 79px;">
  752.                         <a href="{{path('app_sejour')}}" style="color: #0093a9">
  753.                             Découvrir Nos Voyages Organisés <i class="fa fa-angle-double-right"></i>
  754.                         </a>
  755.                     </div>
  756.                 </div>
  757.             </div>
  759.             <!-- CTA -->
  761.             {# <div class="cta">
  762.                 <!-- Image by https://unsplash.com/@thanni -->
  763.                 <div class="cta_background" style="background-image:url(./front/images/Slider_2.png);opacity: unset; background-size: cover;background-position: center;width: 100%;height: 128%;margin-top: 0px;"></div>
  765.                 <div class="container">
  766.                     <div class="row">
  767.                         <div class="col">
  768.                         </div>
  769.                     </div>
  770.                 </div>
  772.             </div>
  773.             <div class="intro">
  774.                 <div class="container">
  775.                     <div class="row" style="margin-top:50px;">
  776.                         <div class="col text-center">
  777.                             <h2 class="section_title" style="font-size: 33px;color: #0093a9">Circuits & Excursions en Tunisie</h2>
  778.                         </div>
  779.                     </div>
  780.                     <div class="intro">
  781.                         <div class="container mt-4">
  782.                             <div class="row intro_items" style="margin-top: -62px; margin-left:20px;">
  783.                                 {% for c in circuit|slice(0, 3) %}
  784.                                     <div class="col-lg-4 intro_col">
  785.                                         <div class="intro_item" style="width: 90%;height: 400px;box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);">
  786.                                             <div class="intro_item_overlay" style="background: #301c405c"></div>
  787.                                             <div class="intro_item_background">
  788.                                                 {% for img in c.imagescircuits %}
  789.                                                     {% if loop.first %}
  790.                                                         <img src="{{ asset('./rusticav/public/uploads/circuits/'~img.name) }}" alt="" width="100%" height="100%" />
  791.                                                     {% endif %}
  792.                                                 {% endfor %}
  793.                                             </div>
  794.                                             <div class="intro_item_content d-flex flex-column align-items-center justify-content-center" style="margin-top: 60px;">
  795.                                                 <div class="intro_date" style="background-color:#ff9100; top: 74px;font-size: 12px;font-weight: 700"> {{c.dated|date("d-m-Y")}} Au {{c.datef|date("d-m-Y")}}</div>
  796.                                                 <div class="button intro_button" style="margin-bottom: -5px;">
  797.                                                     <div class="button_bcg" style="background: #0093a9;"></div>
  798.                                                     <a href="{{ path('detailcircuit', {'id': c.id}) }}" style="font-size: 14px">
  799.                                                         Voir plus<span></span><span></span><span></span>
  800.                                                     </a>
  801.                                                 </div>
  802.                                                 <div class="intro_center text-center">
  803.                                                     <a href="{{ path('detailcircuit', {'id': c.id}) }}" style="color:#000;font-size: 23px"><h1 style="font-size: 34px;text-transform: uppercase">{{c.libelle}}</h1></a>
  804.                                                     <div class="intro_price" style="font-weight: 600;font-size: 20px">À partir de <strong>{{c.prix + c.marge}} TND</strong> </div>
  805.                                                 </div>
  806.                                             </div>
  807.                                         </div>
  808.                                     </div>
  809.                                 {% endfor %}
  810.                             </div>
  812.                         </div>
  813.                         <div class="text-right mt-4" style="margin-right: 79px;">
  814.                             <a href="{{path('app_circuit')}}" style="color: #0093a9">
  815.                                 Découvrir Nos Circuits <i class="fa fa-angle-double-right"></i>
  816.                             </a>
  817.                         </div>
  818.                     </div>
  820.                 </div>
  821.             </div> #}
  822.                 <section class="client">
  823.                     <div class="container">
  824.                         <div class="row">
  825.                             <div class="col text-center">
  826.                                 <h2 class="section_title" style="font-size: 33px;color: #0093a9">Nos Partenaires</h2>
  827.                             </div>
  828.                         </div>
  829.                         <div class="row">
  830.                             <div class="col text-center">
  831.                             <div class="carousel-client">
  832.                                 <div class="slide">
  833.                                     <img src="{{ asset('front/images/logo_starcroisieres.svg') }}" style="margin-top: 15px">
  834.                                 </div>
  835.                                 <div class="slide">
  836.                                     <img src="{{ asset('front/images/msc.webp') }}">
  837.                                 </div>
  838.                                 <div class="slide">
  839.                                     <img src="{{ asset('front/images/costa.webp') }}">
  840.                                 </div>
  841.                                 <div class="slide">
  842.                                     <img src="{{ asset('front/images/rccl.webp') }}">
  843.                                 </div>
  844.                                 <div class="slide">
  845.                                     <img src="{{ asset('front/images/ponant.webp') }}">
  846.                                 </div>
  847.                                 <div class="slide">
  848.                                     <img src="{{ asset('front/images/celestyal.webp') }}">
  849.                                 </div>
  850.                             </div>
  851.                             </div>
  852.                         </div>
  853.                     </div>
  854.                 </section>
  855.             {% block javascripts %}
  856.                 {{ parent() }}
  858.                 <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  859.                 <script>
  860.                     $(document).ready(function() {
  861.                         // Mettre à jour le champ "nombre de nuit" lorsqu'une date d'arrivée est saisie
  862.                         $('#{{ form.dateArrive.vars.id }}').change(function() {
  863.                             var datef = new Date($(this).val());
  864.                             var dated = new Date($('#{{ form.dateDepart.vars.id }}').val());
  866.                             if (!isNaN(datef.getTime()) && !isNaN(dated.getTime())) {
  867.                                 var diff = Math.ceil((datef - dated) / (1000 * 60 * 60 * 24));
  868.                                 $('#{{ form.nombreNuits.vars.id }}').val(diff);
  869.                             }
  870.                         });
  871.                     });
  872.                 </script>
  874.             {% endblock %}
  875.     <script>
  876.         $(document).ready(function () {
  877.             var $collectionHolder = $('ul.rooms');
  879.             $collectionHolder.data('index', $collectionHolder.find(':input').length);
  881.             $collectionHolder.find('li').each(function () {
  882.                 addRemoveButton($(this));
  883.             });
  885.             var $addRoomButton = $('<button type="button" class="add-room" style="color: #0093a9;margin-top: 19px;border: none">Ajouter une chambre</button>');
  886.             var $newLinkLi = $('<li class="row room-item"></li>').append($addRoomButton);
  888.             $collectionHolder.append($newLinkLi);
  890.             $addRoomButton.on('click', function (e) {
  891.                 addRoomForm($collectionHolder, $newLinkLi);
  892.             });
  894.             function addRoomForm($collectionHolder, $newLinkLi) {
  895.                 var prototype = $collectionHolder.data('prototype');
  896.                 var index = $collectionHolder.data('index');
  898.                 var newForm = prototype;
  899.                 newForm = newForm.replace(/__name__/g, index);
  901.                 $collectionHolder.data('index', index + 1);
  903.                 var $newFormLi = $('<li class="row room-item"></li>').append(newForm);
  905.                 $newFormLi.find('input').each(function () {
  906.                     var $input = $(this);
  907.                     var name = $input.attr('name');
  908.                     var $select = createDropdown(name);
  909.                     $input.replaceWith($select);
  910.                 });
  912.                 $newLinkLi.before($newFormLi);
  914.                 addRemoveButton($newFormLi);
  916.                 // Ajouter un gestionnaire d'événements pour les nouveaux éléments ajoutés
  917.                 $newFormLi.find('.remove-room').on('click', function () {
  918.                     $newFormLi.remove();
  919.                 });
  920.             }
  922.             function createDropdown(name) {
  923.                 var $select = $('<select class="input--style-1" style="border: 1px solid black" name="' + name + '"></select>');
  924.                 for (var i = 0; i <= 5; i++) {
  925.                     $select.append('<option value="' + i + '">' + i + '</option>');
  926.                 }
  927.                 return $select;
  928.             }
  930.             function addRemoveButton($formLi) {
  931.                 var $removeRoomButton = $('<button type="button" class="remove-room" style="margin-left: 20px"><i class="fa fa-trash"></i></button>');
  932.                 $formLi.append($removeRoomButton);
  934.                 $removeRoomButton.on('click', function (e) {
  935.                     $formLi.remove();
  936.                 });
  937.             }
  939.             function displayChoices() {
  940.                 var roomValues = [];
  942.                 // Récupérer les valeurs de chaque chambre
  943.                 $('ul.rooms li.row.room-item').each(function () {
  944.                     var nbadultes = $(this).find('select[name*="[nbadultes]"]').val() || 0;
  945.                     var nbfnfants = $(this).find('select[name*="[nbfnfants]"]').val() || 0;
  947.                     roomValues.push({
  948.                         'nbadultes': nbadultes,
  949.                         'nbfnfants': nbfnfants
  950.                     });
  952.                     // Ajouter d'autres lignes pour d'autres champs de la chambre si nécessaire
  953.                 });
  955.                 // Mettre à jour le contenu de l'élément avec les résultats
  956.                 var resultsContainer = $('#results-container');
  957.                 resultsContainer.empty();
  959.                 if (roomValues.length >=1 ) {
  960.                     // Construire le HTML pour afficher les résultats
  961.                     for (var i = 1; i < roomValues.length; i++) {
  962.                         resultsContainer.append('<p>Room ' + (i) + ': Adults - ' + roomValues[i].nbadultes + ', Children - ' + roomValues[i].nbfnfants + '</p>');
  963.                         // Ajouter d'autres lignes pour d'autres champs de la chambre si nécessaire
  964.                     }
  965.                 } else {
  966.                     // Afficher un message si aucun résultat n'est trouvé
  967.                     resultsContainer.html('<p>Aucun résultat trouvé.</p>');
  968.                 }
  969.                 //      Masquer la fenêtre modale après avoir affiché les résultats
  970.                 $('#roomModal').modal('hide');
  971.             }
  972.             // Associer la fonction displayChoices au clic sur le bouton "Enregistrer"
  973.             $('#roomModal').on('click', '.btn-primary', function () {
  974.                 displayChoices();
  975.             });
  976.         });
  977.     </script>
  979.     <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  980.     <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>
  981.     <script>
  982.         $('.carousel-client').bxSlider({
  983.             auto: true,
  984.             slideWidth: 234,
  985.             minSlides: 1,
  986.             maxSlides: 6,
  987.             controls: false
  988.         });
  989.     </script>
  990.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  991.         <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  993.     </div>
  994.     </div>
  995. {% endblock %}