{% extends "base.html" %}

{% block title %}Inventory Report - Wholesale Management System{% endblock %}

{% block page_title %}Inventory Report{% endblock %}

{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{% url 'reports_dashboard' %}">Reports</a></li>
    <li class="breadcrumb-item active">Inventory Report</li>
{% endblock %}

{% block page_actions %}
    <div class="btn-group">
        <a href="{% url 'reports_dashboard' %}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Back
        </a>
        <a href="?export=csv" class="btn btn-success">
            <i class="bi bi-download"></i> Export CSV
        </a>
    </div>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <!-- Summary Cards -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-start border-primary border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-primary text-uppercase mb-1">
                            Total Items
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">{{ summary.total_items|default:0 }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-box-seam stat-icon text-primary"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-start border-success border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-success text-uppercase mb-1">
                            Total Quantity
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">{{ summary.total_quantity|default:0 }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-stack stat-icon text-success"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-start border-info border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-info text-uppercase mb-1">
                            Stock Value
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">₹{{ summary.total_value|default:0|floatformat:2 }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-currency-rupee stat-icon text-info"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-start border-warning border-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="text-xs fw-bold text-warning text-uppercase mb-1">
                            Low Stock Items
                        </div>
                        <div class="h5 mb-0 fw-bold text-gray-800">{{ summary.low_stock|default:0 }}</div>
                        <div class="small text-warning">({{ summary.out_of_stock|default:0 }} out of stock)</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-exclamation-triangle stat-icon text-warning"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Category Summary -->
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-diagram-3 text-primary"></i>
                    Category-wise Summary
                </h6>
            </div>
            <div class="card-body">
                {% if category_summary %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Category</th>
                                <th>Items</th>
                                <th>Quantity</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for cat in category_summary %}
                            <tr>
                                <td><strong>{{ cat.product__category__name|default:"Uncategorized" }}</strong></td>
                                <td>{{ cat.count }}</td>
                                <td>{{ cat.total_quantity|default:0 }}</td>
                                <td>₹{{ cat.total_value|default:0|floatformat:2 }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="bi bi-info-circle text-muted fs-1"></i>
                    <p class="mt-2">No category data available</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Low Stock Items -->
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header bg-warning bg-opacity-10">
                <h6 class="mb-0">
                    <i class="bi bi-exclamation-triangle-fill text-warning"></i>
                    Low & Out of Stock Items
                </h6>
            </div>
            <div class="card-body">
                {% with low_stock_items=inventory|slice:":10" %}
                {% if low_stock_items %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>SKU</th>
                                <th>Category</th>
                                <th>Available</th>
                                <th>Reorder Level</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in low_stock_items %}
                            {% if item.is_low_stock %}
                            <tr class="{% if item.available == 0 %}table-danger{% else %}table-warning{% endif %}">
                                <td>
                                    <strong>{{ item.product.name }}</strong>
                                </td>
                                <td>{{ item.product.sku }}</td>
                                <td>{{ item.product.category.name|default:"-" }}</td>
                                <td>
                                    <span class="badge bg-{% if item.available == 0 %}danger{% else %}warning{% endif %}">
                                        {{ item.available }}
                                    </span>
                                </td>
                                <td>{{ item.product.reorder_level|default:"-" }}</td>
                                <td>₹{{ item.stock_value|floatformat:2 }}</td>
                            </tr>
                            {% endif %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="text-end mt-2">
                    <small class="text-muted">Showing top 10 low stock items</small>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="bi bi-check-circle-fill text-success fs-1"></i>
                    <p class="mt-2">No low stock items found. Good inventory levels!</p>
                </div>
                {% endif %}
                {% endwith %}
            </div>
        </div>
    </div>
</div>

<!-- Full Inventory Table -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-8">
                        <h6 class="mb-0">
                            <i class="bi bi-list-check text-secondary"></i>
                            Complete Inventory List
                        </h6>
                    </div>
                    <div class="col-md-4 text-end">
                        <small class="text-muted">Total: {{ inventory.count }} items</small>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>SKU</th>
                                <th>Product</th>
                                <th>Category</th>
                                <th>Supplier</th>
                                <th>Quantity</th>
                                <th>Available</th>
                                <th>Cost Price</th>
                                <th>Stock Value</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in inventory %}
                            <tr>
                                <td><strong>{{ item.product.sku }}</strong></td>
                                <td>{{ item.product.name }}</td>
                                <td>{{ item.product.category.name|default:"-" }}</td>
                                <td>{{ item.product.supplier.name|default:"-" }}</td>
                                <td>{{ item.quantity }}</td>
                                <td>
                                    <span class="badge bg-{% if item.available == 0 %}danger{% elif item.is_low_stock %}warning{% else %}success{% endif %}">
                                        {{ item.available }}
                                    </span>
                                </td>
                                <td>₹{{ item.product.cost_price|floatformat:2 }}</td>
                                <td>₹{{ item.stock_value|floatformat:2 }}</td>
                                <td>
                                    {% if item.available == 0 %}
                                    <span class="badge bg-danger">Out of Stock</span>
                                    {% elif item.is_low_stock %}
                                    <span class="badge bg-warning">Low Stock</span>
                                    {% else %}
                                    <span class="badge bg-success">In Stock</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="9" class="text-center py-4">
                                    <i class="bi bi-inbox text-muted fs-1"></i>
                                    <p class="mt-2">No inventory data found</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-md-6">
                        <small class="text-muted">
                            Report generated on: {% now "F j, Y, g:i a" %}
                        </small>
                    </div>
                    <div class="col-md-6 text-end">
                        <a href="?export=csv" class="btn btn-sm btn-success">
                            <i class="bi bi-download"></i> Download Full Report (CSV)
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Initialize tooltips
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>
{% endblock %}