frontend-inversiones/src/app/components/investment-proposals/payment-requirement/payment-requirement.component.html

<h2 class="floating-title">{{ title }}</h2>

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 align-right">
        <div class="align-container">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <a [routerLink]="['/']">Dashboard</a>
              </li>
              <li class="breadcrumb-item">
                <a [routerLink]="['/investment-proposals']">
                  Propuestas de inversión
                </a>
              </li>
              <li class="breadcrumb-item">Requisición</li>
            </ol>
          </nav>
        </div>
      </div>

      <br />
    </div>
    <br />
    <div class="row justify-content-center">
      <div class="col-12">
        <div class="align-container">
          <div class="card borderless">
            <div class="card-header card-header-icon card-header-rose">
              <h4 class="card-title">
                Requisición
              </h4>
            </div>
            <div class="card-body">
              <div class="align-container">
                <div class="instrument-calcs">
                  <div class="row">
                    <div class="col-12">
                      <span class="badge badge-success badge-custom"
                        >Información del pago</span
                      >
                    </div>

                    <div class="col-sm-6">
                      <h4>Código de la propuesta de inversión:</h4>
                      <div class="field">{{ codigo_inversion }}</div>
                    </div>
                    <div class="col-sm-6">
                      <h4>Monto a pagar:</h4>
                      <div class="field">
                        $USD {{ monto | number: "1.2-4" }}
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <h4>Código:</h4>
                      <div class="field">{{ codigo }}</div>
                    </div>
                    <div class="col-sm-6">
                      <h4>Tipo pago:</h4>
                      <div class="field">{{ tipo_pago }}</div>
                    </div>
                    <div class="col-sm-6">
                      <h4>Cuenta bancaria:</h4>
                      <div class="field">{{ cuenta_bancaria }}</div>
                    </div>

                    <div class="col-sm-6" *ngIf="cuenta_bancaria_destino">
                      <h4>Cuenta bancaria destino:</h4>
                      <div class="field">{{ cuenta_bancaria_destino }}</div>
                    </div>

                    <div class="col-sm-6" *ngIf="emitir_nombre">
                      <h4>Emitir a nombre:</h4>
                      <div class="field">{{ emitir_nombre }}</div>
                    </div>

                    <div class="col-sm-6">
                      <h4>Fecha de vencimiento:</h4>
                      <div class="field">{{ fecha_vencimiento }}</div>
                    </div>

                    <div class="col-sm-6">
                      <h4>Descargar información del instrumento:</h4>
                      <div class="field">
                        <app-investment-print
                          [investmentID]="investmentProposalID"
                        ></app-investment-print>
                      </div>
                    </div>
                  </div>
                </div>

                <br />

                <form
                  class="form-auth-small ng-untouched ng-pristine ng-valid"
                  [formGroup]="investmentProposalForm"
                >
                  <div class="row">
                    <div class="col-lg-6 col-sm-12 pr-xl-6">
                      <div class="form-group">
                        <label for="justificacion">Archivo: </label>

                        <input
                          type="file"
                          name="evidencia"
                          (change)="fileProgress($event)"
                        />
                      </div>
                      <br />
                      <div *ngIf="fileUploadProgress">
                        Progreso: {{ fileUploadProgress }}
                      </div>
                      <div class="image-preview mb-3" *ngIf="previewUrl">
                        <img [src]="previewUrl" height="300" />
                      </div>

                      <div class="mb-3" *ngIf="uploadedFilePath">
                        {{ uploadedFilePath }}
                      </div>
                    </div>
                    <!-- Fecha operación -->
                    <div class="col-lg-6 col-sm-12 pr-xl-3">
                      <div class="form-group">
                        <label for="fecha_pago">Fecha pago: </label>
                        <div class="input-box-container">
                          <p>
                            <i class="far fa-calendar" aria-hidden="true"></i>
                          </p>
                          <input
                            class="input-box form-control"
                            placeholder="Seleccione una fecha"
                            angular-mydatepicker
                            formControlName="fecha_pago"
                            (click)="dp.toggleCalendar()"
                            [options]="myDpOptions"
                            #dp="angular-mydatepicker"
                            [ngClass]="{
                              'is-invalid': submitted && f.fecha_pago.errors
                            }"
                          />
                        </div>

                        <div
                          *ngIf="submitted && f.fecha_pago.errors"
                          class="invalid-feedback"
                        >
                          <div *ngIf="f.fecha_pago.errors.required">
                            Campo requerido
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-lg-6 col-sm-12 pr-xl-6">
                      <div class="form-group">
                        <label for="comentario">Comentario: </label>

                        <textarea
                          rows="2"
                          class="form-control"
                          formControlName="comentario"
                        ></textarea>
                      </div>
                    </div>
                  </div>
                  <br />
                  <div class="row">
                    <div class="col-lg-12 col-sm-12 align-right">
                      <div class="form-group">
                        <button
                          class="btn btn-primary"
                          (click)="onSubmit(investmentProposalForm)"
                          type="submit"
                        >
                          Enviar requisición de pago
                        </button>
                      </div>
                    </div>
                  </div>
                  <br />
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>