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

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

<?= view('partials/workspace_hero', [
    'workspaceCrumbPill'    => 'Reports',
    'workspaceCrumbCurrent' => 'Sales Performance',
    'workspaceTitle'        => 'Sales Performance',
    'workspaceDesc'         => 'Orders, collections, win rate, and target attainment for the selected period.',
]) ?>

<?= view('Modules\Sale\Views\reports\_kpis', ['kpis' => $report['kpis'] ?? []]) ?>

<div class="enterprise-data-panel mb-4">
    <div class="enterprise-data-panel__head">
        <h2 class="enterprise-data-panel__title">Filters</h2>
        <p class="enterprise-data-panel__subtitle">Refine by date range, company, or sales representative.</p>
    </div>
    <?= view('Modules\Sale\Views\reports\_filters', [
        'actionPath'  => 'sale/reports/sales-performance',
        'filters'     => $filters,
        'companies'   => $companies,
        'reps'        => $reps,
        'showCompany' => true,
        'showRep'     => true,
    ]) ?>
</div>

<section class="enterprise-charts-grid mb-4">
    <article class="enterprise-chart-card">
        <div class="enterprise-chart-header">
            <h3 class="enterprise-chart-title">INVOICE REVENUE TREND</h3>
        </div>
        <div class="enterprise-chart-body">
            <canvas id="perfRevenueChart" height="220"></canvas>
        </div>
    </article>
    <article class="enterprise-chart-card">
        <div class="enterprise-chart-header">
            <h3 class="enterprise-chart-title">ORDER STATUS MIX</h3>
        </div>
        <div class="enterprise-chart-body">
            <canvas id="perfOrderStatusChart" height="220"></canvas>
        </div>
    </article>
</section>

<div class="enterprise-data-panel mb-4">
    <div class="enterprise-data-panel__head">
        <h2 class="enterprise-data-panel__title">Target Attainment</h2>
        <p class="enterprise-data-panel__subtitle">Sales targets overlapping the selected period.</p>
    </div>
    <div class="enterprise-data-panel__body">
        <div class="table-responsive">
            <table class="enterprise-data-table">
                <thead>
                    <tr>
                        <th>Representative</th>
                        <th>Territory</th>
                        <th>Period</th>
                        <th class="text-end">Target</th>
                        <th class="text-end">Achieved</th>
                        <th class="text-end">Attainment</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($report['targets'] ?? [] as $row): ?>
                        <tr>
                            <td class="enterprise-data-table__primary"><?= esc($row['rep_name'] ?: '—') ?></td>
                            <td><?= esc($row['territory_name'] ?: '—') ?></td>
                            <td><?= esc($row['period_start']) ?> → <?= esc($row['period_end']) ?></td>
                            <td class="text-end"><?= number_format((float) $row['target_amount'], 2) ?></td>
                            <td class="text-end"><?= number_format((float) $row['achieved_amount'], 2) ?></td>
                            <td class="text-end fw-semibold"><?= number_format((float) $row['attainment_pct'], 1) ?>%</td>
                            <td><?= esc(ucfirst($row['status'])) ?></td>
                        </tr>
                    <?php endforeach; ?>
                    <?php if (empty($report['targets'])): ?>
                        <tr><td colspan="7" class="text-center text-muted py-5">No targets overlap this period.</td></tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="enterprise-data-panel">
    <div class="enterprise-data-panel__head">
        <h2 class="enterprise-data-panel__title">Commission Summary</h2>
        <p class="enterprise-data-panel__subtitle">
            Total <?= number_format((float) ($report['commissions']['total'] ?? 0), 2) ?>
            across <?= (int) ($report['commissions']['count'] ?? 0) ?> commission records.
        </p>
    </div>
    <div class="enterprise-data-panel__body">
        <div class="table-responsive">
            <table class="enterprise-data-table">
                <thead>
                    <tr>
                        <th>Status</th>
                        <th class="text-end">Count</th>
                        <th class="text-end">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($report['commissions']['byStatus'] ?? [] as $row): ?>
                        <tr>
                            <td><?= esc(ucfirst($row['status'])) ?></td>
                            <td class="text-end"><?= (int) $row['total'] ?></td>
                            <td class="text-end"><?= number_format((float) $row['amount'], 2) ?></td>
                        </tr>
                    <?php endforeach; ?>
                    <?php if (empty($report['commissions']['byStatus'])): ?>
                        <tr><td colspan="3" class="text-center text-muted py-5">No commissions in this period.</td></tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script>
window.saleReportCharts = <?= json_encode($report['charts'] ?? [], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) ?>;
</script>
<script src="<?= base_url('assets/js/sale-reports.js') ?>"></script>
<?= $this->endSection() ?>
