<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Manager</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/static/css/styles.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">Document Manager</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/">Documents</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/upload">Upload</a>
                    </li>
                </ul>
                <form class="d-flex" id="searchForm">
                    <div class="input-group">
                        <input class="form-control" type="search" placeholder="Search documents..." id="searchInput">
                        <button class="btn btn-outline-light" type="submit">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="row">
            <!-- Filters sidebar -->
            <div class="col-md-3 mb-4">
                <div class="card">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">Filters</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="categoryFilter" class="form-label">Category</label>
                            <select class="form-select" id="categoryFilter">
                                <option value="">All Categories</option>
                                <!-- Categories will be populated by JavaScript -->
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="typeFilter" class="form-label">Document Type</label>
                            <select class="form-select" id="typeFilter">
                                <option value="">All Types</option>
                                <option value="invoice">Invoice</option>
                                <option value="receipt">Receipt</option>
                                <option value="contract">Contract</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="tagsFilter" class="form-label">Tags (comma-separated)</label>
                            <input type="text" class="form-control" id="tagsFilter" placeholder="e.g. utilities, tax, 2025">
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" value="all" id="tagsMatchAll">
                            <label class="form-check-label" for="tagsMatchAll">
                                Match all tags
                            </label>
                        </div>
                        <div class="mb-3">
                            <label for="vendorFilter" class="form-label">Vendor</label>
                            <input type="text" class="form-control" id="vendorFilter" placeholder="e.g. Acme Corp">
                        </div>
                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <label for="minTotalFilter" class="form-label">Min Total</label>
                                <input type="number" step="0.01" class="form-control" id="minTotalFilter" placeholder="0.00">
                            </div>
                            <div class="col-6">
                                <label for="maxTotalFilter" class="form-label">Max Total</label>
                                <input type="number" step="0.01" class="form-control" id="maxTotalFilter" placeholder="0.00">
                            </div>
                        </div>
                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <label for="startDateFilter" class="form-label">Start Date</label>
                                <input type="date" class="form-control" id="startDateFilter">
                            </div>
                            <div class="col-6">
                                <label for="endDateFilter" class="form-label">End Date</label>
                                <input type="date" class="form-control" id="endDateFilter">
                            </div>
                        </div>
                        <button class="btn btn-primary w-100" id="applyFilters">
                            <i class="bi bi-funnel"></i> Apply Filters
                        </button>
                        <button class="btn btn-outline-secondary w-100 mt-2" id="resetFilters">
                            <i class="bi bi-arrow-counterclockwise"></i> Reset
                        </button>
                    </div>
                </div>
            </div>

            <!-- Documents list -->
            <div class="col-md-9">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2>Documents</h2>
                    <a href="/upload" class="btn btn-primary">
                        <i class="bi bi-upload"></i> Upload Document
                    </a>
                </div>

                <div class="alert alert-info" id="noDocuments" style="display: none;">
                    No documents found. <a href="/upload">Upload your first document</a> to get started.
                </div>

                <div class="row" id="documentsList">
                    <!-- Documents will be loaded here by JavaScript -->
                </div>

                <nav aria-label="Page navigation" class="mt-4" id="pagination">
                    <ul class="pagination justify-content-center">
                        <!-- Pagination will be added by JavaScript -->
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- Document Preview Modal -->
    <div class="modal fade" id="documentPreviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="documentPreviewTitle">Document Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center" id="documentPreviewContent">
                    <!-- Preview content will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" id="printDocument">
                        <i class="bi bi-printer"></i> Print
                    </button>
                    <a href="#" class="btn btn-primary" id="downloadDocument">
                        <i class="bi bi-download"></i> Download
                    </a>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
    <script>
    // Configure PDF.js worker before app.js runs
      if (window.pdfjsLib) {
        pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js";
      //  pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/build/pdf.worker.min.js`;
      } else {
        console.error("PDF.js library failed to load.");
      }
    </script>
    <script src="/static/js/app.js" defer></script>
</body>
</html>
