@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Reportes de Facturas CXC')

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

@endsection

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

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

<form
	method="GET"
	class="form col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12"
	id="formularioReporteFacturas"
	data-campo-prevenir="#hasta_fecha"
>

  <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-12 col-sm-12 col-md-6 col-lg-6 col-xl-5 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-8 col-sm-8 col-md-9 col-lg-9 col-xl-9 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-12 col-sm-6 col-md-6 col-lg-4 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-3 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'date',
        'id' => 'desde_fecha',

          'atributos' => '
            min=1753-01-01
            max=' . date("Y-m-d") . '
          ',
        'titulo' => 'Desde Fecha'
      ])
      @endcomponent
    </div>

    <div class="col-6 col-sm-3 col-md-3 col-lg-3 col-xl-2 col-xxl-2">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'date',
        'id' => 'hasta_fecha',

          'atributos' => '
            min=' . date("Y-m-d") . '
            max=9999-12-31
          ',
        'titulo' => 'Hasta Fecha'
      ])
      @endcomponent
    </div>

    <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 col-xxl-2">
      @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-6 col-md-6 col-lg-3 col-xl-3 col-xxl-2">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'select',
        'id' => 'id_distrito',
        'atributos' => '
          data-peticion-tabla=distritos
        ',
        'titulo' => 'Distrito'
      ])
      @endcomponent
    </div>

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

    <div class="col-12 col-sm-6 col-md-6 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: CXC
          "
        ',
        'titulo' => 'Renglón'
      ])
      @endcomponent
    </div>

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

    <div class="col-12 col-sm-6 col-md-6 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-6 col-sm-6 col-md-6 col-lg-3 col-xl-3 col-xxl-2">
      @component('aplicacion.elementos.campo.etiqueta', [
        'id' => 'dia_vencimiento_inicial',
        'mascara' => [
          'tipo' => 'entero',
          'valor' => ['maximo' => '999']
        ],
        'titulo' => 'Días Venc. Inicial'
      ])
      @endcomponent
    </div>

    <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3 col-xxl-2">
      @component('aplicacion.elementos.campo.etiqueta', [
        'id' => 'dia_vencimiento_final',
        'mascara' => [
          'tipo' => 'entero',
          'valor' => ['maximo' => '999']
        ],
        'titulo' => 'Días Venc. Final'
      ])
      @endcomponent
    </div>

    <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 col-xxl-2">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'date',
        'id' => 'fecha_vencimiento',
        'atributos' => 'min=1753-01-01',
        'titulo' => 'Fecha Venc.'
      ])
      @endcomponent
    </div>

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

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

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

        <option></option>

        <option value="SI">
          SI
        </option>

        <option value="NO">
          NO
        </option>

      @endcomponent
    </div>

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

    <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 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="divider divider-left my-2 bg-primary text-white">
			<div class="divider-text bg-primary" style="height: 4px">&nbsp;</div>
		</div>

    <div class="col-12 col-sm-12 col-md-6 col-lg-5 col-xl-5 col-xxl-3">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'select',
        'id' => 'tipo_reporte',
        'atributos' => '
          data-peticion-procedimiento="p_traer_tipos_reporte"
          data-peticion-parametros="renglon: FACTURAS"
        ',
        'titulo' => 'Tipo de Reporte'
      ])
      @endcomponent
    </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

      </div>
    </div>

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

  </div>

</form>

@include('aplicacion.elementos.VentanaEmergenteConsulta')

@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/facturasCXC.js') }}"></script>

@endsection
