@extends($layout)

@section('styles')
    <link rel="stylesheet" href="../assets/css/magnific.css">
    <link rel="stylesheet" href="{{ asset('assets/dflip/css/dflip.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/dflip/css/themify-icons.min.css') }}">

    <style>
        .loader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            /* Semi-transparent white background */
            z-index: 9999;
            /* Ensure it overlays everything */
            display: none;
            /* Initially hidden */
        }

        .loader {
            border: 16px solid #f3f3f3;
            /* Light grey */
            border-top: 16px solid #3498db;
            /* Blue */
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10000;
            /* Ensure it's above the overlay */
            display: none;
            /* Initially hidden */
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }


        .df-ui-btn.df-ui-share.ti-sharethis {
            display: none;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

        }

        a {
            text-decoration: none;
            color: #5a5a5a;
        }

        img {
            cursor: pointer;
        }

        .flex_div {
            display: flex;
            align-items: center;
        }



        .nav_right img {
            width: 25px;
            margin-right: 25px;
        }

        .nav_right .user_icon {
            width: 35px;
            border-radius: 50%;
            margin-right: 0;
        }

        .nav_left .menu_icon {
            width: 22px;
            margin-right: 25px;
        }

        .nav_left .logo {
            width: 130px;
        }

        .nav_middle .mic_icon {
            width: 16px;
        }

        .nav_middle .search_box {
            border: 1px solid #ccc;
            margin-right: 15px;
            padding: 8px 12px;
            border-radius: 25px;
        }

        .nav_middle .search_box input {
            width: 400px;
            border: 0;
            outline: 0;
            background-color: transparent;
        }

        .nav_middle .search_box img {
            width: 15px;
        }

        .sidebar {
            background-color: #fff;
            width: 15%;
            height: 100vh;
            position: fixed;
            top: 0;
            padding-left: 2%;
            padding-top: 80px;
        }

        .shortcut a img {
            width: 20px;
            margin-right: 20px;
        }

        .shortcut a {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            width: fit-content;
            flex-wrap: wrap;
        }

        .shortcut a:first-child {
            color: #ed3833;
        }

        .shortcut hr {
            border: 0;
            height: 1px;
            background-color: #ccc;
            width: 85%;
        }

        .subscription h3 {
            font-size: 13px;
            margin: 20px 0;
            color: #5a5a5a;
        }

        .subscription a {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            width: fit-content;
            flex-wrap: wrap;
        }

        .subscription a img {
            width: 25px;
            border-radius: 50%;
            margin-right: 20px;
        }

        .small-sidbar {
            width: 5%;
        }

        .small-sidbar a p {
            display: none;
        }

        .small-sidbar h3 {
            display: none;
        }

        .small-sidbar hr {
            width: 50%;
            margin-bottom: 25px;
        }

        .container {}

        .large_container {
            padding-left: 7%;
        }

        .banner {
            width: 100%;
        }

        .banner img {
            width: 100%;
            border-radius: 8px;
        }

        .list_container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-column-gap: 16px;
            grid-row-gap: 30px;
            margin-top: 15px;
        }

        .vid_list .thumbnail {
            width: 100%;
            border-radius: 5px;
        }

        .vid_list .flex_div {
            align-items: flex-start;
            margin-top: 7px;
        }

        .vid_list .flex_div img {
            width: 35px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .vid_list .flex_div .vid_info {
            color: #5a5a5a;
            font-size: 16px;
        }

        .vid_list .flex_div .vid_info div {
            color: #000;
            font-weight: 600;
            display: block;
            margin-bottom: 5px;
        }

        .vid_list:hover {
            background: #00c3ff29;
        }

        /* .vid_list {
                                                                                                            display: flex;
                                                                                                            flex-direction: column;
                                                                                                            align-items: center;
                                                                                                            width: 150px;
                                                                                                        } */

        .thumbnail-video {
            width: 100%;
            height: 8rem;
            object-fit: contain;
        }

        /*   .vid_list a span {
                                                                                                            display: block;
                                                                                                            text-align: center;
                                                                                                            margin-top: 10px;
                                                                                                        } */

        .single-video .vid_list {
            max-width: 50%;
            margin: auto;
            margin-left: 0;
        }


        @media (max-width: 900px) {
            .menu_icon {
                display: none;
            }

            .single-video .vid_list {
                max-width: 100%;

            }

            .sidebar {
                display: none;
            }

            .container,
            .large_container {
                padding-left: 5%;
                padding-right: 5%;
            }

            .nav_right img {
                display: none;
            }

            .nav_right .user_icon {
                display: block;
                width: 30px;
            }

            .nav_middle .search_box input {
                width: 100px;
            }
        }

        div.dataTables_wrapper div.dataTables_length select {
            width: 50%;
        }

        #example_paginate>ul>li.paginate_button.page-item.active>a {
            color: white !important;
        }

        nav {
            display: inline-block;
            padding: 10px;
        }

        .breadcrumb {
            padding: 8px 15px;
            margin-bottom: 0;
            background-color: #f5f5f5;
        }

        .breadcrumb-item {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 150px;
        }

        .content-display {
            display: flex;
            flex-wrap: wrap;

            padding: 10px;
        }

        .folder-item,
        .video-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* width: 150px; */
        }

        .folder-item img,
        .video-item img {
            width: 100px;
            height: 100px;
            object-fit: contain;
        }

        .folder-item a span,
        .video-item a span {
            display: block;
            text-align: center;
            margin-top: 10px;
        }

        .folder-item a span {
            /* display: contents !important; */

        }

        .folder-item a {
            display: block;
            width: 100%;
            text-align: center;
            border-radius: 10px;
            padding: 10px 0;
            min-width: fit-content;
        }

        .folder-item a:hover {
            background: #00c3ff29;
        }

        .video-item a {
            display: block;
            width: 100%;
            text-align: center;
            border-radius: 10px;
            padding: 10px 0;
        }

        .video-item a:hover {
            background: #00c3ff29;
        }

        .context-menu {
            display: none;
            position: absolute;
            z-index: 1000;
            width: 150px;
            background: white;
            border: 1px solid #ddd;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }

        .context-menu ul {
            list-style: none;
            padding: 5px 0;
            margin: 0;
        }

        .context-menu ul li a {
            display: block;
            padding: 5px 10px;
            color: black;
            text-decoration: none;
        }

        .context-menu ul li a:hover {
            background-color: #f0f0f0;
        }

        /* .content-display.folder-display {
                                                display: flex;
                                                flex-wrap: nowrap;
                                                align-items: center;
                                                padding: 10px 0;
                                            } */

        .folder-item {
            flex: 0 0 auto;
            padding-right: 30px;

            text-align: center;
        }

        /* .folder-display {
                                                display: flex;
                                                flex-wrap: nowrap;
                                                overflow-x: auto;
                                                padding: 10px 0;
                                                margin-bottom: 20px;
                                            } */

        .folder-item {
            flex: 0 0 auto;
            /*   margin-right: 30px; */
            text-align: center;
        }

        .show-more {
            flex: 0 0 auto;
            padding: 10px;

            align-items: center;
        }

        /* .content-display.folder-display {
                                                            display: flex;
                                                            flex-wrap: nowrap;
                                                            overflow: hidden;
                                                        }

                                                        .folder-item {
                                                            flex: 0 0 auto;
                                                            margin-right: 20px;
                                                        }

                                                        .show-more {
                                                            flex: 0 0 auto;
                                                            margin-left: auto;
                                                            display: inline-block;
                                                        } */


        /* @media (max-width: 575.98px) {
                                                .folder-item:nth-child(n+2) {
                                                    display: none;
                                                }
                                            }


                                            @media (min-width: 576px) and (max-width: 767.98px) {
                                                .folder-item:nth-child(n+3) {
                                                    display: none;
                                                }
                                            }


                                            @media (min-width: 768px) and (max-width: 991.98px) {
                                                .folder-item:nth-child(n+4) {
                                                    display: none;
                                                }
                                            }


                                            @media (min-width: 992px) and (max-width: 1199.98px) {
                                                .folder-item:nth-child(n+5) {
                                                    display: none;
                                                }
                                            }


                                            @media (min-width: 1200px) {
                                                .folder-item:nth-child(n+6) {
                                                    display: none;
                                                }
                                            }

                                            @media (min-width: 1200px) and (max-width: 1599.98px) {
                                                .folder-item:nth-child(n+7) {
                                                    display: none;
                                                }
                                            }

                                            @media (min-width: 1600px) {
                                                .folder-item:nth-child(n+7) {
                                                    display: none;
                                                }
                                            } */

                                            .folder-nav-pill {
    display: inline-flex;
    padding: 5px 15px !important;
    border-radius: 100px !important;
    background-color: #7286D3;
    align-items: center;
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-nav-pill:hover {
    background-color: #8EA7E9 !important;
    color: white;
    text-decoration: none;
}

.folder-items {
    flex: 0 1 auto; 
    margin-bottom: 5px;
}

.content-display {
    padding: 10px;
}

        .description {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 18ch;
        }



        .mfp-figure {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            text-align: left;
        }

        .mfp-figure:after {
            content: none;
        }


        .mfp-iframe {
            width: 100%;
            height: 340px;
        }

        .mfp-bottom-bar {
            color: #fff;
            background: rgba(0, 0, 0, 0.7);
            padding: 12px;
            box-sizing: border-box;
            position: inherit
        }

        .mfp-edit-button {
            margin-top: 1rem;
        }

        .mfp-title,
        .mfp-description {
            margin: 0;
            padding: 0;
            word-wrap: break-word;
        }

        .mfp-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 8px;
            margin-top: 5%
        }

        .mfp-description {
            font-size: 14px;
            line-height: 1.4;
        }


        .thumbnail-container {
            position: relative !important;


            overflow: hidden;
        }

        .thumbnail-container::before {
            content: '';
            position: absolute !important;

            width: 200%;
            height: 200%;
            background-size: cover;
            backdrop-filter: blur(10px);
            transform: scale(1.5);
            z-index: -1;
        }

        .thumbnail-container {
            backdrop-filter: blur(10px);
        }

        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px !important;
        }

        /* body > main >  div > div > div > div > div.row > div > div > div > div.content-display.folder-display > div:nth-child(6){
                                                margin-right: 1.4rem!important;
                                            }  */
    </style>
