@extends('tema.plantilla')

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

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

@endsection

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

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

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

@endsection

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

{{-- ! --}}
<form
	class="form"
	id="formularioUsuario"
	autocomplete="off"
  data-tabla-limpiar-fila-activa="#tablaRegistros"
>

	@csrf

	<input id="id_usuario" name="id_usuario_registrar" hidden>

	<div class="row">

		<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' => 'usuario',
				'atributos' => 'maxlength=319',
				'titulo' => 'Usuario'
			])
			@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', [
				'tipo' => 'password',
				'id' => 'contrasena',
				'atributos' => 'maxlength=128',
				'titulo' => 'Contraseña'
			])
			@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', [
				'tipo' => 'password',
				'id' => 'pin',
				'atributos' => 'maxlength=6',
				'titulo' => 'PIN'
			])
			@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' => 'nombre_usuario',
				'atributos' => 'maxlength=200',
				'titulo' => 'Nombre usuario'
			])
			@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' => 'correo',
				'atributos' => 'maxlength=319',
				'titulo' => 'Correo'
			])
			@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', [
				'tipo' => 'select',
				'id' => 'id_sucursal',
				'atributos' => 'data-peticion-tabla=sucursales',
				'titulo' => 'Sucursal'
			])

			@endcomponent
		</div>

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

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

				@component('aplicacion.elementos.boton', ['clases' => 'btn btn-primary botonActualizar'])
					<i class="fa-solid fa-rotate"></i>
				@endcomponent

			@endcomponent
		</div>

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

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

				@component('aplicacion.elementos.boton', ['clases' => 'btn btn-primary botonActualizar'])
					<i class="fa-solid fa-rotate"></i>
				@endcomponent

			@endcomponent
		</div>

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

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

				@component('aplicacion.elementos.boton', ['clases' => 'btn btn-primary botonActualizar'])
					<i class="fa-solid fa-rotate"></i>
				@endcomponent

			@endcomponent
		</div>

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

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

				@component('aplicacion.elementos.boton', ['clases' => 'btn btn-primary botonActualizar'])
					<i class="fa-solid fa-rotate"></i>
				@endcomponent

			@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', [
				'tipo' => 'select',
				'id' => 'depurador',
				'titulo' => 'Depurador'
			])
				<option value="0">NO</option>
				<option value="1">SI</option>
			@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>

		@component('aplicacion.elementos.tabla-vieja', ['atributos' => 'data-tabla-seleccionable=doble'])
		@endcomponent

	</div>

</form>

{{-- ! --}}
@include('aplicacion.elementos.VentanaEmergenteConsulta')

@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/administracion/registros/usuarios.js') }}"></script>

@endsection
