<div>
    <td>
        <img src="{{ asset('imagenes/reacciones/me-gusta.png') }}" width="30px"><span style="display:none">Me gusta</span> ({{ $megusta }})
        <img src="{{ asset('imagenes/reacciones/me-encanta.png') }}" width="30px"><span style="display:none">Me encanta</span> ({{ $meencanta }})
        <img src="{{ asset('imagenes/reacciones/me-divierta.png') }}" width="30px"><span style="display:none">Me divierta</span> ({{ $medivierta }})
        <img src="{{ asset('imagenes/reacciones/me-asombra.png') }}" width="30px"><span style="display:none">Me asombra</span> ({{ $measombra }})
        <img src="{{ asset('imagenes/reacciones/me-entristece.png') }}" width="30px"><span style="display:none">Me entristece</span> ({{ $meentristece }})
        <img src="{{ asset('imagenes/reacciones/me-enoja.png') }}" width="30px"><span style="display:none">Me enoja</span> ({{ $meenoja }})
    </td>
    <td>

        <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#exampleModal{{ $capsula_id }}">Ver detalles</button>
        
        <!-- Modal -->
        <div class="modal fade" id="exampleModal{{ $capsula_id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">
                            Reacciones 
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th><img src="{{ asset('imagenes/reacciones/me-gusta.png') }}" width="30px"><span style="display:none">Me gusta</span> ({{ $megusta }})</th>
                                    <th><img src="{{ asset('imagenes/reacciones/me-encanta.png') }}" width="30px"><span style="display:none">Me encanta</span> ({{ $meencanta }})</th>
                                    <th><img src="{{ asset('imagenes/reacciones/me-divierta.png') }}" width="30px"><span style="display:none">Me divierta</span> ({{ $medivierta }})</th>
                                    <th><img src="{{ asset('imagenes/reacciones/me-asombra.png') }}" width="30px"><span style="display:none">Me asombra</span> ({{ $measombra }})</th>
                                    <th><img src="{{ asset('imagenes/reacciones/me-entristece.png') }}" width="30px"><span style="display:none">Me entristece</span> ({{ $meentristece }})</th>
                                    <th><img src="{{ asset('imagenes/reacciones/me-enoja.png') }}" width="30px"><span style="display:none">Me enoja</span> ({{ $meenoja }})</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <ul>
                                            @foreach($usuariosmegusta as $megusta)
                                                <li>{{$megusta->name}}</li>
                                            @endforeach
                                        </ul>
                                    </td>
                                    <td>
                                        <ul>
                                            @foreach($usuariosmeencanta as $meencanta)
                                                <li>{{$meencanta->name}}</li>
                                            @endforeach
                                        </ul>
                                    </td>
                                    <td>
                                        <ul>
                                            @foreach($usuariosmedivierta as $medivierta)
                                                <li>{{$medivierta->name}}</li>
                                            @endforeach
                                        </ul>
                                    </td>
                                    <td>
                                        <ul>
                                            @foreach($usuariosmeasombra as $measombra)
                                                <li>{{$measombra->name}}</li>
                                            @endforeach
                                        </ul>
                                    </td>
                                    <td>
                                        <ul>
                                            @foreach($usuariosmeentristece as $meentristece)
                                                <li>{{$meentristece->name}}</li>
                                            @endforeach
                                        </ul>
                                    </td>
                                    <td>
                                        <ul>
                                            @foreach($usuariosmeenoja as $meenoja)
                                                <li>{{$meenoja->name}}</li>
                                            @endforeach
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </td>
</div>