@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Registros de Empleados')

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

@endsection

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

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

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

@endsection

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

<form
	class="form"
	id="formularioEmpleado"
	autocomplete="off"
	data-tabla-limpiar="#tablaRegistros"
>

	@csrf

	<input type="text" id="id_entidad" name="id_entidad" hidden>

	<div class="row">

		@component('aplicacion.elementos.grupo.campos')

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

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

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

		@endcomponent

		<div class="list-group list-group-horizontal text-center" role="tablist">

			<a class="list-group-item list-group-item-action list-group-item-tertiary-opposite active"
				href="#datosPersonales"
				role="tab"
				aria-selected="true"
				data-bs-toggle="list"
			>Datos Personales</a>

			<a class="list-group-item list-group-item-action list-group-item-tertiary-opposite"
				href="#datosTrabajo"
				tabindex="-1"
				role="tab"
				aria-selected="false"
				data-bs-toggle="list"
			>Datos del Trabajo</a>

			<a class="list-group-item list-group-item-action list-group-item-tertiary-opposite"
				href="#cuentasBancos"
				tabindex="-1"
				role="tab"
				aria-selected="false"
				data-bs-toggle="list"
			>Cuentas de Bancos</a>

		</div>

		<div class="tab-content">

			<div class="tab-pane active show" id="datosPersonales" role="tabpanel">
				<div class="row">

					<div class="col-6 col-sm-6 col-md-3 col-lg-1 col-xl-1 col-xxl-1">
						@component('aplicacion.elementos.campo.etiqueta', [
							'id' => 'referencia',
							'atributos' => 'maxlength=30',
							'titulo' => 'Referencia'
						])
						@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', [
							'id' => 'identificacion',
							'mascara' => ['tipo' => 'cedula'],
							'titulo' => 'Identificación'
						])
						@endcomponent
					</div>

					<div class="col-6 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
						@component('aplicacion.elementos.campo.etiqueta', [
							'id' => 'pasaporte',
							'mascara' => ['tipo' => 'pasaporte'],
							'titulo' => 'Pasaporte'
						])
						@endcomponent
					</div>

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

					<div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
						@component('aplicacion.elementos.campo.etiqueta', [
							'tipo' => 'date',
							'id' => 'fecha_nacimiento',
							'valor' => $fecha->valor,
							'atributos' => '
								min=1753-01-01
								max=' . $fecha->valor,
							'titulo' => 'Fecha de Nacimiento'
						])
						@endcomponent
					</div>

					<div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
						@component('aplicacion.elementos.campo.etiqueta', [
							'titulo' => 'Primer Nombre',
							'id' => 'primer_nombre',
							'atributos' => 'maxlength=50'
						])
						@endcomponent
					</div>

					<div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
						@component('aplicacion.elementos.campo.etiqueta', [
							'titulo' => 'Segundo Nombre',
							'id' => 'segundo_nombre',
							'atributos' => 'maxlength=50'
						])
						@endcomponent
					</div>

					<div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
						@component('aplicacion.elementos.campo.etiqueta', [
							'titulo' => 'Primer Apellido',
							'id' => 'primer_apellido',
							'atributos' => 'maxlength=50'
						])
						@endcomponent
					</div>

					<div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
						@component('aplicacion.elementos.campo.etiqueta', [
							'titulo' => 'Segundo Apellido',
							'id' => 'segundo_apellido',
							'atributos' => 'maxlength=50'
						])
						@endcomponent
					</div>

					<div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
						@component('aplicacion.elementos.campo.etiqueta', [
							'id' => 'telefono',
							'mascara' => ['tipo' => 'telefono'],
							'titulo' => 'Teléfono'
						])
						@endcomponent
					</div>

					<div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
						@component('aplicacion.elementos.campo.etiqueta', [
							'id' => 'celular',
							'mascara' => ['tipo' => 'telefono'],
							'titulo' => 'Celular'
						])
						@endcomponent
					</div>

					<div class="col-6 col-sm-6 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
						@component('aplicacion.elementos.campo.etiqueta', [
							'id' => 'whatsapp',
							'mascara' => ['tipo' => 'telefono'],
							'titulo' => 'WhatsApp'
						])
						@endcomponent
					</div>

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

							@component('aplicacion.elementos.campo.etiqueta', [
								'tipo' => 'select',
								'id' => 'id_institucion_educativa',
								'atributos' => 'data-peticion-tabla=instituciones_educativas',
								'titulo' => 'Institución Educativa'
							])
							@endcomponent

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

						@endcomponent
					</div>

					<div class="col-12 col-sm-12 col-md-6 col-lg-12 col-xl-12 col-xxl-12">
						@component('aplicacion.elementos.campo.etiqueta', [
							'tipo' => 'email',
							'titulo' => 'Correo',
							'id' => 'correo',
							'atributos' => 'maxlength=200'
						])
						@endcomponent
					</div>

					<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
						@component('aplicacion.elementos.campo.etiqueta', [
							'titulo' => 'Dirección',
							'id' => 'direccion',
							'atributos' => 'maxlength=200'
						])
						@endcomponent
					</div>

				</div>
			</div>

			<div class="tab-pane" id="datosTrabajo" role="tabpanel">
				<div class="row">

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

					<div class="col-6 col-sm-6 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
						@component('aplicacion.elementos.campo.etiqueta', [
							'id' => 'sueldo',
							'mascara' => ['tipo' => 'numerico'],
							'titulo' => 'Sueldo'
						])
						@endcomponent
					</div>

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

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

							@component('aplicacion.elementos.boton', [
								'clases' => 'btn btn-success',
								'atributos' => '
									data-accion=crear
									data-peticion-campo=id_proyecto
								'
							])
								<i class="fa-solid fa-plus"></i>
							@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_departamento',
								'atributos' => 'data-peticion-tabla=departamentos',
								'titulo' => 'Departamento'
							])
							@endcomponent

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

						@endcomponent
					</div>

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

							@component('aplicacion.elementos.campo.etiqueta', [
								'tipo' => 'select',
								'titulo' => 'Posición',
								'id' => 'id_posicion',
								'atributos' => 'data-peticion-tabla=posiciones'
							])
							@endcomponent

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

						@endcomponent
					</div>

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

				</div>
			</div>

			<div class="tab-pane" id="cuentasBancos" role="tabpanel">

				<div class="row">

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

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

          <div class="col-12 col-sm-6 col-md-6 col-lg-2 col-xl-2 col-xxl-3">
            @component('aplicacion.elementos.campo.etiqueta', [
              'id' => 'numero_cuenta',
							'mascara' => ['tipo' => 'entero'],
              'titulo' => '# 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', [
              'id' => 'referenciaCuentaBanco',
              'atributos' => 'maxlength=30',
              'titulo' => 'Referencia'
            ])
            @endcomponent
          </div>

          <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1 text-end">
            @component('aplicacion.elementos.boton', [
              'tipo' => 'submit',
              'id' => 'botonAgregar'
            ])
              Agregar
            @endcomponent
          </div>

				</div>

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

          <thead>
            <tr>

              <th data-columna-nombre="id_banco" data-columna-tipo="num" data-columna-sumar="filas">
                ID
              </th>

              <th data-columna-nombre="banco" data-columna-tipo="string">
                Banco
              </th>

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

              <th class="numero_cuenta" data-columna-nombre="cuenta_banco_entidad" data-columna-tipo="string" data-columna-ordenable>
                # Cuenta
              </th>

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

              <th class="text-center" data-columna-tipo="eliminar"></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>

	</div>

</form>

@component('aplicacion.elementos.VentanaEmergenteConsulta', [
  'titulo' => 'Consulta de Empleados'
])
@endcomponent

@endsection

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

{{-- ! --}}
@parent

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

{{-- ! iMask v6.4.3 --}}
<script src="{{ asset('archivos/librerias/imask/v6.4.3/imask.js') }}"></script>

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

@endsection
