<?= $this->extend('layouts/admin') ?>

<?= $this->section('content') ?>

<div class="reports-container" style="padding: 20px;">
    <div style="background: var(--bg-admin-card); border-radius: 15px; padding: 30px; border: 1px solid var(--border-admin);">
        <div style="margin-bottom: 30px;">
            <h2 style="color: var(--text-admin-main); margin-bottom: 10px;">Download Data Reports</h2>
            <p style="color: var(--text-admin-muted);">Generate and download Excel-compatible CSV files for your business records.</p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
            <!-- Enquiries Export -->
            <div style="background: var(--bg-admin-main); border: 1px solid var(--border-admin); border-radius: 12px; padding: 25px; display: flex; flex-direction: column; gap: 15px; transition: transform 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                <div style="display: flex; align-items: center; gap: 15px;">
                    <div style="background: rgba(46, 204, 113, 0.1); color: #2ecc71; width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;">
                        <i class="bi bi-chat-left-text"></i>
                    </div>
                    <div>
                        <h4 style="margin: 0; color: var(--text-admin-main); font-size: 1rem;">Enquiries</h4>
                        <span style="font-size: 0.75rem; color: var(--text-admin-muted);">Leads & Messages</span>
                    </div>
                </div>
                <a href="<?= base_url('admin/export/enquiries') ?>" style="text-align: center; padding: 10px; border-radius: 8px; text-decoration: none; font-weight: 600; background: #2ecc71; color: #fff; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 8px;">
                    <i class="bi bi-download"></i> Export Excel
                </a>
            </div>

            <!-- Projects Export -->
            <div style="background: var(--bg-admin-main); border: 1px solid var(--border-admin); border-radius: 12px; padding: 25px; display: flex; flex-direction: column; gap: 15px; transition: transform 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                <div style="display: flex; align-items: center; gap: 15px;">
                    <div style="background: rgba(52, 152, 219, 0.1); color: #3498db; width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;">
                        <i class="bi bi-folder2"></i>
                    </div>
                    <div>
                        <h4 style="margin: 0; color: var(--text-admin-main); font-size: 1rem;">Projects</h4>
                        <span style="font-size: 0.75rem; color: var(--text-admin-muted);">Portfolio Data</span>
                    </div>
                </div>
                <a href="<?= base_url('admin/export/projects') ?>" style="text-align: center; padding: 10px; border-radius: 8px; text-decoration: none; font-weight: 600; background: #3498db; color: #fff; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 8px;">
                    <i class="bi bi-download"></i> Export Excel
                </a>
            </div>

            <!-- Services Export -->
            <div style="background: var(--bg-admin-main); border: 1px solid var(--border-admin); border-radius: 12px; padding: 25px; display: flex; flex-direction: column; gap: 15px; transition: transform 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                <div style="display: flex; align-items: center; gap: 15px;">
                    <div style="background: rgba(231, 76, 60, 0.1); color: #e74c3c; width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;">
                        <i class="bi bi-gear-wide-connected"></i>
                    </div>
                    <div>
                        <h4 style="margin: 0; color: var(--text-admin-main); font-size: 1rem;">Services</h4>
                        <span style="font-size: 0.75rem; color: var(--text-admin-muted);">Service Offerings</span>
                    </div>
                </div>
                <a href="<?= base_url('admin/export/services') ?>" style="text-align: center; padding: 10px; border-radius: 8px; text-decoration: none; font-weight: 600; background: #e74c3c; color: #fff; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 8px;">
                    <i class="bi bi-download"></i> Export Excel
                </a>
            </div>

            <!-- Categories Export -->
            <div style="background: var(--bg-admin-main); border: 1px solid var(--border-admin); border-radius: 12px; padding: 25px; display: flex; flex-direction: column; gap: 15px; transition: transform 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                <div style="display: flex; align-items: center; gap: 15px;">
                    <div style="background: rgba(241, 196, 15, 0.1); color: #f1c40f; width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;">
                        <i class="bi bi-tags"></i>
                    </div>
                    <div>
                        <h4 style="margin: 0; color: var(--text-admin-main); font-size: 1rem;">Categories</h4>
                        <span style="font-size: 0.75rem; color: var(--text-admin-muted);">Project Sectors</span>
                    </div>
                </div>
                <a href="<?= base_url('admin/export/categories') ?>" style="text-align: center; padding: 10px; border-radius: 8px; text-decoration: none; font-weight: 600; background: #f1c40f; color: #fff; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 8px;">
                    <i class="bi bi-download"></i> Export Excel
                </a>
            </div>

            <!-- Employees Export -->
            <div style="background: var(--bg-admin-main); border: 1px solid var(--border-admin); border-radius: 12px; padding: 25px; display: flex; flex-direction: column; gap: 15px; transition: transform 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                <div style="display: flex; align-items: center; gap: 15px;">
                    <div style="background: rgba(155, 89, 182, 0.1); color: #9b59b6; width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;">
                        <i class="bi bi-people"></i>
                    </div>
                    <div>
                        <h4 style="margin: 0; color: var(--text-admin-main); font-size: 1rem;">Employees</h4>
                        <span style="font-size: 0.75rem; color: var(--text-admin-muted);">Staff Directory</span>
                    </div>
                </div>
                <a href="<?= base_url('admin/export/employees') ?>" style="text-align: center; padding: 10px; border-radius: 8px; text-decoration: none; font-weight: 600; background: #9b59b6; color: #fff; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 8px;">
                    <i class="bi bi-download"></i> Export Excel
                </a>
            </div>
        </div>


    </div>
</div>

<?= $this->endSection() ?>
