PlataformaEducativaWeb2/Front/src/app/modules/Padres/pages/Registro/registroAd.component.html

<div class="containerPagina">
    <div style="display: flex; justify-content: center; width: 100%; align-items: center;">
        <mat-spinner [diameter]="60" *ngIf="isLoading"></mat-spinner>
    </div>
    <div class="centrar1" style="margin-top: 0%; margin-bottom: 24px;" *ngIf="!isLoading">
        <div class="fondo" [style.background-color]="color">
            <p class="content" [style.color]="textColor">Registro Administrativo - {{nombreAlumno}}</p>
        </div>
    </div>
    <div style="background-color: white;" class="divRes">
        <mat-tab-group mat-stretch-tabs="false" *ngIf="!isLoading" class="mat-elevation-z4" animationDuration="0ms"
            (selectedIndexChange)="selected.setValue($event)" [selectedIndex]="selected.value">
            <mat-tab label="Generales">
                <div style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
                    <div style="width: 90%; margin-top: 20px;">
                        <form [formGroup]="form">
                            <div class="input-label">
                                <mat-form-field class="FormularioFicha1">
                                    <mat-label class="label f-z">Grado a Cursar</mat-label>
                                    <mat-select name="gradoCursar" formControlName="gradoCursar">
                                        <mat-option [value]="grado.idGrado+grado.idNivel"
                                            *ngFor="let grado of GradoCursar">{{grado.nombreGrado}}</mat-option>
                                    </mat-select>
                                    <mat-hint *ngIf="isValidField('gradoCursar','required')" style="color: red;">El
                                        campo es obligatorio</mat-hint>
                                </mat-form-field>

                                <mat-form-field class="FormularioFicha1">
                                    <mat-label class="label f-z">Mes de Inscripción</mat-label>
                                    <mat-select name="mesInscripcion" formControlName="mesInscripcion">
                                        <mat-option [value]="mes.id" *ngFor="let mes of Mes">{{mes.nombre}}</mat-option>
                                    </mat-select>
                                    <mat-hint *ngIf="isValidField('mesInscripcion','required')" style="color: red;">El
                                        campo es obligatorio</mat-hint>
                                </mat-form-field>

                                <mat-form-field class="FormularioFicha1">
                                    <mat-label class="label f-z">Plan de Pagos de Colegiatura</mat-label>
                                    <mat-select name="planPago" formControlName="planPago">
                                        <mat-option [value]="pago.idPlanPago"
                                            *ngFor="let pago of planPago">{{pago.nombrePlanPago}}</mat-option>
                                    </mat-select>
                                    <mat-hint *ngIf="isValidField('planPago','required')" style="color: red;">El campo
                                        es obligatorio</mat-hint>
                                </mat-form-field>

                            </div>
                            <mat-form-field class="FormularioFicha1 M-L" style="margin-left: 7%;">
                                <mat-label class="label f-z">¿Cuenta con Beca para este curso?</mat-label>
                                <mat-select name="becaCurso" formControlName="becaCurso">
                                    <mat-option value="Si">Si</mat-option>
                                    <mat-option value="No">No</mat-option>
                                </mat-select>
                                <mat-hint *ngIf="isValidField('becaCurso','required')" style="color: red;">El campo es
                                    obligatorio</mat-hint>
                            </mat-form-field>
                            <mat-form-field class="FormularioFicha1 M-L" style="margin-left: 7%;">
                                <mat-label class="label f-z">Porcentaje de Beca:</mat-label>
                                <mat-select name="becaPorcentaje" formControlName="becaPorcentaje">
                                    <mat-option [value]="por.idPorcentajeBeca"
                                        *ngFor=" let por of porcentaje">{{por.nombrePorcentajeBeca}}</mat-option>
                                </mat-select>
                                <mat-hint *ngIf="isValidField('becaPorcentaje','required')" style="color: red;">El campo
                                    es obligatorio</mat-hint>
                            </mat-form-field>
                        </form>
                        <div class="botones" style="margin-top: 5px; margin-bottom: 10px;">
                            <div style="display: flex; justify-content: space-evenly; width: 15%;" class="btn-res">
                                <button class="btn1 borderNone" (click)="siguienteTap(1)">Siguiente
                                    <mat-icon>chevron_right</mat-icon></button>
                                <button class="btn1 borderNone" style="background-color: red;" (click)="Salir()">Salir
                                    <mat-icon>cancel</mat-icon></button>
                            </div>
                        </div>
                    </div>
                </div>
            </mat-tab>
            <mat-tab label="Facturación" [disabled]="this.form.invalid">
                <div style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
                    <div class="textAdvertencia1">
                        <p> <mat-icon style="color: #f19696;">info</mat-icon> A los Padres de Familia que requieran
                            Factura,
                            se les informa que el costo para el uso de Sistema de Facturación para el Ciclo Escolar
                            es de $ 100.00 por alumno mismos que deberán ser pagados en el Colegio.</p>
                    </div>
                    <div style="width: 90%; margin-top: 20px;">
                        <form [formGroup]="form2">
                            <div class="input-label">
                                <section class="radio-Button" style="width: 24%;">
                                    <label class="label-check">¿Requiere Factura Electrónica?</label>
                                    <mat-radio-group [(ngModel)]="radioButton" formControlName="factura" color="primary"
                                        (change)="factura($event)">
                                        <mat-radio-button value="Si">Si</mat-radio-button>
                                        <mat-radio-button value="No">No</mat-radio-button>
                                    </mat-radio-group>
                                    <div class="mensajeError">
                                        <mat-hint *ngIf="isValidField1('factura','required')" class="error">El campo es
                                            obligatorio</mat-hint>
                                    </div>
                                </section>

                                <mat-form-field class="FormularioFicha1">
                                    <mat-label class="label f-z">Método de Pago de Colegiatura:</mat-label>
                                    <mat-select formControlName="metedoPago">
                                        <mat-option [value]="pago.idMetodoPago"
                                            *ngFor="let pago of MetodoPago">{{pago.nombreMetodoPago}}</mat-option>
                                    </mat-select>
                                    <mat-hint *ngIf="isValidField1('metedoPago','required')" style="color: red;">El
                                        campo es obligatorio</mat-hint>
                                </mat-form-field>

                                <mat-form-field class="FormularioFicha1">
                                    <mat-label class="label f-z">R.F.C. al que se emitirán las Facturas:</mat-label>
                                    <input type="text" matInput class="input-Form" formControlName="RFCFactura">
                                    <mat-hint *ngIf="isValidField1('RFCFactura','required')" style="color: red;">El
                                        campo es obligatorio</mat-hint>
                                </mat-form-field>

                            </div>
                            <mat-form-field class="FormularioFicha1 M-L" style="margin-left: 5%; width: 29%;">
                                <mat-label class="label f-z">Nombre o Razón Social al que se emitirán las
                                    Facturas:</mat-label>
                                <input type="text" matInput class="input-Form" formControlName="razonSocial">
                                <mat-hint *ngIf="isValidField1('razonSocial','required')" style="color: red;">El campo
                                    es obligatorio</mat-hint>
                            </mat-form-field>

                            <mat-form-field class="FormularioFicha1 M-L" style="margin-left: 4%;">
                                <mat-label class="label f-z">Domicilio para Facturación:</mat-label>
                               <input type="text" maxlength="0" matInput class="input-Form"
       formControlName="domicilioFactura" readonly>

                              <mat-hint
  *ngIf="this.form2.value.factura === 'Si'"
  style="color: blue; cursor: pointer;"
  (click)="Asistente()">
  Haga click aquí para abrir el Asistente de Captura
