@extends('admin.layouts.app')

@section('title', 'FILE APP PORTAL - General Documents')

@section('breadcrumbs')
    <i class="fa-solid fa-chevron-right mx-3 text-[8px]"></i>
    <span class="text-slate-900">General Documents</span>
@endsection

@push('styles')
<style>
    .modal-enter { animation: zoomIn 0.3s ease-out forwards; }
    @keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

    .pill {
        border-radius: 24px; padding: 4px 10px; font-size: 11px; font-weight: 700;
        text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    }
    .pill-green { background: #dcfce7; color: #15803d; }
    .pill-blue  { background: #dbeafe; color: #1e40af; }

    tbody tr:hover { background-color: #f8fffe; }

    .grid-view {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .doc-card {
        border-radius: 1.5rem; border: 1px solid #e2e8f0; background: #ffffff;
        padding: 18px 18px 16px;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
        display: flex; flex-direction: column; gap: 8px; position: relative;
        transition: all 0.2s;
    }
    .doc-card:hover {
        border-color: #00ada8;
        box-shadow: 0 18px 40px rgba(0, 173, 168, 0.15);
        transform: translateY(-2px);
    }

    .avatar-stack > div { box-shadow: 0 0 0 2px #ffffff; }

    /* Right-side document view panel */
    #docPanel {
        position: fixed; top: 80px; right: 0;
        height: calc(100vh - 80px); width: 0; overflow: hidden;
        z-index: 200; transition: width 0.35s cubic-bezier(0.4,0,0.2,1);
        padding: 0; pointer-events: none;
    }
    #docPanel.panel-open { width: 420px; padding: 12px; pointer-events: all; }
    #docPanel .panel-inner {
        width: 396px; display: flex; flex-direction: column; height: 100%;
        background: #fff; border-radius: 1.75rem;
        border: 1px solid #e2e8f0; box-shadow: -4px 0 40px rgba(0,0,0,0.10); overflow: hidden;
    }

    #contentArea { transition: margin-right 0.35s cubic-bezier(0.4,0,0.2,1); }
    .panel-open-state #contentArea { margin-right: 420px; }

    /* Upload modal file row */
    .file-upload-row {
        display: flex; align-items: center; gap: 10px;
        background: #fff; border: 1.5px solid #e2e8f0; border-radius: 16px;
        padding: 10px 14px; transition: all 0.2s;
    }
    .file-upload-row.has-file { border-color: #00ada8; background: #f0fdfb; }
    /* Custom doc-type dropdown */
    .dt-trigger {
        background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px;
        padding: 6px 10px 6px 10px; font-size: 11px; font-weight: 700; color: #94a3b8;
        outline: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
        min-width: 130px; white-space: nowrap; font-family: 'Plus Jakarta Sans', sans-serif;
        transition: border-color 0.2s, background 0.2s, color 0.2s; flex-shrink: 0;
    }
    .dt-trigger.has-value { color: #0f766e; border-color: #00ada8; background: #f0fdfb; }
    .dt-trigger.open { border-color: #00ada8; background: #fff; box-shadow: 0 0 0 3px rgba(0,173,168,0.10); color: #0f766e; }
    .dt-menu {
        background: #fff; border-radius: 14px; border: 1.5px solid #e2e8f0;
        box-shadow: 0 12px 36px rgba(15,23,42,0.14); overflow: hidden;
    }
    .dt-search-wrap {
        padding: 8px 8px 6px; border-bottom: 1px solid #f1f5f9; position: relative;
    }
    .dt-search-wrap i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 9px; pointer-events: none; }
    .dt-search {
        width: 100%; border: 1.5px solid #e2e8f0; outline: none; border-radius: 8px;
        font-size: 11px; padding: 6px 8px 6px 26px; background: #f8fafc;
        font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; color: #334155;
        transition: border-color 0.2s;
    }
    .dt-search:focus { border-color: #00ada8; background: #fff; }
    .dt-option {
        padding: 8px 14px; font-size: 11px; font-weight: 600; color: #374151;
        cursor: pointer; transition: background 0.12s;
    }
    .dt-option:hover { background: #f0fdfb; color: #0f766e; }
    .dt-option.selected { background: #ccfbf1; color: #0f766e; font-weight: 800; }
    .dt-empty { padding: 12px 14px; font-size: 11px; color: #94a3b8; font-weight: 600; text-align: center; }
    .upload-share-user-row {
        display: flex; align-items: center; gap: 10px;
        background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
        padding: 10px 12px;
    }

    .panel-field {
        width: 100%; background: #f8fafc; border: 1.5px solid #e2e8f0;
        border-radius: 12px; padding: 11px 14px; font-size: 12px; color: #1e293b;
        outline: none; transition: all 0.2s; font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .panel-field:focus { border-color: #00ada8; background: #fff; box-shadow: 0 0 0 3px rgba(0,173,168,0.08); }
    .panel-label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin-bottom: 5px; }

    .file-pill {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 10px; border-radius: 999px;
        background: #fef3c7; border: 1px solid #fed7aa;
        font-size: 11px; font-weight: 600; color: #92400e; white-space: nowrap;
    }
    .file-more-pill {
        min-width: 32px; height: 28px; border-radius: 0.75rem;
        background: #1d4ed8; color: #fff;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 700;
    }

    .doc-card-footer {
        border-top: 1px solid #e5e7eb; margin-top: 10px; padding-top: 8px;
        display: flex; align-items: center; justify-content: space-between;
        font-size: 11px; color: #4b5563;
    }
    .doc-card-footer .footer-actions button {
        width: 30px; height: 30px; border-radius: 999px;
        display: flex; align-items: center; justify-content: center;
        border: 1px solid #e5e7eb; background: #fff; color: #64748b; font-size: 12px;
    }
    .doc-card-footer .footer-actions button:hover {
        background: #f1f5f9; border-color: #cbd5e1;
    }

    /* Share chip tag */
    .share-chip {
        display: inline-flex; align-items: center; gap: 6px;
        background: #f0fdfb; border: 1px solid #99f6e4;
        border-radius: 999px; padding: 3px 10px 3px 6px;
        font-size: 11px; font-weight: 700; color: #0f766e;
    }

    @media (max-width: 1024px) {
        .grid-view { grid-template-columns: minmax(0, 1fr); }
    }
</style>
@endpush

@section('content')
<div class="workspace-console min-h-full p-8 shadow-sm flex flex-col">

    <!-- Top Bar -->
    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 mb-8">
        <div class="flex items-center gap-3 flex-1">
            <div class="relative w-full max-w-xs">
                <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
                <input id="searchInput" type="text" placeholder="Search by type, comments or uploader..."
                    oninput="render()"
                    class="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-2xl text-xs outline-none focus:ring-1 focus:ring-[#00ada8]">
            </div>
        </div>
        <div class="flex items-center gap-3">
            <div class="bg-slate-100 rounded-full p-1 flex items-center">
                <button id="filterAllBtn" type="button" onclick="setOwnerFilter('all')"
                    class="px-4 py-1.5 rounded-full text-[11px] font-bold uppercase tracking-widest bg-white shadow-sm text-[#00ada8]">
                    All
                </button>
                <button id="filterMeBtn" type="button" onclick="setOwnerFilter('me')"
                    class="px-4 py-1.5 rounded-full text-[11px] font-bold uppercase tracking-widest text-slate-400 hover:text-[#00ada8]">
                    Uploaded By Me
                </button>
            </div>
            <div class="flex bg-slate-100 p-1.5 rounded-xl">
                <button onclick="setView('grid')" id="gridBtn" type="button"
                    class="w-9 h-9 flex items-center justify-center rounded-lg text-slate-400 hover:text-[#00ada8]">
                    <i class="fa-solid fa-table-cells-large"></i>
                </button>
                <button onclick="setView('list')" id="listBtn" type="button"
                    class="w-9 h-9 flex items-center justify-center rounded-lg bg-white shadow-sm text-[#00ada8]">
                    <i class="fa-solid fa-list"></i>
                </button>
            </div>
            <button type="button" onclick="handleAddDocument()"
                class="bg-[#00ada8] text-white px-5 py-2.5 rounded-xl text-xs font-extrabold shadow-lg shadow-[#00ada8]/20 hover:scale-105 transition-all whitespace-nowrap">
                <i class="fa-solid fa-plus mr-2"></i> ADD DOCUMENT
            </button>
        </div>
    </div>

    <!-- Content Wrapper -->
    @if(!$gdPerms['view'])
    <div class="flex-1 flex items-center justify-center py-20">
        <div class="text-center">
            <div class="w-20 h-20 bg-red-50 text-red-400 rounded-3xl flex items-center justify-center mx-auto mb-6">
                <i class="fa-solid fa-lock text-3xl"></i>
            </div>
            <h3 class="text-lg font-extrabold text-slate-800 mb-2">Access Restricted</h3>
            <p class="text-sm text-slate-400 max-w-xs mx-auto">You don't have permission to view General Documents. Contact your administrator to request access.</p>
        </div>
    </div>
    @else
    <div id="contentWrapper" class="flex-1">
        <!-- GRID VIEW -->
        <div id="gridContainer" class="grid-view" style="display:none;"></div>
        <!-- LIST VIEW -->
        <div id="listContainer" class="overflow-x-auto">
            <table class="w-full text-sm" style="width:100%;border-collapse:collapse;font-size:13px;">
                <thead>
                    <tr class="border-b border-slate-100">
                        <th class="text-left py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Document Type</th>
                        <th class="text-left py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Comments</th>
                        <th class="text-left py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Uploaded On</th>
                        <th class="text-left py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Uploaded By</th>
                        <th class="text-center py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Files</th>
                        <th class="text-center py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Shared With</th>
                        <th class="text-center py-3 px-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Actions</th>
                    </tr>
                </thead>
                <tbody id="listBody" class="divide-y divide-slate-50"></tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    <div class="mt-6 pt-6 border-t border-slate-100 flex items-center justify-between">
        <p id="showingText" class="text-[11px] font-bold text-slate-400 uppercase"></p>
        <div class="flex gap-2" id="pagination"></div>
    </div>
    @endif
</div>
@endsection

@push('modals')

<!-- ── PERMISSION DENIED MODAL ── -->
<div id="gdPermDeniedModal" class="fixed inset-0 z-[400] hidden items-center justify-center p-4">
    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onclick="closeGdPermDenied()"></div>
    <div class="relative bg-white p-8 rounded-[2rem] shadow-2xl max-w-sm w-full text-center modal-enter">
        <div class="w-16 h-16 bg-amber-50 text-amber-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <i class="fa-solid fa-lock text-2xl"></i>
        </div>
        <h3 class="font-extrabold text-slate-800 text-base">Access Denied</h3>
        <p id="gdPermDeniedMsg" class="text-sm font-semibold text-slate-600 mt-1"></p>
        <p class="text-xs text-slate-400 mt-2">You don't have the required permission to perform this action. Please contact your administrator.</p>
        <div class="mt-8">
            <button onclick="closeGdPermDenied()" class="w-full py-3 bg-slate-100 rounded-xl text-[10px] font-black uppercase text-slate-500 hover:bg-slate-200 transition-all">Close</button>
        </div>
    </div>
</div>

<!-- ── DELETE CONFIRM MODAL ── -->
<div id="deleteModal" class="fixed inset-0 z-[300] hidden items-center justify-center p-4">
    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onclick="closeDeleteModal()"></div>
    <div class="relative bg-white p-8 rounded-[2rem] shadow-2xl max-w-sm w-full text-center modal-enter">
        <div class="w-16 h-16 bg-red-50 text-red-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <i class="fa-solid fa-trash text-2xl"></i>
        </div>
        <h3 class="font-extrabold text-slate-800 text-base">Remove Document?</h3>
        <p id="deleteDocName" class="text-sm font-semibold text-slate-600 mt-1"></p>
        <p class="text-xs text-slate-400 mt-2">This action cannot be undone. The document and all its attachments will be permanently removed.</p>
        <div class="flex gap-3 mt-8">
            <button onclick="closeDeleteModal()" class="flex-1 py-3 bg-slate-100 rounded-xl text-[10px] font-black uppercase text-slate-500 hover:bg-slate-200 transition-all">Cancel</button>
            <button onclick="confirmDelete()" id="deleteConfirmBtn" class="flex-1 py-3 bg-red-500 text-white rounded-xl text-[10px] font-black uppercase shadow-lg shadow-red-500/30 hover:bg-red-600 transition-all">Remove</button>
        </div>
    </div>
</div>

<!-- ── DOC VIEW PANEL (right side) ── -->
<aside id="docPanel">
    <div class="panel-inner">
        <!-- Header -->
        <div class="px-6 pt-5 pb-4 border-b border-slate-100 flex items-start justify-between flex-shrink-0">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-2xl flex items-center justify-center text-sm font-extrabold text-white bg-teal-500" id="docPanelAvatar">DM</div>
                <div>
                    <p class="text-xs font-black uppercase tracking-widest text-teal-500" id="docPanelStatus">Files</p>
                    <p class="text-sm font-extrabold text-slate-900" id="docPanelTitle">Document</p>
                    <p class="text-[10px] font-semibold text-slate-400 mt-0.5" id="docPanelAccount"></p>
                </div>
            </div>
            <button type="button" onclick="closeDocPanel()"
                class="w-8 h-8 rounded-full flex items-center justify-center bg-slate-100 text-slate-400 hover:bg-slate-200">
                <i class="fa-solid fa-xmark text-sm"></i>
            </button>
        </div>
        <!-- File List -->
        <div class="flex-1 overflow-y-auto px-6 pb-6 pt-4 scroll-custom">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-xs font-black uppercase tracking-[0.18em] text-slate-400">Attachments</h3>
            </div>
            <div id="docPanelFileList" class="space-y-3">
                <p class="text-xs text-slate-400">Loading...</p>
            </div>
        </div>
    </div>
</aside>

<!-- ── UPLOAD MODAL ── -->
<div id="uploadModal" class="fixed inset-0 z-[300] hidden items-center justify-center" style="padding:24px;">
    <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" onclick="closeUploadModal()"></div>

    <div class="relative bg-white rounded-[2rem] shadow-2xl modal-enter"
         style="width:100%;max-width:880px;height:80vh;display:flex;flex-direction:column;overflow:hidden;">

        {{-- ── Modal Header ── --}}
        <div class="flex items-center justify-between px-8 py-5 border-b border-slate-100 flex-shrink-0">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-2xl flex items-center justify-center flex-shrink-0"
                     style="background:#e6f7f6">
                    <i class="fa-solid fa-cloud-arrow-up" style="color:#00ada8"></i>
                </div>
                <div>
                    <h2 class="text-base font-extrabold text-slate-900 leading-tight">Upload New Documents</h2>
                    <p class="text-[11px] text-slate-400 mt-0.5">Fill in the details, attach files and share with users.</p>
                </div>
            </div>
            <button type="button" onclick="closeUploadModal()"
                class="w-9 h-9 flex items-center justify-center rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-500 transition-all flex-shrink-0 text-sm">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        {{-- ── Two-column body ── --}}
        <div style="display:flex;flex:1;overflow:hidden;">

            {{-- LEFT: Upload form --}}
            <div style="flex:1;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid #f1f5f9;">

                <div class="overflow-y-auto scroll-custom px-8 py-6 space-y-5" style="flex:1;">

                    {{-- Description --}}
                    <div>
                        <label class="panel-label">Description</label>
                        <textarea id="inp-comments" rows="3"
                            placeholder="Provide context (optional)..."
                            class="panel-field resize-none"></textarea>
                    </div>

                    {{-- File rows --}}
                    <div style="margin-bottom:4px;">
                        <label class="panel-label">Attach Files <span class="text-red-400">*</span></label>
                        <div id="fileRowsContainer" class="space-y-3"></div>
                    </div>

                    {{-- Add more files --}}
                    <button type="button" onclick="addFileRow()"
                        class="w-full transition-all"
                        style="padding:14px;border:2px dashed #cbd5e1;border-radius:16px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:#94a3b8;background:transparent;margin-top:12px;"
                        onmouseover="this.style.borderColor='#00ada8';this.style.color='#00ada8'"
                        onmouseout="this.style.borderColor='#cbd5e1';this.style.color='#94a3b8'">
                        <i class="fa-solid fa-plus mr-2"></i> ADD MORE FILES
                    </button>

                </div>
            </div>

            {{-- RIGHT: Share --}}
            <div style="width:300px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;background:#f8fafc;">

                {{-- Right header --}}
                <div class="px-6 pt-6 pb-4 flex-shrink-0" style="border-bottom:1px solid #e2e8f0;">
                    <div class="flex items-center gap-2 mb-1">
                        <div class="w-7 h-7 rounded-lg flex items-center justify-center" style="background:#ede9fe">
                            <i class="fa-solid fa-share-nodes text-xs" style="color:#7c3aed"></i>
                        </div>
                        <h3 class="text-sm font-extrabold text-slate-900">Share Permissions</h3>
                    </div>
                    <p class="text-[11px] text-slate-400 ml-9">Add users who can access this document.</p>
                </div>

                {{-- Target users --}}
                <div style="flex:1;display:flex;flex-direction:column;overflow:hidden;padding:16px 20px;">
                    <label class="panel-label mb-3">Target Users</label>

                    {{-- Search --}}
                    <div style="position:relative;flex-shrink:0;margin-bottom:8px;">
                        <i class="fa-solid fa-magnifying-glass" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:10px;"></i>
                        <input id="shareSearchUpload" type="text" placeholder="Search by name or email…"
                            autocomplete="off" class="panel-field" style="padding-left:32px;font-size:11px;"
                            oninput="onUploadShareSearch()">
                    </div>
                    <div id="uploadShareSuggestions"
                        style="border-radius:12px;border:1px solid #e2e8f0;background:#fff;box-shadow:0 8px 25px rgba(0,0,0,0.08);overflow:hidden;display:none;margin-bottom:8px;flex-shrink:0;max-height:160px;overflow-y:auto;"></div>

                    {{-- User list --}}
                    <div id="uploadShareChips" class="scroll-custom"
                         style="flex:1;overflow-y:auto;min-height:0;">
                        <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;">
                            <div style="width:40px;height:40px;border-radius:12px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;">
                                <i class="fa-solid fa-users" style="color:#cbd5e1;font-size:16px;"></i>
                            </div>
                            <p style="font-size:11px;color:#94a3b8;font-weight:600;text-align:center;">No users added yet</p>
                        </div>
                    </div>
                </div>

                {{-- Footer buttons --}}
                <div style="padding:16px 20px 20px;flex-shrink:0;border-top:1px solid #e2e8f0;background:#f8fafc;display:flex;flex-direction:column;gap:8px;">
                    <button type="button" id="uploadSubmitBtn" onclick="submitUpload()"
                        style="width:100%;padding:13px;border-radius:16px;background:#00ada8;color:#fff;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:0.12em;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(0,173,168,0.3);display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity 0.2s;"
                        onmouseover="this.style.opacity='0.88'" onmouseout="this.style.opacity='1'">
                        <i class="fa-solid fa-share-nodes"></i> FINALIZE &amp; SHARE
                    </button>
                    <button type="button" onclick="closeUploadModal()"
                        style="width:100%;padding:10px;border-radius:12px;background:transparent;color:#64748b;font-size:11px;font-weight:700;border:1.5px solid #e2e8f0;cursor:pointer;transition:background 0.2s;"
                        onmouseover="this.style.background='#f1f5f9'" onmouseout="this.style.background='transparent'">
                        Cancel
                    </button>
                </div>

            </div>
        </div>

    </div>
</div>

<!-- ── ALERT MODAL — rendered last so it always floats above all other modals ── -->
<div id="alertModal" class="fixed inset-0 hidden items-center justify-center p-4" style="z-index:9999;">
    <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onclick="closeAlert()"></div>
    <div class="relative bg-white p-8 rounded-[2rem] shadow-2xl max-w-sm w-full text-center modal-enter">
        <div id="alertIcon" class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <i id="alertIconInner" class="text-2xl"></i>
        </div>
        <h3 id="alertTitle" class="font-extrabold text-slate-800 text-base"></h3>
        <p id="alertMsg" class="text-xs text-slate-500 mt-2 leading-relaxed"></p>
        <div class="mt-8">
            <button onclick="closeAlert()" class="w-full py-3 bg-[#00ada8] text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:opacity-90 transition-all">OK</button>
        </div>
    </div>
</div>
@endpush

@push('scripts')
<script>
    const CSRF_TOKEN     = '{{ csrf_token() }}';
    const STORE_URL      = '{{ route("admin.general-documents.store") }}';
    const SEARCH_URL     = '{{ route("admin.general-documents.search-users") }}';
    const FILES_URL      = '{{ url("admin/general-documents") }}/:id/files';
    const SHARE_URL      = '{{ url("admin/general-documents") }}/:id/share';
    const DELETE_URL     = '{{ url("admin/general-documents") }}/:id';
    const DOWNLOAD_BASE  = '{{ url("admin/general-documents") }}';

    const DOC_TYPES = @json($docTypes);
    const PERM      = @json($gdPerms);
    const PER_PAGE  = 8;

    let rows        = @json($documents->values());
    let page        = 1;
    let currentView = 'list';
    let ownerFilter = 'all';
    let deleteIdx   = null;
    let shareDocId  = null;
    let shareDocIdx = null;

    const avatarColors = ['bg-teal-500','bg-blue-500','bg-purple-500','bg-orange-500','bg-rose-500','bg-green-500','bg-indigo-500','bg-amber-500'];

    // ── Alert modal ──
    function showAlert(message, type = 'error') {
        const configs = {
            error:   { bg: 'bg-red-50',   text: 'text-red-500',   icon: 'fa-circle-xmark',        title: 'Something went wrong' },
            warning: { bg: 'bg-amber-50', text: 'text-amber-500', icon: 'fa-triangle-exclamation', title: 'Please check your input' },
            info:    { bg: 'bg-sky-50',   text: 'text-sky-500',   icon: 'fa-circle-info',           title: 'Information' },
            success: { bg: 'bg-teal-50',  text: 'text-teal-500',  icon: 'fa-circle-check',          title: 'Success' },
        };
        const cfg = configs[type] || configs.error;
        document.getElementById('alertIcon').className      = `w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 ${cfg.bg}`;
        document.getElementById('alertIconInner').className = `fa-solid ${cfg.icon} text-2xl ${cfg.text}`;
        document.getElementById('alertTitle').textContent   = cfg.title;
        document.getElementById('alertMsg').textContent     = message;
        const m = document.getElementById('alertModal');
        m.classList.remove('hidden'); m.classList.add('flex');
    }
    function closeAlert() {
        const m = document.getElementById('alertModal');
        m.classList.add('hidden'); m.classList.remove('flex');
    }

    // ── Permission denied ──
    function showGdPermDenied(action) {
        const msgs = {
            add:      'You do not have permission to add new documents.',
            delete:   'You do not have permission to delete documents.',
            download: 'You do not have permission to share or download documents.',
        };
        document.getElementById('gdPermDeniedMsg').textContent = msgs[action] || 'Permission denied.';
        const m = document.getElementById('gdPermDeniedModal');
        m.classList.remove('hidden'); m.classList.add('flex');
    }
    function closeGdPermDenied() {
        const m = document.getElementById('gdPermDeniedModal');
        m.classList.add('hidden'); m.classList.remove('flex');
    }
    function handleAddDocument() {
        if (!PERM.add) { showGdPermDenied('add'); return; }
        openUploadModal();
    }

    // ── Owner filter ──
    function setOwnerFilter(v) {
        ownerFilter = v;
        const allBtn = document.getElementById('filterAllBtn');
        const meBtn  = document.getElementById('filterMeBtn');
        const activeClass   = 'px-4 py-1.5 rounded-full text-[11px] font-bold uppercase tracking-widest bg-white shadow-sm text-[#00ada8]';
        const inactiveClass = 'px-4 py-1.5 rounded-full text-[11px] font-bold uppercase tracking-widest text-slate-400 hover:text-[#00ada8]';
        allBtn.className = v === 'all' ? activeClass : inactiveClass;
        meBtn.className  = v === 'me'  ? activeClass : inactiveClass;
        page = 1; render();
    }

    function getFiltered() {
        const q = document.getElementById('searchInput').value.toLowerCase();
        return rows.filter(r => {
            if (ownerFilter === 'me' && !r.uploadedByMe) return false;
            return (r.docType.toLowerCase().includes(q) ||
                    r.comments.toLowerCase().includes(q) ||
                    r.uploadedBy.toLowerCase().includes(q));
        });
    }

    // ── File icon helper ──
    function fileIcon(type) {
        const t = (type || '').toUpperCase();
        if (t === 'PDF')  return 'fa-file-pdf text-red-500';
        if (t === 'DOC' || t === 'DOCX') return 'fa-file-word text-sky-600';
        if (t === 'XLS' || t === 'XLSX') return 'fa-file-excel text-emerald-600';
        if (t === 'JPG' || t === 'JPEG' || t === 'PNG' || t === 'IMG') return 'fa-file-image text-amber-500';
        if (t === 'ZIP')  return 'fa-file-zipper text-slate-500';
        return 'fa-file-lines text-slate-500';
    }

    // ── Render ──
    function render() {
        const filtered   = getFiltered();
        const total      = filtered.length;
        const totalPages = Math.max(1, Math.ceil(total / PER_PAGE));
        if (page > totalPages) page = 1;
        const start = (page - 1) * PER_PAGE;
        const slice = filtered.slice(start, start + PER_PAGE);

        // LIST
        document.getElementById('listBody').innerHTML = slice.map(r => {
            const ri    = rows.indexOf(r);
            const color = avatarColors[ri % avatarColors.length];
            const init  = (r.docType || 'GD').slice(0, 2).toUpperCase();

            // shared-with avatars (max 3)
            const sw = r.sharedWith || [];
            let swHtml = '';
            sw.slice(0, 3).forEach((u, i) => {
                const uc = avatarColors[(ri + i + 1) % avatarColors.length];
                swHtml += `<div class="w-7 h-7 ${uc} rounded-full flex items-center justify-center text-[10px] font-bold text-white -ml-2 first:ml-0 border-2 border-white" title="${u.name}">${u.initials}</div>`;
            });
            if (sw.length > 3) swHtml += `<div class="w-7 h-7 bg-slate-400 rounded-full flex items-center justify-center text-[10px] font-bold text-white -ml-2 border-2 border-white">+${sw.length - 3}</div>`;

            return `<tr class="transition-colors">
                <td class="py-3 px-4">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 ${color} text-white text-[11px] font-black flex items-center justify-center rounded-xl shrink-0">${init}</div>
                        <div>
                            <p class="text-xs font-bold text-slate-800">${r.docType}</p>
                            <p class="text-[10px] text-slate-400">General Document</p>
                        </div>
                    </div>
                </td>
                <td class="py-3 px-4">
                    <p class="text-xs font-semibold text-slate-700 truncate max-w-[200px]" title="${r.comments}">${r.comments || '—'}</p>
                </td>
                <td class="py-3 px-4 text-xs font-semibold text-slate-600 whitespace-nowrap">${r.uploadedOn}</td>
                <td class="py-3 px-4">
                    <span class="pill pill-blue"><i class="fa-solid fa-user text-[10px]"></i>${r.uploadedBy}</span>
                </td>
                <td class="py-3 px-4 text-center">
                    <span class="text-xs font-bold text-slate-800">${r.attachmentsCount}</span>
                </td>
                <td class="py-3 px-4">
                    <div class="flex items-center avatar-stack justify-center">${swHtml || '<span class="text-[10px] text-slate-400">—</span>'}</div>
                </td>
                <td class="py-3 px-4">
                    <div class="flex items-center justify-center gap-2">
                        <button onclick="openDocPanel(${ri})" title="View Files"
                            class="w-8 h-8 flex items-center justify-center rounded-lg bg-slate-100 text-slate-500 hover:bg-[#e6f7f6] hover:text-[#00ada8] transition-colors">
                            <i class="fa-solid fa-eye text-[10px]"></i>
                        </button>
                        <button onclick="openShareDocPanel(${ri})" title="Share"
                            class="w-8 h-8 flex items-center justify-center rounded-lg bg-slate-100 text-slate-500 hover:bg-violet-50 hover:text-violet-500 transition-colors">
                            <i class="fa-solid fa-share-nodes text-[10px]"></i>
                        </button>
                        <button onclick="openDeleteModal(${ri})" title="Delete"
                            class="w-8 h-8 flex items-center justify-center rounded-lg bg-slate-100 text-slate-500 hover:bg-red-50 hover:text-red-500 transition-colors">
                            <i class="fa-solid fa-trash-can text-[10px]"></i>
                        </button>
                    </div>
                </td>
            </tr>`;
        }).join('');

        // GRID
        document.getElementById('gridContainer').innerHTML = slice.map(r => {
            const ri    = rows.indexOf(r);
            const color = avatarColors[ri % avatarColors.length];
            const init  = (r.docType || 'GD').slice(0, 2).toUpperCase();

            // shared with avatars
            const sw = r.sharedWith || [];
            let swHtml = '';
            sw.slice(0, 3).forEach((u, i) => {
                const uc = avatarColors[(ri + i + 1) % avatarColors.length];
                swHtml += `<div class="w-7 h-7 ${uc} rounded-full flex items-center justify-center text-[10px] font-bold text-white -ml-2 first:ml-0 border-2 border-white" title="${u.name}">${u.initials}</div>`;
            });
            if (sw.length > 3) swHtml += `<div class="w-7 h-7 bg-slate-400 rounded-full flex items-center justify-center text-[10px] font-bold text-white -ml-2 border-2 border-white">+${sw.length - 3}</div>`;

            // file pills (max 2)
            const atts = r.attachments || [];
            let fileHtml = '';
            atts.slice(0, 2).forEach(a => {
                const icon = fileIcon(a.type);
                fileHtml += `<div class="file-pill"><i class="fa-solid ${icon}"></i><span class="truncate max-w-[110px]">${a.name}</span></div>`;
            });
            if (atts.length > 2) fileHtml += `<div class="file-more-pill">+${atts.length - 2}</div>`;

            return `<article class="doc-card group cursor-pointer" onclick="openDocPanel(${ri})">
                <div class="flex items-start justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 ${color} text-white text-[11px] font-black flex items-center justify-center rounded-xl shrink-0">${init}</div>
                        <div>
                            <p class="text-sm font-extrabold text-slate-900">${r.docType}</p>
                            <p class="text-[11px] text-slate-400">General Document</p>
                        </div>
                    </div>
                    <div class="flex avatar-stack items-center">${swHtml}</div>
                </div>
                <div class="mt-3 flex items-center gap-2 flex-wrap">${fileHtml || '<span class="text-[11px] text-slate-400">No files</span>'}</div>
                <div class="doc-card-footer">
                    <div>
                        <span class="font-semibold">Shared by:</span>
                        <span class="ml-1 font-semibold text-slate-800">${r.uploadedBy}</span>
                    </div>
                    <div class="flex items-center gap-2 footer-actions">
                        <button title="Share" onclick="event.stopPropagation(); openShareDocPanel(${ri})">
                            <i class="fa-solid fa-share-nodes"></i>
                        </button>
                        <button title="Delete" onclick="event.stopPropagation(); openDeleteModal(${ri})">
                            <i class="fa-solid fa-trash-can"></i>
                        </button>
                    </div>
                </div>
            </article>`;
        }).join('');

        // Pagination
        document.getElementById('showingText').textContent =
            `Showing ${total ? start + 1 : 0}–${Math.min(start + PER_PAGE, total)} of ${total} documents`;
        const pag = document.getElementById('pagination');
        pag.innerHTML = `<button onclick="changePage(${page-1})" ${page===1?'disabled':''} class="w-8 h-8 rounded-lg border border-slate-200 text-slate-400 disabled:opacity-40"><i class="fa-solid fa-chevron-left text-[10px]"></i></button>`;
        for (let p = 1; p <= totalPages; p++)
            pag.innerHTML += `<button onclick="changePage(${p})" class="w-8 h-8 rounded-lg text-xs font-bold ${p===page?'bg-[#00ada8] text-white':'border border-slate-200 text-slate-400'}">${p}</button>`;
        pag.innerHTML += `<button onclick="changePage(${page+1})" ${page===totalPages?'disabled':''} class="w-8 h-8 rounded-lg border border-slate-200 text-slate-400 disabled:opacity-40"><i class="fa-solid fa-chevron-right text-[10px]"></i></button>`;
    }

    function changePage(p) {
        const tp = Math.max(1, Math.ceil(getFiltered().length / PER_PAGE));
        if (p < 1 || p > tp) return;
        page = p; render();
    }

    function setView(v) {
        currentView = v;
        const isGrid = v === 'grid';
        document.getElementById('gridContainer').style.display = isGrid ? '' : 'none';
        document.getElementById('listContainer').style.display = isGrid ? 'none' : '';
        document.getElementById('gridBtn').className = `w-9 h-9 flex items-center justify-center rounded-lg ${isGrid ? 'bg-white shadow-sm text-[#00ada8]' : 'text-slate-400 hover:text-[#00ada8]'}`;
        document.getElementById('listBtn').className = `w-9 h-9 flex items-center justify-center rounded-lg ${!isGrid ? 'bg-white shadow-sm text-[#00ada8]' : 'text-slate-400 hover:text-[#00ada8]'}`;
        render();
    }

    // ── DOC VIEW PANEL ──
    async function openDocPanel(idx) {
        const r = rows[idx];
        closeUploadModal();

        document.getElementById('docPanelTitle').textContent   = r.docType;
        document.getElementById('docPanelAccount').textContent = r.comments || '';
        document.getElementById('docPanelStatus').textContent  = 'Files';
        document.getElementById('docPanelAvatar').textContent  = (r.docType || 'GD').slice(0, 2).toUpperCase();
        document.getElementById('docPanelFileList').innerHTML  = '<p class="text-xs text-slate-400">Loading...</p>';

        document.getElementById('docPanel').classList.add('panel-open');
        document.body.classList.add('panel-open-state');

        try {
            const res  = await fetch(FILES_URL.replace(':id', r.id), { headers: { 'Accept': 'application/json' } });
            const data = await res.json();
            const atts = data.attachments || [];
            document.getElementById('docPanelFileList').innerHTML = atts.length
                ? atts.map(a => `
                    <div class="flex items-center justify-between px-4 py-4 bg-slate-50 rounded-2xl border border-slate-100 hover:border-slate-200 transition-all">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center shadow-sm">
                                <i class="fa-solid ${fileIcon(a.type)} text-lg"></i>
                            </div>
                            <div>
                                <p class="text-xs font-extrabold text-slate-900 truncate max-w-[180px]">${a.name}</p>
                                <p class="text-[10px] font-semibold text-slate-400">${a.docType || a.type} · ${a.size}</p>
                                <p class="text-[10px] text-slate-400">By ${a.uploadedBy} · ${a.uploadedOn}</p>
                            </div>
                        </div>
                        <a href="${a.downloadUrl}" title="Download"
                            class="w-9 h-9 rounded-full flex items-center justify-center bg-white text-slate-400 hover:bg-slate-100 hover:text-slate-700 border border-slate-200">
                            <i class="fa-solid fa-circle-down text-lg"></i>
                        </a>
                    </div>`)
                    .join('')
                : '<p class="text-xs text-slate-400">No files uploaded yet.</p>';
        } catch(e) {
            document.getElementById('docPanelFileList').innerHTML = '<p class="text-xs text-red-400">Failed to load files.</p>';
        }
    }

    function closeDocPanel() {
        document.getElementById('docPanel').classList.remove('panel-open');
        document.body.classList.remove('panel-open-state');
    }

    // ── UPLOAD MODAL ──
    let uploadShareSelected = [];
    let uploadShareTimer    = null;

    function openUploadModal() {
        closeDocPanel();
        resetUploadModal();
        const m = document.getElementById('uploadModal');
        m.classList.remove('hidden');
        m.classList.add('flex');
    }

    function closeUploadModal() {
        const m = document.getElementById('uploadModal');
        m.classList.add('hidden');
        m.classList.remove('flex');
    }

    function resetUploadModal() {
        document.getElementById('inp-comments').value = '';
        document.getElementById('shareSearchUpload').value = '';
        document.getElementById('uploadShareSuggestions').style.display = 'none';
        uploadShareSelected = [];
        renderUploadShareUsers();
        document.getElementById('fileRowsContainer').innerHTML = '';
        addFileRow();
    }

    // ── File row management ──
    let fileRowCounter = 0;
    function addFileRow() {
        const container = document.getElementById('fileRowsContainer');
        const idx = fileRowCounter++;
        const div = document.createElement('div');
        div.className = 'file-upload-row';
        div.dataset.rowIdx = idx;

        const dtOptionsHtml = DOC_TYPES.map(dt =>
            `<div class="dt-option" data-id="${dt.id}" data-name="${dt.name.replace(/"/g,'&quot;')}"
                  onclick="selectDtOption(${idx},${dt.id},this.dataset.name)">${dt.name}</div>`
        ).join('');

        div.innerHTML = `
            <input type="file" id="fileInput_${idx}" style="display:none" onchange="onFileChosen(${idx})">
            <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 cursor-pointer transition-colors"
                 id="fileIconWrap_${idx}" style="background:#e6f7f6"
                 onclick="document.getElementById('fileInput_${idx}').click()">
                <i class="fa-solid fa-file-circle-plus" style="color:#00ada8"></i>
            </div>
            <span id="fileName_${idx}" class="flex-1 text-xs text-slate-400 truncate cursor-pointer"
                  onclick="document.getElementById('fileInput_${idx}').click()">
                Click to choose file…
            </span>
            <div style="position:relative;flex-shrink:0;">
                <input type="hidden" class="file-row-doctype-hidden" id="fileDocType_${idx}" value="">
                <button type="button" class="dt-trigger" id="dtTrigger_${idx}"
                        onclick="toggleDtDropdown(${idx})">
                    <span id="dtLabel_${idx}" style="flex:1;text-align:left;">Type…</span>
                    <i class="fa-solid fa-chevron-down" style="font-size:8px;opacity:0.45;flex-shrink:0;"></i>
                </button>
                <div class="dt-menu" id="dtMenu_${idx}"
                     style="position:fixed;display:none;z-index:9999;min-width:210px;">
                    <div class="dt-search-wrap">
                        <i class="fa-solid fa-magnifying-glass"></i>
                        <input type="text" class="dt-search" id="dtSearch_${idx}"
                               placeholder="Search type…"
                               oninput="filterDtOptions(${idx})"
                               onclick="event.stopPropagation()">
                    </div>
                    <div id="dtOptions_${idx}" style="max-height:180px;overflow-y:auto;" class="scroll-custom">
                        ${dtOptionsHtml}
                    </div>
                </div>
            </div>
            <button type="button" onclick="removeFileRow(this)"
                class="w-8 h-8 flex items-center justify-center rounded-xl flex-shrink-0 transition-colors"
                style="background:#fef2f2;color:#f87171">
                <i class="fa-solid fa-trash text-xs"></i>
            </button>`;
        container.appendChild(div);
    }

    function removeFileRow(btn) {
        const row = btn.closest('.file-upload-row');
        const container = document.getElementById('fileRowsContainer');
        if (container.children.length <= 1) {
            const idx = row.dataset.rowIdx;
            document.getElementById('fileInput_' + idx).value = '';
            document.getElementById('fileName_' + idx).textContent = 'Click to choose file…';
            document.getElementById('fileName_' + idx).className = 'flex-1 text-xs text-slate-400 truncate cursor-pointer';
            document.getElementById('fileIconWrap_' + idx).style.background = '#e6f7f6';
            row.classList.remove('has-file');
        } else {
            row.remove();
        }
    }

    function onFileChosen(idx) {
        const input   = document.getElementById('fileInput_' + idx);
        const label   = document.getElementById('fileName_' + idx);
        const iconWrap = document.getElementById('fileIconWrap_' + idx);
        const row     = input.closest('.file-upload-row');
        if (input.files && input.files[0]) {
            label.textContent = input.files[0].name;
            label.className   = 'flex-1 text-xs text-slate-800 font-semibold truncate cursor-pointer';
            iconWrap.style.background = '#ccfbf1';
            row.classList.add('has-file');
        } else {
            label.textContent = 'Click to choose file…';
            label.className   = 'flex-1 text-xs text-slate-400 truncate cursor-pointer';
            iconWrap.style.background = '#e6f7f6';
            row.classList.remove('has-file');
        }
    }

    // ── Custom doc-type dropdown ──
    function toggleDtDropdown(idx) {
        const menu    = document.getElementById('dtMenu_' + idx);
        const trigger = document.getElementById('dtTrigger_' + idx);
        const isOpen  = menu.style.display !== 'none';

        // close all others first
        document.querySelectorAll('.dt-menu').forEach(m => {
            if (m.id !== 'dtMenu_' + idx) {
                m.style.display = 'none';
                const t = document.getElementById(m.id.replace('dtMenu_', 'dtTrigger_'));
                if (t) t.classList.remove('open');
            }
        });

        if (isOpen) {
            menu.style.display = 'none';
            trigger.classList.remove('open');
        } else {
            const rect = trigger.getBoundingClientRect();
            const spaceBelow = window.innerHeight - rect.bottom;
            menu.style.display = 'block';
            menu.style.width   = Math.max(rect.width, 210) + 'px';
            menu.style.left    = rect.left + 'px';
            if (spaceBelow < 220) {
                menu.style.top    = '';
                menu.style.bottom = (window.innerHeight - rect.top + 4) + 'px';
            } else {
                menu.style.bottom = '';
                menu.style.top    = (rect.bottom + 4) + 'px';
            }
            trigger.classList.add('open');
            const search = document.getElementById('dtSearch_' + idx);
            if (search) { search.value = ''; filterDtOptions(idx); search.focus(); }
        }
    }

    function filterDtOptions(idx) {
        const q    = (document.getElementById('dtSearch_' + idx)?.value || '').toLowerCase();
        const opts = document.querySelectorAll('#dtOptions_' + idx + ' .dt-option');
        let visible = 0;
        opts.forEach(opt => {
            const match = opt.dataset.name.toLowerCase().includes(q);
            opt.style.display = match ? '' : 'none';
            if (match) visible++;
        });
        const optsCont = document.getElementById('dtOptions_' + idx);
        let emptyEl = optsCont.querySelector('.dt-empty');
        if (!visible) {
            if (!emptyEl) { emptyEl = document.createElement('div'); emptyEl.className = 'dt-empty'; optsCont.appendChild(emptyEl); }
            emptyEl.textContent = 'No results';
        } else if (emptyEl) {
            emptyEl.remove();
        }
    }

    function selectDtOption(idx, id, name) {
        document.getElementById('fileDocType_' + idx).value = id;
        document.getElementById('dtLabel_'    + idx).textContent = name;
        const trigger = document.getElementById('dtTrigger_' + idx);
        trigger.classList.remove('open');
        trigger.classList.add('has-value');
        // mark selected state
        document.querySelectorAll('#dtOptions_' + idx + ' .dt-option').forEach(opt => {
            opt.classList.toggle('selected', String(opt.dataset.id) === String(id));
        });
        document.getElementById('dtMenu_' + idx).style.display = 'none';
    }

    // close any open dropdown on outside click
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.dt-trigger') && !e.target.closest('.dt-menu')) {
            document.querySelectorAll('.dt-menu').forEach(m => {
                m.style.display = 'none';
                const t = document.getElementById(m.id.replace('dtMenu_', 'dtTrigger_'));
                if (t) t.classList.remove('open');
            });
        }
    });

    // ── Upload share search ──
    function onUploadShareSearch() {
        clearTimeout(uploadShareTimer);
        uploadShareTimer = setTimeout(doUploadShareSearch, 250);
    }

    async function doUploadShareSearch() {
        const q = document.getElementById('shareSearchUpload').value.trim();
        const sugEl = document.getElementById('uploadShareSuggestions');
        if (!q) { sugEl.style.display = 'none'; return; }

        try {
            const res  = await fetch(SEARCH_URL + '?q=' + encodeURIComponent(q), { headers: { 'Accept': 'application/json' } });
            const data = await res.json();
            const alreadyIds = uploadShareSelected.map(u => u.id);
            const filtered   = data.filter(u => !alreadyIds.includes(u.id));

            sugEl.innerHTML = filtered.length
                ? filtered.map(u => `
                    <div class="flex items-center gap-3 px-4 py-2.5 cursor-pointer hover:bg-teal-50 transition-colors"
                        onclick="addUploadShareUser(${u.id},'${u.name.replace(/'/g,"\\'")}','${u.email.replace(/'/g,"\\'")}','${u.initials}')">
                        <div class="w-8 h-8 bg-teal-500 text-white text-[10px] font-black flex items-center justify-center rounded-full shrink-0">${u.initials}</div>
                        <div class="flex-1 min-w-0">
                            <p class="text-xs font-bold text-slate-800 truncate">${u.name}</p>
                            <p class="text-[10px] text-slate-400 truncate">${u.email}</p>
                        </div>
                        <i class="fa-solid fa-plus text-teal-400 text-xs"></i>
                    </div>`).join('')
                : '<p class="px-4 py-3 text-xs text-slate-400">No users found.</p>';
            sugEl.style.display = 'block';
        } catch(e) { /* ignore */ }
    }

    function addUploadShareUser(id, name, email, initials) {
        if (!uploadShareSelected.find(u => u.id === id)) {
            uploadShareSelected.push({ id, name, email, initials });
        }
        document.getElementById('shareSearchUpload').value = '';
        document.getElementById('uploadShareSuggestions').style.display = 'none';
        renderUploadShareUsers();
    }

    function removeUploadShareUser(id) {
        uploadShareSelected = uploadShareSelected.filter(u => u.id !== id);
        renderUploadShareUsers();
    }

    function renderUploadShareUsers() {
        const el = document.getElementById('uploadShareChips');
        if (!uploadShareSelected.length) {
            el.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;">
                <div style="width:40px;height:40px;border-radius:12px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;">
                    <i class="fa-solid fa-users" style="color:#cbd5e1;font-size:16px;"></i>
                </div>
                <p style="font-size:11px;color:#94a3b8;font-weight:600;text-align:center;">No users added yet</p>
            </div>`;
            return;
        }
        const colors = ['#00ada8','#8b5cf6','#3b82f6','#f59e0b','#ec4899','#10b981'];
        el.innerHTML = `<div style="display:flex;flex-direction:column;gap:8px;padding-top:4px;">` +
            uploadShareSelected.map((u, i) => {
                const c = colors[i % colors.length];
                return `<div style="display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:10px 12px;">
                    <div style="width:36px;height:36px;border-radius:10px;background:${c};color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;">${u.initials}</div>
                    <div style="flex:1;min-width:0;">
                        <p style="font-size:12px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${u.name}</p>
                        <p style="font-size:10px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${u.email}</p>
                    </div>
                    <button type="button" onclick="removeUploadShareUser(${u.id})"
                        style="width:28px;height:28px;border-radius:8px;background:#fef2f2;color:#f87171;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <i class="fa-solid fa-xmark" style="font-size:9px;"></i>
                    </button>
                </div>`;
            }).join('') + `</div>`;
    }

    // ── Submit upload ──
    async function submitUpload() {
        // Collect files + per-file doc types
        const fileInputs     = Array.from(document.querySelectorAll('#fileRowsContainer input[type="file"]'));
        const docTypeHiddens = Array.from(document.querySelectorAll('#fileRowsContainer .file-row-doctype-hidden'));

        const validPairs = fileInputs.reduce((acc, inp, i) => {
            if (inp.files && inp.files[0]) acc.push({ file: inp.files[0], docTypeId: docTypeHiddens[i]?.value || '' });
            return acc;
        }, []);

        if (!validPairs.length) { showAlert('Please select at least one file to upload.', 'warning'); return; }

        const missingType = validPairs.findIndex(p => !p.docTypeId);
        if (missingType !== -1) {
            showAlert(`Please select a document type for file ${missingType + 1}.`, 'warning'); return;
        }

        const btn = document.getElementById('uploadSubmitBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i> Uploading...';

        const payload = new FormData();
        payload.append('_token', CSRF_TOKEN);
        payload.append('comments', document.getElementById('inp-comments').value.trim());

        validPairs.forEach(p => {
            payload.append('files[]', p.file);
            payload.append('file_doc_types[]', p.docTypeId);
        });

        uploadShareSelected.forEach(u => {
            payload.append('share_user_ids[]', u.id);
        });

        try {
            const res  = await fetch(STORE_URL, { method: 'POST', body: payload, headers: { 'Accept': 'application/json' } });
            const data = await res.json();
            if (data.success) {
                rows.unshift(data.document);
                page = 1;
                render();
                closeUploadModal();
                showAlert('Document uploaded successfully.', 'success');
            } else {
                const err = data.errors ? Object.values(data.errors)[0]?.[0] : (data.message || 'Upload failed.');
                showAlert(err, 'warning');
            }
        } catch(e) {
            showAlert('Request failed. Please try again.');
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-share-nodes mr-2"></i> FINALIZE &amp; SHARE';
        }
    }

    // ── Delete ──
    function openDeleteModal(idx) {
        if (!PERM.delete) { showGdPermDenied('delete'); return; }
        deleteIdx = idx;
        const r = rows[idx];
        const label = r.docType + (r.comments ? ' — ' + r.comments.slice(0, 50) + (r.comments.length > 50 ? '…' : '') : '');
        document.getElementById('deleteDocName').textContent = label;
        const m = document.getElementById('deleteModal');
        m.classList.remove('hidden'); m.classList.add('flex');
    }
    function closeDeleteModal() {
        const m = document.getElementById('deleteModal');
        m.classList.add('hidden'); m.classList.remove('flex');
        deleteIdx = null;
    }
    async function confirmDelete() {
        if (deleteIdx === null) return;
        const docId = rows[deleteIdx].id;
        const btn = document.getElementById('deleteConfirmBtn');
        btn.disabled = true;
        btn.textContent = 'Removing...';

        const payload = new FormData();
        payload.append('_token', CSRF_TOKEN);
        payload.append('_method', 'DELETE');

        try {
            const res  = await fetch(DELETE_URL.replace(':id', docId), { method: 'POST', body: payload, headers: { 'Accept': 'application/json' } });
            const data = await res.json();
            if (data.success) {
                rows.splice(deleteIdx, 1);
                closeDeleteModal();
                closeDocPanel();
                render();
            } else {
                showAlert(data.message || 'Delete failed.');
            }
        } catch(e) {
            showAlert('Request failed. Please try again.');
        } finally {
            btn.disabled = false;
            btn.textContent = 'Remove';
        }
    }

    // ── Share Doc Panel (inline in docPanel) ──
    let shareDocSharedUsers = [];
    let shareSearchTimer    = null;

    function openShareDocPanel(idx) {
        if (!PERM.download) { showGdPermDenied('download'); return; }
        const r = rows[idx];
        shareDocId  = r.id;
        shareDocIdx = idx;

        // Prefill with existing sharedWith
        shareDocSharedUsers = (r.sharedWith || []).map(u => ({ id: u.id, name: u.name, email: u.email, initials: u.initials }));

        // Open docPanel in share mode
        closeUploadModal();
        document.getElementById('docPanelAvatar').textContent  = (r.docType || 'SD').slice(0, 2).toUpperCase();
        document.getElementById('docPanelAvatar').style.background = '#8b5cf6';
        document.getElementById('docPanelStatus').textContent  = 'Share';
        document.getElementById('docPanelStatus').style.color  = '#8b5cf6';
        document.getElementById('docPanelTitle').textContent   = 'Share Document';
        document.getElementById('docPanelAccount').textContent = r.docType;

        document.getElementById('docPanelFileList').innerHTML = buildSharePanelHTML();

        document.getElementById('docPanel').classList.add('panel-open');
        document.body.classList.add('panel-open-state');

        setTimeout(() => {
            const inp = document.getElementById('sharePanelSearch');
            if (inp) inp.focus();
        }, 200);
    }

    function buildSharePanelHTML() {
        return `
            <div class="space-y-4">
                <div>
                    <label class="panel-label">Search &amp; Add User</label>
                    <div class="relative">
                        <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[10px]"></i>
                        <input id="sharePanelSearch" type="text" placeholder="Type name or email..."
                            autocomplete="off"
                            oninput="onSharePanelSearch()"
                            class="panel-field pl-8 text-xs">
                    </div>
                    <div id="sharePanelSuggestions"
                        class="mt-1 rounded-xl border border-slate-100 bg-white shadow-lg overflow-hidden hidden z-10 relative"></div>
                </div>
                <div>
                    <label class="panel-label">Shared With</label>
                    <div id="sharePanelUserList" class="space-y-2 min-h-[48px]"></div>
                </div>
                <div class="flex gap-3 pt-2">
                    <button type="button" onclick="closeDocPanel()"
                        class="flex-1 py-2.5 bg-slate-100 rounded-xl text-[10px] font-black uppercase text-slate-500 hover:bg-slate-200 transition-all">
                        Cancel
                    </button>
                    <button type="button" onclick="confirmShareDoc()"
                        class="flex-1 py-2.5 rounded-xl text-[10px] font-black uppercase text-white shadow-lg transition-all hover:opacity-90"
                        style="background:radial-gradient(circle at top left,#8b5cf6 0%,#6d28d9 100%);">
                        <i class="fa-solid fa-share-nodes mr-1"></i> Share
                    </button>
                </div>
            </div>`;
    }

    function renderSharePanelList() {
        const el = document.getElementById('sharePanelUserList');
        if (!el) return;
        if (!shareDocSharedUsers.length) {
            el.innerHTML = '<p class="text-xs text-slate-400">No users added yet.</p>';
            return;
        }
        el.innerHTML = shareDocSharedUsers.map((u, i) => `
            <div class="flex items-center gap-3 bg-slate-50 border border-slate-100 rounded-xl px-3 py-2.5">
                <div class="w-8 h-8 bg-violet-500 text-white text-[10px] font-black flex items-center justify-center rounded-full shrink-0">${u.initials || u.name.slice(0,2).toUpperCase()}</div>
                <div class="flex-1 min-w-0">
                    <p class="text-xs font-bold text-slate-800 truncate">${u.name}</p>
                    <p class="text-[10px] text-slate-400 truncate">${u.email}</p>
                </div>
                <button onclick="removeSharePanelUser(${i})" type="button"
                    class="w-6 h-6 flex items-center justify-center rounded-full bg-red-50 text-red-400 hover:bg-red-100 transition-all">
                    <i class="fa-solid fa-xmark text-[9px]"></i>
                </button>
            </div>`).join('');
    }

    function removeSharePanelUser(idx) {
        shareDocSharedUsers.splice(idx, 1);
        renderSharePanelList();
    }

    function onSharePanelSearch() {
        clearTimeout(shareSearchTimer);
        shareSearchTimer = setTimeout(doSharePanelSearch, 250);
    }

    async function doSharePanelSearch() {
        const inp = document.getElementById('sharePanelSearch');
        const sugEl = document.getElementById('sharePanelSuggestions');
        if (!inp || !sugEl) return;
        const q = inp.value.trim();
        if (!q) { sugEl.classList.add('hidden'); return; }

        try {
            const res  = await fetch(SEARCH_URL + '?q=' + encodeURIComponent(q), { headers: { 'Accept': 'application/json' } });
            const data = await res.json();
            const alreadyIds = shareDocSharedUsers.map(u => u.id);
            const filtered = data.filter(u => !alreadyIds.includes(u.id));

            if (!filtered.length) {
                sugEl.innerHTML = '<p class="px-4 py-3 text-xs text-slate-400">No users found.</p>';
            } else {
                sugEl.innerHTML = filtered.map(u => `
                    <div class="flex items-center gap-3 px-4 py-2.5 cursor-pointer hover:bg-violet-50 transition-colors"
                        onclick="addSharePanelUser(${u.id},'${u.name.replace(/'/g,"\\'")}','${u.email.replace(/'/g,"\\'")}','${u.initials}')">
                        <div class="w-8 h-8 bg-violet-500 text-white text-[10px] font-black flex items-center justify-center rounded-full shrink-0">${u.initials}</div>
                        <div class="flex-1 min-w-0">
                            <p class="text-xs font-bold text-slate-800 truncate">${u.name}</p>
                            <p class="text-[10px] text-slate-400 truncate">${u.email}</p>
                        </div>
                        <i class="fa-solid fa-plus text-violet-400 text-xs"></i>
                    </div>`).join('');
            }
            sugEl.classList.remove('hidden');
        } catch(e) { /* ignore */ }
    }

    function addSharePanelUser(id, name, email, initials) {
        if (!shareDocSharedUsers.find(u => u.id === id)) {
            shareDocSharedUsers.push({ id, name, email, initials });
        }
        const inp = document.getElementById('sharePanelSearch');
        if (inp) inp.value = '';
        const sugEl = document.getElementById('sharePanelSuggestions');
        if (sugEl) sugEl.classList.add('hidden');
        renderSharePanelList();
    }

    async function confirmShareDoc() {
        if (shareDocId === null) return;

        if (!shareDocSharedUsers.length) {
            showAlert('Please add at least one user to share this document with.', 'warning');
            return;
        }

        const payload = new FormData();
        payload.append('_token', CSRF_TOKEN);
        shareDocSharedUsers.forEach(u => payload.append('user_ids[]', u.id));

        try {
            const res  = await fetch(SHARE_URL.replace(':id', shareDocId), { method: 'POST', body: payload, headers: { 'Accept': 'application/json' } });
            const data = await res.json();
            if (data.success) {
                // Update local data
                if (shareDocIdx !== null) {
                    rows[shareDocIdx].sharedWith = shareDocSharedUsers.map(u => ({
                        id: u.id, name: u.name, email: u.email, initials: u.initials
                    }));
                }
                closeDocPanel();
                render();
                showAlert('Document shared successfully.', 'success');
            } else {
                showAlert(data.message || 'Share failed.', 'warning');
            }
        } catch(e) {
            showAlert('Request failed. Please try again.');
        }
    }

    // ── Searchable Select (same pattern as portal users) ──
    const _sdClosers = [];

    function initSearchableSelect(id, opts) {
        opts = opts || {};
        const sel = document.getElementById(id);
        if (!sel || sel._sdInit) return;
        sel._sdInit = true;
        sel.style.display = 'none';

        const parent = sel.parentElement;
        const staticChevron = parent.querySelector('i.fa-chevron-down');
        if (staticChevron) staticChevron.style.display = 'none';

        const trigger = document.createElement('div');
        trigger.className = 'panel-field';
        trigger.style.cssText = 'cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;';

        const label = document.createElement('span');
        label.style.cssText = 'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-family:"Plus Jakarta Sans",sans-serif;';

        const arrow = document.createElement('i');
        arrow.className = 'fa-solid fa-chevron-down';
        arrow.style.cssText = 'font-size:9px;color:#94a3b8;flex-shrink:0;margin-left:5px;transition:transform 0.2s;';

        trigger.appendChild(label);
        trigger.appendChild(arrow);

        const panel = document.createElement('div');
        panel.style.cssText = [
            'position:absolute;top:calc(100% + 4px);left:0;right:0;',
            'z-index:9999;background:#fff;border-radius:14px;border:1.5px solid #e2e8f0;',
            'box-shadow:0 8px 32px rgba(0,0,0,0.13);overflow:hidden;display:none;',
        ].join('');

        const searchWrap = document.createElement('div');
        searchWrap.style.cssText = 'padding:8px 8px 6px;border-bottom:1px solid #f1f5f9;';

        const searchInp = document.createElement('input');
        searchInp.type = 'text';
        searchInp.placeholder = 'Search...';
        searchInp.style.cssText = [
            'width:100%;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;',
            'padding:7px 10px;font-size:11px;color:#1e293b;outline:none;box-sizing:border-box;',
            'font-family:"Plus Jakarta Sans",sans-serif;transition:all 0.15s;',
        ].join('');
        searchInp.addEventListener('focus', () => {
            searchInp.style.borderColor = '#00ada8';
            searchInp.style.background  = '#fff';
            searchInp.style.boxShadow   = '0 0 0 3px rgba(0,173,168,0.08)';
        });
        searchInp.addEventListener('blur', () => {
            searchInp.style.borderColor = '#e2e8f0';
            searchInp.style.background  = '#f8fafc';
            searchInp.style.boxShadow   = 'none';
        });
        searchWrap.appendChild(searchInp);

        const optsList = document.createElement('div');
        optsList.style.cssText = 'max-height:168px;overflow-y:auto;padding:4px 0;';

        panel.appendChild(searchWrap);
        panel.appendChild(optsList);
        parent.insertBefore(trigger, sel);
        parent.appendChild(panel);

        function buildList(q) {
            q = (q || '').toLowerCase();
            optsList.innerHTML = '';
            let count = 0;
            Array.from(sel.options).forEach(o => {
                if (q && !o.text.toLowerCase().includes(q)) return;
                const item = document.createElement('div');
                item.style.cssText = 'padding:8px 14px;font-size:11px;cursor:pointer;transition:background 0.12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
                item.textContent = o.text;
                const active = String(o.value) === String(sel.value);
                item.style.color      = active ? '#00ada8' : (o.value ? '#1e293b' : '#94a3b8');
                item.style.fontWeight = active ? '700'     : (o.value ? '600'     : '400');
                if (active) item.style.background = '#f0fdfb';
                item.addEventListener('mouseenter', () => { if (!active) item.style.background = '#f8fafc'; });
                item.addEventListener('mouseleave', () => { if (!active) item.style.background = ''; });
                item.addEventListener('mousedown', e => {
                    e.preventDefault();
                    sel.value = o.value;
                    syncDisplay(id);
                    close();
                    sel.dispatchEvent(new Event('change'));
                });
                optsList.appendChild(item);
                count++;
            });
            if (!count) {
                optsList.innerHTML = '<div style="padding:12px;font-size:11px;color:#94a3b8;text-align:center;">No results found</div>';
            }
        }

        function open() {
            _sdClosers.forEach(fn => fn !== close && fn());
            panel.style.display = 'block';
            arrow.style.transform = 'rotate(180deg)';
            trigger.style.borderColor = '#00ada8';
            trigger.style.background  = '#fff';
            trigger.style.boxShadow   = '0 0 0 3px rgba(0,173,168,0.08)';
            searchInp.value = '';
            buildList();
            setTimeout(() => searchInp.focus(), 30);
        }

        function close() {
            panel.style.display   = 'none';
            arrow.style.transform = '';
            trigger.style.borderColor = '';
            trigger.style.background  = '';
            trigger.style.boxShadow   = '';
        }

        _sdClosers.push(close);
        trigger.addEventListener('click', e => { e.stopPropagation(); panel.style.display === 'none' ? open() : close(); });
        searchInp.addEventListener('input', () => buildList(searchInp.value));
        searchInp.addEventListener('click', e => e.stopPropagation());
        panel.addEventListener('click', e => e.stopPropagation());
        document.addEventListener('click', close);

        sel._sdSync = () => {
            const o = sel.options[sel.selectedIndex];
            label.textContent      = o ? o.text : 'Select...';
            label.style.color      = o?.value ? '#1e293b' : '#94a3b8';
            label.style.fontWeight = o?.value ? '700'     : '400';
        };
        sel._sdSync();
    }

    function syncDisplay(id) {
        const el = document.getElementById(id);
        if (el && el._sdSync) el._sdSync();
    }

    // ── Initial render ──
    if (PERM.view) render();
</script>
@endpush