{% extends "base.html" %}

{% block title %}File Cabinet - Delphi Database{% endblock %}

{% block content %}
<div class="space-y-6">
        <!-- Page Header -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div class="flex items-center gap-3">
                <div class="flex items-center justify-center w-10 h-10 bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded-xl">
                    <i class="fa-regular fa-folder-open text-lg"></i>
                </div>
                <h1 class="text-2xl font-bold text-neutral-900 dark:text-neutral-100">File Cabinet</h1>
            </div>
        <div class="flex items-center gap-3">
                <button id="addFileBtn" class="flex items-center gap-2 px-4 py-2 bg-success-600 text-white hover:bg-success-700 rounded-lg transition-colors duration-200">
                    <i class="fa-solid fa-circle-plus"></i>
                    <span>New File</span>
                    <kbd class="hidden sm:inline-block ml-2 px-1.5 py-0.5 bg-success-700 rounded text-xs">Ctrl+N</kbd>
                </button>
                <button id="statsBtn" class="flex items-center gap-2 px-4 py-2 bg-info-600 text-white hover:bg-info-700 rounded-lg transition-colors duration-200">
                    <i class="fa-solid fa-chart-line"></i>
                    <span>Statistics</span>
                </button>
                <button id="advancedSearchBtn" class="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white hover:bg-primary-700 rounded-lg transition-colors duration-200">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <span>Advanced Search</span>
                </button>
            </div>
        </div>

        <!-- Search and Filter Panel -->
        <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
            <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
                <h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
                    <i class="fa-solid fa-filter"></i>
                    <span>Search & Filters</span>
                </h5>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                <div class="md:col-span-3">
                    <label for="searchInput" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Search Files</label>
                    <div class="relative">
                        <input type="text" id="searchInput" class="w-full pl-10 pr-4 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200" placeholder="File #, Client, Matter...">
                        <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 dark:text-neutral-500"></i>
                        <button id="searchBtn" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-neutral-400 hover:text-primary-600 dark:text-neutral-500 dark:hover:text-primary-400 transition-colors">
                            <i class="fa-solid fa-arrow-right"></i>
                        </button>
                </div>
            </div>
                </div>
                <div>
                    <label for="statusFilter" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Status</label>
                    <select id="statusFilter" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
                        <option value="">All Statuses</option>
                    </select>
                </div>
                <div>
                    <label for="typeFilter" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">File Type</label>
                    <select id="typeFilter" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
                        <option value="">All Types</option>
                    </select>
                </div>
                <div>
                    <label for="employeeFilter" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Attorney</label>
                    <select id="employeeFilter" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
                        <option value="">All Attorneys</option>
                    </select>
                </div>
                <div class="flex items-center gap-2">
                <button id="clearFiltersBtn" class="px-3 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-800 dark:text-neutral-200 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors duration-200">
                        <i class="fa-regular fa-circle-xmark"></i> Clear
                    </button>
                <button id="refreshBtn" class="px-3 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-800 dark:text-neutral-200 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors duration-200">
                        <i class="fa-solid fa-rotate-right"></i> Refresh
                    </button>
                </div>
            </div>
        </div>

        <!-- File List -->
        <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
            <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
                <h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
                    <i class="fa-regular fa-folder-open"></i>
                    <span>File List</span>
                </h5>
            </div>
            <div class="p-0">
                <div class="overflow-x-auto">
                <table class="w-full text-sm text-left text-neutral-900 dark:text-neutral-100" id="filesTable">
                        <thead class="bg-neutral-50 dark:bg-neutral-800/50">
                            <tr class="border-b border-neutral-200 dark:border-neutral-700">
                                <th data-sort="text" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">File #</th>
                                <th data-sort="text" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Client</th>
                                <th data-sort="text" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Matter</th>
                                <th data-sort="text" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Type</th>
                                <th data-sort="text" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Status</th>
                                <th data-sort="text" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Attorney</th>
                                <th data-sort="date" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Opened</th>
                                <th data-sort="number" class="px-4 py-3 text-right text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Balance</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="filesTableBody">
                            <!-- File rows will be populated here -->
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <nav aria-label="File pagination" class="px-6 py-4 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50 flex items-center justify-center" id="pagination"></nav>
            </div>
        </div>
</div>

