@props([
    'name',
    'label' => null,
    'value' => '#000000',
    'required' => false,
    'disabled' => false,
    'help' => null,
])

@php
    $id = $attributes->get('id') ?? $name;
    $val = old($name, $value) ?: '#000000';
@endphp

<div {{ $attributes->except(['id'])->merge(['class' => 'space-y-1']) }}>
    @if($label)
        <label for="{{ $id }}" class="block text-sm font-medium text-gray-700">
            {{ $label }} @if($required)<span class="text-red-500">*</span>@endif
        </label>
    @endif

    <div class="flex items-center gap-3">
        {{-- Picker nativo --}}
        <input
            id="{{ $id }}_picker"
            type="color"
            value="{{ $val }}"
            @if($disabled) disabled @endif
            class="h-10 w-12 cursor-pointer rounded border border-gray-300 bg-white p-1"
            aria-label="Selecionar cor"
        />

        {{-- HEX manual --}}
        <input
            id="{{ $id }}_hex"
            type="text"
            inputmode="text"
            value="{{ $val }}"
            maxlength="7"
            placeholder="#RRGGBB"
            @if($required) required @endif
            @if($disabled) disabled @endif
            name="{{ $name }}"
            class="h-10 w-32 rounded border border-gray-300 px-3 text-sm outline-none focus:border-gray-400"
        />

        {{-- Preview extra --}}
        <span
            id="{{ $id }}_swatch"
            class="h-10 w-10 rounded border border-gray-300"
            style="background: {{ $val }};"
            title="{{ $val }}"
        ></span>
    </div>

    @if($help)
        <p class="text-xs text-gray-500">{{ $help }}</p>
    @endif

    @error($name)
        <p class="text-xs text-red-600">{{ $message }}</p>
    @enderror
</div>

<script>
(() => {
  const picker = document.getElementById(@json($id . '_picker'));
  const hex    = document.getElementById(@json($id . '_hex'));
  const swatch = document.getElementById(@json($id . '_swatch'));

  if (!picker || !hex || !swatch) return;

  const isHex = (v) => /^#([0-9a-fA-F]{6})$/.test(v);

  picker.addEventListener('input', () => {
    hex.value = picker.value;
    swatch.style.background = picker.value;
    swatch.title = picker.value;
  });

  hex.addEventListener('input', () => {
    const v = hex.value.trim();
    if (isHex(v)) {
      picker.value = v;
      swatch.style.background = v;
      swatch.title = v;
    }
  });

  // Normaliza ao sair do campo (se vier sem #, por exemplo)
  hex.addEventListener('blur', () => {
    let v = hex.value.trim();
    if (v && v[0] !== '#') v = '#' + v;
    if (isHex(v)) hex.value = v;
  });
})();
</script>