templates/pages/checkout_arrangement.html.twig line 1

Open in your IDE?
  1. <div class="component component--basket-overview is-margin-bottom-0">
  2.     <div class="basket-overview-sticky" id="basket" data-list="basket-overview" class="collapse">
  4.     </div>
  5. </div>
  7. <div class="checkout checkout--arrangement checkout_step-1">
  8.     <div data-component="VoetbalRetourCheckout" data-match-id="{{ match.id }}"
  9.          data-depart-date="{{ basket.departDate ? basket.departDate|date('Y-m-d') : (departDates|length > 0 ? (departDates|first)|date('Y-m-d') : '') }}"
  10.          data-return-date="{{ basket.returnDate ? basket.returnDate|date('Y-m-d') : (returnDates|length > 0 ? (returnDates|first)|date('Y-m-d') : '') }}">
  11.         <div class="checkout-progressbar-wrapper">
  12.             <div class="checkout-progressbar-spacer" aria-hidden="true"></div>
  13.             <div class="component component_progressbar">
  14.             <div class="row">
  15.                 <div class="col">
  16.                     <div class="d-flex mr-0 ml-0 progressbar">
  17.                         <div class="progress-part flex-fill">
  18.                             <div class="d-flex justify-content-center align-items-center">
  19.                                 <div class="step active d-flex justify-content-center align-items-center">
  20.                                     <i class="fas fa-futbol"></i>
  21.                                 </div>
  22.                             </div>
  23.                             <div class="content"><span class="content-full">1. Reis samenstellen</span><span class="content-short">1. Reis</span></div>
  24.                         </div>
  25.                         <div class="progress-part flex-fill">
  26.                             <div class="d-flex justify-content-center align-items-center">
  27.                                 <div class="step d-flex justify-content-center align-items-center">
  28.                                     <i class="fas fa-users"></i>
  29.                                 </div>
  30.                             </div>
  31.                             <div class="content"><span class="content-full">2. Reizigersgegevens</span><span class="content-short">2. Gegegevens</span></div>
  32.                         </div>
  33.                         <div class="progress-part flex-fill">
  34.                             <div class="d-flex justify-content-center align-items-center">
  35.                                 <div class="step d-flex justify-content-center align-items-center">
  36.                                     <i class="far fa-credit-card"></i>
  37.                                 </div>
  38.                             </div>
  39.                             <div class="content"><span class="content-full">3. Overzicht & betalen</span><span class="content-short">3. Overzicht</span></div>
  40.                         </div>
  41.                     </div>
  42.                 </div>
  43.             </div>
  44.         </div>
  45.         </div>
  47.         {% for label, messages in app.flashes %}
  48.             {% for message in messages %}
  49.                 {% if label != 'e_commerce_script' %}
  50.                     <div class="alert alert-{{ label }} alert-dismissible is-padding-20 is-rounded-5 is-margin-bottom-10 is-padding-left-50"
  51.                          role="alert">
  52.                         <i class="fas fa-exclamation-triangle icon-before"></i> {{ message }}
  53.                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  54.                             <i class="fas fa-times"></i>
  55.                         </button>
  56.                     </div>
  57.                 {% endif %}
  58.             {% endfor %}
  59.         {% endfor %}
  60.         {# match information #}
  61.         <div class="component component_matches component_matches-checkout" id="match-list">
  62.             <div class="row matchComposer">
  63.                     <div class="col match partial partial_match_list-item">
  64.                         {% if match.disableBooking %}
  65.                         <div class="card disabled">
  66.                             {% else %}
  67.                             <div class="card">
  68.                                 {% endif %}
  69.                                 <span data-scroll="journeyDetails" class="card-link"></span>
  70.                                 <div class="match-header">
  71.                                     <div class="actions">
  72.                                         <div class="options" data-component="Favorite" data-match-id="{{ match.id }}">
  73.                                             <div class="favorite">
  74.                                             <span class="d-none" data-is-favorited="true">
  75.                                                 <i class="fas fa-star" aria-hidden="true"></i>
  76.                                             </span>
  77.                                                 <span class="d-none" data-is-favorited="false">
  78.                                                 <i class="far fa-star" aria-hidden="true"></i>
  79.                                             </span>
  80.                                                 <a href="javascript:void(0)"
  81.                                                    class="favourite favorite-add favorite-match"></a>
  82.                                             </div>
  83.                                             <div class="widget widget--share dropdown show">
  84.                                                 <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
  85.                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  86.                                                     <i class="fa-regular fa-share-nodes"></i>
  87.                                                 </a>
  88.                                                 <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
  89.                                                     <a href="mailto:?subject=Deze voetbalreis moet je zeker eens bekijken!&body=Ik heb bij Voetbal Retour een leuke voetbalreis naar de wedstrijd gevonden. Ga je mee? https://www.voetbalretour.nl/{{ path("checkout",  {'id' : match.id}) }}">
  90.                                                         <i class="far fa-envelope icon-before"></i>E-mail
  91.                                                     </a>
  92.                                                     <a href='https://api.whatsapp.com/send?text=Ik heb bij Voetbal Retour een leuke voetbalreis naar de wedstrijd {{ match.homeClub.name }} - {{ match.awayClub.name }} gevonden. Ga je mee? https://www.voetbalretour.nl/{{ path("checkout",  {'id' : match.id}) }}'
  93.                                                        target="_blank">
  94.                                                         <i class="fab fa-whatsapp icon-before"></i>WhatsApp
  95.                                                     </a>
  96.                                                     <a href="https://telegram.me/share/url?url=https://www.voetbalretour.nl/{{ path("checkout",  {'id' : match.id}) }}&text=Ik heb bij Voetbal Retour een leuke voetbalreis naar de wedstrijd {{ match.homeClub.name }} - {{ match.awayClub.name }} gevonden. Ga je mee? https://www.voetbalretour.nl/{{ path("checkout",  {'id' : match.id}) }}"
  97.                                                        target="_blank">
  98.                                                         <i class="fab fa-telegram icon-before"></i>Telegram
  99.                                                     </a>
  100.                                                 </div>
  101.                                             </div>
  102.                                         </div>
  103.                                     </div>
  104.                                     <div class="details">
  105.                                         <div data-component="centrum-longitude"
  106.                                              class="d-none">{{ match.stadium.centrumLongitude }}</div>
  107.                                         <div data-component="centrum-latitude"
  108.                                              class="d-none">{{ match.stadium.centrumLatitude }}</div>
  109.                                         <div data-component="stadium-location"
  110.                                              class="d-none">{{ match.stadium.address }}</div>
  111.                                         <div data-component="stadium-name" class="d-none">{{ match.stadium }}</div>
  112.                                         <div class="competition"><i
  113.                                                     class="fa-solid fa-fw fa-futbol icon-before"></i>{{ match.competition.name }}
  114.                                         </div>
  115.                                         <div class="location">
  116.                                             <i class="fa-solid fa-fw fa-location-dot icon-before"></i>{{ match.stadium }}, {{ match.stadium.place }}
  117.                                         </div>
  118.                                     </div>
  119.                                     <div class="pricing">
  120.                                         <span class="text-holder">
  121.                                             {% set priceAmount = match.price.amount/100 %}
  122.                                             vanaf <span class="price text-highlighter"><span
  123.                                                         class="currency">€</span>{{ priceAmount|number_format(0, ',','.') }},-</span>
  124.                                         </span>
  125.                                         <button type="button" data-toggle="modal" data-target="#price-details"><i
  126.                                                     class="fas fa-info-circle"></i></button>
  127.                                     </div>
  128.                                 </div>
  129.                                 <div class="match-content">
  130.                                     <div class="club club-home">
  131.                                         <img src="{{ media_asset(match.homeClub.logo) }}"
  132.                                              alt="{{ match.homeClub }}" class="club-logo">
  133.                                         <div class="club-name">{{ match.homeClub }}</div>
  134.                                     </div>
  135.                                     <div class="vs mobile">-</div>
  136.                                     <div class="vs desktop">VS</div>
  137.                                     <div class="club club-away">
  138.                                         <div class="club-name">{{ match.awayClub }}</div>
  139.                                         <img src="{{ media_asset(match.awayClub.logo) }}"
  140.                                              alt="{{ match.awayClub }}" class="club-logo">
  141.                                     </div>
  142.                                 </div>
  143.                                 <div class="match-footer">
  144.                                     <div class="details">
  145.                                         <div class="date">
  146.                                             <i class="fa-solid fa-calendar-days icon-before"></i>{{ match.date|date('d-m-Y') }}
  147.                                         </div>
  148.                                         <div class="time">
  149.                                             <i class="fa-solid fa-clock icon-before"></i>{{ match.date|date('H:i') }}
  150.                                         </div>
  151.                                         {% if match.final %}
  152.                                             <div class="match-state-final label state-confirmed">
  153.                                                 <span class="text-holder"></span><i
  154.                                                         class="fas fa-fw fa-check icon-before"></i> Bevestigd
  155.                                                 <button type="button" data-toggle="modal" data-target="#match-status"><i
  156.                                                             class="fas fa-info-circle"></i></button>
  157.                                             </div>
  158.                                         {% else %}
  159.                                             <div class="match-state-final label">
  160.                                                 <span class="text-holder"><i class="fas fa-fw fa-times icon-before"></i> Nog niet bevestigd </span>
  161.                                                 <button type="button" data-toggle="modal" data-target="#match-status"><i
  162.                                                             class="fas fa-info-circle"></i></button>
  163.                                             </div>
  164.                                         {% endif %}
  165.                                     </div>
  166.                                     <div class="actions checkout-match-stel-samen-wrap">
  167.                                         {% if match.disableBooking %}
  168.                                             <button disabled class="is-btn is-btn__secondary mt-3">Uitverkocht</button>
  169.                                         {% else %}
  170.                                             <button type="button" data-scroll="journeyDetails"
  171.                                                     class="is-btn is-background-color-accent stroke-full checkout-btn-stel-samen">Stel <span
  172.                                                         class="text-highlighter">samen</span></button>
  173.                                         {% endif %}
  174.                                     </div>
  175.                                 </div>
  176.                             </div>
  177.                         </div>
  179.                         {{ include('pages/Modal/price_details.html.twig') }}
  180.                         {{ include('pages/Modal/match_status.html.twig') }}
  181.                     </div>
  182.                 </div>
  184.             </div>
  186.             {# Stap-panels: alleen het actieve paneel is zichtbaar (geen scroll) #}
  187.             <div class="checkout-step-viewport">
  188.                 {# 1. Reis #}
  189.                 {{ include('pages/partials/yourTrip.html.twig') }}
  190.                 {# 2. Tickets #}
  191.                 {{ include('pages/partials/stadium_categories.html.twig') }}
  192.                 {# 3. Hotel #}
  193.                 {{ include('pages/partials/accommodations.html.twig') }}
  194.                 {# 4. Kamers #}
  195.                 {{ include('pages/partials/rooms.html.twig') }}
  196.                 {# 5. Vlucht #}
  197.                 {{ include('pages/partials/flight.html.twig') }}
  198.             </div>
  200.             <script id="loadingTemplate" type="text/x-jsrender">
  201.                 <div class="text-center checkout-loader-bg">
  202.                 <div id="checkout-loader">
  203.                 <img src="{{ asset('assets/vr_loader2.gif') }}" alt="{{ 'Loading'|trans }}"
  204.                          class="is-max-width-200">
  205.                     <p class="pt-3 is-margin-top-20">
  206.                         We controleren nu de actuele beschikbaarheid en prijzen, dit kan tot 30 seconden
  207.                         duren.<br/>
  208.                     </p>
  209.                     <div class="d-flex footer-images justify-content-center">
  210.                         <img src="https://www.voetbalretour.nl/uploads/Thuiswinkel_checkout_liggend2.jpg">
  211.                         <img src="https://www.voetbalretour.nl/uploads/GGTO_logo_blue.png">
  212.                     </div>
  213.                 </div></div>
  214.             </script>
  216.             <div class="loading text-center checkout-loader-bg" style="display:none;">
  217.                 <div id="checkout-loader">
  218.                     <h3 class="is-margin-top-0 pb-3 strike">
  219.                         <span>Een moment geduld alsjeblieft</span>
  220.                     </h3>
  221.                     <img src="{{ asset('assets/vr_loader2.gif') }}" alt="{{ 'Loading'|trans }}"
  222.                          class="is-max-width-200">
  223.                     <p class="pt-3 is-margin-top-20">
  224.                         We controleren nu de actuele beschikbaarheid en prijzen, dit kan tot 30 seconden
  225.                         duren.<br/><br/>
  226.                     </p>
  227.                     <div class="d-flex footer-images justify-content-center">
  228.                         <img src="https://www.voetbalretour.nl/uploads/Thuiswinkel_checkout_liggend2.jpg">
  229.                         <img src="https://www.voetbalretour.nl/uploads/GGTO_logo_blue.png">
  230.                     </div>
  231.                 </div>
  232.             </div>
  234.             <div class="no-results text-center checkout-loader-bg" style="display:none;">
  235.                 <p>
  236.                     <b>Geen vluchten gevonden.</b><br/>
  237.                     <br/>
  238.                     Kies voor vertrek vanaf een andere luchthaven in Nederland, Duitsland of België of wijzig de luchthaven van aankomst naar een ander nabijgelegen vliegveld en/of pas je reisdata aan en probeer het opnieuw.<br/>
  239.                     <br/>
  240.                     Dit kan ook komen doordat de verwachte aankomsttijd van de beschikbare heenvlucht(en) te kort op het (actuele) aanvangstijdstip van de wedstrijd ligt. Om te voorkomen dat je de aftrap zou missen tonen we in ons aanbod geen vluchten waarbij je korter dan 6 uur voor de aftrap pas in de speelstad aankomt.<br/>
  241.                     <br/>
  242.                     Hulp nodig? Of telefonisch een vlucht boeken? Neem dan <a href='/contact'>contact</a> met ons op. Wij staan voor je klaar!
  243.                 </p>
  244.             </div>
  246.             <div class="modal fade" id="accommodation-detail" tabindex="-1" role="dialog" aria-hidden="true">
  247.                 <div class="modal-dialog" role="document">
  248.                     <div class="modal-content">
  249.                         <div class="modal-header">
  250.                             <h5 class="modal-title">
  252.                             </h5>
  253.                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  254.                                 <span aria-hidden="true">&times;</span>
  255.                             </button>
  256.                         </div>
  257.                         <div class="modal-body text-justify">
  258.                             <div class="loading text-center">
  259.                                 <img src="{{ asset('assets/contentbox/spinner.svg') }}" alt="{{ 'Loading'|trans }}">
  260.                             </div>
  261.                         </div>
  262.                         <div class="modal-footer">
  263.                             <button type="button" class="is-btn is-background-color-black stroke is-margin-bottom-15"
  264.                                     data-dismiss="modal">Sluiten
  265.                             </button>
  266.                         </div>
  267.                     </div>
  268.                 </div>
  269.             </div>
  271.             <div class="modal fade" id="loading-modal" tabindex="-1" role="dialog" aria-hidden="true">
  272.                 <div class="modal-dialog" role="document">
  273.                     <div class="modal-content">
  274.                         <div class="modal-header">
  275.                             <h5 class="modal-title">
  277.                             </h5>
  278.                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  279.                                 <span aria-hidden="true">&times;</span>
  280.                             </button>
  281.                         </div>
  282.                         <div class="modal-body text-justify">
  283.                             <div class="loading text-center">
  284.                                 <img src="{{ asset('assets/contentbox/spinner.svg') }}" alt="{{ 'Loading'|trans }}">
  285.                             </div>
  286.                         </div>
  287.                     </div>
  288.                 </div>
  289.             </div>
  291.         </div>
  293.     </div>
  294. </div>
  296. <script id="basketoverviewTemplate" type="text/x-jsrender">
  297.     <div class="whitebox">
  298.         <div class="basket-sticky-grid d-lg-none" role="navigation" aria-label="Checkout acties">
  299.             <a href="https://wa.me/31621436569" target="_blank" rel="noopener noreferrer" class="basket-sticky-whatsapp" title="WhatsApp"><i class="fab fa-whatsapp" aria-hidden="true"></i> Hulp nodig?</a>
  300.             <a class="basket-sticky-cart-trigger collapsed basket-collapse" data-toggle="collapse" href="#basketcollapse" role="button" aria-expanded="false" aria-controls="basketcollapse">
  301.                 <span class="cart-info">
  302.                     <p basket-sticky-match><b><%:homeclub%> - <%:awayclub%></b></p>
  303.                     <span class="basket-sticky-price">Totaal: <%:pricetotal%></span>
  304.                 </span>
  305.                 <i class="fas fa-suitcase" aria-hidden="true"></i>
  306.             </a>
  307.         </div>
  308.         <div class="d-none d-lg-flex basketcontrols align-items-center">
  309.             <a class="collapsed basket-collapse suitcase" data-toggle="collapse" href="#basketcollapse" role="button" aria-expanded="true" aria-controls="basketcollapse"><i class="fas fa-suitcase"></i></a>
  310.             <span class="basket-sticky-price flex-grow-1 text-center"><%:pricetotal%></span>
  311.             <a class="basket-collapse ml-auto" data-toggle="collapse" href="#basketcollapse" role="button" aria-expanded="false" aria-controls="basketcollapse"><i class="fas fa-minus"></i><i class="fas fa-plus"></i></a>
  312.         </div>
  313.         <div class="collapse mt-4" id="basketcollapse">
  314.             <div class="tripdetails">
  315.                 <p><b><%:homeclub%> - <%:awayclub%></b></p>
  316.                 <p><i class="far fa-calendar-alt icon-before"></i><%:matchdate%></p>
  317.                 <p><i class="far fa-clock icon-before"></i><%:matchtime%></p>
  318.                 <p><i class="fas fa-map-marker-alt icon-before"></i><%:stadium%>, <%:location%></p>
  319.             </div>
  322.             <ul class="nav basket-tabs nav-fill mt-4" id="basketTab" role="tablist">
  323.               <li class="nav-item" role="presentation">
  324.                 <a class="nav-link active" id="match-tab" data-toggle="tab" href="#match" role="tab" aria-controls="match" aria-selected="true"><i class="fas fa-futbol"></i></a>
  325.               </li>
  326.               <li class="nav-item" role="presentation">
  327.                 <a class="nav-link" id="hotel-tab" data-toggle="tab" href="#hotel" role="tab" aria-controls="hotel" aria-selected="false"><i class="fas fa-hotel"></i></a>
  328.               </li>
  329.               <%if flight%>
  330.                   <li class="nav-item" role="presentation">
  331.                     <a class="nav-link" id="flight-tab" data-toggle="tab" href="#flight" role="tab" aria-controls="flight" aria-selected="false"><i class="fas fa-plane"></i></a>
  332.                   </li>
  333.               <%/if%>
  334.             </ul>
  335.             <div class="tab-content pt-4 pb-4" id="basketContent">
  336.                 <div class="tab-pane fade show active" id="match" role="tabpanel" aria-labelledby="match-tab">
  337.                     <div id="matchdata" >
  338.                         <%if ticketcategory%>
  339.                         <div class="d-flex">
  340.                             <i class="fal fa-ticket-alt"></i>
  341.                             <p>
  342.                                 <span><strong><%:ticketcategory%></strong></span>
  343.                             </p>
  344.                         </div>
  345.                         <%/if%>
  346.                         <div class="d-flex mt-3">
  347.                             <i class="fal fa-users"></i>
  348.                             <p>
  349.                                 <span><strong><%:numberpersons%>  <%if numberpersons == 1 %> persoon <%else%> personen <%/if%></strong></span>
  350.                             </p>
  351.                         </div>
  352.                     </div>
  353.                 </div>
  354.                 <div class="tab-pane fade" id="hotel" role="tabpanel" aria-labelledby="hotel-tab">
  355.                     <div id="hoteldata">
  356.                         <div class="d-flex">
  357.                             <i class="fal fa-hotel"></i>
  358.                             <p class="mb-0 hotel-details">
  359.                                 <span class="hotel-details-name"><strong><%:hotelname%></strong></span><br>
  360.                                 <span class="text-lowercase small hotel-details-rooms"><%for chosenaccommodation%><span class="hotel-detail-room"><%:Description%></span> <%/for%></span><br><br>
  361.                                 <span class="small hotel-details-checkin">Inchecken: <%:departdate%></span><br>
  362.                                 <span class="small hotel-details-checkout">Uitchecken: <%:returntdate%></span>
  363.                             </p>
  364.                         </div>
  365.                     <div class="d-flex mt-3">
  366.                         <i class="fal fa-utensils"></i>
  367.                         <p class="hotel-details">
  368.                             <span><strong><%for chosenaccommodation%><%for Boards%><span class="hotel-details-logies"><%:Name%> </span><%/for%><%/for%></strong></span>
  369.                         </p>
  370.                     </div>
  371.                 </div>
  372.             </div>
  373.             <%if flight%>
  374.                 <div class="tab-pane fade" id="flight" role="tabpanel" aria-labelledby="flight-tab">
  375.                     <div id="flightdata">
  376.                         <div class="d-flex" style="border-bottom: 1px solid #eee;">
  377.                             <i class="fal fa-plane-departure"></i>
  378.                             <div>
  379.                                 <p>
  380.                                     <span><strong><%:flight.outbound.departdate%></strong></span><br>
  381.                                     <span><strong><%:flight.outbound.departtime%> - <%:flight.outbound.arrivetime%></strong></span><br>
  382.                                     <span class="small"><%:flight.outbound.departairport%> - <%:flight.outbound.arriveairport%></span><br>
  383.                                     <span class="small"><%:flight.outbound.carrier%></span>
  384.                                 </p>
  385.                             </div>
  386.                         </div>
  387.                         <div class="d-flex mt-3">
  388.                             <i class="fal fa-plane-departure fa-flip-horizontal text-right"></i>
  389.                             <div>
  390.                                 <p>
  391.                                     <span><strong><%:flight.inbound.departdate%></strong></span><br>
  392.                                     <span><strong><%:flight.inbound.departtime%> - <%:flight.inbound.arrivetime%></strong></span></br>
  393.                                     <span class="small"><%:flight.inbound.departairport%> - <%:flight.inbound.arriveairport%></span><br>
  394.                                     <span class="small"><%:flight.inbound.carrier%></span>
  395.                                 </p>
  396.                             </div>
  397.                         </div>
  398.                         <div class="text-right">
  399.                             <span class="removeflight small" id="removeflight" style="color: red; cursor: pointer;">Verwijder vlucht <i class="fas fa-times" style="width: 16px; color: red; cursor: pointer;"></i></span>
  400.                         </div>
  401.                     </div>
  402.                 </div>
  403.             <%/if%>
  404.         </div>
  405.         <p class="mb-4 basket-total-title">Prijsoverzicht</p>
  406.         <p><span>Reissom per persoon:</span> <%:priceperperson%></p>
  407.         <p><span>Totaal:</span> <span class="is-color-secondary text-highlighter"><%:pricetotal%></span><span class="pl-3 small" style="line-height: 21px;">(incl. BTW)</span> </p>
  408.     </div>
  409. </div>
  410. </script>