@endsection
@section('content')

    <div class="row justify-content-center">
        <div class="col-xl-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <form action="/home/search" method="get" id="searchForm">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="input-group input-group-md pb-4">
                                    <input type="text" name="query" id="search" class="form-control form-control-md"
                                        placeholder="Search" minlength="3" value="{{ request('query') }}">
                                    <div class="input-group-append">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <label for="start_date">From Date</label>
                                <input type="date" id="start_date" name="start_date" class="form-control"
                                    value="{{ request('start_date') }}">
                            </div>
                            <div class="col-md-2">
                                <label for="end_date">To Date</label>
                                <input type="date" id="end_date" name="end_date" class="form-control"
                                    value="{{ request('end_date') }}">
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-primary mt-4 " id="searchButton">Search</button>
                            </div>

                        </div>
                    </form>

                </div>

                {{-- <div class="banner pb-2">
                        <img src="../assets/img/banner.png" alt="">
                    </div> --}}

                @if (isset($folders) && $folders->count() > 0)
                    <div class="row" style="max-width: 100%;
overflow-x: hidden;">
                        <div class="col-12">
                            <div class="card mb-4">
                                {{-- <div class="card-header pb-0">
                                        <div class="row">
                                            <div class="col-6 d-flex align-items-center">
                                                <h6 class="mb-0">Recent Folders
                                                </h6>
                                            </div>

                                        </div>
                                    </div> --}}
                                <div class="table-responsive">
                                    <div class="mb-3">

                                    </div>
                                    <div class="content-display folder-display">
                                        @if ($folders->count() > 0)
                                            <div class="d-flex flex-wrap">
                                                @foreach ($folders as $folder)
                                                    <div class="folder-items" style="margin-right: 1%"
                                                        data-folder-id="{{ $folder->id }}">
                                                        <a href="{{ route('home.allFilesInFolder', $folder->id) }}"
                                                            class="folder-nav-pill">

                                                            <span
                                                                style="font-family: 'Open Sans'">{{ $folder->name }}</span>
                                                        </a>

                                                    </div>
                                                @endforeach
                                                @role('admin')
                                                    <div class="folder-items" style="margin-right: 1%; " data-folder-id="">
                                                        <a href="" class="folder-nav-pill"
                                                            style="background-color: #e26a08b9" data-bs-toggle="modal"
                                                            data-bs-target="#folderModal">

                                                            <span style="font-family: 'Open Sans'">All Folders</span>
                                                        </a>

                                                    </div>
                                                @endrole

                                                <div class="modal fade" id="folderModal" tabindex="-1"
                                                    aria-labelledby="folderModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="folderModalLabel">Folders</h5>
                                                                <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <ul id="folder-list" class="list-group"></ul>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-primary"
                                                                    id="load-more">Load More</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        {{-- <a href="/folders" class="show-more">Show all <i
                                                    class="fa fa-angle-double-right
                                "
                                                    data-input-class="videoName" style="cursor:pointer;">
                                                </i></a> --}}
                                    </div>
                                    @if (!($folders->count() > 0 || $videos->count() > 0))
                                        <p>No sub folders found.</p>
                                    @endif

                                    @if (!($folders->count() > 0 || $videos->count() > 0))
                                        <p>No sub folders found.</p>
                                    @endif
                                </div>
                            @else
                                {{--  <div class="table-responsive m-4 pt-2">
                                        <div class="mb-3">

                                        </div>
                                        <table class="table">
                                            <p>No sub folders or files found.</p>
                                        </table>
                                    </div> --}}
                @endif
            </div>
        </div>
    </div>
    <div class="loader-overlay" id="loader-overlay"></div>

    <div id="loader" class="loader"></div>

    @if (strpos(request()->url(), '/home/search') === false)
        <div class="col-lg-6 col-md-8 {{-- ms-sm-auto me-sm-0 --}} {{-- mx-auto --}} mt-3">
            <div class="nav-wrapper position-relative end-0">

                <ul class="nav nav-pills nav-fill p-1 bg-transparent" role="tablist">
                    @php
                        $hasTypeId1 = $videos->contains(function ($video) {
                            return $video->file_type == 1;
                        });
                    @endphp

                    <li style="display: {{ auth()->user()->hasRole('Press Release') || !$hasTypeId1 ? 'none' : 'block' }};"
                        class="nav-item">
                        <a class="nav-link mb-0 px-0 py-1 active" id="videosLink" href="javascript:;"
                            aria-selected="true"">
                            <svg class="text-dark" width="16px" height="16px" viewBox="0 0 42 42" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF"
                                        fill-rule="nonzero">
                                        <g transform="translate(1716.000000, 291.000000)">
                                            <g transform="translate(603.000000, 0.000000)">
                                                <path class="color-background"
                                                    d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z">
                                                </path>
                                                <path class="color-background"
                                                    d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z"
                                                    opacity="0.7"></path>
                                                <path class="color-background"
                                                    d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z"
                                                    opacity="0.7"></path>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                            <span class="ms-1">Recent Videos</span>
                        </a>
                    </li>
                    <li class="nav-item" id="docNavButton">
                        <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" id="documentsLink" href="javascript:;"
                            role="tab" aria-selected="false">
                            <svg class="text-dark" width="16px" height="16px" viewBox="0 0 40 44" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>document</title>
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF"
                                        fill-rule="nonzero">
                                        <g transform="translate(1716.000000, 291.000000)">
                                            <g transform="translate(154.000000, 300.000000)">
                                                <path class="color-background"
                                                    d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z"
                                                    opacity="0.603585379"></path>
                                                <path class="color-background"
                                                    d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z">
                                                </path>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                            <span class="ms-1">Recent Documents</span>
                        </a>
                    </li>
                    <li class="nav-item" id="imageNavButton">
                        <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" id="imagesLink" href="javascript:;"
                            role="tab" aria-selected="false">
                            <svg class="text-dark" width="16px" height="16px" viewBox="0 0 40 44" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>document</title>
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF"
                                        fill-rule="nonzero">
                                        <g transform="translate(1716.000000, 291.000000)">
                                            <g transform="translate(154.000000, 300.000000)">
                                                <path class="color-background"
                                                    d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z"
                                                    opacity="0.603585379"></path>
                                                <path class="color-background"
                                                    d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z">
                                                </path>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                            <span class="ms-1">Recent Images</span>
                        </a>
                    </li>

                </ul>


            </div>
        </div>
    @endif

    @php
        $videosOnly = $videos->filter(function ($video) {
            return $video->file_type == 1;
        });
        $documentsOnly = $videos->filter(function ($video) {
            return $video->file_type == 2;
        });
    @endphp

    <div class="list_container p-2 single-video {{ count($videos) <= 3 ? 'single-video' : '' }}">
        @if ($videosOnly->isNotEmpty())
            <div id="videosPartial" class="row">

                {{-- @include('partials.videos', ['video' => $videos]) --}}
                @if ($videos->count() > 0)
                    @foreach ($videos as $video)
                        @php

                            $date = \Carbon\Carbon::parse($video->capture_datetime);
                            $timeAgoText = $date->format('F j, Y');

                            $baseFilename = str_replace('.mp4', '', $video->url);
                            $thumbnailUrls = [];

                            for ($i = 0; $i < $video->no_of_thumbnails; $i++) {
                $thumbnailPath = "{$baseFilename}" . ($video->no_of_thumbnails > 1 ? "-{$i}" : '') . '.jpg';
               // if (Storage::disk('s3_thumbnails')->exists($thumbnailPath)) {
                    $thumbnailUrls[] = Storage::disk('s3_thumbnails')->url($thumbnailPath);
               // }
            }

            $defaultThumbnailUrl = asset('assets/img/video-thumbnail-placeholder.png');
            $thumbnailToShow = count($thumbnailUrls) > 0 ? $thumbnailUrls[0] : $defaultThumbnailUrl;
            $hasValidThumbnail = count($thumbnailUrls) > 0;
                        @endphp
                        @if ($video->file_type == 1)
                            <div class="col-md-3 vid_list p-2">
                                <a href="javascript:void(0);" class="video-popup" data-id="{{ $video->id }}">
                                    <div class="thumbnail-container" data-id="{{ $video->id }}"
                                        data-thumbnails="{{ json_encode($thumbnailUrls) }}"
                                        @if ($hasValidThumbnail) style="background-image: url('{{ $thumbnailToShow }}')" @endif>
                                        <img src="{{ Storage::disk('s3_thumbnails')->url($baseFilename . ($video->no_of_thumbnails > 1 ? '-0.jpg' : '.jpg')) }}"
                                            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="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
                    @endforeach
                @else
                    <div class="no-videos-message">
                        <p>No files found.</p>
                    </div>
                @endif

            </div>
        @endif

        <div id="documentsPartial" class="row {{ $videosOnly->isNotEmpty() ? '' : 'col-md-12' }}"
            style="display: none;">
            @include('partials.documents', ['document' => $videos])

        </div>

        <div id="imagesPartial" class="row {{ $videosOnly->isNotEmpty() ? '' : 'col-md-12' }}"
            style="display: none; padding-left:5%">
            @include('partials.images', ['document' => $videos])

        </div>

    </div>

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


