@props([
    'label' => 'RUT',
    'wireModel' => null,
    'required' => false,
    'hint' => 'Formato: 12.345.678-9 o 12345678-9',
    'placeholder' => '12.345.678-9',
    'liveValidation' => true
])

@php
    $attributes = $attributes->merge([
        'icon' => 'o-identification',
        'placeholder' => $placeholder,
        'hint' => $hint . ($required ? '' : ' (opcional)'),
    ]);
    
    if ($required) {
        $attributes = $attributes->merge(['required' => true]);
    }
@endphp

<x-input 
    :label="$label"
    {{ $attributes }}
    x-data="{
        formatRut(value) {
            if (!value) return '';
            
            // Remover caracteres no válidos
            let rut = value.replace(/[^0-9kK]/g, '');
            
            // Si está vacío, devolver vacío
            if (!rut) return '';
            
            // Convertir a mayúsculas
            rut = rut.toUpperCase();
            
            // Si tiene menos de 2 caracteres, devolver tal como está
            if (rut.length < 2) return rut;
            
            // Separar número y dígito verificador
            let numero = rut.slice(0, -1);
            let dv = rut.slice(-1);
            
            // Formatear número con puntos
            let numeroFormateado = '';
            let contador = 0;
            
            // Recorrer de derecha a izquierda
            for (let i = numero.length - 1; i >= 0; i--) {
                numeroFormateado = numero[i] + numeroFormateado;
                contador++;
                
                // Agregar punto cada 3 dígitos (excepto al final)
                if (contador % 3 === 0 && i > 0) {
                    numeroFormateado = '.' + numeroFormateado;
                }
            }
            
            // Devolver formateado
            return numeroFormateado + '-' + dv;
        }
    }"
    x-on:input="
        $el.value = formatRut($el.value);
        {{ $wireModel && $liveValidation ? '$wire.validateField(\'' . $wireModel . '\', $el.value, {required: ' . ($required ? 'true' : 'false') . '})' : '' }}
    "
    x-on:blur="
        $el.value = formatRut($el.value); 
        {{ $wireModel ? '$wire.set(\'' . $wireModel . '\', $el.value)' : '' }}
        {{ $wireModel && $liveValidation ? '; $wire.validateField(\'' . $wireModel . '\', $el.value, {required: ' . ($required ? 'true' : 'false') . '})' : '' }}
    "
/>