@php
    $selectedColorIds = $selectedColorIds ?? [];
@endphp

<div class="col-md-12">
    <div class="card shadow--card-2 border-0">
        <div class="card-header">
            <h5 class="card-title">
                <span class="card-header-icon"><i class="tio-palette"></i></span>
                <span>{{ translate('messages.product_colors') }}</span>
            </h5>
        </div>
        <div class="card-body">
            <div class="form-group mb-0">
                <label class="input-label" for="product_color_ids">{{ translate('messages.colors') }}</label>
                <select name="color_ids[]" id="product_color_ids" class="form-control js-select2-custom" multiple="multiple" data-placeholder="{{ translate('messages.select_colors') }}">
                    @foreach(($colors ?? []) as $color)
                        <option value="{{ $color->id }}" {{ in_array($color->id, $selectedColorIds) ? 'selected' : '' }}>
                            {{ $color->name }} ({{ $color->code }})
                        </option>
                    @endforeach
                </select>
                <small class="form-text text-muted">
                    {{ translate('messages.colors') }}
                </small>
            </div>
        </div>
    </div>
</div>
