<?php
$page_title = 'Documents Vault';
require_once __DIR__ . '/header.php';
?>
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
    <div>
        <h2 style="font-family:'Outfit',sans-serif; font-size:1.8rem; color:#0f172a; margin:0;"><i class="fas fa-archive" style="color:#6366f1; margin-right:10px;"></i>Documents Vault</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">All invoices, warranties, certificates, product manuals in one place.</p>
    </div>
</div>
<div class="grid-5" style="margin-bottom:24px;">
    <?php
    $vaults = [
        ['Invoices', 'fas fa-file-invoice-dollar', '#3b82f6', '24 files'],
        ['Warranties', 'fas fa-shield-alt', '#10b981', '12 files'],
        ['Certificates', 'fas fa-certificate', '#f59e0b', '8 files'],
        ['Manuals', 'fas fa-book', '#8b5cf6', '15 files'],
        ['Downloads', 'fas fa-download', '#ec4899', '42 files'],
    ];
    foreach ($vaults as $v): ?>
    <div class="card" style="margin-bottom:0; text-align:center; cursor:pointer; transition:all 0.3s;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
        <div style="width:50px; height:50px; border-radius:12px; background:<?= $v[2] ?>15; display:flex; align-items:center; justify-content:center; margin:0 auto 12px;">
            <i class="<?= $v[1] ?>" style="font-size:1.3rem; color:<?= $v[2] ?>;"></i>
        </div>
        <h4 style="margin:0 0 5px; font-size:0.9rem; color:#0f172a;"><?= $v[0] ?></h4>
        <span style="font-size:0.75rem; color:#94a3b8;"><?= $v[3] ?></span>
    </div>
    <?php endforeach; ?>
</div>
<div class="grid-2">
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-file-invoice-dollar" style="color:#3b82f6; margin-right:8px;"></i>Recent Invoices</h3>
        <?php
        $docs = [
            ['INV-2024-0421.pdf', 'Invoice', '₹25,300', 'Apr 20', '#3b82f6'],
            ['INV-2024-0398.pdf', 'Invoice', '₹42,800', 'Apr 8', '#3b82f6'],
            ['WTY-DB-SINK-304.pdf', 'Warranty', '10 Year', 'Mar 28', '#10b981'],
            ['CERT-ISI-304.pdf', 'Certificate', 'ISI Mark', 'Mar 15', '#f59e0b'],
            ['MANUAL-DB-SINK.pdf', 'Manual', '32 pages', 'Mar 10', '#8b5cf6'],
        ];
        foreach ($docs as $d): ?>
        <div style="display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #f1f5f9;">
            <div style="display:flex; align-items:center; gap:10px;">
                <i class="fas fa-file-pdf" style="color:#ef4444; font-size:1.2rem;"></i>
                <div>
                    <div style="font-weight:600; font-size:0.85rem;"><?= $d[0] ?></div>
                    <div style="font-size:0.7rem; color:#94a3b8;"><?= $d[1] ?> · <?= $d[3] ?></div>
                </div>
            </div>
            <button style="background:#f8fafc; border:1px solid #e2e8f0; padding:5px 10px; border-radius:4px; font-size:0.75rem; cursor:pointer; color:#475569;"><i class="fas fa-download"></i></button>
        </div>
        <?php endforeach; ?>
    </div>
    <div class="card" style="background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff;">
        <h3 style="margin:0 0 15px; font-size:1.15rem;"><i class="fas fa-cloud-download-alt"></i> Download Center</h3>
        <p style="margin:0 0 20px; font-size:0.85rem; opacity:0.85;">Access all your documents in bulk or individually.</p>
        <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:10px;">
            <span>Total Documents</span><span style="font-weight:bold;">101</span>
        </div>
        <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:10px;">
            <span>Total Size</span><span style="font-weight:bold;">48 MB</span>
        </div>
        <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:20px;">
            <span>Last Updated</span><span style="font-weight:bold;">Apr 20, 2024</span>
        </div>
        <button style="background:#fff; color:#4f46e5; border:none; padding:10px 20px; border-radius:8px; font-size:0.9rem; cursor:pointer; width:100%; font-weight:700;">Download All (ZIP)</button>
    </div>
</div>
<?php require_once __DIR__ . '/../includes/footer.php'; ?>
