@if ($videos->count() > 0)
    @foreach ($videos as $image)
        @php
            $date = \Carbon\Carbon::parse($image->capture_datetime);
            $timeAgoText = $date->format('F j, Y');

            $thumbnailPath = $image->url;
            $thumbnailUrl = Storage::disk('s3_thumbnails')->url($thumbnailPath);

            $extensions = ['jpg', 'jpeg', 'png', 'JPG', 'PNG', 'JPEG'];
            $thumbnailUrlJpg = null;

            $thumbnailExtension = pathinfo($thumbnailPath, PATHINFO_EXTENSION);
                                        $thumbnailPathWithExt =
                                            pathinfo($thumbnailPath, PATHINFO_DIRNAME) .
                                            '/' .
                                            pathinfo($thumbnailPath, PATHINFO_FILENAME) .
                                            '.' .
                                            $thumbnailExtension;

            $thumbnailUrlJpg = Storage::disk('s3_thumbnails')->url($thumbnailPathWithExt);

            $imageUrl = $image->signedUrl;

        @endphp
        @if ($image->file_type == 3)
        <div class="col-md-2 vid_list p-2">
            <a href="javascript:void(0);" class="image-popup" data-id="{{ $image->id }}">
                <div class="thumbnail-container" data-id="{{ $image->id }}"
                    style="display: flex;
                           justify-content: center;
                           align-items: center;
                           height: 100%; 
                           background-image: url('{{ $thumbnailUrlJpg }}');
                           background-size: cover;
                           background-position: center;">
                    <div class="thumbnail-background"></div>
                    <img style="width: 100%;
                                height: 150px;
                                object-fit: contain;" 
                         class="thumbnail-image" 
                         src="{{ $thumbnailUrlJpg }}"
                         onerror="this.onerror=null; this.src='{{ asset('assets/img/video-thumbnail-placeholder.png') }}';"
                         alt="Video Thumbnail" />
                </div>
                <span style="display: block;
                             min-height: 40px; /* Adjust height as needed */
                             font-weight: bold;
                             text-align: center;">
                    {{ $image->title }}
                </span>
                <p style="color: #5a5a5a;
                          font-size: 14px!important;
                          text-align: center;
                          margin-top: 5px;">
                    {{ $timeAgoText }}
                </p>
            </a>
        </div>
        
        @endif
    @endforeach
@else
    <div class="no-videos-message">
        <p>No files found.</p>
    </div>
@endif

<script defer>
    $('.image-popup').on('click', function(e) {
        e.preventDefault();

        var videoId = $(this).data('id');

        $.ajax({
            url: '/watch',
            type: 'GET',
            data: {
                id: videoId
            },
            success: function(response) {
                var imageUrl = response.signedUrl;
                var title = response.title;
                var description = response.description;
                var imageId = response.videoId;
                console.log('Received response:', response);

                const userRoles = @json(auth()->user()->getRoleNames());

                        const isStandardUser = userRoles.includes('Standard User');

    var customContent = '<div class="mfp-figure" style="display:none;">' +
        '<div class="mfp-close"></div>' +
        '<img src="' + imageUrl +
        '" width="500" height="auto" class="mfp-img">' +
        '<div class="mfp-bottom-bar" style="display:none;">' +
        '<div class="mfp-title">' + title + '</div>' +
        '<div class="mfp-description">' + description + '</div>' +
        '<div class="pt-2 mfp-button-group">';

    if (!isStandardUser) {
        customContent += '<a class="btn btn-primary btn-sm mx-3 py-2" href="/file/edit/' +
            imageId + '">Edit</a>';
    }

    customContent += '<a class="btn btn-success btn-sm py-2" href="/images/' +
        imageId + '/download">Download</a>' +
        '</div>' +
        '</div>' +
        '</div>';

                $.magnificPopup.open({
                    items: {
                        src: customContent,
                        type: 'inline'
                    },
                    closeBtnInside: true,
                    callbacks: {
                        open: function() {
                            $('.mfp-figure').fadeIn(400, function() {
                                $('.mfp-bottom-bar').fadeIn(200);
                            });
                        }
                    }
                });
            },
            error: function(error) {
                console.error('Error fetching image:', error);
            }
        });
    });
</script>