<!-- File Modal -->
<div class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" id="fileModal" aria-hidden="true">
    <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl max-w-6xl w-full max-h-screen overflow-hidden" role="dialog" aria-modal="true">
        <div class="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
            <h5 class="text-lg font-semibold" id="fileModalLabel">File Details</h5>
            <button type="button" class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="closeModal('fileModal')"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div class="px-6 py-4 overflow-y-auto max-h-[70vh]">
            <form id="fileForm">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- Basic Information -->
                    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
                        <div class="pb-2 mb-3 border-b border-neutral-200 dark:border-neutral-700">
                            <h6 class="mb-0 font-semibold">Basic Information</h6>
                        </div>
                        <div>
                            <div class="mb-3">
                                <label for="fileNo" class="block text-sm font-medium mb-1">File Number *</label>
                                <input type="text" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="fileNo" name="file_no" required>
                            </div>
                            <div class="mb-3">
                                <label for="clientId" class="block text-sm font-medium mb-1">Client *</label>
                                <div class="flex gap-2">
                                    <input type="text" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-neutral-50 dark:bg-neutral-900/30" id="clientId" name="id" required readonly>
                                    <button class="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors" type="button" id="selectClientBtn"><i class="fa-solid fa-magnifying-glass"></i> Select</button>
                                </div>
                                <div class="text-sm text-neutral-500" id="clientName">Selected client will appear here</div>
                            </div>
                            <div class="mb-3">
                                <label for="regarding" class="block text-sm font-medium mb-1">Matter Description</label>
                                <textarea class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="regarding" name="regarding" rows="3" placeholder="Describe the legal matter..."></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Case Details -->
                    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
                        <div class="pb-2 mb-3 border-b border-neutral-200 dark:border-neutral-700">
                            <h6 class="mb-0 font-semibold">Case Details</h6>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="fileType" class="block text-sm font-medium mb-1">File Type *</label>
                                <select class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="fileType" name="file_type" required>
                                        <option value="">Select type...</option>
                                    </select>
                            </div>
                            <div>
                                <label for="status" class="block text-sm font-medium mb-1">Status *</label>
                                <select class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="status" name="status" required>
                                        <option value="">Select status...</option>
                                    </select>
                            </div>
                            <div>
                                <label for="employeeNum" class="block text-sm font-medium mb-1">Assigned Attorney *</label>
                                <select class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="employeeNum" name="empl_num" required>
                                        <option value="">Select attorney...</option>
                                    </select>
                            </div>
                            <div>
                                <label for="ratePerHour" class="block text-sm font-medium mb-1">Hourly Rate</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-neutral-500">$</span>
                                    <input type="number" class="w-full pl-7 pr-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="ratePerHour" name="rate_per_hour" step="0.01" min="0">
                                </div>
                            </div>
                            <div>
                                <label for="opened" class="block text-sm font-medium mb-1">Date Opened *</label>
                                <input type="date" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="opened" name="opened" required>
                            </div>
                            <div>
                                <label for="closed" class="block text-sm font-medium mb-1">Date Closed</label>
                                <input type="date" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="closed" name="closed">
                            </div>
                        </div>
                    </div>

                    <!-- Additional Information -->
                    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
                        <div class="pb-2 mb-3 border-b border-neutral-200 dark:border-neutral-700">
                            <h6 class="mb-0 font-semibold">Additional Information</h6>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="opposing" class="block text-sm font-medium mb-1">Opposing Counsel</label>
                                <input type="text" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="opposing" name="opposing" placeholder="Opposing attorney or firm">
                            </div>
                            <div>
                                <label for="footerCode" class="block text-sm font-medium mb-1">Statement Footer Code</label>
                                <input type="text" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="footerCode" name="footer_code" placeholder="Footer code for billing statements">
                            </div>
                            <div class="md:col-span-2">
                                <label for="memo" class="block text-sm font-medium mb-1">Notes</label>
                                <textarea class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="memo" name="memo" rows="4" placeholder="Internal notes and comments..."></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Financial Summary (View only) -->
                    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6" id="financialSummaryCard" style="display: none;">
                        <div class="flex items-center justify-between pb-2 mb-3 border-b border-neutral-200 dark:border-neutral-700">
                            <h6 class="mb-0 font-semibold">Financial Summary</h6>
                            <button type="button" class="px-3 py-2 bg-info-600 text-white hover:bg-info-700 rounded-lg transition-colors text-sm font-medium" id="viewFullFinancialBtn"><i class="fa-solid fa-calculator mr-2"></i> View Details</button>
                        </div>
                        <div>
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4" id="financialSummary">
                                <!-- Financial data will be loaded here -->
                            </div>
                        </div>
                    </div>
                    <!-- Documents -->
                    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6 md:col-span-2" id="documentsCard" style="display: none;">
                        <div class="flex items-center justify-between pb-2 mb-3 border-b border-neutral-200 dark:border-neutral-700">
                            <h6 class="mb-0 font-semibold">Documents</h6>
                            <button type="button" class="px-3 py-2 bg-success-600 text-white hover:bg-success-700 rounded-lg transition-colors text-sm font-medium" id="uploadDocumentBtn"><i class="fa-solid fa-upload mr-2"></i> Upload</button>
                        </div>
                        <div>
                            <div class="mb-3">
                                <input type="file" id="documentFile" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                                <input type="text" id="documentDescription" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg mt-2" placeholder="Description (optional)">
                            </div>
            <div class="overflow-x-auto">
                                <table class="w-full text-sm text-left text-neutral-900 dark:text-neutral-100 border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden" id="documentsTable">
                                    <thead>
                                        <tr>
                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Filename</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Description</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Uploaded</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Size</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="documentsTableBody">
                                        <!-- Documents will be populated here -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-neutral-200 dark:border-neutral-700">
            <button type="button" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors" onclick="closeModal('fileModal')">Cancel (Esc)</button>
            <div class="flex items-center gap-2" id="fileActions" style="display: none;">
                <button type="button" class="px-3 py-2 bg-warning-600 text-white hover:bg-warning-700 rounded-lg" id="closeFileBtn">
                    <i class="fa-solid fa-lock"></i> Close File
                </button>
                <button type="button" class="px-3 py-2 bg-success-600 text-white hover:bg-success-700 rounded-lg" id="reopenFileBtn" style="display: none;">
                    <i class="fa-solid fa-unlock"></i> Reopen File
                </button>
                <button type="button" class="px-3 py-2 bg-danger-600 text-white hover:bg-danger-700 rounded-lg" id="deleteFileBtn">
                    <i class="fa-solid fa-trash"></i> Delete (Del)
                </button>
            </div>
            <button type="button" class="px-4 py-2 bg-primary-600 text-white hover:bg-primary-700 rounded-lg" id="saveFileBtn">
                <i class="fa-regular fa-circle-check"></i> Save (Ctrl+S)
            </button>
        </div>
    </div>
