How to mark checkbox with a single color?

Question

Hello, I have the following problem:

• When entering the edition of my product I need that in the part where you have the images of the products, each product has its specific color. Ex:

But he is marking all the colors of all the products in the same checkbox, as in the example below.

---

Editing page looks like this.

Edit.blade.php

@foreach($cores as $cor)
                <div class="agrupa" style="display:inline-block; text-align:center">                        
                    <input type="checkbox" name="cor_id_produto[]" id="cor_id_produto" style="margin:10px" value="{{  $cor->id }}"
                     {{ in_array($cor->id, array_pluck($produto->produtoFotos, 'cor_id_imagem'))  ? 'checked' : '' }}>

                    <input type="color" class="form-control" disabled name="cor_id_imagem[]" value="{{$cor->hexa}}" id="cor_id_imagem[]"
                     placeholder="Hexa" style="width:100%; height:25px; padding:0; border:none;">
                </div>                                      
                @endforeach

Question

• How could I perform this foreach so that it marked only the respective color to your image?

Thanks in advance. If you need more information just ask me to add here.

---

ENTIRE FOREACH

<div id="fotos_cores" class="fotosCores">
            <hr style="border-bottom: 1px solid #333;">
            @foreach ($produtosFotos as $photos)
            <div class="form-group col-md-6 imgCor pull-left">
                <label for="imagens">Imagem cadastrada</label>
                <hr>
                <div class="well well-sm">
                    <img src="/images/{{$photos->filename}}" class="img-responsive" width="50">
                    <input type="file" name="imagem[]" value="{{$photos->filename}}" multiple class="form-control hidden" />
                </div>
            </div>

            <div class="form-group col-md-6 imgCor pull-right">

                <label for="cores">Cor Referente</label>
                <hr>                    
                @foreach($cores as $cor)
                <div class="agrupa" style="display:inline-block; text-align:center">                        
                    <input type="checkbox" name="cor_id_produto[]" id="cor_id_produto" style="margin:10px" value="{{  $cor->id }}"
                     {{ in_array($cor->id, array_pluck($produto->produtoFotos, 'cor_id_imagem'))  ? 'checked' : '' }}>

                    <input type="color" class="form-control" disabled name="cor_id_imagem[]" value="{{$cor->hexa}}" id="cor_id_imagem[]"
                     placeholder="Hexa" style="width:100%; height:25px; padding:0; border:none;">
                </div>                                      
                @endforeach
                <div class="removeButton pull-right"><a value="Remover" class="remDiv" style="cursor:pointer">Remover</a></div>

            </div>
            <div class="clearfix"></div>
            @endforeach
        </div>

---

{{dd($product->productFotos)}}

---

{{dd($color->id)}}

---

{{dd($colors)}}

---

{{dd(array_pluck($product->productFotos, 'cor_id_image'))}}

---

Table products

Answer 1

Answer

---

As usual, I always like to put the solution that solved my problem. I don’t know if it was the best way. The code below represents how I managed to solve the question How could I perform this foreach so that it marked only the respective color to your image?

---

<div id="fotos_cores" class="fotosCores">
            <hr style="border-bottom: 1px solid #333;">
            @for ($i = 0; $i < count($produtosFotos); $i++)              
               <div class="form-group col-md-6 imgCor pull-left">
                <label for="imagens">Imagem cadastrada</label>
                <hr>
                <div class="well well-sm">
                    <img src="/images/{{$produtosFotos[$i]['filename']}}" class="img-responsive" width="50">
                    <input type="file" name="imagem[]" value="{{$produtosFotos[$i]['filename']}}" multiple class="form-control hidden" />
                </div>
        </div>
        <div class="form-group col-md-6 imgCor pull-right">
            <label for="cores">Cor Referente</label>
            <hr>
            @foreach($cores as $cor)
            <div class="agrupa" style="display:inline-block; text-align:center">
                <input type="checkbox" name="cor_id_produto[]" id="cor_id_produto" style="margin:10px" value="{{ $cor->id }}"
                 {{ $cor->id == $produtosFotos[$i]['cor_id_imagem']  ? 'checked' : '' }}>
                <input type="color" class="form-control" disabled name="cor_id_imagem[]" value="{{$cor->hexa}}" id="cor_id_imagem[]"
                 placeholder="Hexa" style="width:100%; height:25px; padding:0; border:none;">
            </div>
            @endforeach
            <div class="removeButton pull-right"><a value="Remover" class="remDiv" style="cursor:pointer">Remover</a></div>

        </div>
        <div class="clearfix"></div>
        @endfor
    </div>

---

I want to thank my friends Francisco Melicias and to friend Bulfaitelo for the answers that helped me understand the logic.

Alternate answer

While creating this answer appeared our friend Jrd and also contributed a slightly simpler answer but that worked exactly the same way as the answer above. Here’s the second code:

<div id="fotos_cores" class="fotosCores">
            <hr style="border-bottom: 1px solid #333;">             

            @foreach ($produtosFotos as $photos)
            <div class="form-group col-md-6 imgCor pull-left">
                <label for="imagens">Imagem cadastrada</label>
                <hr>
                <div class="well well-sm">
                    <img src="/images/{{$photos->filename}}" class="img-responsive" width="50">
                    <input type="file" name="imagem[]" value="{{$photos->filename}}" multiple class="form-control hidden" />
                </div>
            </div>

            <div class="form-group col-md-6 imgCor pull-right">

                <label for="cores">Cor Referente</label>
                <hr>    
                @foreach($cores as $cor)

                <div class="agrupa" style="display:inline-block; text-align:center">                        
                    <input type="checkbox" name="cor_id_produto[]" id="cor_id_produto" style="margin:10px" value="{{  $cor->id }}"
                    {{ ($photos->cor_id_imagem == $cor->id)  ? 'checked' : '' }}>

                    <input type="color" class="form-control" disabled name="cor_id_imagem[]" value="{{$cor->hexa}}" id="cor_id_imagem[]"
                     placeholder="Hexa" style="width:100%; height:25px; padding:0; border:none;">
                </div>                                      
                @endforeach
                <div class="removeButton pull-right"><a value="Remover" class="remDiv" style="cursor:pointer">Remover</a></div>

            </div>
            <div class="clearfix"></div>
            @endforeach

        </div>

{{ ($photos->cor_id_image == $color->id) ? 'checked' : '' }}>

was the response of our friend. Thank you to everyone who helped.