@extends('tema.plantilla')

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

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

@endsection

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

{{-- {} Contenido de la sección --}}
@section('seccion')
<form
	class="form"
	id="formularioProgramas"
	autocomplete="off"
	data-tabla-limpiar-fila-activa="#tablaRegistros"
>

	@csrf

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

	<div class="row">

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

				<option></option>

				@foreach (session('aplicacion')['rutas'] as $ruta)
					<option value="{{ $ruta }}">{{ $ruta }}</option>
				@endforeach

			@endcomponent
		</div>

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

		<div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3 col-xxl-3">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'descripcion',
				'atributos' => 'maxlength=100',
				'titulo' => 'Descripción'
			])
			@endcomponent
		</div>

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

				@component('aplicacion.elementos.campo.etiqueta', [
					'id' => 'icono',
					'atributos' => 'maxlength=100',
					'titulo' => 'Icono'
				])
				@endcomponent

				<div
					class="
						input-group-text
						col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 col-xxl-2
						justify-content-center
					"
				>
					<i></i>
				</div>

			@endcomponent
		</div>

		<div class="col-6 col-sm-6 col-md-6 col-lg-2 col-xl-2 col-xxl-3">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'id_modulo',
				'atributos' => 'data-peticion-tabla=modulos',
				'titulo' => 'Módulo'
			])
			@endcomponent
		</div>

		<div class="col-6 col-sm-6 col-md-6 col-lg-1 col-xl-1 col-xxl-1">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'orden_menu',
				'mascara' => ['tipo' => 'entero'],
				'titulo' => 'Orden'
			])
			@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' => 'select',
				'id' => 'generico',
				'titulo' => 'Génerico'
			])

				<option value="0">No</option>
				<option value="1">Si</option>

			@endcomponent
		</div>

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

				<option value="0">No</option>
				<option value="1">Si</option>

			@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' => 'select',
				'id' => 'administracion',
				'titulo' => 'Administración'
			])

				<option value="0">No</option>
				<option value="1">Si</option>

			@endcomponent
		</div>

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

				<option value="0">No</option>
				<option value="1">Si</option>

			@endcomponent
		</div>

		<div class="d-flex justify-content-between">

			<div class="col-auto">
				@component('aplicacion.elementos.boton', [
					'tipo' => 'submit',
					'id' => 'botonGuardar',
					'atributos' => '
						formmethod=POST
            formaction=' . route('ejecutar') . '?0=0&procedimiento=p_registrar_programas
					'
				])
					Guardar
				@endcomponent
			</div>

			<div class="col-auto">
				@component('aplicacion.elementos.boton', [
          'id' => 'botonLimpiar',
					'clases' => 'btn btn-warning',
					'atributos' => '
						data-accion=limpiar
					'
				])
					Limpiar
				@endcomponent
			</div>

		</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', [
			'id' => 'tablaRegistros',
			'atributos' => 'data-tabla-seleccionable=doble'
			])

				<thead>
					<tr>

						<th class="id" data-columna-nombre="id_programa" data-columna-tipo="num" data-columna-ordenable data-columna-buscable data-columna-sumar="filas">
							ID
						</th>

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

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

						<th class="d-none" data-columna-nombre="tipo_programa" data-columna-tipo="string" data-columna-ordenable data-columna-buscable>
							Tipo
						</th>

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

						<th class="d-none d-xxl-table-cell" data-columna-nombre="icono" data-columna-tipo="string" data-columna-ordenable data-columna-buscable>
							Icono
						</th>

						<th class="d-none" data-columna-nombre="modulo" data-columna-tipo="string" data-columna-buscable data-columna-agrupar>
							Módulo
						</th>

						<th class="d-none" data-columna-nombre="orden_menu" data-columna-tipo="num" data-columna-ancho="1%" data-columna-ordenable data-columna-buscable>
							Orden
						</th>

						<th class="d-none d-xxl-table-cell text-center" data-columna-nombre="generico" data-columna-tipo="string" data-columna-ancho="1%" data-columna-ordenable data-columna-buscable>
							Génerico
						</th>

						<th class="d-none d-xxl-table-cell text-center" data-columna-nombre="exclusivo" data-columna-tipo="string" data-columna-ancho="1%" data-columna-ordenable data-columna-buscable>
							Exclusivo
						</th>

						<th class="d-none d-xxl-table-cell text-center" data-columna-nombre="administracion" data-columna-tipo="string" data-columna-ancho="1%" data-columna-ordenable data-columna-buscable>
							Administración
						</th>

						<th data-columna-nombre="visible" data-columna-tipo="string" data-columna-ancho="1%" data-columna-ordenable data-columna-buscable>
							Mostrar
						</th>

						<th data-columna-tipo="eliminar" data-columna-ancho="1%"></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>

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

{{-- ! 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/administracion/registros/programas.js') }}"></script>

@endsection
