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

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


        @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;
            overflow-x: hidden;
            align-items: center;
            /* padding: 10px 0; */
        }

        .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;
            margin-top: 5%;
            border-radius: 100px !important;
            background-color: #7286D3;
            color: white;
            text-align: center;
            text-decoration: none;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* max-width: 150px; */
        }

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

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

       

        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px !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-2">
                        <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"
                                                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 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
                                            {{-- <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>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('videos.index') }}">Home</a></li>
                @if (isset($breadcrumbs))
                    @foreach ($breadcrumbs as $breadcrumb)
                        @if ($loop->last)
                            <li class="breadcrumb-item active" aria-current="page">{{ $breadcrumb->name }}</li>
                        @else
                            <li class="breadcrumb-item"><a
                                    href="{{ route('home.allFilesInFolder', $breadcrumb->id) }}">{{ $breadcrumb->name }}</a>
                            </li>
                        @endif
                    @endforeach
                @endif
            </ol>
        </nav>

   

        <div class="list_container p-2 {{ count($videos) === 1 ? 'single-video' : '' }}">
            @include('partials.allFilesPartial', ['video' => $videos])


          

        </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 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>

    <script>
        /* function adjustFolderDisplay() {
                        const container = document.querySelector('.content-display.folder-display');
                        const folders = Array.from(container.querySelectorAll('.folder-item'));
                        const showMore = container.querySelector('.show-more');


                        let availableWidth = container.getBoundingClientRect().width - showMore.getBoundingClientRect().width;
                        let totalWidth = 0;
                        let foldersToShow = 0;


                        for (let folder of folders) {
                            let folderMargin = parseInt(window.getComputedStyle(folder).marginLeft) +
                                parseInt(window.getComputedStyle(folder).marginRight);
                            let folderWidth = folder.getBoundingClientRect().width + folderMargin;

                            if (totalWidth + folderWidth <= availableWidth) {
                                totalWidth += folderWidth;
                                foldersToShow++;
                            } else {
                                break;
                            }
                        }


                        folders.forEach((folder, index) => {
                            folder.style.display = index < foldersToShow ? '' : 'none';
                        });


                        showMore.style.display = folders.length > foldersToShow ? 'block' : 'none';
                    }


                    window.addEventListener('load', adjustFolderDisplay);
                    window.addEventListener('resize', adjustFolderDisplay); */


        


        $(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;

                        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">' +
                    '<a class="btn btn-primary btn-sm mx-3 py-2" href="/file/edit/' + videoId + '">Edit</a>' +
                    '<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);
                    }
                });
            });

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

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

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

                        var customContent = '<div class="mfp-figure" style="display:none;">' +
                            '<div class="mfp-close"></div>' +
                            '<img src="' + imageUrl +
                            '" width="500" height="auto" class="mfp-img">' +
                            '<div class="mfp-bottom-bar" style="display:none;">' +
                            '<div class="mfp-title">' + title + '</div>' +
                            '<div class="mfp-description">' + description + '</div>' +
                            '<div class="pt-2 mfp-button-group">' +
                            '<a class="btn btn-primary btn-sm mx-3 py-2" href="/file/edit/' +
                            imageId + '">Edit</a>' +
                            '<a class="btn btn-success btn-sm py-2" href="/images/' +
                            imageId + '/download">Download</a>' +
                            '</div>' +
                            '</div>' +
                            '</div>';

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