{% 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="row mb-4 align-items-center">
    <div class="col-md-6">
        <h4 class="mb-0 text-primary fw-bold" style="font-size: 1.5rem; letter-spacing: -0.5px;">
            <i class="fas fa-boxes"></i> Sales by Items
        </h4>
        <p class="text-muted small mb-0 mt-1">
            Detailed breakdown of products sold and margins.
        </p>
    </div>
    <div class="col-md-6 text-md-end mt-3 mt-md-0">
        <form method="get" class="d-flex justify-content-md-end align-items-center gap-2">
            <input type="date" name="start_date" class="form-control form-control-sm" value="{{ start_date|default:'' }}" placeholder="Start Date">
            <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">
            
            <button type="submit" class="btn btn-sm btn-primary">
                <i class="fas fa-filter"></i> Filter
            </button>
            
            <button type="submit" name="export" value="csv" class="btn btn-sm btn-outline-success">
                <i class="fas fa-file-csv"></i> Export CSV
            </button>
        </form>
    </div>
</div>

<div class="card shadow-sm border-0" style="border-radius: 12px; overflow: hidden;">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" style="font-size: 0.85rem;">
                <thead style="background: #f8fafc; color: #4b5563;">
                    <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>
{% endblock %}