{% extends 'layout.twig' %}

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

{% block content %}
    <div class="row mb-4">
        <div class="col">
            <h2>
                {% if drinkType is defined %}
                    Inventory History for {{ drinkType.name }}
                {% else %}
                    Inventory History
                {% endif %}
            </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>
                {% if drinkType is defined %}
                    <a href="/inventory/history" class="btn btn-info">
                        <i class="fas fa-list"></i> All History
                    </a>
                {% endif %}
                <a href="/inventory/update" class="btn btn-primary">
                    <i class="fas fa-sync"></i> Update Stock
                </a>
            </div>
        </div>
    </div>

    {% if inventoryRecords is empty %}
        <div class="alert alert-info">
            No inventory records found.
        </div>
    {% else %}
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col">
                        <h5 class="card-title mb-0">Stock Change History</h5>
                    </div>
                    <div class="col-auto">
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="filterDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                Filter
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="filterDropdown">
                                <li><a class="dropdown-item" href="/inventory/history">All Records</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><h6 class="dropdown-header">By Drink Type</h6></li>
                                {% for type in drinkTypes|default([]) %}
                                    <li><a class="dropdown-item" href="/inventory/history/{{ type.id }}">{{ type.name }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Date</th>
                                {% if drinkType is not defined %}
                                    <th>Drink Type</th>
                                {% endif %}
                                <th>Previous Quantity</th>
                                <th>New Quantity</th>
                                <th>Change</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for record in inventoryRecords %}
                                <tr>
                                    <td>{{ record.createdAt|date('Y-m-d H:i:s') }}</td>
                                    {% if drinkType is not defined %}
                                        <td>
                                            <a href="/drink-types/{{ record.drinkType.id }}">
                                                {{ record.drinkType.name }}
                                            </a>
                                        </td>
                                    {% endif %}
                                    <td>{{ record.previousQuantity|default('-') }}</td>
                                    <td>{{ record.quantity }}</td>
                                    <td>
                                        {% if record.change is defined %}
                                            {% if record.change > 0 %}
                                                <span class="text-success">+{{ record.change }}</span>
                                            {% elseif record.change < 0 %}
                                                <span class="text-danger">{{ record.change }}</span>
                                            {% else %}
                                                <span class="text-muted">0</span>
                                            {% endif %}
                                        {% else %}
                                            <span class="text-muted">Initial</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer">
                <small class="text-muted">Showing {{ inventoryRecords|length }} records</small>
            </div>
        </div>

        {% if drinkType is defined %}
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Stock Level Trend</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted">Stock level trend visualization would be displayed here.</p>
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> This is a placeholder for a chart showing the stock level trend over time.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Drink Type Information</h5>
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered">
                                <tr>
                                    <th style="width: 30%">Name</th>
                                    <td>{{ drinkType.name }}</td>
                                </tr>
                                <tr>
                                    <th>Description</th>
                                    <td>{{ drinkType.description|default('No description provided') }}</td>
                                </tr>
                                <tr>
                                    <th>Desired Stock</th>
                                    <td>{{ drinkType.desiredStock }}</td>
                                </tr>
                                <tr>
                                    <th>Current Stock</th>
                                    <td>
                                        {% if drinkType.currentStock is defined %}
                                            {% if drinkType.currentStock < drinkType.desiredStock %}
                                                <span class="text-danger">{{ drinkType.currentStock }}</span>
                                            {% else %}
                                                <span class="text-success">{{ drinkType.currentStock }}</span>
                                            {% endif %}
                                        {% else %}
                                            Not available
                                        {% endif %}
                                    </td>
                                </tr>
                            </table>
                            <div class="mt-3">
                                <a href="/drink-types/{{ drinkType.id }}" class="btn btn-sm btn-info">
                                    <i class="fas fa-eye"></i> View Full Details
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    {% endif %}
{% endblock %}