<section class="content">
    <div class="container-fluid">
        <div class="card">
            <p-table #dt [value]="listConceptoLiq" [rows]="10" [paginator]="true" [loading]="loading"
                     [globalFilterFields]="[
                        'idConceptoLiquidacion',
                        'nombreConceptoLiq',
                        'precio',
                        'idIva',
                        'estadoConceptoLiq'
                     ]"
                     responsiveLayout="scroll" [(selection)]="selectedConcepto"
                     [rowHover]="true" dataKey="idConceptoLiquidacion"
                     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [showCurrentPageReport]="true">
                <ng-template pTemplate="caption">
                    <div class="flex justify-content-between flex-wrap">
                        <div>
                            <button type="button" pButton pRipple icon="pi pi-file-excel" (click)="exportExcel()"
                                    class="p-button-sm p-button-outlined p-button-success p-mr-2 m-1" pTooltip="XLS"
                                    tooltipPosition="bottom"></button>
                            <button type="button" pButton pRipple icon="pi pi-file-pdf" (click)="exportPdf()"
                                    class="p-button-sm p-button-outlined p-button-danger p-mr-2 m-1" pTooltip="PDF"
                                    tooltipPosition="bottom"></button>
                            <button pButton pRipple label="Delete" icon="pi pi-trash" class="p-button-danger p-button-sm m-1"
                                    (click)="deleteSelectedBancos()" pTooltip="Eliminar Seleccionados" tooltipPosition="right"
                                    [disabled]="!selectedConcepto || !selectedConcepto.length"></button>
                            <button pButton label="Clear" class="p-button-outlined p-button-sm m-1" icon="pi pi-filter-slash"
                                    (click)="clear(dt)" pTooltip="Quitar Filtros" tooltipPosition="right"></button>
                        </div>

                        <label class="text-center">BANCOS</label>
                        <span class="p-input-icon-left ">
              <i class="pi pi-search"></i>
              <input pInputText type="text" class="p-inputtext-sm"
                     (input)="dt.filterGlobal($event.target.valueOf(), 'contains')" placeholder="Busqueda General" />
            </span>
                    </div>
                </ng-template>
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width: 3rem">
                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                        </th>
                        <th pSortableColumn="idConceptoLiquidacion">
                            <div class="flex justify-content-between align-items-center"> <bold  style="font-weight: bold;">&#8470;</bold>
                                <p-sortIcon field="idConceptoLiquidacion"></p-sortIcon>
                                <p-columnFilter type="text" field="idConceptoLiquidacion" display="menu"></p-columnFilter>
                            </div>
                        </th>
                        <th pSortableColumn="nombreConceptoLiq">
                            <div class="flex justify-content-between align-items-center">Nombre
                                <p-sortIcon field="nombreConceptoLiq"></p-sortIcon>
                                <p-columnFilter type="text" field="nombreConceptoLiq" display="menu"></p-columnFilter>
                            </div>
                        </th>

                        <th pSortableColumn="precio">
                            <div class="flex justify-content-between align-items-center">Precio
                                <p-sortIcon field="precio"></p-sortIcon>
                                <p-columnFilter type="text" field="precio" display="menu"></p-columnFilter>
                            </div>
                        </th>

                        <th pSortableColumn="idIva">
                            <div class="flex justify-content-between align-items-center">Iva
                                <p-sortIcon field="idIva"></p-sortIcon>
                                <p-columnFilter type="text" field="idIva" display="menu"></p-columnFilter>
                            </div>
                        </th>

                        <th pSortableColumn="estadoConceptoLiq">
                            <div class="flex justify-content-between align-items-center">Estado
                                <p-sortIcon field="estadoConceptoLiq"></p-sortIcon>
                                <p-columnFilter type="text" field="estadoConceptoLiq" display="menu"></p-columnFilter>
                            </div>
                        </th>


                        <th>Acciones</th>
                    </tr>

                </ng-template>
                <ng-template pTemplate="body" let-item let-rowIndex="rowIndex" >
                    <tr>
                        <td>
                            <p-tableCheckbox [value]="item"></p-tableCheckbox>
                        </td>
                        <td>{{rowIndex+1}}</td>
                        <td>{{item.nombreConceptoLiq}}</td>
                        <td>{{item.precio}}</td>
                        <td>{{item.idIva}}</td>
                        <td   >  <mark [ngClass]="item.estadoConceptoLiq == 'ACTIVO'
                            ? 'border-green-500' : 'border-red-500' ">{{item.estadoConceptoLiq}}</mark></td>

                        <td>
                            <button pButton pRipple icon="pi pi-pencil"
                                    class="p-button-rounded p-button-warning p-button-text p-button-sm p-mr-2" (click)="editConcepto(item)"
                                    pTooltip="Editar" tooltipPosition="left"   ></button>
                            <button pButton pRipple icon="pi pi-trash"
                                    class="p-button-rounded p-button-danger p-button-text p-button-sm" (click)="deleteBancos(item)"
                                    pTooltip="Eliminar" tooltipPosition="left" *ngIf="item.estadoConceptoLiq =='ACTIVO'" ></button>
                        </td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="summary">
                    <div class="p-d-flex p-ai-center p-jc-between">
                        Registros Totales: {{listConceptoLiq ? listConceptoLiq.length : 0 }}.
                    </div>
                </ng-template>
            </p-table>
        </div>
    </div>
</section>
