@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Reportes de Artículos')

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

@endsection

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

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

<form
	method="GET"
	class="form"
	id="formularioReporteArticulos"
>

	<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-8 col-md-7 col-lg-5 col-xl-5 col-xxl-5">
      @component('aplicacion.elementos.grupo.campos')

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

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

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

      @endcomponent
    </div>

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

        @component('aplicacion.elementos.campo.etiqueta', [
          'tipo' => 'select',
          'id' => 'id_departamento',
          'atributos' => 'data-peticion-tabla=departamentos',
          'titulo' => 'Departamento'
        ])
        @endcomponent

      @endcomponent
    </div>

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

        @component('aplicacion.elementos.campo.etiqueta', [
          'tipo' => 'select',
          'id' => 'id_categoria',
          'atributos' => 'data-peticion-tabla=categorias',
          'titulo' => 'Categoría'
        ])
        @endcomponent

      @endcomponent
    </div>

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

        @component('aplicacion.elementos.campo.etiqueta', [
          'tipo' => 'select',
          'id' => 'id_subcategoria',
					'atributos' => 'data-peticion-tabla=subcategorias',
          'titulo' => 'Subcategoría'
        ])
        @endcomponent

      @endcomponent
    </div>

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

        @component('aplicacion.elementos.campo.etiqueta', [
          'tipo' => 'select',
          'id' => 'id_marca',
          'atributos' => 'data-peticion-tabla=marcas',
          'titulo' => 'Marca'
        ])
        @endcomponent

      @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-">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'tipo_reporte',
				'atributos' => 'data-peticion-procedimiento=p_traer_tipos_reporte',
				'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', ['atributos' => 'data-tabla-seleccionable'])
		@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/articulos.js') }}"></script>

@endsection
