@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Proceso de Amortización')

{{-- {} Ajustes, propiedades y estilos --}}
@section('cabeza')

{{-- ! --}}
@parent

{{-- ! Select 2 v4.1.0 --}}
<link rel="stylesheet" href="{{ asset('archivos/librerias/select2/v4.1.0/css/select2.min.css') }}">

{{-- ! Data Tables v1.13.2 --}}
@include('librerias.datatables.css')

{{-- ! --}}
<link rel="stylesheet" href="{{ asset('archivos/css/aplicacion/seccion/procesos/amortizacion.css') }}">

@endsection

{{-- {} Encabezado de la sección --}}
@section('encabezado')

@component('aplicacion.elementos.boton', [
  'tipo' => 'submit',
  'id' => 'botonGuardar',
  'clases' => 'btn btn-primary',
  'atributos' => 'form=formularioAmortizacion'
])
  Calcular
@endcomponent

@component('aplicacion.elementos.boton', [
  'id' => 'botonLimpiar',
  'clases' => 'btn btn-warning',
  'atributos' => '
    form=formularioAmortizacion
    data-accion=limpiar
  '
])
  Limpiar
@endcomponent

@component('aplicacion.elementos.boton', [
  'id' => 'botonEnviarCorreo',
  'clases' => 'btn btn-secondary',
  'atributos' => 'disabled'
])
  Enviar Correo
@endcomponent

@endsection

