templates/home/home.html.twig line 1

Open in your IDE?
  1. {# <!DOCTYPE html>
  2. <html lang="en"> #}
  3. {% extends 'base.html.twig' %}
  5. {% block title %}Meilleur Agence de voyages en Tunisie - Rustica Voyages{% endblock %}
  6. {% block stylesheets %}
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <title>Hotel List</title>
  10.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  11.     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  12.     <link href="{{ asset('front/plugins/font-awesome-4.7.0/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
  13.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.4/nouislider.min.css" />
  14.     <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
  15.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_style.css') }}">
  16.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_responsive.css') }}">
  17.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_style.css') }}">
  18.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_responsive.css') }}">
  20.     <link href="{{ asset('front/searchbar/vendor/mdi-font/css/material-design-iconic-font.min.css') }}" rel="stylesheet" media="all">
  21.     <link href="{{ asset('front/searchbar/vendor/font-awesome-4.7/css/font-awesome.min.css') }}" rel="stylesheet" media="all">
  22.     <!-- Font special for pages-->
  23.     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  24.     <!-- Vendor CSS-->
  25.     <link href="{{ asset('front/searchbar/vendor/select2/select2.min.css') }}" rel="stylesheet" media="all">
  26.     <link href="{{ asset('front/searchbar/vendor/datepicker/daterangepicker.css') }}" rel="stylesheet" media="all">
  27.     <!-- Main CSS-->
  28.     <link href="{{ asset('front/searchbar/css/main.css') }}" rel="stylesheet" media="all">
  29.     <!-- Modal Css -->
  30.     <link rel="stylesheet" href="{{ asset('front/modals/fonts/icomoon/stylecommons.css') }}">
  31.     <!-- Bootstrap CSS -->
  32.     <link rel="stylesheet" href="{{ asset('front/modals/css/bootstrapcss.min.css') }}">
  33.     <link rel="stylesheet" type="text/css" href="{{ asset('front/plugins/OwlCarousel2-2.2.1/owl.carousel.css') }}">
  34.     <link rel="stylesheet" type="text/css" href="{{ asset('front/plugins/OwlCarousel2-2.2.1/owl.theme.default.css') }}">
  35.     <link rel="stylesheet" type="text/css" href="{{ asset('front/plugins/OwlCarousel2-2.2.1/animate.css') }}">
  36.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  38.     <!-- Icons font CSS-->
  39.     <link href="{{ asset('searchbar/vendor/mdi-font/css/material-design-iconic-font.min.css') }}" rel="stylesheet" media="all">
  40.     <!-- Font special for pages-->
  41.     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  43.     <!-- Vendor CSS-->
  44.     <link href="{{ asset('searchbar/vendor/select2/select2.min.css') }}" rel="stylesheet" media="all">
  46.     <!-- Main CSS-->
  47.     <link href="{{ asset('searchbar/css/main.css') }}" rel="stylesheet" media="all">
  48.     <style>
  49.         .hotel-container {
  50.             display: flex;
  51.             gap: 20px; /* Espacement entre les hôtels */
  52.             flex-wrap: wrap; /* Permet de revenir à la ligne si l'espace est insuffisant */
  53.         }
  55.         .modal .modal-content {
  56.             background-color: white;
  57.             border: none;
  58.             border-radius: 7px;
  59.         }
  60.         .modal .modal-content .modal-body {
  61.             background: #FFFFFF;
  62.             border: none;
  63.             border-radius: 7px;
  64.             overflow: hidden;
  65.             color: #fff;
  66.             padding-left: 35px;
  67.             padding-right: 16px;
  68.             -webkit-box-shadow: 0 10px 50px -10px rgba(0, 0, 0, 0.9);
  69.             box-shadow: none;
  70.         }
  72.         .hotel {
  73.             flex: 1;
  74.             min-width: 200px; /* Largeur minimale pour chaque hôtel */
  75.             max-width: 300px; /* Largeur maximale pour chaque hôtel */
  76.         }
  77.         .facilities {
  78.             margin-left: 20px;
  79.             list-style-type: none;
  80.             padding: 0;
  81.         }
  82.         .facilities li {
  83.             margin-bottom: 5px;
  84.         }
  85.         .room {
  86.             margin-bottom: 15px;
  87.             border: 1px solid #ddd;
  88.             padding: 10px;
  89.         }
  90.         .remove-room {
  91.             color: red;
  92.             cursor: pointer;
  93.             background-color: #FFFFFF;
  94.             border-color: #FFFFFF;
  95.             font-size: 18px;
  96.         }
  97.         .facility {
  98.             display: contents;
  99.             align-items: center;
  100.         }
  101.         .facility img {
  102.             margin-right: 10px;
  103.             width: 20px;
  104.             height: 20px;
  105.             filter: invert(54%) sepia(74%) saturate(1363%) hue-rotate(199deg) brightness(108%) contrast(107%)
  106.         }
  108.         .hotel1
  109.         {
  110.             width: auto;
  111.             margin-left: auto;
  112.             box-shadow: none;
  113.             border: 1px solid #cccccc;
  114.             border-radius: 25px;
  115.             height: 368px;
  116.             background-color: #0A6CA9;
  117.             color: #FFFFFF;
  118.         }
  123.         .hotel2
  124.         {
  125.             width: 22%;
  126.             margin-top: 453px;
  127.             margin-left: 15px;
  128.             box-shadow: none;
  129.             border-radius: 25px;
  130.             height: 368px;
  131.         }
  132.         .badge{
  133.             font-size: 80%;
  134.             font-weight: 600;
  135.             background-color: #b29b63;
  136.         }
  137.         .container{
  138.             max-width: 1440px;
  139.         }
  141.         .offers_item1{
  142.             position: relative;
  143.             width: 110%;
  144.             overflow: hidden;
  145.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  146.             transition: all 300ms;
  147.             margin-bottom: 30px;
  148.             margin-left: -15px;
  149.             color: rgba(0, 0, 0, 0.87);
  150.             background: #fff;
  151.         }
  152.         .offers_item2{
  153.             position: relative;
  154.             width: 110%;
  155.             overflow: hidden;
  156.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  157.             transition: all 300ms;
  158.             margin-bottom: 100px;
  159.             margin-left: -15px;
  160.             color: rgba(0, 0, 0, 0.87);
  161.             background: #fff;
  162.             border-radius: 20px;
  163.         }
  165.         h4 {
  166.             position: relative;
  167.             padding: 0;
  168.             margin: 0;
  169.             font-family: "Raleway", sans-serif;
  170.             font-weight: 600;
  171.             font-size: 24px;
  172.             color: #080808;
  173.             -webkit-transition: all 0.4s ease 0s;
  174.             -o-transition: all 0.4s ease 0s;
  175.             transition: all 0.4s ease 0s;
  176.         }
  178.         h4 span {
  179.             display: block;
  180.             font-size: 0.5em;
  181.             line-height: 1.3;
  182.         }
  183.         h4 em {
  184.             font-style: normal;
  185.             font-weight: 600;
  186.         }
  187.         .two h4 {
  188.             text-transform: capitalize;
  189.             margin: 15px;
  190.             color: #FFFFFF;
  191.         }
  192.         .two h4:before {
  193.             position: absolute;
  194.             left: 0;
  195.             bottom: 0;
  196.             width: 60px;
  197.             height: 2px;
  198.             content: "";
  199.             background-color: white;
  200.         }
  202.         .two h4 span {
  203.             font-size: 13px;
  204.             font-weight: 500;
  205.             text-transform: uppercase;
  206.             letter-spacing: 4px;
  207.             line-height: 3em;
  208.             padding-left: 0.25em;
  209.             color: rgba(0, 0, 0, 0.4);
  210.             padding-bottom: 10px;
  211.         }
  212.         .alt-two h4 {
  213.             text-align:center;
  214.         }
  215.         .alt-two h4:before {
  216.             left:50%; margin-left:-30px;
  217.         }
  218.         .mt-4, .my-4 {
  219.             margin-top: -5.5rem !important;
  220.         }
  222.         /* Style personnalisé pour noUiSlider */
  223.         .noUi-target {
  224.             background: #f0f0f0;
  225.             border: 1px solid #ccc;
  226.             border-radius: 5px;
  227.         }
  229.         .noUi-horizontal {
  230.             height: 10px;
  231.         }
  233.         .noUi-handle {
  234.             width: 20px;
  235.             height: 20px;
  236.             background: #0A6CA9;
  237.             border: 2px solid #fff;
  238.             border-radius: 50%;
  239.             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  240.         }
  242.         .noUi-connect {
  243.             background: #0A6CA9;
  244.             height: 10px;
  245.         }
  247.         .noUi-tooltip {
  248.             background: #0A6CA9;
  249.             color: #fff;
  250.             border-radius: 3px;
  251.             padding: 5px;
  252.             font-size: 12px;
  253.             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  254.         }
  257.         @media (min-width: 576px) {
  258.             .modal-dialog {
  259.                 max-width: 800px;
  260.                 margin: 1.75rem auto;
  261.             }
  262.         }
  263.         .card-7 {
  264.             background: transparent;
  265.             position: relative;
  266.             border: none;
  267.             margin-top: 25px;
  268.         }
  270.         .input--large {
  271.             width: 300px;
  272.             height: 80px;
  273.         }
  274.         .input--medium {
  275.             width: 280px;
  276.             height: 80px;
  277.         }
  278.         .form-group1 {
  279.             margin-top: -10px;
  280.         }
  281.         .bg-color-1 {
  282.             background: transparent;
  283.         }
  285.         .p-t-395 {
  286.             padding-top: 95px;
  287.         }
  289.         .page-wrapper {
  290.             min-height: 0vh;
  291.         }
  295.         .box-area{
  296.             display: inline-flex;
  297.             flex-wrap: wrap;
  298.             justify-content: left;
  299.             align-items: left;
  300.             margin-top: 70px;
  301.             margin-left: 25px;
  302.         }
  303.         .single-box{
  304.             position: relative;
  305.             display: flex;
  306.             flex-direction: column;
  307.             align-items: left;
  308.             justify-content: left;
  309.             width: 320px;
  310.             height: 360px;
  311.             border-radius: 4px;
  312.             background-color: #fff;
  313.             text-align: left;
  314.             margin: 6px;
  315.             padding: 20px;
  316.             transition: .3s;
  317.             box-shadow: 1px 0 5px 0 rgba(0,0,0,0.6) ;
  318.         }
  319.         .img-area{
  320.             display: flex;
  321.             justify-content: center;
  322.             align-items: center;
  323.             width: 80px;
  324.             height:80px;
  325.             border: 6px solid #ddd;
  326.             border-radius: 50%;
  327.             margin-bottom: 10px;
  328.             padding: 20px;
  329.             background-size: cover;
  330.             background-position: center center;
  331.         }
  332.         .single-box:nth-child(1) .img-area{
  333.             background-image: url(https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=600);
  334.         }
  335.         .single-box:nth-child(2) .img-area{
  336.             background-image: url(https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=600);
  337.         }
  338.         .single-box:nth-child(3) .img-area{
  339.             background-image: url(https://images.pexels.com/photos/35537/child-children-girl-happy.jpg?auto=compress&cs=tinysrgb&w=600);
  340.         }
  341.         .header-text{
  342.             font-size: 24px;
  343.             font-weight: 500px;
  344.             line-height: 48px;
  345.         }
  346.         .img-text h3{
  347.             margin: 10px 0;
  348.         }
  349.         .img-text p{
  350.             font-size: 15px;
  351.             font-weight: 400px;
  352.             line-height: 30px;
  353.         }
  354.         
  355.         .single-box:hover .line{
  356.             background-color: #fff;
  357.         }
  358.         .childrenAgesContainer{
  359.             display: flex;
  360.             margin-left: 18px;
  361.         }
  363.         .btn-primary {
  364.             color: #fff;
  365.             background-color: #17a2b8;
  366.             border-color: #17a2b8;
  367.             width: 60%;
  368.             margin-top: 10px;
  369.         }
  372.         .owl-theme .owl-dots {
  373.             text-align: center;
  374.             -webkit-tap-highlight-color: transparent;
  375.             display: none;
  376.         }
  377.         .owl-theme .owl-nav {
  378.             margin-top: 10px;
  379.             text-align: center;
  380.             -webkit-tap-highlight-color: transparent;
  381.             z-index: 10000;
  382.             background: red;
  383.             display: none;
  384.         }
  385.         .cta {
  386.             padding-top: 190px;
  387.             padding-bottom: 183px;
  388.             background: linear-gradient(to right, #b29b63, #0093a9);
  389.         }
  390.         .search_tab.active {
  391.             background: linear-gradient(to right, #b29b63, #0093a9);
  392.             color: #FFFFFF;
  393.         }
  394.         .search_tab:hover {
  395.             background: linear-gradient(to right, #0093a9, #b29b63);
  396.             color: #FFFFFF;
  397.         }
  398.         .content {
  399.             max-height: 3em; /* Limite initiale de hauteur en fonction du nombre de lignes */
  400.             overflow: hidden;
  401.         }
  403.         .expanded {
  404.             max-height: none; /* Agrandir la hauteur lorsque le paragraphe est étendu */
  405.         }
  407.         .read-more {
  408.             cursor: pointer;
  409.             color: blue;
  410.         }
  411.         .home_slider_background {
  412.             height: 80;
  413.             width: 100%;
  414.             background-size: cover;
  415.             background-position: center center;
  416.             background-repeat: no-repeat;
  417.             margin-top:40px;
  418.         }
  419.         .offers_price {
  420.             display: inline-block;
  421.             font-size: 29px;
  422.             font-weight: 700;
  423.             color: #ff9100;
  424.             line-height: 25px;
  425.         }
  426.         .offers_price a{
  427.             display: inline-block;
  428.             font-size: 22px;
  429.             font-weight: 700;
  430.             color: #0093a9;
  431.             line-height: 25px;
  432.         }
  433.         .offer_name{
  434.             display: block;
  435.             font-size: 22px;
  436.             font-weight: 700;
  437.             background: #0093a9;
  438.             color: #FFFFFF;
  439.             width: 310px;
  440.             line-height: 35px;
  441.             padding-left: 12px;
  442.         }
  443.         .offers_item {
  444.             border-radius: 12px;
  445.             overflow: hidden;
  446.             position: relative;
  447.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  448.             transition: all 300ms;
  449.         }
  451.         .offers_item:hover {
  452.             transform: translateY(-2px);
  453.             box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  454.         }
  456.         .offers_image_background {
  457.             position: relative;
  458.             margin: auto;
  459.             overflow: hidden;
  460.         }
  461.         .offers_image_background img {
  462.             max-width: 100%;
  463.             transition: all 0.3s;
  464.             display: block;
  465.             transform: scale(1);
  466.         }
  468.         .offers_image_background:hover img {
  469.             transform: scale(1.1);
  470.         }
  472.         .offers_content {
  473.             margin-top: 22px;
  474.             margin-left: 17px;
  475.             margin-bottom: 22px;
  476.             margin-right: 17px;
  477.         }
  479.         .offers_link {
  480.             margin-top: 24px;
  481.         }
  482.          .intro_price {
  483.              font-size: 20px;
  484.              font-weight: 600;
  485.              color: #FFFFFF;
  486.              margin-top: -4px;
  487.          }
  488.          
  489.          .intro{
  490.             padding-bottom: 50px;
  491.          }
  492.         .button a:hover {
  493.             background-color: #ff9100;
  494.             color: white;
  495.         }
  497.         .btn-primary :hover {
  498.             color: #fff;
  499.             background-color: #ff9100;
  500.             border-color: #ff9100;
  501.         }
  502.         .ctaBackground {
  503.             position: absolute;
  504.             top: 0;
  505.             left: 0;
  506.             width: 100%;
  507.             height: 210%;
  508.             background-repeat: no-repeat;
  509.             background-size: cover;
  510.             background-position: center center;
  511.             opacity: 0.27;
  512.         }
  513.         img {
  514.             max-width: 100%;
  515.             height: 100%;
  516.         }
  518.         .container {
  519.             max-width: 1440px!important;
  520.         }
  522.         .main_nav_item a {
  523.             font-family: 'Open Sans', sans-serif;
  524.             font-size: 15px;
  525.             font-weight: 700;
  526.             color: #0093a9!important;
  527.             text-transform: uppercase;
  528.             padding-bottom: 10px;
  529.             padding-top: 10px;
  530.         }
  531.         .main_nav_item::after {
  532.             display: block;
  533.             position: absolute;
  534.             left: -1px;
  535.             bottom: -11px;
  536.             width: calc(100% + 2px);
  537.             height: 2px;
  538.             background: linear-gradient(to right, #b29b63, #0093a9)!important;
  539.             content: '';
  540.             opacity: 0;
  541.             -webkit-transition: all 200ms ease;
  542.             -moz-transition: all 200ms ease;
  543.             -ms-transition: all 200ms ease;
  544.             -o-transition: all 200ms ease;
  545.             transition: all 200ms ease;
  546.         }
  548.         .section-title h2 {
  549.             text-align: center;
  550.             font-size: 18px;
  551.             font-weight: 600;
  552.             text-transform: uppercase;
  553.             padding-bottom: 6px;
  554.             color: #000;
  555.             letter-spacing: 0.3px;
  556.             padding: 0;
  557.         }
  558.         .section-title::after {
  559.             content: "";
  560.             height: 3px;
  561.             background: #fbb900;
  562.             width: 80px;
  563.             position: absolute;
  564.             left: 0;
  565.             right: 0;
  566.             margin: auto;
  567.         }
  568.         /****************/
  569.         /*     BX-SLIDER     */
  570.         /****************/
  571.        /* section.client {
  572.             padding:4em 0em;
  574.         }*/
  575.         section.client .section-title {
  576.             margin-bottom: 6em;
  577.         }
  578.         .bx-controls {
  579.             position: relative;
  580.         }
  581.         .bx-wrapper{
  582.             margin: auto;
  583.             margin-top: 70px;
  584.         }
  585.         .bx-wrapper .bx-pager {
  586.             text-align: center;
  587.             padding-top: 30px;
  588.             display: none;
  589.         }
  590.         .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  591.             display: inline-block;
  592.             *zoom: 1;
  593.             *display: inline;
  594.         }
  595.         .bx-wrapper .bx-pager.bx-default-pager a {
  596.             background: #666;
  597.             text-indent: -9999px;
  598.             display: block;
  599.             width: 10px;
  600.             height: 10px;
  601.             margin: 0 5px;
  602.             outline: 0;
  603.             -moz-border-radius: 5px;
  604.             -webkit-border-radius: 5px;
  605.             border-radius: 5px;
  606.         }
  607.         
  608.         /**/
  609.         
  610.                /* Default styles */
  611.         .filter {
  612.             background: #f3f6f9;
  613.             margin-top: -24px;
  614.         }
  615.         .container {
  616.             padding: 0 15px;
  617.             margin: 0 auto;
  618.         }
  619.         .card {
  620.             border: none;
  621.             background: transparent;
  622.             width: 100%;
  623.            /* max-width: 1070px;*/
  624.             margin: 0 auto;
  625.         }
  626.         .card-body {
  627.             margin-top: 25px;
  628.         }
  629.         .input-group {
  630.             width: calc(25% - 20px);
  631.             max-width: 300%;
  632.             margin-bottom: 10px;
  633.         }
  635.         .input-group1 {
  636.             width: calc(25% - 20px);
  637.             max-width: 300%;
  638.             margin-bottom: 10px;
  639.         }
  641.         .input-group2 {
  642.             width: calc(25% - 20px);
  643.             max-width: 300%;
  644.             margin-bottom: 10px;
  645.         }
  646.         .label {
  647.             color: black;
  648.             font-weight: 500;
  649.             display: block;
  650.         }
  651.         .btn-submit {
  652.             font-size: 16px;
  653.             font-weight: 500;
  654.             border: 1px solid black;
  655.             background: #FFFFFF;
  656.             color: black;
  657.             margin-bottom: 10px;
  658.             max-width:335px;
  659.         }
  661.         /* Media Queries */
  662.         @media screen and (max-width: 768px) {
  663.             .input-group {
  664.                 width: 97%!important;
  665.                 max-width: none;
  666.             }
  667.             .btn-submit {
  668.                 width: 97%!important;
  669.             }
  671.             .nuite{
  672.                 width: 23%!important;
  673.                 max-width: none;
  674.             }
  675.             .arr{
  676.                 width: 70%!important;
  677.                 max-width: none;
  678.             }
  679.             .form{
  680.                 margin-left: 11px!important;
  681.             }
  682.                 .home_slider_container{
  683.                 display:none;
  684.             }
  685.             .form-group1 {
  686.                 margin-top: -11px!important;
  687.                 margin-left: -15px!important;
  688.             }
  689.             .lnuite{
  690.                 margin-left: -14px!important;
  691.             }
  692.             .inuite{
  693.                 margin-left: 20px!important;
  694.             }
  695.             .iarr{
  696.                 margin-left: 7px!important;
  697.             }
  698.             .larr{
  699.                 margin-left: -8px!important;
  700.             }
  701.             #addRoomButton{
  702.                 font-size: 14px!important;
  703.             }
  705.             .daterangepicker {
  706.                 width: 290px!important;
  707.                 left:60px!important;
  708.                 top:280px!important;
  709.             }
  710.             .cta{
  711.             display:none;
  712.             }
  713.             .filter{margin-top:-140px;}
  714.             .offers{padding-top:55px;}
  715.             .intro{padding-top:55px;}
  716.             .section_title{font-size:20px !important;}
  717.             .offers_items {
  718.                 margin-top: 30px;
  719.             }
  720.             .intro_col
  721.             {
  722.                 min-width: 395px;
  723.                 margin-left: -45px;
  725.             }
  727.             .banniere
  728.             {
  729.                 width:100%;
  730.                 height:50%!important;
  731.             }
  732.         }
  734.         .home_slider_container {
  735.     position: absolute;
  736.     top: 0;
  737.     left: 0;
  738.     width: 100%;
  739.     height: 100%;
  740.     z-index: 10;
  741.     background: #ffffff;
  742. }
  743. .home_slider_background{
  744.     opacity: unset
  745. }
  746. .input--style-1 {
  747.     font-size: 16px;
  748.     padding: 9px 0;
  749.     color: #666;
  750.     font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
  751. }
  752. .daterangepicker {
  753.     width: 490px;
  754. }
  756. .card1 {
  757.             position: relative;
  758.             display: inline-block;
  759.             width: 330px;
  760.             margin-left: 30px;
  761.             background: #FFF;
  762.             box-shadow: 0px 15px 30px 0px rgba(25, 27, 42, 0.05);
  763.         }
  765.         .card1__love-btn {
  766.             position: absolute;
  767.             top: 22px;
  768.             right: 22px;
  769.             display: grid;
  770.             place-items: center;
  771.             width: 44px;
  772.             height: 44px;
  773.             border-radius: 50%;
  774.             background: #fff;
  775.             border: none;
  776.             cursor: pointer;
  777.         }
  779.         .card1__love-btn svg {
  780.             width: 20px;
  781.             fill: #FF6A8E;
  782.         }
  784.         .card1__img {
  785.             width: 100%;
  786.             height: 245px;
  787.             object-fit: cover;
  788.         }
  790.         .card1__body {
  791.             padding: 1px 10px 5px 15px;
  792.         }
  794.         .card1__title {
  795.             font-size: 18px;
  796.             font-weight: 600;
  797.         }
  799.         .card1__text {
  800.             padding-top: 8px;
  801.             padding-bottom: 24px;
  802.             color: #5A5A5A;
  803.             font-size: 14px;
  804.             font-weight: 400;
  805.             line-height: 170%;
  806.         }
  808.         .card1__footer {
  809.             display: flex;
  810.             align-items: center;
  811.             justify-content: space-between;
  812.             margin-top:-20px;
  813.         }
  815.         .card1__footer .price {
  816.             display: contents;
  817.             font-size: 20px;
  818.             font-weight: 600;
  819.             color: black;
  820.         }
  822.         .test {
  823.             display: flex;
  824.             gap: 7px;
  825.             align-items: center;
  826.             padding: 7px 24px;
  827.             color: #000;
  828.             font-size: 15px;
  829.             font-weight: 500;
  830.             line-height: 170%;
  831.             border: none;
  832.             outline: none;
  833.             border-radius: 5px;
  834.             background: transparent;
  835.             margin-left:-25px;
  836.             cursor: pointer;
  837.         }
  839.     </style>
  840. </head>
  841. {% endblock %}
  842. {% block body %}
  843.     <div class="home" style="height: 100px;">
  844.     </div>
  845.     <!-- Blog -->
  846.     <div class="cta">
  847.         <div class="home_slider_container" style="height: 132%">
  848.             {# <div class="owl-carousel owl-theme home_slider">
  849.                 {% for b in banniere%}
  850.                 <div class="owl-item home_slider_item">
  851.                     <div class="home_slider_background">
  852.                         {% for img in b.imagesbannieres %}
  853.                                 <img class="banniere" src="{{ asset('./rusticav/public/uploads/bannieres/'~img.name) }}" alt="" width="100%" height="74%" />
  854.                         {% endfor %}
  855.                     </div>
  856.                 </div>
  857.                 {% endfor %}
  858.             </div> #}
  859.             <div class="owl-carousel owl-theme home_slider">
  860.             {% for b in banniere%}
  861.             <div class="owl-carousel owl-theme home_slider">
  862.                 <div class="home_slider_background">
  863.                     {% for img in b.imagesbannieres %}
  864.                     <img class="banniere" src="{{ asset('./rusticav/public/uploads/bannieres/'~img.name) }}" alt="" width="100%" height="74%" />
  865.                     {% endfor %}
  866.                 </div>
  867.             </div>
  868.             {% endfor %}
  869.         </div>
  871.             <!-- Home Slider Nav - Prev -->
  872.             <div class="home_slider_nav home_slider_prev">
  873.                 <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"
  874.                      width="28px" height="33px" viewBox="0 0 28 33" enable-background="new 0 0 28 33" xml:space="preserve">
  875.                     <defs>
  876.                         <linearGradient id='home_grad_prev'>
  877.                             <stop offset='0%' stop-color='#fa9e1b'/>
  878.                             <stop offset='100%' stop-color='#8d4fff'/>
  879.                         </linearGradient>
  880.                     </defs>
  881.                     <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
  882.                     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
  883.                     C22.545,2,26,5.541,26,9.909V23.091z"/>
  884.                     <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
  885.                     11.042,18.219 "/>
  886.                 </svg>
  887.             </div>
  889.             <!-- Home Slider Nav - Next -->
  890.             <div class="home_slider_nav home_slider_next">
  891.                 <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"
  892.                      width="28px" height="33px" viewBox="0 0 28 33" enable-background="new 0 0 28 33" xml:space="preserve">
  893.                     <defs>
  894.                         <linearGradient id='home_grad_next'>
  895.                             <stop offset='0%' stop-color='#fa9e1b'/>
  896.                             <stop offset='100%' stop-color='#8d4fff'/>
  897.                         </linearGradient>
  898.                     </defs>
  899.                     <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
  900.                 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
  901.                 C22.545,2,26,5.541,26,9.909V23.091z"/>
  902.                     <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
  903.                 17.046,15.554 "/>
  904.                 </svg>
  905.             </div>
  907.         </div>
  909.     </div>
  910.     <!-- Inclure jQuery (nécessaire pour Owl Carousel) -->
  911. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  912. <!-- Inclure le fichier JavaScript de Owl Carousel -->
  913. <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  915. <script>
  916.     $(document).ready(function(){
  917.         // Initialisez le carrousel avec Owl Carousel
  918.         $('.home_slider').owlCarousel({
  919.             loop: true,
  920.             items: 1,
  921.             autoplay: true,
  922.             autoplayTimeout: 5000, // Durée entre chaque diapositive en millisecondes (5 secondes)
  923.             autoplayHoverPause: true, // Mettre en pause le carrousel lorsque survolé
  924.             nav: true, // Activer les flèches de navigation
  925.             dots: true // Activer les points de navigation
  926.         });
  928.         // Écoutez l'événement 'changed.owl.carousel' pour détecter le changement de diapositive
  929.         $('.home_slider').on('changed.owl.carousel', function(event) {
  930.             var currentSlide = event.item.index;
  931.             var slideCount = event.item.count;
  932.             if (currentSlide === slideCount - 1) {
  933.                 // Si c'est la dernière diapositive, retournez à la première diapositive
  934.                 $('.home_slider').trigger('to.owl.carousel', [0, 500]);
  935.             }
  936.         });
  937.     });
  938. </script>
  939. </div>
  940. <br><br><br><br><br><br><br><br>
  941.     <div class="filter">
  942.         <div class="container">
  943.             
  944.                     <div class="card card-7">
  945.                         <div class="card-body">
  946.                             <form class="form" id="searchForm" style="margin-left:60px;margin-top:-15px">
  947.                                 <div class="input-group input--medium">
  948.                                     <label  class="label" for="city">Destination</label>
  949.                                     <select id="city" name="city" class="input--style-1" style="margin-top: -6px;border: none;width: 80%"  required>
  950.                                         <option value="">Choisir une ville</option>
  951.                                         {% for cityId, cityName in cities %}
  952.                                             <option value="{{ cityId }}" {% if city == cityId %}selected{% endif %}>{{ cityName }}</option>
  953.                                         {% endfor %}
  954.                                     </select>
  955.                                 </div>
  956.                                 <div class="input-group input--medium arr">
  957.                                     <label class="larr">Arrivée - Départ</label>
  958.                                     <div class="form-group1">
  959.                                         <input type="text" class="input--style-1 iarr" name="daterange" id="daterange" required/>
  960.                                     </div>
  961.                                 </div>
  962.                                 <div class="input-group input--medium nuite" style="width:90px">
  963.                                     <label class="lnuite">Nuitée</label>
  964.                                     <div class="form-group1">
  965.                                         <input type="text" class="input--style-1 inuite" id="nightsCount" readonly/>
  966.                                     </div>
  967.                                 </div>
  968.                                 <button class="btn-submit" type="button" id="addRoomButton" data-toggle="modal" data-target="#roomModal" style="background: #FFFFFF"><i class="fa fa-bed"></i> une chambre: 2 adultes</button>
  969.                                 <button class="btn-submit" type="submit" style="background: #17a2b8;color: #FFFFFF">Rechercher</button>
  970.                             </form>
  971.                         </div>
  972.                     </div>
  973.                 
  974.         </div>
  975.     </div>
  976. <!-- The Modal -->
  977. <div class="modal fade" id="roomModal" tabindex="-1" role="dialog" aria-labelledby="roomModalLabel" aria-hidden="true">
  978.     <div class="modal-dialog" role="document">
  979.         <div class="modal-content">
  980.             <div class="modal-header">
  981.                 <h5 class="modal-title" id="roomModalLabel">Chambre & Occupation</h5>
  982.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  983.                     <span aria-hidden="true">&times;</span>
  984.                 </button>
  985.             </div>
  986.             <div class="modal-body">
  987.                 <div id="roomsContainer">
  988.                     {% for room in rooms %}
  989.                         <div class="room mb-3">
  990.                             <div class="form-row align-items-center">
  991.                                 <div class="col-md-3">
  992.                                     <label for="adultCount"style="color: black">Adulte(s):</label>
  993.                                     <input type="number" class="form-control adultCount" name="adultCount[]" min="1" required value="{{ room.Adult }}">
  994.                                 </div>
  995.                                 <div class="col-md-3">
  996.                                     <label for="childCount"style="color: black">Enfant(s):</label>
  997.                                     <input type="number" class="form-control childCount" name="childCount[]" min="0" value="{{ room.Child is defined ? room.Child|length : 0 }}">
  998.                                 </div>
  999.                                 <div class="col-md-5">
  1000.                                         <div class="childrenAgesContainer">
  1001.                                             {% if room.Child is defined %}
  1002.                                                 {% for age in room.Child %}
  1003.                                                     <div class="col-md-3">
  1004.                                                         <label for="childAge{{ loop.index }}" style="color: black;width: 104%">Âge {{ loop.index }}</label>
  1005.                                                         <select id="childAge{{ loop.index }}" style="width: 60px" class="form-control childrenAges" name="childrenAges[]">
  1006.                                                             <option value="" disabled>Sélectionner l'âge</option>
  1007.                                                             {% for i in 1..17 %}
  1008.                                                                 <option value="{{ i }}" {% if age == i %}selected{% endif %}>{{ i }}</option>
  1009.                                                             {% endfor %}
  1010.                                                         </select>
  1011.                                                     </div>
  1012.                                                 {% endfor %}
  1013.                                             {% endif %}
  1014.                                         </div>
  1015.                                     </div>
  1016.                                 <div class="col-md-1 text-right">
  1017.                                     <button type="button" class="btn btn-danger btn-sm remove-room" data-room-id="{{ loop.index }}">
  1018.                                         <i class="fa fa-trash"></i>
  1019.                                     </button>
  1020.                                 </div>
  1021.                             </div>
  1022.                         </div>
  1023.                     {% else %}
  1024.                         <div class="room mb-3">
  1025.                             <div class="form-row align-items-center">
  1026.                                 <div class="col-md-3">
  1027.                                     <label for="adultCount" style="color: black">Adulte(s):</label>
  1028.                                     <input type="number" class="form-control adultCount" name="adultCount[]" min="1" required value="2">
  1029.                                 </div>
  1030.                                 <div class="col-md-3">
  1031.                                     <label for="childCount" style="color: black">Enfant(s):</label>
  1032.                                     <input type="number" class="form-control childCount" name="childCount[]" min="0" value="0">
  1033.                                 </div>
  1034.                                 <div class="row">
  1035.                                     <div class="col-md-5">
  1036.                                         <div class="childrenAgesContainer">
  1037.                                             <!-- This container will be populated dynamically -->
  1038.                                         </div>
  1039.                                     </div>
  1040.                                     <div class="col-md-1 text-right">
  1041.                                         <button type="button" class="btn btn-danger btn-sm remove-room" data-room-id="{{ loop.index }}">
  1042.                                             <i class="fa fa-trash"></i>
  1043.                                         </button>
  1044.                                     </div>
  1045.                                 </div>
  1046.                             </div>
  1047.                         </div>
  1048.                     {% endfor %}
  1049.                 </div>
  1050.                 <button type="button" class="btn btn-secondary" id="addMoreRoomButton">Add More Room</button>
  1051.             </div>
  1052.             <div class="modal-footer">
  1053.                 <button type="button" class="btn btn-primary" id="saveRoomButton" data-dismiss="modal">Save</button>
  1054.             </div>
  1055.         </div>
  1056.     </div>
  1057. </div>
  1058. <div id="content">
  1059.     <div style="display: none">
  1060.         {{ content|raw }}
  1061.     </div>
  1062. </div>
  1063. <br><br><br><br>
  1064.     <div class="offers">
  1065.         <div class="container">
  1066.             <div class="row">
  1067.                 <div class="col text-center">
  1068.                     <h2 class="section_title">Nos Meilleurs Hôtels en Tunisie</h2>
  1069.                 </div>
  1070.             </div>
  1071.             <div class="row offers_items">
  1072.                 <div id="test">
  1073.                     <div style="display: none">
  1074.                         {{ test|raw }}
  1075.                     </div>
  1076.                 </div>
  1077.             </div>
  1078.         </div>
  1079.     </div>
  1080.     <div class="cta">
  1081.         <div class="cta_background" style="background-image:url(./front/images/Slider_3.png);opacity: unset ; background-size: cover;background-position: center;width: 100%;"></div>
  1083.         <div class="container">
  1084.             <div class="row">
  1085.                 <div class="col">
  1086.                 </div>
  1087.             </div>
  1088.         </div>
  1090.     </div>
  1091.     <!-- Intro -->
  1092.     
  1093.     <div class="intro">
  1094.         <div class="container">
  1095.             <div class="row">
  1096.                 <div class="col text-center">
  1097.                     <h2 class="section_title" style="font-size: 33px;color: #0093a9">Croisière</h2>
  1098.                 </div>
  1099.             </div>
  1100.             <div class="intro">
  1101.                 <div class="container mt-4">
  1102.                     <div class="row intro_items" style="margin-top: -100px; margin-left:20px;">
  1103.                         {% for c in croisiere|slice(0, 3) %}
  1104.                             <div class="col-lg-4 intro_col">
  1105.                                 <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);">
  1106.                                     <div class="intro_item_overlay" style="background: #301c405c"></div>
  1107.                                     <div class="intro_item_background">
  1108.                                         {% for img in c.imagescroisieres %}
  1109.                                             {% if loop.first %}
  1110.                                                 <img src="{{ asset('./rusticav/public/uploads/croisieres/'~img.name) }}" alt="" width="100%" height="100%" />
  1111.                                             {% endif %}
  1112.                                         {% endfor %}
  1113.                                     </div>
  1114.                                     <div class="intro_item_content d-flex flex-column align-items-center justify-content-center" style="margin-top: 60px;">
  1115.                                         <div class="button intro_button" style="margin-bottom: -5px;">
  1116.                                             <div class="button_bcg" style="background: #0093a9;"></div>
  1117.                                             <a href="{{ path('details', {'croisiereId': c.id}) }}" style="font-size: 14px">
  1118.                                                 Voir plus<span></span><span></span><span></span>
  1119.                                             </a>
  1120.                                         </div>
  1121.                                         <div class="intro_center text-center">
  1122.                                             <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>
  1123.                                         </div>
  1124.                                     </div>
  1125.                                 </div>
  1126.                             </div>
  1127.                         {% endfor %}
  1128.                     </div>
  1129.                 </div>
  1130.                 <div class="text-right mt-4" style="margin-right: 79px; margin-bottom:-53px">
  1131.                     <a href="{{path('app_croisiere')}}" style="color: #0093a9;margin-top: 128px;">
  1132.                         Découvrir Nos Croisières <i class="fa fa-angle-double-right"></i>
  1133.                     </a>
  1134.                 </div>
  1135.             </div>
  1136.         </div>
  1137.     </div>
  1138.         <!-- CTA -->
  1140.         <div class="cta">
  1141.             <!-- Image by https://unsplash.com/@thanni -->
  1142.             <div class="cta_background" style="background-image:url(./front/images/Slider_1.png);opacity: unset; background-size: cover;background-position: center;width: 100%;"></div>
  1144.             <div class="container">
  1145.                 <div class="row">
  1146.                     <div class="col">
  1147.                     </div>
  1148.                 </div>
  1149.             </div>
  1151.         </div>
  1152.         <!-- Intro -->
  1153.         <div class="intro">
  1154.             <div class="container">
  1155.                 <div class="row">
  1156.                     <div class="col text-center">
  1157.                         <h2 class="section_title" style="font-size: 33px;color: #0093a9">Voyages Organisés</h2>
  1158.                     </div>
  1159.                 </div>
  1160.                 <div class="intro">
  1161.                     <div class="container mt-4">
  1162.                         <div class="row intro_items" style="margin-top: -62px; margin-left:20px;">
  1163.                             {% for s in sejour|slice(0, 3) %}
  1164.                                 <div class="col-lg-4 intro_col">
  1165.                                     <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);">
  1166.                                         <div class="intro_item_overlay" style="background: #301c405c"></div>
  1167.                                         <div class="intro_item_background">
  1168.                                             {% for img in s.imageSejours %}
  1169.                                                 {% if loop.first %}
  1170.                                                     <img src="{{ asset('./rusticav/public/uploads/sejours/'~img.name) }}" alt="" width="100%" height="100%" />
  1171.                                                 {% endif %}
  1172.                                             {% endfor %}
  1173.                                         </div>
  1174.                                         <div class="intro_item_content d-flex flex-column align-items-center justify-content-center" style="margin-top: 60px;">
  1175.                                             <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>
  1176.                                             <div class="button intro_button" style="margin-bottom: -5px;">
  1177.                                                 <div class="button_bcg" style="background: #0093a9;"></div>
  1178.                                                 <a href="{{ path('detailsejour', {'id': s.id}) }}" style="font-size: 14px">
  1179.                                                     Voir plus<span></span><span></span><span></span>
  1180.                                                 </a>
  1181.                                             </div>
  1182.                                             <div class="intro_center text-center">
  1183.                                                 <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>
  1184.                                                 <div class="intro_price" style="font-weight: 600;font-size: 20px">À partir de <strong>{{s.prix + s.marge}} TND</strong> </div>
  1185.                                             </div>
  1186.                                         </div>
  1187.                                     </div>
  1188.                                 </div>
  1189.                             {% endfor %}
  1190.                         </div>
  1191.                     </div>
  1192.                     <div class="text-right mt-4" style="margin-right: 79px; margin-bottom:-53px">
  1193.                         <a href="{{path('app_sejour')}}" style="color: #0093a9;margin-top: 128px;">
  1194.                             Découvrir Nos Voyages Organisés <i class="fa fa-angle-double-right"></i>
  1195.                         </a>
  1196.                     </div>
  1197.                 </div>
  1198.             </div>
  1199.         </div>
  1200.             
  1203. </div>
  1204. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  1205. <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  1206. <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  1207. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  1208. <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.4/nouislider.min.js"></script>
  1209. <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
  1210. <!-- Jquery JS-->
  1211. <!-- Vendor JS-->
  1212. <script src="{{ asset('searchbar/vendor/bootstrap-wizard/bootstrap.min.js') }}"></script>
  1213. <script src="{{ asset('searchbar/vendor/bootstrap-wizard/jquery.bootstrap.wizard.min.js') }}"></script>
  1214. <!-- Main JS-->
  1215. <script src="{{ asset('searchbar/js/global.js') }}"></script>
  1216. <script>
  1217.     $(document).ready(function() {
  1218.         // Initialize date range picker
  1219.         const checkIn = "{{ checkIn|default('') }}";
  1220.         const checkOut = "{{ checkOut|default('') }}";
  1222.         $('#daterange').daterangepicker({
  1223.             startDate: checkIn,
  1224.             endDate: checkOut,
  1225.             opens: 'right',
  1226.             locale: {
  1227.                 format: 'YYYY-MM-DD',
  1228.                 applyLabel: 'Valider',
  1229.                 cancelLabel: 'Annuler',
  1230.                 customRangeLabel: 'Custom',
  1231.                 daysOfWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  1232.                 monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  1233.                 firstDay: 1
  1234.             }
  1235.         }, function(start, end) {
  1236.             // Callback pour le calcul des nuitées
  1237.             const nights = end.diff(start, 'days');
  1238.             document.getElementById('nightsCount').value = nights + ' ' + (nights > 1 ? 's' : '');
  1239.         });
  1241.         // Calcul initial des nuitées si checkIn et checkOut sont déjà définis
  1242.         if (checkIn && checkOut) {
  1243.             const startDate = moment(checkIn);
  1244.             const endDate = moment(checkOut);
  1245.             const nights = endDate.diff(startDate, 'days');
  1246.             document.getElementById('nightsCount').value = nights + ' ' + (nights > 1 ? 's' : '');
  1247.         }
  1249.         // Update text of the Add Room button
  1250.         function updateRoomButtonText() {
  1251.             const totalRooms = $('.room').length;
  1252.             const totalAdults = $('.adultCount').toArray().reduce((sum, input) => sum + parseInt($(input).val(), 10), 0);
  1253.             const totalChildren = $('.childrenAges').toArray().length;
  1254.             $('#addRoomButton').text(`${totalRooms} chambres, ${totalAdults} adultes, ${totalChildren} enfants`);
  1255.         }
  1257.         // Add more rooms
  1258.         $('#addMoreRoomButton').on('click', function() {
  1259.             const roomHtml = `
  1260.             <div class="room mb-3">
  1261.                 <div class="form-row align-items-center">
  1262.                     <div class="col-md-3">
  1263.                         <label style="color: black">Adulte(s):</label>
  1264.                         <input type="number" class="form-control adultCount" name="adultCount[]" min="1" required value="2">
  1265.                     </div>
  1266.                     <div class="col-md-3">
  1267.                         <label style="color: black">Enfant(s):</label>
  1268.                         <input type="number" class="form-control childCount" name="childCount[]" min="0" value="0">
  1269.                     </div>
  1270.                     <div class="col-md-5">
  1271.                         <div class="childrenAgesContainer"></div>
  1272.                     </div>
  1273.                     <div class="col-md-1 text-right">
  1274.                         <button type="button" class="btn btn-danger btn-sm remove-room">
  1275.                             <i class="fa fa-trash"></i>
  1276.                         </button>
  1277.                     </div>
  1278.                 </div>
  1279.             </div>
  1280.         `;
  1281.             $('#roomsContainer').append(roomHtml);
  1282.             updateRoomButtonText(); // Update the button text after adding a room
  1283.         });
  1285.         // Handle change in number of children
  1286.         $('#roomsContainer').on('change', '.childCount', function() {
  1287.             const parentRoom = $(this).closest('.room');
  1288.             const childrenCount = parseInt($(this).val(), 10);
  1289.             const childrenAgesContainer = parentRoom.find('.childrenAgesContainer');
  1290.             childrenAgesContainer.empty();
  1292.             for (let i = 0; i < childrenCount; i++) {
  1293.                     childrenAgesContainer.append(`
  1294.                         <div class="col-md-3">
  1295.                             <label for="childAge${i}" style="color: black;width: 104%">Âge ${i + 1}</label>
  1296.                             <select id="childAge${i}" class="form-control childrenAges" name="childrenAges[]" style="width: 60px;">
  1297.                                 <option value="" disabled selected>Sélectionner l'âge</option>
  1298.                                 ${Array.from({ length: 18 }, (_, age) => `<option value="${age}">${age}</option>`).join('')}
  1299.                             </select>
  1300.                         </div>
  1301.                     `);
  1302.                 }
  1303.         });
  1305.         // Save rooms and update button text
  1306.         $('#saveRoomButton').on('click', function() {
  1307.             const rooms = [];
  1308.             $('.room').each(function() {
  1309.                 const adultCount = $(this).find('.adultCount').val();
  1310.                 const childrenCounts = $(this).find('.childCount').val();
  1311.                 const childrenAges = $(this).find('.childrenAgesContainer .childrenAges').map(function() {
  1312.                     return $(this).val();
  1313.                 }).get();
  1315.                 rooms.push({
  1316.                     Adult: adultCount,
  1317.                     Child: childrenAges
  1318.                 });
  1319.             });
  1321.             updateRoomButtonText(); // Update the button text when saving rooms
  1322.         });
  1324.         // Remove a room
  1325.         $('#roomsContainer').on('click', '.remove-room', function() {
  1326.             $(this).closest('.room').remove();
  1327.             updateRoomButtonText(); // Update the button text after removing a room
  1328.         });
  1330.         // Initialize the button text
  1331.         updateRoomButtonText(); // Ensure button text is correct on initial load
  1333.         // Handle form submission
  1334.         $('#searchForm').on('submit', function(event) {
  1335.             event.preventDefault();
  1336.             const checkIn = $('#daterange').data('daterangepicker').startDate.format('YYYY-MM-DD');
  1337.             const checkOut = $('#daterange').data('daterangepicker').endDate.format('YYYY-MM-DD');
  1338.             const city = $('#city').val();
  1339.             const rooms = [];
  1341.             $('.room').each(function() {
  1342.                 const childrenAges = $(this).find('.childrenAges').map(function() {
  1343.                     return $(this).val();
  1344.                 }).get();
  1346.                 rooms.push({
  1347.                     Adult: $(this).find('.adultCount').val(),
  1348.                     Child: childrenAges
  1349.                 });
  1350.             });
  1352.             if (checkIn && checkOut && rooms.length > 0) {
  1353.                 // Supposons que l'URL actuelle soit de la forme '/detail-search/{id}'
  1354.                 const citySelect = document.getElementById('city');
  1355.                 const city = citySelect.value;
  1356.                 const url = new URL('{{ path('hotel_results', {'city': 'CITY_ID'}) }}'.replace('CITY_ID', city), window.location.origin);
  1358.                 url.searchParams.append('checkIn', checkIn);
  1359.                 url.searchParams.append('checkOut', checkOut);
  1360.                 rooms.forEach((room, index) => {
  1361.                     url.searchParams.append(`rooms[${index}][Adult]`, room.Adult);
  1362.                     room.Child.forEach((child, childIndex) => {
  1363.                         url.searchParams.append(`rooms[${index}][Child][${childIndex}]`, child);
  1364.                     });
  1365.                 });
  1366.                 window.location.href = url.toString();
  1367.             }
  1368.         });
  1369.     });
  1370.     // Function to generate star rating HTML
  1371.     function generateStarRating(stars) {
  1372.         let starRating = '';
  1373.         for (let i = 0; i < stars; i++) {
  1374.             starRating += '★';
  1375.         }
  1376.         return starRating;
  1377.     }
  1378.     const test = $('#test').text();
  1380.     // Fonction pour afficher les données de tous les hôtels
  1381.     function displayAllHotels(test) {
  1382.         const hotelList = $('#test');
  1383.         let hotelData = [];
  1385.         try {
  1386.             const data = JSON.parse(test);
  1387.             hotelData = data.HotelSearch;
  1388.         } catch (e) {
  1389.             console.error('Error parsing JSON:', e);
  1390.             return;
  1391.         }
  1393.         // Effacer le contenu précédent
  1394.         hotelList.empty();
  1396.         // Afficher le formulaire de recherche
  1397.         hotelList.append(``);
  1398.         hotelData.forEach(hotel => {
  1399.             const hotelDiv = $('<div class="card1"><div class="hotel">');
  1400.             hotelDiv.data('hotel-id', hotel.Id); // Stocke l'ID de l'hôtel
  1401.             const prices = hotel.Price.Boarding;
  1403.             hotelDiv.html(`
  1405.                     <a href="/detail-search/${hotel.Hotel.City.Id}/${hotel.Hotel.Id}">
  1406.                         ${hotel.Hotel.Image ? `<img class="card1__img" src="${hotel.Hotel.Image}" alt="Image of ${hotel.Hotel.Name}" ` : ''}
  1407.                     </a>
  1408.                     <div class="card1__body">
  1409.                         <a href="/detail-search/${hotel.Hotel.City.Id}/${hotel.Hotel.Id}">
  1410.                             <h2 class="card1__title">
  1411.                                 ${hotel.Hotel.Name}<span style="color: gold">       ${generateStarRating(hotel.Hotel.Category.Star)}</span
  1412.                             </h2>
  1413.                         </a>
  1414.                         <p class="card1__text">
  1415.                             <i class="fa fa-map-marker"></i> ${hotel.Hotel.City.Name}
  1416.                         </p>
  1417.                         <div class="card1__footer">
  1418.                         ${prices.length > 0 ? `
  1419.                             <h5 class="test" style="font-weight: 500">en ${prices[0].Code}</h5>
  1420.                             ${prices[0].Pax.map(pax => `
  1421.                                     ${pax.Rooms.length > 0 ? `
  1422.                                         <p class="price">${(((pax.Rooms[0].Price * 1.1) * 1.1) * 0.5).toFixed(3)} TND</p>
  1424.                                     ` : ''}
  1425.                                 `).join('')}
  1426.                         ` : ''}
  1427.                         </div>
  1428.             `);
  1429.             // Ajouter le div de l'hôtel à la liste des hôtels
  1430.             hotelList.append(hotelDiv);
  1431.             // Ajouter un gestionnaire d'événements pour les boutons de réservation
  1432.         });
  1433.     }
  1435.     // Appeler la fonction pour afficher les données des hôtels
  1436.     displayAllHotels(test);
  1438. </script>
  1439. {% endblock %}
  1441. {# </body>
  1442. </html> #}
  1449. {# templates/hotel/index.html.twig #}
  1450. {#<!DOCTYPE html>#}
  1451. {#<html lang="en">#}
  1452. {#<head>#}
  1453. {#    <meta charset="UTF-8">#}
  1454. {#    <title>Hotel List</title>#}
  1455. {#    <style>#}
  1456. {#        .hotel {#}
  1457. {#            border: 1px solid #ddd;#}
  1458. {#            padding: 15px;#}
  1459. {#            margin: 15px 0;#}
  1460. {#        }#}
  1461. {#        .facilities {#}
  1462. {#            margin-left: 20px;#}
  1463. {#        }#}
  1464. {#    </style>#}
  1465. {#</head>#}
  1466. {#<body>#}
  1467. {#<h1>Hotel List</h1>#}
  1468. {#<div id="content">#}
  1469. {#    <div style="display: none">#}
  1470. {#        {{ content|raw }}#}
  1471. {#    </div>#}
  1472. {#</div>#}
  1473. {#<script>#}
  1474. {#    // Récupère le contenu brut passé par le contrôleur#}
  1475. {#    const content = document.getElementById('content').textContent;#}
  1477. {#    // Fonction pour afficher les données de tous les hôtels#}
  1478. {#    function displayAllHotels(content) {#}
  1479. {#        const hotelList = document.getElementById('content');#}
  1480. {#        try {#}
  1481. {#            const data = JSON.parse(content);#}
  1482. {#            const hotelData = data.ListHotel;#}
  1483. {#            hotelData.forEach(hotel => {#}
  1484. {#                const hotelDiv = document.createElement('div');#}
  1485. {#                hotelDiv.classList.add('hotel');#}
  1487. {#                hotelDiv.innerHTML = `#}
  1488. {#                        <h2>${hotel.Name}</h2>#}
  1489. {#                        <p>Category: ${hotel.Category.Title}</p>#}
  1490. {#                        <p>City: ${hotel.City.Name}, ${hotel.City.Country.Name}</p>#}
  1491. {#                        ${hotel.Image ? `<img src="${hotel.Image}" alt="Image of ${hotel.Name}" style="width:200px;">` : ''}#}
  1493. {#                        <a href="/detail-search/${hotel.Id}">Voir les détails</a>#}
  1494. {#                    `;#}
  1496. {#                hotelList.appendChild(hotelDiv);#}
  1497. {#            });#}
  1498. {#        } catch (e) {#}
  1499. {#            console.error('Error displaying hotels:', e);#}
  1500. {#            // Si le contenu ne peut pas être analysé comme JSON, affiche-le tel quel#}
  1501. {#            hotelList.innerHTML = content;#}
  1502. {#        }#}
  1503. {#    }#}
  1505. {#    // Fonction pour afficher les facilités#}
  1506. {#    function displayFacilities(facilities) {#}
  1507. {#        if (!facilities) return '';#}
  1509. {#        // Regrouper les facilités par catégorie#}
  1510. {#        const categories = {};#}
  1511. {#        facilities.forEach(facility => {#}
  1512. {#            const category = facility.Category;#}
  1513. {#            if (!categories[category]) {#}
  1514. {#                categories[category] = [];#}
  1515. {#            }#}
  1516. {#            categories[category].push(facility.Title);#}
  1517. {#        });#}
  1519. {#        // Construire le HTML pour les facilités par catégorie#}
  1520. {#        let html = '<h3>Facilities</h3>';#}
  1521. {#        html += '<ul class="facilities">';#}
  1522. {#        Object.keys(categories).forEach(category => {#}
  1523. {#            html += `<li><strong>${category}</strong>: ${categories[category].join(', ')}</li>`;#}
  1524. {#        });#}
  1525. {#        html += '</ul>';#}
  1527. {#        return html;#}
  1528. {#    }#}
  1530. {#    // Affiche les données de tous les hôtels si le contenu est en JSON#}
  1531. {#    try {#}
  1532. {#        displayAllHotels(content);#}
  1533. {#    } catch (e) {#}
  1534. {#        console.error('Error displaying hotels:', e);#}
  1535. {#    }#}
  1536. {#</script>#}
  1537. {#</body>#}
  1538. {#</html>#}
  1540. {#<!DOCTYPE html>#}
  1541. {#<html lang="en">#}
  1542. {#<head>#}
  1543. {#    <meta charset="UTF-8">#}
  1544. {#    <title>Hotel List</title>#}
  1545. {#    <style>#}
  1546. {#        .hotel {#}
  1547. {#            border: 1px solid #ddd;#}
  1548. {#            padding: 15px;#}
  1549. {#            margin: 15px 0;#}
  1550. {#            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);#}
  1551. {#        }#}
  1552. {#        .facilities {#}
  1553. {#            margin-left: 20px;#}
  1554. {#            list-style-type: none;#}
  1555. {#            padding: 0;#}
  1556. {#        }#}
  1557. {#        .facilities li {#}
  1558. {#            margin-bottom: 5px;#}
  1559. {#        }#}
  1560. {#    </style>#}
  1561. {#</head>#}
  1562. {#<body>#}
  1563. {#<h1>Hotel List</h1>#}
  1564. {#<div id="content">#}
  1565. {#    <div style="display: none">#}
  1566. {#        {{ content|raw }}#}
  1567. {#    </div>#}
  1568. {#</div>#}
  1569. {#<script>#}
  1570. {#    document.addEventListener("DOMContentLoaded", () => {#}
  1571. {#        const content = document.getElementById('content').textContent;#}
  1573. {#        // Afficher le contenu brut pour le débogage#}
  1574. {#        console.log("Contenu reçu:", content);#}
  1576. {#        try {#}
  1577. {#            const data = JSON.parse(content);#}
  1578. {#            if (data && data.ListHotel) {#}
  1579. {#                displayAllHotels(data.ListHotel);#}
  1580. {#            } else {#}
  1581. {#                document.getElementById('content').innerHTML = 'Aucun hôtel trouvé pour l\'ID de ville spécifié.';#}
  1582. {#            }#}
  1583. {#        } catch (e) {#}
  1584. {#            console.error('Error parsing JSON:', e);#}
  1585. {#            document.getElementById('content').innerHTML = 'Erreur de chargement des données des hôtels.';#}
  1586. {#        }#}
  1587. {#    });#}
  1589. {#    function displayAllHotels(hotelData) {#}
  1590. {#        const hotelList = document.getElementById('content');#}
  1592. {#        // Grouper les hôtels par ville#}
  1593. {#        const hotelsByCity = hotelData.reduce((acc, hotel) => {#}
  1594. {#            const cityName = hotel.City.Name;#}
  1595. {#            if (!acc[cityName]) {#}
  1596. {#                acc[cityName] = [];#}
  1597. {#            }#}
  1598. {#            if (hotel.Image) { // Inclure uniquement les hôtels avec une image#}
  1599. {#                acc[cityName].push(hotel);#}
  1600. {#            }#}
  1601. {#            return acc;#}
  1602. {#        }, {});#}
  1604. {#        // Parcourir les groupes d'hôtels par ville#}
  1605. {#        Object.entries(hotelsByCity).forEach(([cityName, hotels]) => {#}
  1606. {#            if (hotels.length === 0) return; // Si aucun hôtel pour la ville, passer à la ville suivante#}
  1608. {#            // Ajouter un titre de ville#}
  1609. {#            const cityHeader = document.createElement('h3');#}
  1610. {#            cityHeader.textContent = cityName;#}
  1611. {#            hotelList.appendChild(cityHeader);#}
  1613. {#            // Limiter à 2 hôtels pour chaque ville#}
  1614. {#            const limitedHotels = hotels.slice(0, 2);#}
  1616. {#            // Ajouter les hôtels pour cette ville#}
  1617. {#            limitedHotels.forEach(hotel => {#}
  1618. {#                const hotelDiv = document.createElement('div');#}
  1619. {#                // Fonction pour générer les étoiles en fonction du nombre d'étoiles#}
  1620. {#                function generateStarRating(starCount) {#}
  1621. {#                    let starsHtml = '';#}
  1622. {#                    for (let i = 0; i < starCount; i++) {#}
  1623. {#                        starsHtml += '<img src="{{ asset('front/images/etoil.png') }}" alt="Star">';#}
  1624. {#                    }#}
  1625. {#                    return starsHtml;#}
  1626. {#                }#}
  1627. {#                hotelDiv.classList.add('hotel');#}
  1628. {#                hotelDiv.innerHTML = `#}
  1629. {#                <img src="${hotel.Image}" alt="Image of ${hotel.Name}" style="width:200px;">#}
  1630. {#                <h2>${hotel.Name} ${generateStarRating(hotel.Category.Star)}</h2>#}
  1631. {#                <p>City: ${hotel.City.Name}, ${hotel.City.Country.Name}</p>#}
  1633. {#                <a href="/detail-search/${hotel.Id}">Voir les détails</a>#}
  1634. {#            `;#}
  1635. {#                hotelList.appendChild(hotelDiv);#}
  1636. {#            });#}
  1637. {#        });#}
  1638. {#    }#}
  1643. {#</script>#}
  1644. {#</body>#}
  1645. {#</html>#}
  1651. {#<!DOCTYPE html>#}
  1652. {#<html lang="en">#}
  1653. {#<head>#}
  1654. {#    <meta charset="UTF-8">#}
  1655. {#    <title>Hotel List</title>#}
  1656. {#    <style>#}
  1657. {#        .hotel {#}
  1658. {#            border: 1px solid #ddd;#}
  1659. {#            padding: 15px;#}
  1660. {#            margin: 15px 0;#}
  1661. {#        }#}
  1662. {#        .album img {#}
  1663. {#            width: 200px;#}
  1664. {#            margin: 5px;#}
  1665. {#        }#}
  1666. {#    </style>#}
  1667. {#</head>#}
  1668. {#<body>#}
  1669. {#<h1>Hotel List</h1>#}
  1670. {#<div id="content">#}
  1671. {#    <div style="display: none">#}
  1672. {#        {{ content|raw }}#}
  1673. {#    </div>#}
  1674. {#</div>#}
  1675. {#<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>#}
  1676. {#<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>#}
  1677. {#<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>#}
  1678. {#<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>#}
  1679. {#<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.4/nouislider.min.js"></script>#}
  1680. {#<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>#}
  1681. {#<script>#}
  1682. {#    // Récupère le contenu brut passé par le contrôleur#}
  1683. {#    const content = document.getElementById('content').textContent;#}
  1685. {#    // Définir des prix manuellement pour chaque hôtel#}
  1686. {#    const hotelPrices = {#}
  1687. {#        '6': '100',  // Prix pour l'hôtel avec l'ID 1#}
  1688. {#        '7': '150',  // Prix pour l'hôtel avec l'ID 2#}
  1689. {#        // Ajoutez des prix pour tous les hôtels nécessaires#}
  1690. {#    };#}
  1692. {#    // Fonction pour afficher les données de tous les hôtels#}
  1693. {#    function displayAllHotels(content) {#}
  1694. {#        const hotelList = document.getElementById('content');#}
  1695. {#        try {#}
  1696. {#            const data = JSON.parse(content);#}
  1697. {#            const hotelData = data.ListHotel;#}
  1698. {#            hotelData.forEach(hotel => {#}
  1699. {#                const hotelDiv = document.createElement('div');#}
  1700. {#                hotelDiv.classList.add('hotel');#}
  1702. {#                // Obtenez le prix correspondant à cet hôtel#}
  1703. {#                const price = hotelPrices[hotel.Id] || 'N/A'; // 'N/A' si le prix n'est pas défini#}
  1705. {#                hotelDiv.innerHTML = `#}
  1706. {#                    <h2>${hotel.Name}</h2>#}
  1707. {#                    <p>Category: ${hotel.Category.Title}</p>#}
  1708. {#                    <p>City: ${hotel.City.Name}, ${hotel.City.Country.Name}</p>#}
  1709. {#                    ${hotel.Adress ? `<p>Address: ${hotel.Adress}</p>` : ''}#}
  1710. {#                    ${hotel.Localization ? `<p>Location: Latitude ${hotel.Localization.Latitude}, Longitude ${hotel.Localization.Longitude}</p>` : ''}#}
  1711. {#                    ${hotel.Image ? `<img src="${hotel.Image}" alt="Image of ${hotel.Name}" style="width:200px;">` : ''}#}
  1712. {#                    ${hotel.Facilities ? `#}
  1713. {#                    <h3>Facilities</h3>#}
  1714. {#                    <ul>#}
  1715. {#                        ${hotel.Facilities.map(facility => `<li>${facility.Title} (${facility.Category})</li>`).join('')}#}
  1716. {#                    </ul>` : ''}#}
  1717. {#                    ${hotel.Theme ? `#}
  1718. {#                    <h3>Themes</h3>#}
  1719. {#                    <ul>#}
  1720. {#                        ${hotel.Theme.map(theme => `<li>${theme}</li>`).join('')}#}
  1721. {#                    </ul>` : ''}#}
  1722. {#                    ${hotel.Note ? `<p>Note: ${hotel.Note}</p>` : ''}#}
  1723. {#                    ${hotel.Album ? `#}
  1724. {#                    <h3>Album</h3>#}
  1725. {#                    <div class="album">#}
  1726. {#                        ${hotel.Album.map(photo => `<img src="${photo.Url}" alt="Photo of ${hotel.Name}">`).join('')}#}
  1727. {#                    </div>` : ''}#}
  1729. {#                    <p>Price: ${price} €</p>#}
  1731. {#                    <a href="/hotel-detail/${hotel.Id}">Voir les détails</a>#}
  1732. {#                `;#}
  1734. {#                hotelList.append(hotelDiv);#}
  1735. {#            });#}
  1736. {#        } catch (e) {#}
  1737. {#            console.error('Error displaying hotels:', e);#}
  1738. {#            // Si le contenu ne peut pas être analysé comme JSON, affiche-le tel quel#}
  1739. {#            hotelList.innerHTML = content;#}
  1740. {#        }#}
  1741. {#    }#}
  1743. {#    // Affiche les données de tous les hôtels si le contenu est en JSON#}
  1744. {#    try {#}
  1745. {#        displayAllHotels(content);#}
  1746. {#    } catch (e) {#}
  1747. {#        console.error('Error displaying hotels:', e);#}
  1748. {#    }#}
  1749. {#</script>#}
  1751. {#</body>#}
  1752. {#</html>#}