{#include webui/mainWebPageTemplate navbar="full" showTitle=true title="Categories" page='categories'}

	{#styleSheets}
		<link rel="stylesheet" href="{rootPrefix}/lib/Croppie/2.6.4/croppie.css"/>
	{/styleSheets}
    {#pageStyle}

    {/pageStyle}
    {#pageContent}
    <div class="row mb-2">
        <div class="col d-grid gap-2">
            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addEditItemCategoryModal"
                    onclick="Category.setupAddEditItemCategoryForAdd();">{#icons/add}{/icons/add} Add Category
            </button>
        </div>
    </div>
    <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}{/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/category/searchForm id='mainCategorySearch' rootPrefix=rootPrefix /}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col table-responsive">
            <table class=" table table-bordered table-striped table-hover table-sm">
                {#search/category/searchResults actionType='full' searchFormId='mainCategorySearch' searchResults=searchResults rootPrefix=rootPrefix}
                {/search/category/searchResults}
            </table>
        </div>
    </div>
    {/pageContent}
    {#modals}
        {#modal id='addEditItemCategory' size='xl' title='Category Add/Edit' submitForm='addEditItemCategoryForm' submitDismiss=false}
            <div class="row">
                <div class="col" id="addEditItemCategoryFormMessages">
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <form id="addEditItemCategoryForm">
                        <input type="hidden" id="addEditItemCategoryFormMode" name="mode" value="">
                        <input type="hidden" id="addEditItemCategoryIdInput" name="id" value="">
                        <div class="mb-3 row">
                            <label for="addEditItemCategoryNameInput" class="col-sm-2 col-form-label">Name</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="addEditItemCategoryNameInput" placeholder="Name" name="name" required>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="addEditItemCategoryDescriptionInput" class="col-sm-2 col-form-label">Description</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="addEditItemCategoryDescriptionInput" placeholder="Description" name="description"></textarea>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="addEditItemCategoryColorInput" class="col-sm-2 col-form-label">Color</label>
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <div class="input-group-text">
                                        <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Enable/disable custom color." onchange="Category.colorCheckboxChanged()" id="addEditItemCategoryColorCheckInput">
                                    </div>
                                    <input type="color" class="form-control" id="addEditItemCategoryColorInput" value="#FFFFFF" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="addEditItemCategoryParentInput" class=" col-form-label col-sm-2">Parent Category:</label>
                            <div class="col-sm-10">
								{#inputs/categoryInput id="addEditItemCategoryParentInput" allCategorySearchResults=allCategorySearchResults placeholder='Parent' name='itemCategoryParent' /}
                            </div>
                        </div>
                        {#search/image/imageSelectFormInput /}
                        {#inputs/keywordInput /}
                        {#inputs/attInput /}
                    </form>
                </div>
            </div>
        {/modal}
        {#modal id='itemCategoryView' size='xl' title='Item Category View'}
            {#titleIcon}{#icons/categories /}{/titleIcon}
            <div class="row">
                {#carousel id='itemCategoryViewCarousel' carouselCss='col'}{/carousel}
                <div class="col">
                    <div class="row">
                        <div class="card col-sm-12 col-md-6">
                            <div class="card-body">
                                <h5 class="card-title d-inline">Id:</h5>
                                <p class="card-text d-inline">
                                    <small>
                                        <span id="itemCategoryViewId"></span>{#copyTextButton /}
                                    </small>
                                </p>
                            </div>
                        </div>
                        <div class="card col-sm-12 col-md-6 ps-0 pe-0">
                            <div class="card-body" id="itemCategoryColorContainer">
                                <h5 class="card-title d-inline">Color:</h5>
                                <p class="card-text d-inline">
                                    <small>
                                        <span id="itemCategoryColorVal"></span>
                                    </small>
                                </p>
                            </div>
                        </div>
                        <div class="card col-12">
                            <div class="card-body">
                                <h5 class="card-title">Location in Category Tree:</h5>
                                <div id="itemCategoryViewBreadcrumbContainer">
                                </div>
                                <h5 class="card-title">Children:</h5>
                                <ul class="list-inline">
                                </ul>
                                <div id="itemCategoryViewChildrenContainer">
                                </div>
                            </div>
                        </div>
                        <div class="card col-12" id="itemCategoryViewDescriptionContainer">
                            <div class="card-body">
                                <h5 class="card-title">Description:</h5>
                                <div id="itemCategoryViewDescription">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr />
            <div class="row">
                {#objView/objKeywordsView id='viewKeywordsSection' classes='col'}{/objView/objKeywordsView}
                {#objView/objAttsView id='viewAttsSection' classes='col'}{/objView/objAttsView}
            </div>
            <div class="row">
                <div class="col">
                    {#objView/history/objHistoryView containerId='itemCategoryHistory' objectUrl=(rootPrefix + '/api/passthrough/inventory/item-category/') accordion=true /}
                </div>
            </div>
        {/modal}
        {#search/image/imageSearchSelectModal otherModalId="addEditItemCategoryModal" rootPrefix=rootPrefix /}
    {/modals}
    {#scripts}
		<script src="{rootPrefix}/lib/treant-js/vendor/raphael.js"></script>
		<script src="{rootPrefix}/lib/treant-js/vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
		<script src="{rootPrefix}/lib/treant-js/vendor/jquery.easing.js"></script>
		<script src="{rootPrefix}/lib/treant-js/Treant.js"></script>
    {/scripts}

    {#pageScript}
		<script type="module">
			import { Rest } from '{rootPrefix}/res/js/Rest.js';
			import { HistorySearchUtils } from '{rootPrefix}/res/js/HistorySearchUtils.js';
			import { KeywordAttEdit } from '{rootPrefix}/res/js/obj/ObjEditUtils.js';
			import { KeywordAttUtils } from '{rootPrefix}/res/js/obj/ObjViewUtils.js';
			import { TextCopyUtils } from '{rootPrefix}/res/js/TextCopyUtils.js';
			import { ImageAdd } from '{rootPrefix}/res/js/obj/media/ImageAdd.js';
			import { ImageAddFromSelect } from '{rootPrefix}/res/js/obj/media/ImageAddFromSelect.js';
			import { ImageSearchSelect } from '{rootPrefix}/res/js/obj/media/ImageSearchSelect.js';
			import { Getters } from '{rootPrefix}/res/js/obj/Getters.js'
			import { StorageSearchSelect } from '{rootPrefix}/res/js/obj/storageBlock/StorageSearchSelect.js';
			import { UnitUtils } from '{rootPrefix}/res/js/obj/UnitUtils.js';
			import { ItemCategoryView } from '{rootPrefix}/res/js/obj/itemCategory/ItemCategoryView.js';
			import { ItemCategoryTree } from '{rootPrefix}/res/js/obj/itemCategory/ItemCategoryTree.js';
			import { ItemCategoryInput } from '{rootPrefix}/res/js/obj/itemCategory/ItemCategoryInput.js';
			import { UriUtils } from '{rootPrefix}/res/js/UriUtils.js';
			import { Carousel } from '{rootPrefix}/res/js/Carousel.js';
			import { SearchUtils } from '{rootPrefix}/res/js/SearchUtils.js';

			StorageSearchSelect.init();
			ImageAdd.init();
			ImageAddFromSelect.init();
			ImageSearchSelect.init();
			SearchUtils.init();
			ItemCategoryInput.init();
			HistorySearchUtils.init();

			console.log("Page modules loaded.");
		</script>
        <script defer>
            const Category = {
                addEditForm: $("#addEditItemCategoryForm"),
                addEditModalLabel: $("#addEditItemCategoryModalLabel"),
                addEditModalLabelIcon: $("#addEditItemCategoryModalLabelIcon"),
                addEditFormMessages: $("#addEditItemCategoryFormMessages"),
                modeInput: $("#addEditItemCategoryForm").find('input[name="mode"]'),
                idInput: $("#addEditItemCategoryForm").find('input[name="id"]'),
                nameInput: $("#addEditItemCategoryForm").find('input[name="name"]'),
                descInput: $("#addEditItemCategoryForm").find('textarea[name="description"]'),
                colorInput: $("#addEditItemCategoryColorInput"),
                colorCheckInput: $("#addEditItemCategoryColorCheckInput"),
                parentInput: $("#addEditItemCategoryParentInput"),
                imagesInputDiv: $("#addEditItemCategoryForm").find('.imagesSelected'),
                keywordInputs: $("#addEditItemCategoryForm").find('.keywordInputDiv'),
                attInputs: $("#addEditItemCategoryForm").find('.attInputDiv'),

                colorCheckboxChanged(){
                    if(Category.colorCheckInput.is(':checked')){
                        Category.colorInput.prop("disabled", false);
                    } else {
                        Category.colorInput.prop("disabled", true);
                    }
                },
                resetAddEditItemCategoryForm(){
                    Category.addEditForm[0].reset();
                    Category.idInput.val("");
                    Category.nameInput.val("");
                    Category.descInput.val("");
                    Category.colorCheckInput.prop('checked', false);
                    Category.colorInput.val("#FFFFFF");
                    Category.colorCheckboxChanged();
                    DselectUtils.resetDselect(Category.parentInput);
                    Category.imagesInputDiv.html("");
                    Category.keywordInputs.text("");
                    Category.attInputs.text("");
                },
                setupAddEditItemCategoryForAdd(){
                    Category.resetAddEditItemCategoryForm();
                    Category.addEditModalLabelIcon.html(Icons.add);
                    Category.addEditModalLabel.text("Add Item Category");
                    Category.modeInput.val("add");
                },
                async setupAddEditItemCategoryForEdit(categoryId){
                    Category.resetAddEditItemCategoryForm();
                    Category.addEditModalLabel.text("Edit Item Category");
                    Category.addEditModalLabelIcon.html(Icons.edit);
                    Category.modeInput.val("edit");
                    Category.idInput.val(categoryId);

                    await Rest.call({
                        url: Rest.passRoot + "/inventory/item-category/" + categoryId,
                        method: "GET",
                        async: false,
                        done: function (data) {
                            Category.nameInput.val(data.name);
                            Category.descInput.val(data.description);
                            if(data.parent) {
                                DselectUtils.setValues(Category.parentInput, data.parent);
                            }
                            if(data.color){
                                Category.colorCheckInput.prop('checked', true);
                                Category.colorCheckboxChanged();
                                Category.colorInput.val(data.color);
                            }
                            ImageSearchSelect.addSelectedImages(Category.imagesInputDiv, data.imageIds);
							KeywordAttEdit.addKeywordInputs(Category.keywordInputs, data.keywords);
							KeywordAttEdit.addAttInputs(Category.attInputs, data.attributes);
                        },
                        fail: function (data) {
                            console.warn("Bad response from get item category attempt: " + JSON.stringify(data));
                        },
                        failMessagesDiv: Category.addEditFormMessages
                    });
                }
            };
            Category.addEditForm.on("submit", async function (e) {
                e.preventDefault();
                console.log("Submitting Item Category Add Edit form");

                let data = {
                    name: Category.nameInput.val(),
                    description: Category.descInput.val(),
                    parent: ItemCategoryInput.getValueFromInput(Category.parentInput),
					color: (Category.colorCheckInput.is(":checked")?Category.colorInput.val():null)
                };
				KeywordAttEdit.addKeywordAttData(data, Category.keywordInputs, Category.attInputs);
                ImageSearchSelect.addImagesToData(data, Category.imagesInputDiv);

                var result = false;
                var verb = "";
                if (Category.modeInput.val() === "add") {
                    verb = "Created";

                    console.log("Adding new item category.");
                    await Rest.call({
                        url: Rest.passRoot + "/inventory/item-category",
                        method: "POST",
                        data: data,
                        async: false,
                        done: function (data) {
                            console.log("Response from create request: " + JSON.stringify(data));
                            result = true;
                        },
                        fail: function (data) {
                            console.warn("Bad response from block add attempt: " + JSON.stringify(data));
                        },
                        failMessagesDiv: Category.addEditFormMessages
                    });
                } else if (Category.modeInput.val() === "edit") {
                    verb = "Edited";
                    let id = Category.idInput.val();
                    console.log("Editing item category " + id);

                    await Rest.call({
                        url: Rest.passRoot + "/inventory/item-category/" + id,
                        method: "PUT",
                        data: data,
                        async: false,
                        done: function (data) {
                            console.log("Response from edit request: " + JSON.stringify(data));
                            result = true;
                        },
                        failMessagesDiv: Category.addEditFormMessages
                    });
                }

                if (result) {
                    PageMessageUtils.reloadPageWithMessage(verb + " item category successfully!", "success", "Success!");
                }
            });

            async function removeItemCategory(id, name){
                if(!confirm("Are you sure to delete item category " + name + "?\nThis cannot be undone.")){
                    console.log("User decided to not delete item category.");
                    return;
                }

                await Rest.call({
                    url: Rest.passRoot + "/inventory/item-category/" + id,
                    method: "DELETE",
                    async: false,
                    done: function (data) {
                        PageMessageUtils.reloadPageWithMessage("Deleted item category successfully!", "success", "Success!");
                    },
                    failMessagesDiv: PageMessageUtils.mainMessageDiv
                });
            }

            const ItemCategoryView = {
                viewModal: $("#itemCategoryViewModal"),
                historyView: $("#itemCategoryHistorySearchAccordionCollapse"),
                modalLabel: $("#itemCategoryViewModalLabel"),
                catId: $("#itemCategoryViewId"),
                colorContainer: $("#itemCategoryColorContainer"),
                color: $("#itemCategoryColorVal"),
                desc: $("#itemCategoryViewDescription"),
                descContainer: $("#itemCategoryViewDescriptionContainer"),
                keywordView: $("#viewKeywordsSection"),
                attsView: $("#viewAttsSection"),
                carousel: $("#itemCategoryViewCarousel"),
                breadcrumbContainer: $("#itemCategoryViewBreadcrumbContainer"),
                childrenContainer: $("#itemCategoryViewChildrenContainer"),


                resetView(){
                    ItemCategoryView.modalLabel.text("Item Category View");
                    ItemCategoryView.catId.text("");
                    ItemCategoryView.desc.text("");
                    ItemCategoryView.descContainer.hide();
                    ItemCategoryView.color.text("");
                    ItemCategoryView.colorContainer.removeAttr("style");
                    ItemCategoryView.breadcrumbContainer.text('');
                    ItemCategoryView.childrenContainer.text('');

                    Carousel.clearCarousel(ItemCategoryView.carousel);
					KeywordAttUtils.clearHideKeywordDisplay(ItemCategoryView.keywordView);
					KeywordAttUtils.clearHideAttDisplay(ItemCategoryView.attsView);
                    HistorySearchUtils.resetHistorySearch(ItemCategoryView.historyView);
                },
                async setupItemCategoryView(categoryId){
                    console.log("Setting up view for item category " + categoryId);
                    ItemCategoryView.resetView();
                    UriUtils.addOrReplaceParams("view", categoryId);
                    ItemCategoryView.catId.text(categoryId);

                    await Rest.call({
                        url: Rest.passRoot +"/inventory/item-category/" + categoryId,
                        method: "GET",
                        async: false,
                        done: async function (data) {
                            let promises = [];
                            let children = Getters.ItemCategories.getItemCategoryChildrenData(categoryId);
                            promises.push(ItemCategoryTree.getBreadcrumbs(ItemCategoryView.breadcrumbContainer, categoryId));
                            ItemCategoryView.modalLabel.text(data.name);
                            promises.push(Carousel.processImagedObjectImages(data, ItemCategoryView.carousel));

                            if(data.color) {
                                ItemCategoryView.color.text(data.color);
                                ItemCategoryView.colorContainer.css("background-color", data.color);
                                ItemCategoryView.colorContainer.css("color", data.textColor);
                            } else {
                                ItemCategoryView.color.text("None");
                            }

                            if(data.description){
                                ItemCategoryView.desc.text(data.description);
                                ItemCategoryView.descContainer.show();
                            }

                            //TODO:: parent (similar to storage)

							KeywordAttUtils.processKeywordDisplay(ItemCategoryView.keywordView, data.keywords);
							KeywordAttUtils.processAttDisplay(ItemCategoryView.attsView, data.attributes);

                            children = await children;
                            if(children.empty){
                                ItemCategoryView.childrenContainer.text("No children!")
                            } else {
                                console.log("Processing category children.");
                                children.results.forEach(function (child) {
                                    let newGetParams = new URLSearchParams(window.location.search);
                                    newGetParams.set("view", child.id)

                                    let newChildLink = $('<li class="list-inline-item"><a href="/itemCategories?'+newGetParams.toString()+'"></li></a>');
                                    newChildLink.find("a").text(child.name);
                                    ItemCategoryView.childrenContainer.append(newChildLink);
                                });
                            }

                            await Promise.all(promises);
                        },
                        fail: function (data) {
                            console.warn("Bad response from block add attempt: " + JSON.stringify(data));
                        },
                        failMessagesDiv: Category.addEditFormMessages
                    });
                    HistorySearchUtils.setupHistorySearch(ItemCategoryView.historyView, categoryId);
                }
            }

            var viewModal = new bootstrap.Modal(ItemCategoryView.viewModal, { });

            ItemCategoryView.viewModal[0].addEventListener("hidden.bs.modal", function (){
                UriUtils.removeParam("view");
            });

			$(document).ready(function() {
				if(UriUtils.getParams.has("view")){
					ItemCategoryView.setupItemCategoryView(UriUtils.getParams.get("view"));
					viewModal.show();
				}
			});
        </script>
    {/pageScript}
{/include}