templates/croisiere/list.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     <link href="{{ asset('front/plugins/colorbox/colorbox.css') }}" rel="stylesheet" type="text/css">
  5.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_style.css') }}">
  6.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_responsive.css') }}">
  7.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_style.css') }}">
  8.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_responsive.css') }}">
  9.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/about_style.css') }}">
  10.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/about_responsive.css') }}">
  11.     <link rel="stylesheet" href="{{ asset('slider/css/owl.carousel.min.css') }}">
  12.     <link rel="stylesheet" href="{{ asset('slider/css/owl.theme.default.min.css') }}">
  13.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css">
  14.     <link rel="stylesheet" href="{{ asset('slider/css/style.css') }}">
  16.     <style>
  17.         .container {
  18.             max-width: 1440px!important;
  19.         }
  20.         .hotel_info_text
  21.         {
  22.             width: 1400px;
  23.         }
  24.         .carousel {
  25.             position: relative;
  26.         }
  27.         .carousel-item img {
  28.             object-fit: cover;
  29.         }
  30.         #carousel-thumbs {
  31.             background: rgba(255,255,255,.3);
  32.             bottom: 0;
  33.             left: 0;
  34.             padding: 0 50px;
  35.             right: 0;
  36.         }
  37.         #carousel-thumbs img {
  38.             border: 5px solid transparent;
  39.             cursor: pointer;
  40.         }
  41.         #carousel-thumbs img:hover {
  42.             border-color: rgba(255,255,255,.3);
  43.         }
  44.         #carousel-thumbs .selected img {
  45.             border-color: #fff;
  46.         }
  47.         .carousel-control-prev,
  48.         .carousel-control-next {
  49.             width: 50px;
  50.         }
  51.         @media all and (max-width: 767px) {
  52.             .carousel-container #carousel-thumbs img {
  53.                 border-width: 3px;
  54.             }
  55.         }
  56.         @media all and (min-width: 576px) {
  57.             .carousel-container #carousel-thumbs {
  58.                 position: absolute;
  59.             }
  60.         }
  61.         @media all and (max-width: 576px) {
  62.             .carousel-container #carousel-thumbs {
  63.                 background: #ccccce;
  64.             }
  65.         }
  66.         .offers_item{
  67.             position: relative;
  68.             width: 205%;
  69.             overflow: hidden;
  70.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  71.             transition: all 300ms;
  72.             margin-bottom: 30px;
  73.             border-radius: 20px;
  74.             color: rgba(0, 0, 0, 0.87);
  75.             background: #fff;
  76.         }
  77.         
  78.         .latest_posts_container {
  79.             margin: 35px;
  80.         }
  81.         .hotel_location {
  82.             font-size: 24px;
  83.             color: #929191;
  84.             margin-top: 9px;
  85.             font-weight: 700;
  86.         }
  87.         .main_nav_item a {
  88.             font-family: 'Open Sans', sans-serif;
  89.             font-size: 15px;
  90.             font-weight: 700;
  91.             color: #0093a9!important;
  92.             text-transform: uppercase;
  93.             padding-bottom: 10px;
  94.             padding-top: 10px;
  95.         }
  96.         /*price style*/
  99.         .pricing-content{}
  100.         .single-pricing{
  101.             background:transparent;
  102.             margin-top: 25px;
  103.             width: 255%;
  104.             padding:40px 20px;
  105.             border-radius:5px;
  106.             position:relative;
  107.             z-index:2;
  108.             /*border:1px solid #d8d5d5;*/
  109.             /*box-shadow: 0 10px 40px -10px rgba(0,64,128,.09);*/
  110.             transition:0.3s;
  111.         }
  112.         @media only screen and (max-width:480px) {
  113.             .single-pricing {margin-bottom:30px;}
  114.         }
  115.         /*.single-pricing:hover{*/
  116.         /*    box-shadow:0px 60px 60px rgba(0,0,0,0.1);*/
  117.         /*    z-index:100;*/
  118.         /*    transform: translate(0, -10px);*/
  119.         /*}*/
  120.         .price-label {
  121.             color: #fff;
  122.             background: #ff9100;
  123.             font-size: 16px;
  124.             width: 100px;
  125.             margin-bottom: 15px;
  126.             display: block;
  127.             -webkit-clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
  128.             clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
  129.             margin-left: -20px;
  130.             position: absolute;
  131.         }
  132.         .price-head h2 {
  133.             font-weight: 600;
  134.             margin-bottom: 0px;
  135.             text-transform: capitalize;
  136.             font-size: 35px;
  137.         }
  138.         .price-head span {
  139.             display: inline-block;
  140.             background:#ff9100;
  141.             width: 6px;
  142.             height: 6px;
  143.             border-radius: 30px;
  144.             margin-bottom: 20px;
  145.             margin-top: 15px;
  146.         }
  147.         .price {
  148.             font-weight: 500;
  149.             font-size: 50px;
  150.             margin-bottom: 0px;
  151.         }
  152.         .single-pricing{}
  153.         .single-pricing h5 {
  154.             font-size: 14px;
  155.             margin-bottom: 0px;
  156.             text-transform: uppercase;
  157.         }
  158.         .single-pricing ul{
  159.             list-style: none;
  160.             margin-bottom: 20px;
  161.             margin-top: 30px;
  162.         }
  164.         .single-pricing ul li{line-height: 35px;}
  165.         .single-pricing button {
  166.             background:#ff9100;
  167.             border: 2px solid #ff9100;
  168.             border-radius: 0.25rem;
  169.             color: white;
  170.             display: inline-block;
  171.             font-size: 16px;
  172.             width: -webkit-fill-available;
  173.             overflow: hidden;
  174.             padding:10px 45px;
  175.             text-transform: capitalize;
  176.             transition: all 0.3s ease 0s;
  177.         }
  178.         .single-pricing button:hover, .single-pricing a:focus{
  179.             background:#ff9100;
  180.             color: #ffffff;
  181.             border: 2px solid #ff9100;
  182.         }
  183.         .single-pricing-white{background: #5b0909
  184.         }
  185.         .single-pricing-white ul li{color:#fff;}
  186.         .single-pricing-white h2{color:#fff;}
  187.         .single-pricing-white h1{color:#fff;}
  188.         .single-pricing-white h5{color:#fff;}
  190.         /*breadcrumb style*/
  191.         .hm-gradient {
  192.             background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
  193.         }
  194.         .darken-grey-text {
  195.             color: #2E2E2E;
  196.         }
  197.         .bc-icons .breadcrumb-item + .breadcrumb-item::before {
  198.             content: none; }
  199.         .bc-icons .breadcrumb-item.active {
  200.             color: #eeeeee; }
  202.         .bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
  203.             content: none; }
  204.         .bc-icons-2 .breadcrumb-item.active {
  205.             color: #455a64; }
  206.         .light-font .breadcrumb-item + .breadcrumb-item::before {
  207.             color: #fff; }
  208.         .light-font .breadcrumb-item.active {
  209.             color: #cfd8dc; }
  211.         .dark-font .breadcrumb-item + .breadcrumb-item::before {
  212.             color: #000; }
  213.         .dark-font .breadcrumb-item.active {
  214.             color: #455a64; }
  215.         .breadcrumb{
  216.             background-color: transparent;
  217.         }
  218.         .work-wrap .img
  219.         {
  220.             height: auto;
  221.             width: auto;
  222.         }
  223.         @media (min-width: 992px) {
  224.             .owl-carousel .owl-dots {
  225.                 position: absolute;
  226.                 top: 0;
  227.                 right: 50px!important;
  228.                 margin-top: 0;
  229.                 margin-right: -40px; }
  230.             .owl-carousel .owl-dots .owl-dot {
  231.                 display: block; }
  232.         }
  234.         .table-bordered {
  235.     border: 1px solid #232022;
  236.     background: #f3f6f9;
  237.     border-radius: 18px;
  238. }
  240.         @media screen and (max-width: 768px) 
  241.         {
  242.             .hotel_info_text {
  243.                 width: 106% !important;
  244.                 margin-left:-10px!important;
  245.             }
  246.             table{
  247.                 max-width: 340px !important;
  248.                 margin-left: 11px !important;
  249.             }
  251.             .tablenavire
  252.             {
  253.                 max-width: 350px !important;
  254.                 margin-left: 2px !important;
  255.                 margin-top: 12px !important;
  256.             }
  258.             .testimage
  259.             {
  260.                 height: 350px!important;
  261.                 margin-left: -21px!important;
  262.                 margin-top: 10px!important;
  263.                 max-width: 350px !important;
  264.             }
  265.             .card-block
  266.             {
  267.                 width: 358px!important;
  268.                 height: 50px!important;
  269.                 margin-left: -35px!important;
  270.             }
  272.             .form-control
  273.             {
  274.                 margin-left:2px!important;
  275.             }
  276.             .offers_price1
  277.             {
  278.                 margin-top: -70px!important;
  279.                 margin-left: 68px!important;
  280.             }
  281.             .img3
  282.             {
  283.                 height: 260px !important;
  284.                 margin-top: 22px !important;
  285.                 width: 350px !important;
  286.                 margin-left: -26px !important;
  287.             }
  289.             .img1
  290.             {
  291.                 width: 350px !important;
  292.                 margin-left: 4px !important;
  293.             }
  295.             .ftco-section {
  296.                 padding: 1em 0!important;
  297.                 margin-top: -100px;
  298.             }
  300.             .owl-carousel
  301.             {
  302.                 margin-left: -25px!important;
  303.             }
  305.         }
  307.     
  309.         .owl-carousel .owl-dots
  310.         {
  311.             text-align: justify;
  312.             margin-top: 15px;
  313.         }
  314.         .ftco-section
  315.         {
  316.             padding: 5em 0;
  317.             margin-top: -35px;
  318.         }
  319.         .owl-carousel .owl-nav {
  320.             position: absolute;
  321.             bottom: 0;
  322.             left: 0;
  323.             right: 0;
  324.             display: none;
  325.         }
  326.         .badge
  327.         {
  328.             border: 1px solid white;
  329.             background: white;
  330.             color: #ff9600;
  331.             width: 100%;
  332.             height: 50px;
  333.         }
  335.         .badges{
  336.             font-size: 95%;
  337.             height: 26px;
  338.             line-height: normal;
  339.             font-weight: 600;
  340.             background-color: #b29b63;
  341.         }
  342.         /* Ajoutez ces styles dans votre fichier CSS ou entre les balises <style> dans l'en-tête HTML */
  344.         /* Pour rendre les images réactives */
  345.         .featured-carousel img {
  346.             max-width: 100%;
  347.             height: auto;
  348.         }
  350.         .offers_price span{
  351.             color: #ff9600;
  352.         }
  354.         button {
  355.             margin: 20px;
  356.         }
  357.         .custom-btn {
  358.             width: 130px;
  359.             height: 40px;
  360.             color: #fff;
  361.             border-radius: 5px;
  362.             padding: 10px 25px;
  363.             font-family: 'Lato', sans-serif;
  364.             font-weight: 500;
  365.             background: transparent;
  366.             cursor: pointer;
  367.             transition: all 0.3s ease;
  368.             position: relative;
  369.             display: inline-block;
  370.             box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
  371.             7px 7px 20px 0px rgba(0,0,0,.1),
  372.             4px 4px 5px 0px rgba(0,0,0,.1);
  373.             outline: none;
  374.         }
  375.         /* 3 */
  376.         .reserveButton
  377.         {
  378.             background: #ff9600;
  379.             width: 200px;
  380.             height: 39px;
  381.             line-height: 40px;
  382.             margin-left: 30px;
  383.             padding: 0;
  384.             border: none;
  385.             border-radius: 5px;
  386.         }
  387.         .btn-3 {
  388.             background: #ff9600;
  389.             width: 200px;
  390.             height: 50px;
  391.             line-height: 52px;
  392.             margin-left: 30px;
  393.             padding: 0;
  394.             border: none;
  395.             border-radius: 5px;
  397.         }
  398.         .btn-3 span {
  399.             position: relative;
  400.             display: block;
  401.             width: 100%;
  402.             height: 100%;
  403.         }
  404.         .btn-3:before,
  405.         .btn-3:after {
  406.             position: absolute;
  407.             content: "";
  408.             right: 0;
  409.             top: 0;
  410.             background: #ff9600;
  411.             border-radius: 5px;
  412.             transition: all 0.3s ease;
  413.         }
  414.         .btn-3:before {
  415.             height: 0%;
  416.             width: 2px;
  417.         }
  418.         .btn-3:after {
  419.             width: 0%;
  420.             height: 2px;
  421.         }
  422.         /*.btn-3:hover{*/
  423.         /*    background: transparent;*/
  424.         /*    box-shadow: none;*/
  425.         /*}*/
  426.         /*.btn-3:hover:before {*/
  427.         /*    height: 100%;*/
  428.         /*}*/
  429.         /*.btn-3:hover:after {*/
  430.         /*    width: 100%;*/
  431.         /*}*/
  432.         /*.btn-3 span:hover{*/
  433.         /*    color: #ff9600;*/
  434.         /*    border-radius: 5px;*/
  435.         /*}*/
  436.         .btn-3 span:before,
  437.         .btn-3 span:after {
  438.             position: absolute;
  439.             content: "";
  440.             left: 0;
  441.             bottom: 0;
  442.             background: #ff9600;
  443.             border-radius: 5px;
  444.             transition: all 0.3s ease;
  445.         }
  446.         .btn-3 span:before {
  447.             width: 2px;
  448.             height: 0%;
  449.         }
  450.         .btn-3 span:after {
  451.             width: 0%;
  452.             height: 2px;
  453.         }
  454.         /*.btn-3 span:hover:before {*/
  455.         /*    height: 100%;*/
  456.         /*}*/
  457.         /*.btn-3 span:hover:after {*/
  458.         /*    width: 100%;*/
  459.         /*}*/
  460.         /*a:hover{*/
  461.         /*    color: #ff9600!important;*/
  462.         /*    font-size: 16px;*/
  463.         /*    font-weight: 500;*/
  465.         /*}*/
  467.         .text-xs 
  468.         {
  469.             font-size: 10px;
  470.             line-height: 1rem;
  471.         }
  472.     </style>
  473. {% endblock %}
  474. {% block body %}
  475.     <!-- Home -->
  476.     <div class="home" style="height: 100px"></div>
  477.     <!-- Blog -->
  478.     <div class="blog">
  479.         <div class="container">
  480.             <div class="row">
  481.                 <!-- Grid column -->
  482.                 <div class="col-md-12">
  483.                     <div class="card p-3" style="border: none;">
  484.                         <div class="card-block" style="width: 500px;height: 50px;margin-left: -35px">
  485.                             <div class="bc-icons-2">
  486.                                 <ol class="breadcrumb blue-grey lighten-4">
  487.                                     <li class="breadcrumb-item"><a class="black-text" href="#" style="font-weight: 600;font-size: 16px;color:#d7000e"><i class="fa fa-home" aria-hidden="true"></i></a><i class="fa fa-angle-double-right mx-2" aria-hidden="true"></i></li>
  488.                                     <li class="breadcrumb-item"><a class="black-text" href="#" style="font-weight: 600;font-size: 16px;color:#d7000e">Croisière</a><i class="fa fa-angle-double-right mx-2" aria-hidden="true"></i></li>
  489.                                     <li class="breadcrumb-item active" style="font-weight: 600;font-size: 16px">{{ sousCroisiere.name }}</li>
  490.                                 </ol>
  491.                             </div>
  492.                         </div>
  493.                     </div>
  495.                 </div>
  496.                 <!-- Grid column -->
  497.             </div>
  498.             <div class="row">
  499.                 <div class="col-lg-8">
  500.                     <div class="blog_post_container">
  501.                         <div class="blog_post">
  502.                             <div class="hotel_info_text">
  503.                                 <div class="container mt-5">
  504.                                     <section class="ftco-section">
  505.                                         
  506.                                             <div class="container">
  507.                                                 <div class="row">
  508.                                                     <div class="col-md-4">
  509.                                                         <div class="featured-carousel owl-carousel">
  510.                                                             {% if sousCroisiere.imagessouscroisieres is not empty %}
  511.                                                                 {% for photo in sousCroisiere.imagessouscroisieres %}
  512.                                                                     <div class="item">
  513.                                                                         <div class="work-wrap">
  514.                                                                             <div class="img order-md-last">
  515.                                                                                 <img src="{{ asset('./rusticav/public/uploads/souscroisieres/' ~ photo.name) }}" alt="" width="90%" height="90%" style="margin: 15px"/>
  516.                                                                             </div>
  517.                                                                         </div>
  518.                                                                     </div>
  519.                                                                 {% endfor %}
  520.                                                             {% endif %}
  521.                                                         </div>
  522.                                                     </div>
  523.                                                     <div class="col-md-6">
  524.                                                         <h5 style="margin-top: 17px;color: #0093a9;font-weight: 600;font-size: 28px"><i class="fa fa-map-marker"></i> {{ sousCroisiere.name }}</h5>
  525.                                                         <h6 style="margin-top: 15px;color: black;font-weight: 300;"><i class="fa fa-anchor" aria-hidden="true"></i>{{ sousCroisiere.destination }}</h6>
  526.                                                         <h6 style="margin-top: 15px;color: black;font-weight: 300;">
  527.                                                             <i class="fa fa-ship" aria-hidden="true"></i>
  528.                                                             {{ sousCroisiere.navire.titre }}
  529.                                                         </h6>
  530.                                                         <h6 style="margin-top: 15px;color: black;font-weight: 600;">
  531.                                                         <i class="fa fa-clock-o" aria-hidden="true" style="color: black"></i>
  532.                                                         {{sousCroisiere.duree}} jours / {{sousCroisiere.duree-1}} Nuits
  533.                                                         </h6>
  534.                                                         <p style="margin-top: 15px;margin-left:1px;color: red;font-weight: 600" >Avantages durant la croisière</p>
  535.                                                         <h6 style="margin-top: -20px;color: black;font-weight: 300;">
  536.                                                             <ul>
  537.                                                                 {% for a in sousCroisiere.avantages %}
  538.                                                                     <li>
  539.                                                                     <span class="badges badge-danger">
  540.                                                                         {% for img in a.imagesavantages %}
  541.                                                                             <img src="{{ asset('./rusticav/public/uploads/avantages/' ~ img.name) }}" alt="" style="width:25px;height:19px;margin-top:-4px;"/>
  542.                                                                         {% endfor %}
  543.                                                                         <span>{{ a.name }}</span>
  544.                                                                     </span></li><br>
  545.                                                                 {% endfor %}
  546.                                                             </ul>
  547.                                                         </h6>
  549.                                                     </div>
  550.                                                     {# <div class="col-md-2">
  551.                                                         <div class="offers_price" style="margin-top: 60px">
  552.                                                             {% set totalprix = 0 %}
  553.                                                             {% if sousCroisiere.souscroisiererooms is defined and sousCroisiere.souscroisiererooms|length > 0 %}
  554.                                                                 {% set firstSouscroisierecabine = sousCroisiere.souscroisiererooms[0] %}
  555.                                                                 {% if firstSouscroisierecabine.souscroisierepricerooms is defined and firstSouscroisierecabine.souscroisierepricerooms|length > 0 %}
  556.                                                                     {% set firstSouscroisierepricecabine = firstSouscroisierecabine.souscroisierepricerooms[0] %}
  557.                                                                     {% if firstSouscroisierepricecabine.price is defined %}
  558.                                                                         {% set totalprix = totalprix + firstSouscroisierepricecabine.price %}
  559.                                                                     {% endif %}
  560.                                                                 {% endif %}
  561.                                                             {% endif %}
  562.                                                             <div class="offers_price1">
  563.                                                             <span class="text-center" style="margin-left: 30px;font-size: 15px;color: black;font-weight: 300" >A partir de:</span><br><br>
  564.                                                             <span class="badge badge-danger" style="font-size: 41px;font-weight: 600;margin-left: -22px;color: red">
  565.                                                                 {{ totalprix }} TND
  566.                                                             </span>
  567.                                                             </div>
  568.                                                         </div>
  569.                                                     </div> #}
  570.                                                     <div class="col-md-2">
  571.                                                         <div class="offers_price" style="margin-top: 60px">
  572.                                                             {% set minPrix = null %}
  573.                                                             
  574.                                                             {% if sousCroisiere.souscroisiererooms is defined and sousCroisiere.souscroisiererooms|length > 0 %}
  575.                                                                 {% for cabine in sousCroisiere.souscroisiererooms %}
  576.                                                                     {% if cabine.souscroisierepricerooms is defined and cabine.souscroisierepricerooms|length > 0 %}
  577.                                                                         {% for priceCabine in cabine.souscroisierepricerooms %}
  578.                                                                             {% if priceCabine.price is defined %}
  579.                                                                                 {% if minPrix is null or priceCabine.price < minPrix %}
  580.                                                                                     {% set minPrix = priceCabine.price %}
  581.                                                                                 {% endif %}
  582.                                                                             {% endif %}
  583.                                                                         {% endfor %}
  584.                                                                     {% endif %}
  585.                                                                 {% endfor %}
  586.                                                             {% endif %}
  587.                                                             
  588.                                                             <div class="offers_price1">
  589.                                                                 <span class="text-center" style="margin-left: 30px;font-size: 15px;color: black;font-weight: 300">A partir de:</span><br><br>
  590.                                                                 <span class="badge badge-danger" style="font-size: 41px;font-weight: 600;margin-left: -22px;color: #5586c2">
  591.                                                                     {{ minPrix is not null ? minPrix : 'N/A' }} TND
  592.                                                                 </span>
  593.                                                             </div>
  594.                                                         </div>
  595.                                                     </div>
  597.                                                 </div>
  598.                                             </div>
  599.                                     </section>
  600.                                 </div>
  601.                             </div>
  602.                             <div class="hotel_info_text">
  603.                                 <p style="margin-left: 10px">
  604.                                     {{ sousCroisiere.itineraire|raw }}
  605.                                 </p>
  606.                             </div>
  608.                             <div class="hotel_info_text">
  609.                                 <br>
  610.                                 <div class="row">
  611.                                     <div class="col-md-5">
  612.                                         {% for img in sousCroisiere.navire.imagesnavires %}
  613.                                             {% if loop.first %}
  614.                                                 <img class="img1" src="{{ asset('./rusticav/public/uploads/navires/'~img.name) }}" alt="" width="90%" height="90%" style="margin-left: 30px" />
  615.                                             {% endif %}
  616.                                         {% endfor %}
  617.                                     </div>
  618.                                     <div class="col-md-7">
  619.                                         <h4 style="font-weight: 700">Fiche technique</h4>
  620.                                         {{ sousCroisiere.navire.technique|raw}}
  621.                                     </div>
  622.                                 </div>
  623.                             </div>
  624.                             
  625.                             
  628. <div class="hotel_info_text">
  629.     <div class="container">
  630.         <div class="row">
  631.             <div class="col-md-5">
  632.                 <div class="packs-container">
  633.                     <br><br>
  634.                     <!-- Boucle pour itérer sur toutes les plages de dates disponibles -->
  635.                     <select id="dateRangesDropdown" class="form-control" style="margin-left:400px;">
  636.                         <option value="all">Toutes les dates</option>
  637.                         {% for pack, packData in dataByPack %}
  638.                             {% for dateRange in packData.dateRanges %}
  639.                                 <option 
  640.                                     value="{{ dateRange.dated }} - {{ dateRange.datef }}"
  641.                                     data-roomdata="{{ dateRange.roomData | json_encode }}"
  642.                                     data-monthyear="{{ dateRange.dated | date("F Y") }}"
  643.                                 >
  644.                                     {{ dateRange.dated | date("F Y") }}
  645.                                 </option>
  646.                             {% endfor %}
  647.                         {% endfor %}
  648.                     </select>
  649.                 </div>
  650.             </div>
  651.         </div><br><br>
  652.         <div class="row">
  653.             <div class="col-md-12">
  654.                 <div id="selectedData" class="selected-data">
  655.                     <section id="pricing" class="pricing-content section-padding">
  656.                         <div class="container">
  657.                             <div class="row text-center" id="chambreInfo"></div>
  658.                         </div>
  659.                     </section>
  660.                 </div>
  661.             </div>
  662.         </div>
  663.     </div>
  664. </div>
  665. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  666. <script>
  667.     $(document).ready(function () {
  668.         $('#dateRangesDropdown').change(function () {
  669.             displaySelectedData();
  670.         });
  672.         // Affichez les informations sélectionnées du premier date de la première pack lors du chargement
  673.         displaySelectedData();
  674.     });
  676.     var souscroisiereId = {{ sousCroisiere.id }}; // Assurez-vous que cette variable est correctement définie
  678.     // Fonction pour afficher les informations sélectionnées
  679.     function displaySelectedData() {
  680.         var selectedOption = $('#dateRangesDropdown option:selected');
  681.         var value = selectedOption.val();
  682.         var monthYear = selectedOption.data('monthyear');
  684.         var groupedOptions = $('#dateRangesDropdown option').filter(function() {
  685.             return $(this).data('monthyear') === monthYear;
  686.         });
  688.         var chambreInfoDiv = $('#chambreInfo');
  689.         chambreInfoDiv.empty(); // Clear existing data
  691.         if (value === "all") {
  692.             // Stocker la date sélectionnée pour une utilisation ultérieure
  693.             selectedAllDate = $('#dateRangesDropdown').val();
  695.             // Afficher toutes les données disponibles
  696.             $('#dateRangesDropdown option').each(function() {
  697.                 if ($(this).val() !== "all") {
  698.                     var roomData = $(this).data('roomdata');
  699.                     var table = $('<table class="table table-bordered"></table>');
  700.                     var tbody = $('<tbody></tbody>');
  702.                     var dates = $(this).val().split(' - ');
  703.                     var formattedDates = 'Du ' + formatDate(dates[0]) + ' au ' + formatDate(dates[1]);
  704.                     var dateRange = $('<tr style="background: #2980b9;color: white;"><td colspan="4" style="font-weight:700;font-size:16px;">' + formattedDates + '</td></tr>');
  705.                     tbody.append(dateRange);
  707.                     var row = $('<tr></tr>');
  709.                     $.each(roomData, function(cabineName, room) {
  710.                         var cell = '<td>' + cabineName + ' <br/><span style="font-size:15px;font-weight:700"> ' + room.price + 'TND</span> <span class="text-xs">/pers.</span></td>';
  711.                         row.append(cell);
  712.                     });
  714.                     tbody.append(row);
  715.                     table.append(tbody);
  717.                     // Ajouter le tableau au div chambreInfo
  718.                     chambreInfoDiv.append(table);
  720.                     // Ajouter le bouton "Obtenir un devis gratuit"
  721.                     addReservationButton(table, $(this).val(), roomData);
  722.                 }
  723.             });
  724.         } else {
  725.             groupedOptions.each(function() {
  726.                 var roomData = $(this).data('roomdata');
  727.                 var table = $('<table class="table table-bordered"></table>');
  728.                 var tbody = $('<tbody></tbody>');
  729.                 
  730.                 var dates = $(this).val().split(' - ');
  731.                 var formattedDates = 'Du ' + formatDate(dates[0]) + ' au ' + formatDate(dates[1]);
  732.                 var dateRange = $('<tr><td colspan="' + Object.keys(roomData).length + '">' + formattedDates + '</td></tr>');
  733.                 tbody.append(dateRange);
  735.                 var row = $('<tr></tr>');
  737.                 $.each(roomData, function(cabineName, room) {
  738.                     var cell = '<td>' + cabineName + ' <br/> ' + room.price + 'TND <span class="text-xs">/pers.</span></td>';
  739.                     row.append(cell);
  740.                 });
  742.                 tbody.append(row);
  743.                 table.append(tbody);
  744.                 chambreInfoDiv.append(table);
  746.                 // Ajouter le bouton "Obtenir un devis gratuit"
  747.                 addReservationButton(table, $(this).val(), roomData);
  748.             });
  749.         }
  750.     }
  752.     // Fonction pour formater la date
  753.     function formatDate(dateString) {
  754.         var date = new Date(dateString);
  755.         var day = date.getDate();
  756.         var month = date.toLocaleString('default', { month: 'long' });
  757.         var year = date.getFullYear();
  758.         return day + ' ' + month + ' ' + year;
  759.     }
  761.     // Fonction pour ajouter un bouton "Obtenir un devis gratuit" à un tableau de données de chambre existant
  762.     function addReservationButton(table, selectedDate, roomData) {
  763.         // Créer une nouvelle ligne pour le bouton "Obtenir un devis gratuit"
  764.         var buttonRow = $('<tr></tr>');
  765.         var buttonCell = $('<td colspan="' + Object.keys(roomData).length + '"></td>');
  766.         var button = $('<button class="reserveButton"><span style="color: white;font-size: 16px;font-weight: 500">Obtenir un devis gratuit</span></button>');
  768.         // Ajouter l'attribut data-selecteddate au bouton "Obtenir un devis gratuit"
  769.         button.attr('data-selecteddate', selectedDate);
  771.         // Ajouter l'attribut data-roomdata au bouton "Obtenir un devis gratuit" pour stocker les types de chambre
  772.         button.attr('data-roomdata', JSON.stringify(roomData));
  774.         buttonCell.append(button);
  775.         buttonRow.append(buttonCell);
  776.         table.append(buttonRow);
  777.     }
  779.     // Ajouter un écouteur d'événements pour le clic sur le bouton "Obtenir un devis gratuit"
  780.     $(document).on('click', '.reserveButton', function () {
  781.         // Récupérer la date sélectionnée à partir de l'attribut data-selecteddate
  782.         var selectedDate = $(this).data('selecteddate');
  784.         // Rediriger vers la nouvelle page avec la date sélectionnée
  785.         redirectToNewPage(selectedDate);
  786.     });
  788.     // Fonction pour rediriger vers la nouvelle page avec la date sélectionnée et les types de chambre
  789.     function redirectToNewPage(selectedDate) {
  790.         // Récupérer les types de chambre à partir de l'attribut de données du bouton "Obtenir un devis gratuit"
  791.         var roomData = $('.reserveButton[data-selecteddate="' + selectedDate + '"]').data('roomdata');
  793.         // Créer un formulaire dynamique
  794.         var form = $('<form method="post" action="/page_suivante/' + souscroisiereId + '"></form>');
  796.         // Ajouter un champ pour la date sélectionnée
  797.         var selectedDateInput = $('<input type="hidden" name="selectedDate" value="' + selectedDate + '">');
  798.         form.append(selectedDateInput);
  800.         // Ajouter un champ pour les types de chambre
  801.         var roomDataInput = $('<input type="hidden" name="roomData" value=\'' + JSON.stringify(roomData) + '\'>');
  802.         form.append(roomDataInput);
  804.         // Ajouter le formulaire à la page et le soumettre
  805.         $('body').append(form);
  806.         form.submit();
  807.     }
  808. </script>
  814.                             
  820.                             
  821.                         </div>
  822.                     </div>
  823.                 </div>
  824.             </div>
  825.         </div>
  826.     </div>
  827.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  828.     <script src="{{ asset('slider/js/popper.js') }}"></script>
  829.     <script src="{{ asset('slider/js/bootstrap.min.js') }}"></script>
  830.     <script src="{{ asset('slider/js/owl.carousel.min.js') }}"></script>
  831.     <script src="{{ asset('slider/js/main.js') }}"></script>
  833. {% endblock %}