<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" (click)="busquedaComprobantes()"
          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" *ngIf="showCabecera">
      <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-6 d-flex">
        <strong>Nombre:&nbsp;</strong>
        <label>{{cabecera['NOM']}}</label>
      </div>
    </div>
    <div>
      <button type="button" class="btn btn-dark form-control" (click)="showCabecera = !showCabecera">
        <i class="fa" [ngClass]="{'fa-chevron-down': !showCabecera, 'fa-chevron-up': showCabecera }"></i>
      </button>
    </div>
    <div class="row border pr-2">
      <div class="col-6">
        <button type="button" class="btn btn-outline-success btn-sm"
          [ngClass]="{'active': estadoArticulos == 'modificado'}"
          (click)="estadoArticulos == 'modificado' ?  estadoArticulos = undefined : estadoArticulos = 'modificado'; filter = '';">
          Modificados&nbsp;({{getCantidadArticulosByEstado('modificado')}})
        </button>
      </div>
      <div class="col-6">
        <button type="button" class="btn btn-outline-danger btn-sm"
          [ngClass]="{'active': estadoArticulos == 'rechazado'}"
          (click)="estadoArticulos == 'rechazado' ?  estadoArticulos = undefined : estadoArticulos = 'rechazado'; 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>Producto</th>
            <th>Cantidad</th>
            <th></th>
          </tr>
        </thead>
        <tbody class="scroll-tabla w-100 mb-5">
          <tr *ngFor="let articulo of getPaginaFiltro();" class="row mx-0" [ngClass]="{'bg-danger': articulo.estado == 'rechazado'}">
            <td class="col-5">{{articulo.TIO.trim() || articulo.LI0}}</td>
            <td
              class="col-5"
              *ngIf="!articulo.input"
              (click)="articulo.estado != 'rechazado' ? articulo.input = true : false"
            >
              {{articulo.recibido ? articulo.recibido + '/' : ''}}{{articulo.CAN}}
            </td>
            <td *ngIf="articulo.input" class="col-5">
              <input
                class="form-control-sm col-10"
                type="number"
                (focus)="$event.target.select();"
                (keyup.enter)="articulo.input = false; articulo.recibido = articulo.tempRecibido"
                [(ngModel)]="articulo.tempRecibido"
                [ngModelOptions]="{standalone: true}" autofocus/>
              /{{articulo.CAN}}
            </td>
            <td class="col-2" *ngIf="articulo.estado != 'rechazado'">
              <button type="button"
                (click)="articulo.estado = 'rechazado'">
                <i class="fa fa-window-close"></i>
              </button>
            </td>
            <td class="col-2" *ngIf="articulo.estado == 'rechazado'">
              <button type="button" (click)="articulo.estado = undefined">
                <i class="fa fa-check"></i>
              </button>
            </td>
          </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()" [(saveLoading)]="saveLoading"></app-acciones>
</div>