<h2 mat-dialog-title> Detalles del Grupo </h2>
<mat-dialog-content style="padding: 0;">
    <mat-stepper>
        <mat-step label="Detalles del Grupo">
            <mat-grid-list cols="3" rowHeight="82px" [formGroup]="formGroup">
                <mat-grid-tile colspan="2">
                    <mat-form-field appearance="outline" class="itemInput">
                        <mat-label> Nombre del Proveedor </mat-label>
                        <input matInput formControlName="nombreProveedor" readonly />
                    </mat-form-field>
                </mat-grid-tile>
                <mat-grid-tile colspan="1">
                    <mat-form-field appearance="outline" class="itemInput">
                        <mat-label> Precio Total </mat-label>
                        <input matInput formControlName="precioTotal" readonly />
                    </mat-form-field>
                </mat-grid-tile>
                <mat-grid-tile colspan="1">
                    <mat-form-field appearance="outline" class="itemInput">
                        <mat-label> Cantidad de Productos </mat-label>
                        <input matInput formControlName="cantidadProductos" readonly />
                    </mat-form-field>
                </mat-grid-tile>
                <mat-grid-tile colspan="1">
                    <mat-form-field appearance="outline" class="itemInput">
                        <mat-label>Fecha de Emisión</mat-label>
                        <input matInput formControlName="fechaEmision" readonly />
                    </mat-form-field>
                </mat-grid-tile>
                <mat-grid-tile colspan="1">
                    <mat-form-field appearance="outline" class="itemInput">
                        <mat-label> Usuario de Registro </mat-label>
                        <input matInput formControlName="usuarioRegistro" readonly />
                    </mat-form-field>
                </mat-grid-tile>
                <mat-grid-tile colspan="1">
                    <mat-form-field appearance="outline" class="itemInput">
                        <mat-label> Despacho </mat-label>
                        <input matInput formControlName="despacho" readonly />
                    </mat-form-field>
                </mat-grid-tile>
                <mat-grid-tile colspan="1">
                    <mat-form-field appearance="outline" class="itemInput">
                        <mat-label> Método de Pago </mat-label>
                        <input matInput formControlName="metodoPago" readonly />
                    </mat-form-field>
                </mat-grid-tile>
                <mat-grid-tile colspan="1">
                    <mat-form-field appearance="outline" class="itemInput">
                        <mat-label> Propósito </mat-label>
                        <input matInput formControlName="proposito" readonly />
                    </mat-form-field>
                </mat-grid-tile>
            </mat-grid-list>
            <div align="end" style="margin-top: 20px;">
                <button mat-button color="warn" class="red_primary_font mr-8" mat-dialog-close cdkFocusInitial> Cerrar </button>
                <button mat-button color="primary" matStepperNext> Siguiente </button>
            </div>
        </mat-step>
        <mat-step label="Lista de productos">
            <table mat-table [dataSource]="dataSource">

                <ng-container matColumnDef="NO">
                    <th mat-header-cell *matHeaderCellDef> No </th>
                    <td mat-cell *matCellDef="let element; let i = index"> {{ i + 1 }} </td>
                    <td mat-footer-cell *matFooterCellDef class="border-td"> </td>
                </ng-container>

                <ng-container matColumnDef="MODELO">
                    <th mat-header-cell *matHeaderCellDef> Modelo </th>
                    <td mat-cell *matCellDef="let element;"> {{ element.MODELO }} </td>
                    <td mat-footer-cell *matFooterCellDef class="border-td"> </td>
                </ng-container>

                <ng-container matColumnDef="CODIGO">
                    <th mat-header-cell *matHeaderCellDef> Código </th>
                    <td mat-cell *matCellDef="let element"> {{ element.CODIGO }} </td>
                    <td mat-footer-cell *matFooterCellDef class="border-td"> </td>
                </ng-container>

                <ng-container matColumnDef="CARACTERISTICAS">
                    <th mat-header-cell *matHeaderCellDef> Características </th>
                    <td mat-cell *matCellDef="let element"> {{ element.CARACTERISTICAS }} </td>
                    <td mat-footer-cell *matFooterCellDef class="border-td"> </td>
                </ng-container>

                <ng-container matColumnDef="CANTIDAD">
                    <th mat-header-cell *matHeaderCellDef> Cantidad </th>
                    <td mat-cell *matCellDef="let element"> {{ element.CANTIDAD }} </td>
                    <td mat-footer-cell *matFooterCellDef class="border-td"> </td>
                </ng-container>

                <ng-container matColumnDef="PRECIO_UNITARIO">
                    <th mat-header-cell *matHeaderCellDef> Precio Unitario </th>
                    <td mat-cell *matCellDef="let element"> $ {{ element.PRECIO_UNITARIO }} </td>
                    <td mat-footer-cell *matFooterCellDef class="border-td"> <b>Precio Final</b> </td>
                </ng-container>

                <ng-container matColumnDef="PRECIO_TOTAL">
                    <th mat-header-cell *matHeaderCellDef> Precio Total </th>
                    <td mat-cell *matCellDef="let element"> $ {{ element.PRECIO_TOTAL }} </td>
                    <td mat-footer-cell *matFooterCellDef class="border-td"> <b> $ {{ getTotalCost() }}</b> </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>

            </table>
            <div align="end">
                <button mat-button color="warn" class="red_primary_font mr-8" mat-dialog-close cdkFocusInitial> Cerrar </button>
                <button mat-button color="primary" matStepperPrevious> Regresar </button>
            </div>
        </mat-step>
    </mat-stepper>
</mat-dialog-content>
