app/Resources/views/page/rooms_view.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% set metaParams = {
  3.     'title': room.title,
  4.     'description': room.text|slice(3,300),
  5.     'keywords': room.text|slice(3,300),
  6.     'ogImage': room.ogImage
  7. } %}
  8. {% block meta %}
  9.     {% include 'parts/meta.html.twig' with metaParams %}
  10. {% endblock %}
  11. {% block title %}{{ parent() }} {{ room.title }}{% endblock %}
  12. {% set roomActive = true %}
  13. {% block stylesheets %}
  14.     <style>
  15.         .item-slick {
  16.             background-size: cover;
  17.             background-position: center;
  18.         }
  19.     </style>
  20. {% endblock %}
  21. {% block body %}
  22.     <div class="room-slider">
  23.         <div class="room-title">
  24.             {{ room.title }}<br>
  25.         </div>
  26.     </div>
  27.     <div class="" style="overflow:hidden;">
  28.         <div class="slider-for">
  29.             {% for item in room.images|json_decode %}
  30.                 <div class="item-slick" style="background-image:url({{ item }});"></div>
  31.             {% endfor %}
  32.         </div>
  33.         <div class="slider-nav" style="top: -125px;">
  34.             {% for item in room.images|json_decode %}
  35.                 <div><img src="{{ item }}" alt="" style="width: 150px;"></div>
  36.             {% endfor %}
  37.         </div>
  38.     </div>
  40.     {#<div class="carousel-detail">#}
  41.     {#{% set hash = 0 %}#}
  42.     {#{% for item in room.images|json_decode %}#}
  43.     {#<div data-image="{{ item|get_thumb }}" class="item hash{{ hash}} {% if hash == 0  %}active{% endif %}"#}
  44.     {#{% if room.images|json_decode|length <= 6 %}#}
  45.     {#style="flex:  50%;height: 25vh;overflow:hidden;background-image:url({{ item|get_thumb }});"#}
  46.     {#{% elseif room.images|json_decode|length >= 7 %}#}
  47.     {#style="flex-basis:  33.3%"#}
  48.     {#{% endif %}#}
  49.     {#href="#hash{{ hash}}"></div>#}
  50.     {#{% set hash = hash + 1 %}#}
  51.     {#{% endfor %}#}
  52.     {#</div>#}
  54.     <section style="margin: 0;">
  55.         <div class="container">
  56.             <div class="details-section-ravis">
  57.                 <ul>
  58.                     {% for item in room.room %}
  59.                         <li><img src="{{ asset('img/check.png') }}" alt=""><i class="{{ item.iconInfo }}"></i></li>
  60.                     {% endfor %}
  61.                 </ul>
  63.             </div>
  64.             <div class="details-section-info">
  65.                 <div class="row">
  66.                     <div class="col-lg-8 col-sm-12">
  67.                         <div class="room-info">
  68.                             {{ room.text|raw }}
  69.                         </div>
  70.                         <div class="form-booking" style="margin: 25px 15px;">
  71.                             <form action="{{ path('reservation_room') }}" method="get">
  72.                                 <input type="hidden" name="room-type" value="{{ room.roomType }}">
  73.                                 <button class="btn-ramada hvr-sweep-to-right">Book</button>
  74.                             </form>
  75.                         </div>
  76.                     </div>
  77.                     <div class="col-lg-4 col-sm-12">
  78.                         <div class="form-reserve">
  79.                             <div class="main-title">
  80.                                 <h5>{{ 'Reserved Room'|trans }}</h5>
  81.                             </div>
  82.                             <div class="input-daterange">
  84.                                 <form action="#!" id="form" method="get">
  85.                                     <div class="booking-fields form-group ">
  86.                                         <input id="form-arrival" placeholder="Check in"
  87.                                                class="datepicker-fields form-control check-in" type="text"
  88.                                                name="date"/>
  89.                                     </div>
  90.                                     <div class="booking-fields form-group " style="">
  91.                                         <input id="form-departure" placeholder="Check out"
  92.                                                class="datepicker-fields form-control check-out" type="text"
  93.                                         />
  94.                                         <input type="hidden" name="nights" id="nights">
  95.                                     </div>
  96.                                     <div class="form-group">
  97.                                         <select name="adults" id="adults" class="form-control">
  98.                                             <option value="">{{ 'Adult'|trans }}</option>
  99.                                             <option value="">1</option>
  100.                                             <option value="">2</option>
  101.                                             <option value="">3</option>
  102.                                             <option value="">4</option>
  103.                                             <option value="">5</option>
  104.                                         </select>
  105.                                     </div>
  106.                                     <div class="form-group">
  107.                                         <select name="children" id="children" class="form-control">
  108.                                             <option value="">{{ 'Child'|trans }}</option>
  109.                                             <option value="">1</option>
  110.                                             <option value="">2</option>
  111.                                             <option value="">3</option>
  112.                                             <option value="">4</option>
  113.                                             <option value="">5</option>
  114.                                         </select>
  115.                                     </div>
  116.                                     <div class="form-group ">
  117.                                         <button type="submit"
  118.                                                 class="btn-ramada-2 hvr-sweep-to-right">{{ 'Book'|trans }}</button>
  119.                                     </div>
  120.                                 </form>
  121.                             </div>
  122.                         </div>
  123.                     </div>
  124.                 </div>
  125.             </div>
  126.         </div>
  127.     </section>
  129.     {#{% if other %}#}
  130.     <section>
  131.         <div class="container">
  132.             <div class="main-title">
  133.                 <h5> {{ 'Other Rooms'|trans }}</h5>
  134.             </div>
  135.             {% set totalServices = other|length %}
  136.             {% set currentRow = 0 %}
  137.             {% set serviceCount = 0 %}
  138.             {% for item in other %}
  139.                 {% if currentRow == 0 %}
  140.                     <div class="row mt-4">
  141.                 {% endif %}
  142.                 <div class="col-md-4">
  143.                     <a href="{{ path('rooms_view_page', {'slug':item.id}) }}">
  144.                         <div style="background-image: linear-gradient(rgba(0, 0, 0, 0.36),rgba(30, 30, 30, 0.47058823529411764)),url({{ item.ogImage }})"
  145.                              class="rooms-item">
  146.                             <p>{{ item.title }}
  147.                                 <br>
  148.                             </p>
  149.                         </div>
  150.                     </a>
  151.                 </div>
  152.                 {% set currentRow = currentRow + 1 %}
  153.                 {% set serviceCount = serviceCount + 1 %}
  154.                 {% if currentRow == 3 or serviceCount == totalServices %}
  155.                     {% set currentRow = 0 %}
  156.                     </div>
  157.                 {% endif %}
  158.             {% endfor %}
  160.         </div>
  161.     </section>
  162.     {#{% endif %}#}
  163. {% endblock %}
  165. {% block javascripts %}
  166.     {{ parent() }}
  167.     <script>
  168.         // booking
  170.         jQuery('#form').submit(function () {
  171.             var arrival = new Date(jQuery('#form-arrival').val());
  172.             var arrivalMonth = arrival.getMonth() + 1;
  173.             if (arrivalMonth < 10) {
  174.                 arrivalMonth = "0" + arrivalMonth;
  175.             }
  176.             var arrivalDate = arrival.getFullYear() + "-" + arrivalMonth + "-" + arrival.getDate();
  177.             // var adults = jQuery('#adults').val();
  178.             // var children = jQuery('#children').val();
  179.             var departure = new Date(jQuery('#form-departure').val());
  180.             var nights = (departure - arrival) / (1000 * 60 * 60 * 24);
  181.             jQuery('#nights').val(nights);
  183.             jQuery(this).attr("action", "/{{ app.request.locale }}/booking/?date=" + arrivalDate + "&nights=" + nights);
  184.         });
  187.         // $(window).ready(function () {
  188.         //     // The slider being synced must be initialized first
  189.         //     $('#carousel').flexslider({
  190.         //         animation: "slide",
  191.         //         controlNav: "thumbnails",
  192.         //         animationLoop: true,
  193.         //         itemWidth: 230,
  194.         //         itemMargin: 5,
  195.         //         asNavFor: '#slider'
  196.         //     });
  197.         //
  198.         //     $('#slider').flexslider({
  199.         //         animation: "slide",
  200.         //         controlNav: false,
  201.         //         animationLoop: true,
  202.         //         slideshow: false,
  203.         //         sync: "#carousel"
  204.         //     });
  205.         // });
  206.         $('.slider-for').slick({
  207.             slidesToShow: 1,
  208.             slidesToScroll: 1,
  209.             arrows: true,
  210.             fade: true,
  211.             asNavFor: '.slider-nav'
  212.         });
  213.         $('.slider-nav').slick({
  214.             slidesToShow: 10,
  215.             slidesToScroll: 1,
  216.             asNavFor: '.slider-for',
  217.             dots: false,
  218.             centerMode: false,
  219.             focusOnSelect: true,
  220.             responsive: [
  221.                 {
  222.                     breakpoint: 1200,
  223.                     settings: {
  224.                         slidesToShow: 4,
  225.                         slidesToScroll: 1
  226.                     }
  227.                 },
  228.                 {
  229.                     breakpoint: 991,
  230.                     settings: {
  231.                         slidesToShow: 4,
  232.                         slidesToScroll: 1
  233.                     }
  234.                 },
  235.                 {
  236.                     breakpoint: 578,
  237.                     settings: {
  238.                         slidesToShow: 2,
  239.                         slidesToScroll: 1
  240.                     }
  241.                 }
  242.                 ]
  243.         });
  245.         // $(document).ready(function () {
  246.         //     let height = window.innerHeight - 200;
  247.         //     let _class = document.querySelectorAll('.item-slick');
  248.         //     if (height <= 400) {
  249.         //         for (let i = 0; i <= _class.length - 1; i++) {
  250.         //             _class[i].style.height = 470 + 'px'
  251.         //         }
  252.         //
  253.         //     } else {
  254.         //         for (let i = 0; i <= _class.length - 1; i++) {
  255.         //             _class[i].style.height = height + 'px';
  256.         //         }
  257.         //     }
  258.         //
  259.         // })
  260.     </script>
  261. {% endblock %}