252 lines
No EOL
13 KiB
Twig
252 lines
No EOL
13 KiB
Twig
{% 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 %} |