</mat-hint>

                                <mat-hint *ngIf="isValidField1('domicilioFactura','required')" style="color: red;">El
                                    campo es obligatorio</mat-hint>
                            </mat-form-field>

                            <mat-form-field class="FormularioFicha1 M-L" style="margin-left: 7%;">
                                <mat-label class="label f-z">Correo donde se enviarán las Facturas:</mat-label>
                                <input type="email" matInput class="input-Form" formControlName="correoFactura">

                                <mat-hint *ngIf="isValidField1('correoFactura','required')" style="color: red;">El campo
                                    esobligatorio</mat-hint>
                                <mat-hint *ngIf="isValidField1('correoFactura','pattern')" style="color: red;">Ingrese
                                    un correo valido</mat-hint>

                            </mat-form-field>
<!-- Reemplazar el input de archivo existente con este código mejorado -->

<div class="file-upload-container" style="margin-top: 20px; width: 100%;">
 <mat-form-field
  class="FormularioFicha1"
  style="width: 100%;"
  *ngIf="form2.get('constanciaFiscal')?.enabled"
>
  <mat-label class="label f-z">Constancia Fiscal</mat-label>
  <input
    matInput
    readonly
    [value]="form2.get('constanciaFiscal')?.value || 'Ningún archivo seleccionado'"
    class="input-Form"
  >
  <mat-hint style="color: gray;">
    Adjuntar Constancia Fiscal (Solo archivos PDF, máximo 5MB)
  </mat-hint>
</mat-form-field>


    <div style="display: flex; gap: 10px; margin-top: 10px; align-items: center;">
        <input
            type="file"
            #fileInput
            accept=".pdf"
            (change)="onFileSelected($event)"
            style="display: none;">
<button
  *ngIf="form2.get('constanciaFiscal')?.enabled"
  type="button"
  class="btn1 borderNone"
  style="background-color: #2196F3; color: white; padding: 8px 16px;"
  (click)="fileInput.click()"
>
  <mat-icon>upload_file</mat-icon>
  Seleccionar Archivo
</button>
 <button
  type="button"
  class="btn1 borderNone"
  style="background-color: #e53935; color: white; margin-top: 10px;"
  (click)="eliminarArchivo()"
  *ngIf="rutaArchivo"
>
  <mat-icon>delete</mat-icon>
  Eliminar archivo
</button>



    </div>

    <!-- Mostrar información del archivo seleccionado -->
    <div *ngIf="selectedFile" style="margin-top: 10px; padding: 10px; background-color: #f0f0f0; border-radius: 4px;">
        <p style="margin: 0; color: #333;">
            <mat-icon style="vertical-align: middle; margin-right: 5px;">description</mat-icon>
            {{ selectedFile.name }} ({{ (selectedFile.size / 1024 / 1024).toFixed(2) }} MB)
        </p>
    </div>
</div>

                        </form>
                        <div class="botones" style="margin-bottom: 20px; margin-top: 20px;">
                            <div style="display: flex; justify-content: space-evenly; width: 24%;" class="btn-res1">
                                <button class="btn1 borderNone w-btn" style="width: 225px;"
                                    (click)="guardarFormulario()">Guardar Registro
                                    Administrativo<mat-icon>description</mat-icon></button>
                                <button class="btn1 borderNone" style="background-color: red;" (click)="Salir()">Salir
                                    <mat-icon>cancel</mat-icon></button>
                            </div>
                        </div>
                    </div>
                </div>
            </mat-tab>
        </mat-tab-group>
    </div>
</div>