</div>

<!-- Advanced Search Modal -->
<div class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" id="advancedSearchModal" aria-hidden="true">
    <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl max-w-3xl w-full" role="dialog" aria-modal="true">
        <div class="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
            <h5 class="text-lg font-semibold" id="advancedSearchModalLabel">Advanced File Search</h5>
            <button type="button" class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="closeModal('advancedSearchModal')"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div class="px-6 py-4">
            <form id="advancedSearchForm">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="advFileNo" class="block text-sm font-medium mb-1">File Number</label>
                        <input type="text" id="advFileNo" placeholder="Partial file number" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                    </div>
                    <div>
                        <label for="advClientName" class="block text-sm font-medium mb-1">Client Name</label>
                        <input type="text" id="advClientName" placeholder="First or last name" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                    </div>
                    <div>
                        <label for="advRegarding" class="block text-sm font-medium mb-1">Matter Description</label>
                        <input type="text" id="advRegarding" placeholder="Keywords in matter description" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                    </div>
                    <div>
                        <label for="advFileType" class="block text-sm font-medium mb-1">File Type</label>
                        <select id="advFileType" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                            <option value="">All Types</option>
                        </select>
                    </div>
                    <div>
                        <label for="advStatus" class="block text-sm font-medium mb-1">Status</label>
                        <select id="advStatus" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                            <option value="">All Statuses</option>
                        </select>
                    </div>
                    <div>
                        <label for="advEmployee" class="block text-sm font-medium mb-1">Attorney</label>
                        <select id="advEmployee" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                            <option value="">All Attorneys</option>
                        </select>
                    </div>
                    <div>
                        <label for="advOpenedAfter" class="block text-sm font-medium mb-1">Opened After</label>
                        <input type="date" id="advOpenedAfter" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                    </div>
                    <div>
                        <label for="advOpenedBefore" class="block text-sm font-medium mb-1">Opened Before</label>
                        <input type="date" id="advOpenedBefore" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
                    </div>
                </div>
            </form>
        </div>
        <div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-neutral-200 dark:border-neutral-700">
            <button type="button" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg" onclick="closeModal('advancedSearchModal')">Cancel</button>
            <button type="button" class="px-4 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700" id="clearAdvancedSearchBtn">Clear</button>
            <button type="button" class="px-4 py-2 bg-primary-600 text-white hover:bg-primary-700 rounded-lg" id="performAdvancedSearchBtn">Search</button>
        </div>
    </div>
</div>

<!-- Client Selection Modal -->
<div class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" id="clientSelectionModal" aria-hidden="true">
    <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl max-w-3xl w-full" role="dialog" aria-modal="true">
        <div class="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
            <h5 class="text-lg font-semibold" id="clientSelectionModalLabel">Select Client</h5>
            <button type="button" class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="closeModal('clientSelectionModal')"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div class="px-6 py-4">
            <div class="mb-3">
                <input type="text" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="clientSearchInput" placeholder="Search clients by name or ID...">
            </div>
            <div class="overflow-y-auto max-h-96">
                <table class="w-full text-sm text-left text-neutral-900 dark:text-neutral-100 border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
                    <thead class="bg-neutral-50 dark:bg-neutral-800/50">
                        <tr class="border-b border-neutral-200 dark:border-neutral-700">
                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">ID</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Name</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">City, State</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Group</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Action</th>
                        </tr>
                    </thead>
                    <tbody id="clientSelectionTableBody">
                        <!-- Client options will be loaded here -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Statistics Modal -->
<div class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" id="statsModal" aria-hidden="true">
    <div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl max-w-3xl w-full" role="dialog" aria-modal="true">
        <div class="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
            <h5 class="text-lg font-semibold" id="statsModalLabel">File Cabinet Statistics</h5>
            <button type="button" class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="closeModal('statsModal')"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div class="px-6 py-4" id="statsContent">
            <!-- Statistics will be loaded here -->
        </div>
        <div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-neutral-200 dark:border-neutral-700">
            <button type="button" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg" onclick="closeModal('statsModal')">Close</button>
        </div>
    </div>
</div>

<script>
// File management functionality
let currentPage = 0;
let currentFilters = {};
let isEditing = false;
let editingFileNo = null;
let lookupData = {
    fileTypes: [],
    fileStatuses: [],
    employees: []
};

// Authorization and JSON headers are injected by window.http.wrappedFetch

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    // Check authentication first
    const token = localStorage.getItem('auth_token');
    if (!token) {
        window.location.href = '/login';
        return;
    }
    
    loadLookupData();
    loadFiles();
    setupEventListeners();
    initializeDataTable('filesTable');
});

