templates/front-office/booking/form.html.twig line 1

Open in your IDE?
  1. {#
  2. Controller : App\FrontOffice\BookingController
  3. Route : "booking_form"
  4. URI : "/reservation"
  5. #}
  7. {% extends "front-office/_base.html.twig" %}
  9. {% block script %}
  10.     <script src="{{ asset('assets/js/reservation.js') }}"></script>
  11. {% endblock %}
  13. {% block content %}
  16.     <section class="form-bg-page">
  18.         {# Check if there is really products in basket #}
  19.         {% set check = false %}
  20.         {% for key, c in app.request.cookies.all %}
  21.             {% if key|split("-")|length > 1 %}
  22.                 {% set check = true %}
  23.             {% endif %}
  24.         {% endfor %}
  26.         {% if check %}
  28.             <div class="form-resa">
  29.                 <h1>votre demande de reservation</h1>
  31.                 <form class="form-content meli-section-90" action="#" method="POST">
  32.                     <section class="section-info">
  33.                         <div class="cercle-bleu-content meli-between-center">
  34.                             <h2>1</h2>
  35.                             <p>vous etes<span class="mention">*Mentions obligatoires</span></p>
  36.                         </div>
  38.                         <div class="info-resp meli-section-90">
  39.                             <div class="child-info-resp meli-between-center">
  40.                                 <div class="form-div meli-flex-col">
  41.                                     <label for="resa-name" class="form-label">nom*</label>
  42.                                     <input type="text" name="resa-name" class="form-input">
  43.                                 </div>
  44.                                 <div class="form-div meli-flex-col">
  45.                                     <label for="resa-prenom" class="form-label">prenom*</label>
  46.                                     <input type="text" name="resa-firstname" class="form-input">
  47.                                 </div>
  48.                             </div>
  49.                             <div class="child-info-resp meli-between-center">
  50.                                 <div class="form-div meli-flex-col">
  51.                                     <label for="resa-tel" class="form-label">telephone*</label>
  52.                                     <input type="text" name="resa-tel" class="form-input">
  53.                                 </div>
  54.                                 <div class="form-div meli-flex-col">
  55.                                     <label for="resa-email" class="form-label">adresse e-mail*</label>
  56.                                     <input type="email" name="resa-email" class="form-input">
  57.                                 </div>
  58.                             </div>
  59.                             <div class="form-local meli-width-100">
  60.                                 <div class="form-adresse meli-width-100 meli-flex-col ">
  61.                                     <label for="resa-adresse" class="form-label">adresse*</label>
  62.                                     <input type="text" name="resa-address" class="form-input">
  63.                                 </div>
  64.                                 <div class="child-info-resp meli-width-45 meli-between-center">
  65.                                     <div class="form-cp form-local-div meli-width-30 meli-flex-col">
  66.                                         <label for="resa-code" class="form-label">code postal*</label>
  67.                                         <input type="text" name="resa-code" class="form-input">
  68.                                     </div>
  69.                                     <div class="form-local-div meli-width-60 meli-flex-col">
  70.                                         <label for="resa-city" class="form-label">ville*</label>
  71.                                         <input type="text" name="resa-city" class="form-input">
  72.                                     </div>
  73.                                 </div>
  74.                             </div>
  75.                         </div>
  76.                     </section>
  78.                     <section class="section-location">
  79.                         <div class="cercle-bleu-content meli-between-center">
  80.                             <h2>2</h2>
  81.                             <p>vous souhaitez louer</p>
  82.                         </div>
  83.                         <div class="errors">
  84.                             <p class="error-p"></p>
  85.                         </div>
  86.                         <div class="meli-section-90">
  87.                             <div class="title-form-loc meli-between-center">
  88.                                 <h2>designation</h2>
  89.                                 <h2>dates</h2>
  90.                                 <h2>prix</h2>
  91.                             </div>
  93.                             {% set products = app.request.cookies.all %}
  95.                             <div id="loc-section"  class="group-line-loc">
  96.                                 {% for key, p in products %}
  97.                                     {% if key|split("-")|length > 1 %}
  98.                                         {% set product = key|split("-")[0] %}
  99.                                         {% set id = key|split("-")[1] %}
  102.                                             <div  class="line-loc meli-between-center js-field"
  103.                                                   id="{{ product }}-{{ id }}"
  104.                                                   data-id="{{ id }}"
  105.                                                   data-price=""
  106.                                                   data-tva=""
  107.                                                   data-type="{{ product }}"
  108.                                                   data-url="{{ path('ajax_reservation',{'product':product,'id':id}) }}"
  109.                                             >
  110.                                                 <div class="designation meli-width-30">
  111.                                                     <p id="js-name-view-{{ product }}-{{ id }}"></p>
  112.                                                     <input type="hidden" id="js-name-hidden-{{ product }}-{{ id }}" name="{{ product }}-{{ id }}" value="">
  113.                                                     <div class="delete-line"
  114.                                                         data-url="{{ path('ajax_cookie_remove',{'product':product,'id':id}) }}"
  115.                                                     >
  116.                                                         <P>retirer</P>
  117.                                                     </div>
  118.                                                 </div>
  120.                                                 <div class="date-loc">
  121.                                                     <div class="start-date meli-between-center">
  122.                                                         <p>Du</p>
  123.                                                         <div class="days-loc">
  124.                                                             <select  class="border-date" name="date-start-day-{{ product }}-{{ id }}"
  125.                                                                      id="date-start-day-{{ product }}-{{ id }}" required>
  126.                                                                 <option disabled selected value="">JJ</option>
  127.                                                                 {% for i in 1..31 %}
  128.                                                                     <option value="{{ i }}">{{ i }}</option>
  129.                                                                 {% endfor %}
  130.                                                             </select>
  131.                                                         </div>
  132.                                                         <div class="month-loc">
  133.                                                             <select class="border-date" name="date-start-month-{{ product }}-{{ id }}"
  134.                                                                     id="date-start-month-{{ product }}-{{ id }}" required>
  135.                                                                 <option disabled selected value="">MM</option>
  136.                                                                 {% for i in 1..12 %}
  137.                                                                     <option value="{{ i }}">{{ i }}</option>
  138.                                                                 {% endfor %}
  139.                                                             </select>
  140.                                                         </div>
  141.                                                         <div class="years-loc">
  142.                                                             <select name="date-start-year-{{ product }}-{{ id }}"
  143.                                                                     class="border-date"
  144.                                                                     id="date-start-year-{{ product }}-{{ id }}" required>
  145.                                                                 <option disabled selected value="">AAAA</option>
  146.                                                                 {% for date in 0..5 %}
  147.                                                                     {% set year = "now"|date_modify("+"~date~" year")|date('Y') %}
  148.                                                                     <option value="{{ year }}">{{ year }}</option>
  149.                                                                 {% endfor %}
  150.                                                             </select>
  151.                                                         </div>
  152.                                                     </div>
  154.                                                     <div class="finish-date meli-between-center ">
  155.                                                         <p>Au</p>
  156.                                                         <div class="days-loc">
  157.                                                             <select class="border-date"
  158.                                                                     name="date-end-day-{{ product }}-{{ id }}"
  159.                                                                     id="date-end-day-{{ product }}-{{ id }}" required>
  160.                                                                 <option disabled selected value="">JJ</option>
  161.                                                                 {% for i in 1..31 %}
  162.                                                                     <option value="{{ i }}">{{ i }}</option>
  163.                                                                 {% endfor %}
  164.                                                             </select>
  165.                                                         </div>
  166.                                                         <div class="month-loc">
  167.                                                             <select class="border-date"
  168.                                                                     name="date-end-month-{{ product }}-{{ id }}"
  169.                                                                     id="date-end-month-{{ product }}-{{ id }}" required>
  170.                                                                 <option disabled selected value="">MM</option>
  171.                                                                 {% for i in 1..12 %}
  172.                                                                     <option value="{{ i }}">{{ i }}</option>
  173.                                                                 {% endfor %}
  174.                                                             </select>
  175.                                                         </div>
  176.                                                         <div class="years-loc">
  177.                                                             <select name="date-end-year-{{ product }}-{{ id }}" class="border-date"
  178.                                                                     id="date-end-year-{{ product }}-{{ id }}" required>
  179.                                                                 <option disabled selected value="">AAAA</option>
  180.                                                                 {% for date in 0..5 %}
  181.                                                                     {% set year = "now"|date_modify("+"~date~"year")|date('Y') %}
  182.                                                                     <option value="{{ year }}">{{ year }}</option>
  183.                                                                 {% endfor %}
  184.                                                             </select>
  185.                                                         </div>
  186.                                                     </div>
  187.                                                 </div>
  189.                                                 <div class="price-line meli-width-20">
  190.                                                     <p><span id="js-price-view-{{ product }}-{{ id }}"></span> €/jour</p>
  191.                                                 </div>
  192.                                             </div>
  193.                                     {% endif %}
  194.                                 {% endfor %}
  195.                             </div>
  196.                         </div>
  197.                     </section>
  198.                     <section class="last-section">
  199.                         <div class="cercle-bleu-content meli-between-center">
  200.                             <h2>3</h2>
  201.                             <p>vous y etes presque!</p>
  202.                         </div>
  203.                         <div class="footer-form meli-between-center">
  205.                             <p class="meli-width-50">Les studios P vous propose une location<br>pour un motant total de :</p>
  207.                             <div class="total-loc meli-width-20">
  208.                                 <h2>total</h2>
  209.                                 <p><span id="price-tot">-</span> €</p>
  210.                             </div>
  211.                             <div class="btn-envoyer">
  212.                                 <button id="submit-btn" type="submit">envoyer</button>
  213.                             </div>
  214.                         </div>
  215.                     </section>
  216.                 </form>
  217.             </div>
  219.         {% else %}
  221.             <div id="empty-basket">
  222.                 <h1>Vous n'avez rien mis dans votre panier</h1>
  223.             </div>
  224.         {% endif %}
  225.     </section>
  226. {% endblock %}