@if ($videos->count() > 0)
    @foreach ($videos as $video)
        @php
            $date = \Carbon\Carbon::parse($video->capture_datetime);
            $timeAgoText =  $date->format('F j, Y');
            /* $thumbnailPath = str_replace('.mp4', '.jpg', $video->url);
            if (!empty($thumbnailPath)) {
                $thumbnailUrl = Storage::disk('s3_thumbnails')->url($thumbnailPath);
            } */
            $baseFilename = str_replace('.mp4', '', $video->url);
            $thumbnailUrls = [];

            for ($i = 0; $i < $video->no_of_thumbnails; $i++) {
                $thumbnailUrls[] = Storage::disk('s3_thumbnails')->url("{$baseFilename}" . ($video->no_of_thumbnails > 1 ? "-{$i}" : '') . '.jpg');
            }
        @endphp
        @if ($video->file_type == 1)
            <div class="vid_list p-2">
                <a href="javascript:void(0);" class="video-popup" data-id="{{ $video->id }}">
                    {{-- <div class="thumbnail-container">
                    <img src="{{ $thumbnailUrl }}" class="thumbnail thumbnail-video" id="thumbnail-video"
                    onerror="this.onerror=null; this.src='../assets/img/video-thumbnail-placeholder.png';"
                    alt="Video Thumbnail" />
                   <img class="play-button" src="../assets/img/transparent-play-button.png" alt="Play Button" />
                </div> --}}
                    <div class="thumbnail-container" data-id="{{ $video->id }}"
                        data-thumbnails="{{ json_encode($thumbnailUrls) }}"  style="background-image: url('{{ Storage::disk('s3_thumbnails')->url($baseFilename . ($video->no_of_thumbnails > 1 ? '-0.jpg' : '.jpg')) }}')">
                        <img class="thumbnail thumbnail-video" id="thumbnail-video"
                            src="{{ Storage::disk('s3_thumbnails')->url($baseFilename . ($video->no_of_thumbnails > 1 ? '-0.jpg' : '.jpg')) }}"
                            onerror="this.onerror=null; this.src='../assets/img/video-thumbnail-placeholder.png';"
                            alt="Video Thumbnail" />
                        <img class="play-button" src="../assets/img/transparent-play-button.png" alt="Play Button" />
                    </div>


                    <div class="flex_div">
                        <img class="thumbnail" src="">
                        <div class="vid_info">
                            <div>{{ $video->title }}</div>
                            <p class="description">{{ $video->description }}</p>
                            <p>{{ $timeAgoText }}</p>
                        </div>
                    </div>
                </a>
            </div>
        @endif
        @if ($video->file_type == 2)
            @php
                $thumbnailPath = $video->url;
                $thumbnailUrl = Storage::disk('s3_thumbnails')->url($thumbnailPath);
                $imageUrl = $video->signedUrl;

                $thumbnailPathJpg = pathinfo($thumbnailPath, PATHINFO_DIRNAME) . '/' . pathinfo($thumbnailPath, PATHINFO_FILENAME) . '.jpg';

                $thumbnailUrlJpg = Storage::disk('s3_thumbnails')->url($thumbnailPathJpg);
                $isDocxFile = Str::endsWith($video->url, '.docx');

            @endphp
            @if (!$isDocxFile)

            <div class="vid_list p-2">
                {{-- <a href="{{ '/download-file?id=' . $video->id }}" target="_blank">
                <img src="../assets/img/document-thumbnail.png" alt="Document Thumbnail" class="thumbnail thumbnail-video" /> --}}
                {{-- <a href="{{ '/download-file?id=' . $video->id }}" target="_blank">
                    <img class="thumbnail thumbnail-video" src="{{ $thumbnailUrlJpg }}" alt="Document Thumbnail"
                        onerror="this.onerror=null; this.src='../assets/img/document-thumbnail.png';" />

                </a> --}}
                <a>
                    <div class="_df_custom thumbnail thumbnail-video" source="{{ $video->signedUrl }}"
                        tags="3d,images"><img src="{{ $thumbnailUrlJpg }}"
                            alt="Document Thumbnail" class="thumbnail thumbnail-video"
                            onerror="this.onerror=null; this.src='../assets/img/document-thumbnail.png';" />
                    </div>
                </a>
                <div class="flex_div">
                    <img class="thumbnail" src="">
                    <div class="vid_info">
                        <div>{{ $video->title }}</div>
                        <p class="description">{{ $video->description }}</p>
                        <p>{{ $timeAgoText }}</p>
                    </div>
                </div>
                </a>
            </div>
            @elseif ($isDocxFile)
            <div class="vid_list p-2">
                <a href="#" data-bs-toggle="modal" data-bs-target="#documentModal" onclick="loadDocument('{{ $video->signedUrl }}')">
                    <div class="thumbnail thumbnail-video" source="{{ $video->signedUrl }}"
                        tags="3d,images"><img src="{{ $thumbnailUrlJpg }}"
                            alt="Document Thumbnail" class="thumbnail thumbnail-video"
                            onerror="this.onerror=null; this.src='../assets/img/document-thumbnail.png';" />
                    </div>
                </a>
                <div class="flex_div">
                    <img class="thumbnail" src="">
                    <div class="vid_info">
                        <div>{{ $video->title }}</div>
                        <p class="description">{{ $video->description }}</p>
                        <p>{{ $timeAgoText }}</p>
                    </div>
                </div>
                </a>
            </div>

            <div class="modal fade" id="documentModal" tabindex="-1" aria-labelledby="documentModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-fullscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="documentModalLabel">Document Viewer</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <iframe id="docIframe" src="" width="100%" height="100%" frameborder="0">
                                This is an embedded <a target="_blank" href="http://office.com">Microsoft Office</a> document,
                                powered by <a target="_blank" href="http://office.com/webapps">Office Online</a>.
                            </iframe>
                        </div>
                        <div class="modal-footer">
                            <a href="{{ url('/media-person/videos/' . $video->id . '/downloadAllTypes/docx') }}" class="btn btn-success mx-2">Download</a>

                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                          </div>
                    </div>
                </div>
            </div>
            @endif
        @endif
        @if ($video->file_type == 3)
                                    @php
                                        $date = \Carbon\Carbon::parse($video->capture_datetime);
                                        $timeAgoText = $date->format('F j, Y');

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

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

                                        foreach ($extensions as $ext) {
                                            $thumbnailPathWithExt =
                                                pathinfo($thumbnailPath, PATHINFO_DIRNAME) .
                                                '/' .
                                                pathinfo($thumbnailPath, PATHINFO_FILENAME) .
                                                '.' .
                                                $ext;
                                            //if (Storage::disk('s3_thumbnails')->exists($thumbnailPathWithExt)) {
                                                $thumbnailUrlJpg = Storage::disk('s3_thumbnails')->url(
                                                    $thumbnailPathWithExt,
                                                );
                                               // break;
                                            //}
                                        }

                                        $imageUrl = $video->signedUrl;
                                    @endphp
                                    <div class="video-item">
                                    
                                        <a href="javascript:void(0);" class="image-popup" data-id="{{ $video->id }}">
                                            <div class="thumbnail-container" data-id="{{ $video->id }}"
                                                style="background-image: url('{{ $thumbnailUrlJpg }})">
                                                <div class="thumbnail-background"></div>


                                                <img class="thumbnail-image" src="{{ $thumbnailUrlJpg }}"
                                                    onerror="this.onerror=null; this.src='{{ asset('assets/img/video-thumbnail-placeholder.png') }}';"
                                                    alt="Video Thumbnail" />
                                                {{-- <img class="play-button"
                                                    src="{{ asset('assets/img/transparent-play-button.png') }}"
                                                    alt="Play Button" /> --}}
                                            </div>
                                            <span><b>{{ $video->title }}</b></span>
                                            <p
                                                style="color: #5a5a5a;
                                                font-size: 14px!important;
                                                display: block;
                                                ">
                                                {{ $timeAgoText }}</p>

                                        </a>
                                    </div>
                                @endif
        @if ($video->file_type == 4)
        <div class="vid_list p-2">
            <a href="#" data-bs-toggle="modal" data-bs-target="#textContentModal" onclick="fetchTextContent('{{ $video->signedUrl }}', '{{ addslashes($video->title) }}')">
                <div class="thumbnail thumbnail-video" source="{{ $video->signedUrl }}"
                    tags="3d,images"><img src="../assets/img/txt-file.png"
                        alt="Document Thumbnail" class="thumbnail thumbnail-video"
                     />
                </div>
            </a>
            <div class="flex_div">
                <img class="thumbnail" src="">
                <div class="vid_info">
                    <div>{{ $video->title }}</div>
                    <p class="description">{{ $video->description }}</p>
                    <p>{{ $timeAgoText }}</p>
                </div>
            </div>
            </a>
        </div>

        <div class="modal fade" id="textContentModal" tabindex="-1" aria-labelledby="textContentModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="textContentModalLabel"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" id="modalTextContent">
                      
                    </div>
                    <div class="modal-footer">
                        <a href="{{ url('/media-person/videos/' . $video->id . '/downloadAllTypes/txt') }}" class="btn btn-success mx-2">Download</a>

                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      </div>
                </div>
            </div>
        </div>
        @endif
    @endforeach
@else
    <div class="no-videos-message">
        <p>No files found.</p>
    </div>
@endif

<script defer>
    function loadDocument(url) {
        var encodedUrl = encodeURIComponent(url);
        var iframeSrc = 'https://view.officeapps.live.com/op/embed.aspx?src=' + encodedUrl;
        document.getElementById('docIframe').src = iframeSrc;
    }

    function fetchTextContent(url, title) {
        document.getElementById('textContentModalLabel').innerText = title;

            fetch(url)
                .then(response => response.text())
                .then(data => {
                    document.getElementById('modalTextContent').innerText = data;
                })
                .catch(error => console.error('Error fetching text file:', error));
        }
</script>