{if !$filterInputName}{$filterInputName = 'filter'}{/if}

{block functions}
   {function name="inversion" field="" checked=""}
      <label class="input-group-addon" title="{'inversionInfo'|translate:'filter'}">
         <input class="input" type="checkbox" data-filter-type="checkbox" name="{$filterInputName}[{$field}_invert]" value="invert" {$checked}>
         <span class="bi bi-dash-circle-fill"></span>
      </label>
   {/function}
   {function selectTree}
      {foreach $data as $entry}
         <option value="{$entry.id}" {$entry.id|selected:$selected} {if $entry.id == $disabled_id || $disabled_all}disabled{/if}>{for $sp=1 to $entry.level}-&nbsp;&nbsp;{/for}{$entry.title}</option>
         {if !empty($entry.submenu)}
            {if $entry.id == $disabled_id || $disabled_all}
               {selectTree data=$entry.submenu selected=$selected disabled_id=$disabled_id disabled_all=true}
            {else}
               {selectTree data=$entry.submenu selected=$selected disabled_id=$disabled_id disabled_all=false}
            {/if}
         {/if}
      {/foreach}
   {/function}
{/block}
<div id="ordersFilter" data-filter-name="{$filterName}" class="products-filter">

   <div class="wpj-panel wpj-panel-default">
      <div class="wpj-panel-heading" data-toggle="collapse" data-target="#orders-filter-panel-{$filterName|strip_accent}">
         <div class="row">
            <div class="col-xs-8"><strong>{if $title}{$title nofilter}{else}{'filter'|translate:'ordersFilter'}{/if}</strong></div>
            <div class="col-xs-4 text-right">
               <a href="#" class="btn btn-xs btn-ghost" data-filter-clear-type="order">
                   {'reset'|translate:'productsFilter'}
                  <span class="bi bi-x-lg"></span>
               </a>
               <div class="wpj-panel-collapse-arrow">
                  <span class="bi bi-chevron-down"></span>
               </div>
            </div>
         </div>
      </div>
      <div class="wpj-panel-collapse collapse in" id="orders-filter-panel-{$filterName|strip_accent}">
         <div class="wpj-panel-body">

            <div class="row">
               <div class="col-xs-3">
                  <div class="wpj-form-group">
                     <label>{'statuses'|translate:'ordersFilter'}</label>
                     <div class="input-group invert">
                         {print_select name="{$filterInputName}[statuses][]" var=$filter_data.statuses selected=$filter.statuses param='multiple=multiple'}
                         {inversion field="statuses" checked="{if $filter.statuses_invert}checked{/if}"}
                     </div>
                  </div>
               </div>
               <div class="col-xs-3">
                  <div class="wpj-form-group">
                     <label>{'payed'|translate:'ordersFilter'}</label>
                     <div class="input-group invert">
                         {print_select name="{$filterInputName}[payed][]" var=$filter_data.payed selected=$filter.payed param='multiple=multiple'}
                         {inversion field="payed" checked="{if $filter.payed_invert}checked{/if}"}
                     </div>
                  </div>
               </div>
               <div class="col-xs-3">
                  <div class="wpj-form-group">
                     <label>{'storno'|translate:'ordersFilter'}</label>
                     <div class="input-group invert">
                         {print_select name="{$filterInputName}[storno][]" var=$filter_data.storno selected=$filter.storno param='multiple=multiple'}
                         {inversion field="storno" checked="{if $filter.storno_invert}checked{/if}"}
                     </div>
                  </div>
               </div>
               <div class="col-xs-3">
                  <div class="wpj-form-group">
                     <label>{'flags'|translate:'ordersFilter'}</label>
                     <div class="input-group invert">
                         {print_select name="{$filterInputName}[flags][]" var=$filter_data.flags selected=$filter.flags param='multiple=multiple'}
                         {inversion field="flags" checked="{if $filter.flags_invert}checked{/if}"}
                     </div>
                  </div>
               </div>
            </div>

            <div class="row">
                {if $module.ORDER_DISCOUNT}
               <div class="col-xs-3">
                  <div class="wpj-form-group">
                     <label>{'order_discount'|translate:'ordersFilter'}</label>
                     <div class="input-group invert">
                        <select data-autocomplete="order_discount" name="{$filterInputName}[order_discount][]" data-filter-type="multiselect" multiple='multiple' class="selecter"
                                id="order_discount{$filterName}" data-preload="order_discount">
                            {foreach $filter.order_discount as $item}
                               <option value="{$item}" selected>{$item}</option>
                            {/foreach}
                        </select>
                         {inversion field="order_discount" checked="{if $filter.order_discount_invert}checked{/if}"}
                     </div>
                  </div>
               </div>
                {/if}
               <div class="col-xs-3">
                  <div class="wpj-form-group">
                     <label>{'state'|translate:'ordersFilter'}</label>
                     <div class="input-group invert">
                         {print_select name="{$filterInputName}[state][]" var=$filter_data.state selected=$filter.state param='multiple=multiple'}
                         {inversion field="state" checked="{if $filter.state_invert}checked{/if}"}
                     </div>
                  </div>
               </div>
                {if $module.CURRENCIES}
               <div class="col-xs-3">
                  <div class="wpj-form-group">
                     <label>{'currency'|translate:'ordersFilter'}</label>
                     <div class="input-group invert">
                         {print_select name="{$filterInputName}[currency][]" var=$filter_data.currency selected=$filter.currency param='multiple=multiple'}
                         {inversion field="currency" checked="{if $filter.currency_invert}checked{/if}"}
                     </div>
                  </div>
               </div>
                {/if}
                {if $module.TRANSLATIONS}
               <div class="col-xs-3">
                  <div class="wpj-form-group">
                     <label>{'language'|translate:'ordersFilter'}</label>
                     <div class="input-group invert">
                         {print_select name="{$filterInputName}[languages][]" var=$filter_data.languages selected=$filter.languages param='multiple=multiple'}
                         {inversion field="languages" checked="{if $filter.languages_invert}checked{/if}"}
                     </div>
                  </div>
               </div>
               {/if}
            </div>

            <div class="row">
               <div class="col-xs-3">
                  <div class="wpj-form-group">
                     <label>{'users_registered'|translate:'ordersFilter'}</label>
                     <div class="input-group invert">
                         {print_select name="{$filterInputName}[users_registered][]" var=$filter_data.users_registered selected=$filter.users_registered param='multiple=multiple'}
                         {inversion field="users_registered" checked="{if $filter.users_registered_invert}checked{/if}"}
                     </div>
                  </div>
               </div>
               <div class="col-xs-3">
                  <div class="wpj-form-group">
                     <label>{'users_groups'|translate:'ordersFilter'}</label>
                     <div class="input-group invert">
                         {print_select name="{$filterInputName}[users_groups][]" var=$filter_data.users_groups selected=$filter.users_groups param='multiple=multiple'}
                         {inversion field="users_groups" checked="{if $filter.users_groups_invert}checked{/if}"}
                     </div>
                  </div>
               </div>
               <div class="col-xs-3">
                  <div class="wpj-form-group">
                     <label>{'reg_users'|translate:'ordersFilter'}</label>
                     <div class="input-group invert">
                        <select data-autocomplete="users" data-filter-type="autocomplete" name="{$filterInputName}[reg_users][]" multiple='multiple' class="selecter"
                                id="reg_users{$filterName}" data-type="user_name" data-preload="users">
                            {foreach $filter.reg_users as $item}
                               <option value="{$item}" selected>{$item}</option>
                            {/foreach}
                        </select>
                         {inversion field="reg_users" checked="{if $filter.reg_users_invert}checked{/if}"}
                     </div>
                  </div>
               </div>
               <div class="col-xs-3">
                  <div class="wpj-form-group">
                     <label>{'ico_dic'|translate:'ordersFilter'}</label>
                     <div class="input-group invert">
                        <input class="form-control input-sm" name="{$filterInputName}[ico_dic]" placeholder="{'ico_dic'|translate:'ordersFilter'}" value="{$filter.ico_dic}">
                         {inversion field="ico_dic" checked="{if $filter.ico_dic_invert}checked{/if}"}
                     </div>
                  </div>
               </div>
            </div>

             <div class="row">
                <div class="col-xs-3">
                   <div class="wpj-form-group">
                      <label>{'source'|translate:'ordersFilter'}</label>
                      <div class="input-group invert">
                          {print_select name="{$filterInputName}[source][]" var=$filter_data.source selected=$filter.source param='multiple=multiple'}
                          {inversion field="source" checked="{if $filter.source_invert}checked{/if}"}
                      </div>
                   </div>
                </div>
                 {if findModule('eshop_delivery')}
                    <div class="col-xs-3">
                       <div class="wpj-form-group">
                          <label>{'delivery'|translate:'ordersFilter'}</label>
                          <div class="input-group invert">
                              {print_select name="{$filterInputName}[deliveries][]" var=$filter_data.deliveries selected=$filter.deliveries param='multiple=multiple'}
                              {inversion field="deliveries" checked="{if $filter.deliveries_invert}checked{/if}"}
                          </div>
                       </div>
                    </div>
                    <div class="col-xs-3">
                       <div class="wpj-form-group">
                          <label>{'payment'|translate:'ordersFilter'}</label>
                          <div class="input-group invert">
                              {print_select name="{$filterInputName}[payments][]" var=$filter_data.payments selected=$filter.payments param='multiple=multiple'}
                              {inversion field="payments" checked="{if $filter.payments_invert}checked{/if}"}
                          </div>
                       </div>
                    </div>
                     {ifmodule SELLERS}
                        <div class="col-xs-3">
                           <div class="wpj-form-group">
                              <label>{'sellerPoint'|translate:'ordersFilter'}</label>
                              <div class="input-group invert">
                                 <select data-autocomplete="sellers" name="{$filterInputName}[sellers][]" multiple="multiple" class="selecter"
                                         id="order_discount{$filterName}" data-preload="sellers">
                                     {foreach $filter.sellers as $item}
                                        <option value="{$item}" selected>{$item}</option>
                                     {/foreach}
                                 </select>
                                  {inversion field="sellers" checked="{if $filter.sellers_invert}checked{/if}"}
                              </div>
                           </div>
                        </div>
                     {/ifmodule}
                 {/if}
                 {ifmodule NEW_POS}
                     <div class="col-xs-3">
                        <div class="wpj-form-group">
                           <label>{'pos'|translate:'ordersFilter'}</label>
                           <div class="input-group invert">
                              <select data-autocomplete="pos" name="filter[pos][]" multiple="multiple" class="selecter"
                                      id="pos_{$filterName}" data-preload="pos">
                                  {foreach $filter.pos as $item}
                                     <option value="{$item.id}" selected>{$item.id}</option>
                                  {/foreach}
                              </select>
                               {inversion field="pos" checked="{if $filter.pos_invert}checked{/if}"}
                           </div>
                        </div>
                     </div>
                 {/ifmodule}
                  <div class="col-xs-3">
                     <div class="wpj-form-group">
                        <label>{'properties'|translate:'ordersFilter'}</label>
                        <div class="input-group invert">
                           <select name="{$filterInputName}[property][]" multiple="multiple" class="selecter"
                                   data-placeholder="{'selectMultiPlaceholder'|translate:'ordersFilter'}">
                                 <option value="first_bought" {if $filter.property=='first_bought'}selected{/if}>{'firstBought'|translate:'ordersFilter'}</option>
                                 <option value="first_bought_by_email" {if $filter.property=='first_bought_by_email'}selected{/if}>{'firstBoughtByEmail'|translate:'ordersFilter'}</option>
                                 <option value="has_ico" {if $filter.property=='has_ico'}selected{/if}>{'hasIco'|translate:'ordersFilter'}</option>
                                 <option value="has_dic" {if $filter.property=='has_dic'}selected{/if}>{'hasDic'|translate:'ordersFilter'}</option>
                           </select>
                           {inversion field="property" checked="{if $filter.property_invert}checked{/if}"}
                        </div>
                     </div>
                  </div>
                 {ifmodule PRODUCTS_BATCHES}
                    <div class="col-xs-2">
                       <div class="wpj-form-group">
                          <label>{'batch'|translate:'ordersFilter'}</label>
                          <div class="input-group">
                             <input type="text" class="form-control input-sm" name="{$filterInputName}[batch]" value="{$filter.batch}"/>
                          </div>
                       </div>
                    </div>
                 {/ifmodule}

                <div class="col-xs-3">
                   <div class="wpj-form-group">
                      <label>{'products'|translate:'ordersFilter'}</label>
                      <div class="input-group invert">
                      <input type="text" data-autocomplete-search="{$filterName}_products" autocomplete="off"
                             class="form-control autocomplete-control" name="addProduct" style="display: none;">
                      <select data-autocomplete-items="{$filterName}_products" data-filter-type="autocomplete"
                              name="{$filterInputName}[products][]" multiple="multiple"
                              class="selecter {if $productsSortable}selecter-sortable{/if}" data-preload="products"
                              id="products{$filterName}"
                              data-placeholder="{'productPlaceholder'|translate:'productsFilter'}">
                         {foreach $filter.products as $item}
                            <option value="{$item}" selected>{$item}</option>
                         {/foreach}
                      </select>
                         {inversion field="products" checked="{if $filter.product_invert}checked{/if}"}
                      </div>
                      <script>
                         $('[data-autocomplete-search="{$filterName}_products"]')
                            .adminProductMultiselect({
                            })
                      </script>

                   </div>
                </div>

                {ifmodule SALESMAN}
                   <div class="col-xs-3">
                      <div class="wpj-form-group" data-search="item">
                         <label>{'salesman'|translate:'ordersFilter'}</label>
                         <div class="input-group invert">
                            <select name="{$filterInputName}[salesman][]" multiple="multiple" class="selecter"
                                    data-placeholder="{'selectSalesman'|translate:'ordersFilter'}" data-autocomplete="salesman"
                                    data-preload="salesman"
                                    data-autocomplete-empty="Nevybráno">
                               {foreach $filter.salesman as $salesman}
                                  <option value="{$salesman}" selected>{$salesman}</option>
                               {/foreach}
                            </select>
                            {inversion field="salesman" checked="{if $filter.salesman_invert}checked{/if}"}
                         </div>
                      </div>
                   </div>
                {/ifmodule}
             </div>

             {block "custom-interval"}
                 <div class="row wpj-form-group-flex">
                    <div class="col-xs-2">
                       <div class="wpj-form-group">
                          <label>{'date_created_from'|translate:'ordersFilter'}</label>
                          <div class="input-group">
                             <input id="date_created_from" data-date-relative-from="date_created" data-filter-type="input" type="text" class="form-control input-sm" name="{$filterInputName}[date_created][from]" value="{$filter.date_created.from}" placeholder="{'from'|translate:'ordersFilter'}" autocomplete="off"/>
                              {insert_calendar selector='#date_created_from' format='date'}
                             <label for="date_created_from" class="input-group-addon">
                                <span class="bi bi-calendar-week"></span>
                             </label>
                          </div>
                       </div>
                    </div>
                    <div class="col-xs-2">
                       <div class="wpj-form-group">
                          <label>{'date_created_to'|translate:'ordersFilter'}</label>
                          <div class="input-group">
                             <input id="date_created_to" data-date-relative-to="date_created" data-filter-type="input" type="text" class="form-control input-sm" name="{$filterInputName}[date_created][to]" value="{$filter.date_created.to}" placeholder="{'to'|translate:'ordersFilter'}" autocomplete="off"/>
                              {insert_calendar selector='#date_created_to' format='date'}
                             <label for="date_created_to" class="input-group-addon">
                                <span class="bi bi-calendar-week"></span>
                             </label>
                          </div>
                       </div>
                    </div>
                    <div class="col-xs-2">
                       <div class="wpj-form-group">
                           {insert_date_interval selector_from='date_created_from' selector_to='date_created_to' wpj_new=true}
                       </div>
                    </div>

                    <div class="col-xs-2">
                       <div class="wpj-form-group">
                          <label>{'date_handled_from'|translate:'ordersFilter'}</label>
                          <div class="input-group">
                             <input id="date_handled_from" data-date-relative-from="date_handled" data-filter-type="input" type="text" class="form-control input-sm" name="{$filterInputName}[date_handled][from]" value="{$filter.date_handled.from}" placeholder="{'from'|translate:'ordersFilter'}" autocomplete="off"/>
                              {insert_calendar selector='#date_handled_from' format='date'}
                             <label for="date_handled_from" class="input-group-addon">
                                <span class="bi bi-calendar-week"></span>
                             </label>
                          </div>
                       </div>
                    </div>
                    <div class="col-xs-2">
                       <div class="wpj-form-group">
                          <label>{'date_handled_to'|translate:'ordersFilter'}</label>
                          <div class="input-group">
                             <input id="date_handled_to" data-date-relative-to="date_handled" data-filter-type="input" type="text" class="form-control input-sm" name="{$filterInputName}[date_handled][to]" value="{$filter.date_handled.to}" placeholder="{'to'|translate:'ordersFilter'}" autocomplete="off"/>
                              {insert_calendar selector='#date_handled_to' format='date'}
                             <label for="date_handled_to" class="input-group-addon">
                                <span class="bi bi-calendar-week"></span>
                             </label>
                          </div>
                       </div>
                    </div>
                    <div class="col-xs-2">
                       <div class="wpj-form-group">
                           {insert_date_interval selector_from='date_handled_from' selector_to='date_handled_to' wpj_new=true}
                       </div>
                    </div>
                 </div>
                {if $dateRelative}
                <div class="row">
                   <div class="col-xs-6">
                      <div class="wpj-form-group">
                         <div class="checkbox">
                            <input type="checkbox" class="check" name="{$filterInputName}[date_created][relative]" data-filter-type="checkbox" id="date_created_relative" value="ON" {if $filter.date_created.relative}checked {/if} />
                            <label for="date_created_relative">{'date_relative'|translate:'ordersFilter'}
                               <span data-date-relative-text="date_created"></span>
                            </label>
                         </div>
                      </div>
                      <input type="hidden" name="{$filterInputName}[date_created][offset_from]" data-date-relative-offset-from="date_created">
                      <input type="hidden" name="{$filterInputName}[date_created][offset_to]" data-date-relative-offset-to="date_created">
                   </div>
                   <div class="col-xs-6">
                      <div class="wpj-form-group">
                         <div class="checkbox">
                            <input type="checkbox" class="check" name="{$filterInputName}[date_handled][relative]" data-filter-type="checkbox" id="date_handled_relative" value="ON" {if $filter.date_handled.relative}checked {/if}/>
                            <label for="date_handled_relative">{'date_relative'|translate:'ordersFilter'}
                              <span data-date-relative-text="date_handled"></span>
                            </label>
                         </div>
                      </div>
                      <input type="hidden" name="{$filterInputName}[date_handled][offset_from]" data-date-relative-offset-from="date_handled">
                      <input type="hidden" name="{$filterInputName}[date_handled][offset_to]" data-date-relative-offset-to="date_handled">
                   </div>
                </div>
                {/if}
             {/block}

            {block "custom-fields"}{/block}

         </div>
      </div>
   </div>
