@extends('admin.layouts.app')

@section('title', 'FILE APP PORTAL - Case File')

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

@push('styles')
<style>
    /* Case File UI (split-screen UI) */

    /* Light Side Scrollbar */
    .scroll-light::-webkit-scrollbar { width: 5px; }
    .scroll-light::-webkit-scrollbar-thumb { background: #00ada8; border-radius: 10px; }
    .scroll-light::-webkit-scrollbar-track { background: #f0fdfb; border-radius: 10px; }

    #caseList,
    #globalActivityStream {
        max-height: calc(100vh - 220px);
        overflow-y: auto;
    }

    #tabContent-timeline,
    #tabContent-files {
        max-height: calc(100vh - 300px);
        overflow-y: auto;
    }

    /* Case Card Design - Compact Theme */
    .case-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }
    .case-card:hover {
        border-color: #00ada8;
        background: #f8fffe;
        transform: translateX(4px);
        box-shadow: 0 4px 12px rgba(0, 173, 168, 0.12);
    }
    .case-card.active {
        border-color: #00ada8;
        background: #f0fdfb;
        box-shadow: -6px 0 0 #00ada8, 0 4px 12px rgba(0, 173, 168, 0.12);
    }

    /* Quick Panel - Right Side Slide-in */
    #quickPanel {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        background: white;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        z-index: 30;
        border-left: 1px solid #e2e8f0;
    }
    #quickPanel.open {
        transform: translateX(0);
    }

    .timeline-dot::after {
        content: "";
        position: absolute;
        left: 19px;
        top: 40px;
        bottom: -40px;
        width: 1px;
        border-left: 2px dashed #e2e8f0;
    }

    /* Add Case Modal Styles */
    #addCaseModal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(8px);
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    #addCaseModal.open {
        display: flex;
    }
    .modal-content {
        background: white;
        border-radius: 2rem;
        max-width: 900px;
        width: 100%;
        max-height: 90vh;
        overflow: hidden;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
    }
    .modal-header {
        background: linear-gradient(135deg, #00ada8 0%, #007d79 100%);
        padding: 24px 32px;
        color: white;
    }
    .modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 32px;
    }
    .form-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }
    @media (min-width: 768px) {
        .form-grid {
            grid-template-columns: 1fr 1fr;
        }
    }
    .form-field-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .form-label {
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #64748b;
    }
    .form-label.required::after {
        content: " *";
        color: #ef4444;
    }
    .form-input, .form-select, .form-textarea {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        font-size: 14px;
        color: #1e293b;
        background: #f8fafc;
        transition: all 0.2s;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
        outline: none;
        border-color: #00ada8;
        background: white;
        box-shadow: 0 0 0 4px rgba(0, 173, 168, 0.1);
    }
    .form-textarea {
        resize: vertical;
        min-height: 100px;
    }
    .user-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: #f0fdfb;
        border: 1px solid #00ada8;
        border-radius: 20px;
        font-size: 12px;
        color: #007d79;
        font-weight: 600;
    }
    .user-tag button {
        background: none;
        border: none;
        color: #00ada8;
        cursor: pointer;
        padding: 0;
        margin-left: 4px;
        font-size: 14px;
    }
    .user-tag button:hover {
        color: #ef4444;
    }
    .status-toggle {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 16px;
        background: #f8fafc;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s;
    }
    .status-toggle.active {
        background: #f0fdfb;
        border-color: #00ada8;
    }
    .status-toggle input[type="radio"] {
        margin: 0;
        accent-color: #00ada8;
    }
    .modal-footer {
        padding: 24px 32px;
        border-top: 1px solid #e2e8f0;
        background: #f8fafc;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
    }
    .btn-secondary {
        padding: 12px 24px;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        background: white;
        color: #64748b;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s;
    }
    .btn-secondary:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }
    .btn-primary-modal {
        padding: 12px 32px;
        border: none;
        border-radius: 12px;
        background: linear-gradient(135deg, #00ada8 0%, #007d79 100%);
        color: white;
        font-weight: 800;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 12px rgba(0, 173, 168, 0.3);
    }
    .btn-primary-modal:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 173, 168, 0.4);
    }
    .note-box {
        margin-top: 24px;
        padding: 16px;
        background: #fef9e7;
        border: 1px dashed #f59e0b;
        border-radius: 12px;
    }
    .note-box p {
        font-size: 12px;
        color: #92400e;
        margin: 4px 0;
    }
    .note-box strong {
        font-weight: 800;
    }

    /* Document Carousel Styles */
    .doc-carousel-wrapper {
        margin-top: 24px;
        padding: 16px 0;
        border-top: 1px solid #f1f5f9;
        overflow: hidden;
        position: relative;
    }
    .doc-carousel-title {
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #94a3b8;
        margin-bottom: 12px;
        padding: 0 48px;
    }
    .doc-carousel-container-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        background: white;
    }
    /* Edge Gradients for Fade Effect */
    .doc-carousel-container-wrapper::before,
    .doc-carousel-container-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100px;
        pointer-events: none;
        z-index: 5;
    }
    .doc-carousel-container-wrapper::before {
        left: 0;
        background: linear-gradient(to right, white 20%, rgba(255, 255, 255, 0));
    }
    .doc-carousel-container-wrapper::after {
        right: 0;
        background: linear-gradient(to left, white 20%, rgba(255, 255, 255, 0));
    }

    .doc-carousel-container {
        display: flex;
        gap: 12px;
        padding: 4px 100px; /* Increased padding for gradients */
        overflow-x: hidden;
        scroll-behavior: smooth;
        width: 100%;
    }
    .doc-carousel-track {
        display: flex;
        gap: 12px;
        width: max-content;
    }
    /* Removed CSS animation to use JS for better control with arrows */
    /* .doc-carousel-track:hover { animation-play-state: paused; } */

    .doc-item {
        flex: 0 0 auto;
        background: #fffafa; /* Light peach/rose white */
        border: 1.5px solid #ffedd5;
        border-radius: 9999px;
        padding: 8px 24px;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }
    .doc-item:hover {
        border-color: #fb923c;
        background: white;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 10px 20px rgba(251, 146, 60, 0.1);
    }
    .doc-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }
    .doc-name {
        font-size: 13px;
        font-weight: 700;
        color: #854d0e; /* Darker orange/brown for readability on peach */
        white-space: nowrap;
    }

    /* Premium Navigation Buttons */
    .doc-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        cursor: pointer;
        z-index: 20;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
    }
    .doc-nav-btn:hover {
        border-color: #00ada8;
        color: #00ada8;
        background: white;
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 12px 24px rgba(0, 173, 168, 0.15);
    }
    .doc-nav-btn:active {
        transform: translateY(-50%) scale(0.95);
    }
    .doc-nav-btn.left { left: 24px; }
    .doc-nav-btn.right { right: 24px; }

    /* @keyframes scroll-carousel removed */
