<section class="content">
    <div class="container-fluid">
        <div class="card">
            <p-table #dt [value]="listCretencion" [rows]="10" [paginator]="true" [loading]="loading"
                     [globalFilterFields]="[
                        'codigoCRetencion',
                        'fechaComprobanteRetString',
                        'totalRet',
                        'estadoSriRet',
                     ]"
                     responsiveLayout="scroll" [(selection)]="selectedCretencion"
                     [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 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">COMPROBANTES RETENCIÓN</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="codigoCRetencion">
                            <div class="flex justify-content-between align-items-center"> <bold  style="font-weight: bold;">Comprobante</bold>
                                <p-sortIcon field="codigoCRetencion"></p-sortIcon>
                                <p-columnFilter type="text" field="codigoCRetencion" display="menu"></p-columnFilter>
                            </div>
                        </th>
                        <th pSortableColumn="fechaComprobanteRet">
                            <div class="flex justify-content-between align-items-center">FECHA COMPROBANTE
                                <p-sortIcon field="fechaComprobanteRet"></p-sortIcon>
                                <p-columnFilter type="text" field="fechaComprobanteRet" display="menu"></p-columnFilter>
                            </div>
                        </th>

                        <th pSortableColumn="totalRet">
                            <div class="flex justify-content-between align-items-center">TOTAL RETENCIÓN
                                <p-sortIcon field="totalRet"></p-sortIcon>
                                <p-columnFilter type="text" field="totalRet" display="menu"></p-columnFilter>
                            </div>
                        </th>

                        <th pSortableColumn="estadoSriRet">
                            <div class="flex justify-content-between align-items-center">ESTADO SRI
                                <p-sortIcon field="estadoSriRet"></p-sortIcon>
                                <p-columnFilter type="text" field="estadoSriRet" 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>{{item.codigoCRetencion}}</td>
                        <td>{{item.fechaComprobanteRetString}}</td>
                        <td>{{item.totalRet}}</td>
                        <td>{{item.estadoSriRet}}</td>


                        <td>



                            <button pButton pRipple icon="pi pi-print"
                                    class="p-button-rounded p-button-warning p-button-text p-button-sm p-mr-2"
                                    pTooltip="Reporte PDF" tooltipPosition="left"  (click)="generarReporte(item)"  ></button>
                        </td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="summary">
                    <div class="p-d-flex p-ai-center p-jc-between">
                        Registros Totales: {{listCretencion ? listCretencion.length : 0 }}.
                    </div>
                </ng-template>
            </p-table>
        </div>
    </div>
</section>

<p-dialog    [contentStyle]="{'overflow': 'visible'}"  header="" [(visible)]="visibleFormato" [modal]="true" [style]="{ width: '65vw' }" [draggable]="true" [resizable]="true" >
    <div id="printComp">

    <p-header  >
        <h4 class="">Comprobante</h4>
    </p-header>

    <div class="card">

        <div class="ui-fluid formgrid grid"  >
            <div class="field col-12 md:col-2">
                <img id="app-logo" class="logo-image" src="../../../assets/img/epn.png" alt="diamond-ng" width="60" height="70"/>
            </div>
            <div class="field col-12 md:col-4">
                <h4><b><label >ESCUELA POLITÉCNICA NACIONAL</label></b></h4>
                <h5><b><label>RUC. 1760005620001</label></b></h5>
                <h6><b><label>CONTRIBUYENTE ESPECIAL RESOLUCIÓN 1308</label></b></h6>
                <h6><b><label>AGENTE DE RETENCIÓN RESOLUCIÓN 1308</label></b></h6>
            </div>
            <div class="field col-12 md:col-6">
                <h6><b><label>Dirección: La Floresta, Ladrón de Guevara E11-253 y Andalucia</label></b></h6>
                <h6><b><label>Telf: 2507-144 / 2527-817 / Quito </label></b></h6>
                <h5><b><label>COMPROBANTE DE RETENCIÓN: {{cretencionSelect.codigoCRetencion}}</label></b></h5>
            </div>
        </div>
    </div>
    <p-divider></p-divider>
    <div class="card">
        <div class="ui-fluid formgrid grid"  >
            <div class="field col-12 md:col-2">
                <h6><b><label>Sr.(es):</label></b></h6>
            </div>
            <div class="field col-12 md:col-4">
                {{clienteDTO.nombre}}
            </div>
            <div class="field col-12 md:col-2">
                <h6><b><label>Fecha Emisión:</label></b></h6>
            </div>
            <div class="field col-12 md:col-4">
                {{cretencionSelect.fechaComprobanteRetString}}
            </div>
            <div class="field col-12 md:col-2">
                <h6><b><label>R.U.C.:</label></b></h6>
            </div>
            <div class="field col-12 md:col-4">
                {{clienteDTO.cedula}}
            </div>
            <div class="field col-12 md:col-2">
                <h6><b><label>Dirección:</label></b></h6>
            </div>
            <div class="field col-12 md:col-4">
                {{clienteDTO.direccion}}
            </div>
            <div class="field col-12 md:col-2">
                <h6><b><label>Telf.:</label></b></h6>
            </div>
            <div class="field col-12 md:col-4">
                {{clienteDTO.telefono}}
            </div>
        </div>
    </div>
    <p-divider></p-divider>
    <p-table [value]="listDetalleCRetencion" dataKey="idDetalleCompRet" styleClass="p-datatable-gridlines" [tableStyle]="{ 'min-width': '50rem' }">
        <ng-template pTemplate="caption">

        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <th>Base Imponible para la Retención  ($)</th>
                <th>Impuesto</th>
                <th>Código del Impuesto</th>
                <th>% Retención</th>
                <th>Valor Retenido ($)</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-detalle let-editing="editing" let-ri="rowIndex">
            <tr [pEditableRow]="detalle">
                <td>
                    {{ detalle.valorRetencion | currency: 'USD' }}
                </td>
                <td>{{ detalle.idCatalogoImp  ==3 ? 'I.V.A.': 'Impuesto a la Renta' }}</td>
                <td>
                    {{ detalle.codigoImpuesto}}
                </td>
                <td>
                    {{ detalle.porcentajeRetencion }}
                </td>
                <td>{{ detalle.valorRetenido | currency: 'USD'}}</td>

            </tr>
        </ng-template>
        <ng-template pTemplate="footer">
            <tr>
                <td colspan="4" class="text-right">Total a Retener</td>
                <td>{{valorTotalDetalle  | currency: 'USD'}}</td>
            </tr>
        </ng-template>
    </p-table>

    <p-divider></p-divider>

    <br/><br/><br/><br/>


    <div class="ui-fluid formgrid grid"  style="text-align: center" >
        <div class="field col-12 md:col-6">
            <h6><b><label>---------------------------------------</label></b></h6>
        </div>

        <div class="field col-12 md:col-6">
            <h6><b><label>---------------------------------------</label></b></h6>
        </div>

        <div class="field col-12 md:col-6">
            <h6><b><label>Firma del Agente de Retención</label></b></h6>
        </div>

        <div class="field col-12 md:col-6">
            <h6><b><label>Firma Contribuyente</label></b></h6>
        </div>
    </div>

        <div class="card flex justify-content-center">
            <div class="caja-boton-principal">
                <button pButton label="Agregar Detalle" class="p-button p-button-lg m-1 p-button-info bg-blue-900 " icon="pi pi-plus"
                        (click)="printComprobante()"     pTooltip="Imprimir"  tooltipPosition="right"></button>
            </div>

        </div>



    </div>


</p-dialog>
