{% extends 'layout.twig' %}

{% block title %}Inventory Overview - {{ parent() }}{% endblock %}

{% block content %}
    <div class="row mb-4">
        <div class="col">
            <h2>Inventory Overview</h2>
        </div>
        <div class="col-auto">
            <div class="btn-group" role="group">
                <a href="/inventory/update" class="btn btn-primary">
                    <i class="fas fa-sync"></i> Update Stock
                </a>
                <a href="/inventory/history" class="btn btn-info">
                    <i class="fas fa-history"></i> View History
                </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 stockLevels is empty %}
        <div class="alert alert-info">
            No drink types found in inventory. <a href="/drink-types/create">Add a drink type</a> to get started.
        </div>
    {% else %}
        <div class="row">
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Current 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 stockLevels %}
                                        <tr>
                                            <td>
                                                <a href="/drink-types/{{ item.drinkType.id }}">
                                                    {{ item.drinkType.name }}
                                                </a>
                                            </td>
                                            <td>{{ item.currentStock }}</td>
                                            <td>{{ item.drinkType.desiredStock }}</td>
                                            <td>
                                                {% set difference = item.currentStock - item.drinkType.desiredStock %}
                                                {% if difference < 0 %}
                                                    <span class="text-danger">{{ difference }}</span>
                                                {% elseif difference > 0 %}
                                                    <span class="text-success">+{{ difference }}</span>
                                                {% else %}
                                                    <span class="text-muted">0</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if item.currentStock < item.drinkType.desiredStock %}
                                                    <span class="badge bg-danger">Low Stock</span>
                                                {% elseif item.currentStock == item.drinkType.desiredStock %}
                                                    <span class="badge bg-success">Optimal</span>
                                                {% else %}
                                                    <span class="badge bg-info">Excess</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>
            </div>

            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">Inventory Summary</h5>
                    </div>
                    <div class="card-body">
                        {% set totalItems = stockLevels|length %}
                        {% set lowStockCount = 0 %}
                        {% set optimalCount = 0 %}
                        {% set excessCount = 0 %}
                        
                        {% for item in stockLevels %}
                            {% if item.currentStock < item.drinkType.desiredStock %}
                                {% set lowStockCount = lowStockCount + 1 %}
                            {% elseif item.currentStock == item.drinkType.desiredStock %}
                                {% set optimalCount = optimalCount + 1 %}
                            {% else %}
                                {% set excessCount = excessCount + 1 %}
                            {% endif %}
                        {% endfor %}
                        
                        <div class="mb-3">
                            <h6>Total Drink Types: {{ totalItems }}</h6>
                        </div>
                        
                        <div class="mb-3">
                            <div class="d-flex justify-content-between">
                                <span>Low Stock:</span>
                                <span class="text-danger">{{ lowStockCount }}</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: {{ (lowStockCount / totalItems * 100)|round }}%"></div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="d-flex justify-content-between">
                                <span>Optimal Stock:</span>
                                <span class="text-success">{{ optimalCount }}</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ (optimalCount / totalItems * 100)|round }}%"></div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="d-flex justify-content-between">
                                <span>Excess Stock:</span>
                                <span class="text-info">{{ excessCount }}</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-info" role="progressbar" style="width: {{ (excessCount / totalItems * 100)|round }}%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h5 class="card-title mb-0">Quick Actions</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <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 from Stock Levels
                            </a>
                            <a href="/inventory/low-stock" class="btn btn-warning">
                                <i class="fas fa-exclamation-triangle"></i> View Low Stock Items
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}