@endsection

@section('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="../assets/js/magnific.min.js"></script>

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

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('searchForm');
            const startDateInput = document.getElementById('start_date');
            const endDateInput = document.getElementById('end_date');

            form.addEventListener('submit', function(event) {
                if (startDateInput.value && !endDateInput.value) {
                    alert('Please select an End Date.');
                    event.preventDefault();
                } else if (!startDateInput.value && endDateInput.value) {
                    alert('Please select a Start Date.');
                    event.preventDefault();
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {

            $.ajax({
                url: '/home/get-documents',
                type: 'GET',
                cache: false,
                success: function(response) {
                    if (!(typeof response === 'string' && response.trim().startsWith('<div'))) {

                        $('#docNavButton').hide();
                        var movingTab = document.querySelector('.moving-tab');

                        if (movingTab) {
                            movingTab.style.width = '323px';
                        }


                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error loading documents:', error);
                }
            });


            if (checkUserRole('Press Release') || checkVideosEmpty()) {
                loadDocuments();
            }

            function checkUserRole(roleName) {
                return {!! json_encode(auth()->user()->hasRole('Press Release')) !!};
            }

            /* function checkVideosEmpty() {
                console.log({!! json_encode($videos) !!})
                return {!! json_encode($videos->isEmpty()) !!};
            } */

            function checkVideosEmpty() {
                const videos = {!! json_encode($videos) !!};
                const hasTypeId1 = videos.some(video => video.file_type == 1);
                console.log(hasTypeId1);
                return !hasTypeId1;

            }


            function loadDocuments() {
                console.log("in loadDocuments")
                $('#loader').show();
                $('#loader-overlay').show();

                $.ajax({
                    url: '/home/get-documents',
                    type: 'GET',
                    cache: false,

                    success: function(response) {
                        $('#loader').hide();
                        $('#loader-overlay').hide();

                        $('#documentsPartial').html(response);
                        $('#documentsPartial').show();

                        $('#videosPartial').hide();
                    },

                    error: function(xhr, status, error) {
                        $('#loader').hide();
                        $('#loader-overlay').hide();

                        console.error('Error loading documents:', error);
                    }
                });
            }

            function loadImages() {
                console.log("in loadDocuments")
                $('#loader').show();
                $('#loader-overlay').show();

                $.ajax({
                    url: '/home/get-images',
                    type: 'GET',
                    cache: false,

                    success: function(response) {
                        $('#loader').hide();
                        $('#loader-overlay').hide();

                        $('#imagesPartial').html(response);
                        $('#imagesPartial').show();
                        $('#documentsPartial').hide();

                        $('#videosPartial').hide();
                    },

                    error: function(xhr, status, error) {
                        $('#loader').hide();
                        $('#loader-overlay').hide();

                        console.error('Error loading documents:', error);
                    }
                });
            }

            $('#videosLink').click(function(e) {
                e.preventDefault();
                $('#videosPartial').show();
                $('#documentsPartial').hide();
                $('#imagesPartial').hide();

            });

            $('#documentsLink').click(function(e) {
                e.preventDefault();
                $('#imagesPartial').hide();

                loadDocuments();
            });

            $('#imagesLink').click(function(e) {
                e.preventDefault();
                loadImages();
            });

            if (window.location.pathname.indexOf('/home/search') === -1) {
                $('#videosPartial').show();
                $('#documentsPartial').hide();
            } else {
                loadDocuments();
            }
        });




        /* $(document).ready(function() {
            function loadVideos() {
                $.ajax({
                    url: '/home/get-videos',
                    type: 'GET',
                    cache: false,

                    success: function(response) {
                        $('.list_container').html(response);
                        $('#documentsPartial').hide();
                    }
                });
            }

            function loadDocuments() {
                $.ajax({
                    url: '/home/get-documents',
                    type: 'GET',
                    cache: false,

                    success: function(response) {
                        $('.list_container').html(response);
                        $('#documentsPartial').show();
                    }
                });
            }

            $('#videosLink').click(function(e) {
                e.preventDefault();
                loadVideos();
            });

            $('#documentsLink').click(function(e) {
                e.preventDefault();
                loadDocuments();
            });

            if (window.location.pathname.indexOf('/home/search') === -1) {
                loadVideos();
            }
            if (window.location.pathname.indexOf('/home/search') !== -1) {
                $('#documentsPartial').show();
            }
        }); */


        $(document).ready(function() {
            $(document).on('click', '.video-popup', function(e) {
                console.log('Video popup clicked');
                e.preventDefault();

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

                $.ajax({
                    url: '/watch',
                    type: 'GET',
                    data: {
                        id: videoId
                    },
                    success: function(response) {
                        var videoUrl = response.signedUrl;
                        var title = response.title;
                        var description = response.description;
                        var videoId = response.videoId;
                        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>' +
        '<iframe src="' + videoUrl +
        '" width="500" height="280" frameborder="0" allowfullscreen class="mfp-iframe"></iframe>' +
        '<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/' +
            videoId + '">Edit</a>';
    }

    customContent += '<a class="btn btn-success btn-sm py-2" href="/media-person/videos/' +
        videoId + '/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 video:', error);
                    }
                });
            });
        });
    </script>


    <script>
        document.addEventListener('DOMContentLoaded', function() {

            let currentPage = 1;

            @if (Auth::user()->hasRole('admin'))
                let isAdmin = true;
            @else
                let isAdmin = false;
            @endif
            if (isAdmin) {
                document.querySelector('[data-bs-target="#folderModal"]').addEventListener('click', () => {
                    currentPage = 1;
                    loadFolders();
                });
            }
            document.getElementById('load-more').addEventListener('click', () => {
                currentPage++;
                loadFolders(currentPage);
            });

            function loadFolders(page = 1) {
                fetch(`/home/all-folders-modal?page=${page}`)
                    .then(response => response.json())
                    .then(data => {
                        const folderList = document.getElementById('folder-list');
                        if (page === 1) {
                            folderList.innerHTML = '';
                        }
                        data.data.forEach(folder => {
                            const li = document.createElement('li');
                            li.textContent = folder.name;
                            li.classList.add('list-group-item');
                            li.style.cursor = 'pointer';
                            li.addEventListener('click', () => {
                                window.location.href = `/home/${folder.id}`;
                            });
                            folderList.appendChild(li);
                        });
                        if (!data.next_page_url) {
                            document.getElementById('load-more').style.display = 'none';
                        } else {
                            document.getElementById('load-more').style.display = 'block';
                        }
                    });
            }




            const thumbnailContainers = document.querySelectorAll('.thumbnail-container');

            thumbnailContainers.forEach(thumbnailContainer => {
                const thumbnailUrls = JSON.parse(thumbnailContainer.getAttribute('data-thumbnails'));
                let currentIndex = 0;
                let intervalId;

                if (thumbnailUrls.length > 1) {
                    thumbnailContainer.addEventListener('mouseenter', function() {
                        intervalId = setInterval(function() {
                            thumbnailContainer.querySelector('img').src = thumbnailUrls[
                                currentIndex];
                            currentIndex = (currentIndex + 1) % thumbnailUrls.length;
                        }, 1000);
                    });

                    thumbnailContainer.addEventListener('mouseleave', function() {
                        clearInterval(intervalId);
                    });
                }
            });
        });
    </script>
@endsection