@extends($layout)

@section('styles')
    <link rel="stylesheet" href="../assets/css/magnific.css">

    <style>
        * {
            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: 13px;
        }

        .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;
            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-block;
            padding: 3px 15px !important;
            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;
        }
    </style>
@endsection
@section('content')
    <div class="container">
        <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">

                            <div class="col-md-6">
                                <div class="input-group input-group-sm pb-4">
                                    <input type="text" name="query" id="search" class="form-control form-control-md"
                                        placeholder="Search" minlength="3" value="{{ $query ?? '' }}">
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-primary mx-3 py-2"
                                            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">
                                            @foreach ($folders as $folder)
                                                <div class="folder-item" data-folder-id="{{ $folder->id }}">
                                                    <a href="#" class="folder-nav-pill"
                                                        data-folder-id="{{ $folder->id }}">

                                                        <span>{{ $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>
        @php
            $pathSegments = explode('/', request()->path());
            $isHomeSubpage = false;

            if (count($pathSegments) > 1 && $pathSegments[0] === 'home') {
                // Check if there's something after /home. Might change?
                $isHomeSubpage = count($pathSegments) > 1;
            }
        @endphp



        @if (strpos(request()->url(), '/home/search') === false)
            @if (!$isHomeSubpage)
                @if (auth()->user()->can('upload videos') &&
                        auth()->user()->can('upload documents'))
                    <div class="col-lg-4 col-md-6{{--  my-sm-auto --}} {{-- 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">
                                <li 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">
                                    <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>

                            </ul>


                        </div>
                    </div>
                @endif
            @endif
        @endif


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


                <div id="documentsPartial" style="display: none;">
                    @include('partials.documents', ['document' => $videos])
                </div>
            @endif
     
                <div id="folder_container">
                 
                </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>
        $(document).ready(function() {
            var currentPath = window.location.pathname;
            var folderId = currentPath.split('/').pop();

            if ($.isNumeric(folderId)) {
                loadFolderContent(folderId);
            }

            $('.folder-nav-pill').on('click', function(e) {
                e.preventDefault();

                var folderId = $(this).data('folder-id');
                loadFolderContent(folderId);
            });

            function loadFolderContent(folderId) {
                var newUrl = '/home/' + folderId;
                history.pushState(null, null, newUrl);

                $.ajax({
                    url: '/get-folder-content/' + folderId,
                    type: 'GET',
                    success: function(response) {
                        $('#folder_container').html(response);
                    },
                    error: function(xhr, status, error) {
                        console.error("Error occurred: " + error);
                    }
                });
            }
        });


        /* 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() {
            /* 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;

                        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="mfp-edit-button"><a class="btn btn-primary btn-sm mx-3 py-2" href="/file/edit/' +
                            videoId + '">Edit</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>
@endsection