</style>
@endpush

@section('content')
<!-- Case File UI container -->
<div class="flex-1 min-h-[calc(100vh-140px)] overflow-hidden rounded-[2rem] border border-slate-200 shadow-[0_22px_60px_rgba(15,23,42,0.16)] bg-white aspect-auto">
            <div class="flex h-full w-full min-h-[700px]">
                <!-- Left: Case Directory -->
                <section class="w-1/2 flex flex-col border-r border-slate-200 relative z-10 bg-white">
                    <div class="p-10 space-y-4">
                        <!-- Search and Filter Row -->
                        <div class="flex gap-3 items-center">
                            <div class="flex-1 relative">
                                <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
                                <input 
                                    type="text" 
                                    id="caseSearch" 
                                    placeholder="Search cases..." 
                                    class="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-[#00ada8] focus:bg-white focus:ring-2 focus:ring-[#00ada8]/20 transition-all"
                                />
                            </div>
                            <div class="relative">
                                <select 
                                    id="caseFilter" 
                                    class="appearance-none bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 pr-10 text-sm text-slate-900 outline-none focus:border-[#00ada8] focus:bg-white focus:ring-2 focus:ring-[#00ada8]/20 transition-all cursor-pointer"
                                >
                                    <option value="">All Cases</option>
                                    <option value="open">Open</option>
                                    <option value="closed">Closed</option>
                                </select>
                                <i class="fa-solid fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs pointer-events-none"></i>
                            </div>
                            <button onclick="openAddCaseModal()" class="w-12 h-12 rounded-xl bg-[#00ada8] flex items-center justify-center text-white hover:bg-[#007d79] shadow-lg shadow-[#00ada8]/20 transition-all" type="button" title="Add New Case">
                                <i class="fa-solid fa-plus"></i>
                            </button>
                        </div>
                    </div>

                    <div id="caseList" class="flex-1 overflow-y-auto px-10 pb-10 space-y-4 scroll-light"></div>
                </section>

                <!-- Right: Activity / Case History -->
                <section class="w-1/2 bg-white text-slate-900 flex flex-col shadow-[-50px_0_100px_rgba(0,0,0,0.2)] relative z-20">
                    <div id="globalView" class="flex-1 flex flex-col">
                        <div class="p-10 border-b border-slate-100">
                            <h2 class="text-xl font-black uppercase tracking-tight">Recent Activity</h2>
                        </div>
                        <div class="flex-1 overflow-y-auto p-10 space-y-8 scroll-light" id="globalActivityStream"></div>
                    </div>

                    <div id="caseHistoryView" class="hidden flex-1 flex flex-col overflow-hidden relative">
                        <!-- Profile Section at Top Right -->
                        <div id="caseProfileSection" class="px-10 pt-6 pb-4 border-b border-slate-100 bg-white">
                            <div class="flex items-center gap-4">
                                <img class="h-12 w-12 rounded-xl" src="https://ui-avatars.com/api/?name=Case+Manager&background=00ada8&color=fff&bold=true" alt="Profile" />
                                <div class="flex-1">
                                    <p class="text-sm font-bold text-slate-900" id="profileName">Case Manager</p>
                                    <p class="text-[10px] font-bold text-[#00ada8] mt-0.5">● ACTIVE</p>
                                </div>
                                <button onclick="exitCase()" class="w-10 h-10 flex items-center justify-center rounded-xl text-slate-400 hover:text-red-500 hover:bg-red-50 transition-colors" type="button" title="Close case">
                                    <i class="fa-solid fa-circle-xmark text-lg"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="px-10 pt-6 flex border-b border-slate-100 bg-slate-50/50">
                            <button onclick="showTab('timeline')" id="btn-timeline" class="pb-4 mr-10 text-xs font-black uppercase tracking-widest text-[#00ada8] border-b-2 border-[#00ada8]" type="button">Timeline</button>
                            <button onclick="showTab('files')" id="btn-files" class="pb-4 text-xs font-black uppercase tracking-widest text-slate-400 border-b-2 border-transparent" type="button">Case Files</button>
                        </div>

                        <div id="tabContent-timeline" class="flex-1 overflow-y-auto p-10 space-y-10 scroll-light">
                            <div id="timelineContainer"></div>
                            <button onclick="toggleQuickPanel()" class="w-full bg-[#00ada8] text-white py-5 rounded-2xl font-black text-[11px] uppercase tracking-[0.2em] shadow-2xl shadow-[#00ada8]/30 transition-all hover:bg-[#007d79] hover:scale-[1.02] active:scale-95" type="button">
                                <i class="fa-solid fa-pen-nib mr-3"></i> Post Case Update
                            </button>
                        </div>

                        <div id="tabContent-files" class="hidden flex-1 overflow-y-auto p-10 scroll-light">
                            <div class="flex justify-between items-center mb-8">
                                <h3 class="text-xs font-black uppercase tracking-widest text-slate-400">Document Repository</h3>
                                <button class="bg-[#00ada8] text-white px-4 py-2 rounded-lg text-[10px] font-black uppercase hover:bg-[#007d79] transition-colors shadow-lg shadow-[#00ada8]/20" type="button">Upload New</button>
                            </div>
                            <div id="fileGrid" class="space-y-3"></div>
                        </div>

                        <!-- Quick Panel (Right Side Slide-in) -->
                        <div id="quickPanel" class="p-8">
                            <div class="flex justify-between items-center mb-8">
                                <h3 class="text-sm font-black uppercase tracking-widest">New Update</h3>
                                <button onclick="toggleQuickPanel()" class="text-slate-300 hover:text-slate-900 transition-colors" type="button">
                                    <i class="fa-solid fa-chevron-right text-lg"></i>
                                </button>
                            </div>

                            <textarea id="commentBox" placeholder="Write a comment..." class="w-full h-32 p-6 bg-slate-50 rounded-3xl border border-slate-200 outline-none text-sm mb-6 focus:ring-2 focus:ring-slate-300 resize-none"></textarea>

                            <div class="mb-8">
                                <p class="text-[10px] font-black text-slate-400 uppercase mb-3">ATTACHMENTS</p>
                                <div id="stagedFiles" class="space-y-2 mb-3"></div>
                                <label class="flex items-center justify-center w-full h-12 border-2 border-dashed border-slate-200 rounded-xl cursor-pointer hover:bg-slate-50 transition-colors">
                                    <i class="fa-solid fa-paperclip text-slate-300 mr-2"></i>
                                    <span class="text-[10px] font-bold text-slate-400">Add Files</span>
                                    <input type="file" multiple class="hidden" onchange="stageFiles(this)" />
                                </label>
                            </div>

                            <div class="mb-8">
                                <p class="text-[10px] font-black text-slate-400 uppercase mb-3">TAG MEMBERS</p>
                                <input type="text" placeholder="@name..." class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-slate-300" />
                            </div>

                            <button onclick="postToTimeline()" class="w-full bg-[#00ada8] text-white py-5 rounded-2xl font-black text-xs uppercase tracking-widest shadow-xl shadow-[#00ada8]/30 hover:bg-[#007d79] transition-colors" type="button">
                                POST TO TIMELINE
                            </button>
                        </div>
                    </div>
                </section>
            </div>
        </div>
