@using OneForMe.Services
@inject LocalizationService Localizer

@model OneForMe.Models.Order

<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>

@section Scripts {
    <script defer>
        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>
}