@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" />
    <style>
        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 {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 150px;
        }

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

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

        .folder-item a {
            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;
        }
    </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'))
                            <div class="col-6 text-end">


                                @if (request()->segment(2))
                                   
                                    <a href="{{ Request::url() }}/edit" class="btn bg-gradient-dark mb-0"><i
                                            class="fas fa-edit"></i>
                                        &nbsp;&nbsp;Edit
                                    </a>
                                @endif
                            </div>
                        @endif
                    </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>
                {{--   <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 }}">
                                    <a href="{{ route('folders.show', $folder->id) }}">
                                        <img src="/folder.png" alt="Folder" />
                                        <span>{{ $folder->name }}</span>
                                        @if ($folder->parent)
                <div class="parent-folder-name" style="font-style: italic;  color: #888;">
                    {{ $folder->parent->name }}
                </div>
            @endif
                                    </a>
                                </div>
                            @endforeach
                            @if (!str_contains(request()->path(), 'folders/search'))
                                {{-- @foreach ($videos as $video)
                                    @if ($video->file_type == 1)
                                        @php
                                            $thumbnailPath = str_replace('.mp4', '.jpg', $video->url);
                                            $thumbnailUrl = Storage::disk('s3_thumbnails')->url($thumbnailPath);
                                        @endphp
                                        <div class="video-item">
                                            <a href="{{ '/watch?id=' . $video->id }}">
                                                <img src="{{ $thumbnailUrl }}"
                                                    onerror="this.onerror=null; this.src='../assets/img/video-thumbnail-placeholder.png';"
                                                    alt="Video Thumbnail" />
                                                <span>{{ $video->title }}</span>
                                            </a>
                                        </div>
                                    @endif
                                    @if ($video->file_type == 2)
                                        <div class="video-item">
                                            <a href="{{ '/download-file?id=' . $video->id }}">
                                                <img src="../assets/img/document-thumbnail.png" alt="Document Thumbnail" />
                                                <span>{{ $video->title }}</span>
                                            </a>
                                        </div>
                                    @endif
                                @endforeach --}}
                            @endif
                        </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>

    <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 method="POST" action="{{ route('folders.createNew') }}">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <div class="form-group row">

                                <label for="folderName" class="col-md-4 col-form-label text-md-right">Folder Name</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>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="description" class="col-md-4 col-form-label text-md-right">Description</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>

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

                                <label for="tags" class="col-md-4 col-form-label text-md-right"
                                    style="display:block">Tags</label>
                                <div class="col-md-6">

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


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

                                </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>
        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: [',']
            });
        });

        document.getElementById("capture_datetime").addEventListener("change", function() {
            // Validate that the selected time is not in the future
            var selectedTime = new Date(this.value).getTime();
            var currentTime = new Date().getTime();

            if (selectedTime > currentTime) {
                alert("Please select a time that is not in the future.");
                this.value = "";
            }
        });
        document.addEventListener("DOMContentLoaded", function() {
            var currentDate = new Date();
            var currentYear = currentDate.getFullYear();
            var currentMonth = String(currentDate.getMonth() + 1).padStart(2, '0');
            var currentDay = String(currentDate.getDate()).padStart(2, '0');
            var currentHour = String(currentDate.getHours()).padStart(2, '0');
            var currentMinute = String(currentDate.getMinutes()).padStart(2, '0');

            var formattedDate = currentYear + '-' + currentMonth + '-' + currentDay + 'T' + currentHour + ':' +
                currentMinute;

            document.getElementById("capture_datetime").setAttribute("max", formattedDate);
        })



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