templates/pages/partials/accommodations.html.twig line 1

Open in your IDE?
  1. <script id="accommodationTemplate" type="text/x-jsrender">
  2.     <div class="d-flex flex-row flex-md-column hotel hotel-item">
  3.         <div class="hotel-image d-none d-md-block">
  4.             <a title="<%:Accommodation.Name%>" href="javascript:void(0)" onclick="document.getElementById('accommodation-<%:#index%>').click();" data-id="<%:Accommodation.Id%>">
  5.                 <img src="<%if Image.Url%><%:Image.Url%><%else%>/uploads/logo-fortuna.png<%/if%>" alt="<%:Accommodation.Name%>" style="border-radius: 4px;">
  6.                 <div class="stars d-none d-md-block">
  7.                     <div class="rating d-flex">
  8.                         <%:~range(0, Accommodation.NumberOfStars, '<div class="fa fa-star"></div>')%>
  9.                     </div>
  10.                 </div>
  11.             </a>
  12.         </div>
  13.         <div class="hotel-content ">
  14.             <div class="hotel-name">
  15.                 <a title="<%:Accommodation.Name%>" href="javascript:void(0)" onclick="document.getElementById('acc-<%:Accommodation.Id%>').click();"><%:Accommodation.Name%></a>
  16.                 <div class="hotel-stars-below-name d-md-none">
  17.                     <div class="stars">
  18.                         <div class="rating d-flex">
  19.                             <%:~range(0, Accommodation.NumberOfStars, '<div class="fa fa-star"></div>')%>
  20.                         </div>
  21.                     </div>
  22.                 </div>
  23.                 <div class="hotel-long-lat d-none">
  24.                     <div class="hotel-long"><%:Longtitude%></div>
  25.                     <div class="hotel-lat"><%:Latitude%></div>
  26.                 </div>
  27.             </div>
  28.             <a title="<%:Accommodation.Name%>" href="javascript:void(0)" data-id="<%:Accommodation.Id%>" class="mt-5 hotel-info-link" data-toggle="accommodation-detail"><i class="fas fa-info-circle"></i> Hotel informatie</a>
  29.         </div>
  30.         <div class="price d-flex justify-content-between align-items-center">
  31.                 <label for="acc-<%:Accommodation.Id%>">
  32.                     <span data-value-holder>
  33.                     <%if PriceDetails.Price.Difference < 0%>- <%:PriceDetails.Price.Difference/100*-1%><%else%>+ <%:PriceDetails.Price.Difference/100%><%/if%>,-</span> p.p.
  34.                 </label>
  35.             <div class="vr-radio-default">
  36.                 <input class="d-none" id="acc-<%:Accommodation.Id%>" type="radio"
  37.                        name="accommodation"
  38.                        value="<%:Accommodation.Id%>"
  39.                        data-action="select-accommodation"/>
  40.                 <label class="d-none d-md-inline-flex form-check-label is-btn stroke-full" for="acc-<%:Accommodation.Id%>">
  41.                     Selecteer dit <span>hotel</span>
  42.                 </label>
  43.                 <label class="d-md-none form-check-label is-btn stroke-full" for="acc-<%:Accommodation.Id%>">
  44.                     <span>Selecteer</span>
  45.                 </label>
  46.             </div>
  47.         </div>
  48.     </div>
  50. </script>
  51. <input type="hidden" id="accommodation_page_number" value="{{ basket.accommodationListPage }}"/>
  52. <div style="display:none;" data-type="noAccommodations"
  53.      class="alert alert-warning is-padding-20 is-rounded-5 is-margin-bottom-30 is-padding-left-50" role="alert">
  54.     <i class="fas fa-exclamation-triangle icon-before"></i> Er konden helaas geen hotels gevonden worden.
  55. </div>
  56. <div class="component checkout-step-panel" data-type="accommodations" id="accommodationsScroll" data-checkout-step="accommodationsScroll"
  57.      {% if basket.accomodationList is empty %}style="display:none;"{% endif %}>
  58.     <div class="whitebox">
  59.         <form action="">
  60.             <div class="row">
  61.                 <div class="col-12">
  62.                     <h3 class="text-center strike">
  63.                         <span>Jouw <span>hotel</span></span>
  64.                     </h3>
  65.                     <h4 class="is-line-height-mobile-15" style="padding-bottom: 15px;">Kies je hotel uit de speciaal
  66.                         door ons geselecteerde hotels</h4>
  67.                     <div><a href="javascript:void(0)" id="show-map" class="" data-toggle="accommodation-maps"
  68.                             style="display:none;">OF bekijk ze op de landkaart</a></div>
  69.                     <div class="alert alert-secondary checkout-offerte-alert mt-3" role="alert">
  70.                         Liever volledig ontzorgt? Vraag een <a href="/offerteaanvraag" class="alert-link">offerte aan</a>
  71.                     </div>
  72.                 </div>
  73.             </div>
  75.             <div class="row">
  76.                 <div class="col-lg-12">
  77.                     <div class="google-maps is-max-height-500 is-height-500 is-margin-bottom-15" id="map">
  79.                     </div>
  80.                 </div>
  81.             </div>
  83.             <div class="row hotellist" data-list="accommodations">
  84.                 {% if basket.accomodationList %}
  85.                     {% for accommodation in basket.accomodationList %}
  86.                         <div class="d-flex flex-row flex-md-column hotel hotel-item">
  87.                             <div class="hotel-image d-none d-md-block">
  88.                                 <a title="{{ accommodation.accommodation.name }}" href="javascript:void(0)"
  89.                                    onclick="document.getElementById('acc-{{ accommodation.accommodation.id }}').click();">
  90.                                     {% if accommodation.image.url is empty or 'hotelbeds.com' in (accommodation.image.url|default('')) %}
  91.                                         <img src="/uploads/logo-fortuna.png"
  92.                                              alt="{{ accommodation.accommodation.name }}" style="border-radius: 4px;">
  93.                                     {% else %}
  94.                                         <img src="{{ accommodation.image.url }}"
  95.                                              alt="{{ accommodation.accommodation.name }}" style="border-radius: 4px;">
  96.                                     {% endif %}
  97.                                     {% if accommodation.accommodation.numberOfStars is not empty %}
  98.                                         <div class="stars d-none d-md-block">
  99.                                             <div class="rating d-flex">
  100.                                                 {% for i in 1..accommodation.accommodation.numberOfStars %}
  101.                                                     <div class="fa fa-star"></div>
  102.                                                 {% endfor %}
  103.                                             </div>
  104.                                         </div>
  105.                                     {% endif %}
  106.                                 </a>
  107.                             </div>
  108.                             <div class="hotel-content ">
  109.                                 <div class="hotel-name">
  110.                                     <a title="{{ accommodation.accommodation.name }}" href="javascript:void(0)"
  111.                                        onclick="document.getElementById('acc-{{ accommodation.accommodation.id }}').click();">{{ accommodation.accommodation.name }}</a>
  112.                                     {% if accommodation.accommodation.numberOfStars is not empty %}
  113.                                         <div class="hotel-stars-below-name d-md-none">
  114.                                             <div class="stars">
  115.                                                 <div class="rating d-flex">
  116.                                                     {% for i in 1..accommodation.accommodation.numberOfStars %}
  117.                                                         <div class="fa fa-star"></div>
  118.                                                     {% endfor %}
  119.                                                 </div>
  120.                                             </div>
  121.                                         </div>
  122.                                     {% endif %}
  123.                                     <div class="hotel-long-lat d-none">
  124.                                         <div class="hotel-long">{{ accommodation.longtitude }}</div>
  125.                                         <div class="hotel-lat">{{ accommodation.latitude }}</div>
  126.                                     </div>
  127.                                 </div>
  128.                                 <div class="hotel_info_html">
  129.                                     <a title="{{ accommodation.accommodation.name }}" href="javascript:void(0);"
  130.                                        data-id="{{ accommodation.accommodation.id }}" data-toggle="accommodation-detail"
  131.                                        class="mt-5 hotel-info-link"><i class="fas fa-info-circle"></i> Hotel informatie</a></div>
  133.                             </div>
  134.                             <div class="price d-flex justify-content-between align-items-center">
  136.                                 <label for="acc-{{ accommodation.accommodation.id }}">
  137.                                     {% set price = accommodation.priceDetails.price.difference/100|round %}
  138.                                     <span data-value-holder>{{ price < 0 ? '-' : '+' }} {{ price|number_format(0)|replace({'-': ""}) }},-</span>
  139.                                     p.p.
  140.                                 </label>
  143.                                 <div class="vr-radio-default">
  144.                                     <input class="d-none" id="acc-{{ accommodation.accommodation.id }}" type="radio"
  145.                                            name="accommodation"
  146.                                            value="{{ accommodation.accommodation.id }}"
  147.                                            data-action="select-accommodation"
  148.                                             {{ accommodation.accommodation.id == basket.accommodation ? 'checked="checked"' : '' }}/>
  149.                                     <label class="d-none d-md-inline-flex form-check-label is-btn stroke-full"
  150.                                            for="acc-{{ accommodation.accommodation.id }}">
  151.                                         Selecteer dit <span>hotel</span>
  152.                                     </label>
  153.                                     <label class="d-md-none form-check-label is-btn stroke-full"
  154.                                            for="acc-{{ accommodation.accommodation.id }}">
  155.                                         <span>Selecteer</span>
  156.                                     </label>
  159.                                     <!-- <label for="acc-{{ accommodation.accommodation.id }}">
  160.                                         {% set price = accommodation.priceDetails.price.difference/100|round %}
  161.                                         <span data-value-holder>{{ price < 0 ? '-' : '+' }} {{ price|number_format(0) }},-</span> p.p.
  162.                                     </label> -->
  163.                                 </div>
  164.                             </div>
  165.                         </div>
  166.                     {% endfor %}
  167.                 {% endif %}
  168.             </div>
  169.         </form>
  170.         <div class="row mt-5">
  171.             <div class="col-12 text-center">
  172.                 <div>
  173.                     <button class="is-btn select-next-accommodation is-background-color-black stroke"
  174.                             data-action="select-next-accommodation">Toon meer <span>hotels</span></button>
  175.                 </div>
  176.             </div>
  177.         </div>
  178.         <!--<div class="row mt-5">
  179.             <div class="col-12 d-flex justify-content-center ">
  180.                 <a class="is-btn mr-3" data-scroll="stadiumCategories"><i class="fas fa-angle-left icon-left"></i>Vorige stap</a>
  181.                  <button class="is-btn is-btn__outline is-btn-ghost mr-3" data-scroll="stadiumCategories">
  182.                     <i class="fas fa-angle-left icon-left"></i>Vorige stap
  183.                 </button><br>
  184.                 <a class="is-btn is-btn__primary is-width-mobile-max" href="{{ path('checkout', {'id': match.id}) }}?step=2">
  185.                     Ticket + Hotel boeken
  186.                 </a>
  187. {#                <button type="button" class="is-btn is-btn__primary select-accommodation-rooms" data-scroll="roomsScroll"> #}
  188. {#                    Kies jouw kamer(s) <i class="fas fa-bed icon-right"></i> #}
  189. {#                </button> #}
  190.             </div>
  191.             <div class="col-12 text-center ">
  192.                 <p class="is-margin-top-45">Wil je ook direct je vlucht via ons bijboeken? Dat is mogelijk!</p>
  193.                 <p>Klik op onderstaande button en wij halen direct de actuele beschikbare vluchten en prijzen voor je op.</p>
  194.                 <p>Boek je reis direct om beschikbaarheid te garanderen en prijswijzigingen te voorkomen.</p>
  195.                 <a class="select-flight is-btn is-btn__primary is-width-mobile-max is-margin-top-30" href="{{ path('checkout', {'id': match.id}) }}?step=2" data-scroll="flightScroll">
  196.                     Vlucht bijboeken
  197.                     <i class="fas fa-plane-departure icon-right"></i>
  198.                 </a>
  200.             </div>
  201.         </div>-->
  202.     </div>
  203. </div>
  208. <script id="accommodationAvailabilityTemplate" type="text/x-jsrender">
  209.     <div data-model-title="Hotel niet (meer) beschikbaar">
  210.         <p>Helaas zijn er in het geselecteerde hotel op deze reisdata <strong>geen kamers (meer) beschikbaar</strong> die aan jouw zoekcriteria voldoen.</p>
  211.         <p><strong>Wijzig eventueel het aantal kamers en/of de kamerindeling in het geselecteerde hotel en probeer het opnieuw</strong>. Is er dan nog geen beschikbaarheid? Kies dan een ander hotel uit ons aanbod of probeer het op een later moment nogmaals.</p>
  212.         <p>Al onze voetbalreizen zijn gebaseerd op <strong>‘live’ beschikbaarheid</strong>. Hierdoor kunnen de actuele prijzen en beschikbaarheid wijzigen bij elke zoekopdracht. Onze excuses voor het eventuele ongemak. </p>
  213.         <p><i>Zijn er op jouw reisdata geen hotels meer beschikbaar in de betreffende speelstad of voldoen de alternatieve verblijfsopties niet aan je wensen, neem dan <a href="https://www.voetbalretour.nl/offerteaanvraag">contact</a> met ons op en wij bekijken graag of er wellicht nog andere mogelijkheden zijn die wij je kunnen aanbieden zodat we jouw voetbalreis geheel op maat voor je kunnen samenstellen.</i></p>
  214.     </div>
  216. </script>
  218. <script id="accommodationDetailTemplate" type="text/x-jsrender">
  219.   <div class="row">
  220.     <div class="hotel col-12" data-model-title="Hotel informatie">
  221.         <div class="hotel-image d-flex">
  222.             <div class="hotel-name"><h3><%:Name%></h3></div>
  223. {#            <div class="stars position-relative pl-3">#}
  224. {#                <div class="rating mt-0 pt-1">#}
  225. {#                    <%:~range(0, NumberOfStars, '<div class="fa fa-star"></div>')%>#}
  226. {#                </div>#}
  227. {#            </div>#}
  228.         </div>
  229.     </div>
  230.     <div class="col-12 col-lg-6">
  231.         <div class="hotel-description">
  232.             <%for Information%>
  233.                 <%for Descriptions%>
  234.                     <h4><%:Header%></h4>
  235.                     <%for Paragraph%>
  236.                         <p><%:#data%></p>
  237.                     <%/for%>
  238.                 <%/for%>
  239.             <%/for%>
  240.         </div>
  241.     </div>
  242.     <div class="col-12 col-lg-6">
  243.         <div class="hotel-content flex-md-grow-1">
  244.             <%for Information%>
  245.                 <div id="impression-media" class="text-center carousel slide" data-ride="carousel">
  246.                     <ol class="carousel-indicators">
  247.                         <%for Images%>
  248.                             <li data-target="#impression-media" data-slide-to="<%:index%>" <%if #getIndex() == 0%>class="active"<%/if%>></li>
  249.                         <%/for%>
  250.                     </ol>
  251.                     <div class="carousel-inner">
  252.                         <%for Images%>
  253.                             <div class="carousel-item <%if #getIndex() == 0%>active<%/if%>">
  254.                                 <img class="d-block w-100 mx-auto" src="<%:Url%>" alt="<%:Name%>">
  255.                             </div>
  256.                         <%/for%>
  257.                     </div>
  258.                     <a class="carousel-control-prev" href="#impression-media" role="button" data-slide="prev">
  259.                         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  260.                         <span class="sr-only">{{ 'Previous'|trans }}</span>
  261.                     </a>
  262.                     <a class="carousel-control-next" href="#impression-media" role="button" data-slide="next">
  263.                         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  264.                         <span class="sr-only">{{ 'Next'|trans }}</span>
  265.                     </a>
  266.                 </div>
  267.             <%/for%>
  268.         </div>
  269.     </div>
  270. </div>
  272. </script>
  274. <script id="accommodationRoomTemplate" type="text/x-jsrender">
  275.     <div class="col-12" data-model-title="Jouw kamer">
  276.         <div class="row roomsrow-head">
  277.             <div class="col-lg-6">
  278.                 <h5 class="modal-title" style="18px; line-height: 50px; font-weight: bold; font-size: 18px;">Type kamer</h5>
  279.             </div>
  280.             <div class="col-lg-4">
  281.                 <h5 class="modal-title" style="18px; line-height: 50px; font-weight: bold; font-size: 18px; ">Verzorging</h5>
  282.             </div>
  283.             <div class="col-lg-2">
  285.             </div>
  286.         </div>
  287.         <div class="row roomsrow is-background-color-primary is-color-blank is-padding-10">
  288.             <div class="col-lg-6">
  289.                 <p class="is-margin-bottom-0">
  290.                     <%for ChosenAccommodation%><%:Description%><%/for%>
  291.                 </p>
  292.             </div>
  293.             <div class="col-lg-4">
  294.                 <p class="is-margin-bottom-0">
  295.                     <%for ChosenAccommodation%><%for Boards%><%:Name%><%/for%><%/for%>
  296.                 </p>
  297.             </div>
  298.             <div class="col-lg-2">
  299.                 <p class="is-margin-bottom-0">
  300.                     INBEGREPEN
  301.                 </p>
  302.             </div>
  303.         </div>
  305.          <%for Units%>
  306.             <div class="row roomsrow is-hover-color-blank is-padding-10 select-room is-cursor-pointer" data-id="room-<%:Id%>" data-gnid="<%:gnId%>" data-action="select-room" data-room-id="<%:~stripspaces(Description)%><%:~stripspaces(Type)%><%for Boards%><%:Name%><%/for%>" data-acc-id="<%:~accId%>">
  307.                     <div class="col-lg-6">
  308.                        <p class="is-margin-bottom-0"><%:Description%></p>
  309.                     </div>
  310.                     <div class="col-lg-4">
  311.                     <p class="is-margin-bottom-0"><%for Boards%><%:Name%><%/for%></p>
  312.                     </div>
  313.                     <div class="col-lg-2">
  314.                         <p class="is-margin-bottom-0"><%for Prices%><%formatPriceDifference:Price.ValuePerPerson/100%><%/for%> p.p.</p>
  315.                     </div>
  317.             </div>
  318.          <%/for%>
  319.     </div>
  320. </script>