function setupEventListeners() {
    // Search and filters
    document.getElementById('searchBtn').addEventListener('click', performSearch);
    document.getElementById('searchInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') performSearch();
    });
    
    // Filter changes
    ['statusFilter', 'typeFilter', 'employeeFilter'].forEach(id => {
        document.getElementById(id).addEventListener('change', applyFilters);
    });
    
    // Modal buttons
    document.getElementById('addFileBtn').addEventListener('click', showAddFileModal);
    document.getElementById('saveFileBtn').addEventListener('click', saveFile);
    document.getElementById('deleteFileBtn').addEventListener('click', deleteFile);
    document.getElementById('closeFileBtn').addEventListener('click', closeFile);
    document.getElementById('reopenFileBtn').addEventListener('click', reopenFile);
    
    // Other buttons
    document.getElementById('statsBtn').addEventListener('click', showStats);
    document.getElementById('advancedSearchBtn').addEventListener('click', showAdvancedSearchModal);
    document.getElementById('clearFiltersBtn').addEventListener('click', clearFilters);
    document.getElementById('refreshBtn').addEventListener('click', () => loadFiles());
    
    // Client selection
    document.getElementById('selectClientBtn').addEventListener('click', showClientSelectionModal);
    document.getElementById('clientSearchInput').addEventListener('input', searchClients);
    
    // Advanced search
    document.getElementById('performAdvancedSearchBtn').addEventListener('click', performAdvancedSearch);
    document.getElementById('clearAdvancedSearchBtn').addEventListener('click', clearAdvancedSearch);
    
    // Form validation
    document.getElementById('fileNo').addEventListener('blur', validateFileNumber);
}

// Highlight helpers
function _escapeHtml(text) {
    try { if (window.htmlSanitizer && typeof window.htmlSanitizer.escape === 'function') { return window.htmlSanitizer.escape(text); } } catch (_) {}
    const str = String(text == null ? '' : text);
    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}
function _buildTokens(raw) {
    return String(raw || '')
        .trim()
        .replace(/[,_;:]+/g, ' ')
        .split(/\s+/)
        .map(t => t.replace(/^[^A-Za-z0-9]+|[^A-Za-z0-9]+$/g, ''))
        .filter(Boolean);
}
function highlightText(text, tokens) {
    if (!text) return '';
    const unique = Array.from(new Set(tokens || []));
    if (unique.length === 0) return _escapeHtml(text);
    let safe = _escapeHtml(String(text));
    try {
        unique.forEach(tok => {
            const esc = tok.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            const re = new RegExp(`(${esc})`, 'ig');
            safe = safe.replace(re, '<mark class="bg-yellow-200 text-neutral-900 rounded px-0.5">$1</mark>');
        });
    } catch (_) {}
    return safe;
}

async function loadLookupData() {
    try {
        // Load all lookup data in parallel
        const [fileTypesRes, statusesRes, employeesRes] = await Promise.all([
            window.http.wrappedFetch('/api/files/lookups/file-types'),
            window.http.wrappedFetch('/api/files/lookups/file-statuses'),
            window.http.wrappedFetch('/api/files/lookups/employees')
        ]);
        
        if (fileTypesRes.ok) {
            lookupData.fileTypes = await fileTypesRes.json();
            populateSelect('fileType', lookupData.fileTypes, 'code', 'description');
            populateSelect('typeFilter', lookupData.fileTypes, 'code', 'description');
            populateSelect('advFileType', lookupData.fileTypes, 'code', 'description');
        }
        
        if (statusesRes.ok) {
            lookupData.fileStatuses = await statusesRes.json();
            populateSelect('status', lookupData.fileStatuses, 'code', 'description');
            populateSelect('statusFilter', lookupData.fileStatuses, 'code', 'description');
            populateSelect('advStatus', lookupData.fileStatuses, 'code', 'description');
        }
        
        if (employeesRes.ok) {
            lookupData.employees = await employeesRes.json();
            populateSelect('employeeNum', lookupData.employees, 'code', 'name');
            populateSelect('employeeFilter', lookupData.employees, 'code', 'name');
            populateSelect('advEmployee', lookupData.employees, 'code', 'name');
        }
        
    } catch (error) {
        console.error('Error loading lookup data:', error);
        showAlert('Error loading form data: ' + error.message, 'warning');
    }
}

function populateSelect(selectId, data, valueField, textField) {
    const select = document.getElementById(selectId);
    if (!select) return;
    
    // Keep existing first option if it exists
    const firstOption = select.children[0];
    select.innerHTML = '';
    if (firstOption) {
        select.appendChild(firstOption);
    }
    
    data.forEach(item => {
        const option = document.createElement('option');
        option.value = item[valueField];
        option.textContent = `${item[valueField]} - ${item[textField]}`;
        select.appendChild(option);
    });
}

async function loadFiles(page = 0, filters = {}) {
    try {
        const params = new URLSearchParams({
            skip: page * 50,
            limit: 50,
            ...filters
        });
        
        const response = await window.http.wrappedFetch(`/api/files/?${params}`);
        
        if (!response.ok) throw new Error('Failed to load files');
        
        const files = await response.json();
        displayFiles(files);
        
    } catch (error) {
        console.error('Error loading files:', error);
        showAlert('Error loading files: ' + error.message, 'danger');
    }
}

