<div id="configurationChannable" class="tab-pane fade in boxFlex">
   <div class="form-group form-group-flex">
      <div class="col-md-2 control-label">
         <label>{'apiKey'|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 class="form-group form-group-flex">
      <div class="col-md-2 control-label">
         <label>{'companyId'|translate}</label>
      </div>
      <div class="col-md-3">
         <input class="form-control input-sm" type="text" name="data[data][company_id]"
                value="{$body.data.data.company_id}" required>
      </div>
      <div class="col-md-2 control-label">
         <label>{'projectId'|translate}</label>
      </div>
      <div class="col-md-3">
         <input class="form-control input-sm" type="text" name="data[data][project_id]"
                value="{$body.data.data.project_id}" required>
      </div>
   </div>

   {get_contexts language=1 assign='contexts'}

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

   <div class="col-md-3 control-label">
      <label>
         {'out'|translate}
         <a class="help-tip" data-toggle="tooltip" title="{'channableOutTooltip'|translate}">
            <i class="bi bi-question-circle"></i>
         </a>
      </label>
   </div>
   <div class="col-md-1">
      {print_toggle nameRaw="data[configuration][out]" value=$body.data.configuration.out}
   </div>

   <div class="col-md-3 control-label">
      <label>{'doNotStornoOrders'|translate}</label>
   </div>
   <div class="col-md-1">
      {print_toggle nameRaw="data[configuration][do_not_storno_orders]" value=$body.data.configuration.do_not_storno_orders}
   </div>

   <div class="col-md-3 control-label">
      <label>
         {'use_channable_order_no'|translate}
         <a class="help-tip" data-toggle="tooltip" title="Přebírat číslo objednávky z channable">
            <i class="bi bi-question-circle"></i>
         </a>
      </label>
   </div>
   <div class="col-md-1">
      {print_toggle nameRaw="data[configuration][use_marketplace_order_no]" value=$body.data.configuration.use_marketplace_order_no}
   </div>

   <div class="wpj-form-group col-md-12">
      <label>{'statuses'|translate}</label>
      <div class="input-group col-md-2">
         {print_select name="data[configuration][statuses]" var=$cfg.Order.Status.global selected=$body.data.configuration.statuses}
      </div>
   </div>
   <div class="row">
      <div class="col-md-12">
         <h1 class="h4 main-panel-title">{'mappingTitle'|translate}</h1>
      </div>
   </div>

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

   <div id="marketplaces" class="panel-group panel-group-lists ui-sortable">
      {foreach array_merge([[]], $body.data.configuration.marketplaces|default:[]) as $key => $marketplace}
         <div {if $key == 0}data-marketplace="template" style="display: none" {else}data-marketplace="item"
              style="margin-bottom: 20px"{/if}>
            <div class="panel">
               <div class="panel-heading">
                  <div class="row">
                     <div class="col-md-3">
                        <input name="data[configuration][marketplaces][{$key}][name]" class="form-control input-sm"
                               type="text"
                               value="{$marketplace.name}"
                               placeholder="{if $key == 0}Marketplace...{else}Všechny marketplace{/if}">
                        <a class="help-tip" data-toggle="tooltip" title=""
                           data-original-title="Název marketplacu. Pokud nevyplníte, tak se bude nastavení vztahovat na všechny marketplacy.">
                           <i class="bi bi-question-circle"></i>
                        </a>
                     </div>
                     <div class="col-md-9">
                        <a class="btn-sm btn btn-danger  pull-right" data-marketplace="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;">

                  {ifmodule TRANSLATIONS}
                     <div class="row">
                        <div class="col-md-1 control-label">
                           <label>{'orderLanguage'|translate}</label>
                        </div>
                        <div class="col-md-3">
                           <select name="data[configuration][marketplaces][{$key}][settings][id_language]" class="selecter">
                              <option value="">-- výchozí jazyk --</option>
                              {foreach $contexts.language->getSupported() as $lang}
                                 <option value="{$lang->getId()}"
                                         {if $marketplace.settings.id_language == $lang->getId()}selected{/if}>{$lang->getName()}</option>
                              {/foreach}
                           </select>
                        </div>
                     </div>
                  {/ifmodule}

                  <div class="row">
                     <div class="col-md-12">
                        <h1 class="h6"><strong>{'deliveries'|translate}</strong></h1>
                        <hr>
                     </div>
                  </div>
                  <div id="deliveryForm_{$key}">
                     {$deliveries = $marketplace.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-1 control-label">
                                 <label>{'country'|translate}</label>
                              </div>
                              <div class="col-md-3">
                                 <select
                                    name="data[configuration][marketplaces][{$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-1 control-label">
                                 <label>{'delivery'|translate}</label>
                              </div>
                              <div class="col-md-3">
                                 <select
                                    name="data[configuration][marketplaces][{$key}][deliveries][{$dKey}][id_delivery]"
                                    class="selecter"
                                    data-autocomplete="deliveries" data-preload="deliveries">
                                    {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][marketplaces][{$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: '#deliveryForm_{$key}',
                              beforeAdd: function (original) {
                                 console.log("original: ", 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>

                  <div class="row bottom-space">
                     <div class="col-md-1 control-label">
                        <label>Platba</label>
                     </div>
                     <div class="col-md-4">
                        <select name="data[configuration][marketplaces][{$key}][payments][default]" class="selecter"
                                data-autocomplete="payments" data-preload="payments">
                           {if $marketplace.payments.default}
                              <option value="{$marketplace.payments.default}"
                                      selected>{$marketplace.payments.default}</option>
                           {/if}
                        </select>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      {/foreach}
   </div>

   <script type="application/javascript">
      var index = 1;
      var $marketplaceWrapper = $('#marketplaces');

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

      $('[data-marketplace="add"]').on('click', function (e) {
         console.log('hello')
         var $item = $template.clone();
         $item.removeAttr('style');
         $item.removeAttr('data-marketplace');

         $item.attr('data-marketplace', 'item')

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

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

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

         initForm({
            selector: $item,
            beforeAdd: function (original) {
               var $addedItem = original();
               window.preloadAutocompletes($addedItem);
            }
         });

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

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

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






