<div class="row block-header">
  <div class="col-12">
    <h2><?= $this -> category['name'];?></h2>
    <small>lista <strong>operacji</strong></small>
  </div>
</div>
<div class="row">
  <div class="col-12 col-lg-3">
    <a href="/finances/main_view/" class="btn btn-success"><i class="fa fa-reply"></i>Wstecz</a>
    <a href="/finances/operation_edit/category-id=<?= $this -> category['id'];?>&return=category" class="btn btn-primary" title="dodaj operację">
      <i class="fa fa-plus"></i>dodaj operację
    </a>
  </div>
  <div class="col-12 col-lg-9">
    <div class="input-group finance-calendar float-right">
      <span class="input-group-addon cursor date-range-icon">
        <i class="fa fa-calendar"></i>
      </span>
      <input type="text" name="date" class="form-control date-range" style="width: 200px; margin-top: 0px; height: 33px;" value="<?= $this -> date_from . ' - ' . $this -> date_to;?>" />
    </div>
  </div>
</div>
<div class="row categories">
  <div class="col-12">
    <table class="table table-sm" style="background: #FFF;">
      <thead>
        <tr class="dark">
          <th class="text-right" style="width: 100px;">Data</th>
          <th class="text-right" style="width: 100px;">Kwota</th>
          <th>Opis</th>
          <th>Tagi</th>
        </tr>
      </thead>
      <tbody>
        <? if ( is_array( $this -> operations ) ): foreach ( $this -> operations as $operation ):?>
          <tr>
            <td class="text-right">
              <?= $operation['date'];?>
            </td>
            <td class="text-right">
              <?= \S::number_display( $operation['amount'] );?>
            </td>
            <td>
              <?= $operation['description'];?>
            </td>
            <td class="pl15 category-name">
              <?
                $tags_value = '';
                foreach ( $operation['tags'] as $tag )
                {
                  $tags_value .= $tag['tag'];

                  if ( $tag != end( $operation['tags'] ) )
                    $tags_value .= ', ';
                };
                echo $tags_value;
              ?>
              <a href="/finances/operation_edit/category-id=<?= $operation['category_id'];?>&operation-id=<?= $operation['id'];?>" class="green" title="edytuj operację"><i class="fa fa-cog"></i></a>
              <a href="/finances/operation_delete/category-id=<?= $operation['category_id'];?>&operation-id=<?= $operation['id'];?>" class="red operation-delete" title="usuń operację"><i class="fa fa-times"></i></a>
            </td>
          </tr>
          <? $total = $total + $operation['amount'];?>
        <? endforeach; endif;?>
        <tr>
          <th class="text-right" colspan='2'>
            <?= \S::number_display( $total );?>
          </th>
          <th colspan="2"></th>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<script type="text/javascript">
  $( function()
  {
    $( 'body' ).on( 'click', '.operation-delete', function(e)
    {
      e.preventDefault();
      var href = $( this ).attr( 'href' );

      $.confirm(
      {
        title: 'Potwierdź',
        type: 'orange',
        columnClass: 'col-md-8 col-md-offset-2 col-12',
        closeIcon: true,
        closeIconClass: 'fa fa-close',
        content: 'Na pewno chcesz oznaczyć wybraną operacje?',
        theme: 'modern',
        buttons:
        {
          submit:
          {
            text: '<i class="fa fa-check"></i>Zatwierdź',
            btnClass: 'btn-success',
            keys: ['enter'],
            action: function ()
            {
              document.location.href = href;
            }
          },
          cancel:
          {
            text: '<i class="fa fa-close"></i>Anuluj',
            btnClass: 'btn-danger',
            action: function() {}
          }
        }
      });

      return false;
    });

    $( 'body' ).on( 'change', '.date-range', function()
    {
      document.location.href = '/finances/main_view/dates=' + $( this ).val();
    });

    jQuery( 'body' ).on( 'click', '.date-range-icon', function()
    {
      $( this ).parents( '.input-group' ).children( 'input' ).trigger( 'click' );
    });
  });
</script>