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

{% 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.</p>
        </div>
    </div>

    <div class="sp-filter-bar mb-3">
        <form method="get" class="d-flex flex-wrap align-items-center gap-2">
            <input type="date" name="start_date" class="form-control form-control-sm" value="{{ start_date|default:'' }}" placeholder="Start Date" style="max-width:160px;">
            <span class="text-muted small">to</span>
            <input type="date" name="end_date" class="form-control form-control-sm" value="{{ end_date|default:'' }}" placeholder="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>
            <button type="submit" name="export" value="csv" class="btn btn-sm btn-outline-success">
                <i class="fas fa-file-csv me-1"></i> Export CSV
            </button>
        </form>
    </div>

    <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 text-success">{{ 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 %}
                </tbody>
            </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}