@extends($layout)
@section('content')
    <link rel="stylesheet" href="{{ asset('assets/dflip/css/dflip.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/dflip/css/themify-icons.min.css') }}">
    <style>
        body {
            background-color: #f8f9fa;
        }

        .sidebar {
            width: 60px;
            min-height: 100vh;
            background: #f4f4f4;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;
        }

        .sidebar i {
            font-size: 20px;
            margin-bottom: 20px;
            color: #666;
        }

        .folder-card,
        .image-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .image-card img {
            width: 100%;
            border-radius: 5px;
        }

        .folder-icon {
            background-color: #e0f2ff;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 8px;
        }

        .search-container {
            background-color: white;
            border-radius: 50px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            padding: 10px;
            max-width: 500px;
            width: 100%;
            transition: all 0.3s ease;
        }

        .search-container:hover {
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }

        .search-input {
            border: none;
            background: transparent;
            font-size: 1rem;
        }

        .search-input:focus {
            box-shadow: none;
            outline: none;
        }

        .btn-search {
            background-color: #007bff;
            color: white;
            border-radius: 50px;
            padding: 10px 20px;
            border: none;
            transition: all 0.3s ease;
            margin: auto;
        }

        .btn-search:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        .search-icon {
            color: #6c757d;
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
        }
         {
    background-color: #0A477B !important;
}

