templates/order/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Objednávka zprávy{% endblock %}
  5. {% block body %}
  6.     <section class="page-section" id="login">
  7.         <div class="container px-4 px-lg-5">
  8.             <div class="row gx-4 gx-lg-5 justify-content-center">
  9.                 <div class="col-lg-8 col-xl-6 text-center">
  10.                     <h2 class="mt-0">Objednávka Vaší zprávy</h2>
  11.                 </div>
  12.             </div>
  13.             <div class="row gx-4 gx-lg-5 justify-content-center mb-5">
  14.                 <div class="col-lg-6">
  15.                     {{ form_start(form) }}
  16.                     {{ form_errors(form) }}
  17.                         <h3 class="mt-0">Fakturační adresa</h3>
  18.                     {{ form_row(form.deliveryAddressCheckbox, { 'attr': { 'class': 'toggleDeliveryDetailsCheckbox', 'checked': 'checked' }}) }}
  19.                     {% if loggedUser %}
  20.                             {{ form_row(form.billingFirstname, { 'value': loggedUser.firstname}) }}
  21.                             {{ form_row(form.billingLastname, { 'value': loggedUser.lastname}) }}
  22.                             {{ form_row(form.billingCountry, { 'value': loggedUser.country}) }}
  23.                             {{ form_row(form.billingCity, { 'value': loggedUser.city}) }}
  24.                             {{ form_row(form.billingZipcode, { 'value': loggedUser.zipcode}) }}
  25.                             {{ form_row(form.billingStreet, { 'value': loggedUser.street}) }}
  26.                             {{ form_row(form.billingStreet2, { 'value': loggedUser.street2}) }}
  27.                             {{ form_row(form.billingEmail, { 'value': loggedUser.email}) }}
  28.                             {{ form_row(form.billingPhone, { 'value': loggedUser.phone}) }}
  30.                             <div class="deliveryDetails" style="display: none">
  31.                                 <hr class="solid" />
  32.                                 <h3 class="mt-0">Doručovací adresa</h3>
  33.                                 {{ form_row(form.deliveryFirstname) }}
  34.                                 {{ form_row(form.deliveryLastname) }}
  35.                                 {{ form_row(form.deliveryCountry) }}
  36.                                 {{ form_row(form.deliveryCity) }}
  37.                                 {{ form_row(form.deliveryZipcode) }}
  38.                                 {{ form_row(form.deliveryStreet) }}
  39.                                 {{ form_row(form.deliveryStreet2) }}
  40.                                 {{ form_row(form.deliveryEmail) }}
  41.                                 {{ form_row(form.deliveryPhone) }}
  42.                             </div>
  43.                         {% else %}
  44.                             {{ form_row(form.billingFirstname) }}
  45.                             {{ form_row(form.billingLastname) }}
  46.                             {{ form_row(form.billingCountry) }}
  47.                             {{ form_row(form.billingCity) }}
  48.                             {{ form_row(form.billingZipcode) }}
  49.                             {{ form_row(form.billingStreet) }}
  50.                             {{ form_row(form.billingStreet2) }}
  51.                             {{ form_row(form.billingEmail) }}
  52.                             {{ form_row(form.billingPhone) }}
  54.                         <div class="deliveryDetails" style="display: none">
  55.                             <hr class="solid" />
  56.                             <h3 class="mt-0">Doručovací adresa</h3>
  57.                             {{ form_row(form.deliveryFirstname) }}
  58.                             {{ form_row(form.deliveryLastname) }}
  59.                             {{ form_row(form.deliveryCountry) }}
  60.                             {{ form_row(form.deliveryCity) }}
  61.                             {{ form_row(form.deliveryZipcode) }}
  62.                             {{ form_row(form.deliveryStreet) }}
  63.                             {{ form_row(form.deliveryStreet2) }}
  64.                             {{ form_row(form.deliveryEmail) }}
  65.                             {{ form_row(form.deliveryPhone) }}
  66.                         </div>
  67.                         {% endif %}
  68.                         <hr class="solid" />
  69.                         <p>Text zprávy</p>
  70.                         {{ form_row(form.text) }}
  71.                         <hr class="solid" />
  72.                         {{ form_row(form.template) }}
  73.                         <div>
  74.                             <img width="70%" height="500" name="plugin" id="order_form_template_img" class="border border-1 mx-auto d-block">
  75.                         </div>
  76.                         <hr class="solid" />
  77.                         {{ form_row(form.deliveryDate) }}
  78.                         {{ form_row(form.code) }}
  79.                         <p id="coupon-code-text" hidden>Tady sem vložit slevu</p>
  80.                         {{ form_row(form.price, { 'value': messagePrice, 'attr': { 'class': 'disable'}} ) }}
  81.                     {{ form_widget(form) }}
  82.                     {{ form_end(form) }}
  83.                     <img id="barion_logo" class="mx-auto d-block" src="{{ asset('images/barion-smart-payment-banners-cz/barion-card-strip-cz__small.png') }}">
  84.                 </div>
  85.             </div>
  86.         </div>
  87.     </section>
  88. {% endblock %}
  90. {% block javascripts %}
  91.     <script>
  92.         $(document).ready(function () {
  93.             const template = document.getElementById('order_form_template');
  94.             document.getElementById('order_form_template_img').src = '/upload/templates/' + template.value;
  96.             const date = new Date();
  97.             $('.js-datepicker input').datepicker({
  98.                 format: "dd.mm.yyyy",
  99.                 language: "cs",
  100.                 daysOfWeekDisabled: "0,6",
  101.                 daysOfWeekHighlighted: "1,2,3,4,5",
  102.                 startDate: new Date(date.getFullYear(), date.getMonth(), date.getDay() + 14),
  103.                 todayHighlight: true
  104.             });
  106.             $('.toggleDeliveryDetailsCheckbox').change(function() {
  107.                 document.querySelector('.deliveryDetails').style.display = $(".toggleDeliveryDetailsCheckbox").is(':checked') ? 'none' : '';
  108.             });
  110.             $('#order_form_code').on('input', processChange);
  111.         });
  113.         function debounce(func, timeout = 500) {
  114.             let timer;
  115.             return (...args) => {
  116.                 clearTimeout(timer);
  117.                 timer = setTimeout(() => { func.apply(this, args); }, timeout);
  118.             };
  119.         }
  120.         function saveInput() {
  121.             const codeInput = document.getElementById('order_form_code').value;
  123.             if(codeInput) {
  124.                 $.ajax('{{ path('app_get_couponCode') }}', {
  125.                     data: {
  126.                         code: codeInput,
  127.                     },
  128.                     success: function(data) {
  129.                         if (data) {
  130.                             const codeData = JSON.parse(data);
  131.                             document.getElementById('coupon-code-text').hidden = false;
  132.                             document.getElementById('coupon-code-text').style = 'color: green;';
  134.                             const currentDate = new Date().getTime() / 1000;
  135.                             // if current date is between codeData.activeFrom and codeData.endsAt
  136.                             if (currentDate >= codeData.activeFrom.timestamp && currentDate <= codeData.endsAt.timestamp) {
  137.                                 document.getElementById('coupon-code-text').textContent = `Kupón ${codeData.code} se slevou ${codeData.value}${codeData.percentage ? '%' : ' Kč'}.`;
  139.                                 const currentPrice = document.getElementById('order_form_price').value;
  140.                                 if (codeData.percentage) {
  141.                                     document.getElementById('order_form_price').value = currentPrice - ((currentPrice / 100) * codeData.value);
  142.                                 } else {
  143.                                     document.getElementById('order_form_price').value = currentPrice - codeData.value;
  144.                                 }
  145.                             } else {
  146.                                 document.getElementById('coupon-code-text').textContent = `Kupón ${codeData.code} již není platný.`;
  147.                                 document.getElementById('coupon-code-text').style = 'color: red;';
  148.                             }
  149.                         } else {
  150.                             document.getElementById('coupon-code-text').textContent = `Kupón ${codeData.code} nebyl nalezen.`;
  151.                             document.getElementById('coupon-code-text').style = 'color: red;';
  152.                         }
  153.                     },
  154.                     error: function() {
  155.                         document.getElementById('coupon-code-text').hidden = false;
  156.                         document.getElementById('coupon-code-text').textContent = 'Kupón nebyl nalezen.';
  157.                         document.getElementById('coupon-code-text').style = 'color: red;';
  158.                     }
  159.                 });
  160.             } else {
  161.                 document.getElementById('coupon-code-text').hidden = true;
  162.             }
  163.         }
  164.         const processChange = debounce(() => saveInput());
  165.         window.addEventListener("DOMContentLoaded", (event) => {
  166.             document.getElementById('order_form_template').addEventListener('change', function() {
  167.                 document.getElementById('order_form_template_img').src = '/upload/templates/' + this.value;
  168.             });
  169.         });
  170.     </script>
  171. {% endblock %}