@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Reporte de Documentos')

{{-- {} 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/reportes/documentos.css') }}">

@endsection

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

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

<form
	class="form"
	id="formularioDocumentos"
	autocomplete="off"
	>

	<input type="text" name="id_documento" id="id_documento" hidden>
	<input type="text" name="renglon" id="renglon" hidden>

	<div class="row">

		<div class="divider divider-left my-2 bg-primary text-white">
			<div class="divider-text bg-primary" style="height: 4px">&nbsp;</div>
		</div>

		<div class="col-2 col-sm-2 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'id_renglon',
				'atributos' => '
					data-peticion-procedimiento="p_traer_filtros"
					data-peticion-parametros="
						renglon: DOCUMENTOS;
						tipo_filtro: RENGLON
					"
				',
				'titulo' => 'Renglón'
			])
			@endcomponent
		</div>

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

		<div class="col-12 col-sm-4 col-md-6 col-lg-3 col-xl-3 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-6 col-sm-4 col-md-3 col-lg-3 col-xl-3 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'date',
				'id' => 'desde_fecha',
				'titulo' => 'Desde Fecha'
			])
			@endcomponent
		</div>

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

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

		<div class="col-12 col-sm-4 col-md-6 col-lg-2 col-xl-2 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'medio_pago',
				'atributos' => '
					data-peticion-procedimiento="p_traer_filtros"
					data-peticion-parametros="renglon: MEDIOS_PAGOS"
				',
				'titulo' => 'Medio de Pago'
			])
			@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', [
				'tipo' => 'select',
				'id' => 'id_usuario_registro',
				'atributos' => '
					data-peticion-procedimiento="p_traer_filtros"
					data-peticion-parametros="renglon: USUARIOS"
				',
				'titulo' => 'Registrado Por'
			])
			@endcomponent
		</div>

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

		<div class="divider divider-left my-2 bg-primary text-white [&>span]:flex-1">
			<div class="divider-text bg-primary" style="height: 4px">&nbsp;</div>
		</div>

    <div class="d-flex">
      <div class="col-auto">

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

        @component('aplicacion.elementos.boton', [
          'tipo' => 'reset',
          'id' => 'botonLimpiar'
        ])
          Limpiar
        @endcomponent

				@component('aplicacion.elementos.boton', [
          'id' => 'botonImprimir',
					'atributos' => 'disabled',
					'clases' => 'btn btn-info'
        ])
          Imprimir
        @endcomponent

      </div>
    </div>

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

	</div>

</form>

@component('aplicacion.elementos.ventana', [
  'id' => 'informacion',
  'titulo' => 'Información',
  'cabeza' => ['clases' => 'bg-primary'],
  'pie' => [
    'contenido' => '
      <button type=button class="btn btn-secondary" data-bs-dismiss=modal>Cerrar</button>
    '
  ]
])
	@component('aplicacion.elementos.tabla-vieja',
	[
		'id' => 'tablaRegistrosInformacion',
		'atributos' => 'data-tabla-seleccionable'
	])
	@endcomponent
@endcomponent

@endsection

{{-- {} 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>

{{-- ! 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/reportes/documentos.js') }}"></script>

@endsection