function displayFiles(files) {
    const tbody = document.getElementById('filesTableBody');
    tbody.innerHTML = '';
    const tokens = _buildTokens(document.getElementById('searchInput') ? document.getElementById('searchInput').value : '');
    
    if (files.length === 0) {
        tbody.innerHTML = '<tr><td colspan="9" class="text-center text-neutral-500">No files found</td></tr>';
        return;
    }
    
    files.forEach(file => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td class="px-4 py-2"><strong>${highlightText(file.file_no, tokens)}</strong></td>
            <td class="px-4 py-2">
                <div>
                    <div>${highlightText(file.client_name || 'Unknown Client', tokens)}</div>
                    <div class="text-xs text-neutral-500">${highlightText(file.client_id || '', tokens)}</div>
                </div>
            </td>
            <td class="px-4 py-2">
                ${file.regarding ? `<div>${highlightText(file.regarding.substring(0, 50) + (file.regarding.length > 50 ? '...' : ''), tokens)}</div>` : '<em class="text-neutral-500">No description</em>'}
            </td>
            <td class="px-4 py-2">${highlightText(file.file_type || '', tokens)}</td>
            <td class="px-4 py-2"><span class="${getStatusBadgeClass(file.status)}">${highlightText(file.status || '', tokens)}</span></td>
            <td class="px-4 py-2">${highlightText(file.empl_num || '', tokens)}</td>
            <td class="px-4 py-2">${formatDate(file.opened)}</td>
            <td class="px-4 py-2 text-right">
                <strong class="${file.amount_owing > 0 ? 'text-success-600' : 'text-neutral-500'}">
                    ${formatCurrency(file.amount_owing)}
                </strong>
            </td>
            <td class="px-4 py-2">
                <div class="flex items-center gap-2">
                    <button class="inline-flex items-center px-3 py-2 bg-primary-600 text-white hover:bg-primary-700 rounded-lg text-sm font-semibold transition-colors" onclick="editFile('${String(file.file_no).replace(/"/g, '&quot;')}')"><i class="fa-solid fa-pencil mr-1.5"></i> Edit</button>
                    <button class="inline-flex items-center px-3 py-2 bg-info-600 text-white hover:bg-info-700 rounded-lg text-sm font-semibold transition-colors" onclick="viewFile('${String(file.file_no).replace(/"/g, '&quot;')}')"><i class="fa-regular fa-eye mr-1.5"></i> View</button>
                </div>
            </td>
        `;
        tbody.appendChild(row);
    });
}

function getStatusBadgeClass(status) {
    const s = (status || '').toUpperCase();
    switch (s) {
        case 'ACTIVE':
            return 'inline-block px-2 py-0.5 text-xs font-medium rounded bg-green-100 text-green-700 border border-green-400';
        case 'CLOSED':
            return 'inline-block px-2 py-0.5 text-xs font-medium rounded bg-neutral-100 text-neutral-700 border border-neutral-300';
        case 'INACTIVE':
            return 'inline-block px-2 py-0.5 text-xs font-medium rounded bg-yellow-100 text-yellow-700 border border-yellow-500';
        case 'FOLLOW UP':
            return 'inline-block px-2 py-0.5 text-xs font-medium rounded bg-blue-100 text-blue-700 border border-blue-400';
        default:
            return 'inline-block px-2 py-0.5 text-xs font-medium rounded bg-neutral-100 text-neutral-700 border border-neutral-300';
    }
}

function performSearch() {
    const search = document.getElementById('searchInput').value;
    currentFilters = { ...currentFilters, search };
    currentPage = 0;
    loadFiles(currentPage, currentFilters);
}

function applyFilters() {
    const statusFilter = document.getElementById('statusFilter').value;
    const typeFilter = document.getElementById('typeFilter').value;
    const employeeFilter = document.getElementById('employeeFilter').value;
    
    currentFilters = {
        ...currentFilters,
        status_filter: statusFilter,
        // Add other filters as needed
    };
    
    currentPage = 0;
    loadFiles(currentPage, currentFilters);
}

function clearFilters() {
    document.getElementById('searchInput').value = '';
    document.getElementById('statusFilter').value = '';
    document.getElementById('typeFilter').value = '';
    document.getElementById('employeeFilter').value = '';
    
    currentFilters = {};
    currentPage = 0;
    loadFiles(currentPage, currentFilters);
}

function showAddFileModal() {
    isEditing = false;
    editingFileNo = null;
    document.getElementById('fileModalLabel').textContent = 'Add New File';
    document.getElementById('fileActions').style.display = 'none';
    document.getElementById('financialSummaryCard').style.display = 'none';
    document.getElementById('documentsCard').style.display = 'none'; // Hide documents card for new file
    clearFileForm();
    
    // Set default date to today
    document.getElementById('opened').value = new Date().toISOString().split('T')[0];
    
    openModal('fileModal');
}

async function editFile(fileNo) {
    try {
        const response = await window.http.wrappedFetch(`/api/files/${fileNo}`);
        
        if (!response.ok) throw new Error('Failed to load file');
        
        const file = await response.json();
        populateFileForm(file);
        
        isEditing = true;
        editingFileNo = fileNo;
        document.getElementById('fileModalLabel').textContent = 'Edit File - ' + fileNo;
        document.getElementById('fileActions').style.display = 'block';
        document.getElementById('financialSummaryCard').style.display = 'block';
        document.getElementById('documentsCard').style.display = 'block'; // Show documents card for editing
        document.getElementById('fileNo').readOnly = true;
        
        // Show/hide close/reopen buttons based on status
        const isClosed = file.status === 'CLOSED' || file.closed;
        document.getElementById('closeFileBtn').style.display = isClosed ? 'none' : 'inline-block';
        document.getElementById('reopenFileBtn').style.display = isClosed ? 'inline-block' : 'none';
        
        // Load financial summary
        loadFinancialSummary(fileNo);
        loadDocuments(fileNo); // Load documents for editing
        
        openModal('fileModal');
        
    } catch (error) {
        console.error('Error loading file:', error);
        showAlert('Error loading file: ' + error.message, 'danger');
    }
}

function viewFile(fileNo) {
    editFile(fileNo); // For now, same as edit - could be made read-only
}

function populateFileForm(file) {
    const form = document.getElementById('fileForm');
    
    // Populate basic fields
    Object.keys(file).forEach(key => {
        const input = form.querySelector(`[name="${key}"]`);
        if (input && file[key] !== null && file[key] !== undefined) {
            if (input.type === 'date') {
                input.value = file[key];
            } else {
                input.value = file[key];
            }
        }
    });
    
    // Load client information
    loadClientInfo(file.id);
}

async function loadClientInfo(clientId) {
    try {
        const response = await window.http.wrappedFetch(`/api/customers/${clientId}`);
        
        if (response.ok) {
            const client = await response.json();
            const name = `${client.first || ''} ${client.last}`.trim();
            document.getElementById('clientName').textContent = `${name} (${client.city || ''}, ${client.abrev || ''})`;
        } else {
            document.getElementById('clientName').textContent = 'Client information not found';
        }
    } catch (error) {
        document.getElementById('clientName').textContent = 'Error loading client information';
    }
}

async function loadFinancialSummary(fileNo) {
    try {
        const response = await window.http.wrappedFetch(`/api/files/${fileNo}/financial-summary`);
        
        if (response.ok) {
            const data = await response.json();
            displayFinancialSummary(data.financial_data);
        }
    } catch (error) {
        console.error('Error loading financial summary:', error);
    }
}

function displayFinancialSummary(financial) {
    const container = document.getElementById('financialSummary');
    container.innerHTML = `
        <div class="text-center">
            <div class="text-xl text-primary-600">${formatCurrency(financial.total_charges)}</div>
            <div class="text-xs text-neutral-500">Total Charges</div>
        </div>
        <div class="text-center">
            <div class="text-xl text-success-600">${formatCurrency(financial.amount_owing)}</div>
            <div class="text-xs text-neutral-500">Amount Owing</div>
        </div>
        <div class="text-center">
            <div class="text-xl text-info-600">${formatCurrency(financial.trust_balance)}</div>
            <div class="text-xs text-neutral-500">Trust Balance</div>
        </div>
        <div class="text-center">
            <div class="text-xl text-warning-600">${financial.hours_total.toFixed(2)} hrs</div>
            <div class="text-xs text-neutral-500">Total Hours</div>
        </div>
    `;
}

function clearFileForm() {
    document.getElementById('fileForm').reset();
    document.getElementById('fileNo').readOnly = false;
    document.getElementById('clientName').textContent = 'Selected client will appear here';
}

async function saveFile() {
    const form = document.getElementById('fileForm');
    const formData = new FormData(form);
    
    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }
    
    const fileData = {};
    for (let [key, value] of formData.entries()) {
        if (value.trim() !== '') {
            // Convert numeric fields
            if (['rate_per_hour'].includes(key)) {
                fileData[key] = parseFloat(value);
            } else {
                fileData[key] = value.trim();
            }
        }
    }
    
    try {
        const url = isEditing ? `/api/files/${editingFileNo}` : '/api/files/';
        const method = isEditing ? 'PUT' : 'POST';
        
        const response = await window.http.wrappedFetch(url, {
            method: method,
            body: JSON.stringify(fileData)
        });
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.detail || 'Failed to save file');
        }
        
        closeModal('fileModal');
        showAlert(isEditing ? 'File updated successfully' : 'File created successfully', 'success');
        loadFiles(currentPage, currentFilters);
        
    } catch (error) {
        console.error('Error saving file:', error);
        showAlert('Error saving file: ' + error.message, 'danger');
    }
}

async function deleteFile() {
    if (!confirm('Are you sure you want to delete this file? This action cannot be undone and will also delete all related ledger entries, QDROs, and other associated data.')) {
        return;
    }
    
    try {
        const response = await window.http.wrappedFetch(`/api/files/${editingFileNo}`, {
            method: 'DELETE'
        });
        
        if (!response.ok) throw new Error('Failed to delete file');
        
        closeModal('fileModal');
        showAlert('File deleted successfully', 'success');
        loadFiles(currentPage, currentFilters);
        
    } catch (error) {
        console.error('Error deleting file:', error);
        showAlert('Error deleting file: ' + error.message, 'danger');
    }
}

async function closeFile() {
    const closeDate = prompt('Enter close date (YYYY-MM-DD) or leave blank for today:');
    
    try {
        const body = closeDate ? JSON.stringify({ close_date: closeDate }) : '';
        const response = await window.http.wrappedFetch(`/api/files/${editingFileNo}/close`, {
            method: 'POST',
            body: body
        });
        
        if (!response.ok) throw new Error('Failed to close file');
        
        showAlert('File closed successfully', 'success');
        // Refresh the current file view
        editFile(editingFileNo);
        loadFiles(currentPage, currentFilters);
        
    } catch (error) {
        console.error('Error closing file:', error);
        showAlert('Error closing file: ' + error.message, 'danger');
    }
}

async function reopenFile() {
    try {
        const response = await window.http.wrappedFetch(`/api/files/${editingFileNo}/reopen`, {
            method: 'POST'
        });
        
        if (!response.ok) throw new Error('Failed to reopen file');
        
        showAlert('File reopened successfully', 'success');
        // Refresh the current file view
        editFile(editingFileNo);
        loadFiles(currentPage, currentFilters);
        
    } catch (error) {
        console.error('Error reopening file:', error);
        showAlert('Error reopening file: ' + error.message, 'danger');
    }
}

function showClientSelectionModal() {
    searchClients(); // Load initial client list
    openModal('clientSelectionModal');
}

async function searchClients() {
    const search = document.getElementById('clientSearchInput').value;
    
    try {
        const params = new URLSearchParams({ limit: 100 });
        if (search) params.append('search', search);
        
        const response = await window.http.wrappedFetch(`/api/customers/?${params}`);
        
        if (!response.ok) throw new Error('Failed to search clients');
        
        const clients = await response.json();
        displayClientOptions(clients);
        
    } catch (error) {
        console.error('Error searching clients:', error);
        showAlert('Error searching clients: ' + error.message, 'danger');
    }
}

function displayClientOptions(clients) {
    const tbody = document.getElementById('clientSelectionTableBody');
    tbody.innerHTML = '';
    const tokens = _buildTokens(document.getElementById('clientSearchInput') ? document.getElementById('clientSearchInput').value : '');
    
    clients.forEach(client => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${highlightText(client.id || '', tokens)}</td>
            <td>${highlightText(`${client.first || ''} ${client.last || ''}`.trim(), tokens)}</td>
            <td>${highlightText(`${client.city || ''}, ${client.abrev || ''}`.trim(), tokens)}</td>
            <td>${highlightText(client.group || '', tokens)}</td>
            <td>
                <button class="px-2 py-1 bg-primary-600 text-white rounded hover:bg-primary-700 text-sm" onclick="selectClient('${String(client.id).replace(/"/g, '&quot;')}', '${((client.first || '') + ' ' + (client.last || '')).replace(/"/g, '&quot;')}', '${(`${client.city || ''}, ${client.abrev || ''}`).replace(/"/g, '&quot;')}')">Select</button>
            </td>
        `;
        tbody.appendChild(row);
    });
}

