@extends($layout)


@section('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    {{-- <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.13.6/b-2.4.1/sl-1.7.0/datatables.min.css" /> --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">

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



    <link rel="stylesheet" href="{{ asset('assets/css/magnific.css') }}">

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

        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;
            gap: 20px;
            padding: 10px;
        }

        .folder-item,
        .video-item {
            position: relative;
            flex-grow: 1;
            flex-basis: calc(25% - 20px);
            max-width: calc(25% - 20px);
        }




        /* .thumbnail-container {
                                                    position: relative;
                                                    display: inline-block;
                                                } */
        .thumbnail-container {
            position: relative;
            display: inline-block;

            overflow: hidden;
            width: 90%;
        }

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

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




        .folder-item img {
            width: 140px;
            height: 150px;
            object-fit: contain;
        }

        .video-item img {

            height: 150px;
            object-fit: contain;
        }

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

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

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

        .cui-statusbar {
            display: none;
        }


        /* .mfp-content {
                                                                                                                                                    text-align: center;
                                                                                                                                                    max-width: 600px;
                                                                                                                                                    margin: 0 auto;
                                                                                                                                                }


                                                                                                                                                .video-popup-content iframe {
                                                                                                                                                    display: block;
                                                                                                                                                    margin: 0 auto;
                                                                                                                                                } */

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

        .selected {
            background-color: #cddee5;
        }
    </style>
