{extends "index.tpl"}

{block content}
   <div class="page-package-verification">
       {block "page-content"}{/block}

       {get_smarty assign='smarty_object'}

       {foreach $body.deliveries as $id => $delivery}
           {$delivery->getInitTemplate($smarty_object)}
       {/foreach}

      <div class="form-verification">
         <form method="post" action="{path('ageVerifyPackage')}" id="cart">
             {block "form"}
                <h5>Dorucovaci adresa</h5>
                Ulice a čp:
                <input type="text" name="data[street]" value="{$body.user.street}">
                <br>
                Mesto:
                <input type="text" name="data[city]" value="{$body.user.city}">
                <br>
                PSC:
                <input type="text" name="data[zip]" value="{$body.user.zip}">
                <br>
                Tel:
                <input type="text" name="data[phone]" value="{$body.user.phone}">
                <br>
                Email:
                <input type="text" name="data[email]" value="{$body.user.email}">
                <br>
                Datum narození:
                <input type="date" name="data[birthdate]" value="{$body.user.birthdate}">
                <div data-box="deliveries" class="deliveries-box">
                    {include "ordering/ordering.delivery.deliveries.tpl" deliveries=$view->getDeliveries() availability=1}
                </div>
                <div data-box="payments" class="payments-box" data-reload="payments">
                    {if $body.delivery_id}
                        {include "ordering/ordering.delivery.payments.tpl" payments=$view->getPayments()}
                    {/if}
                </div>
                <input type="submit" value="Odeslat" name="submitOrder">
             {/block}
         </form>
      </div>
   </div>
{/block}

{block "body" append}
   <script>
       {literal}
       function reloadAgeVerifyParts(id_delivery) {
          let form = $("#cart");
          const data = form.serializeArray();
          const parts = $('[data-reload]');

          $.post(window.location.href, data, (data) => {
             const newHtml = wpj.domUtils.parseHtml(data);
             wpj.domUtils.crossFadeParts(parts, newHtml);
          }, 'html');

          $('.delivery_description').hide();
          const id = '#delivery_description_' + id_delivery
          $(id).show();
       }

       wpj.onReady.push(() => {
          let form = $("#cart");
          form.find('input:radio').on('change', (e) => {
                reloadAgeVerifyParts(e.target.value);
             }
          );

          form.find('input[type=hidden]').on('change', (e) => {
             const match = e.target.name.match(/delivery_data\[(\d+)\]\[.*\]/);
             const id = match ? match[1] : null;
             reloadAgeVerifyParts(id);
          });

          form.find('input[name=delivery_id]').on('click', (e) => {
             const input = $(e.currentTarget)
             form.trigger("cartdeliverychange", {delivery_id: input.val()})
          })

          form.on('submit', (e) => {
             var $checked_delivery_wrapper = form.find('[name="delivery_id"]:checked').closest('[data-cart="item"]');
             if ($checked_delivery_wrapper.find('[data-delivery-validity_check]').length) {
                var $invalid = $checked_delivery_wrapper.find('[data-delivery-invalid]');

                if ($invalid.length) {
                   window.alert($invalid.data('delivery-invalid'));
                   return false;
                }
             }
          })
       });
       {/literal}
   </script>
{/block}

