{% extends 'layout.twig' %}

{% block title %}Low Stock Items - {{ parent() }}{% endblock %}

{% block content %}
    <div class="row mb-4">
        <div class="col">
            <h2>Low Stock Items</h2>
        </div>
        <div class="col-auto">
            <div class="btn-group" role="group">
                <a href="/inventory" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Inventory
                </a>
                <a href="/inventory/update" class="btn btn-primary">
                    <i class="fas fa-sync"></i> Update Stock
                </a>
                <a href="/orders/create-from-stock" class="btn btn-success">
                    <i class="fas fa-shopping-cart"></i> Create Order
                </a>
            </div>
        </div>
    </div>

    {% if lowStockItems is empty %}
        <div class="alert alert-success">
            <i class="fas fa-check-circle"></i> All items are at or above their desired stock levels.
        </div>
    {% else %}
        <div class="card">
            <div class="card-header bg-warning text-white">
                <h5 class="card-title mb-0">Items Below Desired Stock Levels</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Drink Type</th>
                                <th>Current Stock</th>
                                <th>Desired Stock</th>
                                <th>Difference</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in lowStockItems %}
                                <tr>
                                    <td>
                                        <a href="/drink-types/{{ item.drinkType.id }}">
                                            {{ item.drinkType.name }}
                                        </a>
                                    </td>
                                    <td>{{ item.currentStock }}</td>
                                    <td>{{ item.drinkType.desiredStock }}</td>
                                    <td class="text-danger">{{ item.currentStock - item.drinkType.desiredStock }}</td>
                                    <td>
                                        {% set percentage = (item.currentStock / item.drinkType.desiredStock * 100)|round %}
                                        {% if percentage < 25 %}
                                            <span class="badge bg-danger">Critical ({{ percentage }}%)</span>
                                        {% elseif percentage < 50 %}
                                            <span class="badge bg-warning">Low ({{ percentage }}%)</span>
                                        {% else %}
                                            <span class="badge bg-info">Below Target ({{ percentage }}%)</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <a href="/inventory/history/{{ item.drinkType.id }}" class="btn btn-outline-secondary">
                                                <i class="fas fa-history"></i>
                                            </a>
                                            <a href="/inventory/update" class="btn btn-outline-primary">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer">
                <div class="d-flex justify-content-between align-items-center">
                    <small class="text-muted">Showing {{ lowStockItems|length }} items below desired stock levels</small>
                    <a href="/orders/create-from-stock" class="btn btn-success">
                        <i class="fas fa-shopping-cart"></i> Create Order from Stock Levels
                    </a>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Recommended Actions</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <i class="fas fa-shopping-cart text-success"></i> Create an order to replenish stock
                            </li>
                            <li class="list-group-item">
                                <i class="fas fa-chart-line text-info"></i> Review consumption patterns
                            </li>
                            <li class="list-group-item">
                                <i class="fas fa-cog text-primary"></i> Adjust desired stock levels if needed
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Stock Level Summary</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i> {{ lowStockItems|length }} items are below their desired stock levels.
                        </div>
                        
                        {% set criticalCount = 0 %}
                        {% set lowCount = 0 %}
                        {% set belowTargetCount = 0 %}
                        
                        {% for item in lowStockItems %}
                            {% set percentage = (item.currentStock / item.drinkType.desiredStock * 100)|round %}
                            {% if percentage < 25 %}
                                {% set criticalCount = criticalCount + 1 %}
                            {% elseif percentage < 50 %}
                                {% set lowCount = lowCount + 1 %}
                            {% else %}
                                {% set belowTargetCount = belowTargetCount + 1 %}
                            {% endif %}
                        {% endfor %}
                        
                        <div class="mt-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span>Critical (< 25%):</span>
                                <span class="text-danger">{{ criticalCount }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span>Low (25-50%):</span>
                                <span class="text-warning">{{ lowCount }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span>Below Target (> 50%):</span>
                                <span class="text-info">{{ belowTargetCount }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}