@endsection
@section('content')
    <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-5">{{ isset($currentFolderMain->name) ? $currentFolderMain->name : '' }}
                            </h6>
                        </div>
                        @if (!str_contains(request()->path(), 'folders/search'))
                            @if ($canUploadFiles)
                                <div class="col-6 text-end">

                                    @if (empty(session('selected_folders')) && empty(session('selected_files')))
                                        @if (request()->path() !== 'folders')
                                            <button id="newButton" type="button" class="btn bg-gradient-dark mb-0"
                                                data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                                                    class="fas fa-plus"></i>
                                                &nbsp;&nbsp;New
                                            </button>
                                        @endif

                                        <div class="btn-group">
                                            <button id="publicAccessButton"
                                                class="btn btn-icon-only bg-gradient-dark mb-0 dropdown-toggle p-2"
                                                data-bs-toggle="dropdown" aria-expanded="false" title="Public Access">
                                                <i class="fas fa-users"></i>

                                            </button>
                                            <ul class="dropdown-menu bg-light mt-2">
                                                <li>
                                                    <a class="dropdown-item" href="javascript:void(0);"
                                                        onclick="toggleCheckboxesVisibilityEnablePublicAccess()"><b>Enable
                                                            Public Access</b></a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="javascript:void(0);"
                                                        onclick="toggleCheckboxesVisibilityDisablePublicAccess()"><b>Disable
                                                            Public Access</b></a>
                                                </li>
                                            </ul>
                                        </div>

                                        <button style="display: none;" id="enablePublicAccessConfirmButton"
                                            class="btn btn-icon-only bg-gradient-danger mb-0" data-bs-toggle="tooltip"
                                            data-bs-placement="bottom" title="Enable Public Access">
                                            <i class="fas fa-check"></i>
                                            &nbsp;&nbsp;
                                        </button>
                                        <button style="display: none;" id="disablePublicAccessConfirmButton"
                                            class="btn btn-icon-only bg-gradient-danger mb-0" data-bs-toggle="tooltip"
                                            data-bs-placement="bottom" title="Disable Public Access">
                                            <i class="fas fa-check"></i>
                                            &nbsp;&nbsp;
                                        </button>

                                        <button id="cancelButton" class="btn btn-icon-only bg-gradient-danger mb-0"
                                            data-bs-toggle="tooltip" data-bs-placement="bottom" title="Cancel"
                                            style="display: none;" onclick="refreshPage()">
                                            <i class="fas fa-times"></i>
                                            &nbsp;&nbsp;
                                        </button>
                                    @endif



                                    @if (request()->segment(2))
                                        @if (empty(session('selected_folders')) && empty(session('selected_files')))
                                            <a id="uploadFileButton" href="{{ Request::url() }}/upload"
                                                class="btn bg-gradient-dark mb-0" {{-- data-bs-toggle="modal" data-bs-target="#customModal" --}}><i
                                                    class="fas fa-plus"></i>
                                                &nbsp;&nbsp;Upload file
                                            </a>
                                            <a style="display: none;" id="shareButton" href="{{ Request::url() }}/share"
                                                class="btn bg-gradient-dark mb-0"><i class="fas fa-share"></i>
                                                &nbsp;&nbsp;Share
                                            </a>
                                            {{-- @if (!auth()->user()->hasRole('Standard User')) --}}
                                            <a id="editButton" href="{{ Request::url() }}/edit"
                                                class="btn btn-icon-only bg-gradient-dark mb-0" data-bs-toggle="tooltip"
                                                data-bs-placement="bottom" title="Edit"><i class="fas fa-edit"></i>
                                                &nbsp;&nbsp;
                                            </a>
                                            {{-- @endif --}}
                                        @endif
                                        @if (empty(session('selected_folders')) && empty(session('selected_files')))
                                        @endif
                                        @if (empty(session('selected_folders')) && empty(session('selected_files')))
                                            {{-- @if ($isOwner) --}}
                                            <button id="moveButton" class="btn btn-icon-only bg-gradient-dark mb-0"
                                                data-bs-toggle="tooltip" data-bs-placement="bottom" title="Move"
                                                onclick="toggleCheckboxesVisibility()">
                                                <i class="fas fa-cut"></i>
                                                &nbsp;&nbsp;
                                            </button>
                                            {{-- @endif --}}
                                        @endif
                                        @if (empty(session('selected_folders')) && empty(session('selected_files')))
                                            {{--  @if ($isOwner) --}}
                                            <button id="deleteButton" class="btn btn-icon-only bg-gradient-danger mb-0"
                                                data-bs-toggle="tooltip" data-bs-placement="bottom" title="Trash"
                                                onclick="toggleCheckboxesVisibilityTrash()">
                                                <i class="fas fa-trash"></i>
                                                &nbsp;&nbsp;
                                            </button>
                                            <button style="display: none;" id="deleteConfirmButton"
                                                class="btn btn-icon-only bg-gradient-danger mb-0" data-bs-toggle="tooltip"
                                                data-bs-placement="bottom" title="Confirm Delete">
                                                <i class="fas fa-check"></i>
                                                &nbsp;&nbsp;
                                            </button>

                                            <button id="cancelButton" class="btn btn-icon-only bg-gradient-danger mb-0"
                                                data-bs-toggle="tooltip" data-bs-placement="bottom" title="Cancel"
                                                style="display: none;" onclick="refreshPage()">
                                                <i class="fas fa-times"></i>
                                                &nbsp;&nbsp;
                                            </button>
                                            {{-- @endif --}}
                                        @endif

                                        {{-- <button id="pasteButton" class="btn bg-gradient-dark mb-0">
                                        <i class="fas fa-paste"></i>
                                        &nbsp;&nbsp;Paste
                                    </button> --}}
                                        {{-- @if (!empty(session('selected_folders')) || !empty(session('selected_folders')))
                                        <a href="/remove-all-items" class="btn bg-gradient-dark mb-0"
                                            onclick="toggleCheckboxesVisibility()">
                                            <i class="fas fa-cut"></i>
                                            &nbsp;&nbsp;Cancel
                                        </a>
                                    @endif --}}

                                        {{-- @if (empty(session('selected_folders')) && empty(session('selected_files')))
                                        <a id="deleteButton" class="btn btn-icon-only bg-gradient-danger mb-0"
                                            data-bs-toggle="modal" data-bs-target="#confirmDeleteModal"
                                            data-folder-id="{{ $currentFolderMain->id }}">
                                            <i class="fas fa-trash"></i>
                                       
                                        </a>
                                    @endif --}}
                                        <div id="cancel-button-container">

                                        </div>

                                        <div id="confirm-trash-button-container">

                                        </div>

                                        <div id="paste-button-container">

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

                <div class="modal fade" id="publicAccessConfirmationModal" tabindex="-1" role="dialog"
                    aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Public Access</h5>

                            </div>
                            <div class="modal-body">
                                Are you sure you want to give public access to the selected items?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>



                                <button type="submit" id="confirmPublicAccessBtn"
                                    class="btn btn-primary">Confirm</button>

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

                <div class="modal fade" id="disablePublicAccessConfirmationModal" tabindex="-1" role="dialog"
                    aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="confirmDeleteModalLabel">Disable Public Access</h5>

                            </div>
                            <div class="modal-body">
                                Are you sure you want to disable public access to the selected items?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>



                                <button type="submit" id="confirmDisablePublicAccessBtn"
                                    class="btn btn-primary">Confirm</button>

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

                <div class="modal fade" id="deleteConfirmationModal" tabindex="-1" role="dialog"
                    aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Deletion</h5>

                            </div>
                            <div class="modal-body">
                                Are you sure you want to delete the selected items?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>



                                <button type="submit" id="confirmDeleteBtn" class="btn btn-danger">Delete</button>

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

                <div class="modal" tabindex="-1" role="dialog" id="deleteConfirmationModal">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Confirm Deletion</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                Are you sure you want to delete the selected items?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 mb-3 px-4 float-right" style="">

                    <form method="POST" action="{{ route('folders.search.submit') }}">
                        @csrf

                        <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="clearfix"></div>


                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('folders.show') }}">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('folders.show', $breadcrumb->id) }}">{{ $breadcrumb->name }}</a>
                                    </li>
                                @endif
                            @endforeach
                        @endif
                    </ol>
                </nav>

                @if (session('success'))
                    <div id="successMessage"
                        class="toast align-items-center text-white bg-success border-0 position-fixed top-0 end-0 m-3"
                        role="alert" aria-live="assertive" aria-atomic="true">
                        <div class="d-flex">
                            <div class="toast-body text-dark">
                                Folder deleted successfully.
                            </div>
                            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                                aria-label="Close"></button>
                        </div>
                    </div>
                @endif

                <div id="toastContainer" class="position-fixed top-0 end-0 m-3" style="z-index: 9999;"></div>

                <div id="successToast"
                    class="toast align-items-center text-dark bg-success border-0 position-fixed top-0 end-0 m-3"
                    role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="d-flex">
                        <div class="toast-body" id="successToastBody">
                            <!-- This element will contain the success message -->
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                            aria-label="Close"></button>
                    </div>
                </div>


                {{--   <div class="px-12 fw-bold">
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close text-black" data-bs-dismiss="alert"
                                aria-label="Close">X</button>
                        </div>
                    @endif
                </div>

                <div class="px-12 fw-bold ">
                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close text-black" data-bs-dismiss="alert"
                                aria-label="Close">X</button>

                        </div>
                    @endif
                </div> --}}


                @if (optional($folders)->count() > 0 || optional($videos)->count() > 0)
                    <div class="table-responsive m-4 pt-2">
                        <div class="mb-3">

                        </div>
                        <div class="content-display">
                            @foreach ($folders as $folder)
                                <div class="folder-item" data-folder-id="{{ $folder->id }}">
                                    @if ($auth_user_id == $folder->user_id || $isAdmin)
                                        <div class="form-check">
                                            <input type="checkbox" class="item-checkbox form-check-input"
                                                style="display: none;" data-folder-id="{{ $folder->id }}" />
                                        </div>
                                    @endif
                                    <a href="{{ route('folders.show', $folder->id) }}">

                                        <img src="/folder.png" alt="Folder" />
                                        <span><b>{{ $folder->name }}</b>
                                            @if ($folder->is_public)
                                                <i class="fas fa-users"></i>
                                            @else
                                                <br>
                                            @endif
                                        </span>

                                    </a>
                                </div>
                            @endforeach
                            @foreach ($videos as $video)
                                @if ($video->file_type == 1)
                                    @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
                                    <div class="video-item">
                                        <div class="form-check">
                                            @if ($auth_user_id == $video->user_id || $isAdmin)
                                                <input type="checkbox" class="item-checkbox form-check-input"
                                                    style="display: none;" data-file-id="{{ $video->id }}" />
                                            @endif

                                        </div>
                                        <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>
                                                <div class="thumbnail-background"></div>


                                                <img class="thumbnail-image"
                                                    src="{{ Storage::disk('s3_thumbnails')->url($baseFilename . ($video->no_of_thumbnails > 1 ? '-0.jpg' : '.jpg')) }}"
                                                    onerror="this.onerror=null; this.src='{{ asset('assets/img/video-thumbnail-placeholder.png') }}';"
                                                    alt="Video Thumbnail" />
                                                <img class="play-button"
                                                    src="{{ asset('assets/img/transparent-play-button.png') }}"
                                                    alt="Play Button" />
                                            </div>
                                            <span><b>{{ $video->title }}</b></span>
                                            <p
                                                style="color: #5a5a5a;
                                                font-size: 14px!important;
                                                display: block;
                                                ">
                                                {{ $timeAgoText }}</p>
                                            @if ($video->is_public)
                                                <i class="fas fa-users"></i>
                                            @else
                                                <br>
                                            @endif

                                        </a>
                                    </div>
                                @endif
                                @if ($video->file_type == 2)
                                    @php
                                        $date = \Carbon\Carbon::parse($video->capture_datetime);
                                        $timeAgoText = $date->format('F j, Y');
                                        $thumbnailPath = $video->url;
                                        $thumbnailUrl = Storage::disk('s3_thumbnails')->url($thumbnailPath);
                                        $imageUrl = $video->signedUrl;

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

                                        $thumbnailUrlJpg = Storage::disk('s3_thumbnails')->url($thumbnailPathJpg);

                                        $isDocxFile = Str::endsWith($video->url, '.docx');
                                    @endphp
                                    @if (!$isDocxFile)
                                        <div class="video-item">
                                            <div class="form-check">
                                                @if ($auth_user_id == $video->user_id || $isAdmin)
                                                    <input type="checkbox" class="item-checkbox form-check-input"
                                                        style="display: none;" data-file-id="{{ $video->id }}" />
                                                @endif

                                            </div>

                                            <a>
                                                <div class="_df_custom" source="{{ $video->signedUrl }}"
                                                    tags="3d,images"><img src="{{ $thumbnailUrlJpg }}"
                                                        alt="Document Thumbnail" style="max-width: 100%;"
                                                        onerror="this.onerror=null; this.src='{{ asset('assets/img/document-thumbnail.png') }}';" /><span
                                                        style="color: #344767;"><b>{{ $video->title }}</b></span>

                                                    <p
                                                        style="color: #5a5a5a;
                                                            font-size: 14px!important;
                                                            display: block;
                                                            ">
                                                        {{ $timeAgoText }}</p>
                                                    @if ($video->is_public)
                                                        <i class="fas fa-users"></i>
                                                    @else
                                                        <br>
                                                    @endif
                                                </div><br />
                                            </a>
                                        </div>
                                    @elseif ($isDocxFile)
                                        <div class="video-item">
                                            <div class="form-check">
                                                <input type="checkbox" class="item-checkbox form-check-input"
                                                    style="display: none;" data-file-id="{{ $video->id }}" />
                                            </div>

                                            <a href="#" data-bs-toggle="modal" data-bs-target="#documentModal"
                                                onclick="loadDocument('{{ $video->signedUrl }}')">
                                                <div source="{{ $video->signedUrl }}" tags="3d,images"><img
                                                        src="{{ $thumbnailUrlJpg }}" alt="Document Thumbnail"
                                                        onerror="this.onerror=null; this.src='{{ asset('assets/img/document-thumbnail.png') }}';" /><span
                                                        style="color: #344767;"><b>{{ $video->title }}</b></span>

                                                    <p
                                                        style="color: #5a5a5a;
                                                        font-size: 14px!important;
                                                        display: block;
                                                        ">
                                                    </p>
                                                    @if ($video->is_public)
                                                        <i class="fas fa-users"></i>
                                                    @else
                                                        <br>
                                                    @endif
                                                </div><br />
                                            </a>

                                        </div>

                                        <div class="modal fade" id="documentModal" tabindex="-1"
                                            aria-labelledby="documentModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-fullscreen">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="documentModalLabel">Document Viewer
                                                        </h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <iframe id="docIframe" src="" width="100%"
                                                            height="100%" frameborder="0">
                                                            This is an embedded <a target="_blank"
                                                                href="http://office.com">Microsoft Office</a> document,
                                                            powered by <a target="_blank"
                                                                href="http://office.com/webapps">Office Online</a>.
                                                        </iframe>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <a href="{{ url('/media-person/videos/' . $video->id . '/downloadAllTypes/docx') }}"
                                                            class="btn btn-success mx-2">Download</a>
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Close</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endif
                                @if ($video->file_type == 3)
                                    @php
                                        $date = \Carbon\Carbon::parse($video->capture_datetime);
                                        $timeAgoText = $date->format('F j, Y');

                                        $thumbnailPath = $video->url;
                                        $thumbnailUrl = Storage::disk('s3_thumbnails')->url($thumbnailPath);

                                        $extensions = ['jpg', 'jpeg', 'png' /* , 'JPG', 'PNG', 'JPEG' */];
                                        $thumbnailUrlJpg = null;

                                        $thumbnailExtension = pathinfo($thumbnailPath, PATHINFO_EXTENSION);
                                        $thumbnailPathWithExt =
                                            pathinfo($thumbnailPath, PATHINFO_DIRNAME) .
                                            '/' .
                                            pathinfo($thumbnailPath, PATHINFO_FILENAME) .
                                            '.' .
                                            $thumbnailExtension;

                                        $thumbnailUrlJpg = Storage::disk('s3_thumbnails')->url($thumbnailPathWithExt);

                                        $imageUrl = $video->signedUrl;
                                    @endphp
                                    <div class="video-item">
                                        <div class="form-check">
                                            @if ($auth_user_id == $video->user_id || $isAdmin)
                                                <input type="checkbox" class="item-checkbox form-check-input"
                                                    style="display: none;" data-file-id="{{ $video->id }}" />
                                            @endif

                                        </div>
                                        <a href="javascript:void(0);" class="image-popup" data-id="{{ $video->id }}">
                                            <div class="thumbnail-container" data-id="{{ $video->id }}"
                                                style="background-image: url('{{ $thumbnailUrlJpg }}')">
                                                <div class="thumbnail-background"></div>


                                                <img class="thumbnail-image" src="{{ $thumbnailUrlJpg }}"
                                                    onerror="this.onerror=null; this.src='{{ asset('assets/img/video-thumbnail-placeholder.png') }}';"
                                                    alt="Video Thumbnail" />
                                                {{-- <img class="play-button"
                                                    src="{{ asset('assets/img/transparent-play-button.png') }}"
                                                    alt="Play Button" /> --}}
                                            </div>
                                            <span><b>{{ $video->title }}</b></span>
                                            <p
                                                style="color: #5a5a5a;
                                                font-size: 14px!important;
                                                display: block;
                                                ">
                                                {{ $timeAgoText }}</p>
                                            @if ($video->is_public)
                                                <i class="fas fa-users"></i>
                                            @else
                                                <br>
                                            @endif

                                        </a>
                                    </div>
                                @endif
                                @if ($video->file_type == 4)
                                    <div class="video-item">
                                        <div class="form-check">
                                            @if ($auth_user_id == $video->user_id || $isAdmin)
                                                <input type="checkbox" class="item-checkbox form-check-input"
                                                    style="display: none;" data-file-id="{{ $video->id }}" />
                                            @endif

                                        </div>

                                        <a href="#" data-bs-toggle="modal" data-bs-target="#textContentModal"
                                            onclick="fetchTextContent('{{ $video->signedUrl }}', '{{ addslashes($video->title) }}')">
                                            <div source="{{ $video->signedUrl }}" tags="3d,images"><img
                                                    src="{{ asset('assets/img/txt-file.png') }}"
                                                    alt="Document Thumbnail" /><span
                                                    style="color: #344767;"><b>{{ $video->title }}</b></span>

                                                <p
                                                    style="color: #5a5a5a;
                                                font-size: 14px!important;
                                                display: block;
                                                ">
                                                </p>
                                            </div><br />
                                        </a>

                                    </div>

                                    <div class="modal fade" id="textContentModal" tabindex="-1"
                                        aria-labelledby="textContentModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg modal-dialog-scrollable">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="textContentModalLabel"></h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body" id="modalTextContent">

                                                </div>
                                                <div class="modal-footer">
                                                    <a href="{{ url('/media-person/videos/' . $video->id . '/downloadAllTypes/txt') }}"
                                                        class="btn btn-success mx-2">Download</a>

                                                    <button type="button" class="btn btn-secondary"
                                                        data-bs-dismiss="modal">Close</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                {{--  @if ($video->file_type == 3)
                                        @php
                                            $thumbnailPath = $video->url;
                                            $thumbnailUrl = Storage::disk('s3_thumbnails')->url($thumbnailPath);
                                            $imageUrl = $video->signedUrl;
                                        @endphp
                                        <div class="video-item">
                                            <div class="form-check">
                                                <input type="checkbox" class="item-checkbox form-check-input"
                                                    style="display: none;" data-file-id="{{ $video->id }}" />
                                            </div>
                                            <a href="{{ $imageUrl }}" data-lightbox="video-gallery"
                                                data-title="{{ $video->title }}">

                                                <img src="{{ $thumbnailUrl }}"
                                                    onerror="this.onerror=null; this.src='../assets/img/video-thumbnail-placeholder.png';"
                                                    alt="Video Thumbnail" />
                                                <span><b>{{ $video->title }}<b/></span>
                                                <p style="color: #5a5a5a;
                                                font-size: 14px!important;
                                                display: block;
                                                "></p>
                                            </a>
                                        </div>
                                    @endif --}}
                            @endforeach
                        </div>
                        @if (!($folders->count() > 0 || $videos->count() > 0))
                            <p>No sub folders or files found.</p>
                        @endif

                        @if (!($folders->count() > 0 || $videos->count() > 0))
                            <p>No sub folders or files 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
        if (!isset($currentFolderMain)) {
            $currentFolderMain = null;
        }
    @endphp

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Create New Folder</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <form id="createNewFolderForm" method="POST" action="{{ route('folders.createNew') }}">
                    @csrf
                    <div class="modal-body" style="max-height: 90vh; overflow-y: auto;">
                        <div class="mb-3">
                            <div class="form-group row">

                                <label for="folderName" class="col-md-4 col-form-label text-md-right">Folder
                                    Name<sup>*</sup>
                                    <p style="font-weight: normal"> (Minimum 3 characters)</p>

                                </label>
                                <div class="col-md-6">

                                    <input type="hidden" name="currentFolder"
                                        value="{{ isset($currentFolderMain->id) ? $currentFolderMain->id : '' }}" />
                                    <input type="text" class="form-control" id="folderName" name="name" required>
                                    <span id="folderNameError" class="text-danger"></span>

                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="description"
                                    class="col-md-4 col-form-label text-md-right">Description<sup>*</sup>
                                    <p style="font-weight: normal"> (Minimum 5 words)</p>

                                </label>
                                <div class="col-md-6">
                                    <textarea id="description" class="form-control @error('description') is-invalid @enderror" name="description"
                                        required autocomplete="description" autofocus>{{ old('description') }}</textarea>
                                    <span id="descriptionError" class="text-danger"></span>

                                </div>
                            </div>
                            <div class="form-group row">

                                <label for="tags" class="col-md-4 col-form-label text-md-right"
                                    style="display:block">Tags<sup>*</sup>
                                    <p style="font-weight: normal"> (Minimum 1 tag)</p>
                                </label>
                                <div class="col-md-6">

                                    <select name="tags[]" id="tags" class="form-control select2"
                                        multiple="multiple" style="width: 100%;"></select>
                                    <span id="tagsError" class="text-danger"></span>
                                </div>
                            </div>


                            <div class="form-group row">
                                <label for="capture_datetime" class="col-md-4 col-form-label text-md-right">Date of
                                    Publishing<sup>*</sup></label>
                                <div class="col-md-6">
                                    <input id="capture_datetime" type="date"
                                        class="form-control @error('capture_datetime') is-invalid @enderror"
                                        name="capture_datetime" value="{{ old('capture_datetime') }}" required
                                        autocomplete="capture_datetime" autofocus>

                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="file_types"
                                    class="col-md-4 col-form-label text-md-right">{{ __('File types') }}<sup>*</sup></label>

                                <div class="col-md-6">

                                    {{-- <div class="form-check">
                                        <input id="videos" checked type="checkbox"
                                            class="form-check-input @error('videos') is-invalid @enderror" name="videos">
                                        <label for="videos" class="form-check-label">{{ __('Videos') }}</label>
                                    </div>


                                    <div class="form-check">
                                        <input id="documents" checked type="checkbox"
                                            class="form-check-input @error('documents') is-invalid @enderror"
                                            name="documents">
                                        <label for="documents" class="form-check-label">{{ __('Documents') }}</label>
                                    </div>

                                    <div class="form-check">
                                        <input id="images" checked type="checkbox"
                                            class="form-check-input @error('images') is-invalid @enderror" name="images">
                                        <label for="images" class="form-check-label">{{ __('Images') }}</label>
                                    </div> --}}
                                    <div class="form-check">
                                        <input id="videos" type="checkbox"
                                            class="form-check-input @error('videos') is-invalid @enderror" name="videos"
                                            @if ($currentFolderMain && $currentFolderMain->hasPermissionTo('upload videos')) checked @endif
                                            @if ($currentFolderMain) disabled @endif>
                                        @if ($currentFolderMain && $currentFolderMain->hasPermissionTo('upload videos'))
                                            <input type="hidden" name="videos" value="on">
                                        @endif
                                        <label for="videos" class="form-check-label">{{ __('Videos') }}</label>
                                    </div>

                                    <div class="form-check">
                                        <input id="documents" type="checkbox"
                                            class="form-check-input @error('documents') is-invalid @enderror"
                                            name="documents" @if ($currentFolderMain && $currentFolderMain->hasPermissionTo('upload documents')) checked @endif
                                            @if ($currentFolderMain) disabled @endif>
                                        @if ($currentFolderMain && $currentFolderMain->hasPermissionTo('upload documents'))
                                            <input type="hidden" name="documents" value="on">
                                        @endif
                                        <label for="documents" class="form-check-label">{{ __('Documents') }}</label>
                                    </div>

                                    <div class="form-check">
                                        <input id="images" type="checkbox"
                                            class="form-check-input @error('images') is-invalid @enderror" name="images"
                                            @if ($currentFolderMain && $currentFolderMain->hasPermissionTo('upload images')) checked @endif
                                            @if ($currentFolderMain) disabled @endif>
                                        @if ($currentFolderMain && $currentFolderMain->hasPermissionTo('upload images'))
                                            <input type="hidden" name="images" value="on">
                                        @endif
                                        <label for="images" class="form-check-label">{{ __('Images') }}</label>
                                    </div>






                                    <span id="fileTypeError" class="text-danger"></span>



                                    @error('videos')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    @error('documents')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Create Folder</button>
                    </div>
                </form>

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

    <div class="modal fade" id="customModal" tabindex="-1" aria-labelledby="customModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customModalLabel">Create New Folder</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>



                <div class="modal-body">
                    <div class="mb-3">
                        <div class="form-group row">
                            <label for="fileType" class="col-md-4 col-form-label text-md-right">File Type</label>
                            <div class="col-md-6">
                                <select class="form-control" id="fileType" name="fileType">
                                    <option value="document">Document</option>
                                    <option value="video">Video</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button id="submitBtn" type="submit" class="btn btn-primary">Submit</button>
                </div>

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


    <div class="context-menu" id="folderContextMenu">
        <ul>
            <li><a href="#" id="contextMenuShare">Share</a></li>
            <li><a href="#" id="contextMenuEdit">Edit</a></li>
        </ul>
    </div>

