<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]="['/investments']">
                  Inversiones activas
                </a>
              </li>
              <li class="breadcrumb-item">Préstamos empresariales</li>
            </ol>
          </nav>
        </div>
      </div>

      <div class="col-12">
        <div class="align-container">
          <div class="card borderless card-wrapper">
            <div class="wrapper-costs">
              <h4 class="card-title">
                Detalle de proyecciones para el préstamo empresarial
              </h4>
              <br />

              <div class="align-container">
                <div>
                  <div class="costs-summary" *ngIf="instrument_exists">
                    <div class="row">
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Valor nominal:</h4>
                        <div class="field">
                          $USD
                          {{ instrument_work.monto_prestamo | number: "1.2-4" }}
                        </div>
                      </div>

                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Monto préstamo:</h4>
                        <div class="field">
                          $USD
                          {{ instrument_work.monto_prestamo | number: "1.2-4" }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Tasa (%):</h4>
                        <div class="field">
                          {{
                            instrument_work.tasa_porcentaje | number: "1.2-4"
                          }}%
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>IVA (%):</h4>
                        <div class="field">
                          {{
                            instrument_work.iva_porcentaje | number: "1.2-4"
                          }}%
                        </div>
                      </div>

                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>IVA ($):</h4>
                        <div class="field">
                          $USD {{ instrument_work.iva | number: "1.2-4" }}
                        </div>
                      </div>

                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Comisión desembolso (%):</h4>
                        <div class="field">
                          {{
                            instrument_work.comision_desembolso_porcentaje
                              | number: "1.2-4"
                          }}%
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Comisión desembolso ($):</h4>
                        <div class="field">
                          $USD
                          {{
                            instrument_work.comision_desembolso
                              | number: "1.2-4"
                          }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Plazo:</h4>
                        <div class="field">
                          {{ instrument_work.plazo | number: "1.2-4" }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Fecha de operacion:</h4>
                        <div class="field">
                          {{ instrument_work.fecha_operacion }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Fecha de vencimiento:</h4>
                        <div class="field">
                          {{ instrument_work.fecha_vencimiento }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <br />
              <br />
              <div class="align-container">
                <form *ngIf="dataRetrieved" [formGroup]="form">
                  <div *ngFor="let group of form.controls; let i = index">
                    <div class="wrapper-form" [formGroup]="group">
                      <div class="costs-input-small-container">
                        <div class="form-group">
                          <label for="posicion">Posicion: </label>

                          <div class="input-box-container">
                            <input
                              type="text"
                              formControlName="posicion"
                              class="form-control"
                              readonly
                            />
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-small-container">
                        <div class="form-group">
                          <label for="plazo">Plazo: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="far fa-clock" aria-hidden="true"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="plazo"
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="fecha_pago">Fecha pago: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i
                                  class="far fa-calendar"
                                  aria-hidden="true"
                                ></i>
                              </p>
                              <input
                                type="text"
                                formControlName="fecha_pago"
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="ingreso_bruto">Ingreso bruto: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="ingreso_bruto"
                                [value]="
                                  group.get('ingreso_bruto').value
                                    | number: '1.2-4'
                                "
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="ingreso_neto">Ingreso neto: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="ingreso_neto"
                                [value]="
                                  group.get('ingreso_neto').value
                                    | number: '1.2-4'
                                "
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="tasa_porcentaje">Tasa: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-percent"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="tasa_porcentaje"
                                [value]="
                                  group.get('tasa_porcentaje').value
                                    | numberPipe
                                "
                                (input)="inputValidator($event)"
                                class="form-control"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="amortizacion_capital"
                            >Amortización capital:
                          </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="amortizacion_capital"
                                [value]="
                                  group.get('amortizacion_capital').value
                                    | numberPipe
                                "
                                (input)="inputValidator($event)"
                                class="form-control"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="monto_recibir">Monto a recibir: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="monto_recibir"
                                [value]="
                                  group.get('monto_recibir').value
                                    | number: '1.2-4'
                                "
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="iva">IVA: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="iva"
                                [value]="
                                  group.get('iva').value | number: '1.2-4'
                                "
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="capital_restante"
                            >Capital restante:
                          </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="capital_restante"
                                [value]="
                                  group.get('capital_restante').value
                                    | number: '1.2-4'
                                "
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <input
                        type="hidden"
                        formControlName="id_proyeccion_ingreso"
                      />
                      <div class="clear"></div>
                    </div>
                  </div>
                  <br />
                  <div class="form-group text-right space-20">
                    <button
                      type="button"
                      class="btn btn-success center-component float-left"
                      (click)="saveProjection()"
                    >
                      Guardar información de proyecciones
                    </button>

                    <button
                      type="button"
                      class="btn btn-primary center-component float-right"
                      (click)="recalculateProjectionChanges()"
                    >
                      Recalcular proyecciones
                    </button>
                  </div>
                  <br />
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <br />
    </div>
  </div>
</div>