function selectClient(clientId, clientName, location) {
    document.getElementById('clientId').value = clientId;
    document.getElementById('clientName').textContent = `${clientName} (${location})`;
    closeModal('clientSelectionModal');
}

async function validateFileNumber() {
    const fileNo = document.getElementById('fileNo').value;
    if (!fileNo || isEditing) return;
    
    try {
        const response = await window.http.wrappedFetch(`/api/files/${fileNo}`);
        
        if (response.ok) {
            showAlert('File number already exists', 'warning');
            document.getElementById('fileNo').focus();
        }
    } catch (error) {
        // File doesn't exist, which is good for new files
    }
}

function showAdvancedSearchModal() {
    openModal('advancedSearchModal');
}

async function performAdvancedSearch() {
    const form = document.getElementById('advancedSearchForm');
    const formData = new FormData(form);
    const params = new URLSearchParams();
    
    for (let [key, value] of formData.entries()) {
        if (value.trim()) {
            // Map form field names to API parameter names
            const apiKey = key.replace('adv', '').toLowerCase();
            if (apiKey.includes('opened')) {
                params.append(key.replace('adv', '').toLowerCase().replace('opened', 'opened_'), value);
            } else {
                params.append(apiKey.replace('filename', 'file_no').replace('clientname', 'client_name'), value);
            }
        }
    }
    
    try {
        const response = await window.http.wrappedFetch(`/api/files/search/advanced?${params}`);
        
        if (!response.ok) throw new Error('Advanced search failed');
        
        const results = await response.json();
        displayFiles(results.files);
        
        closeModal('advancedSearchModal');
        showAlert(`Found ${results.total} files`, 'info');
        
    } catch (error) {
        console.error('Advanced search error:', error);
        showAlert('Advanced search failed: ' + error.message, 'danger');
    }
}

