{#include webui/mainWebPageTemplate navbar="full" showTitle=true title='Items' page='items'}
{!{@java.util.Map allowedUnitsMap}!}
{#styleSheets}
    <link rel="stylesheet" href="{rootPrefix}/lib/Croppie/2.6.4/croppie.css"/>
{/styleSheets}
{#pageContent}
<div class="row">
    <div class="col d-grid gap-2">
        <button type="button" id="mainAddButton" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addEditItemModal"
                onclick="ItemAddEdit.setupAddEditForAdd();">{#icons/add}{/icons/add} Add Item
        </button>
    </div>
    <div class="col d-grid gap-2">
        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addItemFromFileModal">{#icons/addFile /} Add Item(s) from file
        </button>
    </div>
    <div class="col d-grid gap-2">
        {#itemStored/transaction/buttons/transactionDropdown dropdownStyles="width:100%;" checkinButton=false /}
    </div>
    <!--
    <div class="col d-grid gap-2">
        <button type="button" class="btn btn-info">{#icons/view /} Item stats</button>
    </div>
    -->
</div>
<br/>
<div class="row">
    <div class="col accordion" id="searchAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header" id="searchHeader">
                <button class="accordion-button {#if !showSearch}collapsed{/if}" type="button" data-bs-toggle="collapse"
                        data-bs-target="#searchCollapse" aria-expanded="{#if showSearch}true{#else}false{/if}"
                        aria-controls="searchCollapse">
                    {#icons/search /}
                    Search Fields
                </button>
            </h2>
            <div id="searchCollapse" class="accordion-collapse collapse {#if showSearch}show{/if}"
                 aria-labelledby="searchHeader" data-bs-parent="#searchAccordion">
                <div class="accordion-body">
                    {#search/item/itemSearchForm id='mainPageSearch' rootPrefix=rootPrefix allCategorySearchResults=allCategorySearchResults /}
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col">
        <table id="mainPageSearchResults" class="table table-bordered table-striped table-hover table-sm">
            {#search/item/itemSearchResults searchResults=searchResults actionType='full' searchFormId='mainPageSearch' rootPrefix=rootPrefix /}
        </table>
    </div>
</div>
{#search/image/imageSelectFormInputHidden /}
{/pageContent}
{#modals}
    {#objView/itemViewModal rootPrefix=rootPrefix /}
	{#itemAddEditModal allUnitMap=allUnitMap allCategorySearchResults=allCategorySearchResults rootPrefix=rootPrefix extSearchMethods=extSearchMethods /}
	{#modal id='addItemFromFile' size='xl' title='Add item(s) from file' submitForm='addItemFromFileForm' submitDismiss=false}
		{#titleIcon}{#icons/addFile}{/icons/addFile}{/titleIcon}
		<div class="row">
			<div class="col" id="addItemFromFileFormMessages">
			</div>
		</div>
		<!-- TODO:: point to docs on how to do this -->
		<div class="row">
			<div class="col">
				<form id="addItemFromFileForm">
					<div class="col-12 mb-3">
						<label for="importBulkFileInput" class="form-label">
							<a href="{rootPrefix}/api/passthrough/templates/itemsCsv" target="_blank" title="Get CSV Template file">{#icons/fileCsv}{/icons/fileCsv} CSV</a>,
							or {#icons/fileJson}{/icons/fileJson} JSON file:
						</label>
						<input class="form-control" type="file" id="addFromFileInput" name="file" accept="text/csv,application/json" required>
					</div>
				</form>
			</div>
		</div>
	{/modal}
	{#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><!-- doesn't play nice with import -->
{/scripts}
{#pageScript}
<script type="module">
	import { Rest } from '{rootPrefix}/res/js/Rest.js';
	import { SearchUtils } from '{rootPrefix}/res/js/SearchUtils.js';
	import { ItemAddEdit } from '{rootPrefix}/res/js/obj/item/ItemAddEdit.js';
	import { ItemView } from '{rootPrefix}/res/js/obj/item/ItemView.js';
	import { ItemSearchSelect } from '{rootPrefix}/res/js/obj/item/ItemSearchSelect.js';
	import { ItemStoredEdit } from '{rootPrefix}/res/js/obj/itemStored/ItemStoredEdit.js';
	import { HistorySearchUtils } from '{rootPrefix}/res/js/HistorySearchUtils.js';
	import { Identifiers } from '{rootPrefix}/res/js/Identifiers.js';
	import { Pricing } from '{rootPrefix}/res/js/Pricing.js';
	import { AssociatedLinks } from '{rootPrefix}/res/js/AssociatedLinks.js';
	import { StorageSearchSelect } from '{rootPrefix}/res/js/obj/storageBlock/StorageSearchSelect.js';
	import { IdGeneratorAddEdit } from '{rootPrefix}/res/js/obj/idGenerator/IdGeneratorAddEdit.js';
	import { IdGeneratorSearchSelect } from '{rootPrefix}/res/js/obj/idGenerator/IdGeneratorSearchSelect.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 { 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 { KeywordAttEdit } from '{rootPrefix}/res/js/obj/ObjEditUtils.js';
	import { ItemStoredTransaction } from '{rootPrefix}/res/js/obj/itemStored/ItemStoredTransaction.js';
	import { ItemStoredSearch } from '{rootPrefix}/res/js/obj/itemStored/ItemStoredSearch.js';
	import { ItemStoredSearchSelect } from '{rootPrefix}/res/js/obj/itemStored/ItemStoredSearchSelect.js';
	import { StoredView } from '{rootPrefix}/res/js/obj/itemStored/StoredView.js';
	import { ItemCheckoutSearchSelect } from '{rootPrefix}/res/js/obj/itemCheckout/ItemCheckoutSearchSelect.js';
	import { ExtItemSearch } from '{rootPrefix}/res/js/item/ExtItemSearch.js';
	import { CodeScanner } from '{rootPrefix}/res/js/CodeScanner.js';
	import { ItemCategoryInput } from '{rootPrefix}/res/js/obj/itemCategory/ItemCategoryInput.js';
	
	SearchUtils.init();
	ItemAddEdit.init();
	ItemView.init();
	ItemSearchSelect.init();
	ItemStoredEdit.init();
	StorageSearchSelect.init();
	IdGeneratorAddEdit.init();
	IdGeneratorSearchSelect.init();
	FileAttachmentSearchSelect.init();
	FileAttachmentAddEdit.init();
	FileAttachmentView.init();
	ImageSearchSelect.init();
	ImageAdd.init();
	ImageAddFromSelect.init();
	ItemStoredTransaction.init();
	ItemStoredSearchSelect.init();
	ExtItemSearch.init();
	CodeScanner.init();
	ItemCategoryInput.init();
	HistorySearchUtils.init();
	
	console.log("Page modules loaded.");
</script>
<script defer>

let addFromFileInput = $("#addFromFileInput")[0];
let addItemFromFileFormMessages = $("#addItemFromFileFormMessages");

$("#addItemFromFileForm").submit(function (e){
    e.preventDefault();
    
    let formData = new FormData();
    let file = addFromFileInput.files[0];
    
    formData.append("fileName", file.name);
    formData.append("file", file);
    
    Rest.call({
        url: Rest.passRoot + '/inventory/item',
        method: "post",
        data: formData,
        done: function (data){
            console.log("Successfully added items.");
            PageMessageUtils.reloadPageWithMessage("Added item(s) successfully!", "success", "Success!");
        },
        failMessagesDiv: addItemFromFileFormMessages
    });
});

function removeItem(itemId){
    if(!confirm("Are you sure you want to delete this item? This cannot be undone.")){
        return;
    }
    console.log("Removing item " + itemId);
    
    Rest.call({
        url: Rest.passRoot + "/inventory/item/" + itemId,
        method: "DELETE",
        done: function(data) {
            console.log("Response from remove request: " + JSON.stringify(data));
            PageMessageUtils.reloadPageWithMessage("Removed item successfully!", "success", "Success!");
        },
        fail: function(data) {
            console.warn("Bad response from remove attempt: " + JSON.stringify(data));
            PageMessageUtils.addMessageToDiv(PageMessageUtils.mainMessageDiv, "danger", "Failed to remove item.", "Failed", null);
        }
    });
}


</script>
{/pageScript}
{/include}