<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">Detalle propuesta</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">
                Resumen de la propuesta
              </h4>
            </div>

            <div class="card-body">
              <div class="align-container">
                <ul class="timeline timeline-simple">
                  <li class="timeline-inverted">
                    <div class="timeline-badge"></div>
                    <div class="timeline-panel">
                      <div class="timeline-heading">
                        <app-investment-print
                          [investmentID]="investmentProposalID"
                        ></app-investment-print>
                      </div>
                    </div>
                  </li>

                  <li class="timeline-inverted">
                    <div class="timeline-badge"></div>
                    <div class="timeline-panel">
                      <div class="timeline-heading">
                        <span class="badge badge-success"
                          ><h4>Información general</h4></span
                        >
                      </div>
                      <div class="timeline-body">
                        <div class="row">
                          <div class="col-12">
                            <div class="field">
                              <h3>Empresa:</h3>
                              {{ companies }}
                              <br />
                              <br />
                            </div>
                          </div>

                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Asunto:</h4>
                            <div class="field">
                              {{ subject }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Orígenes de fondo:</h4>
                            <div class="field">
                              {{ funds }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Nombre:</h4>
                            <div class="field">
                              {{ investmentName }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Tipo Tasa:</h4>
                            <div class="field">
                              {{ rates }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Tipo Renta:</h4>
                            <div class="field">
                              {{ revenues }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Periodicidad:</h4>
                            <div class="field">
                              {{ periodicities }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Instrumentos:</h4>
                            <div class="field">
                              {{ instrumentTypes }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Casa:</h4>
                            <div class="field">
                              {{ financials }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Base:</h4>
                            <div class="field">
                              {{ base_types }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Tipo de mercado:</h4>
                            <div class="field">
                              {{ markets }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Emisores:</h4>
                            <div class="field">
                              {{ emitters }}
                            </div>
                          </div>

                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>País:</h4>
                            <div class="field">
                              {{ countries }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Plazo:</h4>
                            <div class="field">
                              {{ payment_terms }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Tipos de operaciones:</h4>
                            <div class="field">
                              {{ operations }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Comentarios:</h4>
                            <div class="field">
                              {{ comment }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Justificación:</h4>
                            <div class="field">
                              {{ justification }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="timeline-inverted">
                    <div class="timeline-badge"></div>
                    <div class="timeline-panel">
                      <div class="timeline-heading">
                        <span class="badge badge-warning">Instrumento</span>
                      </div>
                      <div class="timeline-body">
                        <ng-template instrument-host></ng-template>
                      </div>
                    </div>
                  </li>

                  <li class="timeline-inverted" *ngIf="paymentExists">
                    <div class="timeline-badge"></div>
                    <div class="timeline-panel">
                      <div class="timeline-heading">
                        <span class="badge badge-danger"
                          >Información del pago</span
                        >
                      </div>
                      <div class="timeline-body">
                        <div class="row">
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Monto:</h4>
                            <div class="field">
                              $USD {{ monto | number: "1.2-4" }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Código:</h4>
                            <div class="field">{{ codigo }}</div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Tipo pago:</h4>
                            <div class="field">{{ tipo_pago }}</div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Cuenta bancaria:</h4>
                            <div class="field">{{ cuenta_bancaria }}</div>
                          </div>

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

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

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

                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Fecha de pago:</h4>
                            <div class="field">{{ fecha_vencimiento }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="timeline-inverted" *ngIf="liquidation_file">
                    <div class="timeline-badge"></div>
                    <div class="timeline-panel">
                      <div class="timeline-heading">
                        <span class="badge badge-info"
                          >Hoja de liquidación</span
                        >
                      </div>
                      <div class="timeline-body">
                        <div class="col-lg-3 col-md-4 col-sm-6">
                          <h4>Archivo de hoja de liquidación:</h4>
                          <div class="field">
                            <a
                              [href]="fileDownload + liquidation_file"
                              target="_blank"
                              >Descargar archivo</a
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="timeline-inverted">
                    <div class="timeline-badge"></div>
                    <div class="timeline-panel">
                      <div class="timeline-heading">
                        <span class="badge badge-primary"
                          >Historico de cambios</span
                        >
                      </div>
                      <div class="timeline-body">
                        <ul class="list-unstyled">
                          <li *ngFor="let item of logs; let i = index">
                            <div
                              *ngIf="i < 3"
                              [ngClass]="
                                i % 2 == 0 ? 'log secondary-bg' : 'log info-bg'
                              "
                            >
                              <div class="media">
                                <div class="user-icon">
                                  <i class="material-icons">
                                    person
                                  </i>
                                </div>
                                <div class="media-body">
                                  <h6 class="mt-0 ">
                                    {{ item.created_by }}
                                    <div class="float-right">
                                      {{ item.created_date }}
                                    </div>
                                  </h6>
                                  <p class="mt-10">
                                    Estado: {{ item.estado_final }}
                                  </p>
                                  <p>Comentario: {{ item.comentario }}</p>
                                </div>
                              </div>
                              <div class="divider mt-15"></div>
                            </div>
                          </li>
                        </ul>

                        <a
                          title="Historico"
                          class="btn btn-dark btn-custom-small"
                          [routerLink]="[
                            '/investment-proposal',
                            investmentProposalID,
                            'change-history'
                          ]"
                          target="_blank"
                        >
                          <i class="fas fa-history"></i> Ver histórico completo
                        </a>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
