<?php $this->load->view("partial/header"); ?>

<style>
    .reports_page {
        padding: 28px;
        font-family: 'Segoe UI', Arial, sans-serif;
        background: #f0f4ff;
        min-height: calc(100vh - 120px);
    }

    .reports_header {
        text-align: center;
        margin-bottom: 32px;
    }

    .reports_header h1 {
        font-size: 28px;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 6px;
    }

    .reports_header p {
        color: #999;
        font-size: 14px;
    }

    .reports_grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
        max-width: 1300px;
        margin: 0 auto;
    }

    .report_section {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 16px;
        padding: 22px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.2s;
    }

    .report_section:hover {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    }

    .section_header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(244, 127, 32, 0.2);
    }

    .section_icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }

    .icon_graphical {
        background: linear-gradient(135deg, #667eea, #764ba2);
    }

    .icon_summary {
        background: linear-gradient(135deg, #f47f20, #e05f00);
    }

    .icon_detailed {
        background: linear-gradient(135deg, #0f3460, #16213e);
    }

    .icon_inventory {
        background: linear-gradient(135deg, #2e7d32, #1b5e20);
    }

    .section_title {
        font-size: 14px;
        font-weight: 700;
        color: #1a1a2e;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .report_links {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .report_link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 8px;
        text-decoration: none;
        color: #444;
        font-size: 14px;
        transition: all 0.2s;
        font-family: 'Segoe UI', Arial, sans-serif;
    }

    .report_link::before {
        content: '›';
        color: #f47f20;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
    }

    .report_link:hover {
        background: rgba(244, 127, 32, 0.08);
        color: #f47f20;
        text-decoration: none;
        padding-left: 16px;
    }

    .graphical_note {
        background: rgba(102, 126, 234, 0.08);
        border: 1px solid rgba(102, 126, 234, 0.2);
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 11px;
        color: #667eea;
        margin-bottom: 12px;
        font-style: italic;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {

        .reports_page {
            padding: 12px;
        }

        .reports_header {
            margin-bottom: 20px;
        }

        .reports_header h1 {
            font-size: 22px;
        }

        .reports_header p {
            font-size: 13px;
        }

        .reports_grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .report_section {
            padding: 16px;
        }

        .section_title {
            font-size: 13px;
        }

        .report_link {
            font-size: 13px;
            padding: 7px 10px;
        }
    }

    @media (max-width: 480px) {

        .reports_page {
            padding: 8px;
        }

        .reports_header h1 {
            font-size: 18px;
        }

        .section_icon {
            width: 30px;
            height: 30px;
            font-size: 15px;
        }

        .report_section {
            padding: 12px;
        }
    }
</style>

<div class="reports_page">

    <div class="reports_header">
        <h1>📊 <?php echo $this->lang->line('reports_reports'); ?></h1>
        <p><?php echo $this->lang->line('reports_welcome_message'); ?></p>
    </div>

    <?php if (isset($error)): ?>
        <div style="background:rgba(220,53,69,0.1);border:1px solid rgba(220,53,69,0.3);border-radius:10px;padding:12px 16px;color:#dc3545;font-size:13px;margin-bottom:20px;max-width:1300px;margin-left:auto;margin-right:auto;">
            <?php echo $error; ?>
        </div>
    <?php endif; ?>

    <div class="reports_grid">

        <!-- Graphical Reports -->
        <div class="report_section">
            <div class="section_header">
                <div class="section_icon icon_graphical">📈</div>
                <div class="section_title"><?php echo $this->lang->line('reports_graphical_reports'); ?></div>
            </div>
            <div class="graphical_note">⚠ Requires Flash — use Summary Reports for data</div>
            <div class="report_links">
                <a href="<?php echo site_url('reports/graphical_summary_sales'); ?>" class="report_link"><?php echo $this->lang->line('reports_sales'); ?></a>
                <a href="<?php echo site_url('reports/graphical_summary_categories'); ?>" class="report_link"><?php echo $this->lang->line('reports_categories'); ?></a>
                <a href="<?php echo site_url('reports/graphical_summary_customers'); ?>" class="report_link"><?php echo $this->lang->line('reports_customers'); ?></a>
                <a href="<?php echo site_url('reports/graphical_summary_suppliers'); ?>" class="report_link"><?php echo $this->lang->line('reports_suppliers'); ?></a>
                <a href="<?php echo site_url('reports/graphical_summary_items'); ?>" class="report_link"><?php echo $this->lang->line('reports_items'); ?></a>
                <a href="<?php echo site_url('reports/graphical_summary_employees'); ?>" class="report_link"><?php echo $this->lang->line('reports_employees'); ?></a>
                <a href="<?php echo site_url('reports/graphical_summary_taxes'); ?>" class="report_link"><?php echo $this->lang->line('reports_taxes'); ?></a>
                <a href="<?php echo site_url('reports/graphical_summary_discounts'); ?>" class="report_link"><?php echo $this->lang->line('reports_discounts'); ?></a>
                <a href="<?php echo site_url('reports/graphical_summary_payments'); ?>" class="report_link"><?php echo $this->lang->line('reports_payments'); ?></a>
            </div>
        </div>

        <!-- Summary Reports -->
        <div class="report_section">
            <div class="section_header">
                <div class="section_icon icon_summary">📋</div>
                <div class="section_title"><?php echo $this->lang->line('reports_summary_reports'); ?></div>
            </div>
            <div class="report_links">
                <a href="<?php echo site_url('reports/summary_sales'); ?>" class="report_link"><?php echo $this->lang->line('reports_sales'); ?></a>
                <a href="<?php echo site_url('reports/summary_categories'); ?>" class="report_link"><?php echo $this->lang->line('reports_categories'); ?></a>
                <a href="<?php echo site_url('reports/summary_customers'); ?>" class="report_link"><?php echo $this->lang->line('reports_customers'); ?></a>
                <a href="<?php echo site_url('reports/summary_suppliers'); ?>" class="report_link"><?php echo $this->lang->line('reports_suppliers'); ?></a>
                <a href="<?php echo site_url('reports/summary_items'); ?>" class="report_link"><?php echo $this->lang->line('reports_items'); ?></a>
                <a href="<?php echo site_url('reports/summary_employees'); ?>" class="report_link"><?php echo $this->lang->line('reports_employees'); ?></a>
                <a href="<?php echo site_url('reports/summary_taxes'); ?>" class="report_link"><?php echo $this->lang->line('reports_taxes'); ?></a>
                <a href="<?php echo site_url('reports/summary_discounts'); ?>" class="report_link"><?php echo $this->lang->line('reports_discounts'); ?></a>
                <a href="<?php echo site_url('reports/summary_payments'); ?>" class="report_link"><?php echo $this->lang->line('reports_payments'); ?></a>
            </div>
        </div>

        <!-- Detailed Reports -->
        <div class="report_section">
            <div class="section_header">
                <div class="section_icon icon_detailed">🔍</div>
                <div class="section_title"><?php echo $this->lang->line('reports_detailed_reports'); ?></div>
            </div>
            <div class="report_links">
                <a href="<?php echo site_url('reports/detailed_sales'); ?>" class="report_link"><?php echo $this->lang->line('reports_sales'); ?></a>
                <a href="<?php echo site_url('reports/specific_customer'); ?>" class="report_link"><?php echo $this->lang->line('reports_customer'); ?></a>
                <a href="<?php echo site_url('reports/specific_employee'); ?>" class="report_link"><?php echo $this->lang->line('reports_employee'); ?></a>
            </div>
        </div>

        <!-- Inventory Reports -->
        <div class="report_section">
            <div class="section_header">
                <div class="section_icon icon_inventory">📦</div>
                <div class="section_title"><?php echo $this->lang->line('reports_inventory_reports'); ?></div>
            </div>
            <div class="report_links">
                <a href="<?php echo site_url('reports/inventory_low'); ?>" class="report_link"><?php echo $this->lang->line('reports_low_inventory'); ?></a>
                <a href="<?php echo site_url('reports/inventory_summary'); ?>" class="report_link"><?php echo $this->lang->line('reports_inventory_summary'); ?></a>
            </div>
        </div>

    </div>
</div>

<?php $this->load->view("partial/footer"); ?>

<script type="text/javascript">
    $(document).ready(function() {});
</script>