@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Registros de Cuentas')

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

{{-- ! --}}
@parent

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

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

@endsection

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

@component('aplicacion.elementos.boton', [
	'tipo' => 'submit',
	'id' => 'botonGuardar',
	'atributos' => '
		form=formularioCuentas
		formmethod=POST
		formaction=' . route('ejecutar') . '?0=0&procedimiento=p_registrar_cuentas
	'
])
	Guardar
@endcomponent

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

@component('aplicacion.elementos.boton', [
	'tipo' => 'button',
	'id' => 'botonImprimir',
	'atributos' => 'disabled'
])
	Imprimir
@endcomponent

@endsection

{{-- {} Contenido de la sección --}}
@section('seccion')

<form
  id="formularioCuentas"
  autocomplete="off"
	data-campo-prevenir="#id_renglon"
	data-tabla-limpiar="#tablaRegistros, #tablaRegistrosRelacionados"
>

  @csrf

  <input id="id_cuenta" name="id_cuenta" hidden>

  <div class="row">

    {{-- <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
      @component('aplicacion.elementos.boton', [
        'clases' => 'btn btn-primary w-100',
        'atributos' => '
          data-bs-toggle=modal
          data-bs-target=#ventanaEmergenteConsulta
          data-peticion-procedimiento=p_traer_cuentas_clientes
          data-peticion-campo=cuenta
          data-ventana-emergente-titulo=Cuentas
        '
      ])
        <div class="d-flex justify-content-between align-items-center">
          Cuentas
          <i class="fa-solid fa-magnifying-glass"></i>
        </div>
      @endcomponent
    </div> --}}

		<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
			@component('aplicacion.elementos.grupo.campos')

				@component('aplicacion.elementos.campo.etiqueta', [
					'id' => 'id_cliente',
					'mascara' => ['tipo' => 'entero'],
					'titulo' => 'Cliente'
				])
				@endcomponent

				@component('aplicacion.elementos.campo', [
					'id' => 'cliente',
					'clases' => '
						input-group-text
						col-9 col-sm-8 col-md-9 col-lg-9 col-xl-10 col-xxl-10
						text-start
					',
					'atributos' => 'disabled'
				])
				@endcomponent

				@component('aplicacion.elementos.boton', [
					'clases' => 'btn btn-primary',
					'atributos' => '
						data-bs-toggle=modal
						data-bs-target=#ventanaEmergenteConsulta
						data-peticion-tabla=clientes
						data-peticion-campo=cliente
						data-ventana-emergente-titulo=Clientes
					'
				])
					<i class="fa-solid fa-magnifying-glass"></i>
				@endcomponent

			@endcomponent
		</div>

		<div class="col-6 col-sm-5 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'id_tipo_cuenta',
				'atributos' => '
					data-peticion-procedimiento="p_traer_filtros"
					data-peticion-parametros="
						renglon: TIPOS_CUENTAS;
						tipo_filtro: APORTES_AHORROS
					"
				',
				'titulo' => 'Tipo de Cuenta'
			])
			@endcomponent
		</div>

		<div class="col-3 col-sm-3 col-md-3 col-lg-2 col-xl-2 col-xxl-1">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'numero_cuenta',
				'mascara' => ['tipo' => 'entero'],
				'atributos' => 'disabled',
				'titulo' => '# Cuenta'
			])
			@endcomponent
		</div>

		<div class="col-4 col-sm-5 col-md-3 col-lg-3 col-xl-3 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'id_renglon',
				'atributos' => '
					data-peticion-procedimiento="p_traer_filtros"
					data-peticion-parametros="
						renglon: RENGLONES;
						tipo_filtro: TIPO_CUENTA;
						valor: eval($(`#id_tipo_cuenta`).val())
					"
				',
				'titulo' => 'Renglón'
			])
			@endcomponent
		</div>

		<div class="col-3 col-sm-4 col-md-3 col-lg-1 col-xl-1 col-xxl-1">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'referencia',
				'atributos' => 'maxlength=30',
				'titulo' => 'Referencia'
			])
			@endcomponent
		</div>

		<div class="col-2 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'date',
				'id' => 'fecha',
				'valor' => date("Y-m-d"),
				'atributos' => '',
				'titulo' => 'Fecha'
			])
			@endcomponent
		</div>

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

		<div class="col-2 col-sm-5 col-md-3 col-lg-1 col-xl-1 col-xxl-1">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'tiene_libreta',
				'titulo' => 'Libreta'
			])

				<option value="0">NO</option>
				<option value="1">SI</option>

			@endcomponent
		</div>

		<div class="col-2 col-sm-5 col-md-3 col-lg-1 col-xl-1 col-xxl-1">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'pertenece_pago_interes',
				'titulo' => 'Pago Interes'
			])

				<option value="0">NO</option>
				<option value="1">SI</option>

			@endcomponent
		</div>

		<div class="col-6 col-sm-7 col-md-3 col-lg-3 col-xl-3 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'identificacion_apoderado',
				'mascara' => ['tipo' => 'cedula'],
				'titulo' => 'Identificación del Apoderado'
			])
			@endcomponent
		</div>

		<div class="col-6 col-sm-5 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'apoderado',
				'atributos' => 'maxlength=250',
				'titulo' => 'Apoderado'
			])
			@endcomponent
		</div>

		<div class="col-12 col-sm-7 col-md-3 col-lg-3 col-xl-3 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'id_oficial',
				'atributos' => 'data-peticion-tabla=oficiales',
				'titulo' => 'Oficial',
			])
			@endcomponent
		</div>

		<div class="col-12 col-sm-5 col-md-3 col-lg-3 col-xl-2 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'id_sucursal',
				'atributos' => '
					data-peticion-procedimiento="p_traer_filtros"
					data-peticion-parametros="renglon: SUCURSALES"
				',
				'titulo' => 'Sucursal'
			])
			@endcomponent
		</div>

		<div class="col-12 col-sm-7 col-md-3 col-lg-3 col-xl-2 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'id_tipo_tasa',
				'atributos' => '
					data-peticion-procedimiento="p_traer_filtros"
					data-peticion-parametros="
					renglon: TIPOS_TASAS;
					valor: eval($(`#id_tipo_cuenta`).val())
					"
				',
				'titulo' => 'Tipo de Tasa'
			])
			@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'],
					'decimales' => '4'
				],
				'titulo' => 'Tasa'
			])
			@endcomponent
		</div>

		<div class="col-6 col-sm-6 col-md-6col-lg-6col-xl-6 col-xxl-5">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'detalle',
				'atributos' => 'maxlength=250',
				'titulo' => 'Concepto'
			])
			@endcomponent
		</div>

		<div class="divider divider-left py-1 mt-1 text-white ">
			<div class="divider-text bg-tertiary p-1 rounded fw-bolder fw-bold fs-6" style="width:160px">Relacionados</div>
		</div>

		<div class="row">

			<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
				@component('aplicacion.elementos.grupo.campos')

					@component('aplicacion.elementos.campo.etiqueta', [
						'id' => 'id_relacion',
						'mascara' => ['tipo' => 'entero'],
						'titulo' => 'Relacionado'
					])
					@endcomponent

					@component('aplicacion.elementos.campo', [
						'id' => 'relacionado',
						'clases' => '
							input-group-text
							col-9 col-sm-8 col-md-9 col-lg-10 col-xl-10 col-xxl-10
							text-start
						',
						'atributos' => 'disabled'
					])
					@endcomponent

					@component('aplicacion.elementos.boton', [
						'clases' => 'btn btn-primary',
						'atributos' => '

							data-bs-toggle=modal
							data-bs-target=#ventanaEmergenteConsulta
							data-peticion-tabla=relacionados
							data-peticion-campo=cliente
							data-ventana-emergente-titulo=Relacionados
						'
					])
						<i class="fa-solid fa-magnifying-glass"></i>
					@endcomponent

				@endcomponent
			</div>

			<div class="col-6 col-sm-5 col-md-3 col-lg-2 col-xl-2 col-xxl-3">
				@component('aplicacion.elementos.campo.etiqueta', [
					'tipo' => 'select',
					'id' => 'id_tipo_relacion',
					'atributos' => 'data-peticion-tabla=tipos_relaciones',
					'titulo' => 'Tipo de Relación',
				])
				@endcomponent
			</div>

			<div class="col-1 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-xxl-2">
				@component('aplicacion.elementos.boton', [
					'id' => 'botonAgregar'
				])
					Agregar
				@endcomponent
			</div>

		</div>

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

			<thead>
				<tr>

					<th class="id_relacion" data-columna-nombre="id_relacion" data-columna-tipo="num" data-columna-sumar="filas">
						ID
					</th>

					<th data-columna-nombre="relacionado" data-columna-tipo="string">
						Relacionado
					</th>

					<th data-columna-nombre="id_tipo_relacion" data-columna-tipo="string" data-columna-ordenable>
						ID Tipo Relación
					</th>

					<th data-columna-nombre="tipo_relacion" data-columna-tipo="string" data-columna-ordenable>
						Tipo de Relación
					</th>

					<th class="text-center" data-columna-tipo="eliminar"></th>

				</tr>
			</thead>

			<tbody>
				<tr>
					<td class="text-center" colspan="100%">Cargando...</td>
				</tr>
			</tbody>

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

		@endcomponent

		<div class="divider divider-left py-1 mt-1 text-white ">
			<div class="divider-text bg-tertiary p-1 rounded fw-bolder fs-6" style="width:160px">Cuentas</div>
		</div>

		@component('aplicacion.elementos.tabla-vieja', ['atributos' => 'data-tabla-seleccionable=doble'])
		@endcomponent

  </div>

</form>

@include('aplicacion.elementos.ventanaEmergenteConsulta')

@endsection

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

{{-- ! --}}
@parent

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

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

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

@endsection
