// Obtener el div.form-group que contiene el campo Celular
var celularField = $('form').find('.form-group').eq(2);

// Crear el HTML para el separador <hr> con el texto "Vehículo"
var separadorHTML = `
  <div class="col-xs-12" style="margin-top: 0px; margin-bottom: 20px;">
    <p class="text-center" style="margin-top: -30px; background-color: white; display: inline-block; padding: 0 10px 0 0; font-weight: bold;">VEHÍCULO</p>
    <hr style="border-top: 1px solid #ccc; margin-top: -15px;">
  </div>
`;

// Insertar el separador inmediatamente después del campo Celular
celularField.after(separadorHTML);

// --- LÓGICA DE TRANSFORMACIÓN DE MATRÍCULA ---
// El ID del campo Matrícula es custom_64d5c54090291, basado en el HTML retenido.
$('#exampleCustom_3').on('keyup', function() {
    // 1. Obtener el valor actual del campo.
    var matriculaValue = $(this).val();

    // 2. Convertir a mayúsculas.
    var upperCaseValue = matriculaValue.toUpperCase();

    // 3. Eliminar todos los espacios (globalmente).
    var cleanValue = upperCaseValue.replace(/\s/g, '');

    // 4. Establecer el valor limpio de vuelta en el campo.
    $(this).val(cleanValue);
});
// ----------------------------------------------

$('form').find('label.inputName').eq(0).html("Nombre de la Empresa");
$('form').find('label.inputName').eq(1).html("Correo");
$('form').find('label.inputName').eq(2).html("Celular");
$('#exampleInputName1').attr("placeholder", "Ingresá el nombre de la Empresa");
$('#exampleCustom_1').attr("placeholder", "Marca");
$('#exampleCustom_2').attr("placeholder", "Modelo");
$('#exampleCustom_3').attr("placeholder", "Matrícula");
// 1. Etiqueta para la primera imagen (Libreta) - Su label original es el .prev() del input
$('#image').prev().html("Foto del Vehículo");

// 2. Etiqueta para la segunda imagen (Vehículo) - Su label original es el .prev() del input
$('#image2').prev().html("Foto de la Libreta del Vehículo");

$('#image').after( "<label for='image'>Seleccionar archivo</label>" );

$('#image2').after( "<label for='image2'>Seleccionar archivo</label>" );

// 1. Identificar los contenedores principales de los campos
var divImage1 = $('#image').closest('.form-group');
var divImage2 = $('#image2').closest('.form-group');

// 2. Mover el contenedor del segundo campo (divImage2) antes del primer campo (divImage1).
// Esto invierte su orden visual en la cuadrícula (grid).
divImage1.before(divImage2);

// Lógica para el primer campo (#image)
$('#image').on('change',function(){
    var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
    if(filename){    
        $(this).next().html(filename);
    }
});

// Lógica para el segundo campo (#image2) - Adaptado
$('#image2').on('change',function(){
    var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
    if(filename){
        $(this).next().html(filename);
    }
});

$('#boxinfo').hide();
// Habilitar el cierre al hacer clic en el fondo opaco
$('#boxinfo').on('click', function(e) {
    // Si el clic ocurrió directamente en el contenedor #boxinfo
    // y no en uno de sus hijos (es decir, en el espacio vacío/fondo),
    // cerramos el modal.
    // NOTA: Como el fondo está generado por :before con z-index: -1, 
    // lo más seguro es que el clic lo reciba el body o el contenedor principal.

    // Una forma más limpia: Asumir que el #boxinfo es el overlay (ya que tiene position: fixed)
    if (e.target.id === 'boxinfo') {
        $('#boxinfo').hide();
    }
});

$('#boxinfo span').on('click', function(){$('#boxinfo').hide();})
$('.goinfo').on('click', function(){$('#boxinfo').show();})