<p-dialog [contentStyle]="{'overflow': 'visible'}" header="" [(visible)]="visible" [modal]="true"
          [style]="{ width: '80%', height:'600px', 'overflow-y': 'auto', 'overflow-x': 'hidden' }"  [maximizable]="true"    [position]="position"
          [breakpoints]="{ '960px': '75vw' }" [draggable]="true" [resizable]="false" xmlns:p="http://www.w3.org/1999/html">

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

    <div class="card flex justify-content-center">
        <div class="flex flex-wrap gap-3">
            <div class="flex align-items-center">
                <p-radioButton name="cliente" value="1" [(ngModel)]="tipoCliente" inputId="1"></p-radioButton>
               <p> Docente</p>
            </div>

            <div class="flex align-items-center">
                <p-radioButton name="cliente" value="2" [(ngModel)]="tipoCliente" inputId="2"></p-radioButton>
               <p> Cliente</p>
            </div>

            <div class="caja-boton-principal" >
                <button pButton label="Buscar" class="p-button p-button-lg m-1 p-button-info bg-blue-900 " icon="pi pi-search"
                        (click)="busquedaCliente()"    pTooltip="Buscar"  tooltipPosition="right"></button>
            </div>


        </div>
    </div>


    <div class="card">
        <div class="field col-12 md:col-12">
        <p-header class="flex align-items-center bg-blue-100 p-1 pb-1 text-black"  >
            <h6>Cliente</h6>
        </p-header></div>

        <p-divider></p-divider>

        <div class="ui-fluid formgrid grid"  >
            <div class="field col-12 md:col-6">
                <b>  Cédula / RUC:</b>
                 <i class="text-1xl mr-2 mb-3">{{clienteSelect.cedula}}</i>
            </div>
            <div class="field col-12 md:col-6">
                <b>  Nombre:</b>
                 <i class="text-1xl mr-2 mb-3">{{clienteSelect.nombre}}</i>
            </div>
            <div class="field col-12 md:col-6">
                <b>  Correo:</b>
                 <i class="text-1xl mr-2 mb-3">{{clienteSelect.correo}}</i>
            </div>
            <div class="field col-12 md:col-6">
                <b> Dirección:</b>
                  <i class="text-1xl mr-2 mb-3">{{clienteSelect.direccion}}</i>
            </div>


        </div>

    </div>


    <div class="card" style="width: 60%">

        <div class="ui-fluid formgrid grid">

            <div class="field col-12 md:col-2"  style="background-color: #103B67;">
                <label style="color: white; vertical-align: bottom">Tipo Comprobante: </label>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                    <p-dropdown [options]="listTipoComp" [(ngModel)]="tipoCompSelect" optionLabel="nombre"></p-dropdown>
                </span>
            </div>

            <div class="field col-12 md:col-2"  style="background-color: #103B67; vertical-align: middle">
                <label style="color: white; vertical-align: middle">Número Comprobante: </label>
            </div>

            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                    <input pInputText id="ftxt-numero-comprobante"
                           type="text" required="true"
                           [(ngModel)]="numCOmp"/>
                        <label for="ftxt-numero-comprobante">* Número Comprobante</label>
                </span>
            </div>

        </div>







        </div>



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

    </div>

    <p-divider></p-divider>

    <div class="card">

        <div class="field col-12 md:col-12">
            <p-header class="flex align-items-center bg-blue-100 p-1 pb-1 text-black"  >
                <h6>Detalles Comprobante de Retención</h6>
            </p-header></div>

        <p-table [value]="listDetalleCRetencion" dataKey="idDetalleCompRet" editMode="row" [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>
                        <p-cellEditor>
                            <ng-template pTemplate="input">

                                <p-inputNumber [showButtons]="true"
                                               required="true"
                                               [minFractionDigits]="2"
                                               [maxFractionDigits]="2"
                                               [(ngModel)]="detalle.valorRetencion"
                                               min="1" >
                                </p-inputNumber>
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{ detalle.valorRetencion | currency: 'USD' }}
                            </ng-template>
                        </p-cellEditor>

                        </td>
                    <td>{{ detalle.nombreSelectImp }}</td>
                    <td>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="detalle.codigoImpuesto">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{ detalle.codigoImpuesto }}
                            </ng-template>
                        </p-cellEditor>
                        </td>
                    <td>
                        <p-cellEditor>
                            <ng-template pTemplate="input">

                                <p-inputNumber mode="decimal"
                                               [useGrouping]="false"
                                               required="true"
                                               [(ngModel)]="detalle.porcentajeRetencion"
                                               min="1"
                                               prefix="%"
                                               [max]="100">
                                </p-inputNumber>
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{ detalle.porcentajeRetencion }}
                            </ng-template>
                        </p-cellEditor>
                       </td>
                    <td>{{ detalle.valorRetenido | currency: 'USD'}}</td>
                    <td>
                        <div class="flex align-items-center justify-content-center gap-2">
                            <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(detalle)" class="p-button-rounded p-button-text"></button>
                            <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(detalle)" class="p-button-rounded p-button-text p-button-success mr-2"></button>
                            <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(detalle, ri)" class="p-button-rounded p-button-text p-button-danger"></button>
                        </div>
                    </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>

        <div class="card flex justify-content-center">
            <div class="caja-boton-principal">
                <button pButton label="Generar Comprobante" class="p-button p-button-lg m-1 p-button-info bg-blue-900 " icon="pi pi-plus"
                        (click)="almacenarCRetencion()"  [disabled]="disableGuardar"    pTooltip="Generar Comprobante"  tooltipPosition="right"></button>
            </div>
        </div>
    </div>
