{% extends "base.html" %}

{% block title %}Inventory Report - AsapLoads POS{% endblock %}

{% block header_title %}Inventory Report{% endblock %}

{% block extra_css %}
<style>
    .summary-box {
        background-color: #f8f9fa;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }
    .summary-box:hover {
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .summary-value {
        font-size: 24px;
        font-weight: 600;
    }
    .product-thumbnail {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 4px;
    }
    .stock-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
    }
    .stock-good {
        background-color: #28a745;
    }
    .stock-low {
        background-color: #ffc107;
    }
    .stock-critical {
        background-color: #dc3545;
    }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Inventory Report</h5>
                <div>
                    <a href="{% url 'export_inventory_report' %}" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-download"></i> Export to CSV
                    </a>
                </div>
            </div>
            <div class="card-body">
                <!-- Summary Cards -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="summary-box text-center">
                            <p class="text-muted mb-1">Total Products</p>
                            <h3 class="summary-value">{{ total_products }}</h3>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="summary-box text-center">
                            <p class="text-muted mb-1">Stock Value</p>
                            <h3 class="summary-value">{{ company_settings.currency_symbol }}{{ total_stock_value|floatformat:2 }}</h3>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="summary-box text-center">
                            <p class="text-muted mb-1">Cost Value</p>
                            <h3 class="summary-value">{{ company_settings.currency_symbol }}{{ total_cost_value|floatformat:2 }}</h3>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="summary-box text-center">
                            <p class="text-muted mb-1">Potential Profit</p>
                            <h3 class="summary-value">{{ company_settings.currency_symbol }}{{ potential_profit|floatformat:2 }}</h3>
                        </div>
                    </div>
                </div>
                
                <!-- Low Stock Alerts -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Low Stock Alerts</h5>
                            </div>
                            <div class="card-body">
                                {% if low_stock_products %}
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Product</th>
                                                <th>Category</th>
                                                <th class="text-end">Current Stock</th>
                                                <th class="text-end">Threshold</th>
                                                <th class="text-end">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for product in low_stock_products %}
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        {% if product.image %}
                                                        <img src="{{ product.image.url }}" alt="{{ product.name }}" class="product-thumbnail me-2">
                                                        {% else %}
                                                        <div class="bg-light d-flex align-items-center justify-content-center me-2" style="width:40px;height:40px;">
                                                            <i class="fas fa-box text-muted"></i>
                                                        </div>
                                                        {% endif %}
                                                        <span>{{ product.name }}</span>
                                                    </div>
                                                </td>
                                                <td>{{ product.category.name|default:"Uncategorized" }}</td>
                                                <td class="text-end">
                                                    <span class="stock-indicator {% if product.quantity == 0 %}stock-critical{% else %}stock-low{% endif %}"></span>
                                                    {{ product.quantity }}
                                                </td>
                                                <td class="text-end">{{ product.low_stock_threshold }}</td>
                                                <td class="text-end">
                                                    <a href="{% url 'adjust_stock' product.id %}" class="btn btn-sm btn-primary">
                                                        <i class="fas fa-plus"></i> Restock
                                                    </a>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                {% else %}
                                <div class="alert alert-success">
                                    <i class="fas fa-check-circle"></i> All products are adequately stocked!
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- All Products Inventory -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">Full Inventory</h5>
                                <div>
                                    <input type="text" id="productSearch" class="form-control form-control-sm" placeholder="Search products...">
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped" id="inventoryTable">
                                        <thead>
                                            <tr>
                                                <th>Product</th>
                                                <th>SKU</th>
                                                <th>Category</th>
                                                <th class="text-end">Stock</th>
                                                <th class="text-end">Cost Price</th>
                                                <th class="text-end">Selling Price</th>
                                                <th class="text-end">Stock Value</th>
                                                <th class="text-end">Profit Margin</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for product in products %}
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        {% if product.image %}
                                                        <img src="{{ product.image.url }}" alt="{{ product.name }}" class="product-thumbnail me-2">
                                                        {% else %}
                                                        <div class="bg-light d-flex align-items-center justify-content-center me-2" style="width:40px;height:40px;">
                                                            <i class="fas fa-box text-muted"></i>
                                                        </div>
                                                        {% endif %}
                                                        <span>{{ product.name }}</span>
                                                    </div>
                                                </td>
                                                <td>{{ product.sku|default:"-" }}</td>
                                                <td>{{ product.category.name|default:"Uncategorized" }}</td>
                                                <td class="text-end">
                                                    <span class="stock-indicator 
                                                    {% if product.quantity == 0 %}
                                                        stock-critical
                                                    {% elif product.quantity <= product.low_stock_threshold %}
                                                        stock-low
                                                    {% else %}
                                                        stock-good
                                                    {% endif %}"></span>
                                                    {{ product.quantity }}
                                                </td>
                                                <td class="text-end">{{ company_settings.currency_symbol }}{{ product.cost_price }}</td>
                                                <td class="text-end">{{ company_settings.currency_symbol }}{{ product.price }}</td>
                                                <td class="text-end">{{ company_settings.currency_symbol }}{{ product.stock_value|floatformat:2 }}</td>
                                                <td class="text-end">{{ product.profit_margin|floatformat:2 }}%</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Recent Stock Movements -->
                <div class="row mt-4">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Recent Stock Movements</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>Product</th>
                                                <th>User</th>
                                                <th>Type</th>
                                                <th class="text-end">From</th>
                                                <th class="text-end">To</th>
                                                <th class="text-end">Change</th>
                                                <th>Reason</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for movement in recent_stock_movements %}
                                            <tr>
                                                <td>{{ movement.timestamp|date:"M d, Y H:i" }}</td>
                                                <td>{{ movement.product.name }}</td>
                                                <td>{{ movement.user.get_full_name|default:"System" }}</td>
                                                <td>{{ movement.get_adjustment_type_display }}</td>
                                                <td class="text-end">{{ movement.from_quantity }}</td>
                                                <td class="text-end">{{ movement.to_quantity }}</td>
                                                <td class="text-end">
                                                    {% if movement.adjustment_type == 'add' or movement.adjustment_type == 'purchase' %}
                                                    <span class="text-success">+{{ movement.adjustment_quantity }}</span>
                                                    {% elif movement.adjustment_type == 'set' %}
                                                    <span>{{ movement.adjustment_quantity }}</span>
                                                    {% else %}
                                                    <span class="text-danger">-{{ movement.adjustment_quantity }}</span>
                                                    {% endif %}
                                                </td>
                                                <td>{{ movement.reason|default:"-" }}</td>
                                            </tr>
                                            {% empty %}
                                            <tr>
                                                <td colspan="8" class="text-center">No recent stock movements</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Product search functionality
        const searchInput = document.getElementById('productSearch');
        const table = document.getElementById('inventoryTable');
        const rows = table.querySelectorAll('tbody tr');
        
        searchInput.addEventListener('keyup', function() {
            const searchTerm = searchInput.value.toLowerCase();
            
            rows.forEach(row => {
                const productName = row.querySelector('td:first-child').textContent.toLowerCase();
                const sku = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
                const category = row.querySelector('td:nth-child(3)').textContent.toLowerCase();
                
                if (productName.includes(searchTerm) || sku.includes(searchTerm) || category.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    });
</script>
{% endblock %}