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

        $thumbnailPath = $document->url;
        $thumbnailUrl = $thumbnailPath ? Storage::disk('s3_thumbnails')->url($thumbnailPath) : null;
        $imageUrl = $document->signedUrl;

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

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

        @endphp
        @if ($document->file_type == 2)
            @if (!$isDocxFile)
                <div class="col-md-3 vid_list p-2">


                    <a>
                        <div class="_df_custom thumbnail thumbnail-video" source="{{ $document->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>{{ $document->title }}</div>
                            <p class="description">{{ $document->description }}</p>
                            <p>{{ $timeAgoText }}</p>
                        </div>
                    </div>


                </div>
            @elseif ($isDocxFile)
                <div class="col-md-3 vid_list p-2">


                    <a href="#" data-bs-toggle="modal" data-bs-target="#documentModal"
                        onclick="loadDocument('{{ $document->signedUrl }}')">
                        <div class="thumbnail thumbnail-video" source="{{ $document->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>{{ $document->title }}</div>
                            <p class="description">{{ $document->description }}</p>
                            <p>{{ $timeAgoText }}</p>
                        </div>
                    </div>


                </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/' . $document->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 ($document->file_type == 4)
        <div class="col-md-3 vid_list p-2">


            <a href="#" data-bs-toggle="modal" data-bs-target="#textContentModal"
            onclick="fetchTextContent('{{ $document->signedUrl }}', '{{ addslashes($document->title) }}')">
                <div class="thumbnail thumbnail-video" source="{{ $document->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>{{ $document->title }}</div>
                    <p class="description">{{ $document->description }}</p>
                    <p>{{ $timeAgoText }}</p>
                </div>
            </div>


        </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/' . $document->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>