function clearAdvancedSearch() {
    document.getElementById('advancedSearchForm').reset();
}

async function showStats() {
    try {
        const response = await window.http.wrappedFetch('/api/files/stats/summary');
        
        if (!response.ok) throw new Error('Failed to load statistics');
        
        const stats = await response.json();
        displayStats(stats);
        
    } catch (error) {
        console.error('Error loading stats:', error);
        showAlert('Error loading statistics: ' + error.message, 'danger');
    }
}

function displayStats(stats) {
    const content = document.getElementById('statsContent');
    content.innerHTML = `
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="col-span-1 md:col-span-1">
                <h6>File Overview</h6>
                <ul class="list-none p-0 m-0 space-y-1">
                    <li><strong>Total Files:</strong> ${stats.total_files}</li>
                    <li><strong>Active Files:</strong> ${stats.active_files}</li>
                    <li><strong>Total Hours:</strong> ${stats.financial_summary.total_hours.toFixed(1)}</li>
                    <li><strong>Total Charges:</strong> ${formatCurrency(stats.financial_summary.total_charges)}</li>
                </ul>
                
                <h6>Status Breakdown</h6>
                <ul class="list-none p-0 m-0 space-y-1">
                    ${stats.status_breakdown.map(s => `<li><strong>${s.status}:</strong> ${s.count}</li>`).join('')}
                </ul>
            </div>
            <div class="col-span-1 md:col-span-1">
                <h6>Financial Summary</h6>
                <ul class="list-none p-0 m-0 space-y-1">
                    <li><strong>Total Owing:</strong> ${formatCurrency(stats.financial_summary.total_owing)}</li>
                    <li><strong>Trust Balance:</strong> ${formatCurrency(stats.financial_summary.total_trust)}</li>
                </ul>
                
                <h6>File Type Breakdown</h6>
                <ul class="list-none p-0 m-0 space-y-1">
                    ${stats.type_breakdown.map(t => `<li><strong>${t.type}:</strong> ${t.count}</li>`).join('')}
                </ul>
                
                <h6>Attorney Breakdown</h6>
                <ul class="list-none p-0 m-0 space-y-1">
                    ${stats.employee_breakdown.map(e => `<li><strong>${e.employee}:</strong> ${e.count}</li>`).join('')}
                </ul>
            </div>
        </div>
    `;
    
    openModal('statsModal');
}

