<pre>{{ json_encode($colors, JSON_PRETTY_PRINT) }}</pre>
@foreach ($colors as $index => $image)
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center">
<img src="{{ asset($image['file']) }}" alt="Image" style="max-width: 100px; max-height:50px">
<input type="hidden" name="image_file_{{ $index }}" value="{{ $image['file'] }}">
<div x-data="{ colorState: $wire.$entangle('colors.' + 'livewire-tmp/{{ $image['file'] }}') }">
<input x-model="colorState" style="color:black" type="text" name="color[]" placeholder="Color for {{ $image['file'] }}">
</div>
</div>
@endforeach
<pre>{{ json_encode($colors, JSON_PRETTY_PRINT) }}</pre>
@foreach ($colors as $index => $image)
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center">
<img src="{{ asset($image['file']) }}" alt="Image" style="max-width: 100px; max-height:50px">
<input type="hidden" name="image_file_{{ $index }}" value="{{ $image['file'] }}">
<div x-data="{ colorState: $wire.$entangle('colors.' + 'livewire-tmp/{{ $image['file'] }}') }">
<input x-model="colorState" style="color:black" type="text" name="color[]" placeholder="Color for {{ $image['file'] }}">
</div>
</div>
@endforeach