@endsection

@section('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

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


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

    <script defer>
        function loadDocument(url) {
            var encodedUrl = encodeURIComponent(url);
            var iframeSrc = 'https://view.officeapps.live.com/op/embed.aspx?src=' + encodedUrl;
            document.getElementById('docIframe').src = iframeSrc;
        }
    </script>

    <script>
        $(document).ready(function() {
            const userRoles = @json(auth()->user()->getRoleNames());
            if (userRoles.includes('Standard User')) {
                const editButton = document.getElementById('editButton');
                if (editButton) {
                    editButton.style.display = 'none';
                }
            }


            $('#deleteConfirmButton').on('click', function() {
                var selectedItems = [];


                console.log(selectedItems)
                document.querySelectorAll('.item-checkbox:checked').forEach(function(checkbox) {
                    var item = {
                        id: checkbox.dataset.folderId || checkbox.dataset.fileId,
                        type: checkbox.dataset.folderId ? 'folder' : 'file'
                    };
                    selectedItems.push(item);
                });

                /* alert(JSON.stringify({ items: selectedItems })) */
                if (selectedItems.length > 0) {
                    $('#deleteConfirmationModal').modal('show');

                    // Handle confirmation inside modal
                    $('#confirmDeleteBtn').on('click', function() {
                        $.ajax({
                            url: '{{ route('folders.delete-items') }}',
                            method: 'POST',
                            data: {
                                items: selectedItems,
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                location.reload();
                            },
                            error: function(error) {
                                alert("Something went wrong.")
                            }
                        });

                        // Close the modal after performing the action
                        $('#deleteConfirmationModal').modal('hide');
                    });


                    /* if (confirm('Are you sure you want to delete the selected items?')) {
                        $.ajax({
                            url: '{{ route('folders.delete-items') }}',
                            method: 'POST',
                            data: {
                                items: selectedItems,
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                location.reload();
                            },
                            error: function(error) {
                                alert("Something went wrong.")
                            }
                        });
                    } */
                } else {
                    alert('Please select items to delete.');
                }
            });
        });
    </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>
        // Check if selected_folders and selected_files sessions are not empty
        var selectedFolders = {!! json_encode(session('selected_folders')) !!};
        var selectedFiles = {!! json_encode(session('selected_files')) !!};

        if (selectedFolders || selectedFiles) {
            var cancelBtn = document.createElement("a");
            var pasteBtn = document.createElement("button");

            cancelBtn.href = "/remove-all-items";
            cancelBtn.className = "btn bg-gradient-dark mb-2";


            pasteBtn.className = "btn bg-gradient-dark mb-0";
            pasteBtn.id = "pasteButton";



            var icon = document.createElement("i");
            icon.className = "fas fa-ban";

            var pasteIcon = document.createElement("i");
            pasteIcon.className = "fas fa-paste";

            pasteBtn.appendChild(pasteIcon);
            pasteBtn.innerHTML += "&nbsp;&nbsp;Paste";

            cancelBtn.appendChild(icon);
            cancelBtn.innerHTML += "&nbsp;&nbsp;Cancel";

            var container = document.getElementById("cancel-button-container");
            container.appendChild(cancelBtn);
            var pasteContainer = document.getElementById("paste-button-container");
            pasteContainer.appendChild(pasteBtn);
        }
    </script>

    <script>
        function handlePasteButtonClick() {
            const targetFolderId = '{{ $currentFolderMain ? $currentFolderMain->id : null }}';

            fetch('/paste-items', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        targetFolderId: targetFolderId,
                    }),
                })
                .then(response => {
                    return response.json().then(data => {
                        return {
                            status: response.status,
                            body: data
                        };
                    });
                })
                .then(({
                    status,
                    body
                }) => {
                    //showToast(body.message, status === 200 ? 'success' : 'error');
                    if (status === 200) {
                        sessionStorage.setItem('pasteSuccess', body.message);
                        location.reload();
                    } else {
                        showToast(body.message, 'error');
                    }
                })
                .catch(error => {
                    showToast('An unexpected error occurred.', 'error');
                    console.error('Error pasting items:', error);
                });
        }

        const pasteButton = document.getElementById('pasteButton');
        if (pasteButton) {
            pasteButton.addEventListener('click', function() {
                handlePasteButtonClick();
            });
        }
    </script>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        const message = sessionStorage.getItem('pasteSuccess');
        if (message) {
            showToast(message, 'success');
            sessionStorage.removeItem('pasteSuccess');
        }
    });
