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

<div id="delivery_pricelists_regions">
   <div class="row bottom-space">
      <div class="col-md-3">
         <a href="#" data-form-add="addRegion" class="btn btn-success btn-block"><span class="glyphicon glyphicon-plus"></span>&nbsp;{'addRegion'|translate}</a>
      </div>
   </div>

   <div class="row" id="countryRowNew" style="display:none;">
      <div class="form-group">
         <div class="col-md-2 control-label"><label>{'country'|translate}</label></div>
         <div class="col-md-3">
            <select name="data[region][0][country][]" class="selecter">
               {foreach $body.countries as $country}
                  <option value="{$country->getId()}">{$country->getName()}</option>
               {/foreach}
            </select>
         </div>
         <div class="col-md-6">
            <div class="col-md-4 control-label"><label>{'deliveryTime'|translate}</label></div>
            <div class="col-md-2">
               <input name="data[region][0][deliveryTimeMin][]" class="deliveryMin form-control input-sm">
            </div>
            <div class="col-md-1  control-label">{'upTo'|translate}</div>
            <div class="col-md-2">
               <input name="data[region][0][deliveryTimeMax][]" class="deliveryMax form-control input-sm">
            </div>
            <div class="col-md-1  control-label">{'days'|translate}</div>
         </div>
      </div>
   </div>

   <!-- Add new region  -->
   <div id="addRegionForm" data-form-new="addRegion" style="display:none;margin-bottom:20px;">
      <div class="panel-heading collapsed" style="background:lightgray">
         <div class="row">
            <div class="col-md-10">
               <p class="input-height">{'regionAdd'|translate}</p>
            </div>

            <div class="col-md-2 text-right">
               <a class="btn-sm btn btn-danger" data-form-delete>
                  <span class="glyphicon glyphicon-remove"></span>
               </a>
            </div>
         </div>
      </div>

      <div class="panel-collapse">
         <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="form-group">
                  <div class="col-md-2 control-label"><label>{'regionName'|translate}</label></div>
                  <div class="col-md-3">
                     <input type="text" name="data[region][0][name]" class="form-control input-sm" size="30" maxlength="255" value="">
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-md-12">
                  <h1 class="h6">{'countries'|translate}</h1 class="h5">
               </div>
            </div>
            <!-- Countries -->
             <div id="countrySelect_0">
                <div class="row">
               <div class="form-group">
                  <div class="col-md-2 control-label"><label>{'country'|translate}</label></div>
                  <div class="col-md-3">
                     <select name="data[region][0][country][]" class="selecter">
                        {foreach $body.countries as $country}
                           <option value="{$country->getId()}">{$country->getName()}</option>
                        {/foreach}
                     </select>
                  </div>
                  <div class="col-md-6">
                     <div class="col-md-4 control-label"><label>{'deliveryTime'|translate}</label></div>
                     <div class="col-md-2">
                        <input name="data[region][0][deliveryTimeMin][]" class="deliveryMin form-control input-sm">
                     </div>
                     <div class="col-md-1  control-label">{'upTo'|translate}</div>
                     <div class="col-md-2">
                        <input name="data[region][0][deliveryTimeMax][]" class="deliveryMax form-control input-sm">
                     </div>
                     <div class="col-md-1  control-label">{'days'|translate}</div>
                  </div>
               </div>
                </div>
            </div>
            <div class="row bottom-space">
               <div class="col-md-3">
                  <a href="#" onclick="copyCountrySelect(0, event);return false;" class="btn btn-success btn-block"><span class="glyphicon glyphicon-plus"></span>&nbsp;{'addCountry'|translate}
                  </a>
               </div>
            </div>
         </div>
      </div>
   </div>

   {foreach $body.regions as $region}
      <div style="margin-bottom: 20px;" class="bottom-space">
         <div class="panel-heading collapsed" style="background:lightgray">
            <div class="row">
               <div class="col-md-10">
                  <p class="input-height">{$region->getName()}</p>
               </div>

               <div class="col-md-2 text-right">
                  <button type="submit" class="btn-sm btn btn-danger confirm" name="deleteRegion[{$region->getId()}]" title="Smazat region">
                     <span class="glyphicon glyphicon-remove"></span>
                  </button>
               </div>
            </div>
         </div>

         <div class="panel-collapse">
            <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="form-group">
                     <div class="col-md-2 control-label"><label>{'regionName'|translate}</label></div>
                     <div class="col-md-3">
                        <input type="text" name="data[region][{$region->getId()}][name]" class="form-control input-sm" size="30" maxlength="255" value="{$region->getName()}">
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12">
                     <h1 class="h6">{'countries'|translate}</h1>
                  </div>
               </div>
               <!-- Countries -->
               <div id="countrySelect_{$region->getId()}">
                  {foreach $body.regionCountries[$region->getId()] as $countryId => $deliveryTime}
                     <div class="row">
                        <div class="form-group">
                           <div class="col-md-2 control-label"><label>{'country'|translate}</label></div>
                           <div class="col-md-3">
                              <select name="data[region][{$region->getId()}][country][]" class="selecter">
                                 {foreach $body.countries as $country}
                                    <option value="{$country->getId()}-{$countryId}" {if $countryId == $country->getId()}selected{/if}>{$country->getName()}</option>
                                 {/foreach}
                              </select>
                           </div>
                           <div class="col-md-6">
                              <div class="col-md-4 control-label"><label>{'deliveryTime'|translate}</label></div>
                              <div class="col-md-2">
                                 <input name="data[region][{$region->getId()}][deliveryTimeMin][]" class="deliveryMin form-control input-sm" value="{$deliveryTime.min}">
                              </div>
                              <div class="col-md-1  control-label">{'upTo'|translate}</div>
                              <div class="col-md-2">
                                 <input name="data[region][{$region->getId()}][deliveryTimeMax][]" class="deliveryMax form-control input-sm" value="{$deliveryTime.max}">
                              </div>
                              <div class="col-md-1  control-label">{'days'|translate}</div>
                           </div>
                           <div class="col-md-1">
                              <button type="submit" class="btn-sm btn btn-danger confirm" name="deleteCountry[{$region->getId()}][{$countryId}]" title="Smazat stat">
                                 <span class="glyphicon glyphicon-remove"></span>
                              </button>
                           </div>
                        </div>
                     </div>
                  {/foreach}
               </div>

               <div class="row bottom-space">
                  <div class="col-md-3">
                     <a href="#" onclick="copyCountrySelect({$region->getId()});return false;" class="btn btn-success btn-block"><span class="glyphicon glyphicon-plus"></span>&nbsp;{'addCountry'|translate}
                     </a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   {/foreach}

