@extends('tema.plantilla')

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

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

@endsection

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

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

<form
	class="form"
	id="formularioSucursales"
	autocomplete="off"
	data-tabla-limpiar-fila-activa="#tablaRegistros"
>

	@csrf

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

	<div class="row">

		<div class="col-8 col-sm-5 col-md-3 col-lg-2 col-xl-3 col-xxl-5">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'sucursal2',
				'nombre' => 'sucursal',
				'atributos' => 'maxlength=100',
				'titulo' => 'Sucursal'
			])
			@endcomponent
		</div>

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

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

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

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

			@endcomponent
		</div>

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

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

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

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

		<div class="col-6 col-sm-4 col-md-2 col-lg-2 col-xl-2 col-xxl-3">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'porciento_comision',
        'mascara' => [
					'tipo' => 'numerico',
					'valor' => ['maximo' => '100']
				],
				'titulo' => 'Porciento de Comisión'
			])
			@endcomponent
		</div>

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

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

				@component('aplicacion.elementos.boton', [
					'clases' => 'btn btn-success',
					'atributos' => '
						data-accion=crear
						data-peticion-campo=id_empleado
					'
				])
					<i class="fa-solid fa-plus"></i>
				@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-8 col-md-5 col-lg-3 col-xl-5 col-xxl-4">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'gerente',
				'atributos' => 'maxlength=100',
				'titulo' => 'Gerente'
			])
			@endcomponent
		</div>

		<div class="col-6 col-sm-4 col-md-2 col-lg-2 col-xl-2 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'bono_gerente',
				'mascara' => ['tipo' => 'numerico'],
				'titulo' => 'Bono del Gerente'
			])
			@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_sucursales
          '
				])
					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>

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

			<thead>
				<tr>

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

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

					<th
						data-columna-nombre="id_provincia"
						data-columna-tipo="num"
						data-columna-ordenable
						data-columna-buscable
					>ID Provincia</th>

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

					<th
						data-columna-nombre="telefono"
						data-columna-tipo="string"
						data-columna-ordenable
						data-columna-buscable
					>Teléfono</th>

					<th
						data-columna-nombre="telefono_secundario"
						data-columna-tipo="string"
						data-columna-ordenable
						data-columna-buscable
					>Teléfono Secundario</th>

					<th
						data-columna-nombre="correo"
						data-columna-tipo="string"
						data-columna-ordenable
						data-columna-buscable
					>Correo</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/sucursales.js') }}"></script>

@endsection
