<div class="media-left media-center">
    <div class="badge-container" style="position: relative; display: inline-block;">
        <span class="badge badge-primary product-badge" style="position: absolute; top: 1px; left: 35px;">{{ count($videos) }}</span>
        <svg width="502" height="502" viewBox="0 0 502 502" fill="none" xmlns="http://www.w3.org/2000/svg"
            style="width: 50px; height: auto; aspect-ratio: 1;" data-toggle="modal" data-target="#modal{{ $id }}"
            onerror="">
            <path
                d="M0.333374 0.333313V501.667H501.667V0.333313H0.333374ZM97.4 464.333H36.6V398.2H97.4V464.333ZM97.4 343.8H36.6V277.667H97.4V343.8ZM97.4 224.333H36.6V158.2H97.4V224.333ZM97.4 104.867H36.6V37.6666H97.4V104.867ZM188.067 339.533V162.467L313.933 251L188.067 339.533ZM465.4 464.333H404.6V398.2H465.4V464.333ZM465.4 343.8H404.6V277.667H465.4V343.8ZM465.4 224.333H404.6V158.2H465.4V224.333ZM465.4 104.867H404.6V37.6666H465.4V104.867Z"
                fill="#010101" />
        </svg>
    </div>
    

    <div class="modal fade" id="modal{{ $id }}" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document" style="max-width: 1200px; width: auto;">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">{{ $name }}</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        style="position: absolute; top: 20px; right: 20px;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="background:#E0DFDF ">
                    <div class="container videos-container" id="videosContainer{{ $id }}">

                        <div class="main-video-container">
                            @if (isset($videos) && count($videos) > 0)
                                <iframe width="560" height="315" src="{{ $videos[0] }}" frameborder="0"
                                    allowfullscreen class="main-video"></iframe>
                                <h3 class="main-vid-title">{{ $name }}</h3>
                            @endif
                        </div>

                        <div class="video-list-container">
                            @foreach ($videos as $video)
                                <div class="list">
                                    <iframe width="560" height="315" src="{{ $video }}" frameborder="0"
                                        allowfullscreen class="list-video"></iframe>
                                    {{-- <h3 class="list-title">{{ $name }}</h3> --}}
                                    <span class="badge badge-danger product-delete-badge"
                                        onClick="clickDeleteProductImage({{ $id }}, '{{ $video }}')">Eliminar</span>
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // const videosContainer = document.querySelector('.videos-container');
    const videosContainer = document.getElementById('videosContainer{{ $id }}');
    const videoListContainer = videosContainer.querySelectorAll('.video-list-container .list');
    const mainVideoContainerMV = videosContainer.querySelector('.main-video-container .main-video');
    // const mainVideoContainerMVT = videosContainer.querySelector('.main-video-container .main-vid-title');

    videoListContainer.forEach(vid => {
        vid.onclick = () => {
            videoListContainer.forEach(remove => {
                remove.classList.remove('active')
            });
            vid.classList.add('active');
            const src = vid.querySelector('.list-video').src;
            // const title = vid.querySelector('.list-title').innerHTML;
            mainVideoContainerMV.src = src;
            mainVideoContainerMV.play();
            // mainVideoContainerMVT.innerHTML = title;
        };
    });

</script>