@php

    $colorKey = $colorKey ?? 'primary';

    $label = $label ?? 'Color';

    $labelBn = $labelBn ?? null;

    $default = $default ?? '#65971e';

    $colors = $colors ?? [];

    $colClass = $colClass ?? 'col-6';

    $desc = $desc ?? null;

    $value = old($colorKey, $colors[$colorKey] ?? $default);

@endphp

<div class="{{ $colClass }}">

    <label class="form-label small fw-semibold mb-1 d-block">

        {{ $label }}

        @if($labelBn)

        <span class="text-muted fw-normal">· {{ $labelBn }}</span>

        @endif

    </label>

    <div class="theme-color-field-wrap">

        <input type="color" name="{{ $colorKey }}" id="clr_{{ $colorKey }}"

            value="{{ $value }}"

            class="form-control form-control-color theme-color-picker"

            title="Color pick করুন"

            data-color-key="{{ $colorKey }}"

            oninput="document.getElementById('txt_{{ $colorKey }}').value=this.value;updatePreview()">

        <input type="text" id="txt_{{ $colorKey }}" class="form-control form-control-sm font-monospace theme-color-hex"

            value="{{ $value }}"

            placeholder="{{ $default }}"

            pattern="^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$"

            oninput="syncThemeColorField('{{ $colorKey }}')"

            aria-label="{{ $label }} hex code">

    </div>

    @if($desc)

    <small class="text-muted d-block mt-1">{{ $desc }}</small>

    @endif

</div>