@props([
    'name' => 'password',
    'label' => 'Contraseña',
    'required' => false,
    'placeholder' => 'Ingrese una contraseña segura...',
    'icon' => 'fas fa-lock'
])

@php
    $inputId = 'pwd_' . Str::random(8);
@endphp

<div class="form-group">
    @if($label)
        <label for="{{ $inputId }}" class="font-weight-bold text-dark small text-uppercase" style="letter-spacing: 0.5px;">
            {{ $label }}
            @if($required) <span class="text-danger" title="Campo obligatorio">*</span> @endif
        </label>
    @endif

    <div class="input-group shadow-sm">
        <div class="input-group-prepend">
            <span class="input-group-text bg-white text-muted">
                <i class="{{ $icon }}"></i>
            </span>
        </div>
        
        <input 
            type="password" 
            class="form-control gen-pwd-input @error(str_replace('_confirmation', '', $name)) is-invalid @enderror" 
            id="{{ $inputId }}" 
            name="{{ $name }}" 
            placeholder="{{ $placeholder }}"
            {{ $required ? 'required' : '' }}
            autocomplete="new-password"
            {{ $attributes }}
        >
        
        {{-- Botón 1: Ver / Ocultar Texto --}}
        <div class="input-group-append">
            <button class="btn btn-outline-secondary btn-toggle-pwd" type="button" tabindex="-1" title="Ver / Ocultar">
                <i class="fas fa-eye"></i>
            </button>
        </div>

        {{-- Botón 2: Dado Generador Aleatorio --}}
        <div class="input-group-append">
            <button class="btn btn-warning btn-generate-pwd text-dark font-weight-bold" type="button" tabindex="-1" title="Generar Contraseña Segura">
                <i class="fas fa-magic mr-1"></i> Generar
            </button>
        </div>
        
        @error(str_replace('_confirmation', '', $name))
            <span class="invalid-feedback d-block" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
</div>

@pushonce('js')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Lógica de Toggle (Ver/Ocultar)
        document.querySelectorAll('.btn-toggle-pwd').forEach(function(btn) {
            btn.addEventListener('click', function() {
                let input = this.closest('.input-group').querySelector('.gen-pwd-input');
                let icon = this.querySelector('i');
                
                if (input.type === "password") {
                    input.type = "text";
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                    icon.classList.add('text-primary');
                } else {
                    input.type = "password";
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.remove('text-primary');
                    icon.classList.add('fa-eye');
                }
            });
        });

        // Lógica de Generador Aleatorio (Dado/Magia)
        document.querySelectorAll('.btn-generate-pwd').forEach(function(btn) {
            btn.addEventListener('click', function() {
                let inputGroup = this.closest('.input-group');
                let input = inputGroup.querySelector('.gen-pwd-input');
                let toggleIcon = inputGroup.querySelector('.btn-toggle-pwd i');
                
                // Función generadora (8 Caracteres: [A-Z], [a-z], [0-9], [@$!%*?&])
                const length = 10;
                const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@$!%*#?";
                let retVal = "";
                for (let i = 0, n = charset.length; i < length; ++i) {
                    retVal += charset.charAt(Math.floor(Math.random() * n));
                }
                
                // Injectar texto
                input.value = retVal;
                
                // Forzar revelarlo visualmente (Cambiar tipo a Text)
                input.type = "text";
                toggleIcon.classList.remove('fa-eye');
                toggleIcon.classList.add('fa-eye-slash', 'text-primary');

                // Notificar al usuario e intencionar copiado
                try {
                    navigator.clipboard.writeText(retVal);
                    
                    // Si tienes SweetAlert o similar en la plantilla
                    if(typeof Swal !== 'undefined') {
                        const Toast = Swal.mixin({
                            toast: true, position: 'top-end', showConfirmButton: false, timer: 2000
                        });
                        Toast.fire({ icon: 'success', title: 'Contraseña segura generada y copiada al portapapeles.' });
                    }
                } catch(e) { /* Error silencioso copiando */ }

            });
        });
    });
</script>
@endpushonce