@extends('tema.plantilla')

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

{{-- {} Ajustes, propiedas y estilos --}}
@section('cabeza')

{{-- ! --}}
@parent

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

<link rel="stylesheet" href="{{ asset('archivos/css/aplicacion/seccion/administracion/registros/accesosRemotos.css')}}">

@endsection

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

<form
  class="form"
  id="formularioAccesosRemotos"
  data-tabla-limpiar="#tablaRegistros"
>

  @csrf

  <input id="id_acceso_remoto" name="id_acceso_remoto" hidden />

  <div class="row">

		<div class="col-12 col-sm-6 col-md-6 col-lg-7 col-xl-6 col-xxl-6">

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

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

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

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

			@endcomponent

		</div>

		<div class="col-6 col-sm-3 col-md-3 col-lg-2 col-xl-3 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'titulo' => 'Tipo de Acceso',
				'id' => 'tipo_accesso'
			])

			@endcomponent
		</div>

		<div class="col-6 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'titulo' => 'Referencia',
				'id' => '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', [
				'titulo' => 'Clave Referencia',
				'id' => 'clave_referencia'
			])
			@endcomponent
		</div>

		<div class="col-6 col-sm-3 col-md-3 col-lg-3 col-xl-2 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'titulo' => 'Usuario',
				'id' => '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', [
				'titulo' => 'Contraseña',
				'id' => 'contrasena_usuario'
			])
			@endcomponent
		</div>

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

    <div class="d-flex">
      <div class="col-auto">

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

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

      </div>
    </div>

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

			<thead>
				<tr>

					<th
						class="id_conexion"
						data-columna-nombre="id_conexion"
						data-columna-tipo="num"
						data-columna-sumar="filas"
					>Conexión</th>

					<th data-columna-nombre="cliente" data-columna-tipo="string">
						Cliente
					</th>

					<th data-columna-nombre="acceso" data-columna-tipo="string">
						Acceso
					</th>

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

					<th
						data-columna-nombre="clave_referencia"
						data-columna-tipo="string"
						data-columna-ordenable
					>Clave Ref.</th>

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

					<th
						data-columna-nombre="clave_usuario"
						data-columna-tipo="string"
						data-columna-ordenable
					>Clave Usuario</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>

</form>

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

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

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

@endsection