</script>
<script>
    function showToast(message, type = 'success') {
        const toastId = 'toast-' + Date.now();
        const isError = type === 'error';
        const bgColor = isError ? '' : 'bg-success';
        const customStyle = isError ? 'background-color: #CD5656; color: white;' : '';
        const textColorClass = isError ? 'text-white' : 'text-dark';
        const toastHTML = `
        <div id="${toastId}" class="toast align-items-center ${bgColor} border-0 position-fixed top-0 end-0 m-3"
            role="alert" aria-live="assertive" aria-atomic="true" style="${customStyle}">
            <div class="d-flex">
                <div class="toast-body ${textColorClass}">
                    ${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    `;
        let container = document.getElementById('toastContainer');
        if (!container) {
            container = document.createElement('div');
            container.id = 'toastContainer';
            document.body.appendChild(container);
        }
        container.insertAdjacentHTML('beforeend', toastHTML);
        const toastElement = new bootstrap.Toast(document.getElementById(toastId));
        toastElement.show();
    }
</script>


    <script>
        // Function to toggle the visibility of checkboxes
        function toggleCheckboxesVisibility() {
            const checkboxes = document.querySelectorAll('.item-checkbox');
            var moveButton = document.getElementById('moveButton');
            var newButton = document.getElementById('newButton');
            var uploadFileButton = document.getElementById('uploadFileButton');
            var shareButton = document.getElementById('shareButton');
            var deleteButton = document.getElementById('deleteButton');
            var editButton = document.getElementById('editButton');
            var publicAccessButton = document.getElementById('publicAccessButton');




            if (moveButton) {
                moveButton.style.display = 'none';
            }
            if (newButton) {
                newButton.style.display = 'none';
            }
            uploadFileButton.style.display = 'none';
            shareButton.style.display = 'none';
            if (deleteButton) {
                deleteButton.style.display = 'none';
            }
            if (publicAccessButton) {
                publicAccessButton.style.display = 'none';
            }
            editButton.style.display = 'none';





            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    handleCheckboxChange(checkbox);
                });
                checkbox.style.display = checkbox.style.display === 'none' ? 'block' : 'none';
            });
            var cancelBtn = document.createElement("a");
            cancelBtn.href = "/remove-all-items";
            cancelBtn.className = "btn bg-gradient-dark mb-0";


            var icon = document.createElement("i");
            icon.className = "fas fa-ban";

            cancelBtn.appendChild(icon);
            cancelBtn.innerHTML += "&nbsp;&nbsp;Cancel";

            var container = document.getElementById("cancel-button-container");
            container.innerHTML = '';
            container.appendChild(cancelBtn);
        }

        // Function to handle checkbox changes (check/uncheck)
        function handleCheckboxChange(checkbox) {
            const selectedCheckboxes = document.querySelectorAll('.item-checkbox:checked');
            const selectedFolderIds = Array.from(selectedCheckboxes).filter(checkbox => !checkbox.hasAttribute(
                'data-file-id')).map(folderCheckbox => folderCheckbox.getAttribute('data-folder-id'));
            const selectedFileIds = Array.from(selectedCheckboxes).filter(checkbox => checkbox.hasAttribute('data-file-id'))
                .map(fileCheckbox => fileCheckbox.getAttribute('data-file-id'));

            const folders = document.querySelectorAll('.folder-item');
            folders.forEach(folder => {
                const folderId = folder.getAttribute('data-folder-id');
                folder.classList.remove('selected');
                if (selectedFolderIds.includes(folderId)) {
                    folder.classList.add('selected');
                }
            });

            // Change background color for selected files
            /* const videos = document.querySelectorAll('.video-item');
            videos.forEach(video => {
                const videoId = video.querySelector('.item-checkbox').getAttribute('data-file-id');
                video.classList.remove('selected');
                if (selectedFileIds.includes(videoId)) {
                    video.classList.add('selected');
                }
            }); */


            fetch('/save-selected-items', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        folderIds: selectedFolderIds,
                        fileIds: selectedFileIds
                    }),
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Items saved successfully!', data);
                })
                .catch(error => {
                    console.error('Error saving items:', error);
                });

            // Handle unchecked checkboxes
            checkboxes.forEach(checkbox => {
                if (!checkbox.checked) {
                    if (checkbox.hasAttribute('data-folder-id')) {
                        const folderId = checkbox.getAttribute('data-folder-id');
                        // Remove folder ID from Laravel session
                        fetch('/remove-selected-item/' + folderId + '/folder', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                },
                            })
                            .then(response => response.json())
                            .then(data => {
                                console.log('Folder removed successfully!', data);
                            })
                            .catch(error => {
                                console.error('Error removing folder:', error);
                            });
                    } else if (checkbox.hasAttribute('data-file-id')) {
                        const fileId = checkbox.getAttribute('data-file-id');

                        fetch('/remove-selected-item/' + fileId + '/file', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                },
                            })
                            .then(response => response.json())
                            .then(data => {
                                console.log('File removed successfully!', data);
                            })
                            .catch(error => {
                                console.error('Error removing file:', error);
                            });
                    }
                }
            });
        }

        function refreshPage() {
            location.reload();
        }

        function fetchTextContent(url, title) {
            document.getElementById('textContentModalLabel').innerText = title;
            fetch(url)
                .then(response => response.text())
                .then(data => {
                    document.getElementById('modalTextContent').innerText = data;
                })
                .catch(error => console.error('Error fetching text file:', error));
        }


        // Function to toggle the visibility of checkboxes for trash
        function toggleCheckboxesVisibilityTrash() {
            const checkboxes = document.querySelectorAll('.item-checkbox');
            var moveButton = document.getElementById('moveButton');
            var newButton = document.getElementById('newButton');
            var uploadFileButton = document.getElementById('uploadFileButton');
            var shareButton = document.getElementById('shareButton');
            var deleteButton = document.getElementById('deleteButton');
            var editButton = document.getElementById('editButton');

            var deleteButton = document.getElementById("deleteButton");
            var deleteConfirmButton = document.getElementById("deleteConfirmButton");
            var cancelButton = document.getElementById("cancelButton");
            var publicAccessButton = document.getElementById('publicAccessButton');



            // Toggle visibility
            if (deleteButton) {
                deleteButton.style.display = 'none';
            }
            if (publicAccessButton) {
                publicAccessButton.style.display = 'none';
            }
            deleteConfirmButton.style.display = "inline-block";
            cancelButton.style.display = "inline-block";





            if (moveButton) {
                moveButton.style.display = 'none';
            }
            if (newButton) {
                newButton.style.display = 'none';
            }
            uploadFileButton.style.display = 'none';
            shareButton.style.display = 'none';
            //deleteButton.style.display = 'none';
            editButton.style.display = 'none';





            checkboxes.forEach(checkbox => {
                /* checkbox.addEventListener('change', function() {
                    handleCheckboxChange(checkbox);
                }); */
                checkbox.style.display = checkbox.style.display === 'none' ? 'block' : 'none';
            });
            var cancelBtn = document.createElement("a");
            cancelBtn.href = "/remove-all-items";
            cancelBtn.className = "btn bg-gradient-dark mb-0";


            var icon = document.createElement("i");
            icon.className = "fas fa-ban";

            cancelBtn.appendChild(icon);
            cancelBtn.innerHTML += "&nbsp;&nbsp;Cancel";

            /* var container = document.getElementById("cancel-button-container");
            container.innerHTML = '';
            container.appendChild(cancelBtn);

            var confirmTrashBtn = document.createElement("a");
            
            confirmTrashBtn.className = "btn bg-gradient-danger mb-0";


            var confirmTrashicon = document.createElement("i");
            confirmTrashicon.className = "fas fa-check";

            confirmTrashBtn.appendChild(confirmTrashicon);
            confirmTrashBtn.innerHTML += "&nbsp;&nbsp;Delete";

            var confirmTrashBtncontainer = document.getElementById("confirm-trash-button-container");
            confirmTrashBtncontainer.innerHTML = '';
            confirmTrashBtn.id = "confirmTrashBtn";
            confirmTrashBtncontainer.appendChild(confirmTrashBtn); */
        }
    </script>



    <script>
        /*  $(document).ready(function() {
                                                                                                                                                    $('.video-popup').on('click', function(e) {
                                                                                                                                                        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 customContent = '<div class="video-popup-content">' +
                                                                                                                                                                                     '<h3>' + title + '</h3>' +
                                                                                                                                                                                     '<p>' + description + '</p>' +
                                                                                                                                                                                     '<iframe src="' + videoUrl + '" width="500" height="280" frameborder="0" allowfullscreen></iframe>' +
                                                                                                                                                                                     '</div>';

                                                                                                                                                                $.magnificPopup.open({
                                                                                                                                                                    items: {
                                                                                                                                                                        src: customContent,
                                                                                                                                                                        type: 'inline'
                                                                                                                                                                    },
                                                                                                                                                                    closeBtnInside: true
                                                                                                                                                                });
                                                                                                                                                            },
                                                                                                                                                            error: function(error) {
                                                                                                                                                                console.error('Error fetching video:', error);
                                                                                                                                                            }
                                                                                                                                                        });
                                                                                                                                                    });
                                                                                                                                                }); */

        $(document).ready(function() {
            $('.video-popup').on('click', function(e) {
                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;
                        console.log('Received response:', response);
                        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>';



                        /* 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);
                        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>' +
                            '<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">';

                        if (!isStandardUser) {
                            customContent +=
                                '<a class="btn btn-primary btn-sm mx-3 py-2" href="/file/edit/' +
                                imageId + '">Edit</a>';
                        }

                        customContent +=
                            '<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);
                    }
                });
            });
        });





        $(document).ready(function() {


            $('#confirmDeleteModal').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var folderId = button.data('folder-id');
                var modal = $(this);
                modal.find('#folderIdToDelete').text(folderId);
                modal.find('#folderIdInput').val(folderId);
            });


            $("#createNewFolderForm").submit(function(event) {
                var isValid = true;


                $('#folderNameError, #descriptionError, #tagsError').text('');

                var title = $("#folderName").val();
                var description = $("#description").val();
                var tags = $('#tags').select2('data');
                var folderNamePattern = /^[a-zA-Z0-9 _-]+$/;
                var isVideoChecked = $('#videos').is(':checked');
                var isDocumentChecked = $('#documents').is(':checked');
                var isImageChecked = $('#images').is(':checked');


                if (title.length < 3) {
                    $("#folderNameError").text("Name should be at least 3 characters long.");
                    isValid = false;
                }


                if (!folderNamePattern.test(title)) {
                    $("#folderNameError").text(
                        "Only alphanumeric characters, underscores, hyphens, and spaces.");
                    isValid = false;
                }


                if (description.split(" ").filter(function(n) {
                        return n != ''
                    }).length < 5) {
                    $("#descriptionError").text("Description should have at least 5 words.");
                    isValid = false;
                }


                if (tags.length < 1) {
                    $("#tagsError").text("Please select at least 1 tag.");
                    isValid = false;
                }

                if (!isVideoChecked && !isDocumentChecked && !isImageChecked) {
                    $("#fileTypeError").text("Please select at least one file type.");
                    isValid = false;
                }

                if (!isValid) {
                    event.preventDefault();
                }
            });
        });
    </script>
    <script>
        document.getElementById('submitBtn').addEventListener('click', function() {
            var selectedType = document.getElementById('fileType').value;
            var baseUrl = window.location.href;

            if (!baseUrl.endsWith('/')) {
                baseUrl += '/';
            }

            if (selectedType == 'document') {
                window.location.href = baseUrl + 'upload-files';
            } else if (selectedType == 'video') {
                window.location.href = baseUrl + 'upload';
            }
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#tags').select2({
                tags: true,
                tokenSeparators: [',']
            }).on("select2:selecting", function(e) {
                var tag = e.params.args.data.text;


                if (tag.length < 4) {

                    e.preventDefault();

                    $("#tagsError").text("Each tag should be at least 4 characters long.");
                } else {

                    $("#tagsError").text('');
                }
            });
        });

        $(document).ready(function() {
            var today = new Date().toISOString().split('T')[0];
            $('#capture_datetime').attr('max', today);
        });

        $(document).ready(function() {
            var successMessage = document.getElementById('successMessage');

            if (successMessage) {
                var toast = new bootstrap.Toast(successMessage);
                toast.show();
            }
            if (performance.navigation.type === performance.navigation.TYPE_BACK_FORWARD) {
                var toast = new bootstrap.Toast(successMessage);
                toast.hide();
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            var successfulUploadMessage = sessionStorage.getItem('successfulUploadMessage');

            if (successfulUploadMessage) {
                var successToastBody = document.getElementById('successToastBody');
                successToastBody.textContent = successfulUploadMessage;

                var successToast = new bootstrap.Toast(document.getElementById('successToast'));
                successToast.show();

                sessionStorage.removeItem('successfulUploadMessage');
            }
        });

        function toggleCheckboxesVisibilityEnablePublicAccess() {
            const checkboxes = document.querySelectorAll('.item-checkbox');
            var moveButton = document.getElementById('moveButton');
            var newButton = document.getElementById('newButton');
            var uploadFileButton = document.getElementById('uploadFileButton');
            var shareButton = document.getElementById('shareButton');
            var deleteButton = document.getElementById('deleteButton');
            var editButton = document.getElementById('editButton');

            var deleteButton = document.getElementById("deleteButton");
            var deleteConfirmButton = document.getElementById("deleteConfirmButton");
            var cancelButton = document.getElementById("cancelButton");
            var publicAccessButton = document.getElementById('publicAccessButton');

            var enablePublicAccessConfirmButton = document.getElementById("enablePublicAccessConfirmButton");



            // Toggle visibility
            if (deleteButton) {
                deleteButton.style.display = 'none';
            }
            enablePublicAccessConfirmButton.style.display = "inline-block";
            cancelButton.style.display = "inline-block";





            if (moveButton) {
                moveButton.style.display = 'none';
            }
            if (newButton) {
                newButton.style.display = 'none';
            }
            if (uploadFileButton) {
                uploadFileButton.style.display = 'none';
            }
            if (shareButton) {
                shareButton.style.display = 'none';
            }
            //deleteButton.style.display = 'none';
            if (editButton) {
                editButton.style.display = 'none';
            }
            publicAccessButton.style.display = 'none';






            checkboxes.forEach(checkbox => {

                checkbox.style.display = checkbox.style.display === 'none' ? 'block' : 'none';
            });
            var cancelBtn = document.createElement("a");
            cancelBtn.href = "/remove-all-items";
            cancelBtn.className = "btn bg-gradient-dark mb-0";


            var icon = document.createElement("i");
            icon.className = "fas fa-ban";

            cancelBtn.appendChild(icon);
            cancelBtn.innerHTML += "&nbsp;&nbsp;Cancel";


        }

        function toggleCheckboxesVisibilityDisablePublicAccess() {
            const checkboxes = document.querySelectorAll('.item-checkbox');
            var moveButton = document.getElementById('moveButton');
            var newButton = document.getElementById('newButton');
            var uploadFileButton = document.getElementById('uploadFileButton');
            var shareButton = document.getElementById('shareButton');
            var deleteButton = document.getElementById('deleteButton');
            var editButton = document.getElementById('editButton');

            var deleteButton = document.getElementById("deleteButton");
            var deleteConfirmButton = document.getElementById("deleteConfirmButton");
            var cancelButton = document.getElementById("cancelButton");
            var publicAccessButton = document.getElementById('publicAccessButton');

            var disablePublicAccessConfirmButton = document.getElementById("disablePublicAccessConfirmButton");



            // Toggle visibility
            if (deleteButton) {
                deleteButton.style.display = 'none';
            }
            disablePublicAccessConfirmButton.style.display = "inline-block";
            cancelButton.style.display = "inline-block";





            if (moveButton) {
                moveButton.style.display = 'none';
            }
            if (newButton) {
                newButton.style.display = 'none';
            }
            if (uploadFileButton) {
                uploadFileButton.style.display = 'none';
            }
            if (shareButton) {
                shareButton.style.display = 'none';
            }
            //deleteButton.style.display = 'none';
            if (editButton) {
                editButton.style.display = 'none';
            }
            publicAccessButton.style.display = 'none';






            checkboxes.forEach(checkbox => {

                checkbox.style.display = checkbox.style.display === 'none' ? 'block' : 'none';
            });
            var cancelBtn = document.createElement("a");
            cancelBtn.href = "/remove-all-items";
            cancelBtn.className = "btn bg-gradient-dark mb-0";


            var icon = document.createElement("i");
            icon.className = "fas fa-ban";

            cancelBtn.appendChild(icon);
            cancelBtn.innerHTML += "&nbsp;&nbsp;Cancel";


        }

        $('#enablePublicAccessConfirmButton').on('click', function() {
            var selectedItems = [];


            console.log(selectedItems)
            document.querySelectorAll('.item-checkbox:checked').forEach(function(checkbox) {
                var item = {
                    id: checkbox.dataset.folderId || checkbox.dataset.fileId,
                    type: checkbox.dataset.folderId ? 'folder' : 'file'
                };
                selectedItems.push(item);
            });

            /* alert(JSON.stringify({ items: selectedItems })) */
            if (selectedItems.length > 0) {
                $('#publicAccessConfirmationModal').modal('show');

                // Handle confirmation inside modal
                $('#confirmPublicAccessBtn').on('click', function() {
                    $.ajax({
                        url: '{{ route('publicAcess.enable') }}',
                        method: 'POST',
                        data: {
                            items: selectedItems,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            location.reload();
                            //console.log(response)
                        },
                        error: function(error) {
                            alert("Something went wrong.")
                        }
                    });

                    $('#publicAccessConfirmationModal').modal('hide');
                });
            } else {
                alert('Please select items to share.');
            }
        });

        $('#disablePublicAccessConfirmButton').on('click', function() {
            var selectedItems = [];


            console.log(selectedItems)
            document.querySelectorAll('.item-checkbox:checked').forEach(function(checkbox) {
                var item = {
                    id: checkbox.dataset.folderId || checkbox.dataset.fileId,
                    type: checkbox.dataset.folderId ? 'folder' : 'file'
                };
                selectedItems.push(item);
            });

            /* alert(JSON.stringify({ items: selectedItems })) */
            if (selectedItems.length > 0) {
                $('#disablePublicAccessConfirmationModal').modal('show');

                // Handle confirmation inside modal
                $('#confirmDisablePublicAccessBtn').on('click', function() {
                    $.ajax({
                        url: '{{ route('publicAcess.disable') }}',
                        method: 'POST',
                        data: {
                            items: selectedItems,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            location.reload();
                        },
                        error: function(error) {
                            alert("Something went wrong.")
                        }
                    });

                    $('#disablePublicAccessConfirmationModal').modal('hide');
                });
            } else {
                alert('Please select items to disable.');
            }
        });




        /* document.addEventListener('DOMContentLoaded', function() {
            var contextMenu = document.getElementById('folderContextMenu');

            document.querySelectorAll('.folder-item').forEach(function(folderItem) {
                folderItem.addEventListener('contextmenu', function(event) {
                    event.preventDefault();

                    var menuWidth = contextMenu.offsetWidth;
                    var windowWidth = window.innerWidth;

                
                    var clickX = event.clientX - (menuWidth *
                    0.1); 
                    var clickY = event.clientY;

                  
                    if (clickX < 0) {
                        clickX = 0;
                    } else if (clickX + menuWidth > windowWidth) {
                        clickX = windowWidth - menuWidth;
                    }

                  
                    contextMenu.style.left = clickX + 'px';
                    contextMenu.style.top = clickY + 'px';
                    contextMenu.style.display = 'block';

                  
                    var folderId = this.dataset.folderId;
                    document.getElementById('contextMenuShare').href = `/folders/${folderId}/share`;
                    document.getElementById('contextMenuEdit').href = `/folders/${folderId}/edit`;
                });
            });

          
            document.addEventListener('click', function() {
                contextMenu.style.display = 'none';
            });
        }); */
    </script>
    {{--  <script>
        document.addEventListener('DOMContentLoaded', function() {
            attachSearchEventListener();
        });
        document.getElementById('searchButton').addEventListener('click', function() {
            const query = document.getElementById('folderSearch').value;

            if (query.length > 2) {
                window.history.pushState({
                    query
                }, '', `/folders/search/${query}`);
                fetchSearchResults(query);
            }
        });

        function fetchSearchResults(query) {
            fetch(`/folders/search/${query}`)
                .then(response => {
                    if (response.ok) {
                        return response.text();
                    }
                    throw new Error('Network response was not ok');
                })
                .then(html => {
                    document.body.innerHTML = html;
                    attachSearchEventListener();
                })
                .catch(err => {
                    console.warn(err);
                    alert('Failed to fetch search results. Please try again later.');
                });
        }

        function attachSearchEventListener() {
            document.getElementById('searchButton').addEventListener('click', function() {
                const query = document.getElementById('folderSearch').value;
                if (query.length > 2) {
                    window.history.pushState({
                        query
                    }, '', `/folders/search/${query}`);
                    fetchSearchResults(query);
                }
            });
        }

        window.addEventListener('popstate', function(e) {
            if (e.state && e.state.query) {
                document.getElementById('folderSearch').value = e.state.query;
                fetchSearchResults(e.state.query);
            }
        });
    </script> --}}
@endsection