@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Conceptos Fijos')

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

@endsection

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

@component('aplicacion.elementos.boton', [
	'id' => 'botonBuscar',
	'atributos' => 'disabled'
])
	Buscar
@endcomponent

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

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

@endsection

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

{{-- ! --}}
<form class="form row" id="formularioConceptosFijos" autocomplete="off">

  @csrf

  <input id="json_ingresos_nomina" name="json_ingresos_nomina" hidden>

	<div class="row">

		<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-xxl-4">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'id_tipo_nomina',
				'titulo' => 'Tipo Nómina',
				'atributos' => 'data-peticion-tabla=tipos_nominas'
			])
			@endcomponent
		</div>
		<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-xxl-5">
			@component('aplicacion.elementos.grupo.campos')

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

				@component('aplicacion.elementos.boton', [
					'clases' => 'btn btn-success',
					'atributos' => '
						data-accion=crear
						data-peticion-campo=id_concepto
					'
				])
					<i class="fa-solid fa-plus"></i>
				@endcomponent

			@endcomponent
		</div>

		<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
			@component('aplicacion.elementos.tabla', [
				'clases' => 'table-primary',
				'id' => 'conceptos'
			])

				<thead>
					<tr>

						<th
							class="id_empleado"
							data-columna-nombre="id_empleado"
							data-columna-tipo="num"
							data-columna-ancho=""
						>ID</th>

						<th
							class=""
							data-columna-nombre="cedula"
							data-columna-tipo="string"
							data-columna-ancho=""
						>Cédula</th>

						<th
							data-columna-nombre="nombre"
							data-columna-tipo="num"
							data-columna-ancho=""
							data-columna-ordenable
							data-columna-ancho="50%"
						>Nombre</th>

						<th
							data-columna-nombre="sueldo"
							data-columna-tipo="num-fmt"
							data-columna-ancho=""
							data-columna-ordenable
						>Sueldo</th>

						<th
							class="primera_quincena text-center"
							data-columna-nombre="primera_quincena"
							data-columna-tipo="checkbox"
						>
							<input type="checkbox" class="form-check-input" disabled>
							Solo Primera Quincena
						</th>

						<th
							class="fin_mes text-center"
							data-columna-nombre="fin_mes"
							data-columna-tipo="checkbox"
							>
							<input type="checkbox" class="form-check-input">
							Solo Fin de Mes
						</th>

						<th
							class="text-end monto"
							data-columna-nombre="monto"
							data-columna-tipo="input"
							data-columna-campo-atributos='
							class="form-control text-end fw-bold"
							inputmode=decimal
							onclick=this.select()
							data-mascara=numerico
							data-mascara-decimales=2
						'
							data-columna-sumar

						>Monto</th>

					</tr>
				</thead>

				<tbody>
					<tr>
						<td class="text-center" colspan="100%">Cargando...</td>
					</tr>
				</tbody>

				<tfoot>
					<tr>
						<th colspan="100%">&nbsp;</th>
					</tr>
				</tfoot>

			@endcomponent
		</div>

	</div>

</form>

@endsection

{{-- {} Programación de la sección --}}
@section('programacion')

{{-- ! --}}
@parent

{{-- ! Select 2 v4.1.0 --}}
<script src="{{ asset('archivos/librerias/select2/v4.1.0/js/select2.min.js') }}"></script>

{{-- ! 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')

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

@endsection
