{block 'configuration'}
<div class="form-group form-group-flex">
   <div class="col-md-2 control-label">
      <label>{'sourceUrl'|translate}</label>
   </div>
   <div class="col-md-10">
      <input class="form-control input-sm" type="text" name="data[source_url]"
             value="{$body.data.source_url}" required>
   </div>
</div>

<div id="configurationGeneric" class="tab-pane fade in boxFlex">
   <div class="form-group">
      <div class="col-md-2 control-label">
         <label>{'convertToDefaultCurrency'|translate}</label>
         <a class="help-tip" data-toggle="tooltip" title=""
            data-original-title="{'convertToDefaultCurrencyInfo'|translate}">
            <i class="bi bi-question-circle"></i>
         </a>
      </div>
      <div class="col-md-1">
          {print_toggle nameRaw="data[configuration][prices_to_default_currency]" value=$body.data.configuration.prices_to_default_currency}
      </div>
   </div>

   <div class="form-group">
      <div class="col-md-2 control-label">
         <label>{'ignoreOnMappingNotFound'|translate}</label>
         <a class="help-tip" data-toggle="tooltip" title=""
            data-original-title="{'ignoreOnMappingNotFoundTooltip'|translate}">
            <i class="bi bi-question-circle"></i>
         </a>
      </div>
      <div class="col-md-1">
         {print_toggle nameRaw="data[configuration][ignore_on_mapping_not_found]" value=$body.data.configuration.ignore_on_mapping_not_found}
      </div>
   </div>

   <div class="row">
      <div class="col-md-12">
         <h1 class="h4 main-panel-title">{'mappingTitle'|translate}</h1>
      </div>
   </div>

   <div class="infobox">
      {'genericMappingInfo'|translate nofilter}
   </div>

   {get_contexts language=1 assign='contexts'}

   <div class="row bottom-space">
      <div class="col-md-3">
         <a href="#" data-mapping="add" class="btn btn-success btn-block"><span
               class="glyphicon glyphicon-plus"></span>&nbsp;Přidat mapování</a>
      </div>
   </div>

   <div id="mapping-groups" class="panel-group panel-group-lists ui-sortable">
      {foreach array_merge([[]], $body.data.configuration.mappingGroups|default:[]) as $key => $group}
         <div {if $key == 0}data-mapping="template" style="display: none" {else}data-mapping="item" style="margin-bottom: 20px"{/if}>
            <div class="panel">
               <div class="panel-heading">
                  <div class="row">
                     <div class="col-md-12">
                        <a class="btn-sm btn btn-danger  pull-right" data-mapping="delete">
                           <span class="glyphicon glyphicon-remove"></span>
                        </a>
                     </div>
                  </div>
               </div>
            </div>

            <div class="panel-group panel-group-lists panel">
               <div class="panel-body border" style="border:1px solid rgba(0, 0, 0, 0.1);border-top:none;border-radius:3px;">
                  <div class="row bottom-space">
                     <div class="col-md-1 control-label">
                        <label>{'groupName'|translate}</label>
                     </div>
                     <div class="col-md-3">
                        <input class="form-control input-sm" type="text"
                               name="data[configuration][mappingGroups][{$key}][name]"
                               value="{$group.name}">
                     </div>
                  </div>

                  <div class="row">
                     <div class="col-md-12">
                        <h1 class="h6"><strong>{'settings'|translate}</strong></h1>
                        <hr>
                     </div>
                  </div>

                  <div class="row bottom-space">
                     <div class="col-md-1 control-label">
                        <label>{'filter'|translate}</label>
                        <a class="help-tip" data-toggle="tooltip" title=""
                           data-original-title="{'filterTooltip'|translate}">
                           <i class="bi bi-question-circle"></i>
                        </a>
                     </div>
                     <div class="col-md-3">
                        <input class="form-control input-sm" type="text"
                               name="data[configuration][mappingGroups][{$key}][filter][tag]"
                               value="{$group.filter.tag}" placeholder="{'filterTag'|translate}">
                     </div>
                     <div class="col-md-3">
                        <input class="form-control input-sm" type="text"ß
                               name="data[configuration][mappingGroups][{$key}][filter][value]"
                               value="{$group.filter.value}" placeholder="{'filterValues'|translate}">
                     </div>
                  </div>

                  {ifmodule TRANSLATIONS}
                     {if empty($group.settings.id_language)}
                        {$group.settings.id_language = $contexts.language->getDefaultId()}
                     {/if}
                     <div class="row">
                        <div class="col-md-1 control-label">
                           <label>{'orderLanguage'|translate}</label>
                        </div>
                        <div class="col-md-3">
                           <select name="data[configuration][mappingGroups][{$key}][settings][id_language]" class="selecter"
                                   data-autocomplete="languages" data-preload="languages">
                              <option value="{$group.settings.id_language}" selected>{$group.settings.id_language}</option>
                           </select>
                        </div>
                     </div>
                  {/ifmodule}

                  <div class="row">
                     <div class="col-md-12">
                        <h1 class="h6"><strong>{'deliveries'|translate}</strong></h1>
                        <hr>
                     </div>
                  </div>

                  {* Mapovani doprav pro danou skupinu *}
                  <div data-mapping-form="deliveryForm_{$key}">
                     {$deliveries = $group.deliveries}
                     {if empty($deliveries)}
                        {$deliveries = []}
                     {/if}

                     {foreach array_merge([[]], $deliveries) as $dKey => $delivery}
                        <div id="deliveryRow_{$dKey}" {if $dKey == 0}data-form-new="" style="display: none" {else}data-form-item=""{/if}>
                           <div class="row bottom-space">
                              <div class="col-md-4 col-md-offset-1">
                                 <input class="form-control input-sm" type="text"
                                        name="data[configuration][mappingGroups][{$key}][deliveries][{$dKey}][value]"
                                        value="{$delivery.value}" placeholder="{'value'|translate}">
                              </div>
                              <div class="col-md-3">
                                 <select name="data[configuration][mappingGroups][{$key}][deliveries][{$dKey}][country]" class="selecter"
                                         data-autocomplete="countries" data-preload="countries">
                                    <option value="">{'allCountries'|translate}</option>
                                    {if $delivery.country}
                                       <option value="{$delivery.country}" selected>{$delivery.country}</option>
                                    {/if}
                                 </select>
                              </div>
                              <div class="col-md-3">
                                 <select name="data[configuration][mappingGroups][{$key}][deliveries][{$dKey}][id_delivery]" class="selecter"
                                         data-autocomplete="deliveries" data-preload="deliveries" {'selectDelivery'|translate}>
                                    {if $delivery.id_delivery}
                                       <option value="{$delivery.id_delivery}" selected>{$delivery.id_delivery}</option>
                                    {/if}
                                 </select>
                              </div>
                              <div class="col-md-1">
                                 <a class="btn-sm btn btn-danger" data-form-delete>
                                    <input class="hidden" type="checkbox" name="data[configuration][mappingGroups][{$key}][deliveries][{$dKey}][delete]"/>
                                    <span class="glyphicon glyphicon-remove"></span>
                                 </a>
                              </div>
                           </div>
                        </div>
                     {/foreach}

                     <div class="row bottom-space">
                        <div class="col-md-3">
                           <a href="#" data-form-add="">
                              <span class="glyphicon glyphicon-plus"></span>&nbsp;Přidat párování
                           </a>
                        </div>
                     </div>

                     {if $key != 0}
                        <script>
                           initForm({
                              selector: '[data-mapping-form="deliveryForm_{$key}"]',
                              beforeAdd: function (original) {
                                 var $addedItem = original();
                                 window.preloadAutocompletes($addedItem);
                              }
                           });
                        </script>
                     {/if}
                  </div>

                  <div class="row">
                     <div class="col-md-12">
                        <h1 class="h6"><strong>{'payments'|translate}</strong></h1>
                        <hr>
                     </div>
                  </div>

                  {* Mapovani plateb pro danou skupinu *}
                  <div data-mapping-form="paymentForm_{$key}">
                     {$payments = $group.payments}
                     {if empty($payments)}
                        {$payments = []}
                     {/if}

                     {foreach array_merge([[]], $payments) as $pKey => $payment}
                        <div id="paymentRow_{$pKey}" {if $pKey == 0}data-form-new="" style="display: none" {else}data-form-item=""{/if}>
                           <div class="row bottom-space">
                              <div class="col-md-4 col-md-offset-1">
                                 <input class="form-control input-sm" type="text"
                                        name="data[configuration][mappingGroups][{$key}][payments][{$pKey}][value]"
                                        value="{$payment.value}" placeholder="{'value'|translate}">
                              </div>
                              <div class="col-md-3">
                                 <select name="data[configuration][mappingGroups][{$key}][payments][{$pKey}][country]" class="selecter"
                                         data-autocomplete="countries" data-preload="countries">
                                    <option value="">{'allCountries'|translate}</option>
                                    {if $payment.country}
                                       <option value="{$payment.country}" selected>{$payment.country}</option>
                                    {/if}
                                 </select>
                              </div>
                              <div class="col-md-3">
                                 <select name="data[configuration][mappingGroups][{$key}][payments][{$pKey}][id_payment]" class="selecter"
                                         data-autocomplete="payments" data-preload="payments" {'selectDelivery'|translate}>
                                    {if $payment.id_payment}
                                       <option value="{$payment.id_payment}" selected>{$payment.id_payment}</option>
                                    {/if}
                                 </select>
                              </div>
                              <div class="col-md-1">
                                 <a class="btn-sm btn btn-danger" data-form-delete>
                                    <input class="hidden" type="checkbox" name="data[configuration][mappingGroups][{$key}][payments][{$pKey}][delete]"/>
                                    <span class="glyphicon glyphicon-remove"></span>
                                 </a>
                              </div>
                           </div>
                        </div>
                     {/foreach}

                     <div class="row bottom-space">
                        <div class="col-md-3">
                           <a href="#" data-form-add="">
                              <span class="glyphicon glyphicon-plus"></span>&nbsp;Přidat párování
                           </a>
                        </div>
                     </div>

                     {if $key != 0}
                        <script>
                           initForm({
                              selector: '[data-mapping-form="paymentForm_{$key}"]',
                              beforeAdd: function (original) {
                                 var $addedItem = original();
                                 window.preloadAutocompletes($addedItem);
                              }
                           });
                        </script>
                     {/if}
                  </div>
               </div>
            </div>
         </div>
      {/foreach}
   </div>

   <script type="application/javascript">
      var index = 1;
      var $groupWrapper = $('#mapping-groups');

      var $template = $('[data-mapping="template"]').clone();
      $('[data-mapping="template"]').remove();

      $('[data-mapping="add"]').click(function (e) {
         var $item = $template.clone();
         $item.removeAttr('style');
         $item.removeAttr('data-mapping');

         $item.attr('data-mapping', 'item')
         $item.css('margin-bottom', '20px');

         replaceAttribute($item.find('input, select'), 'name', '[mappingGroups][0]', '[mappingGroups][-' + index + ']');
         index++;

         $item.prependTo($groupWrapper);
         window.preloadAutocompletes($item);

         $item.find('[data-mapping-form]').each(function () {
            initForm({
               selector: $(this),
               beforeAdd: function (original) {
                  var $addedItem = original();
                  window.preloadAutocompletes($addedItem);
               }
            });
         });

         e.preventDefault();
         return false;
      });

      $groupWrapper.on('click', '[data-mapping="delete"]', function (e) {
         $(this).parents('[data-mapping="item"]').remove();

         e.preventDefault();
         return false;
      });
   </script>
</div>
{/block}