</p-dialog>

<p-dialog    [contentStyle]="{'overflow': 'visible'}"  header="" [(visible)]="visibleBusqCl" [modal]="true" [style]="{ width: '75%' }" [draggable]="true" [resizable]="true" >
    <p-header  >
        <h4 class="">Busqueda Cliente</h4>
    </p-header>

    <br/>

    <div class="card">

        <div class="ui-fluid formgrid grid">
            <div class="field col-12 md:col-2" style="background-color: #103B67;">
                <label for="txtCedulaB" >Cédula / RUC</label>
            </div>
            <div class="field col-12 md:col-4">
                <input type="text" id="txtCedulaB" pInputText [(ngModel)]="cedulaBusqueda" />
            </div>
            <div class="field col-12 md:col-2" style="background-color: #103B67;">
                <label for="txtnombreB" style="color: white; vertical-align: bottom">Nombre</label>
            </div>
            <div class="field col-12 md:col-4">
                <input type="text" id="txtnombreB"
                       pInputText [(ngModel)]="nombreBusqueda" />
            </div>
            <div class="field col-12 md:col-2" style="background-color: #103B67; ">
                <label for="txtapellidoB" style="color: white; vertical-align: bottom">Apellido</label>
            </div>
            <div class="field col-12 md:col-4">
                <input type="text" id="txtapellidoB"
                       pInputText [(ngModel)]="apellidoBusqueda" />
            </div>
            <div class="field col-12 md:col-12" align="center">
                <button pButton label="Buscar" class="p-button p-button-lg m-1 p-button-info bg-blue-900 " icon="pi pi-search"
                        (click)="llenarListCliente()"      pTooltip="Buscar"  tooltipPosition="right"></button>
            </div>

    </div>

        <p-table [value]="listCliente" [tableStyle]="{ 'min-width': '50rem' }" styleClass="p-datatable-gridlines"
                 [paginator]="true"
                 [rows]="2"
                 [showCurrentPageReport]="true"
                 currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                 [rowsPerPageOptions]="[2, 4, 6]">
            <ng-template pTemplate="header">
                <tr>
                    <th>Cédula</th>
                    <th>Nombre</th>
                    <th>Acciones</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-cliente>
                <tr>
                    <td>{{ cliente. cedula}}</td>
                    <td>{{ cliente.nombre }}</td>
                    <td><div class="field col-12 md:col-12" align="center">
                        <button pButton label="Seleccionar" class="p-button p-button-lg m-1 p-button-info bg-blue-900 " icon="pi pi-plus"
                                (click)="cargarCliente(cliente)"      pTooltip="Buscar"  tooltipPosition="right"></button>
                    </div></td>

                </tr>
            </ng-template>
            <ng-template pTemplate="paginatorleft">
                <p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
            </ng-template>
            <ng-template pTemplate="paginatorright">
                <p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
            </ng-template>
        </p-table>

    </div>




</p-dialog>


