@props([
    'name',
    'label' => 'Selecciona un color',
    'initialColor' => '#147129',
])

@php
    $id = 'color-picker-' . str()->slug($name); 
@endphp

<div id="{{ $id }}" data-initial-color="{{ $initialColor }}" data-input-name="{{ $name }}"
    class="rounded-md border border-complement100 p-2 flex items-center cursor-pointer w-full gap-x-4 transition duration-150"
>
    <div class="pickr-anchor color-preview"></div>
    
    <div class="grow text-parrafo overflow-hidden">
        <span class="font-semibold block truncate">{{ $label }}</span> 
        <span class="color-value text-accent block truncate">{{ $initialColor }}</span>
    </div>
    <input type="hidden" name="{{ $name }}" value="{{ $initialColor }}">
</div>
@error($name)
    <span class="error-text">{{ $message }}</span>
@enderror

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        if (typeof Pickr !== 'undefined') {
            const componentRoot = document.getElementById('{{ $id }}');
            
            if (!componentRoot) return;

            const initialColor = componentRoot.dataset.initialColor;
            const inputName = componentRoot.dataset.inputName;
            
            const pickrAnchor = componentRoot.querySelector('.pickr-anchor');
            const colorInput = componentRoot.querySelector(`input[name="${inputName}"]`);
            const colorPreview = componentRoot.querySelector('.color-preview');
            const colorValueSpan = componentRoot.querySelector('.color-value');
            
            const pickr = Pickr.create({
                el: pickrAnchor,
                theme: 'monolith', 
                default: initialColor, 
                lockOpacity: true,
                components: {
                    preview: true, opacity: false, hue: true,
                    interaction: { input: true, clear: false, save: true }
                },
                container: 'body',
            });

            

            pickr.on('save', (color, instance) => {
                if (color) {
                    const hexColor = color.toHEXA().toString(); 
                    
                    colorPreview.style.backgroundColor = hexColor;
                    colorValueSpan.textContent = hexColor;
                    colorInput.value = hexColor;
                }
                pickr.hide();
            });

            pickr.on('change', (color, instance) => {
                if (color) {
                    const hexColor = color.toHEXA().toString();
                    colorPreview.style.backgroundColor = hexColor;
                }
            });
            
            componentRoot.addEventListener('click', (e) => {
                if (!e.target.closest('.pcr-app')) {
                    pickr.show();
                }
            });

            window.pickrs = window.pickrs || {};
            window.pickrs["{{ $id }}"] = pickr;
        }
    });
</script>
@endpush