@props([
    'model',                       // nombre de la propiedad Livewire (sin wire:model)
    'id' => null,
    'label' => null,
    'placeholder' => '',
    // Agrupación de dígitos (Cleave). OJO: el máx. de dígitos aceptados = la SUMA de los blocks.
    // Default 15 = máximo internacional E.164 (incluye código de país) → cubre números largos.
    'blocks' => '[3, 3, 3, 3, 3]',
    'delimiter' => ' ',
])

@php $id = $id ?? $model; @endphp

{{--
    Campo de teléfono con formato (Cleave.js, ya incluido en Vuexy).
    - Formatea los dígitos mientras se escribe (sin dependencia de CDN externo).
    - Sincroniza el valor crudo (solo dígitos) a la propiedad Livewire vía @entangle.
    - wire:ignore evita que Livewire pise el formateo en cada re-render.
--}}
<div>
    @if ($label)
        <label class="form-label" for="{{ $id }}">{{ $label }}</label>
    @endif

    <div
        wire:ignore
        x-data="{
            value: @entangle($model),
            cleave: null,
            init() {
                this.cleave = new Cleave($refs.input, {
                    blocks: {{ $blocks }},
                    delimiters: ['{{ $delimiter }}'],
                    numericOnly: true,
                });
                this.cleave.setRawValue(this.value ?? '');
                $refs.input.addEventListener('input', () => {
                    this.value = this.cleave.getRawValue();
                });
                this.$watch('value', v => {
                    if ((v ?? '') !== this.cleave.getRawValue()) {
                        this.cleave.setRawValue(v ?? '');
                    }
                });
            }
        }"
    >
        <input
            type="tel"
            id="{{ $id }}"
            x-ref="input"
            placeholder="{{ $placeholder }}"
            {{ $attributes->merge(['class' => 'form-control' . ($errors->has($model) ? ' is-invalid' : '')]) }}
        >
    </div>

    @error($model)
        <div class="text-danger small mt-1">{{ $message }}</div>
    @enderror
</div>
{{-- Cleave.js se carga globalmente en layouts/users/main.blade.php (los modales cargan por AJAX
     y un @push no llegaría al @stack de la página ya renderizada). --}}