{{-- {} Contenido de la sección --}}
@section('seccion')
<form class="form" id="formularioAmortizacion" autocomplete="off">
  <div class="row">

		@csrf

    <div class="col-3 col-sm-2 col-md-2 col-lg-2 col-xl-2 col-xxl-2">
      @component('aplicacion.elementos.campo.etiqueta', [
        'id' => 'monto',
        'mascara' => ['tipo' => 'numerico'],
        'titulo' => 'Monto Préstamo'
      ])
      @endcomponent
    </div>

    <div class="col-4 col-sm-4 col-md-4 col-lg-2 col-xl-2 col-xxl-2">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'select',
        'id' => 'id_tipo_calculo',
        'atributos' => '
          data-peticion-procedimiento=p_traer_filtros
          data-peticion-parametros="renglon: TIPOS_CALCULOS"
        ',
        'titulo' => 'Tipo de Cálculo'
      ])
      @endcomponent
    </div>

    <div class="col-3 col-sm-2 col-md-2 col-lg-2 col-xl-2 col-xxl-2">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'select',
        'id' => 'forma_pago',
        'atributos' => 'data-peticion-tabla=formas_pagos',
        'titulo' => 'Forma de Pago'
      ])
      @endcomponent
    </div>

    <div class="col-3 col-sm-2 col-md-2 col-lg-1 col-xl-1 col-xxl-1">
      @component('aplicacion.elementos.campo.etiqueta', [
        'id' => 'tiempo',
        'mascara' => [
          'tipo' => 'entero',
          'valor' => ['maximo' => '500']
        ],
        'titulo' => 'Tiempo'
      ])
      @endcomponent
    </div>

    <div class="col-3 col-sm-2 col-md-2 col-lg-1 col-xl-1 col-xxl-1">
      @component('aplicacion.elementos.campo.etiqueta', [
        'id' => 'tasa_interes',
        'mascara' => [
          'tipo' => 'numerico',
          'valor' => ['maximo' => '100']
        ],
        'titulo' => '% Interés'
      ])
      @endcomponent
    </div>

    <div class="col-3 col-sm-2 col-md-2 col-lg-1 col-xl-1 col-xxl-1">
      @component('aplicacion.elementos.campo.etiqueta', [
        'id' => 'tasa_comision',
        'mascara' => [
          'tipo' => 'numerico',
          'valor' => ['maximo' => '100']
        ],
        'titulo' => '% Comisión'
      ])
      @endcomponent
    </div>

    <div class="col-3 col-sm-2 col-md-2 col-lg-1 col-xl-1 col-xxl-1">
      @component('aplicacion.elementos.campo.etiqueta', [
        'id' => 'tasa_seguros',
        'mascara' => [
          'tipo' => 'numerico',
          'valor' => ['maximo' => '100']
        ],
        'titulo' => '% Seguros'
      ])
      @endcomponent
    </div>

    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 col-xxl-2">
      @component('aplicacion.elementos.campo.etiqueta', [
        'id' => 'monto_cuota_sugerido',
        'mascara' => ['tipo' => 'numerico'],
        'atributos' => 'disabled',
        'titulo' => 'Monto Cuota'
      ])
      @endcomponent
    </div>

		<div class="col-3 col-sm-2 col-md-2 col-lg-2 col-xl-2 col-xxl-4">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'email',
				'clases' => '',
				'id' => 'correo',
        'atributos' => '
					multiple
				',
        'titulo' => 'Correo'
      ])
      @endcomponent
    </div>

    @component('aplicacion.elementos.tabla-vieja')

      <thead>

        <th data-columna-nombre="cuota" data-columna-tipo="num" data-columna-sumar="filas">
          Cuota
        </th>

        <th data-columna-nombre="fecha_cuota" data-columna-tipo="date">
          Fecha
        </th>

        <th class="text-end" data-columna-nombre="capital" data-columna-tipo="num-fmt" data-columna-sumar>
          Capital
        </th>

        <th class="text-end" data-columna-nombre="interes" data-columna-tipo="num-fmt" data-columna-sumar>
          Interés
        </th>

        <th class="text-end" data-columna-nombre="comision" data-columna-tipo="num-fmt" data-columna-sumar>
          Comisión
        </th>

        <th class="text-end" data-columna-nombre="seguros" data-columna-tipo="num-fmt" data-columna-sumar>
          Seguros
        </th>

				<th class="text-end" data-columna-nombre="monto_cuota" data-columna-tipo="num-fmt" data-columna-sumar>
          Monto Cuota
        </th>

        <th class="text-end" data-columna-nombre="balance" data-columna-tipo="num-fmt">
          Balance
        </th>

      </thead>

      <tbody>
        <tr>
          <td class="text-center" colspan="100%">NINGÚN DATO DISPONIBLE EN ESTA TABLA</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <th colspan="100%">&nbsp;</th>
        </tr>
      </tfoot>

    @endcomponent

		<div id="tablaCorreo">

			@component('aplicacion.elementos.tabla-vieja',['id' => 'tablaRegistrosCorreo'])

			<thead>

				<th data-columna-nombre="cuota" data-columna-tipo="num" data-columna-sumar="filas">
					Cuota
				</th>

				<th data-columna-nombre="fecha_cuota" data-columna-tipo="date">
					Fecha
				</th>

				<th class="text-end" data-columna-nombre="capital" data-columna-tipo="num-fmt" data-columna-sumar>
					Capital
				</th>

				<th class="text-end" data-columna-nombre="interes" data-columna-tipo="num-fmt" data-columna-sumar>
					Interés
				</th>

				<th class="text-end" data-columna-nombre="comision" data-columna-tipo="num-fmt" data-columna-sumar>
					Comisión
				</th>

				<th class="text-end" data-columna-nombre="seguros" data-columna-tipo="num-fmt" data-columna-sumar>
					Seguros
				</th>

				<th class="text-end" data-columna-nombre="monto_cuota" data-columna-tipo="num-fmt" data-columna-sumar>
					Monto Cuota
				</th>

				<th class="text-end" data-columna-nombre="balance" data-columna-tipo="num-fmt">
					Balance
				</th>

			</thead>

			<tbody>
				<tr>
					<td class="text-center" colspan="100%">NINGÚN DATO DISPONIBLE EN ESTA TABLA</td>
				</tr>
			</tbody>

			<tfoot>
				<tr>
					<th colspan="100%">&nbsp;</th>
				</tr>
			</tfoot>

			@endcomponent

		</div>

  </div>
</form>
@endsection

{{-- <div class="printt d-none"></div> --}}

<div class="printt"></div>

{{-- {} Programación de la sección --}}
@section('programacion')

{{-- ! --}}
@parent

{{-- ! iMask v6.4.3 --}}
<script src="{{ asset('archivos/librerias/imask/v6.4.3/imask.js') }}"></script>

{{-- ! --}}
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

{{-- ! Select 2 v4.1.0 --}}
<script src="{{ asset('archivos/librerias/select2/v4.1.0/js/select2.min.js') }}"></script>

{{-- ! Data Tables v1.13.2 --}}
@include('librerias.datatables.js')

{{-- ! --}}
<script type="module" src="{{ asset('archivos/js/aplicacion/seccion/procesos/amortizacion.js') }}"></script>

@endsection
