<script type="text/javascript" src="./static/js/jquery.datetimepicker.js"></script>
<script type="text/javascript" src="./static/js/jquery-ui.datepicker-cs.js"></script>

<div class="boxFlex">
   <div data-triggers>
      <div class="row box-header">
         <div class="col-md-7">
            <h1 class="h5">{'triggers'|translate}</h1>
         </div>
         <div class="col-md-1">
            <a class="help-tip" data-toggle="tooltip" title="{'triggers_tooltip'|translate}"><i class="bi bi-question-circle"></i></a>
         </div>
         <div class="col-md-4">
            <div class="dropdown">
               <a class="btn btn-success btn-block dropdown-toggle" data-toggle="dropdown" id="addTriggerButton">
                  <span class="glyphicon glyphicon-plus"></span> {'addTrigger'|translate}
               </a>
               <ul class="dropdown-menu">
                  <div id="searchTriggers" style="padding: 8px 20px; border-bottom: 1px solid #e1e3e7;">
                     <input type="text" class="form-control input-sm" placeholder="{'search'|translate}">
                  </div>
                   {foreach $body.triggers as $type => $trigger}
                      <li>
                         <a href="#" data-form-add-trigger="{$type}" data-trigger-name="{$trigger->getName()}">
                            <span class="icon {*{$trigger->getIconClass()}*}"></span>
                            <p>
                               <strong>
                                   {$trigger->getName()}
                                   {if isSuperuser()}
                                      <small class="text-muted">
                                         <span class="glyphicon glyphicon-flash" style="color:#AAB2BD;"></span>
                                         [{$type}]
                                      </small>
                                   {/if}
                               </strong>

                                {$trigger->getDescription()}
                            </p>
                         </a>
                      </li>
                   {/foreach}
               </ul>
            </div>
         </div>
      </div>
      <hr>
      <div class="panel-group panel-group-lists collapse in" id="triggers">
         <div class="panel panel-default" data-form-new style="display:none;">
            <div class="panel-heading panel-heading-flex">
               <input type="hidden" name="data[triggers][0][type]" value="">
               <p class="icon"></p>

               <a class="panel-heading-close" data-form-delete>
                  <input class="hidden" type="checkbox" name="data[triggers][0][delete]">
                  <span class="glyphicon glyphicon-remove"></span>
               </a>
            </div>
            <div class="panel-collapse">
               <div class="panel-body" data-form-settings>
               </div>
            </div>
         </div>
          {foreach $body.order_discounts_triggers as $key => $order_discounts_trigger}
              {if array_key_exists($order_discounts_trigger.type, $body.triggers)}
                  {$trigger = $body.triggers[$order_discounts_trigger.type]}
                 <div class="panel panel-default" data-form-item="{$key}">
                    <div class="panel-heading panel-heading-flex collapsed" data-toggle="collapse"
                         data-target="#triggers_{$key}">
                       <input type="hidden" name="data[triggers][{$key}][id]"
                              value="{$order_discounts_trigger.id}">
                       <input type="hidden" name="data[triggers][{$key}][type]"
                              value="{$order_discounts_trigger.type}">
                       <p class="icon">{$trigger->getName()}</p>

                       <a class="panel-heading-close" data-form-delete>
                          <input class="hidden" type="checkbox" name="data[triggers][{$key}][delete]">
                          <span class="glyphicon glyphicon-remove"></span>
                       </a>
                    </div>
                    <div id="triggers_{$key}" class="panel-collapse collapse in">
                       <div class="panel-body" data-form-settings>
                           {$name = "data[triggers][{$key}]"}
                           {if $data = $order_discounts_trigger.data}
                               {$data = json_decode($data, true)}
                           {else}
                               {$data = []}
                           {/if}
                           {$trigger->printTriggerSettings($name, $data) nofilter}

                          {if $order_discounts_trigger.type == 'coupon'}
                             <div class="col-md-1"></div>
                             {foreach $order_discounts_trigger.duplicates as $duplicateCode}
                                <span onclick="javascript:nw('list', '0', '&filter[code]={$duplicateCode}&filter[order]=&filter[from]=&filter[to]=&s=list.php&type=OrderDiscounts')"
                                   class="text-warning"
                                   title="Upozornění, tento kód {$duplicateCode} již používá jiná sleva. Stisknutím ikonky zobrazíte seznam slev s tímto kódem.">
                                    <span class="glyphicon glyphicon-warning-sign"></span> {$duplicateCode}
                                </span>
                             {/foreach}
                          {/if}
                       </div>
                    </div>
                 </div>
              {/if}
              {foreachelse}
                  {if $body.acn != "add"}
                     <div class="panel panel-default" id="noTriggersWarning">
                        <div class="panel-heading" style="display: block;">
                          {'addRule'|translate nofilter}
                        </div>
                     </div>
                  {/if}
          {/foreach}
      </div>

      <script type="application/javascript">
         initForm({
            selector: '[data-triggers]',
         });

         var $formT = $('[data-triggers]');
         $formT.on('click', '[data-form-add-trigger]', function() {
            var triggerType = $(this).data('formAddTrigger');
            var triggerName = $(this).data('triggerName');
            var $new = addNewItem($formT.find('[data-form-new]'));
            var typeInput = $new.find(':input[type="hidden"][name$="][type]"]');
            typeInput.val(triggerType);
            typeInput.next('p').text(triggerName);
            var name = typeInput.attr('name').replace('[type]', '');
            var settings = $new.find('[data-form-settings]');
            settings.load('?s=OrderDiscounts.php&acn=loadTemplate&trigger_type=' + triggerType + '&name=' + name,
               function() {
                  unstyleFormInputs('[data-triggers]');
                  styleFormInputs('[data-triggers]');
                  var filters = $('[data-filter-name^="data[triggers]"]');
                  for (var i = 0; i < filters.length; i++) {
                     var filterName = CSS.escape($(filters[i]).data('filter-name'));
                     productsFilter_applyChosen_all(filterName);
                  }
                  preloadAutocompletes($new);
               });
            $('#noTriggersWarning').hide();
         });

         $('#noTriggersWarning a').click(function (e) {
            e.stopPropagation();
            $('#addTriggerButton').dropdown('toggle');
         });

         $('#searchTriggers').click(function (e) {
            e.stopPropagation();
         });

         $(document).ready(function() {
            $("#searchTriggers input[type='text']").on("keyup", function() {
               var value = $(this).val().toLowerCase();
               $("[data-triggers] .dropdown-menu li").filter(function() {
                  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
               });
            });
         });
      </script>
   </div>
</div>