<p-dialog    [contentStyle]="{'overflow': 'visible'}"  header="" [(visible)]="visibleDetalle" [modal]="true"
             [style]="{ width: '50%' }" [draggable]="true" [resizable]="true" >

    <div class="card">


        <form [formGroup]="formDetalle">
        <div class="p-fluid grid">

            <div class="field col-12 md:col-2" style="background-color: #103B67;">
                <label >Impuesto: </label>


            </div>


            <div class="field col-12 md:col-4" >
                <span class="p-float-label">
                <p-dropdown [options]="listCatalogoImpuesto"
                            formControlName="idCatalogoImp"
                            placeholder="Select Item"
                            [virtualScroll]="true"
                            [(ngModel)]="selectedItemCatalogo"
                            optionLabel="nombreImpuesto"
                            (onChange)="validarSeleccionTIpo()"
                            id="ftxt-catalogo-imp"
                            [virtualScrollItemSize]="38"></p-dropdown>
                <label style="color:  rgba(0, 0, 0, 0.6);" for="ftxt-catalogo-imp">* Impuesto</label>


                </span>
            </div>


            <div class="field col-12 md:col-2" *ngIf="renderImpuestoRenta == true" style="background-color: #103B67;">
                <label >Código Impuesto Renta: </label>


            </div>



            <div class="field col-12 md:col-4" *ngIf="renderImpuestoRenta == true">
                <span class="p-float-label">
                <p-dropdown [options]="listPorcentajeRet"
                            formControlName="nombCatImp"
                            placeholder="Select Item"
                            [virtualScroll]="true"
                            [(ngModel)]="selectPorcentajeImp"
                            (onChange)="cargarValorIvaImpRenta()"
                            optionLabel="detallePorcentaje"
                            id="ftxt-porcentaje-imp"
                            [virtualScrollItemSize]="38"></p-dropdown>
                <label style="color:  rgba(0, 0, 0, 0.6);" for="ftxt-porcentaje-imp">* Código Impuesto Renta</label>
                </span>
            </div>


            <div class="field col-12 md:col-2" *ngIf="renderIngCodigoImp == false" style="background-color: #103B67;">
                <label >Código Impuesto: </label>
            </div>
            <div class="field col-12 md:col-4" *ngIf="renderIngCodigoImp == false">
                <span class="p-float-label">
                    <input pInputText id="ftxt-codigo-impuesto"
                           type="text" required="true"
                           formControlName="codigoImpuesto">
                        <label for="ftxt-codigo-impuesto">* Código Impuesto</label>
                </span>
            </div>
            <div class="field col-12 md:col-2" style="background-color: #103B67;">
                <label >Valor Retención: </label>
            </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
               <p-inputNumber [showButtons]="true"
                              id="ftxt-valor-retencion"
                              required="true"
                              formControlName="valorRetencion"
                              [minFractionDigits]="2"
                              [maxFractionDigits]="2"
                              min="0" >
               </p-inputNumber>

                </span>
            </div>

            <div class="field col-12 md:col-2" style="background-color: #103B67;">
                <label >Porcentaje retención: </label>
                </div>
            <div class="field col-12 md:col-4">
                <span class="p-float-label">
                     <p-inputNumber mode="decimal"
                                    [useGrouping]="false"
                                    id="ftxt-porcentaje-ret"
                                    required="true"
                                    formControlName="porcentajeRetencion"
                                    min="0"
                                    prefix="%"
                                    [max]="100">
                    </p-inputNumber>


                </span>
            </div>


        </div>
        </form>



        <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)="guardarDetalleCRetencion()"  [disabled]="disableDetalle"    pTooltip="Agregar Detalle"  tooltipPosition="right"></button>
            </div>

        </div>

    </div>



</p-dialog>




<p-card>
    <p-header class="flex align-items-center bg-blue-900 p-3 pb-1 text-white"  >
        <h4>Comprobante</h4>
    </p-header>
    <div class="caja-boton-principal">
        <button pButton label="Agregar Comprobante" class="p-button p-button-lg m-1 p-button-info bg-blue-900 " icon="pi pi-plus"
           (click)="registrarNuevo()"      pTooltip="Agregar Comprobante"  tooltipPosition="right"></button>
    </div>
    <p-divider></p-divider>



    <app-cretencion-table [listCretencion]="listCretencion" [loading]="loading"></app-cretencion-table>
</p-card>





<p-dialog  [(visible)]="isLoading" [resizable]="true" [style] = "{'background-color':'white'}" header="Cargando Datos">
    <p-progressSpinner aria-label="Loading"></p-progressSpinner>
</p-dialog>
