@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Procesos de Asistencias')

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

@endsection

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

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

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

@endsection

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

<form
	class="form"
	id="formularioAsistencias"
	autocomplete="off"
	data-campo-deshabilitar="#fecha"
	data-tabla-limpiar="#tablaRegistrosAsistencias, #tablaRegistrosEmpleados"
>

	@csrf

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

	<div class="row">

		<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 col-xxl-4">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'id_proyecto',
				'atributos' => '
					data-peticion-procedimiento=p_traer_filtros
					data-peticion-parametros="
						renglon: PROYECTOS;
						tipo_filtro: NOMINAS_ABIERTAS
					"
				',
				'titulo' => 'Proyecto'
			])
			@endcomponent
		</div>

		<div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4 col-xxl-4">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'nomina',
				'atributos' => 'disabled',
				'titulo' => 'Periodo Nómina'
			])
			@endcomponent
		</div>

		<div class="col-6 col-sm-6 col-md-6 col-lg-2 col-xl-2 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'date',
				'id' => 'fecha',
				'valor' => date('Y-m-d'),
				'atributos' => 'disabled',
				'titulo' => 'Fecha'
			])
			@endcomponent
		</div>

		<div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 col-xxl-2 text-end">
			@component('aplicacion.elementos.boton', [
				'id' => 'botonAgregar',
				'clases' => 'btn btn-success',
				'atributos' => '
					disabled
					data-bs-toggle=modal
					data-bs-target=#ventanaEmergenteEmpleados
					data-ventana-emergente-titulo=Empleados
				'
			])
				Agregar Empleado
			@endcomponent
		</div>

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

			<thead>
				<tr>

					<th
						class="dia"
						data-columna-nombre="asistencia"
						data-columna-tipo="checkbox"
						data-columna-sumar="filas"
					>
						<input type="checkbox" class="form-check-input" disabled>
						Día
					</th>

					<th
						class="medio"
						data-columna-nombre="medio_dia"
						data-columna-tipo="checkbox"
					>
						<input type="checkbox" class="form-check-input" disabled>
						Medio día
					</th>

					<th
						class="d-none d-lg-table-cell"
						data-columna-nombre="id_empleado"
						data-columna-tipo="num"
						data-columna-ordenable
					>ID</th>

					<th data-columna-nombre="nombre" data-columna-tipo="string" data-columna-ordenable>
						Nombre
					</th>

					<th
						class="d-none d-lg-table-cell"
						data-columna-nombre="posicion"
						data-columna-tipo="string"
						data-columna-ordenable
					>Posición</th>

					<th
						class="d-none d-lg-table-cell"
						data-columna-nombre="proyecto"
						data-columna-tipo="string"
						data-columna-ordenable
						data-columna-buscable
					>Proyecto</th>

					<th class="d-none d-lg-table-cell" data-columna-nombre="ultima_asistencia" data-columna-tipo="date">
						Última asistencia
					</th>

					<th
						class="text-end"
						data-columna-nombre="sueldo"
						data-columna-tipo="num-fmt"
						data-columna-ordenable
						data-columna-sumar
					>Sueldo</th>

					<th
						class="otros text-end"
						data-columna-nombre="otros"
						data-columna-tipo="input"
						data-columna-campo-atributos='
							class="form-control fw-bold text-end"
							inputmode=decimal
							data-mascara=numerico
						'
						data-columna-ordenable
						data-columna-buscable
						data-columna-sumar
					>Otros</th>

					<th
						class="d-none d-lg-table-cell text-end"
						data-columna-nombre="total"
						data-columna-tipo="num-fmt"
						data-columna-ancho="0%"
						data-columna-ordenable
						data-columna-sumar
					>Total</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>

</form>

{{-- ! --}}
@component('aplicacion.elementos.VentanaEmergente', [
  'id' => 'ventanaEmergenteEmpleados',
  'atributos' => '',
  'clasesContenedor' => 'modal-lg',
  'clasesContenidoVentana' => 'h-100',
	'clasesContenedorTitulo' => 'bg-success',
  'clasesPie' => 'justify-content-between',
  'atributosBoton1' => '',
	'clasesBoton1' => 'btn btn-success',
  'textoBoton1' => 'Seleccionar'
])
	@component('aplicacion.elementos.tabla-vieja', [
		'id' => 'tablaRegistrosEmpleados',
		'atributos' => 'data-tabla-seleccionable'
	])

		<thead>
			<tr>

				<th
					class="dia"
					data-columna-nombre="asistencia"
					data-columna-tipo="checkbox"
					data-columna-sumar="filas"
				>
					<input type="checkbox" class="form-check-input" disabled>
				</th>

				<th
					class="medio d-none"
					data-columna-nombre="medio_dia"
					data-columna-tipo="checkbox"
				>
					<input type="checkbox" class="form-check-input" disabled>
					Medio día
				</th>

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

				<th
					data-columna-nombre="nombre"
					data-columna-tipo="string"
					data-columna-ordenable
					data-columna-buscable
				>Nombre</th>

				<th
					data-columna-nombre="posicion"
					data-columna-tipo="string"
					data-columna-ordenable
					data-columna-buscable
				>Posición</th>

				<th
					data-columna-nombre="proyecto"
					data-columna-tipo="string"
					data-columna-ordenable
					data-columna-buscable
				>Proyecto</th>

				<th
					data-columna-nombre="ultima_asistencia"
					data-columna-tipo="date"
				>Última asistencia</th>

				<th
					class="text-end"
					data-columna-nombre="sueldo"
					data-columna-tipo="num-fmt"
					data-columna-ordenable
					data-columna-buscable
					data-columna-sumar
				>Sueldo</th>

				<th
					class="d-none"
					data-columna-nombre="otros"
					data-columna-tipo="num-fmt"
				></th>

				<th
					class="d-none"
					data-columna-nombre="total"
					data-columna-tipo="num-fmt"
				></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
@endcomponent

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

@endsection
