@extends('tema.plantilla')

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

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

@endsection

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

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

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

@endsection

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

<form
  class="form"
  id="formularioVehiculos"
  autocomplete="off"
>

  @csrf

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

  <div class="row">

    <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="#datosVehiculos"
        role="tab"
        aria-selected="true"
        data-bs-toggle="list"
      >Datos Vehiculos</a>

    </div>

    <div class="tab-content">

      <div class="tab-pane active show" id="datosVehiculos" 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' => 'select',
              'id' => 'id_tipo_vehiculo',
              'atributos' => '
								maxlength=50
								data-peticion-tabla=tipos_vehiculos
							',
              'titulo' => 'Tipo de Vehículo'
            ])
            @endcomponent
          </div>

					<div class="col-12 col-sm-6 col-md-2 col-lg-2 col-xl-2 col-xxl-2">
            @component('aplicacion.elementos.campo.etiqueta', [
              'id' => 'vehiculo',
              'atributos' => 'maxlength=30',
              'titulo' => 'Vehículo'
            ])
            @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', [
							'tipo' => 'select',
              'id' => 'id_marca',
              'atributos' => '
								maxlength=50
								data-peticion-tabla=marcas
							',
              'titulo' => 'Marca'
            ])
            @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' => 'modelo',
              'atributos' => 'maxlength=50',
              'titulo' => 'Modelo'
            ])
            @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' => 'ano',
              'mascara' => [
                'tipo' => 'entero',
                'valor' => ['maximo' => '9999']
              ],
              'titulo' => 'Año'
            ])
            @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', [
							'tipo' => 'select',
              'id' => 'id_color',
              'atributos' => '
								maxlength=50
								data-peticion-tabla=colores
							',
              'titulo' => 'Color'
            ])
            @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' => 'chasi',
              'atributos' => 'maxlength=50',
              'titulo' => 'Chasis'
            ])
            @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' => 'placa',
              'atributos' => 'maxlength=50',
              'titulo' => 'Placa'
            ])
            @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', [
              '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-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 col-xxl-2">
            @component('aplicacion.elementos.campo.etiqueta', [
              'tipo' => 'select',
              'id' => 'transmision',
              'titulo' => 'Transmisión'
            ])

              <option></option>

              <option value="AUTOMATICA">
              AUTOMATICA
              </option>

              <option value="MECANICA">
              MECANICA
              </option>

            @endcomponent
          </div>

          <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 col-xxl-2">
            @component('aplicacion.elementos.campo.etiqueta', [
              'tipo' => 'select',
              'id' => 'traccion',
              'titulo' => 'Tracción'
            ])

              <option></option>

              <option value="DELANTERA">
              DELANTERA
              </option>

              <option value="TRASERA">
              TRASERA
              </option>

              <option value="2WD">
              2WD
              </option>

              <option value="4WD">
              4WD
              </option>

              <option value="6X4">
              6X4
              </option>

            @endcomponent
          </div>

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

					<div class="col-6 col-sm-3 col-md-3 col-lg-2 col-xl-2 col-xxl-1">
            @component('aplicacion.elementos.campo.etiqueta', [
              'id' => 'cilindros',
              'mascara' => [
                'tipo' => 'entero',
                'valor' => ['maximo' => '48']
              ],
              'titulo' => 'Cilindros'
            ])
            @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' => 'motor',
              'atributos' => '',
              'titulo' => 'Motor'
            ])
            @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' => 'referencia',
              'atributos' => '',
              'titulo' => 'Referencia'
            ])
            @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' => 'costo',
              'mascara' => ['tipo' => 'numerico'],
							'titulo' => 'Costo'
						])
						@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' => 'precio',
              'mascara' => ['tipo' => 'numerico'],
							'titulo' => 'Precio'
						])
						@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' => 'precio_lista',
              'mascara' => ['tipo' => 'numerico'],
							'titulo' => 'Precio Lista'
						])
						@endcomponent
          </div>

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

          <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-10">
            @component('aplicacion.elementos.campo.etiqueta', [
              'id' => 'detalle',
              'atributos' => 'maxlength=250',
              'titulo' => 'Detalle'
            ])
            @endcomponent
          </div>

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

        </div>
      </div>

    </div>

  </div>

</form>

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

@component('aplicacion.elementos.VentanaEmergenteConsulta', [
  'titulo' => 'Consulta de Referidos',
	'id' => 'ventanaEmergenteConsultaReferidos'
])
@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/vehiculos.js') }}"></script>

@endsection
