{% extends 'layout.twig' %}

{% block title %}{{ drinkType.name }} - {{ parent() }}{% endblock %}

{% block content %}
    <div class="row mb-4">
        <div class="col">
            <h2>Drink Type Details</h2>
        </div>
        <div class="col-auto">
            <div class="btn-group" role="group">
                <a href="/drink-types" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to List
                </a>
                <a href="/drink-types/{{ drinkType.id }}/edit" class="btn btn-primary">
                    <i class="fas fa-edit"></i> Edit
                </a>
                <form action="/drink-types/{{ drinkType.id }}/delete" method="post" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this drink type?');">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash"></i> Delete
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Basic Information</h5>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <tr>
                            <th style="width: 30%">ID</th>
                            <td>{{ drinkType.id }}</td>
                        </tr>
                        <tr>
                            <th>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 currentStock is defined %}
                                    {% if currentStock < drinkType.desiredStock %}
                                        <span class="text-danger">{{ currentStock }}</span>
                                    {% else %}
                                        <span class="text-success">{{ currentStock }}</span>
                                    {% endif %}
                                {% else %}
                                    Not available
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Created At</th>
                            <td>{{ drinkType.createdAt|date('Y-m-d H:i:s') }}</td>
                        </tr>
                        <tr>
                            <th>Updated At</th>
                            <td>{{ drinkType.updatedAt|date('Y-m-d H:i:s') }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Stock History</h5>
                </div>
                <div class="card-body">
                    {% if inventoryRecords is defined and inventoryRecords is not empty %}
                        <div class="table-responsive">
                            <table class="table table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Quantity</th>
                                        <th>Change</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for record in inventoryRecords %}
                                        <tr>
                                            <td>{{ record.createdAt|date('Y-m-d H:i:s') }}</td>
                                            <td>{{ record.quantity }}</td>
                                            <td>
                                                {% 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 %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3">
                            <a href="/inventory/history/{{ drinkType.id }}" class="btn btn-sm btn-info">
                                View Full History
                            </a>
                        </div>
                    {% else %}
                        <p class="text-muted">No inventory records found for this drink type.</p>
                    {% endif %}
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <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" class="btn btn-success">
                            <i class="fas fa-shopping-cart"></i> Create Order
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}