{!{@tech.ebp.oqm.baseStation.service.mongo.StorageBlockService storageBlockService}!}
{!{@java.util.List<tech.ebp.oqm.baseStation.model.object.storage.items.InventoryItem> expiredList}!}
{!{@java.util.List<tech.ebp.oqm.baseStation.model.object.storage.items.InventoryItem> expiredWarnList}!}
{#include webui/mainWebPageTemplate navbar="full" showTitle=true title='Overview' page='overview'}
	{#styleSheets}
		<link rel="stylesheet" href="{rootPrefix}/lib/Croppie/2.6.4/croppie.css"/>
	{/styleSheets}
	{#pageStyle}
		.buttonCell{
		border: 1px solid black;
		height: 50px;
		width: 50px;
		}
	{/pageStyle}
	{#pageContent}
		<ul class="nav nav-tabs" id="mainTab" role="tablist">
			<li class="nav-item" role="presentation">
				<button class="nav-link active" id="overviewTab" data-bs-toggle="tab" data-bs-target="#overviewTabContent" type="button" role="tab" aria-controls="overviewTabContent" aria-selected="true">
					{#icons/icon icon='diagram-3'}{/icons/icon} Overview
				</button>
			</li>
			<li class="nav-item" role="presentation">
				<button class="nav-link" id="lowStockTab" data-bs-toggle="tab" data-bs-target="#lowStockTabContent" type="button" role="tab" aria-controls="lowStockTabContent" aria-selected="false">
					{#icons/lowStock}{/icons/lowStock} Low Stock
					{#let totalLowStock=lowStockResults.get("numResultsForEntireQuery").asInt()}
						{#if totalLowStock > 0}<sup class="badge rounded-pill bg-danger" title="Expired">{str:format("%,d",totalLowStock)}</sup>{/if}
					{/let}
				</button>
			</li>
			<li class="nav-item" role="presentation">
				<button class="nav-link" id="expiringTab" data-bs-toggle="tab" data-bs-target="#expiringTabContent" type="button" role="tab" aria-controls="expiringTabContent" aria-selected="false">
					{#icons/expiring /} Expiring
					{#let totalExpiryWarn=expiryWarnResults.get("numResultsForEntireQuery").asInt()}
						{#if totalExpiryWarn > 0}<sup class="badge rounded-pill bg-warning" title="Expiring Soon">{str:format("%,d",totalExpiryWarn)}</sup>{/if}
					{/let}
				</button>
			</li>
			<li class="nav-item" role="presentation">
				<button class="nav-link" id="expiredTab" data-bs-toggle="tab" data-bs-target="#expiredTabContent" type="button" role="tab" aria-controls="expiredTabContent" aria-selected="false">
					{#icons/expired /} Expired
					{#let totalExpired=expiredResults.get("numResultsForEntireQuery").asInt()}
						{#if totalExpired > 0}<sup class="badge rounded-pill bg-danger" title="Expired">{str:format("%,d",totalExpired)}</sup>{/if}
					{/let}
				</button>
			</li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane fade show active" id="overviewTabContent" role="tabpanel" aria-labelledby="overviewTab">
				<p class="mt-3">
					{itemCollectionStats.get("size").asLong()} types of items stored in over {storageCollectionStats.get("size").asLong()} storage blocks
				</p>
				
				{#if parentBlocks.get("hasPages").asBoolean()}
					<form id="overviewParentBlocksTreeForm" method="get" action="{rootPrefix}/overview#overview">
						<input type="hidden" name="pageNum">
					</form>
					{#paginationButtons searchFormId="overviewParentBlocksTreeForm" searchResults=parentBlocks /}
				{/if}
				<div class="row">
					<div class="col">
						{#storageBlock/blockTree parentBlocks=parentBlocks rootPrefix=rootPrefix}{/storageBlock/blockTree}
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="expiringTabContent" role="tabpanel" aria-labelledby="expiringTab">
				<div class="row mt-3">
					<div class="col">
					{! TODO:: swap to stored search !}
						<h3>
							Stored Items Close to expiring:
						</h3>
						{#if expiryWarnResults.get("empty").asBoolean()}
							<p>
								Nothing close to expiring!
							</p>
						{#else}
							{#if expiryWarnResults.get("hasPages").asBoolean()}
								<form id="overviewExpiringSearchForm" method="get" action="{rootPrefix}/overview#expiringTab">
									<input type="hidden" name="pageNum">
								</form>
							{/if}
							<table class=" table table-bordered table-striped table-hover table-sm">
							{#search/itemStored/searchResults searchResults=expiryWarnResults actionType='full' searchFormId="" showType=true showItem=true showStorage=true rootPrefix=rootPrefix /}
							</table>
						{/if}
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="expiredTabContent" role="tabpanel" aria-labelledby="expiredTab">
				<div class="row mt-3">
					<div class="col">
					{! TODO:: swap to stored search !}
						<h3>
							Expired Stored Items:
						</h3>
						{#if expiredResults.get("empty").asBoolean()}
							<p>
								Nothing expired!
							</p>
						{#else}
							{#if expiredResults.get("hasPages").asBoolean()}
								<form id="overviewExpiredSearchForm" method="get" action="{rootPrefix}/overview#expiredTab">
									<input type="hidden" name="pageNum">
								</form>
							{/if}
							<table class=" table table-bordered table-striped table-hover table-sm">
							{#search/itemStored/searchResults searchResults=expiredResults actionType='full' showType=true showItem=true showStorage=true searchFormId="overviewExpiredSearchForm" rootPrefix=rootPrefix /}
							</table>
						{/if}
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="lowStockTabContent" role="tabpanel" aria-labelledby="lowStockTab">
				<div class="row mt-3">
					<div class="col">
						<h3>
							Items with Low Stock:
						</h3>
						{#if lowStockResults.get("empty").asBoolean()}
							<p>
								No stock is low!
							</p>
						{#else}
							{#if lowStockResults.get("hasPages").asBoolean()}
								<form id="overviewLowStockSearchForm" method="get" action="{rootPrefix}/overview#lowStockTab">
									<input type="hidden" name="pageNum">
								</form>
							{/if}
							<table class=" table table-bordered table-striped table-hover table-sm">
								{#search/item/itemSearchResults searchResults=lowStockResults actionType='view' searchFormId="overviewLowStockSearchForm" rootPrefix=rootPrefix /}
							</table>
						{/if}
					</div>
				</div>
			</div>
		</div>
	{/pageContent}
	{#modals}
		{#objView/itemViewModal currency=currency  rootPrefix=rootPrefix}
			{#footerButtons}
				<button type="button" id="itemViewEditButton" class="btn btn-warning" title="Edit" data-bs-toggle="modal" data-bs-target="#addEditItemModal" >
					{#icons/edit}{/icons/edit}
					Edit Item
				</button>
			{/footerButtons}
		{/objView/itemViewModal}
		{#itemAddEditModal allUnitMap=allUnitMap allCategorySearchResults=allCategorySearchResults currency=currency rootPrefix=rootPrefix extSearchMethods=extSearchMethods /}
		{#search/storage/searchSelectModal otherModalId="addEditItemModal" rootPrefix=rootPrefix /}
		{#search/image/imageSearchSelectModal otherModalId="addEditItemModal" rootPrefix=rootPrefix /}
		{#search/item/itemSearchSelectModal rootPrefix=rootPrefix allCategorySearchResults=allCategorySearchResults /}
		{#search/itemStored/itemStoredSearchSelectModal rootPrefix=rootPrefix /}
		{#itemStored/itemStoredViewModal rootPrefix=rootPrefix /}
		{#itemStored/itemStoredEditModal rootPrefix=rootPrefix /}
		{#itemStored/transaction/allTransactionModals /}
		{#CodeScannerModal /}
		{#fileAttachment/FileAttachmentSearchSelectModal otherModalId="addEditItemModal" /}
		{#fileAttachment/FileAttachmentViewModal otherModalId='itemViewModal' /}
		{#object/idGenerator/searchSelectModal rootPrefix=rootPrefix /}
	{/modals}
	{#scripts}
	<script src="{rootPrefix}/lib/html5-qrcode/2.3.8/html5-qrcode.min.js"></script>
	
	{/scripts}
	{#pageScript}
		<script type="module">
			import { Rest } from '{rootPrefix}/res/js/Rest.js';
			import { Getters } from '{rootPrefix}/res/js/obj/Getters.js';
			import { Links } from '{rootPrefix}/res/js/Links.js';
			import { UnitUtils } from '{rootPrefix}/res/js/obj/UnitUtils.js';
			import { StoredView } from '{rootPrefix}/res/js/obj/itemStored/StoredView.js';
			import { ItemStoredEdit } from '{rootPrefix}/res/js/obj/itemStored/ItemStoredEdit.js';
			import { ItemStoredTransaction } from '{rootPrefix}/res/js/obj/itemStored/ItemStoredTransaction.js';
			import { CodeScanner } from '{rootPrefix}/res/js/CodeScanner.js';
			import { Identifiers } from '{rootPrefix}/res/js/Identifiers.js';
			import { Pricing } from '{rootPrefix}/res/js/Pricing.js';
			import { IdGeneratorAddEdit } from '{rootPrefix}/res/js/obj/idGenerator/IdGeneratorAddEdit.js';
			import { IdGeneratorSearchSelect } from '{rootPrefix}/res/js/obj/idGenerator/IdGeneratorSearchSelect.js';
			import { ImageSearchSelect } from '{rootPrefix}/res/js/obj/media/ImageSearchSelect.js';
			import { ImageAdd } from '{rootPrefix}/res/js/obj/media/ImageAdd.js';
			import { ImageAddFromSelect } from '{rootPrefix}/res/js/obj/media/ImageAddFromSelect.js';
			import { FileAttachmentSearchSelect } from '{rootPrefix}/res/js/obj/media/fileAttachment/FileAttachmentSearchSelect.js';
			import { FileAttachmentAddEdit } from '{rootPrefix}/res/js/obj/media/fileAttachment/FileAttachmentAddEdit.js';
			import { FileAttachmentView } from '{rootPrefix}/res/js/obj/media/fileAttachment/FileAttachmentView.js';
			import { KeywordAttEdit } from '{rootPrefix}/res/js/obj/ObjEditUtils.js';
			
			ItemStoredEdit.init();
			ItemStoredTransaction.init();
			CodeScanner.init();
			IdGeneratorAddEdit.init();
			IdGeneratorSearchSelect.init();
			ImageSearchSelect.init();
			ImageAdd.init();
			ImageAddFromSelect.init();
			FileAttachmentSearchSelect.init();
			FileAttachmentAddEdit.init();
			Getters.init();
			
		</script>
		<script defer>
			let overviewParentBlocksTreeForm = $("#overviewParentBlocksTreeForm");
			let overviewLowStockSearchForm = $("#overviewLowStockSearchForm");
			let overviewExpiringSearchForm = $("#overviewExpiringSearchForm");
			let overviewExpiredSearchForm = $("#overviewExpiredSearchForm");
			
			let created = { };
			let anchor = $(location).attr('hash');
			
			function getInvItemSection(invItemSearchResult, parentId){
				if(invItemSearchResult.empty){
					return $('<p>{#icons/items /} No inventory items held.</p>');
				}
				let accordId = "invItemAccord" + parentId;
				let accordion = $('<div class="accordion " id="'+accordId+'"></div>');

				invItemSearchResult.results.forEach(function(invItem){
					let accordItemId = accordId+'AccordItem'+invItem.id;
					let accordItemHeaderId = accordItemId + "Header";
					let accordItemCollapseId = accordItemId + "Collapse";
					let accordItemContentId = accordItemId + "Content";
					let curAccord = $('<div class="accordion-item" id="'+accordItemId+'" data-item-id="'+invItem.id+'">' +
						'<h2 class="accordion-header " id="'+accordItemHeaderId+'" onclick="overviewItemAccordionClicked(\''+invItem.id+'\',\''+parentId+'\', $(this).parent())">' +
						'<button class="accordion-button thinAccordion collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#'+accordItemCollapseId+'" aria-expanded="false" aria-controls="'+accordItemCollapseId+'">' +
						'</button>'+
						'</h2>'+
						'<div id="'+accordItemCollapseId+'" class="accordion-collapse collapse" aria-labelledby="'+accordItemHeaderId+'" data-bs-parent="#'+accordId+'">'+
						'<div class="accordion-body" id="'+accordItemContentId+'">'+
						'Loading...'+
						'</div>'+
						'</div>'+
						'</div>');

					let accordButt = curAccord.find(".accordion-button");
					let blockStats = invItem.stats.storageBlockStats[parentId];
					let blockTotal = blockStats == null?
						UnitUtils.getQuantityObj(0, invItem.unit) :
						blockStats.total
					;
					console.debug("block total: ", blockTotal);
					accordButt.append(
						$('<img class="accordion-thumb" src="'+Rest.passRoot+'/media/image/for/item/'+invItem.id+'" alt="">'),
						$('<span></span>').text(invItem.name + " - " + UnitUtils.quantityToDisplayStr(blockTotal))
					);
					
					accordion = accordion.append(curAccord);
				});

				let output = $('<h5>{#icons/items /} Items held ('+invItemSearchResult.numResultsForEntireQuery+'):</h5>');
				output = output.add(accordion);
				return output;
			}
			
			function getStorageBlockSection(storageBlockArr, parentId){
				if(storageBlockArr.results.length === 0){
					return $('<p>{#icons/storageBlocks}{/icons/storageBlocks} No children.</p>');
				}
				let accordId = "storageBlockAccord" + parentId;
				let accordion = $('<div class="accordion " id="'+accordId+'"></div>');
				
				storageBlockArr.results.forEach(function(storageBlock){
					let curAccord = $('<div class="accordion-item" id="accordItem'+storageBlock.id+'" data-storage-block-id="'+storageBlock.id+'">' +
											'<h2 class="accordion-header " id="accordHeader'+storageBlock.id+'" onclick="overviewAccordionClicked(\''+storageBlock.id+'\', $(this).parent())">' +
												'<button class="accordion-button thinAccordion collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordCollapse'+storageBlock.id+'" aria-expanded="false" aria-controls="accordCollapse'+storageBlock.id+'">' +
												'</button>'+
											'</h2>'+
											'<div id="accordCollapse'+storageBlock.id+'" class="accordion-collapse collapse" aria-labelledby="accordHeader'+storageBlock.id+'" data-bs-parent="#'+accordId+'">'+
												'<div class="accordion-body" id="accordContent'+storageBlock.id+'">'+
													'Loading...'+
												'</div>'+
											'</div>'+
										'</div>');
					let accordButt = curAccord.find(".accordion-button");
					
					accordButt.append(
						$('<img class="accordion-thumb" src="'+Rest.passRoot+'/media/image/for/storageBlock/'+storageBlock.id+'" alt=" image">'),
						$('<span></span>').text(storageBlock.labelText)
					);
					
					accordion = accordion.append(curAccord);
				});
				
				let output = $('<h5>{#icons/storageBlocks}{/icons/storageBlocks} Storage Blocks ('+storageBlockArr.numResults+'):</h5>');
				output = output.add(accordion);
				return output;
			}
			
			function getBlockDetailsSection(storageBlockData){
				let output = $('<div class="row">' +
					'<div class="col">' +
					// '<h5>Block details</h5>' + //unnecessary
					'</div>' +
					'</div>'
				);
				let detailsRow = $(
					'<div class="row storageBlockDetailsRow">'+
					'</div>');
				
				detailsRow.append('<div class="col-sm-1">' +Links.getStorageViewButtonAsHtml(storageBlockData.id, "View") + '</div>');
				
				if(storageBlockData.description){
					//TODO:: might need better format
					let locationData = $('<div class="col">' +
						'Description: <span class="storageBlockDescription"></span>' +
						'</div>');
					locationData.find(".storageBlockDescription").text(storageBlockData.description);

					detailsRow = detailsRow.append(locationData);
				}
				if(storageBlockData.location){
					let locationData = $('<div class="col">' +
						'Location: <span class="storageBlockLocation"></span>' +
						'</div>');
					locationData.find(".storageBlockLocation").text(storageBlockData.location);

					detailsRow = detailsRow.append(locationData);
				}
				//TODO:: barcode
				
				//TODO:: images, attr/keywords?, capacities?
				
				output = output.add(detailsRow);
				return output;
			}

			function getInvItemDetailsSection(itemData, storageBlockId){
				let output = $('<div class="row"></div>');
				
				output.append($('<div class="col-1">'+Links.getItemViewButtonAsHtml(itemData.id, "View")+'</div>'));
				
				if(itemData.description){
					//TODO
				}
				//TODO:: fill with details #918
				
				return output;
			}
			
			async function createNewStorageBlockContent(storageBlockData){
				let storageBlockItems = Getters.StorageBlock.getStorageBlockItemData(storageBlockData.id);
				let storageBlockChildren = Getters.StorageBlock.getStorageBlockChildrenData(storageBlockData.id);
				storageBlockItems = await storageBlockItems;
				storageBlockChildren = await storageBlockChildren;
				
				console.log("Got " + storageBlockItems.numResultsForEntireQuery + " items, " + storageBlockChildren.numResultsForEntireQuery + " children for storage block " + storageBlockData.id);
				
				let output = $();

				output = output.add(getBlockDetailsSection(storageBlockData));
				output = output.add($("<hr />"));
				output = output.add(getInvItemSection(storageBlockItems, storageBlockData.id));
				output = output.add($("<hr />"));
				output = output.add(getStorageBlockSection(storageBlockChildren, storageBlockData.id));
				return output;
			}
			
			function overviewAccordionClicked(storageBlockId, accordionDivJq){
				console.debug("Accordion " + accordionDivJq.attr("id") + " for storage block " + storageBlockId + " clicked.");
				
				if(created[storageBlockId]){
					console.log("Already clicked on this.");
					return;
				}
				created[storageBlockId] = [];

				Rest.call({
					url: Rest.passRoot + "/inventory/storage-block/" + storageBlockId,
					method: "GET",
					done: async function(data) {
						let newContent = await createNewStorageBlockContent(data);
						console.log("Got new content for accordion.");

						accordionDivJq.find(".accordion-body").html(newContent);
					},
					fail: function(data) {
					
					}
				});
			}

			function overviewItemAccordionClicked(itemId, storageBlockId, accordionDivJq){
				console.debug("Accordion " + accordionDivJq.attr("id") + " for item "+itemId+" in storage block " + storageBlockId + " clicked.");

				if(created[storageBlockId][itemId]){
					console.log("Already clicked on this.");
					return;
				}
				created[storageBlockId][itemId] = true;

				Rest.call({
					url: Rest.passRoot + "/inventory/item/" + itemId,
					method: "GET",
					done: async function(data) {
						let newContent = await getInvItemDetailsSection(data, storageBlockId);
						console.log("Got new content for accordion.");

						accordionDivJq.find(".accordion-body").html(newContent);
					},
					fail: function(data) {
					}
				});
			}
			
			$(document).ready(function(){
				if(overviewParentBlocksTreeForm.length !== 0){
					overviewParentBlocksTreeForm.on("submit", function(e){
						// e.preventDefault();
						overviewParentBlocksTreeForm.find("input[name='pageNum']").attr("name", "storageBlockTreePage");
					});
				}
				
				if(overviewLowStockSearchForm.length !== 0){
					overviewLowStockSearchForm.on("submit", function(e){
						// e.preventDefault();
						overviewLowStockSearchForm.find("input[name='pageNum']").attr("name", "lowStockPage");
					});
				}
				
				if(overviewExpiringSearchForm.length !== 0){
					overviewExpiringSearchForm.on("submit", function(e){
						// e.preventDefault();
						overviewExpiringSearchForm.find("input[name='pageNum']").attr("name", "expiringPage");
					});
				}
				
				if(overviewExpiredSearchForm.length !== 0){
					overviewExpiredSearchForm.on("submit", function(e){
						// e.preventDefault();
						overviewExpiredSearchForm.find("input[name='pageNum']").attr("name", "expiredPage");
					});
				}
				
				if(anchor){
					$(anchor).click();
				}
			});
		</script>
	{/pageScript}
{/include}