@inherits ViewModelTemplate<ProductViewModel>
@using Dynamicweb.Frontend
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.ProductCatalog
@using System.Globalization

@functions {
	string? DoubleToString(double? value)
	{
		if (value.HasValue)
		{
			return Math.Round(value.Value, 2).ToString(CultureInfo.InvariantCulture);
		}
		return null;
	}
}

@{
    var product = Model;
    var orderId = Dynamicweb.Context.Current?.Request.QueryString.Get("OrderID") ?? null;
	var order = Dynamicweb.Ecommerce.Services.Orders?.GetById(orderId) ?? null;
    bool isSearch = !string.IsNullOrEmpty(Dynamicweb.Context.Current?.Request.Params.Get("q")) ? true : false;
    int? loopCounter  = GetViewParameterInt32("LoopCounter") > 0 ? GetViewParameterInt32("LoopCounter") : null;
    double? quantity = GetViewParameterDouble("Quantity") > 0 ? GetViewParameterDouble("Quantity") : null;
    double? stepQty = product.PurchaseQuantityStep > 0 ? product.PurchaseQuantityStep : 1;
    double? minQty = product.PurchaseMinimumQuantity > 0 ? product.PurchaseMinimumQuantity : 1;
    double? valueQty = order is not null ? quantity : isSearch ? null : minQty > stepQty ? minQty : stepQty;
    string? disableAddToCart = null;
    double? maxQty = null;

    if (product.ProductType == Dynamicweb.Ecommerce.Products.ProductType.Stock && !product.NeverOutOfstock)
    {
        disableAddToCart = product.StockLevel <= 0 ? "disabled" : disableAddToCart;
        maxQty = product.StockLevel;
    }
}

<div class="d-flex align-items-center justify-content-between position-relative" style="width:fit-content;">

    <input id="Quantity_@(product.Id)_@product.VariantId.Replace(".", "_")" name="Quantity@(loopCounter)" value="@DoubleToString(valueQty)" step="@DoubleToString(stepQty)" min="@DoubleToString(minQty)" max="@DoubleToString(maxQty)" class="form-control border-0 rounded-0 px-1 flex-grow-0 text-center" type="number" inputmode="numeric" data-qty @disableAddToCart placeholder="0" tabindex="0">
    <span class="visually-hidden">@Translate("Type a number, or use the decrease or increase button to change the quantity")</span>

    <button type="button" data-qty-step="decrease" aria-label="@Translate("The button to decrease the quantity")" class="d-flex btn btn-outline-secondary p-2 m-1 border-0 order-first" data-dw-button="outline-secondary" onclick="this.parentNode.querySelector('[data-qty]').stepDown()" @disableAddToCart tabindex="-1">
        <svg class="pe-none" focusable="false" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
            <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M19 13H5v-2h14v2z"></path>
        </svg>
    </button>

    <button type="button" data-qty-step="increase" aria-label="@Translate("The button to increase the quantity")" class="d-flex btn btn-outline-secondary p-2 m-1 border-0 order-last" data-dw-button="outline-secondary" onclick="this.parentNode.querySelector('[data-qty]').stepUp()" @disableAddToCart tabindex="-1">
        <svg class="pe-none" focusable="false" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
            <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M11 12.9961v6h2v-6h6v-2h-6v-6h-2v6H5v2h6z"></path>
        </svg>
    </button>

    <span class="position-absolute pe-none" data-dw-button style="border: 1px solid rgba(var(--bs-body-color-rgb),.1); inset: 0; border-radius: var(--dw-btn-border-radius);"></span>

</div>
