@extends('admin.admin_master')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/folder-management.css') }}">
@endpush

@section('admin')
<div class="page-content">
    <div class="container-fluid">

        <!-- Enhanced Success Alert -->
        @if(session('message'))
            <div class="alert alert-success alert-dismissible fade show shadow-sm border-0" role="alert">
                <div class="d-flex align-items-center">
                    <div class="avatar-xs me-3">
                        <div class="avatar-title bg-success text-white rounded-circle">
                            <i class="ri-check-line font-size-16"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <h6 class="alert-heading mb-1 font-size-15">Success!</h6>
                        <div class="font-size-13">{{ session('message') }}</div> </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show shadow-sm border-0" role="alert" id="pageErrorMsg">
                <div class="d-flex align-items-center">
                    <div class="avatar-xs me-3">
                        <div class="avatar-title bg-primary-subtle text-primary rounded-circle">
     
                            <i class="ri-error-warning-line font-size-16"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <h6 class="alert-heading mb-1 font-size-15">Error!</h6>
                        <ul class="mb-0 font-size-13">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
            <script>
                setTimeout(function() {
                    var errMsg = document.getElementById('pageErrorMsg');
                    if (errMsg) {
                        errMsg.style.display = 'none';
                    }
                }, 4000);
            </script>
        @endif

        <!-- Enhanced Page Header with Navigation -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="page-header-card" style="background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%); border: 2px solid #e3f2fd; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 102, 204, 0.1);">
                    <div class="page-header-content" style="padding: 20px;">
                        <div class="d-flex align-items-center justify-content-between">
                            <!-- Left side: Page Icon & Title with Breadcrumb -->
                            <div class="d-flex align-items-center">
                                <!-- Page Icon -->
                                
                                <div class="page-icon me-3">
                                    <div class="avatar-md">
                                        <div class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                            <i class="ri-folder-shared-line font-size-24"></i>
                                        </div>
                                    </div>
                                </div>

                                
                                <!-- Page Title & Breadcrumb -->
                                <div class="flex-grow-1">
                                    <h4 class="page-title mb-1">My Folders</h4>
                                    <!-- Breadcrumb Navigation -->
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb mb-0" id="myFolderBreadcrumb">
                                            <li class="breadcrumb-item">
                                                <i class="ri-folder-shared-line me-1"></i>Shared with Me
                                            </li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

       <!-- View Toggle (Grid only) -->
        <div class="row mb-3">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-secondary btn-sm initially-hidden" onclick="navigateMyBack()" id="myBackBtn">
                            <i class="ri-arrow-left-line me-1"></i> Back
                        </button>
                        @can('Create My Folder')
                        <button type="button" class="btn btn-primary btn-sm initially-hidden" onclick="showAddFolderModal()" id="myAddFolderBtn" data-bs-toggle="tooltip" title="Add New Subfolder">
                            <i class="ri-folder-add-line font-size-12 me-1"></i>Add Folder
                        </button>
                        @endcan
                        @can('Upload My Files')
                        <button type="button" class="btn btn-success btn-sm initially-hidden" onclick="showAddFileModal()" id="myAddFileBtn" data-bs-toggle="tooltip" title="Upload New File">
                            <i class="ri-file-add-line font-size-12 me-1"></i>Add File
                        </button>
                        @endcan
                    </div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="location.reload()" data-bs-toggle="tooltip" title="Refresh Folders">
                            <i class="ri-refresh-line font-size-12"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Search and Filter Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm border-0 search-filter-card">
                    <div class="card-body p-3">
                        <div class="row g-3 align-items-center">
                            <!-- Search Input -->
                            <div class="col-md-4">
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0">
                                        <i class="ri-search-line text-muted"></i>
                                    </span>
                                    <input type="text" 
                                           class="form-control border-start-0" 
                                           id="folderSearchInput" 
                                           placeholder="Search folders and files..." 
                                           onkeyup="searchFolders()">
                                    <button class="btn btn-outline-secondary initially-hidden" type="button" onclick="clearMySearch()" id="myClearSearchBtn">
                                        <i class="ri-close-line"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <!-- Filter Options -->
                            <div class="col-md-5">
                                <select class="form-select" id="folderSortFilter" onchange="applyFilters()">
                                    <option value="name-asc">Name (A-Z)</option>
                                    <option value="name-desc">Name (Z-A)</option>
                                    <option value="date-newest">Newest First</option>
                                    <option value="date-oldest">Oldest First</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- My Folders Card -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-4">
                        <!-- Grid View for Root Level -->
                        <div id="myGridView" class="folder-grid-container">
                            @if($folders->count() > 0)
                                <div class="row g-3">
                                    @foreach($folders as $folder)
                                        <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                            <div class="folder-grid-item" onclick="openMyFolder({{ $folder->id }}, '{{ addslashes($folder->name) }}')" ondblclick="openMyFolder({{ $folder->id }}, '{{ addslashes($folder->name) }}')">
                                                <!-- Folder Icon -->
                                                <div class="text-center">
                                                    <i class="ri-folder-open-fill folder-icon-shared"></i>
                                                </div>
                                                
                                                <!-- Folder Details -->
                                                <div class="folder-name text-center">{{ $folder->name }}</div>
                                                <div class="folder-info text-center">
                                                    @if($folder->children_count > 0)
                                                        {{ $folder->children_count }} {{ $folder->children_count == 1 ? 'item' : 'items' }}
                                                    @else
                                                        Empty folder
                                                    @endif
                                                </div>
                                                
                                                <!-- Three Dots Menu -->
                                                @if($folder->parent_id)
                                                <div class="folder-actions">
                                                    <div class="dropdown">
                                                        <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false" onclick="event.stopPropagation();">
                                                            <i class="ri-more-2-fill"></i>
                                                        </button>
                                                        <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                                            <li>
                                                                <a class="dropdown-item" href="#" onclick="openMyFolder({{ $folder->id }}, '{{ addslashes($folder->name) }}'); event.stopPropagation();">
                                                                    <i class="ri-folder-open-line me-2 text-primary"></i>
                                                                    Open Folder
                                                                </a>
                                                            </li>
                                                            @can('Edit My Folder')
                                                            <li>
                                                                <a class="dropdown-item" href="#" onclick="showRenameFolderModal({{ $folder->id }}, '{{ addslashes($folder->name) }}'); event.stopPropagation();">
                                                                    <i class="ri-edit-line me-2 text-info"></i>
                                                                    Rename Folder
                                                                </a>
                                                            </li>
                                                            @endcan
                                                            @can('View My Folder Info')
                                                            <li>
                                                                <a class="dropdown-item" href="#" onclick="viewFolderInfo({{ $folder->id }}); event.stopPropagation();">
                                                                    <i class="ri-information-line me-2 text-info"></i>
                                                                    Folder Info
                                                                </a>
                                                            </li>
                                                            @endcan
                                                            <li><hr class="dropdown-divider"></li>
                                                            @can('Share My Folder')
                                                            <li>
                                                                <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#shareFolderModal" onclick="openShareModal({{ $folder->id }}, '{{ addslashes($folder->name) }}'); event.stopPropagation(); return false;">
                                                                    <i class="ri-share-line me-2 text-warning"></i>
                                                                    Share Folder
                                                                </a>
                                                            </li>
                                                            @endcan
                                                            @can('Delete My Folder')
                                                            <li>
                                                                <a class="dropdown-item text-danger" href="javascript:void(0);" onclick="deleteFolder({{ $folder->id }}, '{{ addslashes($folder->name) }}'); event.stopPropagation(); return false;">
                                                                    <i class="ri-delete-bin-line me-2"></i>
                                                                    Delete Folder
                                                                </a>
                                                            </li>
                                                            @endcan
                                                        </ul>
                                                    </div>
                                                </div>
                                                @endif
                                                
                                                <!-- Expand/Collapse Button for subfolders -->
                                                @if($folder->children_count > 0)
                                                  <!--  <div class="expand-button" onclick="toggleMySubfolders({{ $folder->id }}); event.stopPropagation();">
                                                        <i class="ri-arrow-right-s-line" id="myArrow-{{ $folder->id }}"></i>
                                                    </div>-->
                                                @endif
                                            </div>
                                            
                                            <!-- Subfolders Container -->
                                            @if($folder->children && $folder->children->count() > 0)
                                                <div class="subfolders-container initially-hidden" id="mySubfolders-{{ $folder->id }}">
                                                    <div class="row g-2">
                                                        @foreach($folder->children as $subfolder)
                                                            <div class="col-12">
                                                                <div class="folder-grid-item" onclick="openMyFolder({{ $subfolder->id }}, '{{ addslashes($subfolder->name) }}')" ondblclick="openMyFolder({{ $subfolder->id }}, '{{ addslashes($subfolder->name) }}')">
                                                                    <div class="text-center">
                                                                        <i class="ri-folder-shared-fill folder-icon-shared"></i>
                                                                    </div>
                                                                    <div class="folder-name text-center">{{ $subfolder->name }}</div>
                                                                    <div class="folder-info text-center">
                                                                        @if($subfolder->children_count > 0)
                                                                            {{ $subfolder->children_count }} {{ $subfolder->children_count == 1 ? 'item' : 'items' }}
                                                                        @else
                                                                            Empty folder
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="text-center py-5">
                                    <div class="avatar-lg mx-auto mb-3">
                                        <div class="avatar-title bg-soft-info text-info rounded-circle">
                                            <i class="ri-folder-shared-line font-size-32"></i>
                                        </div>
                                    </div>
                                    <h5 class="font-size-16">No shared folders found</h5>
                                    <p class="text-muted">You don't have access to any shared folders yet.</p>
                                    <p class="text-muted font-size-14">
                                        <i class="ri-information-line me-1"></i>
                                        Contact your administrator to get access to folders.
                                    </p>
                                </div>
                            @endif
                        </div>

                        <!-- Table View for Inside Folder -->
                        <div id="myTableView" class="folder-table-container d-none">
                            <div>
                                <table class="table table-hover align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="cursor:pointer" onclick="sortTableColumn('name')">
                                                <i class="ri-folder-shared-line me-2"></i>Name <span id="sortIcon-name"></span>
                                            </th>
                                            <th width="120" style="cursor:pointer" onclick="sortTableColumn('type')">
                                                Type <span id="sortIcon-type"></span>
                                            </th>
                                            <th width="120" style="cursor:pointer" onclick="sortTableColumn('items')">
                                                Items <span id="sortIcon-items"></span>
                                            </th>
                                            <th width="150" style="cursor:pointer" onclick="sortTableColumn('modified')">
                                                Modified<span id="sortIcon-modified"></span>
                                            </th>
                                            <th width="120">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="myFolderTableBody">
                                        @foreach($files as $file)
                                        <tr>
                                            <td>{{ $file->name }}</td>
                                            <td>{{ $file->type }}</td>
                                            <td>{{ $file->items ?? '-' }}</td>
                                            <td>{{ $file->modified_at }}</td>
                                            <td>
    @php
        $ext = strtolower(pathinfo($file->name, PATHINFO_EXTENSION));
        if ($ext === 'pdf') {
            $fileUrl = url('/files/ajax-preview-pdf?file_name=' . urlencode($file->name) . '&folder_id=' . urlencode($folder->id));
        } elseif (in_array($ext, ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'])) {
            $fileUrl = url('/files/stream-office?file_name=' . urlencode($file->name) . '&folder_id=' . urlencode($folder->id));
        } else {
            $fileUrl = url('/files/view?file_name=' . urlencode($file->name) . '&folder_id=' . urlencode($folder->id) . '&view_mode=inline');
        }
    @endphp
    <button class="btn btn-info btn-sm view-file-btn" data-file-url="{{ $fileUrl }}" data-file-name="{{ $file->name }}">View</button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                <!-- Document Viewer Modal (moved to bottom) -->
                                <div class="modal fade" id="documentViewerModal" tabindex="-1" aria-labelledby="documentViewerModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-xl modal-dialog-centered">
                                                <div class="modal-content">
                                                        <div class="modal-header">
                                                                <h5 class="modal-title" id="documentViewerModalLabel">Document Viewer</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                                <div id="pdfViewer" style="display:none; width:100%; min-height:500px;"></div>
                                                                <iframe id="officeViewer" style="display:none; width:100%; min-height:500px; border:none;"></iframe>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                                <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
                                <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    document.body.addEventListener('click', function(e) {
                                        if (e.target && e.target.classList.contains('view-file-btn')) {
                                            var fileUrl = e.target.getAttribute('data-file-url');
                                            var fileName = e.target.getAttribute('data-file-name');
                                            openDocumentViewer(fileUrl, fileName);
                                        }
                                    });
                                });

                                function openDocumentViewer(fileUrl, fileName) {
                                    var ext = (fileName.split('.').pop() || '').toLowerCase();
                                    var pdfViewer = document.getElementById('pdfViewer');
                                    var officeViewer = document.getElementById('officeViewer');
                                    pdfViewer.style.display = 'none';
                                    officeViewer.style.display = 'none';
                                    if (ext === 'pdf') {
                                        pdfViewer.style.display = 'block';
                                        pdfViewer.innerHTML = '<span>Loading PDF...</span>';
                                        pdfjsLib.getDocument(fileUrl).promise.then(function(pdf) {
                                            pdfViewer.innerHTML = '';
                                            for (let i = 1; i <= pdf.numPages; i++) {
                                                pdf.getPage(i).then(function(page) {
                                                    var canvas = document.createElement('canvas');
                                                    pdfViewer.appendChild(canvas);
                                                    var viewport = page.getViewport({ scale: 1.2 });
                                                    canvas.height = viewport.height;
                                                    canvas.width = viewport.width;
                                                    page.render({ canvasContext: canvas.getContext('2d'), viewport: viewport });
                                                });
                                            }
                                        }, function(error) {
                                            pdfViewer.innerHTML = '<span class="text-danger">Failed to load PDF.</span>';
                                        });
                                    } else if (["doc","docx","xls","xlsx"].includes(ext)) {
                                        officeViewer.style.display = 'block';
                                        officeViewer.src = fileUrl;
                                    } else {
                                        alert('Unsupported file type for preview.');
                                        return;
                                    }
                                    var modal = new bootstrap.Modal(document.getElementById('documentViewerModal'));
                                    modal.show();
                                }
                                </script>
                                </table>
                            </div>
                        </div>

                        <!-- Share File Modal -->
                        <div class="modal fade" id="shareFileModal" tabindex="-1" aria-labelledby="shareFileModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-centered">
                                <div class="modal-content border-0 shadow">
                                    <form id="shareFileForm" action="{{ route('files.share') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="file_id" id="share_file_id">
                                        <div class="modal-header modal-header-primary d-flex justify-content-between align-items-center">
                                            <h5 class="modal-title mb-0" id="shareFileModalLabel">
                                                <i class="ri-share-line me-2"></i> Share File: <span id="shareFileName" class="fw-normal">Loading...</span>
                                            </h5>
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="alert alert-info" role="alert">
                                                <i class="ri-information-line font-size-16 me-2 mt-1"></i>
                                                <div class="flex-grow-1">
                                                    <small class="mb-0">
                                                        <strong>Note:</strong> When you share this file, permissions will automatically be applied to this file only.
                                                    </small>
                                                </div>
                                            </div>
                                            <div class="row g-4">
                                                <div class="col-md-6">
                                                    <div class="mb-4">
                                                        <label class="form-label">Share with Users</label>
                                                        <select name="users[]" id="shareFileUsersSelect" class="selectpicker form-control" multiple title="Select Users" data-actions-box="true">
                                                            @foreach($users as $user)
                                                                <option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }} - {{ $user->email }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-4">
                                                        <label class="form-label">Share with Roles</label>
                                                        <select name="roles[]" id="shareFileRolesSelect" class="selectpicker form-control" multiple title="Select Roles" data-actions-box="true">
                                                            @foreach($roles as $role)
                                                                <option value="{{ $role->id }}">{{ $role->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="text-center mb-4">
                                                        <button type="button" class="btn btn-primary btn-sm shadow-sm" id="myAddFilePermissionsBtn">
                                                            <i class="ri-add-line me-1"></i> Add Selected Users/Roles
                                                        </button>
                                                        <button type="button" class="btn btn-primary btn-sm shadow-sm" id="addFilePermissionsBtn" style="display:none;"></button>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                                            <label class="form-label mb-0">Currently Shared With</label>
                                                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="loadSavedFilePermissions(document.getElementById('share_file_id').value)" title="Refresh">
                                                                <i class="ri-refresh-line font-size-12 me-1"></i> Refresh
                                                            </button>
                                                        </div>
                                                        <div class="border rounded p-3 share-permissions-container">
                                                            <table class="table table-sm mb-0" id="shareFileWithTable">
                                                                <thead class="table-light">
                                                                    <tr>
                                                                        <th width="80">Type</th>
                                                                        <th>Name</th>
                                                                        <th>Details</th>
                                                                        <th width="80">Actions</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td colspan="5" class="text-center text-muted">
                                                                            <i class="ri-information-line me-1"></i>
                                                                            Loading shared permissions...
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer border-top">
                                            <button type="button" class="btn btn-success px-4" data-bs-dismiss="modal">
                                                <i class="ri-check-line me-1"></i> Done
                                            </button>
                                            <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Required JavaScript variables -->
        <script>
            // Set global variables for JavaScript file
            window.folderNames = [
                @if(isset($folders))
                    @foreach($folders as $folder)
                        "{{ addslashes($folder->name) }}",
                    @endforeach
                @endif
            ];
            window.baseUrl = "{{ url('') }}";
            window.csrfToken = "{{ csrf_token() }}";
            
            // Permission variables
            window.permissions = {
                canCreateFolder: @json(auth()->user()->can('Create My Folder')),
                canUploadFile: @json(auth()->user()->can('Upload My Files')),
                canShareFolder: @json(auth()->user()->can('Share My Folder')),
                canEditFolder: @json(auth()->user()->can('Edit My Folder')),
                canDeleteFolder: @json(auth()->user()->can('Delete My Folder')),
                canViewFile: @json(auth()->user()->can('Download My Files')),
                canDownloadFile: @json(auth()->user()->can('Download My Files')),
                canDeleteFile: @json(auth()->user()->can('Delete My Files'))
            };
            
        </script>
        
        <!-- External JavaScript -->
    <!-- <script src="{{ asset('assets/js/my-folder-management.js') }}"></script> -->
        
    </div>
</div>

<!-- Add Folder Modal (for subfolders) -->
<div class="modal fade" id="addFolderModal" tabindex="-1" aria-labelledby="addFolderModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header modal-header-primary d-flex justify-content-between align-items-center">
                <h5 class="modal-title mb-0" id="addFolderModalLabel">
                    <i class="ri-folder-add-line me-2"></i>Add New Subfolder
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="addFolderForm">
                <div class="modal-body">
                    <div class="alert alert-info d-flex align-items-start mb-4" role="alert">
                        <i class="ri-information-line me-1"></i>
                        This will create a new subfolder in the current shared folder.
                    </div>
                    <div id="modalFolderErrorContainer">
                        @if($errors->has('folder_name'))
                            <script>
                                document.addEventListener('DOMContentLoaded', function () {
                                    var addFolderModal = new bootstrap.Modal(document.getElementById('addFolderModal'));
                                    addFolderModal.show();
                                });
                            </script>
                            <div class="alert alert-danger mb-3" id="modalFolderError" style="z-index:1056; position:relative;">
                                <i class="ri-error-warning-line me-2"></i>
                                {{ $errors->first('folder_name') }}
                            </div>
                        @endif
                    </div>
                    <div class="mb-3">
                        <label for="folderName" class="form-label">Folder Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @if($errors->has('folder_name')) is-invalid @endif" id="folderName" name="folder_name" required placeholder="Enter folder name" value="{{ old('folder_name') }}">
                        <div class="form-text">Choose a descriptive name for your new subfolder</div>
                    </div>
                    <div class="mb-3">
                        <label for="folderDescription" class="form-label">Description (Optional)</label>
                        <textarea class="form-control" id="folderDescription" name="description" rows="3" placeholder="Brief description of the folder contents"></textarea>
                    </div>
                    <input type="hidden" id="parentFolderId" name="parent_id">
                </div>
                <div class="modal-footer border-top">
                    <button type="submit" class="btn btn-success px-4">
                        <i class="ri-folder-add-line me-1"></i>Create Subfolder
                    </button>
                    <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add File Modal (for uploading to subfolders) -->
<div class="modal fade" id="addFileModal" tabindex="-1" aria-labelledby="addFileModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header modal-header-primary d-flex justify-content-between align-items-center">
                <h5 class="modal-title mb-0" id="addFileModalLabel">
                    <i class="ri-file-add-line me-2"></i>Upload Files to Folder
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="addFileForm" enctype="multipart/form-data">

                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="ri-information-line me-1"></i>
                        Files will be uploaded to the current shared folder.
                    </div>
                    <div class="mb-3">
                        <label for="fileUpload" class="form-label">Select Files <span class="text-danger">*</span></label>
                        <input type="file" class="form-control" id="fileUpload" name="files[]" required multiple onchange="updateCustomFileName()">
                        <div class="form-text">Choose one or more files to upload. Maximum file size: 10MB per file.</div>
                    </div>

                    <!-- Three Custom Fields Naming Only (Dropdowns + Date) -->
                    <div class="mb-3">
                        <div class="p-3 mb-2" style="border: 2px solid #dee2e6; border-radius: 8px; background: #f8f9fa;">
                            <div class="row g-2 mb-2">
                                <div class="col-md-4">
                                    <label for="customPart1" class="form-label">Department <span class="text-danger">*</span></label>
                                    <select class="form-select" id="customPart1" required>
                                        <option value="BIO">Bio-Diversity (BIO)</option>
                                        <option value="VEV">Veuve Reserve (VEV)</option>
                                        <option value="ICR">Ile Coco reserve (ICR)</option>
                                        <option value="BOT">Botanical Garden (BOT)</option>
                                        <option value="BTP">Baie Ternay MP (BTP)</option>
                                        <option value="STA">Ste Anne MP (STA)</option>
                                        <option value="FIN">Finance and Procurement (FIN)</option>
                                        <option value="BUS">Business Development (BUS)</option>
                                        <option value="HRE">Human Resources (HRE)</option>
                                        <option value="PMT">Property Management (PMT)</option>
                                        <option value="FOB">Fond B'Offay Admin (FOB)</option>
                                        <option value="TRN">Training & Special Events (TRN)</option>
                                        <option value="SEC">Secretariat (SEC)</option>
                                        <option value="NPM">National Parks Mahe (NPM)</option>
                                        <option value="NPP">National Parks Praslin (NPP)</option>
                                        <option value="FIM">Forest Inventory Mahe (FIM)</option>
                                        <option value="FIP">Forestry Inventory Praslin (FIP)</option>
                                        <option value="FOP">Forest Production (FOP)</option>
                                        <option value="ADM">Administration (ADM)</option>
                                        <option value="CUR">Curieuse (CUR)</option>
                                        <option value="RES">Research (RES)</option>
                                        <option value="PRO">Project (PRO)</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="customPart2" class="form-label">Document Type <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="customPart2" placeholder="Enter document type" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="customPart3" class="form-label">Identifier <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="customPart3" placeholder="Enter identifier" required>
                                </div>
                            </div>
                            <div class="row g-2">
                                <div class="col-md-4">
                                    <label for="customPart4" class="form-label">Date <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="customPart4" placeholder="YYYYMMDD" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="customPart5" class="form-label">Version <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="customPart5" placeholder="Enter version" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="customPart6" class="form-label">Status <span class="text-danger">*</span></label>
                                    <select class="form-select" id="customPart6" required>
                                        <option value="">Select status</option>
                                        <option value="Draft">Draft</option>
                                        <option value="Final">Final</option>
                                        <option value="Signed">Signed</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <label for="customGeneratedFileName" class="form-label">Generated File Name</label>
                                    <input type="text" class="form-control" id="customGeneratedFileName" name="custom_generated_file_name" readonly>
                                    <div class="form-text">This will be used as the file name upon upload.</div>
                                </div>
                            </div>
                            <div class="form-text mt-2">All six fields will be joined to generate the file name.</div>
                        </div>
                    </div>
                 

                    <script>
                        function getToday() {
                            var d = new Date();
                            function pad(n) { return n < 10 ? '0' + n : n; }
                            return d.getFullYear() + pad(d.getMonth()+1) + pad(d.getDate());
                        }
                        function hasInvalidChars(str) {
                            // Allow only letters, numbers, and underscores
                            return /[^A-Za-z0-9_]/.test(str);
                        }
                        function updateCustomFileName() {
                            var dept = document.getElementById('customPart1').value.trim();
                            var docType = document.getElementById('customPart2').value.trim();
                            var identifier = document.getElementById('customPart3').value.trim();
                            var date = document.getElementById('customPart4').value.trim();
                            var version = document.getElementById('customPart5').value.trim();
                            var status = document.getElementById('customPart6').value.trim();
                            var versionPart = version ? 'v' + version : '';
                            var nameParts = [dept, docType, identifier, date, versionPart, status].filter(Boolean);
                            var invalid = false;
                            var errorMsg = '';
                            for (var i = 0; i < nameParts.length; i++) {
                                if (hasInvalidChars(nameParts[i])) {
                                    invalid = true;
                                    errorMsg = 'No spaces or special characters allowed in file name fields.';
                                    break;
                                }
                            }
                            var generatedField = document.getElementById('customGeneratedFileName');
                            var errorField = document.getElementById('fileNameErrorMsg');
                            if (invalid) {
                                generatedField.value = '';
                                if (!errorField) {
                                    var errDiv = document.createElement('div');
                                    errDiv.id = 'fileNameErrorMsg';
                                    errDiv.className = 'text-danger mt-1';
                                    errDiv.innerText = errorMsg;
                                    generatedField.parentNode.appendChild(errDiv);
                                } else {
                                    errorField.innerText = errorMsg;
                                }
                            } else {
                                generatedField.value = nameParts.join('_') + '.pdf';
                                if (errorField) errorField.remove();
                            }
                        }
                        document.addEventListener('DOMContentLoaded', function() {
                            // Set today's date by default
                            document.getElementById('customPart4').value = getToday();
                            document.getElementById('customPart1').addEventListener('change', updateCustomFileName);
                            document.getElementById('customPart2').addEventListener('input', updateCustomFileName);
                            document.getElementById('customPart3').addEventListener('input', updateCustomFileName);
                            document.getElementById('customPart4').addEventListener('input', updateCustomFileName);
                            document.getElementById('customPart5').addEventListener('input', updateCustomFileName);
                            document.getElementById('customPart6').addEventListener('change', updateCustomFileName);
                            updateCustomFileName();
                        });
                    </script>

                    <!-- Comment Field -->
                    <div class="mb-3">
                        <label for="fileComment" class="form-label">Comment</label>
                        <textarea class="form-control" id="fileComment" name="comment" rows="2" placeholder="Add a comment about these files"></textarea>
                    </div>

                    <script>
                        function pad(n) { return n < 10 ? '0' + n : n; }
                        function getToday() {
                            var d = new Date();
                            return d.getFullYear() + pad(d.getMonth()+1) + pad(d.getDate());
                        }
                        function generateFileName() {
                            var convention = document.getElementById('fileNameConvention').value;
                            if (!convention) {
                                document.getElementById('generatedFileName').value = '';
                                return;
                            }
                            var date = getToday();
                            document.getElementById('generatedFileName').value = convention + '_' + date;
                        }
                        function updateFileNamePreview() {
                            // Optionally, update preview based on selected file
                            generateFileName();
                        }
                    </script>
                    <!-- Metadata Section -->
                    <div class="card border-light mb-3">
                        <div class="card-header bg-light">
                            <h6 class="card-title mb-0">
                                <i class="ri-price-tag-3-line me-1"></i>File Metadata (Optional)
                            </h6>
                        </div>
                        <div class="card-body">
                            <div id="metadataContainer">
                                <div class="metadata-row mb-3">
                                    <div class="row g-2">
                                        <div class="col-md-5">
                                            <label class="form-label">Meta Tag</label>
                                            <select class="form-select" name="meta_tags[]" onchange="updateMetaValuePlaceholder(this)">
                                                <option value="">Select a metadata tag</option>
                                                <optgroup label="Document Categories">
                                                    <option value="Document Type">Document Type</option>
                                                    <option value="Category">Category</option>
                                                    <option value="Classification">Classification</option>
                                                    <option value="Version">Version</option>
                                                </optgroup>
                                                <optgroup label="Business Information">
                                                    <option value="Department">Department</option>
                                                    <option value="Project">Project</option>
                                                    <option value="Client">Client</option>
                                                    <option value="Contract">Contract</option>
                                                    <option value="Budget Code">Budget Code</option>
                                                </optgroup>
                                                <optgroup label="Status & Priority">
                    <script>
                        document.addEventListener('DOMContentLoaded', function () {
                            if (@json($errors->has('folder_name'))) {
                                var addFolderModal = new bootstrap.Modal(document.getElementById('addFolderModal'));
                                addFolderModal.show();
                            }

                            document.body.addEventListener('click', function(e) {
                                if (e.target && e.target.classList.contains('view-file-btn')) {
                                    var row = e.target.closest('tr');
                                    var fileName = row ? row.getAttribute('data-file-name') : null;
                                    var folderId = row ? row.getAttribute('data-folder-id') : null;
                                    var fileContentPre = document.getElementById('viewFileContentPre');
                                    var pdfViewer = document.getElementById('pdfViewer');
                                    if (!fileName || !folderId || !fileContentPre || !pdfViewer) return;
                                    fileContentPre.style.display = 'block';
                                    pdfViewer.style.display = 'none';
                                    fileContentPre.textContent = 'Loading...';
                                    fetch(window.baseUrl + '/files/view-content', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'Accept': 'application/json',
                                            'X-CSRF-TOKEN': window.csrfToken
                                        },
                                        body: JSON.stringify({ file_name: fileName, folder_id: folderId })
                                    })
                                    .then(response => response.json())
                                    .then(data => {
                                        if (data.success) {
                                            var ext = (fileName.split('.').pop() || '').toLowerCase();
                                            if (ext === 'pdf' && data.url) {
                                                fileContentPre.style.display = 'none';
                                                pdfViewer.style.display = 'block';
                                                pdfViewer.innerHTML = '<span>Loading PDF...</span>';
                                                pdfjsLib.getDocument(data.url).promise.then(function(pdf) {
                                                    pdfViewer.innerHTML = '';
                                                    for (let i = 1; i <= pdf.numPages; i++) {
                                                        pdf.getPage(i).then(function(page) {
                                                            var canvas = document.createElement('canvas');
                                                            pdfViewer.appendChild(canvas);
                                                            var viewport = page.getViewport({ scale: 1.2 });
                                                            canvas.height = viewport.height;
                                                            canvas.width = viewport.width;
                                                            page.render({ canvasContext: canvas.getContext('2d'), viewport: viewport });
                                                        });
                                                    }
                                                }, function(error) {
                                                    pdfViewer.innerHTML = '<span class="text-danger">Failed to load PDF.</span>';
                                                });
                                            } else {
                                                fileContentPre.style.display = 'block';
                                                pdfViewer.style.display = 'none';
                                                fileContentPre.textContent = data.content;
                                            }
                                        } else {
                                            fileContentPre.style.display = 'block';
                                            pdfViewer.style.display = 'none';
                                            fileContentPre.textContent = data.message || 'Unable to load file content.';
                                        }
                                    })
                                    .catch(() => {
                                        fileContentPre.style.display = 'block';
                                        pdfViewer.style.display = 'none';
                                        fileContentPre.textContent = 'Error loading file content.';
                                    });
                                }
                            });
                        });
                    </script>
                                                    <option value="Status">Status</option>
                                                    <option value="Priority">Priority</option>
                                                    <option value="Approval Status">Approval Status</option>
                                                    <option value="Review Status">Review Status</option>
                                                </optgroup>
                                                <optgroup label="People & Roles">
                                                    <option value="Author">Author</option>
                                                    <option value="Reviewer">Reviewer</option>
                                                    <option value="Approver">Approver</option>
                                                    <option value="Owner">Owner</option>
                                                </optgroup>
                                                <optgroup label="Dates & Timeline">
                                                    <option value="Due Date">Due Date</option>
                                                    <option value="Created Date">Created Date</option>
                                                    <option value="Modified Date">Modified Date</option>
                                                    <option value="Expiry Date">Expiry Date</option>
                                                </optgroup>
                                                <optgroup label="Technical">
                                                    <option value="File Format">File Format</option>
                                                    <option value="Language">Language</option>
                                                    <option value="Source System">Source System</option>
                                                    <option value="Backup Location">Backup Location</option>
                                                </optgroup>
                                                <optgroup label="Custom">
                                                    <option value="Custom">Custom (Type your own)</option>
                                                </optgroup>
                                            </select>
                                            <input type="text" class="form-control mt-2 d-none" name="custom_meta_tags[]" placeholder="Enter custom metadata tag">
                                        </div>
                                        <div class="col-md-5">
                                            <label class="form-label">Meta Value</label>
                                            <input type="text" class="form-control meta-value-input" name="meta_values[]" placeholder="Enter the value for this tag">
                                            <div class="form-text meta-value-help">Enter the specific value for the selected metadata tag</div>
                                        </div>
                                        <div class="col-md-2 d-flex align-items-end">
                                            <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeMetadataRow(this)" style="display: none;">
                                                <i class="ri-delete-bin-line"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addMetadataRow()">
                                <i class="ri-add-line me-1"></i>Add Another Tag
                            </button>
                        </div>
                    </div>



                    
                    <div class="mb-3">
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="overwriteFiles" name="overwrite">
                            <label class="form-check-label" for="overwriteFiles">
                                Overwrite existing files with the same name
                            </label>
                        </div>
                    </div>
                    <div id="uploadProgress" class="d-none">
                        <div class="mb-2">
                            <label class="form-label">Upload Progress</label>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="uploadFolderId" name="folder_id">
                </div>
                <div class="modal-footer border-top">
                    <button type="submit" class="btn btn-success px-4">
                        <i class="ri-upload-line me-1"></i>Upload Files
                    </button>
                    <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Share Folder Modal -->
<div class="modal fade" id="shareFolderModal" tabindex="-1" aria-labelledby="shareFolderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form id="shareFolderForm" action="{{ route('folders.share') }}" method="POST">
                @csrf
                <input type="hidden" name="folder_id" id="share_folder_id">
                <div class="modal-header modal-header-primary d-flex justify-content-between align-items-center">
                    <h5 class="modal-title mb-0" id="shareFolderModalLabel">
                        <i class="ri-share-line me-2"></i> Share Folder: <span id="shareFolderName" class="fw-normal">Loading...</span>
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Information Alert -->
                    <div class="alert alert-info" role="alert">
                        <i class="ri-information-line font-size-16 me-2 mt-1"></i>
                        <div class="flex-grow-1">
                            <small class="mb-0">
                                <strong>Note:</strong> When you share this folder, permissions will automatically be applied to all existing subfolders and any new subfolders created in the future.
                            </small>
                        </div>
                    </div>
                    
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label class="form-label">Share with Users</label>
                                <select name="users[]" id="shareUsersSelect" class="selectpicker form-control" multiple title="Select Users" data-actions-box="true">
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }} - {{ $user->email }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label class="form-label">Share with Roles</label>
                                <select name="roles[]" id="shareRolesSelect" class="selectpicker form-control" multiple title="Select Roles" data-actions-box="true">
                                    @foreach($roles as $role)
                                        <option value="{{ $role->id }}">{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="text-center mb-4">
                                <button type="button" class="btn btn-primary btn-sm shadow-sm" id="myAddPermissionsBtn">
                                    <i class="ri-add-line me-1"></i> Add Selected Users/Roles
                                </button>
                                <!-- Changed id to match index.blade.php for JS compatibility -->
                                <button type="button" class="btn btn-primary btn-sm shadow-sm" id="addPermissionsBtn" style="display:none;"></button>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label class="form-label mb-0">Currently Shared With</label>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="loadSavedPermissions(document.getElementById('share_folder_id').value)" title="Refresh">
                                        <i class="ri-refresh-line font-size-12 me-1"></i> Refresh
                                    </button>
                                </div>
                                <div class="border rounded p-3 share-permissions-container">
                                    <table class="table table-sm mb-0" id="shareWithTable">
                                        <thead class="table-light">
                                            <tr>
                                                <th width="80">Type</th>
                                                <th>Name</th>
                                                <th>Details</th>
                                                <th width="80">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="5" class="text-center text-muted">
                                                    <i class="ri-information-line me-1"></i>
                                                    Loading shared permissions...
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-success px-4" data-bs-dismiss="modal">
                        <i class="ri-check-line me-1"></i> Done
                    </button>
                    <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Rename Folder Modal -->
<div class="modal fade" id="renameFolderModal" tabindex="-1" aria-labelledby="renameFolderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form id="renameFolderForm">
                @csrf
                <input type="hidden" name="folder_id" id="rename_folder_id">
                <div class="modal-header modal-header-primary d-flex justify-content-between align-items-center">
                    <h5 class="modal-title mb-0" id="renameFolderModalLabel">
                        <i class="ri-edit-line me-2"></i> Rename Folder
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Information Alert -->
                    <div class="alert alert-info d-flex align-items-start mb-4" role="alert">
                        <i class="ri-information-line font-size-16 me-2 mt-1"></i>
                        <div class="flex-grow-1">
                            <small class="mb-0">
                                <strong>Note:</strong> Renaming this folder will update its name for all users who have access to it.
                            </small>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="newFolderName" class="form-label">New Folder Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="newFolderName" name="folder_name" required placeholder="Enter new folder name">
                        <div class="form-text">Choose a descriptive name for the folder</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted">Current Name</label>
                        <div class="form-control-plaintext bg-light px-3 py-2 rounded">
                            <span id="currentFolderName">Loading...</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-top">
                    <button type="submit" class="btn btn-success px-4">
                        <i class="ri-check-line me-1"></i> Rename Folder
                    </button>
                    <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                    
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Folder Info Modal -->
<div class="modal fade" id="folderInfoModal" tabindex="-1" aria-labelledby="folderInfoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header modal-header-primary d-flex justify-content-between align-items-center">
                <h5 class="modal-title mb-0" id="folderInfoModalLabel">
                    <i class="ri-information-line me-2"></i> Folder Information
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Folder Name</label>
                    <div class="form-control-plaintext bg-light px-3 py-2 rounded" id="infoFolderName">Loading...</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Path</label>
                    <div class="form-control-plaintext bg-light px-3 py-2 rounded" id="infoFolderPath">Loading...</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Description</label>
                    <div class="form-control-plaintext bg-light px-3 py-2 rounded" id="infoFolderDescription">Loading...</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Parent Folder</label>
                    <div class="form-control-plaintext bg-light px-3 py-2 rounded" id="infoParentName">Loading...</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Created By</label>
                    <div class="form-control-plaintext bg-light px-3 py-2 rounded" id="infoCreatedBy">Loading...</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Created At</label>
                    <div class="form-control-plaintext bg-light px-3 py-2 rounded" id="infoCreatedAt">Loading...</div>
                </div>


            </div>
            <div class="modal-footer border-top">
                <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('assets/js/folder-management.js') }}?v={{ filemtime(public_path('assets/js/folder-management.js')) }}"></script>
<script src="{{ asset('assets/js/my-folder-management.js') }}?v={{ filemtime(public_path('assets/js/my-folder-management.js')) }}"></script>
<script>
// Example function to open the Share File modal (to be called from file actions menu)
function openShareFileModal(fileId, fileName) {
    document.getElementById('share_file_id').value = fileId;
    document.getElementById('shareFileName').textContent = fileName;
    // Optionally, load current permissions for this file
    // loadSavedFilePermissions(fileId);
    var modal = new bootstrap.Modal(document.getElementById('shareFileModal'));
    modal.show();
}
</script>



@endsection

@stack('scripts')