@endsection

@push('modals')
<!-- Add New Case Modal -->
<div id="addCaseModal" onclick="if(event.target === this) closeAddCaseModal()">
    <div class="modal-content" onclick="event.stopPropagation()">
        <div class="modal-header">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-2xl font-black tracking-tight">Create New Case</h2>
                    <p class="text-sm text-white/80 mt-1">Fill in the case details below to create a new case file</p>
                </div>
                <button onclick="closeAddCaseModal()" class="w-10 h-10 rounded-xl bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition-colors" type="button">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
        </div>

        <div class="modal-body scroll-light">
            <form id="addCaseForm" onsubmit="handleAddCase(event)">
                <div class="form-grid">
                    <!-- Left Column -->
                    <div class="space-y-6">
                        <div class="form-field-group">
                            <label class="form-label required">Case Name</label>
                            <input type="text" id="caseName" class="form-input" placeholder="e.g. Asset Liquidation" required />
                        </div>

                        <div class="form-field-group">
                            <label class="form-label required">Account No</label>
                            <select id="accountNo" class="form-select" required>
                                <option value="">Select Account</option>
                                <option value="AC-778">AC-778</option>
                                <option value="AC-882">AC-882</option>
                                <option value="AC-119">AC-119</option>
                                <option value="AC-456">AC-456</option>
                            </select>
                        </div>

                        <div class="form-field-group">
                            <label class="form-label required">Case File No</label>
                            <input type="text" id="caseFileNo" class="form-input" placeholder="e.g. CF-2024-001" required />
                        </div>

                        <div class="form-field-group">
                            <label class="form-label required">Court Name</label>
                            <input type="text" id="courtName" class="form-input" placeholder="e.g. High Court of Justice" required />
                        </div>

                        <div class="form-field-group">
                            <label class="form-label required">Status</label>
                            <div class="flex gap-4">
                                <label class="status-toggle active">
                                    <input type="radio" name="caseStatus" value="open" checked />
                                    <span class="text-sm font-bold text-slate-700">Open</span>
                                </label>
                                <label class="status-toggle">
                                    <input type="radio" name="caseStatus" value="closed" />
                                    <span class="text-sm font-bold text-slate-700">Closed</span>
                                </label>
                            </div>
                        </div>

                        <div class="form-field-group">
                            <label class="form-label">Comments / Description</label>
                            <textarea id="caseComments" class="form-textarea" placeholder="Enter any additional notes or comments about this case..."></textarea>
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="space-y-6">
                        <div class="form-field-group">
                            <label class="form-label">Share With <span class="text-[10px] text-slate-400 lowercase font-medium ml-1 tracking-normal">(Assign Single or Multiple Users)</span></label>
                            <div class="relative">
                                <input 
                                    type="text" 
                                    id="shareSearch" 
                                    class="form-input" 
                                    placeholder="Search by email or name..."
                                    onkeyup="handleShareSearch(event)"
                                />
                                <i class="fa-solid fa-magnifying-glass absolute right-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
                            </div>
                            <div id="shareResults" class="hidden mt-2 bg-white border border-slate-200 rounded-xl shadow-lg max-h-48 overflow-y-auto"></div>
                        </div>

                        <!-- <div class="form-field-group">
                            <label class="form-label">Selected Users</label>
                            <div id="selectedUsers" class="flex flex-wrap gap-2 min-h-[60px] p-3 bg-slate-50 rounded-xl border-2 border-dashed border-slate-200">
                                <p class="text-xs text-slate-400 self-center">No users selected yet</p>
                            </div>
                        </div> -->

                        <div class="form-field-group">
                            <label class="form-label">Associated Lawyers</label>
                            <div id="lawyerList" class="space-y-3">
                                <div class="p-4 bg-slate-50 rounded-xl border border-slate-200">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <p class="text-sm font-bold text-slate-900">Lawyer Name</p>
                                            <p class="text-xs text-slate-500">Email | Mobile No</p>
                                        </div>
                                        <button type="button" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 flex items-center justify-center transition-colors" onclick="removeLawyer(this)">
                                            <i class="fa-solid fa-xmark text-xs"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <p class="text-[10px] text-red-600 mt-2">
                                <i class="fa-solid fa-info-circle mr-1"></i>
                                Multiple lawyers already associated with this account will be tagged by default
                            </p>
                        </div>
                    </div>
                </div>

                <div class="note-box">
                    <p><strong>Note:</strong></p>
                    <p>• All fields marked with * are required</p>
                    <p>• Case File No must be unique</p>
                    <p>• You can add or remove shared users after creating the case</p>
                </div>

                <!-- Document Carousel -->
                <div class="doc-carousel-wrapper">
                    <p class="doc-carousel-title">Recent Case Files</p>
                    <div class="doc-carousel-container-wrapper">
                        <button type="button" class="doc-nav-btn left" onclick="scrollDocCarousel(-1)">
                            <i class="fa-solid fa-chevron-left"></i>
                        </button>
                        <div class="doc-carousel-container" id="docCarouselContainer" onmouseenter="pauseDocScroll()" onmouseleave="resumeDocScroll()">
                            <div class="doc-carousel-track" id="docCarouselTrack">
                                <!-- Duplicate set for seamless loop -->
                                <div class="doc-item">
                                    <div class="doc-icon text-red-500"><i class="fa-solid fa-file-pdf"></i></div>
                                    <p class="doc-name">Agreement_Main.pdf</p>
                                </div>
                                <div class="doc-item">
                                    <div class="doc-icon text-emerald-500"><i class="fa-solid fa-file-lines"></i></div>
                                    <p class="doc-name">Evidence_List.docx</p>
                                </div>
                                <div class="doc-item">
                                    <div class="doc-icon text-amber-500"><i class="fa-solid fa-file-image"></i></div>
                                    <p class="doc-name">Site_Photo_01.jpg</p>
                                </div>
                                <div class="doc-item">
                                    <div class="doc-icon text-red-500"><i class="fa-solid fa-file-contract"></i></div>
                                    <p class="doc-name">Legal_Notice.pdf</p>
                                </div>
                                <div class="doc-item">
                                    <div class="doc-icon text-indigo-500"><i class="fa-solid fa-file-excel"></i></div>
                                    <p class="doc-name">Asset_List.xlsx</p>
                                </div>
                                <!-- Duplicated set -->
                                <div class="doc-item">
                                    <div class="doc-icon text-red-500"><i class="fa-solid fa-file-pdf"></i></div>
                                    <p class="doc-name">Agreement_Main.pdf</p>
                                </div>
                                <div class="doc-item">
                                    <div class="doc-icon text-emerald-500"><i class="fa-solid fa-file-lines"></i></div>
                                    <p class="doc-name">Evidence_List.docx</p>
                                </div>
                                <div class="doc-item">
                                    <div class="doc-icon text-amber-500"><i class="fa-solid fa-file-image"></i></div>
                                    <p class="doc-name">Site_Photo_01.jpg</p>
                                </div>
                                <div class="doc-item">
                                    <div class="doc-icon text-red-500"><i class="fa-solid fa-file-contract"></i></div>
                                    <p class="doc-name">Legal_Notice.pdf</p>
                                </div>
                                <div class="doc-item">
                                    <div class="doc-icon text-indigo-500"><i class="fa-solid fa-file-excel"></i></div>
                                    <p class="doc-name">Asset_List.xlsx</p>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="doc-nav-btn right" onclick="scrollDocCarousel(1)">
                            <i class="fa-solid fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <div class="modal-footer">
            <button type="button" onclick="closeAddCaseModal()" class="btn-secondary">Cancel</button>
            <button type="submit" form="addCaseForm" class="btn-primary-modal">
                <i class="fa-solid fa-plus mr-2"></i> Create Case
            </button>
        </div>
    </div>
