@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Proceso de Consulta de Estados 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/procesos/consultaEstadosCuentas.css') }}">

@endsection

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

@component('aplicacion.elementos.boton', [
  'tipo' => 'submit',
  'id' => 'botonGuardar',
	'clases' => 'd-none',
  'atributos' => '
    form=formularioConsultaEstadosCuentas
  '
])
  Guardar
@endcomponent

@component('aplicacion.elementos.boton', [
  'id' => 'botonBuscar',
  'clases' => 'btn btn-primary'
])
  Buscar
@endcomponent

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


@endsection

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

<form
	class="form"
  id="formularioConsultaEstadosCuentas"
  autocomplete="off"
	{{-- data-tabla-limpiar="#tablaRegistros" --}}
	data-campo-prevenir="#desde_fecha,#hasta_fecha"
>

  @csrf

  <input id="id_entidad" name="id_entidad" 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.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-3 col-md-4 col-lg-2 col-xl-2 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'identificacion',
				'mascara' => ['tipo' => 'cedula'],
				'titulo' => 'Identificación'
			])
			@endcomponent
		</div>

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

		<div class="col-12 col-sm-12 col-md-4 col-lg-3 col-xl-3 col-xxl-3">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'id_posicion',
				'atributos' => 'data-peticion-tabla=posiciones',
				'titulo' => 'Posición'
			])
			@endcomponent
		</div>

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

		<div class="col-6 col-sm-3 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'date',
				'id' => 'desde_fecha',
				'atributos' => '
					data-peticion-procedimiento=p_traer_fecha_reporte
				',
				'titulo' => 'Desde Fecha'
			])
			@endcomponent
		</div>

		<div class="col-6 col-sm-3 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'date',
				'id' => 'hasta_fecha',
				'atributos' => 'data-peticion-procedimiento=p_traer_fecha_reporte',
				'titulo' => 'Hasta Fecha'
			])
			@endcomponent
		</div>

		<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
      <div class="p-1 rounded-1 bg-tertiary fs-6 text-white"></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/procesos/consultaEstadosCuentas.js') }}"></script>

@endsection
