{% extends 'layout.twig' %}
{% import 'components/form.twig' as form %}

{% block title %}Order #{{ order.id }} - {{ parent() }}{% endblock %}

{% block content %}
    <div class="row mb-4">
        <div class="col">
            <h2>Order #{{ order.id }}</h2>
        </div>
        <div class="col-auto">
            <div class="btn-group" role="group">
                <a href="/orders" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Orders
                </a>
                {% if order.status == 'pending' %}
                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#completeOrderModal">
                        <i class="fas fa-check"></i> Complete Order
                    </button>
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#cancelOrderModal">
                        <i class="fas fa-times"></i> Cancel Order
                    </button>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Order Items</h5>
                </div>
                <div class="card-body">
                    {% if order.orderItems is empty %}
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i> This order has no items.
                        </div>
                    {% else %}
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Drink Type</th>
                                        <th>Quantity</th>
                                        {% if order.status == 'pending' %}
                                            <th>Actions</th>
                                        {% endif %}
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in order.orderItems %}
                                        <tr>
                                            <td>
                                                <a href="/drink-types/{{ item.drinkType.id }}">
                                                    {{ item.drinkType.name }}
                                                </a>
                                            </td>
                                            <td>{{ item.quantity }}</td>
                                            {% if order.status == 'pending' %}
                                                <td>
                                                    <form action="/orders/{{ order.id }}/items/{{ item.id }}/remove" method="post" class="d-inline" onsubmit="return confirm('Are you sure you want to remove this item?');">
                                                        <button type="submit" class="btn btn-sm btn-danger">
                                                            <i class="fas fa-trash"></i> Remove
                                                        </button>
                                                    </form>
                                                </td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                </tbody>
                                <tfoot>
                                    <tr class="table-active">
                                        <th>Total</th>
                                        <th>
                                            {% set totalQuantity = 0 %}
                                            {% for item in order.orderItems %}
                                                {% set totalQuantity = totalQuantity + item.quantity %}
                                            {% endfor %}
                                            {{ totalQuantity }}
                                        </th>
                                        {% if order.status == 'pending' %}
                                            <th></th>
                                        {% endif %}
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    {% endif %}

                    {% if order.status == 'pending' %}
                        <div class="mt-4">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addItemModal">
                                <i class="fas fa-plus"></i> Add Item
                            </button>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Order Details</h5>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <tr>
                            <th style="width: 40%">Order ID</th>
                            <td>{{ order.id }}</td>
                        </tr>
                        <tr>
                            <th>Status</th>
                            <td>
                                {% if order.status == 'pending' %}
                                    <span class="badge bg-warning">Pending</span>
                                {% elseif order.status == 'completed' %}
                                    <span class="badge bg-success">Completed</span>
                                {% elseif order.status == 'cancelled' %}
                                    <span class="badge bg-danger">Cancelled</span>
                                {% else %}
                                    <span class="badge bg-secondary">{{ order.status }}</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Created At</th>
                            <td>{{ order.createdAt|date('Y-m-d H:i:s') }}</td>
                        </tr>
                        <tr>
                            <th>Updated At</th>
                            <td>{{ order.updatedAt|date('Y-m-d H:i:s') }}</td>
                        </tr>
                        <tr>
                            <th>Total Items</th>
                            <td>{{ order.orderItems|length }}</td>
                        </tr>
                        <tr>
                            <th>Total Quantity</th>
                            <td>
                                {% set totalQuantity = 0 %}
                                {% for item in order.orderItems %}
                                    {% set totalQuantity = totalQuantity + item.quantity %}
                                {% endfor %}
                                {{ totalQuantity }}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            {% if order.status == 'pending' %}
                <div class="card">
                    <div class="card-header bg-danger text-white">
                        <h5 class="card-title mb-0">Danger Zone</h5>
                    </div>
                    <div class="card-body">
                        <form action="/orders/{{ order.id }}/delete" method="post" onsubmit="return confirm('Are you sure you want to delete this order? This action cannot be undone.');">
                            <div class="d-grid">
                                <button type="submit" class="btn btn-danger">
                                    <i class="fas fa-trash"></i> Delete Order
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

    {% if order.status == 'pending' %}
        <!-- Add Item Modal -->
        <div class="modal fade" id="addItemModal" tabindex="-1" aria-labelledby="addItemModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addItemModalLabel">Add Item to Order</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="/orders/{{ order.id }}/items" method="post">
                        <div class="modal-body">
                            <div class="form-group mb-3">
                                <label for="drink_type_id">Drink Type</label>
                                <select id="drink_type_id" name="drink_type_id" class="form-control" required>
                                    <option value="">-- Select Drink Type --</option>
                                    {% for drinkType in drinkTypes|default([]) %}
                                        <option value="{{ drinkType.id }}">{{ drinkType.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="quantity">Quantity</label>
                                <input type="number" id="quantity" name="quantity" class="form-control" min="1" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Add Item</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Complete Order Modal -->
        <div class="modal fade" id="completeOrderModal" tabindex="-1" aria-labelledby="completeOrderModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="completeOrderModalLabel">Complete Order</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to mark this order as completed?</p>
                        <p class="text-muted">This will update the inventory levels accordingly.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <form action="/orders/{{ order.id }}/status" method="post">
                            <input type="hidden" name="status" value="completed">
                            <button type="submit" class="btn btn-success">Complete Order</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cancel Order Modal -->
        <div class="modal fade" id="cancelOrderModal" tabindex="-1" aria-labelledby="cancelOrderModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="cancelOrderModalLabel">Cancel Order</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to cancel this order?</p>
                        <p class="text-muted">This action cannot be undone.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No, Keep Order</button>
                        <form action="/orders/{{ order.id }}/status" method="post">
                            <input type="hidden" name="status" value="cancelled">
                            <button type="submit" class="btn btn-danger">Yes, Cancel Order</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}