</div>

<!-- Assign User Modal -->
<div id="assignModal"
     onclick="if(event.target === this) closeAssignModal()"
     style="display:none;position:fixed;inset:0;z-index:1050;background:rgba(15,23,42,0.55);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px;">
    <div onclick="event.stopPropagation()"
         style="background:white;border-radius:1.5rem;width:100%;max-width:440px;box-shadow:0 25px 60px rgba(0,0,0,0.25);overflow:hidden;">

        <!-- Header -->
        <div style="background:linear-gradient(135deg,#00ada8,#007d79);padding:20px 24px;color:white;display:flex;align-items:center;justify-content:space-between;">
            <div>
                <p style="font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;opacity:0.8;">Assign Members</p>
                <h3 id="assignCaseTitle" style="font-size:16px;font-weight:900;margin-top:2px;">CF-2024-001</h3>
            </div>
            <button onclick="closeAssignModal()" style="width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,0.2);border:none;color:white;cursor:pointer;font-size:14px;" type="button">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <!-- Search -->
        <div style="padding:16px 20px;border-bottom:1px solid #f1f5f9;">
            <div style="position:relative;">
                <i class="fa-solid fa-magnifying-glass" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:12px;"></i>
                <input
                    id="assignSearch"
                    type="text"
                    placeholder="Search by name..."
                    oninput="handleAssignSearch()"
                    style="width:100%;padding:10px 12px 10px 34px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:13px;outline:none;background:#f8fafc;box-sizing:border-box;"
                    onfocus="this.style.borderColor='#00ada8'" onblur="this.style.borderColor='#e2e8f0'"
                />
            </div>
            <!-- Search results dropdown -->
            <div id="assignResults" class="hidden" style="margin-top:6px;background:white;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.1);max-height:180px;overflow-y:auto;"></div>
        </div>

        <!-- Current Assignees -->
        <div style="padding:16px 20px;">
            <p style="font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin-bottom:10px;">
                <i class="fa-solid fa-users mr-1"></i> Currently Assigned
            </p>
            <div id="assignedUsersList" style="max-height:220px;overflow-y:auto;"></div>
        </div>

        <!-- Footer -->
        <div style="padding:14px 20px;border-top:1px solid #f1f5f9;background:#f8fafc;display:flex;justify-content:flex-end;">
            <button onclick="closeAssignModal()" style="padding:10px 24px;border-radius:10px;border:2px solid #e2e8f0;background:white;color:#64748b;font-weight:700;font-size:12px;cursor:pointer;" type="button">Done</button>
        </div>
    </div>
</div>

<script>
// Make assign modal display:flex when .open is added
const _assignModal = document.getElementById('assignModal');
const _assignObserver = new MutationObserver(() => {
    _assignModal.style.display = _assignModal.classList.contains('open') ? 'flex' : 'none';
});
_assignObserver.observe(_assignModal, { attributes: true, attributeFilter: ['class'] });
</script>

@endpush