footer {
        background: #0A477B;
        height: auto;
        flex-shrink: 0;
        padding: 40px;
        color: #FFF;
        margin-top: 100px;
    }

    h3 {
        color: #FFF;
    }

    footer p,
    footer h3,
    footer h5,
    footer a {
        color: #FFF !important;
        font-family: Poppins;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    #row4 {
        display: flex;
        justify-content: space-around;
    }

    #row4_div1 {
        width: 50%;
        text-align: center;
        margin: 10px;
        word-wrap: break-word;
        text-align: left;
    }

    #row4_div2 {
        width: 50%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        word-wrap: break-word;
        text-align: left;
    }

    .footer-links a:hover {
        text-decoration: underline;
    }

    @media (max-width: 991.98px) {
        #row4 {
            flex-direction: column;
        }

        #row4_div1, #row4_div2 {
            width: 100%;
            margin: 0 0 20px 0;
        }

        #row4_div2 {
            flex-wrap: wrap;
        }

        #row4_div2 > div {
            width: 100% !important;
            margin-bottom: 20px;
        }
    }
    </style>
    <div class="main-content position-relative bg-gray-100 max-height-vh-100 h-100">
        {{--  <nav class="navbar navbar-main navbar-expand-lg bg-transparent shadow-none position-absolute px-4 w-100 z-index-2">
            <div class="container-fluid py-1">

                <div class="collapse navbar-collapse me-md-0 me-sm-4 mt-sm-0 mt-2" id="navbar">
                    <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                        <div class="input-group">
                            <span class="input-group-text text-body"><i class="fas fa-search" aria-hidden="true"></i></span>
                            <input type="text" class="form-control" placeholder="Type here...">
                        </div>
                    </div>
                    <ul class="navbar-nav justify-content-end">

                    </ul>
                </div>
            </div>
        </nav>
        <div class="container-fluid">
            <div class="page-header min-height-300 border-radius-xl mt-4"
                style="background-image: url('../assets/img/curved-images/curved0.jpg'); background-position-y: 50%;">
                <span class="mask bg-gradient-primary opacity-6"></span>
            </div>

        </div> --}}

        <div class="container">
        <nav class="navbar navbar-main navbar-expand-lg px-3 shadow-none border-radius-xl" id="navbarBlur"
            navbar-scroll="true">
            <div class="container-fluid d-flex justify-content-between align-items-center py-2">
                <a class="navbar-brand" href="#">
                    <img src="{{ asset('assets/img/logo1.png') }}" class="img-fluid" style="max-height: 4.5rem;"
                        alt="Logo">
                </a>
            </div>
        </nav>

        <div class="text-center" style="background-color: #749bcc;">
            <img <img src="../assets/img/banner.jpg" class="img-fluid w-100" alt="Banner">
        </div>
        </div>


        <div class="d-flex">

            <div class="container mt-4">
                <div class="d-flex justify-content-between align-items-center">
                    <h4>Media Library</h4>
                    {{--  <div>
                            <button class="btn btn-outline-primary">+ Add New Folder</button>
                            <button class="btn btn-primary">+ Add New Assets</button>
                        </div> --}}
                </div>
                <div class="row pt-4 pb-4">
                    <div class="col-12 col-md-8 col-lg-6">
                        <form method="GET" action="{{ route('public') }}">
                            <div class="search-container d-flex align-items-center">
                                <input class="form-control search-input flex-grow-1 ps-3" type="search" name="search"
                                    value="{{ request('search') }}" placeholder="Search..." aria-label="Search">
                                <button class="btn btn-search ms-2" type="submit">Search</button>
                            </div>
                        </form>
                    </div>
                </div>




                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6>Folders</h6>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('public') }}">Home</a>
                                </li>

                                @php
                                    $publicFolders = array_filter($parent_folders, fn($folder) => $folder['is_public']);
                                    $totalFolders = count($publicFolders);
                                @endphp

                                @if ($totalFolders > 3)
                                    <li class="breadcrumb-item">...</li>
                                    @foreach (array_slice($publicFolders, -3) as $index => $parent_folder)
                                        <li class="breadcrumb-item {{ $loop->last ? 'active' : '' }}">
                                            @if (!$loop->last)
                                                <a href="{{ route('public', ['hashed_folder_id' => $parent_folder['hashed_id']]) }}"
                                                    class="folder-link" title="{{ $parent_folder['name'] }}">
                                                    {{ Str::limit($parent_folder['name'], 15, '...') }}
                                                </a>
                                            @else
                                                <span class="folder-link" title="{{ $parent_folder['name'] }}">
                                                    {{ Str::limit($parent_folder['name'], 15, '...') }}
                                                </span>
                                            @endif
                                        </li>
                                    @endforeach
                                @else
                                    @foreach ($publicFolders as $index => $parent_folder)
                                        <li class="breadcrumb-item {{ $loop->last ? 'active' : '' }}">
                                            @if (!$loop->last)
                                                <a href="{{ route('public', ['hashed_folder_id' => $parent_folder['hashed_id']]) }}"
                                                    class="folder-link" title="{{ $parent_folder['name'] }}">
                                                    {{ Str::limit($parent_folder['name'], 15, '...') }}
                                                </a>
                                            @else
                                                <span class="folder-link" title="{{ $parent_folder['name'] }}">
                                                    {{ Str::limit($parent_folder['name'], 15, '...') }}
                                                </span>
                                            @endif
                                        </li>
                                    @endforeach
                                @endif
                            </ol>
                        </nav>

                    </div>
                </div>

                <div class="row mt-3">
                    @if ($folders->isNotEmpty())
                        @foreach ($folders as $folder)
                            <div class="col-md-3 pt-3">
                                <a href="{{ route('public', ['hashed_folder_id' => $folder->hashed_id]) }}"
                                    class="text-decoration-none">
                                    <div class="folder-card d-flex align-items-center">
                                        <div class="folder-icon p-2 rounded">
                                            <img src="/folder.png" alt="Folder" width="24">
                                        </div>
                                        <div class="ms-2">
                                            <strong class="d-block text-truncate"
                                                style="max-width: 150px;">{{ $folder->name }}</strong>
                                            <small>{{ $folder->subfolder_count }} folders{{-- , {{ $folder->file_count }} assets --}}</small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                        {{-- @else
                        <div class="col-12">
                            <div class="card text-center p-4">
                                <h5>No folders found</h5>
                                
                            </div>
                        </div> --}}
                    @endif
                </div>







            </div>
        </div>
        <div class="mt-5cp container">
            <div class="card-header pb-0 p-3">
                <h6 class="mb-1">All Files</h6>
                {{-- <p class="text-sm">Architects design houses</p> --}}
            </div>
            <div class="card-body p-0">
                <div class="row">
                    @if ($files->isNotEmpty())
                        @foreach ($files as $file)
                            @php
                                $date = \Carbon\Carbon::parse($file->capture_datetime);
                                $timeAgoText = $date->format('F j, Y');
                                $fileType = $file->file_type;
                                $title = $file->title;
                                $signedUrl = $file->signedUrl;
                                $isVideo = $fileType == 1;
                                $isImage = $fileType == 3;
                                $isDocument = $fileType == 2;
                                $thumbnailUrl = asset('assets/img/image-placeholder.png');

                                if ($isImage) {
                                    $thumbnailPath = $file->url;
                                    $thumbnailUrl = Storage::disk('s3_thumbnails')->url($thumbnailPath);
                                }

                                if ($isVideo) {
                                    $baseFilename = str_replace('.mp4', '', $file->url);
                                    $thumbnailUrls = [];
                                    for ($i = 0; $i < $file->no_of_thumbnails; $i++) {
                                        $thumbnailUrls[] = Storage::disk('s3_thumbnails')->url(
                                            "{$baseFilename}" . ($file->no_of_thumbnails > 1 ? "-{$i}" : '') . '.jpg',
                                        );
                                    }
                                    $thumbnailUrl = $thumbnailUrls[0] ?? asset('assets/img/video-placeholder.png');
                                }

                                if ($isDocument) {
                                    $thumbnailPathJpg =
                                        pathinfo($file->url, PATHINFO_DIRNAME) .
                                        '/' .
                                        pathinfo($file->url, PATHINFO_FILENAME) .
                                        '.jpg';
                                    $thumbnailUrl = Storage::disk('s3_thumbnails')->url($thumbnailPathJpg);
                                    $isDocxFile = Str::endsWith($file->url, '.docx');
                                }
                            @endphp

                            <div class="col-xl-3 col-md-6 mb-xl-0 mb-4 pb-4">
                                <div class="p-3 bg-white border-radius-sm shadow-sm">
                                    <div class="card card-blog card-plain bg-white">
                                        <div class="position-relative">
                                            @if ($isImage)
                                                <a href="{{ route('viewFilePublic', ['id' => $file->hashed_id]) }}"
                                                    data-lightbox="image-gallery" data-title="{{ $title }}"
                                                    class="d-block shadow-xl border-radius-xl">
                                                    <img src="{{ $thumbnailUrl }}"
                                                        onerror="this.onerror=null; this.src='{{ asset('assets/img/image-placeholder.png') }}';"
                                                        alt="File Thumbnail" class="img-fluid shadow border-radius-lg w-100"
                                                        style="aspect-ratio: 16/9; object-fit: cover;">
                                                </a>
                                            @elseif ($isVideo)
                                                <a href="{{ route('viewFilePublic', ['id' => $file->hashed_id]) }}"
                                                    data-lightbox="video-gallery" data-title="{{ $title }}"
                                                    class="d-block shadow-xl border-radius-xl video-thumbnail"
                                                    data-thumbnails="{{ json_encode($thumbnailUrls) }}">
                                                    <img src="{{ $thumbnailUrl }}"
                                                        onerror="this.onerror=null; this.src='{{ asset('assets/img/video-placeholder.png') }}';"
                                                        alt="Video Thumbnail"
                                                        class="img-fluid shadow border-radius-lg w-100"
                                                        style="aspect-ratio: 16/9; object-fit: cover;">
                                                </a>
                                            @elseif ($isDocument && !$isDocxFile)
                                                <a href="{{ route('viewFilePublic', ['id' => $file->hashed_id]) }}">
                                                    <div class="" source="{{ $signedUrl }}" tags="3d,images">
                                                        <img src="{{ $thumbnailUrl }}"
                                                            onerror="this.onerror=null; this.src='{{ asset('assets/img/document-thumbnail.png') }}';"
                                                            alt="Document Thumbnail"
                                                            class="img-fluid shadow border-radius-lg w-100"
                                                            style="aspect-ratio: 16/9; object-fit: cover;">
                                                    </div>
                                                </a>
                                            @elseif ($isDocument && $isDocxFile)
                                                <a href="{{ route('viewFilePublic', ['id' => $file->hashed_id]) }}">
                                                    <img src="{{ $thumbnailUrl }}"
                                                        onerror="this.onerror=null; this.src='{{ asset('assets/img/document-thumbnail.png') }}';"
                                                        alt="Document Thumbnail"
                                                        class="img-fluid shadow border-radius-lg w-100"
                                                        style="aspect-ratio: 16/9; object-fit: contain; height: 100%;">
                                                </a>
                                            @endif
                                        </div>
                                        <div class="card-body px-3 pb-3">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <p class="text-dark text-sm mb-0 text-truncate d-block"
                                                    style="max-width: 75%;">
                                                    <strong>{{ $title }}</strong>
                                                </p>
                                                <span class="badge bg-secondary px-2">
                                                    @if ($isImage)
                                                        IMAGE
                                                    @elseif ($isVideo)
                                                        VIDEO
                                                    @elseif ($isDocument)
                                                        DOCUMENT
                                                    @endif
                                                </span>
                                            </div>
                                            <p class="text-muted text-xs">{{ $timeAgoText }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="col-12">
                            <div class="card text-center p-4">
                                <h5>No files found</h5>
                                {{-- <p>Try searching with a different keyword.</p> --}}
                            </div>
                        </div>
                    @endif
                </div>
                <div class="d-flex justify-content-center mt-4">
                    {{ $files->appends(['search' => request('search')])->links() }}
                </div>

                

                <!-- Document Viewer Modal -->
                <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"></iframe>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <div id="row4">
                <div id="row4_div1">
                    <h3>CASER</h3>
                    <p style="margin-right: 25%">The Election Department is headed by the Chief Electoral Officer appointed by Election Commission of India.</p>
                    All rights reserved | Developed & Maintained by <a href="https://thoughtripples.com">ThoughtRipples Technologies</a>
                </div>
                <div id="row4_div2">
                    <div class="" style="width:10%;">
                        <h5></h5>
                        <ul class='footer-links'>
                            {{-- <li><a target= "_blank" href="">Sveep Kerala</a></li>
                            <li><a target= "_blank" href="">Link2</a></li>
                            <li><a target= "_blank" href="">Contact Us</a></li>
                            <li><a target= "_blank" href="">About Us</a></li> --}}
                        </ul>
                    </div>
                    <div class="" style="width:40%;">
                        <h5>Get in touch</h5>
                        <ul>
                            Election Department,
                            Kerala Legislative Complex,
                            Vikas Bhavan P.O.,
                            Thiruvananthapuram<br/>
                            Pin - 695 033
                        </ul>
                    </div>
                    <div class="" style="width:50%;">
                        <h5></h5>
                        <p>Toll Free / Contact Numbers:
                            1950
                            +91 471 2300121
                            +91 471 2307168</p>
                        <div>
                            <a class="btn btn-facebook btn-simple mb-0 ps-1 pe-2 py-0 rounded-circle" target="_blank"
                                href="https://www.facebook.com/CEOKeralaOffice">
                                <img src="../assets/img/home/typcn_social-facebook.png" alt="">
                            </a>
                            <a class="btn btn-facebook btn-simple mb-0 ps-1 pe-2 py-0 rounded-circle" target="_blank"
                                href="https://www.instagram.com/ceokeralaoffice">
                                <img src="../assets/img/home/typcn_social-instagram.png" alt="">
                            </a>
                            <a class="btn btn-facebook btn-simple mb-0 ps-1 pe-2 py-0 rounded-circle" target="_blank"
                                href="https://x.com/Ceokerala">
                                <img src="../assets/img/home/typcn_social-twitter.png" alt="">
                            </a>
                            <a class="btn btn-facebook btn-simple mb-0 ps-1 pe-2 py-0 rounded-circle" target="_blank"
                                href="https://www.youtube.com/@ChiefElectoralOfficerKerala">
                                <img src="../assets/img/home/ion_social-youtube.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="{{ asset('assets/dflip/js/dflip.min.js') }}"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll('.video-thumbnail').forEach(videoThumbnail => {
                let thumbnails = JSON.parse(videoThumbnail.getAttribute('data-thumbnails') || '[]');
                let imgElement = videoThumbnail.querySelector('img');

                if (thumbnails.length > 1) {
                    let index = 0;
                    let interval;

                    videoThumbnail.addEventListener('mouseenter', () => {
                        interval = setInterval(() => {
                            index = (index + 1) % thumbnails.length;
                            imgElement.src = thumbnails[index];
                        }, 1000);
                    });

                    videoThumbnail.addEventListener('mouseleave', () => {
                        clearInterval(interval);
                        imgElement.src = thumbnails[0];
                    });
                }
            });
        });
    </script>

    <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;
        }

        document.addEventListener("DOMContentLoaded", function() {
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.has('search')) {
                document.querySelector('.search-container').scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    </script>
@endsection