</div>


<script type="text/javascript">
    styleFormInputs($('#reg_users{$filterName}'));

    wpj.formUtils.initFormSave($('[data-filter-name="{$filterName}"]'), '{$filterName}',
           {if $saveFilter}true{else}false{/if});


    function initDateRelative(name) {
       const $fromInput = $('[data-date-relative-from="' + name + '"]')
       const $toInput = $('[data-date-relative-to="' + name + '"]')
       const $textEl = $('[data-date-relative-text="' + name + '"]')
       const $offsetInputFrom = $('[data-date-relative-offset-from="' + name + '"]')
       const $offsetInputTo = $('[data-date-relative-offset-to="' + name + '"]')

       const today = new Date();

       const getDiffFromToday = (date) => {
          if (!(date instanceof Date)) {
             return 0;
          }
          return  Math.ceil((date - today) / (1000 * 3600 * 24));
       }

       const withSign = (number) => (number <= 0 ? "" : "+") + number

       const setText = () => {
          var inputDateFrom = $fromInput.datepicker("getDate");
          var inputDateTo = $toInput.datepicker("getDate");

          const offsetFrom = getDiffFromToday(inputDateFrom);
          const offsetTo = getDiffFromToday(inputDateTo);

          var text = 'dnes';

          if (offsetFrom || offsetTo) {
             const textFrom = offsetFrom ? withSign(offsetFrom) + ' dní' : '';
             const textTo = offsetTo ? withSign(offsetTo) + ' dní' : '';
             text = 'dnes ' + textFrom + ' až dnes ' + textTo;
          }

          $textEl.text('(' + text.trim() + ')');
          $offsetInputFrom.val(offsetFrom);
          $offsetInputTo.val(offsetTo);

       }

       $toInput.on('change', (e) => {
          setText();
       });

       $fromInput.on('change', (e) => {
          setText();
       });
       $(()=> setText())

    }

    initDateRelative('date_created');
    initDateRelative('date_handled');

</script>
