<?php require_once __DIR__ . '/_sidebar.php'; ?>
<main class="flex-1 py-16 md:py-0 md:pl-64">
    <div class="max-w-7xl mx-auto px-4 py-8 md:py-16">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold text-slate-950">Documents</h1>
                <p class="mt-2 text-slate-600">Upload and manage customer invoices, project files, and warranty documents.</p>
            </div>
            <a href="<?= htmlspecialchars($baseUrl) ?>/admin" class="rounded-full border border-slate-300 px-5 py-3 text-sm text-slate-950 hover:bg-slate-100">Back to Dashboard</a>
        </div>

        <div class="mt-10 grid gap-6 lg:grid-cols-[0.9fr_0.7fr]">
            <div class="rounded-3xl bg-white p-6 shadow-lg border border-slate-200">
                <h2 class="text-xl font-semibold text-slate-950">Uploaded Documents</h2>
                <div class="mt-6 overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-200 text-sm">
                        <thead class="bg-charcoal text-white">
                            <tr>
                                <th class="px-6 py-4 text-left">Title</th>
                                <th class="px-6 py-4 text-left">Type</th>
                                <th class="px-6 py-4 text-left">Project</th>
                                <th class="px-6 py-4 text-left">Invoice</th>
                                <th class="px-6 py-4 text-left">Uploaded</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200 bg-white">
                            <?php foreach ($documents as $document): ?>
                            <tr>
                                <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($document['title']) ?></td>
                                <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($document['document_type']) ?></td>
                                <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($document['project_name'] ?? '—') ?></td>
                                <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($document['invoice_number'] ?? '—') ?></td>
                                <td class="px-6 py-4 text-slate-700"><?= htmlspecialchars($document['created_at']) ?></td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="rounded-3xl bg-white p-6 shadow-lg border border-slate-200">
                <h2 class="text-xl font-semibold text-slate-950">Upload Document</h2>
                <form id="document-upload-form" method="post" action="<?= htmlspecialchars($baseUrl) ?>/admin/documents/upload" enctype="multipart/form-data" class="mt-6 space-y-4">
                    <?= CSRF::input() ?>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Title</label>
                        <input name="title" type="text" required class="mt-2 w-full rounded-2xl border border-slate-300 p-3" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Document Type</label>
                        <select name="document_type" class="mt-2 w-full rounded-2xl border border-slate-300 p-3">
                            <option>Invoice</option>
                            <option>Project</option>
                            <option>Warranty</option>
                            <option>Other</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">File</label>
                        <input name="file" type="file" accept="application/pdf" class="mt-2 w-full text-sm text-slate-700" required />
                        <p class="mt-2 text-xs text-slate-500">Allowed type: PDF only. Maximum file size: 5 MB.</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Related Project</label>
                        <select name="project_id" class="mt-2 w-full rounded-2xl border border-slate-300 p-3">
                            <option value="">None</option>
                            <?php foreach ($projects as $project): ?>
                            <option value="<?= htmlspecialchars($project['id']) ?>"><?= htmlspecialchars($project['name']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Related Invoice</label>
                        <select name="invoice_id" class="mt-2 w-full rounded-2xl border border-slate-300 p-3">
                            <option value="">None</option>
                            <?php foreach ($invoices as $invoice): ?>
                            <option value="<?= htmlspecialchars($invoice['id']) ?>"><?= htmlspecialchars($invoice['invoice_number']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <button type="submit" class="w-full rounded-full btn-primary px-6 py-3 text-sm font-semibold">Upload Document</button>
                </form>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('document-upload-form')?.addEventListener('submit', function (event) {
            const fileInput = this.querySelector('input[name="file"]');
            const file = fileInput?.files?.[0];
            const allowedTypes = ['application/pdf'];
            const maxSize = 5 * 1024 * 1024;

            if (!file) {
                return;
            }

            if (!allowedTypes.includes(file.type)) {
                alert('Please upload a PDF document only.');
                event.preventDefault();
                return;
            }

            if (file.size > maxSize) {
                alert('Document size cannot exceed 5 MB.');
                event.preventDefault();
            }
        });
    </script>
</main>
</div>
