{{-- <div class="form-group"> --}}
{{-- <label for="">{{$inputs->label ?? 'Color Preferences'}}</label> --}}
<select class="project_form_input ccm-select-arow custom-color-select mt-3" data-parent="{{ $inputs->field_condition_parent ?? '' }}"
    data-value="{{ $inputs->field_condition_value ?? '' }}" data-slug="{{ $inputs->name ?? 'color_type' }}"
    id="{{ $inputs->name ?? 'color_type' }}" name="{{ $inputs->name ?? 'color_type' }}">
    <option value="hex">Customs Hex Color codes</option>
    <option value="pentone">Pentone Code</option>
</select>
<div class="custom-color color-pref-group-js @if (!isset($is_child)) form-group
     @if ($inputs->field_condition) d-none @endif @endif">
    @if ($projectId)
        @php
          $colorCodeValue = isset($project['color_code']) ? $project['color_code']->decoded_value : [];    
        @endphp
        @foreach ($colorCodeValue as $color_code)
            <div class="output-outer color-pref-js" data-index='{{ $loop->index }}'>
                <div class="output-color">
                    <input type="color" class="colorCode mr-2" value="{{ $color_code ?? '#000000' }}" />
                    <div class="textCode">{{ $color_code ?? '#000000' }}</div>
                    <!-- <a href="javascript:void(0);"><i class="material-icons">close</i></a> -->
                </div>
                <div class="d-flex align-items-center">
                    <input id="color_code1" type="text" name="color-name[]" placeholder="Input Hexa code"
                    class="project_form_input color-text mr-2" value="{{ $color_code ?? '#000000' }}">

                    <input id="color_code2" type="text" name="color-name[]" placeholder="Input Pantone code"
                        class="project_form_input color-text" value="{{ $color_code ?? '#000000' }}">
                    @if($loop->last)<i class="material-icons pl-3 add-field btn-add">add_circle</i>@else
                    <i class="material-icons pl-3 add-field btn-remove">remove_circle</i>
                    @endif
                </div>
            </div>
        @endforeach
    @else

        <div class="output-outer color-pref-js" data-index='1'>
            <div class="output-color">
                <label for="color-code2" class="colored-img">
                    <img class="ccl-2" src="{{ asset('assets/front/common/images/colored.png') }}">
                </label>
                <input id="color-code2" type="color" class="colorCode color-code2 mr-2" value="#000000" />
                <!-- <div class="textCode">#000000</div> -->


                <!-- <a href="javascript:void(0);"><i class="material-icons">close</i></a> -->
            </div>
            <div class="d-flex align-items-center">
                <input id="color_code1" type="text" name="color-name[]" placeholder="Input Hexa code"
                    class="project_form_input color-text mr-2">

                <input id="color_code2" type="text" name="color-name[]" placeholder="Input Pantone code"
                    class="project_form_input color-text">
                <i class="material-icons pl-3 add-field btn-add">add_circle</i>
            </div>
        </div>


    @endif

</div>

<div class="output-select-color mt-2">
    <ul class="preview-form-file cat-img-listing text-left color-boxes-js">
        @if ($projectId)
        @php
            $colorCodeValue = isset($project['color_code']) ? $project['color_code']->decoded_value : [];    
        @endphp
        @foreach ($colorCodeValue as $color_code)
         <li data-index="{{ $loop->index }}" class="logo-checkboxnew">
            <input data-parent="{{ $inputs->field_condition_parent ?? '' }}"
                data-value="{{ $inputs->field_condition_value ?? '' }}"
                data-slug="{{ $inputs->name ?? 'color_code' }}" id="{{ $inputs->name ?? 'color_code' }}"
                type="hidden" name="color_code[]" value="{{$color_code ?? ''}}" class="project_form_input final-color-text" />

            <div class="attachments-image attch-color bg-gray">
                <div class="cross-btn remove-color-js">
                    <i class="material-icons">close</i>
                </div>
                <div class="ssl-color-view color-box-js" style="background: {{$color_code ?? '#000000'}}"></div>

                <div class="textCode text-center mt-2 color-box-text-js">{{$color_code ?? '#000000'}}</div>
            </div>
        </li>
        @endforeach
        @else
        <li data-index="1" class="logo-checkboxnew">
            <input data-parent="{{ $inputs->field_condition_parent ?? '' }}"
                data-value="{{ $inputs->field_condition_value ?? '' }}"
                data-slug="{{ $inputs->name ?? 'color_code' }}" id="{{ $inputs->name ?? 'color_code' }}"
                type="hidden" name="color_code[]" class="project_form_input final-color-text" />

            <div class="attachments-image attch-color bg-gray">
                <div class="cross-btn remove-color-js">
                    <i class="material-icons">close</i>
                </div>
                <div class="ssl-color-view color-box-js"></div>

                <div class="textCode text-center mt-2 color-box-text-js">#000000</div>
            </div>
        </li>
        @endif
    </ul>
</div>

{{-- <a href="javascript:;" class="float-right m-2 skip_step">skip field</a> --}}
{{-- </div> --}}