templates/booking/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{page.translate(locale).title}}{% endblock %}
  4. {% block meta_desc %}{{page.translate(locale).introduction[:150]|striptags|raw }}...{% endblock %}
  6. {% block stylesheets %}
  7.     <link rel="stylesheet" type="text/css" href="css/bootstrap-datepicker.css" />
  8. {% endblock %}
  10. {% block body %}
  11. {% include "components/areas/page/welcome.html.twig" %}
  13. <main class="booking-main" >
  14.     <section class="page-content section-reservation-page">
  15.         <div class="container">
  16.             <div class="reservation-page">
  17.                 <div class="flex-ctn">
  18.                 
  19.                     <div class="map">
  20.                         <div style="width: 100%; height: 100%;">
  21.                             <iframe frameborder="0" scrolling="no" marginheight="0"
  22.                                 marginwidth="0"
  23.                                 class="lazy"
  24.                                 data-src="https://maps.google.com/maps?width=100%25&amp;height=300&amp;hl=en&amp;q=Le%20Grand%20Bissargues,%2004110+(Colombine)&amp;t=k&amp;z=18&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">
  25.                             </iframe>
  26.                         </div>
  27.                     </div>
  29.                     <div class="sidebar">
  30.                         <div class="text">
  31.                             <h2>{{page.translate(locale).title}}</h2>
  32.                             <div>{{page.translate(locale).introduction|raw}}</div>
  33.                             <ul>
  34.                                 {% trans %}Vous pouvez aussi réserver en nous contactant via les coordonnés ci-dessous :{% endtrans %}
  35.                                 <li><i class="fas fa-map-marked-alt"></i> {{statics.about.address}}</li>
  36.                                 <li><i class="fas fa-phone-alt" aria-hidden="true"></i> {{statics.about.phone}}</li>
  37.                                 <li><i class="fas fa-envelope" aria-hidden="true"></i> {{statics.about.email}}</li>
  38.                             </ul>
  39.                         </div>
  41.                         <div id="accordion-tarif" class="accordion">
  42.                             <div class="card">
  43.                                 <div class="card-header" id="heading-tarif">
  44.                                     <h4 class="mb-0">
  45.                                         <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-tarif" aria-expanded="true" aria-controls="collapse-tarif">
  46.                                             <span>{% trans %}NOS TARIFS{% endtrans %}</span>
  47.                                             <i class="fas fa-plus"></i>
  48.                                         </button>
  49.                                     </h4>
  50.                                 </div>
  52.                                 <div id="collapse-tarif" class="collapse" aria-labelledby="heading-tarif" data-parent="#accordion-tarif">
  53.                                     <div class="card-body">
  54.                                         <div class="prices-ctn">
  55.                                             {% for saison in constraint.saisons %}
  56.                                                 <div class="price-item">
  57.                                                     <i class="{{saison.icon}}"></i>
  58.                                                     <h5>{{saison.translate(locale).title}}</h5>
  59.                                                     <div>
  60.                                                         <p>{% trans %}Période(s){% endtrans %} :</p>
  61.                                                         {% for period in saison.periods %}
  62.                                                         <span>{{period.startDate|date('d/m/Y')}} - {{period.endDate|date('d/m/Y')}}</span> <br>
  63.                                                         {% endfor %}
  64.                                                     </div>
  65.                                                     <span class="price-badge">{{saison.price|format(2,',',' ')}} € / {% trans %}nuit{% endtrans %}</span>
  66.                                                 </div>
  67.                                             {% endfor %}
  68.                                         </div>
  69.                                     </div>
  70.                                 </div>
  71.                             </div>
  72.                         </div>
  73.                         <div id="accordion-details" class="accordion">
  74.                             <div class="card">
  75.                                 <div class="card-header" id="heading-details">
  76.                                     <h4 class="mb-0">
  77.                                         <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-details" aria-expanded="true" aria-controls="collapse-details">
  78.                                             <span>{% trans %}A SAVOIR{% endtrans %}</span>
  79.                                             <i class="fas fa-plus"></i>
  80.                                         </button>
  81.                                     </h4>
  82.                                 </div>
  84.                                 <div id="collapse-details" class="collapse" aria-labelledby="heading-details" data-parent="#accordion-details">
  85.                                     <div class="card-body">
  86.                                         <table class="table">
  87.                                             <tbody>
  88.                                                 <tr>
  89.                                                     <th scope="row">{% trans %}Chambre{% endtrans %} :</th>
  90.                                                     <td>{% trans %}Personnes{% endtrans %} : {{constraint.maxNumber}}</td>
  91.                                                     <td>{% trans %}Surface{% endtrans %} : {{constraint.surface}} m²</td>
  92.                                                 </tr>
  93.                                                 <tr>
  94.                                                     <th scope="row">{% trans %}Arrivée & Départ{% endtrans %} :</th>
  95.                                                     <td>{% trans %}Arrivée{% endtrans %} : {{constraint.startHour|date('H:i')}}</td>
  96.                                                     <td>{% trans %}Départ{% endtrans %} : {{constraint.endHour|date('H:i')}}</td>
  97.                                                 </tr>
  98.                                                 <tr>
  99.                                                     <th scope="row">{% trans %}Conditions{% endtrans %} :</th>
  100.                                                     <td>{% trans %}Nombre de nuits min{% endtrans %} : {{constraint.minDuration}} <br> {% trans %}Nombre de nuits max{% endtrans %} : {{constraint.maxDuration}}</td>
  101.                                                     <td><a href="{{path('booking_conditions')}}" target="_blank">{% trans %}Voir nos conditions{% endtrans %} <i class="fas fa-link"></i></a></td>
  102.                                                 </tr>
  103.                                             </tbody>
  104.                                         </table>
  105.                                     </div>
  106.                                 </div>
  107.                             </div>
  108.                         </div>
  110.                         <h2>{% trans %}Formulaire de réservation{% endtrans %}</h2>
  111.                         <div class="widget widget_check_availability">  
  112.                             <ul class="nav nav-tabs">
  113.                                 <li class="step active">
  114.                                     {% trans %}Votre séjour{% endtrans %}
  115.                                 </li>
  116.                                 <li class="step">
  117.                                     {% trans %}Vos informations{% endtrans %}
  118.                                 </li>
  119.                                 <li class="step">
  120.                                     {% trans %}Détails{% endtrans %}
  121.                                 </li>
  122.                             </ul>
  124.                             <div class="check_availability">
  125.                                 {% form_theme bookingForm _self %}
  126.                                 {{form_start(bookingForm, {'attr': {'id': 'booking-ms-form'}} )}}
  128.                                 <input type="hidden" name="booking-recaptcha_response" id="booking-recaptchaResponse"/>
  129.                                 <input type="hidden" name="action" value="validate_captcha"/>
  131.                                 <div id="booking-details" class="tab fade in active">
  132.                                     <h6 class="check_availability_title">{% trans %}Détails de votre séjour{% endtrans %}</h6>
  133.                                     <div class="">
  134.                                         <div class="check_availability-field">
  135.                                             <div class="flex-label">
  136.                                                 {{form_label(bookingForm.startDate)}}
  137.                                                 {{form_label(bookingForm.endDate)}}
  138.                                             </div>
  139.                                             <div class="input-group input-daterange d-flex" id="datepicker">
  140.                                                 {{form_widget(bookingForm.startDate)}}
  141.                                                 <span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
  142.                                                 {{form_widget(bookingForm.endDate)}}
  143.                                             </div>
  144.                                         </div>
  145.                                     </div>
  146.                                     <div id="long-stay" class="check_availability-field" style="display:none">
  147.                                         <p class="alert alert-success">{% trans %}Vous bénéficiez de{% endtrans %} <b><span id="discount">-{{constraint.longStayDiscount * 100}}%</span></b> {% trans %}pour séjour de 7 nuits ou plus{% endtrans %} !</p>
  148.                                     </div>
  149.                                     <div class="row">
  150.                                          <div class="check_availability-field col-md-6 col-xs-12">
  151.                                             {{form_row(bookingForm.number, {'constraint' : constraint})}}
  152.                                         </div>
  153.                                         <div class="check_availability-field col-md-6 col-xs-12">
  154.                                             {{form_row(bookingForm.children, {'constraint' : constraint})}}
  155.                                         </div>
  156.                                     </div>
  157.                                     <div id="calcul" class="check_availability-field alert alert-info" style="display:none;">
  158.                                         <p class="nigth-count">
  159.                                             <span id="nights">...</span>{% trans %}nuits{% endtrans %} {% trans %}à{% endtrans %} <b><span id="price">...</span> €</b>/{% trans %}nuit{% endtrans %}
  160.                                         </p>
  161.                                         <p id="housework-ctn" class="d-none">
  162.                                             + {% trans %}Ménage{% endtrans %} : <span id="housework">...</span> €
  163.                                         </p>
  164.                                         <p>
  165.                                             + {% trans %}Taxe de séjour{% endtrans %} : <span id="staytax">...</span> €
  166.                                         </p>
  167.                                         <p>
  168.                                             {% trans %}Prix/nuit{% endtrans %} : <span id="dayprice">...</span> € {% trans %}soit{% endtrans %}, <span id="peopleprice"></span> € {% trans %}par personne{% endtrans %}.
  169.                                         </p>
  170.                                         <p class="amount-count">
  171.                                             {% trans %}Total{% endtrans %} : <span id="amount">...</span> € 
  172.                                         </p>
  173.                                     </div>
  174.                                     <div class="form-step-action">
  175.                                         <button type="button" class="form-prev prevBtn" id="prevBtn">
  176.                                             <i class="fas fa-chevron-left"></i> {% trans %}Précédent{% endtrans %}
  177.                                         </button>
  178.                                         <button type="button" class="form-next nextBtn" id="nextBtn" data-locale="{{locale}}">
  179.                                             {% trans %}Suivant{% endtrans %} <i class="fas fa-chevron-right"></i>
  180.                                         </button>
  181.                                     </div>
  182.                                 </div>
  183.                                
  184.                                 <div id="booker-infos" class="tab fade in">
  185.                                     <h6 class="check_availability_title">{% trans %}Vos informations{% endtrans %}</h6>
  186.                                     <div class="check_availability-field">
  187.                                         {{form_row(bookingForm.gender)}}
  188.                                     </div>
  189.                                    <div class="form-group-flex">
  190.                                         <div class="check_availability-field">
  191.                                             {{form_row(bookingForm.firstName)}}
  192.                                         </div>
  193.                                         <div class="check_availability-field">
  194.                                             {{form_row(bookingForm.lastName)}}
  195.                                         </div>
  196.                                     </div>
  197.                                     <div class="form-group-flex">
  198.                                         <div class="check_availability-field">
  199.                                             {{form_row(bookingForm.email)}}
  200.                                         </div>
  201.                                         <div class="check_availability-field">
  202.                                             {{form_row(bookingForm.phone)}}
  203.                                         </div>
  204.                                     </div>
  205.                                     <div class="check_availability-field">
  206.                                         {{form_row(bookingForm.comment)}}
  207.                                     </div>
  208.                                     <div class="form-step-action">
  209.                                         <button type="button" class="form-prev prevBtn" id="prevBtn" >
  210.                                             <i class="fas fa-chevron-left"></i> {% trans %}Précédent{% endtrans %}
  211.                                         </button>
  212.                                         <button type="button" class="form-next nextBtn" id="nextBtn">
  213.                                             {% trans %}Suivant{% endtrans %} <i class="fas fa-chevron-right"></i>
  214.                                         </button>
  215.                                     </div>
  216.                                 </div>
  218.                                 <div id="payment-details" class="tab fade in">
  219.                                     <h6 class="check_availability_title">{% trans %}Détails{% endtrans %}</h6>
  220.                                     <div class="recap">
  221.                                         <p><b>{% trans %}Récapitulatif{% endtrans %} :</b></p>
  222.                                         <p> 
  223.                                             {% trans %}Location du{% endtrans %} <b><span class="recap-start"></span></b> {% trans %}au{% endtrans %} <b><span class="recap-end"></span></b>.
  224.                                             <br>
  225.                                             {% trans %}Soit{% endtrans %} <b><span class="recap-days"></span></b> {% trans %}nuit.s pour un montant de{% endtrans %} <b><span class="recap-price"></span>€</b>.
  226.                                         </p>    
  227.                                         <label><b>{% trans %}Modalités{% endtrans %} :</b></label>
  228.                                         <p>{% trans %}Un dépôt de garantie de{% endtrans %} <b>{{constraint.deposit / 100}}€</b>.</p>
  229.                                         <p>{% trans %}Un acompte de{% endtrans %} <b><span class="recap-advance"></span>€</b>.</p>
  230.                                         <p>{% trans %}La taxe de séjour incluse dans le montant total.{% endtrans %}</p>
  231.                                         <p>{% trans %}Le ménage est inclu dans le montant total.{% endtrans %}</p>
  232.                                         <p><em>{% trans %}Plus de détails dans le mail récapitulatif ou dans nos{% endtrans %} <b><a href="{{path('booking_conditions')}}" target="_blank">{% trans %}CGV{% endtrans %}</a></b></em>.</p>
  233.                                     </div>
  234.                                     <div class="check_availability-field">
  235.                                         {{form_row(bookingForm.paymentMethod)}}
  236.                                     </div>
  237.                                     <div class="check_availability-field">
  238.                                         {{form_row(bookingForm.approval)}}
  239.                                     </div>
  240.                                     <div class="check_availability-field">
  241.                                         {{form_row(bookingForm.rgpd)}}
  242.                                     </div>
  243.                                     <div class="check_availability-field">
  244.                                         {{form_row(bookingForm.amount)}}
  245.                                     </div>
  246.                                     <div class="form-actions">
  247.                                         <button type="button" class="form-prev prevBtn" id="prevBtn">
  248.                                             <i class="fas fa-chevron-left"></i> {% trans %}Précédent{% endtrans %} 
  249.                                         </button>
  250.                                         <button type="submit" name="submit" class="read-more nextBtn" id="nextBtn" />
  251.                                             {% trans %}Je réserve {% endtrans %}
  252.                                             <i class="fas fa-paper-plane"></i>
  253.                                         </button> 
  254.                                     </div>
  255.                                 </div>
  256.                                 
  257.                                 {{form_end(bookingForm)}}
  258.                             </div>
  259.                         </div>
  260.                     </div>
  261.                 </div>
  262.             </div>
  263.             </section>
  264.         </div>
  265.     </section>
  266. </main>
  268. {% endblock %}
  270. {% block javascripts %}
  271.     <script src="js/msform.js"></script>
  272.     <script src="js/ajaxForm.js"></script>
  273.     <script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
  274.     <script>
  275.         $(document).ready(function(){
  276.             
  277.             {% if locale == "fr" %}
  278.                 $.fn.datepicker.dates['fr'] = {
  279.                     days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
  280.                     daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
  281.                     daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
  282.                     months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
  283.                     monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
  284.                     today: "Aujourd'hui",
  285.                     monthsTitle: "Mois",
  286.                     clear: "Effacer",
  287.                 };
  288.             {% endif %}
  290.             {% if locale == "es" %}
  291.                 $.fn.datepicker.dates['es'] = {
  292.                     days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
  293.                     daysShort: ["Dom", "Lun", "Mar", "Mié", "Juv", "Vie", "Sáb"],
  294.                     daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sá"],
  295.                     months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
  296.                     monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
  297.                     today: "Hoy",
  298.                     monthsTitle: "Mes",
  299.                     clear: "Borrar",
  300.                 };
  301.             {% endif %}
  302.             
  303.             {% if locale == "de" %}
  304.                 $.fn.datepicker.dates['de'] = {
  305.                     days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
  306.                     daysShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
  307.                     daysMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
  308.                     months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
  309.                     monthsShort: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
  310.                     today: "Heute",
  311.                     monthsTitle: "Monate",
  312.                     clear: "Löschen",
  313.                 };
  314.             {% endif %}
  316.             $('#datepicker').each(function(){
  317.                 $(this).datepicker({
  318.                     format:'dd/mm/yyyy',
  319.                     startDate: '+{{constraint.blockedDaysAfterNow}}d',
  320.                     language : '{{locale}}',
  321.                     datesDisabled: [
  322.                         {% for day in constraint.notAvailableDays %}
  323.                             "{{ day.format('d/m/Y') }}",
  324.                         {% endfor %}
  325.                     ],
  326.                     endDate : '{{endDate|date('d/m/Y')}}'
  327.                 });
  328.             });
  331.             // if ($('#booking_startDate').val() != "") {
  332.             //     calculateAmount();
  333.             // }
  335.             $('#booking_startDate, #booking_endDate, #booking_number, #booking_children').on('change', calculateAmount);
  336.             $('#booking_number, #booking_children').on('keyup', calculateAmount);
  337.         });
  339.         function calculateAmount(){
  341.             const endDate   = new Date( $('#booking_endDate').val().replace(/(\d+)\/(\d+)\/(\d{4})/, '$3-$2-$1') );
  342.             const startDate = new Date( $('#booking_startDate').val().replace(/(\d+)\/(\d+)\/(\d{4})/, '$3-$2-$1') );
  344.             if (startDate && endDate && $('#booking_endDate').val() != "" && $('#booking_number').val() != "") {
  346.                 if (startDate < endDate) {
  348.                     $.ajax({
  349.                         type: 'POST',
  350.                         url: "/booking/get-saison?start="+startDate.toLocaleDateString("en-US")+"&end="+endDate.toLocaleDateString("en-US")+"",
  351.                         dataType: 'json'
  352.                     })
  353.                     .done(function (data) {
  355.                         // Calculs
  356.                         const DAY_TIME = 24 * 60 * 60 * 1000;
  357.                         const interval = endDate.getTime() - startDate.getTime();
  358.                         const days = interval / DAY_TIME;
  360.                         const amount = days * parseInt(data.price);
  362.                         // Nombre de nuits
  363.                         if (days > 1) {
  364.                             $('#nights').text(days);
  365.                         }else{
  366.                             $('#nights').text(days);
  367.                         }
  369.                         // Ménage
  370.                         var housework = {{constraint.housework / 100}};
  371.                         if (housework > 0) {
  372.                             $('#housework').show();  
  373.                             $('#housework').text(housework);  
  374.                         }
  376.                         // Nombre 
  377.                         var number = $('#booking_number').val();
  379.                         // Children 
  380.                         var children = $('#booking_children').val();
  381.                         if (children == "") {
  382.                             children = 0;
  383.                         }
  385.                         // Tax de séjour
  386.                         var stayTax = Math.ceil((({{constraint.stayTax}} / 100) * (number - children) * days));
  388.                         // Prix par nuit
  389.                         var dayPrice = Math.ceil(data.price + ((stayTax + housework) / days));
  391.                         // Prix final
  392.                         var totalAmount = Math.ceil(amount + housework + stayTax);
  394.                         // Accompte
  395.                         var advance = totalAmount * {{constraint.advancePayment}};
  399.                         // Réduction
  400.                         if (days >= 7 && {{constraint.longStayDiscount}} > 0) {
  401.                             var discountAmount = Math.ceil(totalAmount / (1 + {{constraint.longStayDiscount}}));
  403.                             $('#long-stay').show(100);
  404.                             $('#amount').html(discountAmount + ' € <span style="text-decoration:line-through; margin-left:5px; font-size:12px;">'+totalAmount+'</span>');
  405.                             $('.recap-price').text(discountAmount);
  407.                         // Pas reduction Reduction
  408.                         }else{
  410.                             $('#long-stay').hide(100);
  411.                             $('#amount').text(totalAmount);
  412.                             $('.recap-price').text(totalAmount);
  413.                         }
  416.                         $('#calcul').show(100);
  417.                         $('#staytax').text(stayTax);
  418.                         $('#price').text(data.price);
  419.                         $('#dayprice').text(dayPrice);
  420.                         $('#peopleprice').text(Math.ceil(dayPrice / number));
  421.                         // $('#saison').text(data.title);
  423.                         $('.recap-start').text($('#booking_startDate').val());
  424.                         $('.recap-end').text($('#booking_endDate').val());
  425.                         $('.recap-days').text(days);
  426.                         $('.recap-advance').text(advance);
  428.                         $('.error-date').hide(100);
  429.                     });
  430.                 }else{
  431.                     $('#booking_endDate').parent().append('<div class="error-date alert alert-danger"><small>Vous ne pouvez pas partir avant d\'être arrivé</small></div>')
  432.                 }
  433.             }
  434.         }
  435.     </script>
  437. {% endblock %}
  440. {% block _booking_number_label %}
  441.     <label for="booking_number" class="required">{% trans %}Nombre de personnes{% endtrans %} ({{constraint.maxNumber}} max)</label>
  442. {% endblock %}
  443. {% block _booking_number_widget %}
  444.     <input type="number" id="booking_number" name="booking[number]" required="required" min="1" max="{{constraint.maxNumber}}" step="1" placeholder="{% trans %}Combien de personnes ?{% endtrans %}" class="form-control">
  445. {% endblock %}
  448. {% block _booking_children_label %}
  449.     <label for="booking_children" class="required">{% trans %}Dont enfant(s) (-18 ans){% endtrans %}</label>
  450. {% endblock %}
  451. {% block _booking_children_widget %}
  452.     <input type="number" id="booking_children" name="booking[children]" min="1" max="{{(constraint.maxNumber - 1)}}" step="1" placeholder="{% trans %}Combien d'enfants ?{% endtrans %}" class="form-control">
  453. {% endblock %}