{% extends 'core/base.html' %}
{% load static %}
{% load currency_filters %}

{% block title %}Sales by Item Summary - SwiftPOS{% endblock %}

{% block topbar_title %}
Sales by Item Summary
{% endblock %}

{% block content %}
<div class="container-fluid px-0">

    <div class="sp-page-header">
        <div>
            <h1 class="sp-page-title"><i class="fas fa-boxes"></i>Sales by Items</h1>
            <p class="sp-page-subtitle">
                Detailed breakdown of products sold and margins.
                {% if start_date == end_date %}
                    Showing: <strong>{{ start_date }}</strong>
                {% else %}
                    Showing: <strong>{{ start_date }}</strong> → <strong>{{ end_date }}</strong>
                {% endif %}
            </p>
        </div>
        <div class="sp-page-actions">
            <a href="?start_date={{ start_date }}&end_date={{ end_date }}&export=csv"
               class="btn btn-sm btn-outline-success d-flex align-items-center gap-2">
                <i class="fas fa-file-csv"></i> Export CSV
            </a>
        </div>
    </div>

    <div class="sp-filter-bar mb-3">
        <form method="get" class="d-flex flex-wrap align-items-center gap-2">
            <label class="text-muted small mb-0">From</label>
            <input type="date" name="start_date" class="form-control form-control-sm"
                   value="{{ start_date }}" style="max-width:160px;">
            <label class="text-muted small mb-0">To</label>
            <input type="date" name="end_date" class="form-control form-control-sm"
                   value="{{ end_date }}" style="max-width:160px;">
            <button type="submit" class="btn btn-sm btn-primary">
                <i class="fas fa-filter me-1"></i> Filter
            </button>
            <a href="?" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-times me-1"></i> Reset to Today
            </a>
        </form>
    </div>

    {% if report_data %}
    <!-- Summary Cards -->
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center p-3">
                <div class="text-muted small fw-semibold text-uppercase mb-1" style="font-size:.7rem;">Items Sold</div>
                <div class="fw-bold fs-5">{{ grand_totals.quantity }}</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center p-3">
                <div class="text-muted small fw-semibold text-uppercase mb-1" style="font-size:.7rem;">Net Sales</div>
                <div class="fw-bold fs-5 text-primary">{% money grand_totals.net_sales %}</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center p-3">
                <div class="text-muted small fw-semibold text-uppercase mb-1" style="font-size:.7rem;">Cost of Goods</div>
                <div class="fw-bold fs-5 text-warning">{% money grand_totals.cost_of_goods %}</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center p-3">
                <div class="text-muted small fw-semibold text-uppercase mb-1" style="font-size:.7rem;">Gross Profit</div>
                <div class="fw-bold fs-5 {% if grand_totals.gross_profit > 0 %}text-success{% else %}text-danger{% endif %}">
                    {% money grand_totals.gross_profit %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <div class="card">
        <div class="card-body p-0">
            <div class="sp-table-container">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                    <tr>
                        <th class="py-3 px-3">Item name</th>
                        <th class="py-3 px-3">SKU</th>
                        <th class="py-3 px-3">Category</th>
                        <th class="py-3 px-3 text-end">Items sold</th>
                        <th class="py-3 px-3 text-end">Gross sales</th>
                        <th class="py-3 px-3 text-end">Refunds</th>
                        <th class="py-3 px-3 text-end">Discounts</th>
                        <th class="py-3 px-3 text-end">Net sales</th>
                        <th class="py-3 px-3 text-end">Cost of goods</th>
                        <th class="py-3 px-3 text-end">Gross profit</th>
                        <th class="py-3 px-3 text-end">Margin</th>
                        <th class="py-3 px-3 text-end">Taxes</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in report_data %}
                    <tr>
                        <td class="px-3 fw-medium text-dark">{{ item.item_name }}</td>
                        <td class="px-3">{{ item.sku }}</td>
                        <td class="px-3">
                            <span class="badge bg-light text-dark border">{{ item.category }}</span>
                        </td>
                        <td class="px-3 text-end fw-semibold">{{ item.quantity }}</td>
                        <td class="px-3 text-end">{{ item.gross_sales|floatformat:2 }}</td>
                        <td class="px-3 text-end text-danger">{{ item.refunds|floatformat:2 }}</td>
                        <td class="px-3 text-end text-warning">{{ item.discounts|floatformat:2 }}</td>
                        <td class="px-3 text-end fw-bold">{{ item.net_sales|floatformat:2 }}</td>
                        <td class="px-3 text-end text-muted">{{ item.cost_of_goods|floatformat:2 }}</td>
                        <td class="px-3 text-end {% if item.gross_profit > 0 %}text-success{% else %}text-danger{% endif %}">
                            {{ item.gross_profit|floatformat:2 }}
                        </td>
                        <td class="px-3 text-end">
                            <span class="badge {% if item.margin > 20 %}bg-success{% elif item.margin > 0 %}bg-info{% else %}bg-danger{% endif %} text-white">
                                {{ item.margin|floatformat:2 }}%
                            </span>
                        </td>
                        <td class="px-3 text-end text-muted">{{ item.taxes|floatformat:2 }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="12" class="text-center py-5 text-muted">
                            <div class="mb-2"><i class="fas fa-box-open fa-2x opacity-50"></i></div>
                            No sales data found for the selected dates.
                        </td>
                    </tr>
                    {% endfor %}

                    {% if report_data %}
                    <!-- Grand Totals Row -->
                    <tr style="background-color:#f0f4ff; border-top: 2px solid #dee2e6;" class="fw-bold text-dark">
                        <td class="px-3" colspan="3">TOTALS</td>
                        <td class="px-3 text-end">{{ grand_totals.quantity }}</td>
                        <td class="px-3 text-end">{{ grand_totals.gross_sales|floatformat:2 }}</td>
                        <td class="px-3 text-end text-danger">{{ grand_totals.refunds|floatformat:2 }}</td>
                        <td class="px-3 text-end text-warning">{{ grand_totals.discounts|floatformat:2 }}</td>
                        <td class="px-3 text-end">{{ grand_totals.net_sales|floatformat:2 }}</td>
                        <td class="px-3 text-end">{{ grand_totals.cost_of_goods|floatformat:2 }}</td>
                        <td class="px-3 text-end {% if grand_totals.gross_profit > 0 %}text-success{% else %}text-danger{% endif %}">
                            {{ grand_totals.gross_profit|floatformat:2 }}
                        </td>
                        <td class="px-3 text-end">{{ grand_totals.margin|floatformat:2 }}%</td>
                        <td class="px-3 text-end">{{ grand_totals.taxes|floatformat:2 }}</td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}