</div>

<script>
   function copyCountrySelect(regionId, event) {
      if (regionId == 0) {
         regionId = getNewRegionId(event);
      }

      var item = $("#countryRowNew");
      unstyleFormInputs(item);
      var newItem = item.clone();

      newItem.find("select").attr("name", "data[region][" + regionId + "][country][]");
      newItem.find(".deliveryMin").attr("name", "data[region][" + regionId + "][deliveryTimeMin][]");
      newItem.find(".deliveryMax").attr("name", "data[region][" + regionId + "][deliveryTimeMax][]");
      newItem.find(".deliveryMin").attr("value", "");
      newItem.find(".deliveryMax").attr("value", "");

      item.after(newItem);

      newItem.slideDown();
      styleFormInputs(newItem);

      if (regionId > 0) {
         newItem.insertAfter("#countrySelect_" + regionId);
      } else {
         var parentRow = event.target;
         parentRow = parentRow.closest("div.row");
         newItem.insertBefore(parentRow);
         newItem.attr('id', 'countryRow');
      }
   }

   function getNewRegionId(event) {
       var id = 0;
       var item = event.target;
       item = item.closest("div.panel-collapse");
       if (item.getElementsByTagName("input").length > 0) {
           var input_name = item.getElementsByTagName("input")[0].name;
           input_name = input_name.replace('data[region][', '');
           input_name = input_name.substr(0, input_name.indexOf(']'));
           id = parseInt(input_name);
       }
       return id;
   }

   initForm({
      selector: '#delivery_pricelists_regions',
   });
</script>
