{% extends "pos/base.html" %}
{% load static %}

{% block stylesheets %}
{{ block.super }}
<style>
    .stat-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff; padding: 15px 20px; border-radius: 10px;
        text-align: center; margin-bottom: 15px;
    }
    .stat-card.green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
    .stat-card.red { background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%); }
    .stat-card h4 { margin: 0; font-size: 22px; font-weight: bold; }
    .stat-card small { opacity: 0.9; }
    .filter-section { background: #f8f9fa; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
    .table th { background: #343a40; color: #fff; font-size: 12px; }
    .table td { font-size: 13px; vertical-align: middle; }
    .text-right { text-align: right; }
    .gap-pos { color: #dc3545; font-weight: bold; }
    .gap-neg { color: #0B60D1; font-weight: bold; }
    .gap-zero { color: #6c757d; }
</style>
{% endblock %}

{% block heading %}Item-wise Investment Comparison{% endblock heading %}

{% block content %}

<div class="alert alert-info small">
    <i class="fas fa-info-circle"></i>
    Column 2 (<b>Inventory Report Investment</b>) = <code>present_stock × purchase_price</code> per item — same as the general Inventory Report.
    Column 3 (<b>Warehouse Sum Investment</b>) = sum of that item's stock across <b>all warehouses</b> × purchase_price — same basis as the Warehouse Inventory Report.
    Column 4 is the gap between them. Sort by <b>Gap</b> to find the biggest contributors first.
</div>

<!-- Stats -->
<div class="row mb-3">
    <div class="col-md-3">
        <div class="stat-card">
            <h4>{{ totals.items }}</h4>
            <small>Items Listed</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card green">
            <h4>{{ totals.total_inv_inventory|floatformat:0 }}</h4>
            <small>Total (Inventory Report basis)</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <h4>{{ totals.total_inv_warehouse|floatformat:0 }}</h4>
            <small>Total (Warehouse Sum basis)</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card red">
            <h4>{{ totals.total_gap|floatformat:0 }}</h4>
            <small>Net Gap</small>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="filter-section">
    <form method="get" class="form-row align-items-end">
        <div class="form-group col-md-2 mb-2">
            <div class="d-flex align-items-center mb-1">
                <input class="form-check-input mr-1" type="checkbox" name="filter_company" id="filter_company"
                       {% if params.filter_company %}checked{% endif %}>
                <label class="form-check-label small mb-0" for="filter_company">Company</label>
            </div>
            <select name="company" class="form-control form-control-sm">
                <option value="">-- All Companies --</option>
                {% for c in companies %}
                    <option value="{{ c }}" {% if params.company == c %}selected{% endif %}>{{ c }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group col-md-2 mb-2">
            <div class="d-flex align-items-center mb-1">
                <input class="form-check-input mr-1" type="checkbox" name="filter_category" id="filter_category"
                       {% if params.filter_category %}checked{% endif %}>
                <label class="form-check-label small mb-0" for="filter_category">Category</label>
            </div>
            <select name="category" class="form-control form-control-sm">
                <option value="">-- All Categories --</option>
                {% for c in categories %}
                    <option value="{{ c }}" {% if params.category == c %}selected{% endif %}>{{ c }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group col-md-2 mb-2">
            <div class="d-flex align-items-center mb-1">
                <input class="form-check-input mr-1" type="checkbox" name="filter_code" id="filter_code"
                       {% if params.filter_code %}checked{% endif %}>
                <label class="form-check-label small mb-0" for="filter_code">Product Code</label>
            </div>
            <input type="text" name="product_code" class="form-control form-control-sm"
                   placeholder="Code..." value="{{ params.product_code }}">
        </div>

        <div class="form-group col-md-2 mb-2">
            <div class="d-flex align-items-center mb-1">
                <input class="form-check-input mr-1" type="checkbox" name="filter_name" id="filter_name"
                       {% if params.filter_name %}checked{% endif %}>
                <label class="form-check-label small mb-0" for="filter_name">Product Name</label>
            </div>
            <input type="text" name="product_name" class="form-control form-control-sm"
                   placeholder="Name..." value="{{ params.product_name }}">
        </div>

        <div class="form-group col-md-2 mb-2">
            <div class="form-check mb-1">
                <input class="form-check-input" type="checkbox" name="hide_empty" id="hide_empty"
                       {% if params.hide_empty %}checked{% endif %}>
                <label class="form-check-label small" for="hide_empty">Hide items with zero on both sides</label>
            </div>
            <button type="submit" class="btn btn-primary btn-sm btn-block">
                <i class="fas fa-search"></i> Search
            </button>
        </div>
    </form>
</div>

<div class="mb-3">
    <a href="{% url 'reports:inventory_report' %}" class="btn btn-secondary btn-sm mr-2">
        <i class="fas fa-arrow-left"></i> Inventory Report
    </a>
    <a href="{% url 'reports:warehouse_inventory_report' %}" class="btn btn-secondary btn-sm">
        <i class="fas fa-arrow-left"></i> Warehouse Inventory Report
    </a>
</div>

<div class="table-responsive">
    <table class="table table-bordered table-hover table-sm" id="compareTable">
        <thead>
            <tr>
                <th>Code</th>
                <th>Product</th>
                <th>Company</th>
                <th>Category</th>
                <th class="text-right">Purchase Price</th>
                <th class="text-right">Present Stock (units)</th>
                <th class="text-right">Warehouse Sum (units)</th>
                <th class="text-right">Inventory Report Investment</th>
                <th class="text-right">Warehouse Sum Investment</th>
                <th class="text-right">Gap</th>
            </tr>
        </thead>
        <tbody>
            {% for r in rows %}
            <tr>
                <td>{{ r.product_code }}</td>
                <td>{{ r.name }}</td>
                <td>{{ r.company }}</td>
                <td>{{ r.category }}</td>
                <td class="text-right">{{ r.purchase_price|floatformat:2 }}</td>
                <td class="text-right">{{ r.present_stock|floatformat:2 }}</td>
                <td class="text-right">{{ r.warehouse_qty|floatformat:2 }}</td>
                <td class="text-right">{{ r.inv_inventory|floatformat:2 }}</td>
                <td class="text-right">{{ r.inv_warehouse|floatformat:2 }}</td>
                <td class="text-right {% if r.gap > 0 %}gap-pos{% elif r.gap < 0 %}gap-neg{% else %}gap-zero{% endif %}">
                    {{ r.gap|floatformat:2 }}
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="10" class="text-center text-muted py-4">
                    <i class="fas fa-box-open fa-2x mb-2"></i><br>
                    No items found for the current filters.
                </td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr class="table-dark">
                <th colspan="7" class="text-right">Grand Totals:</th>
                <th class="text-right">{{ totals.total_inv_inventory|floatformat:2 }}</th>
                <th class="text-right">{{ totals.total_inv_warehouse|floatformat:2 }}</th>
                <th class="text-right">{{ totals.total_gap|floatformat:2 }}</th>
            </tr>
        </tfoot>
    </table>
</div>

{% endblock %}

{% block javascripts %}
{{ block.super }}
<script>
$(function(){
    $('#compareTable').DataTable({
        order: [[9, 'desc']],   // biggest gap first
        pageLength: 50,
        lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
        dom: '<"row"<"col-md-6"l><"col-md-6"f>>rtip',
    });

    $('select[name="company"]').on('change', function(){
        if ($(this).val()) $('#filter_company').prop('checked', true);
    });
    $('select[name="category"]').on('change', function(){
        if ($(this).val()) $('#filter_category').prop('checked', true);
    });
    $('input[name="product_code"]').on('input', function(){
        if ($(this).val().trim()) $('#filter_code').prop('checked', true);
    });
    $('input[name="product_name"]').on('input', function(){
        if ($(this).val().trim()) $('#filter_name').prop('checked', true);
    });
});
</script>
{% endblock %}