{% extends 'layouts/base.html' %}

{% block content %}

<div class="page-head">
    <div>
        <h1>Employee and Company Performance</h1>
        <p class="muted">Employee approved-sales performance and overall company sales for the selected period.</p>
    </div>
    <div class="action-buttons">
        <a class="btn btn-sm" href="{{ url_for('reports.index') }}">Report Builder</a>
        <a class="btn btn-sm" href="{{ url_for('reports.folder') }}">Saved Reports</a>
    </div>
</div>

<div class="panel">
    <div class="performance-view-controls">
        <a class="btn{% if overall %} active{% endif %}" href="{{ url_for('reports.performance', overall=1) }}">Overall</a>
        {% if overall %}<span class="badge">All dates, including future sales</span>{% endif %}
        <form method="get" class="performance-view-form">
            <label>Month <input type="month" name="month" value="{{ selected_month }}"></label>
            <button class="btn" type="submit">View Month</button>
        </form>
        <form method="get" class="performance-view-form">
            <label>From Date <input type="date" name="date_from" value="{{ date_from }}"></label>
            <label>To Date <input type="date" name="date_to" value="{{ date_to }}"></label>
            <button class="btn" type="submit">View Date Range</button>
        </form>
    </div>
</div>

<div class="grid-2">
    <section class="panel">
        <div class="panel-head"><h3>Approved Sales by Employee</h3><span class="badge">Rs. {{ '%.2f'|format(total_amount) }}</span></div>
        {% if performance_rows %}
        <div style="height: 360px;"><canvas id="performance-chart" aria-label="Approved sales performance chart"></canvas></div>
        {% else %}
        <p class="muted">No approved sales were recorded for this period.</p>
        {% endif %}
    </section>

    <section class="panel">
        <h3>Rankings</h3>
        <div class="table-wrap">
            <table class="modern-table">
                <thead><tr><th>Rank</th><th>Sales Owner</th><th>Manager</th><th>Approved Sales</th><th>Sales</th></tr></thead>
                <tbody>
                    {% for row in performance_rows %}
                    <tr>
                        <td><strong>#{{ row.rank }}</strong></td>
                        <td>{{ row.owner_name }}</td>
                        <td>{{ row.manager_name }}</td>
                        <td>Rs. {{ '%.2f'|format(row.approved_amount) }}</td>
                        <td>{{ row.sale_count }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="5" style="text-align:center;">No approved sales found.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</div>

<section class="panel">
    <h2>Company Performance</h2>
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">🧾</div>
            <div><h3>{{ company_summary.total_orders }}</h3><span>Total Sales Orders</span></div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">₹</div>
            <div><h3>₹{{ '%.2f'|format(company_summary.total_revenue) }}</h3><span>Total Revenue</span></div>
        </div>
    </div>
    <h3>Sales Revenue by Date</h3>
    {% if sales_revenue_chart %}
    <div style="height: 320px;"><canvas id="revenue-chart" aria-label="Sales revenue by date chart"></canvas></div>
    {% else %}
    <p class="muted">No sales revenue found for this period.</p>
    {% endif %}
</section>

<section class="panel">
    <h2>Sales &amp; Incentive This Month</h2>
    <p class="muted">Approved sales and incentives for all active users in the current calendar month.</p>
    <div class="table-wrap">
        <table class="modern-table">
            <thead><tr><th>User</th><th>Sales Orders</th><th>Approved Sales</th><th>Incentive %</th><th>Incentive Amount</th><th>Monthly Salary</th><th>Total Salary</th></tr></thead>
            <tbody>
                {% for user in monthly_incentive_rows %}
                <tr>
                    <td><strong>{{ user.name }}</strong></td>
                    <td>{{ user.sale_count }}</td>
                    <td>Rs. {{ '%.2f'|format(user.approved_sales) }}</td>
                    <td>{{ user.percentage }}%</td>
                    <td>Rs. {{ '%.2f'|format(user.incentive) }}</td>
                    <td>Rs. {{ '%.2f'|format(user.monthly_salary) }}</td>
                    <td>Rs. {{ '%.2f'|format(user.total_salary) }}</td>
                </tr>
                {% else %}
                <tr><td colspan="7" style="text-align:center;">No active users found.</td></tr>
                {% endfor %}
            </tbody>
            {% if monthly_incentive_rows %}
            <tfoot><tr><th>All Users Total</th><th>{{ monthly_incentive_totals.sale_count }}</th><th>Rs. {{ '%.2f'|format(monthly_incentive_totals.approved_sales) }}</th><th>-</th><th>Rs. {{ '%.2f'|format(monthly_incentive_totals.incentive) }}</th><th>Rs. {{ '%.2f'|format(monthly_incentive_totals.monthly_salary) }}</th><th>Rs. {{ '%.2f'|format(monthly_incentive_totals.total_salary) }}</th></tr></tfoot>
            {% endif %}
        </table>
    </div>
</section>

{% if performance_rows or sales_revenue_chart %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
(() => {
    const money = (value) => 'Rs. ' + Number(value).toLocaleString(undefined, { maximumFractionDigits: 0 });

    // Prints each bar's value just above its top edge.
    const barValueLabels = {
        id: 'barValueLabels',
        afterDatasetsDraw(chart) {
            const { ctx } = chart;
            ctx.save();
            ctx.font = '600 11px Tahoma, Verdana, sans-serif';
            ctx.fillStyle = getComputedStyle(chart.canvas).color || '#111827';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            chart.getDatasetMeta(0).data.forEach((bar, index) => {
                const value = chart.data.datasets[0].data[index];
                if (!value) return;
                ctx.fillText(money(value), bar.x, bar.y - 4);
            });
            ctx.restore();
        }
    };

    const performanceCanvas = document.getElementById('performance-chart');
    if (performanceCanvas) {
        const rows = {{ performance_rows|tojson }};
        new Chart(performanceCanvas, {
            type: 'bar',
            data: {
                labels: rows.map(row => row.owner_name),
                datasets: [{ label: 'Approved sales amount', data: rows.map(row => row.approved_amount), backgroundColor: '#1e5e89', borderColor: '#174c70', borderWidth: 1 }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: { y: { beginAtZero: true, ticks: { callback: money } } }
            }
        });
    }

    const revenueCanvas = document.getElementById('revenue-chart');
    if (revenueCanvas) {
        const revenue = {{ sales_revenue_chart|tojson }};
        new Chart(revenueCanvas, {
            type: 'bar',
            plugins: [barValueLabels],
            data: {
                labels: revenue.map(item => item.label),
                datasets: [{
                    label: 'Revenue',
                    data: revenue.map(item => item.value),
                    backgroundColor: '#2779aa',
                    hoverBackgroundColor: '#1e5e89',
                    borderColor: '#174c70',
                    borderWidth: 1,
                    maxBarThickness: 48
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { display: false },
                    tooltip: { callbacks: { label: (context) => money(context.parsed.y) } }
                },
                scales: {
                    x: {
                        title: { display: true, text: 'Date' },
                        ticks: { maxRotation: 45, minRotation: 0, autoSkipPadding: 8 },
                        grid: { display: false }
                    },
                    y: {
                        beginAtZero: true,
                        grace: '12%',
                        title: { display: true, text: 'Revenue' },
                        ticks: { callback: money }
                    }
                }
            }
        });
    }
})();
</script>
{% endif %}

{% endblock %}