@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Estadísticas')

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

@endsection

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

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

@component('aplicacion.elementos.boton', [
  'id' => 'botonLimpiar',
  'clases' => 'btn btn-warning',
  'atributos' => '
    form=formularioEstadisticas
    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 class="form" id="formularioEstadisticas" autocomplete="off">

  @csrf

  <div class="row">

    <div class="col-4 col-sm-4 col-md-4 col-lg-2 col-xl-2 col-xxl-2">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'select',
        'id' => 'id_modulo',
				'atributos' => 'data-peticion-tabla=modulos',
        'titulo' => 'Módulo'
      ])
      @endcomponent
    </div>

    <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10 col-xxl-10">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'select',
        'id' => 'estadistica',
				'atributos' => '
					data-peticion-procedimiento="p_traer_filtros"
					data-peticion-parametros="
						renglon: INFORMES;
						tipo_filtro: MODULO;
						valor: eval(() => id_modulo.value)
					"
				',
        'titulo' => 'Estadística'
      ])
      @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>

    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
      <div id="grafica"></div>
    </div>

  </div>

</form>

@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>

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

{{-- ! Apex Charts v3.45.2 --}}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

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

@endsection