// Utility functions
function formatDate(dateString) {
    if (!dateString) return '';
    const date = new Date(dateString);
    return date.toLocaleDateString();
}

function formatCurrency(amount) {
    return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
    }).format(amount || 0);
}

function showAlert(message, type = 'info') {
    if (window.alerts && typeof window.alerts.show === 'function') {
        window.alerts.show(message, type);
    } else if (window.showNotification) {
        window.showNotification(message, type);
    } else {
        alert(String(message));
    }
}

async function loadDocuments(fileNo) {
    try {
        const response = await window.http.wrappedFetch(`/api/documents/${fileNo}/uploaded`);
        if (!response.ok) throw new Error('Failed to load documents');
        const docs = await response.json();
        displayDocuments(docs);
    } catch (error) {
        console.error('Error loading documents:', error);
        showAlert('Error loading documents: ' + error.message, 'danger');
    }
}

function displayDocuments(docs) {
    const tbody = document.getElementById('documentsTableBody');
    tbody.innerHTML = '';
    if (docs.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" class="text-center text-neutral-500">No documents uploaded</td></tr>';
        return;
    }
    docs.forEach(doc => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${doc.filename}</td>
            <td>${doc.description || ''}</td>
            <td>${formatDate(doc.upload_date)}</td>
            <td>${formatSize(doc.size)}</td>
            <td>
                <button class="px-2 py-1 border border-blue-600 text-blue-600 rounded hover:bg-blue-100" onclick="downloadDocument('${doc.id}')"><i class="fa-solid fa-download"></i></button>
                <button class="px-2 py-1 border border-cyan-600 text-cyan-600 rounded hover:bg-blue-100" onclick="editDocumentDescription(${doc.id}, '${doc.description || ''}')"><i class="fa-solid fa-pencil"></i></button>
                <button class="px-2 py-1 border border-red-600 text-red-600 rounded hover:bg-red-100" onclick="deleteDocument(${doc.id})"><i class="fa-solid fa-trash"></i></button>
            </td>
        `;
        tbody.appendChild(row);
    });
}

function formatSize(bytes) {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

document.getElementById('uploadDocumentBtn').addEventListener('click', uploadDocument);

async function uploadDocument() {
    const fileInput = document.getElementById('documentFile');
    const description = document.getElementById('documentDescription').value;
    const file = fileInput.files[0];
    if (!file) {
        showAlert('Please select a file', 'warning');
        return;
    }

    // Client-side validation
    const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'image/jpeg', 'image/png'];
    if (!allowedTypes.includes(file.type)) {
        showAlert('Invalid file type', 'warning');
        return;
    }
    if (file.size > 10 * 1024 * 1024) {
        showAlert('File too large (max 10MB)', 'warning');
        return;
    }

    const formData = new FormData();
    formData.append('file', file);
    formData.append('description', description);

    try {
        const response = await window.http.wrappedFetch(`/api/documents/upload/${editingFileNo}`, {
            method: 'POST',
            body: formData,
            // Note: no Content-Type; browser sets multipart boundaries
        });
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.detail || 'Upload failed');
        }
        showAlert('Document uploaded successfully', 'success');
        loadDocuments(editingFileNo);
        fileInput.value = '';
        document.getElementById('documentDescription').value = '';
    } catch (error) {
        showAlert('Error uploading document: ' + error.message, 'danger');
    }
}

async function downloadDocument(docId) {
    // To download, need endpoint to serve or get path
    // Assuming we have /api/documents/uploaded/{doc_id}/download that returns file
    window.open(`/api/documents/uploaded/${docId}/download`, '_blank');
    // But since we have path, and /uploads mounted, can do window.open('/' + path)
    // But since path is uploads/file_no/uuid.ext, yes.
    // But to get path, need to adjust displayDocuments to include path in data attribute or something.
    // For simplicity, add endpoint for download if needed, but since public, can use path.
    // Wait, in display, use doc.path
    // Adjust the row to <button onclick="downloadDocument('${doc.path}')">
    // Then function downloadDocument(path) { window.open('/' + path, '_blank'); }
}

function downloadDocument(path) {
    window.open('/' + path, '_blank');
}

async function deleteDocument(docId) {
    if (!confirm('Are you sure you want to delete this document?')) return;
    try {
        const response = await window.http.wrappedFetch(`/api/documents/uploaded/${docId}`, {
            method: 'DELETE',
        });
        if (!response.ok) throw new Error('Failed to delete');
        showAlert('Document deleted', 'success');
        loadDocuments(editingFileNo);
    } catch (error) {
        showAlert('Error deleting document: ' + error.message, 'danger');
    }
}

function editDocumentDescription(docId, currentDesc) {
    const newDesc = prompt('Edit description:', currentDesc);
    if (newDesc === null) return;
    updateDocumentDescription(docId, newDesc);
}

async function updateDocumentDescription(docId, description) {
    const formData = new FormData();
    formData.append('description', description);
    try {
        const response = await window.http.wrappedFetch(`/api/documents/uploaded/${docId}`, {
            method: 'PUT',
            body: formData,
        });
        if (!response.ok) throw new Error('Failed to update');
        showAlert('Description updated', 'success');
        loadDocuments(editingFileNo);
    } catch (error) {
        showAlert('Error updating description: ' + error.message, 'danger');
    }
}
</script>
{% endblock %}