<div class="row panel-informativo">
  <div class="col-12">
    <div class="row titulares">
      <div class="col-12 col-sm numero-pedido text-center text-md-left border border-white align-middle ng-binding ng-scope">
        Recepción
        <button
          class="btn btn-xs btn-outline-light float-right"
          type="button"
          ng-click="$ctrl.busqueda()"
          ng-if="$ctrl.busqueda"
          title="Buscar"
        >
        <i class="fa fa-search"></i>
        </button>
      </div>
      <div class="col-7 col-sm border border-white align-middle">
        Fecha:
        <span
        ng-click="datepickerAbierto = true"
        >&nbsp;{{ fecha | date: 'dd/MM/yyyy' }}</span>
      </div>
      <div class="col-5 col-sm border border-white border-right-0 align-middle">
        Hora:
        <span
        ng-click="datepickerAbierto = true"
        >&nbsp;{{ fecha | date: 'shortTime'}}</span>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <form class="col-12 col-sm-10">
    <div class="row border">
      <div class="col-6 col-sm-3 d-flex">
        <strong>Letra Factura:&nbsp;</strong>
        <label>{{cabecera.TIP}}</label>
      </div>
      <div class="col-6 col-sm-3 d-flex">
        <strong>Tipo Factura:&nbsp;</strong>
        <label>{{cabecera.TCO}}</label>
      </div>
      <div class="col-6 col-sm-3 d-flex">
        <strong>Sucursal:&nbsp;</strong>
        <label>{{cabecera.SUC}}</label>
      </div>
      <div class="col-6 col-sm-3 d-flex">
        <strong>Número:&nbsp;</strong>
        <label>{{cabecera.NCO}}</label>
      </div>
      <div class="col-6 col-sm-3 d-flex">
        <strong>Cuit:&nbsp;</strong>
        <label>{{cabecera.CUI}}</label>
      </div>
      <div class="col-12 col-sm-3 d-flex">
        <strong>Nombre:&nbsp;</strong>
        <label>{{cabecera.NOM}}</label>
      </div>
    </div>
    <div class="row border">
      <div class="col-4">
        <button
        type="button"
        class="btn btn-outline-secondary btn-sm"
        [ngClass]="{'active': estadoArticulos == 'pendiente'}"
        (click)="estadoArticulos = 'pendiente'; paginaActiva = 1; filter = '';">
        Pendientes&nbsp;({{getCantidadArticulosByEstado('pendiente')}})
      </button>
    </div>
    <div class="col-4">
      <button
      type="button"
      class="btn btn-outline-success btn-sm"
      [ngClass]="{'active': estadoArticulos == 'aprobado'}"
      (click)="estadoArticulos = 'aprobado'; paginaActiva = 1; filter = '';">
      Aprobados&nbsp;({{getCantidadArticulosByEstado('aprobado')}})
      </button>
    </div>
    <div class="col-4">
      <button
      type="button"
      class="btn btn-outline-danger btn-sm"
      [ngClass]="{'active': estadoArticulos == 'rechazado'}"
      (click)="estadoArticulos = 'rechazado'; paginaActiva = 1; filter = '';">
      Rechazados&nbsp;({{getCantidadArticulosByEstado('rechazado')}})
    </button>
  </div>
</div>
<div class="row">
  <input
      type="text"
      class="form-control-sm col-12"
      placeholder="Busque producto por nombre, codigo"
      [(ngModel)]="filter"
      [ngModelOptions]="{standalone: true}"/>
    </div>
    <div class="row">
      <table class="table table-dark">
        <thead>
          <tr>
            <th *ngIf="estadoArticulos != 'rechazado'">Rechazar</th>
            <th>Producto</th>
            <th>Cantidad</th>
            <th *ngIf="estadoArticulos != 'aprobado'">Aceptar</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let articulo of getPaginaFiltro()" [ngClass]="{'bg-success': articulo.estado == 'aprobado'}">
            <th *ngIf="estadoArticulos != 'rechazado'"><button type="button" class="" (click)="articulo.estado = 'rechazado'">
              <i class="fa fa-window-close"></i>
            </button></th>
            <th>{{articulo.LI0}}</th>
            <th *ngIf="!articulo.input" (click)="articulo.input = true">
              {{articulo.recibido ? articulo.recibido + '/' : ''}}{{articulo.CAN}}</th>
              <th *ngIf="articulo.input">
                <input
                class="form-control-sm col-12"
                type="number"
                (keyup.enter)="articulo.input = false"
                [(ngModel)]="articulo.recibido"
                [ngModelOptions]="{standalone: true}"
                autofocus/>
                /{{articulo.CAN}}
              </th>
              <th *ngIf="estadoArticulos != 'aprobado'">
                <button type="button" class="" (click)="articulo.estado = 'aprobado'">
                  <i class="fa fa-check"></i>
                </button>
              </th>
            </tr>
            <tr>
              <th colspan="3" *ngIf="articulosFiltro.length == 0">Por el momento no hay elementos aquí</th>
            </tr>
          </tbody>
          <tfoot>
            <nav *ngIf="articulosFiltro.length > 0" class="mr-auto position-absolute mb-5">
              <ul class="pagination pagination-sm justify-content mb-0">
                <li class="page-item" [ngClass]="{'disabled': paginaActiva == 1}">
                  <a class="page-link" href="javascript:void();" (click)="paginaActiva = paginaActiva - 1">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Anterior</span>
                  </a>
                </li>
                <li
                class="page-item"
                *ngFor="let pagina of paginas; index as i"
                [ngClass]="{'active': pagina == paginaActiva}"
                >
                <a
                class="page-link"
                href="javascript:void();"
                (click)="paginaActiva = pagina"
                >{{pagina}}</a>
              </li>
              <li class="page-item" [ngClass]="{'disabled': paginaActiva == paginas.length}">
                <a class="page-link" href="javascript:void();" (click)="paginaActiva = paginaActiva + 1">
                  <span aria-hidden="true">&raquo;</span>
                  <span class="sr-only">Siguiente</span>
                </a>
              </li>
            </ul>
          </nav>
        </tfoot>
      </table>
    </div>
  </form>
  <app-acciones (guardar)="guardarComprobante()"></app-acciones>
</div>