@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
@using Dynamicweb.Ecommerce.ProductCatalog

@{
	ProductViewModel product = null;
	if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
	{
		product = (ProductViewModel)Dynamicweb.Context.Current.Items["ProductDetails"];
	}
}

@if (product is object && product.ProductType == Dynamicweb.Ecommerce.Products.ProductType.Stock)
{
	string horizontalAlign = Model.Item.GetRawValueString("HorizontalAlignment", "");
	horizontalAlign = horizontalAlign == "center" ? "justify-content-center" : horizontalAlign;
	horizontalAlign = horizontalAlign == "end" ? "justify-content-end" : horizontalAlign;

	string modalId = $"stockLocationModal_{Model.ID}_{product.Id}";
	modalId += !string.IsNullOrEmpty(product.VariantId) ? $"_{product.VariantId}" : "";
	int inStockShopsCount = 0;

	foreach (var unit in product.StockUnits)
	{
		if (unit.StockLevel > 0)
		{
			inStockShopsCount++;
		}
	}

	<div class="@horizontalAlign d-flex gap-1 item_@Model.Item.SystemName.ToLower()">
		@if (inStockShopsCount > 0)
		{
			string inStockText = $"{Translate("In stock in")}";
			string inStockShopsText = $"{inStockShopsCount} {Translate("shops")}";

			<span>
				@inStockText
			</span>

			<button type="button" class="btn btn-link p-0" data-dw-button="link" data-bs-toggle="modal" data-bs-target="#@modalId">
				@inStockShopsText
			</button>
		}
		else
		{
			<span>@Translate("Not currently in stock in any shops")</span>
		}
	</div>

	<div class="modal fade js-stock-locations-modal" id="@modalId" tabindex="-1" aria-labelledby="@(modalId)Label" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="@(modalId)Label">@Translate("Stock information")</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body p-0">
					<div class="w-100 p-3">
						<div class="mb-3">
							<input type="text" class="form-control js-search-field" placeholder="@Translate("Search")" onkeyup="FilterStockLocations(this)">
						</div>
						<div class="form-check">
							<input class="form-check-input js-show-stock-toggle" type="checkbox" value="" id="inStock_@(product.Id)_@(product.VariantId.Replace(".", "_"))_@Model.ID" checked onclick="ToggleShowStockLocations(this)">
							<label class="form-check-label" for="inStock_@(product.Id)_@(product.VariantId.Replace(".", "_"))_@Model.ID">
								@Translate("Show only shops, where products are on stock")
							</label>
						</div>
					</div>
					<ul class="list-group">
						@foreach (var unit in product.StockUnits.OrderBy(s => s.StockLocationName))
						{
							string stockLocationName = unit.StockLocationName;
							stockLocationName += unit.StockLocationAddress != null ? $" - {unit.StockLocationAddress.Address}, {unit.StockLocationAddress.Zip} {unit.StockLocationAddress.City}" : "";
							bool inStock = unit.StockLevel > 0;
							string hideNotInStockLocations = !inStock ? "d-none" : "";

							<li class="list-group-item js-location @hideNotInStockLocations" data-in-stock="@inStock" data-filter-text="@stockLocationName.ToLower()">
								<div class="fs-8 fw-bold">@stockLocationName</div>

								@if (unit.StockLevel > 0)
								{
									<div class="fs-8 fw-bold text-success">@Translate("In stock"): @unit.StockLevel</div>
								}
								else
								{
									<div class="fs-8 fw-bold text-danger">@Translate("Out of stock")</div>
								}
							</li>
						}
					</ul>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-sm btn-secondary" data-dw-button="secondary" data-bs-toggle="modal" data-bs-target="#@modalId">
						@Translate("Close")
					</button>
				</div>
			</div>
		</div>
	</div>

	<script>
		ToggleShowStockLocations = function (toggleElement) {
			const stockLocationsModal = toggleElement.closest('.js-stock-locations-modal');
			const stockLocations = stockLocationsModal.querySelectorAll('.js-location');

			const searchField = stockLocationsModal.querySelector('.js-search-field');

			stockLocations.forEach((location) => {
				if (location.getAttribute('data-filter-text').includes(searchField.value.toLowerCase())) {
					if (location.getAttribute('data-in-stock') == 'False') {
						location.classList.toggle('d-none');
					}
				}
			});
		}

		FilterStockLocations = function (searchField) {
			const stockLocationsModal = searchField.closest('.js-stock-locations-modal');
			const stockLocations = stockLocationsModal.querySelectorAll('.js-location');

			const showStockToggler = stockLocationsModal.querySelector('.js-show-stock-toggle').checked;

			stockLocations.forEach((location) => {
				if (location.getAttribute('data-in-stock') == 'True' || showStockToggler == false) {
					if (!location.getAttribute('data-filter-text').includes(searchField.value.toLowerCase())) {
						location.classList.add('d-none');
					} else {
						location.classList.remove('d-none');
					}
				}
			});
		}
	</script>
}
else if (Pageview.IsVisualEditorMode)
{
	<div class="alert alert-dark">@Translate("Stock locations will be shown here, if available")</div>
}