@push('scripts')
<script>
    // ── Case File UI ──
    const mockCases = [
        { 
            id: "FMP-901", 
            acc: "AC-778", 
            name: "Asset Liquidation", 
            status: "open",
            caseFileNo: "CF-2024-001",
            courtName: "High Court of Justice",
            date: "2024-01-15",
            discussions: 10,
            documents: 14,
            sharedUsers: [
                { name: "John", initial: "J", color: "bg-blue-500" },
                { name: "Sarah", initial: "S", color: "bg-purple-500" },
                { name: "Mike", initial: "M", color: "bg-green-500" },
                { name: "Emma", initial: "E", color: "bg-pink-500" }
            ]
        },
        { 
            id: "FMP-902", 
            acc: "AC-882", 
            name: "Strategic Merger", 
            status: "open",
            caseFileNo: "CF-2024-002",
            courtName: "Commercial Court",
            date: "2024-02-22",
            discussions: 8,
            documents: 22,
            sharedUsers: [
                { name: "David", initial: "D", color: "bg-indigo-500" },
                { name: "Lisa", initial: "L", color: "bg-rose-500" },
                { name: "Tom", initial: "T", color: "bg-amber-500" }
            ]
        },
        { 
            id: "FMP-903", 
            acc: "AC-119", 
            name: "Revenue Audit", 
            status: "closed",
            caseFileNo: "CF-2024-003",
            courtName: "Tax Tribunal",
            date: "2024-03-10",
            discussions: 5,
            documents: 9,
            sharedUsers: [
                { name: "Anna", initial: "A", color: "bg-teal-500" },
                { name: "Chris", initial: "C", color: "bg-orange-500" }
            ]
        },
    ];

    // Format date function
    function formatDate(dateString) {
        if (!dateString) return "-";
        const date = new Date(dateString);
        const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
    }

    // Render case cards with compact Case File card UI
    function renderCases(cases = mockCases) {
        const cardList = document.getElementById("caseList");
        cardList.innerHTML = "";

        cases.forEach((c) => {
            const isOpen = c.status === "open";
            const statusText = c.status ? c.status.charAt(0).toUpperCase() + c.status.slice(1) : "Open";
            
            // Generate user avatars HTML
            let userAvatarsHtml = '';
            if (c.sharedUsers && c.sharedUsers.length > 0) {
                const visibleUsers = c.sharedUsers.slice(0, 3);
                userAvatarsHtml = visibleUsers.map((user, idx) => 
                    `<div class="w-8 h-8 ${user.color || 'bg-slate-400'} text-white text-[10px] font-bold rounded-full flex items-center justify-center border-2 border-white shadow-sm" style="z-index: ${10 - idx}" title="${user.name}">${user.initial}</div>`
                ).join('');
                if (c.sharedUsers.length > 3) {
                    userAvatarsHtml += `<div class="w-8 h-8 bg-orange-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center border-2 border-white shadow-sm" title="+${c.sharedUsers.length - 3} more">+${c.sharedUsers.length - 3}</div>`;
                }
            } else {
                userAvatarsHtml = '<div class="w-8 h-8 bg-slate-200 rounded-full border-2 border-white"></div>';
            }

            cardList.innerHTML += `
                <div class="case-card rounded-3xl cursor-pointer bg-white border border-slate-200 hover:border-emerald-500 shadow-sm hover:shadow-md transition-all duration-200 p-5 mt-4" onclick="openCase('${c.id}')" id="card-${c.id}">
                    <!-- Header -->
                    <div class="flex items-start justify-between mb-4">
                        <div class="space-y-1">
                            <div class="flex items-center gap-3">
                                <span class="text-sm font-extrabold text-slate-900">${c.caseFileNo || c.id}</span>
                                <span class="px-4 py-1 rounded-full text-[11px] font-bold ${isOpen ? "bg-emerald-500 text-white" : "bg-slate-300 text-slate-800"}">
                                    ${statusText}
                                </span>
                            </div>
                        </div>

                        <div class="flex items-center gap-2.5" onclick="event.stopPropagation()">
                            <button onclick="openCaseChat('${c.id}')" class="relative w-9 h-9 flex items-center justify-center rounded-xl bg-slate-100 text-slate-500 hover:bg-teal-50 hover:text-[#00ada8] transition-colors" type="button" title="Case Chat">
                                <i class="fa-solid fa-comments text-[14px]"></i>
                                ${(c.discussions || 0) > 0 ? `<span class="pointer-events-none absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 min-w-[20px] h-[20px] bg-red-500 text-white text-[10px] font-black rounded-full flex items-center justify-center  leading-none shadow-sm ring-2 ring-white">${c.discussions > 99 ? '99+' : c.discussions}</span>` : ''}
                            </button>
                            <button onclick="downloadCase('${c.id}')" class="relative w-9 h-9 flex items-center justify-center rounded-xl bg-slate-100 text-slate-500 hover:bg-teal-50 hover:text-[#00ada8] transition-colors" type="button" title="View Documents">
                                <i class="fa-solid fa-file-lines text-[12px]"></i>
                                ${(c.documents || 0) > 0 ? `<span class="pointer-events-none absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 min-w-[20px] h-[20px] bg-red-500 text-white text-[10px] font-black rounded-full flex items-center justify-center  leading-none shadow-sm ring-2 ring-white">${c.documents > 99 ? '99+' : c.documents}</span>` : ''}
                            </button>
                        </div>
                    </div>

                    <!-- Details -->
                    <div class="space-y-1.5 text-xs text-slate-700 mb-4">
                        <p><span class="font-semibold text-slate-600">Account No :</span> <span class="font-medium text-slate-900">${c.acc}</span></p>
                        <p><span class="font-semibold text-slate-600">Court :</span> <span class="font-medium text-slate-900">${c.courtName || "-"}</span></p>
                        <p><span class="font-semibold text-slate-600">Date :</span> <span class="font-medium text-slate-900">${c.date ? formatDate(c.date) : "-"}</span></p>
                    </div>

                    <!-- Footer -->
                    <div class="border-t border-slate-100 pt-3 mt-1 flex items-center justify-between">
                        <div class="flex items-center -space-x-2">
                            ${userAvatarsHtml}
                        </div>

                        <div class="flex items-center gap-1.5" onclick="event.stopPropagation()">
                            <button onclick="uploadDocument('${c.id}')" class="w-7 h-7 flex items-center justify-center rounded-lg bg-slate-100 text-slate-500 hover:bg-teal-50 hover:text-[#00ada8] transition-colors" type="button" title="Upload">
                                <i class="fa-solid fa-arrow-up-from-bracket text-[12px]"></i>
                            </button>
                            <button onclick="inviteUser('${c.id}')" class="w-7 h-7 flex items-center justify-center rounded-lg bg-slate-100 text-slate-500 hover:bg-teal-50 hover:text-[#00ada8] transition-colors" type="button" title="Assign">
                                <i class="fa-solid fa-user-plus text-[12px]"></i>
                            </button>
                            <button onclick="editCase('${c.id}')" class="w-7 h-7 flex items-center justify-center rounded-lg bg-slate-100 text-slate-500 hover:bg-[#e6f7f6] hover:text-[#00ada8] transition-colors" type="button" title="Edit">
                                <i class="fa-solid fa-pen text-[12px]"></i>
                            </button>
                            <button onclick="deleteCase('${c.id}')" class="w-7 h-7 flex items-center justify-center rounded-lg bg-slate-100 text-slate-500 hover:bg-red-50 hover:text-red-500 transition-colors" type="button" title="Delete">
                                <i class="fa-solid fa-trash-can text-[12px]"></i>
                            </button>
                        </div>
                    </div>
                </div>`;
        });
    }
    
    // Helper functions for button actions
    window.uploadDocument = (caseId) => {
        alert(`Upload document for ${caseId}`);
    };

    // Document Carousel Logic
    let docScrollInterval;
    let isPaused = false;
    let manualScrollTimeout;

    window.scrollDocCarousel = (direction) => {
        const container = document.getElementById('docCarouselContainer');
        if (!container) return;
        
        // Pause auto-scroll briefly during manual navigation
        isPaused = true;
        clearTimeout(manualScrollTimeout);
        
        const scrollAmount = 300;
        container.scrollBy({
            left: direction * scrollAmount,
            behavior: 'smooth'
        });
        
        // Resume auto-scroll after a short delay
        manualScrollTimeout = setTimeout(() => {
            isPaused = false;
        }, 2000);
    };

    function startDocAutoScroll() {
        const container = document.getElementById('docCarouselContainer');
        if (!container) return;
        
        clearInterval(docScrollInterval);
        docScrollInterval = setInterval(() => {
            if (!isPaused) {
                if (container.scrollLeft + container.clientWidth >= container.scrollWidth - 1) {
                    container.scrollLeft = 0;
                } else {
                    container.scrollLeft += 1;
                }
            }
        }, 30);
    }

    window.pauseDocScroll = () => { isPaused = true; };
    window.resumeDocScroll = () => { isPaused = false; };

    // Initialize auto-scroll when modal opens
    const _addCaseModal = document.getElementById('addCaseModal');
    const _modalObserver = new MutationObserver(() => {
        if (_addCaseModal.classList.contains('open')) {
            startDocAutoScroll();
        } else {
            clearInterval(docScrollInterval);
        }
    });
    _modalObserver.observe(_addCaseModal, { attributes: true, attributeFilter: ['class'] });
    
    window.inviteUser = (caseId) => {
        const caseData = mockCases.find(c => c.id === caseId);
        if (!caseData) return;

        // Build modal content
        const modal = document.getElementById('assignModal');
        document.getElementById('assignCaseTitle').textContent = caseData.caseFileNo || caseData.id;

        // Render current assignees
        renderAssignees(caseData);

        // Clear search
        document.getElementById('assignSearch').value = '';
        document.getElementById('assignResults').classList.add('hidden');

        modal.classList.add('open');
        modal.dataset.caseId = caseId;
        document.body.style.overflow = 'hidden';
    };

    function renderAssignees(caseData) {
        const container = document.getElementById('assignedUsersList');
        if (!caseData.sharedUsers || caseData.sharedUsers.length === 0) {
            container.innerHTML = '<p class="text-xs text-slate-400 text-center py-3">No users assigned yet</p>';
            return;
        }
        const colors = ['bg-blue-500','bg-purple-500','bg-green-500','bg-pink-500','bg-indigo-500','bg-teal-500','bg-orange-500','bg-rose-500','bg-amber-500'];
        container.innerHTML = caseData.sharedUsers.map((u, i) => `
            <div class="flex items-center justify-between p-2.5 rounded-xl hover:bg-slate-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 ${u.color || colors[i % colors.length]} rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0">${u.initial}</div>
                    <div>
                        <p class="text-xs font-bold text-slate-800">${u.name}</p>
                        <p class="text-[10px] text-slate-400">Team Member</p>
                    </div>
                </div>
                <button onclick="removeAssignee('${u.name}')" class="w-7 h-7 rounded-lg bg-red-50 text-red-400 hover:bg-red-100 flex items-center justify-center transition-colors" type="button" title="Remove">
                    <i class="fa-solid fa-xmark text-[10px]"></i>
                </button>
            </div>
        `).join('');
    }

    window.removeAssignee = (userName) => {
        const caseId = document.getElementById('assignModal').dataset.caseId;
        const caseData = mockCases.find(c => c.id === caseId);
        if (!caseData) return;
        caseData.sharedUsers = caseData.sharedUsers.filter(u => u.name !== userName);
        renderAssignees(caseData);
        renderCases();
    };

    window.handleAssignSearch = () => {
        const query = document.getElementById('assignSearch').value.toLowerCase().trim();
        const resultsDiv = document.getElementById('assignResults');
        const caseId = document.getElementById('assignModal').dataset.caseId;
        const caseData = mockCases.find(c => c.id === caseId);
        const assignedNames = (caseData?.sharedUsers || []).map(u => u.name.toLowerCase());

        const allUsers = [
            { name: 'John Smith',   initial: 'JS', color: 'bg-blue-500' },
            { name: 'Sarah Kim',    initial: 'SK', color: 'bg-purple-500' },
            { name: 'Mike Davis',   initial: 'MD', color: 'bg-green-500' },
            { name: 'Emma Wilson',  initial: 'EW', color: 'bg-pink-500' },
            { name: 'David Brown',  initial: 'DB', color: 'bg-indigo-500' },
            { name: 'Priya Nair',   initial: 'PN', color: 'bg-teal-500' },
            { name: 'Lucas Wright', initial: 'LW', color: 'bg-orange-500' },
        ];

        if (query.length < 1) { resultsDiv.classList.add('hidden'); return; }

        const filtered = allUsers.filter(u =>
            !assignedNames.includes(u.name.toLowerCase()) &&
            u.name.toLowerCase().includes(query)
        );

        if (filtered.length === 0) {
            resultsDiv.innerHTML = '<p class="p-3 text-xs text-slate-400 text-center">No users found</p>';
        } else {
            resultsDiv.innerHTML = filtered.map(u => `
                <div onclick="addAssignee('${u.name}','${u.initial}','${u.color}')"
                     class="flex items-center gap-3 p-3 hover:bg-slate-50 cursor-pointer border-b border-slate-100 last:border-0 transition-colors">
                    <div class="w-8 h-8 ${u.color} rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0">${u.initial}</div>
                    <p class="text-xs font-bold text-slate-800">${u.name}</p>
                    <i class="fa-solid fa-plus text-[10px] text-slate-400 ml-auto"></i>
                </div>
            `).join('');
        }
        resultsDiv.classList.remove('hidden');
    };

    window.addAssignee = (name, initial, color) => {
        const caseId = document.getElementById('assignModal').dataset.caseId;
        const caseData = mockCases.find(c => c.id === caseId);
        if (!caseData) return;
        if (!caseData.sharedUsers) caseData.sharedUsers = [];
        if (!caseData.sharedUsers.find(u => u.name === name)) {
            caseData.sharedUsers.push({ name, initial, color });
            renderAssignees(caseData);
            renderCases();
        }
        document.getElementById('assignSearch').value = '';
        document.getElementById('assignResults').classList.add('hidden');
    };

    window.closeAssignModal = () => {
        document.getElementById('assignModal').classList.remove('open');
        document.body.style.overflow = '';
    };


    window.openCaseChat = (caseId) => {
        alert(`Open chat/discussions for ${caseId}`);
    };

    window.downloadCase = (caseId) => {
        alert(`Download case files for ${caseId}`);
    };

    window.editCase = (caseId) => {
        alert(`Edit case ${caseId}`);
    };

    window.deleteCase = (caseId) => {
        if (confirm(`Are you sure you want to delete case ${caseId}?`)) {
            const index = mockCases.findIndex(c => c.id === caseId);
            if (index > -1) {
                mockCases.splice(index, 1);
                renderCases();
                alert(`Case ${caseId} deleted successfully`);
            }
        }
    };

    // Initialize case cards
    renderCases();

    // Search and Filter functionality
    const caseSearch = document.getElementById("caseSearch");
    const caseFilter = document.getElementById("caseFilter");

    function filterCases() {
        const searchTerm = caseSearch.value.toLowerCase().trim();
        const filterValue = caseFilter.value;

        let filtered = mockCases.filter((c) => {
            const matchesSearch = 
                c.id.toLowerCase().includes(searchTerm) ||
                c.name.toLowerCase().includes(searchTerm) ||
                c.acc.toLowerCase().includes(searchTerm) ||
                (c.caseFileNo && c.caseFileNo.toLowerCase().includes(searchTerm)) ||
                (c.courtName && c.courtName.toLowerCase().includes(searchTerm));
            
            const matchesFilter = !filterValue || c.status === filterValue;
            
            return matchesSearch && matchesFilter;
        });

        renderCases(filtered);
    }

    caseSearch.addEventListener("input", filterCases);
    caseFilter.addEventListener("change", filterCases);

    // 2) Navigation Logic
    window.openCase = (id) => {
        document.querySelectorAll(".case-card").forEach((el) => el.classList.remove("active"));
        document.getElementById("card-" + id).classList.add("active");
        document.getElementById("globalView").classList.add("hidden");
        document.getElementById("caseHistoryView").classList.remove("hidden");
        
        // Update profile section with case details
        const caseData = mockCases.find(c => c.id === id);
        if (caseData) {
            const profileName = document.getElementById("profileName");
            if (profileName) {
                profileName.textContent = caseData.name;
            }
        }
        
        showTab("timeline");
        renderTimeline();
    };

    window.exitCase = () => {
        document.getElementById("globalView").classList.remove("hidden");
        document.getElementById("caseHistoryView").classList.add("hidden");
        document.querySelectorAll(".case-card").forEach((el) => el.classList.remove("active"));
    };

    window.showTab = (tab) => {
        document.getElementById("tabContent-timeline").classList.toggle("hidden", tab !== "timeline");
        document.getElementById("tabContent-files").classList.toggle("hidden", tab !== "files");

        document.getElementById("btn-timeline").className =
            tab === "timeline"
                ? "pb-4 mr-10 text-xs font-black uppercase tracking-widest text-[#00ada8] border-b-2 border-[#00ada8]"
                : "pb-4 mr-10 text-xs font-black uppercase tracking-widest text-slate-400 border-b-2 border-transparent";

        document.getElementById("btn-files").className =
            tab === "files"
                ? "pb-4 text-xs font-black uppercase tracking-widest text-[#00ada8] border-b-2 border-[#00ada8]"
                : "pb-4 text-xs font-black uppercase tracking-widest text-slate-400 border-b-2 border-transparent";

        if (tab === "files") renderFiles();
    };

    window.toggleQuickPanel = () => {
        const panel = document.getElementById("quickPanel");
        const isOpen = panel.classList.contains("open");
        
        if (isOpen) {
            panel.classList.remove("open");
            // Clear form when closing
            document.getElementById("commentBox").value = "";
            document.getElementById("stagedFiles").innerHTML = "";
        } else {
            panel.classList.add("open");
        }
    };

    // 3) Content Rendering
    function renderTimeline() {
        const container = document.getElementById("timelineContainer");
        container.innerHTML = `
            <div class="relative pl-14 timeline-dot">
                <img src="https://i.pravatar.cc/150?img=11" alt="Lucas Wright"
                     class="absolute left-0 w-10 h-10 rounded-full border-2 border-white shadow-md object-cover z-10" />
                <div>
                    <div class="flex items-center gap-3 mb-3">
                        <span class="text-xs font-black">Lucas Wright</span>
                        <span class="text-[10px] font-bold text-slate-300 tracking-tighter">OCT 24, 2023 • 02:15 PM</span>
                    </div>
                    <div class="space-y-2">
                        <div class="flex items-center justify-between p-3 bg-slate-50 rounded-xl border border-slate-100 hover:border-slate-200 transition-colors group">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 bg-red-50 rounded-lg flex items-center justify-center shrink-0">
                                    <i class="fa-solid fa-file-pdf text-red-500 text-sm"></i>
                                </div>
                                <div>
                                    <p class="text-xs font-bold text-slate-800">Asset_List_Final.pdf</p>
                                    <p class="text-[10px] text-slate-400">2.4 MB • PDF</p>
                                </div>
                            </div>
                            <button class="w-8 h-8 rounded-full text-slate-300 group-hover:text-[#00ada8] transition-colors" type="button" title="Download">
                                <i class="fa-solid fa-circle-down text-lg"></i>
                            </button>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-slate-50 rounded-xl border border-slate-100 hover:border-slate-200 transition-colors group">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 bg-blue-50 rounded-lg flex items-center justify-center shrink-0">
                                    <i class="fa-solid fa-file-word text-blue-500 text-sm"></i>
                                </div>
                                <div>
                                    <p class="text-xs font-bold text-slate-800">Verification_Report.docx</p>
                                    <p class="text-[10px] text-slate-400">1.1 MB • Word</p>
                                </div>
                            </div>
                            <button class="w-8 h-8 rounded-full text-slate-300 group-hover:text-[#00ada8] transition-colors" type="button" title="Download">
                                <i class="fa-solid fa-circle-down text-lg"></i>
                            </button>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-slate-50 rounded-xl border border-slate-100 hover:border-slate-200 transition-colors group">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 bg-green-50 rounded-lg flex items-center justify-center shrink-0">
                                    <i class="fa-solid fa-file-excel text-green-600 text-sm"></i>
                                </div>
                                <div>
                                    <p class="text-xs font-bold text-slate-800">SubFolders_Index.xlsx</p>
                                    <p class="text-[10px] text-slate-400">540 KB • Excel</p>
                                </div>
                            </div>
                            <button class="w-8 h-8 rounded-full text-slate-300 group-hover:text-[#00ada8] transition-colors" type="button" title="Download">
                                <i class="fa-solid fa-circle-down text-lg"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>`;
    }

    function renderFiles() {
        const grid = document.getElementById("fileGrid");
        grid.innerHTML = `
                <div class="flex items-center justify-between p-6 bg-slate-50 rounded-2xl border border-slate-100 hover:border-slate-300 transition-colors group">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center text-red-500"><i class="fa-solid fa-file-pdf text-lg"></i></div>
                    <div>
                        <p class="text-sm font-extrabold">Final_Audit_v2.pdf</p>
                        <p class="text-[10px] font-bold text-slate-400">Uploaded by Sarah K. • Today at 11:30 AM</p>
                    </div>
                </div>
                <button class="w-10 h-10 rounded-full text-slate-300 group-hover:text-slate-700" type="button" title="Download">
                    <i class="fa-solid fa-circle-down text-xl"></i>
                </button>
            </div>`;
    }

    window.stageFiles = (input) => {
        const container = document.getElementById("stagedFiles");
        Array.from(input.files).forEach((f) => {
            container.innerHTML += `
                <div class="flex justify-between items-center p-2">
                    <span class="text-sm font-medium text-slate-700">${f.name}</span>
                    <button onclick="this.parentElement.remove()" class="w-6 h-6 rounded-full bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition-colors" type="button" title="Remove">
                        <i class="fa-solid fa-xmark text-xs"></i>
                    </button>
                </div>`;
        });
        input.value = "";
    };

    window.postToTimeline = () => {
        alert("Update Broadcasted!");
        toggleQuickPanel(false);
    };

    // Global Activity Stream Mock
    const globalStream = document.getElementById("globalActivityStream");
    for (let i = 0; i < 4; i++) {
        globalStream.innerHTML += `
            <div class="flex gap-5">
                <div class="w-10 h-10 rounded-2xl bg-slate-100 flex items-center justify-center text-slate-400">
                    <i class="fa-solid fa-bolt text-sm"></i>
                </div>
                <div>
                    <p class="text-xs font-bold text-slate-800">James Miller <span class="font-medium text-slate-400">added 3 files to</span> FMP-902</p>
                    <p class="text-[10px] font-black text-slate-300 uppercase mt-1">24 Minutes Ago</p>
                </div>
            </div>`;
    }

    // ── Add Case Modal Functions ──
    const selectedUsersList = [];
    const mockUsers = [
        { id: 1, name: "John Smith", email: "john.smith@example.com", avatar: "JS" },
        { id: 2, name: "Sarah Johnson", email: "sarah.j@example.com", avatar: "SJ" },
        { id: 3, name: "Mike Davis", email: "mike.davis@example.com", avatar: "MD" },
        { id: 4, name: "Emma Wilson", email: "emma.w@example.com", avatar: "EW" },
        { id: 5, name: "David Brown", email: "david.brown@example.com", avatar: "DB" },
    ];

    window.openAddCaseModal = () => {
        document.getElementById("addCaseModal").classList.add("open");
        document.body.style.overflow = "hidden";
        // Setup status toggle handlers
        document.querySelectorAll('.status-toggle').forEach(toggle => {
            toggle.addEventListener('click', function() {
                document.querySelectorAll('.status-toggle').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                this.querySelector('input[type="radio"]').checked = true;
            });
        });
    };

    window.closeAddCaseModal = () => {
        document.getElementById("addCaseModal").classList.remove("open");
        document.body.style.overflow = "";
        document.getElementById("addCaseForm").reset();
        selectedUsersList.length = 0;
        updateSelectedUsersDisplay();
    };

    window.handleShareSearch = (e) => {
        const query = e.target.value.toLowerCase().trim();
        const resultsDiv = document.getElementById("shareResults");
        
        if (query.length < 2) {
            resultsDiv.classList.add("hidden");
            return;
        }

        const filtered = mockUsers.filter(u => 
            !selectedUsersList.find(su => su.id === u.id) &&
            (u.name.toLowerCase().includes(query) || u.email.toLowerCase().includes(query))
        );

        if (filtered.length === 0) {
            resultsDiv.innerHTML = '<p class="p-3 text-sm text-slate-500 text-center">No users found</p>';
        } else {
            resultsDiv.innerHTML = filtered.map(u => `
                <div onclick="addUserToShare(${u.id})" class="p-3 hover:bg-slate-50 cursor-pointer border-b border-slate-100 last:border-0">
                    <p class="text-sm font-bold text-slate-900">${u.name}</p>
                    <p class="text-xs text-slate-500">${u.email}</p>
                </div>
            `).join('');
        }
        resultsDiv.classList.remove("hidden");
    };

    window.addUserToShare = (userId) => {
        const user = mockUsers.find(u => u.id === userId);
        if (user && !selectedUsersList.find(u => u.id === userId)) {
            selectedUsersList.push(user);
            updateSelectedUsersDisplay();
            document.getElementById("shareSearch").value = "";
            document.getElementById("shareResults").classList.add("hidden");
        }
    };

    window.removeUserFromShare = (userId) => {
        const index = selectedUsersList.findIndex(u => u.id === userId);
        if (index > -1) {
            selectedUsersList.splice(index, 1);
            updateSelectedUsersDisplay();
        }
    };

    function updateSelectedUsersDisplay() {
        const container = document.getElementById("selectedUsers");
        if (selectedUsersList.length === 0) {
            container.innerHTML = '<p class="text-xs text-slate-400 self-center">No users selected yet</p>';
        } else {
            container.innerHTML = selectedUsersList.map(u => `
                <span class="user-tag">
                    ${u.email}
                    <button type="button" onclick="removeUserFromShare(${u.id})" title="Remove">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </span>
            `).join('');
        }
    }

    window.removeLawyer = (btn) => {
        btn.closest('.p-4').remove();
    };

    window.handleAddCase = (e) => {
        e.preventDefault();
        
        const statusEl = document.querySelector('input[name="caseStatus"]:checked');
        const statusVal = statusEl ? statusEl.value : 'open';

        const formData = {
            name: document.getElementById("caseName").value,
            acc: document.getElementById("accountNo").value,
            caseFileNo: document.getElementById("caseFileNo").value,
            courtName: document.getElementById("courtName").value,
            status: statusVal,
            comments: document.getElementById("caseComments").value,
            sharedUsers: selectedUsersList.map(u => ({
                name: u.name.split(' ')[0],
                initial: u.avatar[0],
                color: ['bg-blue-500', 'bg-purple-500', 'bg-green-500', 'bg-pink-500', 'bg-indigo-500'][u.id % 5]
            })),
            discussions: 0,
            documents: 0
        };

        const newId = `FMP-${String(mockCases.length + 900).padStart(3, '0')}`;
        formData.id = newId;
        mockCases.push(formData);
        renderCases();
        closeAddCaseModal();
        alert(`Case ${newId} created successfully!`);
    };

    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeAddCaseModal();
        }
    });

    // Toggle default active state for case status
    document.querySelectorAll('.status-toggle').forEach(toggle => {
        toggle.addEventListener('click', function() {
            document.querySelectorAll('.status-toggle').forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            this.querySelector('input[type="radio"]').checked = true;
        });
    });
</script>
@endpush