{% extends 'base.html' %}
{% block title %}Profit Reports{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <div>
        <h4 class="text-white fw-bold mb-1">Profit &amp; Sales Statement</h4>
        <div class="text-secondary small">{{ label }}</div>
    </div>
    <div class="d-flex gap-2 flex-wrap">
        <div class="btn-group">
            <a href="?type=daily" class="btn btn-sm {% if rt == 'daily' %}btn-success{% else %}btn-outline-light{% endif %}">Daily</a>
            <a href="?type=weekly" class="btn btn-sm {% if rt == 'weekly' %}btn-success{% else %}btn-outline-light{% endif %}">Weekly</a>
            <a href="?type=monthly" class="btn btn-sm {% if rt == 'monthly' %}btn-success{% else %}btn-outline-light{% endif %}">Monthly</a>
            <a href="?type=yearly" class="btn btn-sm {% if rt == 'yearly' %}btn-success{% else %}btn-outline-light{% endif %}">Yearly</a>
        </div>
        <a href="{% url 'report_export_csv' %}?type={{ rt }}" class="btn btn-sm btn-outline-success">
            <i class="fas fa-file-csv"></i> Export CSV
        </a>
        <a href="{% url 'report_export_pdf' %}?type={{ rt }}" class="btn btn-sm btn-outline-danger">
            <i class="fas fa-file-pdf"></i> Export PDF
        </a>
    </div>
</div>

{% include 'partials/scope_banner.html' %}
<div class="row g-3 mb-4">
    <div class="col-xl-2 col-md-4 col-6">
        <div class="stat-card">
            <div class="stat-icon" style="background:linear-gradient(135deg,#10b981,#059669)">
                <i class="fas fa-sack-dollar"></i>
            </div>
            <div class="stat-info"><small>Net Sales</small><h4>{{ ts|floatformat:2 }}</h4></div>
        </div>
    </div>
    <div class="col-xl-2 col-md-4 col-6">
        <div class="stat-card">
            <div class="stat-icon" style="background:linear-gradient(135deg,#3b82f6,#2563eb)">
                <i class="fas fa-boxes-stacked"></i>
            </div>
            <div class="stat-info"><small>COGS</small><h4>{{ cogs|floatformat:2 }}</h4></div>
        </div>
    </div>
    <div class="col-xl-2 col-md-4 col-6">
        <div class="stat-card">
            <div class="stat-icon" style="background:linear-gradient(135deg,#8b5cf6,#7c3aed)">
                <i class="fas fa-chart-line"></i>
            </div>
            <div class="stat-info"><small>Gross Profit</small><h4>{{ gp|floatformat:2 }}</h4></div>
        </div>
    </div>
    <div class="col-xl-2 col-md-4 col-6">
        <div class="stat-card">
            <div class="stat-icon" style="background:linear-gradient(135deg,#ef4444,#dc2626)">
                <i class="fas fa-file-invoice-dollar"></i>
            </div>
            <div class="stat-info"><small>Expenses</small><h4>{{ te|floatformat:2 }}</h4></div>
        </div>
    </div>
    <div class="col-xl-2 col-md-4 col-6">
        <div class="stat-card">
            <div class="stat-icon" style="background:linear-gradient(135deg,#ec4899,#db2777)">
                <i class="fas fa-users-gear"></i>
            </div>
            <div class="stat-info"><small>Salaries Paid</small><h4>{{ salaries|floatformat:2 }}</h4></div>
        </div>
    </div>
    <div class="col-xl-2 col-md-4 col-6">
        <div class="stat-card">
            <div class="stat-icon" style="background:linear-gradient(135deg,#f59e0b,#d97706)">
                <i class="fas fa-coins"></i>
            </div>
            <div class="stat-info"><small>Net Profit</small><h4>{{ np|floatformat:2 }}</h4></div>
        </div>
    </div>
    <div class="col-xl-2 col-md-4 col-6">
        <div class="stat-card">
            <div class="stat-icon" style="background:linear-gradient(135deg,#06b6d4,#0891b2)">
                <i class="fas fa-receipt"></i>
            </div>
            <div class="stat-info"><small>Sales Invoices</small><h4>{{ tsc }}</h4></div>
        </div>
    </div>
</div>

<div class="content-card mb-3">
    <div class="content-card-header">
        <strong class="text-white">Revenue &amp; Gross Profit Trend</strong>
    </div>
    <div class="content-card-body">
        <canvas id="trendChart" height="90"></canvas>
    </div>
</div>

{% if branch_rows %}
<div class="content-card mb-3">
    <div class="content-card-header"><strong class="text-white"><i class="fas fa-code-branch me-2"></i>Branch-wise Summary</strong></div>
    <div class="content-card-body p-0"><div class="table-responsive">
        <table class="table mb-0">
            <thead><tr><th>Branch</th><th class="text-end">Invoices</th><th class="text-end">Net Sales</th><th class="text-end">COGS</th><th class="text-end">Gross Profit</th><th class="text-end">Expenses</th><th class="text-end">Salaries</th><th class="text-end">Net Profit</th></tr></thead>
            <tbody>
            {% for r in branch_rows %}
            <tr>
                <td class="text-white fw-semibold">{{ r.branch.name }}</td>
                <td class="text-end">{{ r.invoices }}</td>
                <td class="text-end">{{ r.revenue|floatformat:2 }}</td>
                <td class="text-end">{{ r.cogs|floatformat:2 }}</td>
                <td class="text-end">{{ r.gross|floatformat:2 }}</td>
                <td class="text-end">{{ r.expenses|floatformat:2 }}</td>
                <td class="text-end">{{ r.salaries|floatformat:2 }}</td>
                <td class="text-end fw-bold {% if r.net < 0 %}text-danger{% else %}text-success{% endif %}">{{ r.net|floatformat:2 }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div></div>
</div>
{% endif %}

<div class="row g-3 mb-3">
    <div class="col-lg-6">
        <div class="content-card">
            <div class="content-card-header"><strong class="text-white">Profit by Brand</strong></div>
            <div class="content-card-body p-0">
                <div class="table-responsive">
                    <table class="table mb-0">
                        <thead>
                        <tr>
                            <th>Brand</th>
                            <th>Qty</th>
                            <th>Revenue</th>
                            <th>Cost</th>
                            <th>Profit</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for row in brand_rows %}
                        <tr>
                            <td class="text-white">{{ row.key }}</td>
                            <td>{{ row.quantity|floatformat:"0" }}</td>
                            <td>{{ row.revenue|floatformat:2 }}</td>
                            <td>{{ row.cost|floatformat:2 }}</td>
                            <td class="{% if row.profit >= 0 %}text-success{% else %}text-danger{% endif %} fw-bold">
                                {{ row.profit|floatformat:2 }}
                            </td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="5" class="text-center text-secondary py-4">No sales in this period.</td></tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="content-card">
            <div class="content-card-header"><strong class="text-white">Profit by Category</strong></div>
            <div class="content-card-body p-0">
                <div class="table-responsive">
                    <table class="table mb-0">
                        <thead>
                        <tr>
                            <th>Category</th>
                            <th>Qty</th>
                            <th>Revenue</th>
                            <th>Cost</th>
                            <th>Profit</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for row in category_rows %}
                        <tr>
                            <td class="text-white">{{ row.key }}</td>
                            <td>{{ row.quantity|floatformat:"0" }}</td>
                            <td>{{ row.revenue|floatformat:2 }}</td>
                            <td>{{ row.cost|floatformat:2 }}</td>
                            <td class="{% if row.profit >= 0 %}text-success{% else %}text-danger{% endif %} fw-bold">
                                {{ row.profit|floatformat:2 }}
                            </td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="5" class="text-center text-secondary py-4">No sales in this period.</td></tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="content-card mb-3">
    <div class="content-card-header">
        <div>
            <strong class="text-white">Product-wise Profit Statement</strong>
            <div class="text-secondary small mt-1">
                Buy price is the historical cost captured at the time of sale.
                Sell price is the weighted average actual selling price.
            </div>
        </div>
    </div>
    <div class="content-card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                <tr>
                    <th>Product</th>
                    <th>Brand</th>
                    <th>Qty</th>
                    <th>Avg Buy Price</th>
                    <th>Avg Sell Price</th>
                    <th>Revenue</th>
                    <th>COGS</th>
                    <th>Profit</th>
                </tr>
                </thead>
                <tbody>
                {% for row in product_rows %}
                <tr>
                    <td class="text-white fw-semibold">{{ row.product_name }}</td>
                    <td>{{ row.brand_name }}</td>
                    <td>{{ row.quantity|floatformat:"0" }}</td>
                    <td>{{ row.avg_buy_price|floatformat:2 }}</td>
                    <td>{{ row.avg_sell_price|floatformat:2 }}</td>
                    <td>{{ row.revenue|floatformat:2 }}</td>
                    <td>{{ row.cost|floatformat:2 }}</td>
                    <td class="{% if row.profit >= 0 %}text-success{% else %}text-danger{% endif %} fw-bold">
                        {{ row.profit|floatformat:2 }}
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="8" class="text-center text-secondary py-5">No sales in this period.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="content-card">
    <div class="content-card-header"><strong class="text-white">Recent Sales</strong></div>
    <div class="content-card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0">
                <thead><tr><th>Invoice</th><th>Customer</th><th>Date</th><th>Net Amount</th></tr></thead>
                <tbody>
                {% for s in rs %}
                <tr>
                    <td class="text-white">{{ s.invoice_number }}</td>
                    <td>{{ s.customer.name|default:"Walk-in" }}</td>
                    <td>{{ s.date }}</td>
                    <td>{{ s.net_amount|floatformat:2 }}</td>
                </tr>
                {% empty %}
                <tr><td colspan="4" class="text-center text-secondary py-4">No sales in this period.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const axis = {
    ticks: { color: '#6b7280' },
    grid: { color: 'rgba(255,255,255,.05)' }
};

new Chart(document.getElementById('trendChart'), {
    type: 'line',
    data: {
        labels: {{ trend_labels|safe }},
        datasets: [
            {
                label: 'Net Sales',
                data: {{ trend_revenue|safe }},
                borderColor: '#10b981',
                backgroundColor: 'rgba(16,185,129,.10)',
                tension: .3,
                fill: true
            },
            {
                label: 'Gross Profit',
                data: {{ trend_profit|safe }},
                borderColor: '#8b5cf6',
                backgroundColor: 'rgba(139,92,246,.08)',
                tension: .3,
                fill: false
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { labels: { color: '#9ca3af' } }
        },
        scales: {
            x: axis,
            y: axis
        }
    }
});
</script>
{% endblock %}