OneForMe/Views/Order/Join.cshtml

@using OneForMe.Services
@inject LocalizationService Localizer

@model OneForMe.Models.Order

@{
    ViewData["Title"] = Localizer["JoinOrder"];
}

<div class="container mt-5">
    <div class="row">
        <div class="col-md-8">
            <div class="card shadow mb-4">
                <div class="card-body">
                    <h2>@Model.Name</h2>
                    <p class="text-muted">@Localizer["Code"]: <strong>@Model.OrderCode</strong></p>
                    <p>@Localizer["CreatedBy"]: <strong>@Model.CreatorName</strong></p>

                    @if (!string.IsNullOrEmpty(Model.ImagePath))
                    {
                        <img src="@Model.ImagePath" alt="Order Image" class="img-fluid mb-3 rounded" style="max-height: 300px; object-fit: cover;">
                    }
                    
                    @if (!string.IsNullOrEmpty(Model.AdditionalInfo))
                    {
                        <p class="border rounded p-3" style="white-space: pre-wrap;">@Model.AdditionalInfo</p>
                    }
                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">@Localizer["MenuItems"]</h5>
                </div>
                <div class="card-body">
                    @if (Model.MenuItems.Any())
                    {
                        <form method="post" action="/order/additem">
                            <input type="hidden" name="orderId" value="@Model.Id">

                            <div class="mb-3">
                                <label for="menuItemId" class="form-label">@Localizer["SelectItem"]</label>
                                <select class="form-select" id="menuItemId" name="menuItemId" required onchange="updatePrice()">
                                    <option value="">-- @Localizer["ChooseAnItem"] --</option>
                                    @foreach (var item in Model.MenuItems)
                                    {
                                        <option value="@item.Id" data-price="@item.Price.ToString("F2")">@item.Name - @Localizer["Currency", item.Price.ToString("F2")]</option>
                                    }
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="quantity" class="form-label">@Localizer["Qty"]</label>
                                <input type="number" class="form-control" id="quantity" name="quantity" value="1" min="1" step="1" required>
                            </div>

                            <div class="mb-3">
                                <label for="comments" class="form-label">@Localizer["Comments"]</label>
                                <input class="form-control" id="comments" name="comments"></input>
                            </div>

                            <div class="alert alert-info">
                                <strong>@Localizer["Total"]:</strong> @Html.Raw(Localizer["Currency", "<span id=\"totalPrice\">0.00</span>"])
                            </div>

                            <button type="submit" class="btn btn-success">@Localizer["AddToOrder"]</button>
                            <a href="/Home/Dashboard" class="btn btn-secondary">@Localizer["BackToDashboard"]</a>
                        </form>
                    }
                    else
                    {
                        <p class="text-muted">@Localizer["NoItemsAvailable"]</p>
                    }
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">@Localizer["CurrentOrders"] (@Model.OrderItems.Count)</h5>
                </div>
                <div class="card-body">
                    @if (Model.OrderItems.Any())
                    {
                        <div class="table-responsive">
                            <table class="table table-sm table-hover">
                                <thead>
                                    <tr>
                                        <th>@Localizer["Person"]</th>
                                        <th>@Localizer["Item"]</th>
                                        <th>@Localizer["Qty"]</th>
                                        @if (Model.OrderItems.Any(oi => !string.IsNullOrEmpty(oi.Comments)))
                                        {
                                            <th>@Localizer["Comments"]</th>
                                        }
                                        <th>@Localizer["Total"]</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var orderItem in Model.OrderItems)
                                    {
                                        <tr>
                                            <td>@orderItem.ParticipantName</td>
                                            <td>@orderItem.MenuItem?.Name</td>
                                            <td>@orderItem.Quantity</td>
                                            @if (Model.OrderItems.Any(oi => !string.IsNullOrEmpty(oi.Comments)))
                                            {
                                                <td style="word-break: break-word;">@orderItem.Comments</td>
                                            }
                                            <td>@Localizer["Currency", (orderItem.MenuItem?.Price * orderItem.Quantity ?? 0).ToString("F2")]</td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>

                        <hr>

                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>@Localizer["Person"]</th>
                                        <th>@Localizer["Owes"]</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var person in Model.OrderItems.GroupBy(oi => oi.ParticipantName))
                                    {
                                        <tr>
                                            <td>@person.Key</td>
                                            <td>@Localizer["Currency", person.Sum(oi => oi.MenuItem.Price * oi.Quantity).ToString("F2")]</td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                    }
                    else
                    {
                        <p class="text-muted">@Localizer["NoOrdersYet"]</p>
                    }
                </div>
            </div>

            <div class="card shadow">
                <div class="card-body">
                    <h5>@Localizer["OrderTotal"]</h5>
                    <h3 class="text-success">@Localizer["Currency", Model.OrderItems.Sum(oi => oi.MenuItem.Price * oi.Quantity).ToString("F2")]</h3>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function updatePrice() {
    const select = document.getElementById('menuItemId');
    const quantity = document.getElementById('quantity').value;
    const selectedOption = select.options[select.selectedIndex];
    const price = parseFloat(selectedOption.dataset.price.replace(",", ".")) || 0;
    const total = (price * quantity).toFixed(2);
    document.getElementById('totalPrice').textContent = total;
}

document.getElementById('quantity').addEventListener('change', updatePrice);
document.getElementById('quantity').addEventListener('input', updatePrice);
document.getElementById('menuItemId').addEventListener('change', updatePrice);
</script>