{{-- 
    Partial: Dynamic List Input
    Params:
      $fieldName  : string  — e.g. 'include'
      $label      : string  — e.g. 'Include'
      $placeholder: string  — placeholder per row
      $icon       : string  — svg path d value (optional)
      $values     : array   — existing values (on edit)
      $color      : string  — Tailwind color name (emerald, red, violet, amber)
--}}

@php
    $fieldName   = $fieldName   ?? 'items';
    $label       = $label       ?? 'Items';
    $placeholder = $placeholder ?? 'Tambah item...';
    $color       = $color       ?? 'brand';
    $values      = $values      ?? [''];
    $iconPath    = $iconPath    ?? 'M12 4v16m8-8H4';

    $colorMap = [
        'emerald' => ['ring' => 'focus:ring-emerald-400', 'btn' => 'text-emerald-600 hover:bg-emerald-50', 'badge' => 'bg-emerald-50 text-emerald-600 border-emerald-100'],
        'red'     => ['ring' => 'focus:ring-red-400',     'btn' => 'text-red-500 hover:bg-red-50',         'badge' => 'bg-red-50 text-red-600 border-red-100'],
        'violet'  => ['ring' => 'focus:ring-violet-400',  'btn' => 'text-violet-600 hover:bg-violet-50',   'badge' => 'bg-violet-50 text-violet-600 border-violet-100'],
        'amber'   => ['ring' => 'focus:ring-amber-400',   'btn' => 'text-amber-600 hover:bg-amber-50',     'badge' => 'bg-amber-50 text-amber-600 border-amber-100'],
        'brand'   => ['ring' => 'focus:ring-brand-400',   'btn' => 'text-brand-600 hover:bg-brand-50',     'badge' => 'bg-brand-50 text-brand-600 border-brand-100'],
    ];
    $c = $colorMap[$color] ?? $colorMap['brand'];
@endphp

<div class="dynamic-list-group" data-field="{{ $fieldName }}">
    <div class="space-y-2" id="list-{{ $fieldName }}">
        @foreach($values as $i => $val)
        <div class="flex items-center gap-2 list-row" data-index="{{ $i }}">
            <div class="flex items-center gap-2 flex-1 bg-white border border-slate-200 rounded-lg px-3 py-2.5 focus-within:ring-2 {{ $c['ring'] }} focus-within:border-transparent transition-all">
                <span class="text-slate-300 text-xs font-bold w-5 text-center row-number select-none">{{ $i + 1 }}</span>
                <input
                    type="text"
                    name="{{ $fieldName }}[]"
                    value="{{ $val }}"
                    placeholder="{{ $placeholder }}"
                    class="flex-1 text-sm text-slate-700 placeholder-slate-300 bg-transparent focus:outline-none"
                />
            </div>
            <button type="button" onclick="removeRow(this)" class="p-2 text-slate-300 hover:text-red-400 hover:bg-red-50 rounded-lg transition-all flex-shrink-0" title="Hapus baris">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        @endforeach
    </div>

    <button
        type="button"
        onclick="addRow('{{ $fieldName }}', '{{ addslashes($placeholder) }}')"
        class="mt-2 flex items-center gap-2 text-xs font-semibold {{ $c['btn'] }} px-3 py-2 rounded-lg transition-all border border-dashed border-current border-opacity-30"
    >
        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $iconPath }}"/>
        </svg>
        Tambah Baris
    </button>
</div>