{extends "../menu.tpl"}

{block list_icon}glyphicon-credit-card{/block}

{block name="content" append}
   <ul class="nav nav-pills nav-stacked">
      <li class="nav-header smaller"><i class="glyphicon glyphicon-filter"></i><span>{'search'|translate}</span></li>
      <li class="pill-content">
         <ul class="nav-sub nav-pills">
            <form target="mainFrame" method="get" action="launch.php" class="form-inline">
               <input type="hidden" name="s" value="list.php">
               <input type="hidden" name="type" value="orderPayment">

               <div class="form-group">
                  <button type="button" class="btn btn-primary btn-sm" data-jump="-1">&lt;</button>
                  <button type="button" class="btn btn-default btn-sm" data-range="week">{'Week'|translate}</button>
                  <button type="button" class="btn btn-default btn-sm" data-range="month">{'Month'|translate}</button>
                  <button type="button" class="btn btn-primary btn-sm" data-jump="1">&gt;</button>
               </div>
               <div class="form-group">
                  <input type="text" class="form-control input-sm" name="dateFrom" id="dateFrom" maxlength="10"
                         value="{date("d-m-Y", time()-(7*86400))}" placeholder="Datum od" autocomplete="off"/>
                  {insert_calendar selector='#dateFrom' format='date'}
               </div>
               <div class="form-group">
                  <input type="text" class="form-control input-sm" name="dateTo" id="dateTo" maxlength="10" value="{date("d-m-Y", time())}"
                         placeholder="Datum do" autocomplete="off"/>
                  {insert_calendar selector='#dateTo' format='date'}
               </div>

               <div class="form-group">
                  <select name="direction[]" multiple='multiple' class="selecter" data-placeholder="{'paymentDirection'|translate}">
                     <option value="incoming">{'incoming'|translate}</option>
                     <option value="outgoing">{'outgoing'|translate}</option>
                  </select>
               </div>

               <div class="form-group">
                  <input type="text" class="form-control input-sm" name="priceFrom" placeholder="{'priceFrom'|translate}"/>
               </div>
               <div class="form-group">
                  <input type="text" class="form-control input-sm" name="priceTo" placeholder="{'priceTo'|translate}"/>
               </div>

               <div class="form-group col-lg-12">
                  <div class="input-group invert">
                     {$types = translate('types', 'orderPayment') + translate('typesPOS', 'orderPayment')}
                     {print_select name="types[]" var=$types param="multiple='multiple' data-placeholder=\"{'paymentType'|translate}\""}
                     {inversion field="types"}
                  </div>
               </div>

               <div class="form-group col-lg-12">
                  <div class="input-group invert">
                     {$statuses = translate('statuses', 'orderPayment')}
                     {print_select name="status[]" var=$statuses param="multiple='multiple' data-placeholder=\"{'status'|translate}\""}
                     {inversion field="status"}
                  </div>
               </div>

               <div class="form-group col-lg-12">
                  <div class="input-group invert">
                     <select data-autocomplete="admins" name="admins[]" multiple="multiple" class="selecter"
                             data-placeholder="{'admin'|translate}"></select>
                     {inversion field="admins"}
                  </div>
               </div>

               {if $module.POS || $module.NEW_POS}
                  <div class="form-group">
                     <div class="input-group invert">
                        <select data-autocomplete="pos" name="pos[]" multiple='multiple' class="selecter"
                                data-placeholder="{'PointOfSale'|translate}"></select>
                        {inversion field="pos"}
                     </div>
                  </div>
               {/if}

               <div class="form-group">
                  <div class="input-group invert">
                     <input type="text" class="form-control input-sm" name="note" value="" placeholder="{'note'|translate}">
                     {inversion field="note"}
                  </div>
               </div>

               <div class="form-group">
                  <input type="text" class="form-control input-sm disable-spinner" name="idCode" value=""
                         placeholder="{'searchCodeOrId'|translate:"orders"}">
               </div>

               <div class="form-group">
                    <input type="reset" class="btn btn-danger btn-sm" value="{'Delete'|translate}" />
                    <input type="submit" class="btn btn-primary btn-sm search" value="{'Search'|translate}" />
                </div>
            </form>
        </ul>
    </ul>
    <script type="text/javascript">
        $(function(){
           $('[data-storage]').each( function(){
                 var $input = $(this);
                 var $data_type = $(this).data('storage');

                 var checked = JSON.parse(localStorage.getItem("order_payments_show_in_" + $data_type));
                 if (checked){
                    $input.prop('checked', true);
                 }
             }
           );

            $(document).on('click', '[data-storage]', function(){
                var $input = this;
                var $data_type = $(this).data('storage');

                if ($input.checked){
                    localStorage.setItem("order_payments_show_in_" + $data_type, true);
                }else{
                    localStorage.setItem("order_payments_show_in_" + $data_type, false);
                }
            });

           var $ranges = $('button[data-range]'),
               $jumps = $('button[data-jump]'),
               range = "week";

           function getRange()
           {
              return $ranges.filter('.active').data('range');
           }

           function getDateRange()
           {
              return [$("#dateFrom").datepicker('getDate'), $("#dateTo").datepicker('getDate')];
           }

           function setDateRange(dateFrom, dateTo)
           {
              if (dateFrom)
                 $("#dateFrom").datepicker('setDate', dateFrom);

              if (dateTo)
                 $("#dateTo").datepicker('setDate', dateTo);

              $("form").submit()
           }

           function getAmount(date, direction)
           {
              switch (getRange()) {
                 case 'week':
                    return 7;
                    break;
                 case 'month':
                    return  daysInMonth(date.getMonth() + direction, date.getYear());
                    break;
              }
           }

           function getdate(dates, first){
              switch (getRange()) {
                 case 'week':
                    if (first){
                       return dates.getDate() - dates.getDay() + 1;
                    }else{
                        return dates.getDate()  + (getAmount(dates, 0) - dates.getDay());
                    }
                    break;
                 case 'month':
                    if (first){
                       return 1;
                    }else{
                       return daysInMonth(dates.getMonth(), dates.getYear()) - 1;
                    }
                    break;
              }
           }

           function movedate(dates, first, direction){
              switch (getRange()) {
                 case 'week':
                    if (first) {
                       return dates.getDate() + getAmount(dates, direction) * direction;
                    } else {
                       return dates.getDate() + getAmount(dates, direction) * direction;
                    }
                    break;
                 case 'month':
                    if (direction == -1) {
                       if (first) {
                          return dates.getDate() + getAmount(dates, 0) * direction;
                       } else {
                          return dates.getDate() + getAmount(dates, direction) * direction;
                       }
                    }else{
                       if (first) {
                          return dates.getDate() + getAmount(dates, direction) * direction;
                       } else {
                          return dates.getDate() + getAmount(dates, 0) * direction;
                       }
                    }
                    break;
              }
           }

           function daysInMonth(month,year) {
              return new Date(year, month, 0).getDate();
           }

           $ranges.click(function() {
              $ranges.removeClass('active');
              $(this).addClass('active');
              var dates = getDateRange();

              dates[0] = new Date(dates[1]);
              dates[0].setDate(getdate(dates[0], true));

              dates[1].setDate(getdate(dates[1], false));

              setDateRange.apply(null, dates)
           });
           $ranges.filter('[data-range='+range+']').click();

           $jumps.click(function() {
              var direction = parseInt($(this).data('jump'));

              var dates = getDateRange();

              dates[0].setDate(movedate(dates[0], true, direction));

              dates[1].setDate(movedate(dates[1], false, direction));

              setDateRange.apply(null, dates);
           });
        });
    </script>
{/block}