<div id="NewStoreForm">



</div>




<script>

    InitDataPageFuncOBJ();
    LoadDataPageFunc = {};
    LoadDataPageFunc.URLs = {};
    LoadDataPageFunc.URLs.NewUrl = `/Store/New`;
    LoadDataPageFunc.URLs.CategoryDatalist = `/Store/New/Category/Datalist`;
    // LoadDataPageFunc.URLs.SubCategoryDatalist = `/Products/New/SubCategory/Datalist`;
    LoadDataPageFunc.URLs.PhotoUpload = `/File/Upload/Store`;

    LoadDataPageFunc.PageTitle = 'New Store';

    LoadDataPageFunc.ids = {};
    LoadDataPageFunc.ids.photodropzone = 'NewStorePhotos';
    LoadDataPageFunc.formclass = 'NewStoreMarket';

    // LoadDataPageFunc.UpdateSubCategoryDatalistasTyped = function () {

    //     document.getElementById("NewProductCategory").addEventListener("keyup", function (event) {
    //         const inputValue = event.target.value;
    //         const categoryinputvalue = document.getElementById("NewProductCategory").value;
    //         QueryandReplaceDatalist("NewProductSubCategoryDataList", LoadDataPageFunc.URLs.SubCategoryDatalist, 'POST', {category:categoryinputvalue}, fromvarcache = true);
    //     });
    // };


    LoadDataPageFunc.LoadUI = function () {
        let finalhtml = '';
        const formclass = LoadDataPageFunc.formclass;
        const textbox = function (placeholder, label, id, required = false, datalist = '') {
            return UIInputGroup(placeholder, 'text', id, label, formclass, spanclass = '', imginsteadofspan = '', required, textvalue = '', datalist, imgwidth = '', imgheight = '');
        };
        const name = textbox('Store Name', 'Name', 'name', true);
        const description = UIInputGroupTEXTAREA(label = 'Description', 'description', required = true, textareacontent = '', formclass);
        const category = textbox('Product Category', 'Category', 'category', true, 'NewStoreCategoryDataList');
        const address = UIInputGroupTEXTAREA(label = 'Address', 'address', required = true, textareacontent = '', formclass);
        const categorydatalist = ArraytoDatalist("NewStoreCategoryDataList", [], false) || '';
        // const subcategory = textbox('Product Subcategory', 'Subcategory', 'ProductSubCategory', true, 'NewProductSubCategoryDataList');
        // const subcategorydatalist = ArraytoDatalist("NewProductSubCategoryDataList", [], false) || '';
        const photoscontainer = UIInputGroupFileUploadDropzone(LoadDataPageFunc.ids.photodropzone, label = 'Photo', LoadDataPageFunc.URLs.PhotoUpload);
        // const price = UIInputGroupNumber('Price in Philippine Pesos', 'NewProductPrice', 'Price', formclass, 1, max = '', spanclass = '', imginsteadofspan = '', required = true, val = 1, datalist = '', imgwidth = '', imgheight = '');
        // const unit = textbox('ex 25kg', 'Unit', 'ProductUnitName', true);
        // const available = UIInputGroupNumber('Available Stock', 'NewProductAvailable', 'No of Stock', formclass, 1, max = '', spanclass = '', imginsteadofspan = '', required = true, val = 1, datalist = '', imgwidth = '', imgheight = '');
        // let barcode = textbox('12 Digits Barcode Number', 'Barcode', 'ProductBarcode', false);
        // barcode = $('<div>' + barcode + '</div>');
        // barcodeinput = barcode.find('input');
        // barcodeinput.attr('maxlength', 12).attr('pattern', '[0-9]*').on('input', function () {
        //     this.value = this.value.replace(/[^0-9]/g, '');
        // });
        // barcode = barcode.html();



        const storeOwner = UIInputGroupSelect('owner', label = 'Store Owner', [['', 'Select User']], spanclass = '', imginsteadofspan = '', 0,'','',formclass);

        //TODO Add Support for storeManager and Cashier multiple accounts support

        const submitbutton = UIInputGroupButton('Submit', formclass, buttonid = '', onclick = 'LoadDataPageFunc.TryToSubmit();', buttonstyle = '');

        //     const selectFromUser = ` <div class="input-group mb-3" id="store_owner" style="">
        //     <select class="form-control" id="storeOwner">
        //     </select>
        // </div>`;


        finalhtml = name + description + category + categorydatalist + address + photoscontainer + storeOwner + submitbutton;
        finalhtml = CreateCardSimple(false, finalhtml);

        document.getElementById('NewStoreForm').innerHTML = finalhtml;
        // QueryandReplaceDatalist("NewProductCategoryDataList", LoadDataPageFunc.URLs.CategoryDatalist, 'POST', datatosend = null, fromvarcache = true);
        // QueryandReplaceDatalist("NewProductSubCategoryDataList", LoadDataPageFunc.URLs.SubCategoryDatalist, 'POST', datatosend = null, fromvarcache = true);

        InitializeLoadDataPageFuncDropZonePhotoUpload(LoadDataPageFunc.URLs.PhotoUpload, LoadDataPageFunc.ids.photodropzone, ShowClearPhotoFUNC = '', clearphotosbuttonid = 'clearuploadbutton', acceptedfiles = '', maxsizeMB = 100);
        LoadDataPageFunc.InitializePhotoDropZone();

        // LoadDataPageFunc.UpdateSubCategoryDatalistasTyped();
        QueryandReplaceDatalist("NewStoreCategoryDataList", LoadDataPageFunc.URLs.CategoryDatalist, 'POST', null, fromvarcache = true);
    };


    LoadDataPageFunc.RepopulateStoreOwnerList = function () {
        function UpdateSelectParentList(response) {
            const selectElement = $("#owner");

            response.forEach(element => {

                $("<option></option>")
                    .val(element.hashkey)
                    .text(`${element.name} (${element.mobile_number}) [${element.username}] ${element.fullname ?? ''}`)
                    .appendTo(selectElement);
            });
        }

        AjaxDo('/admin/user/list/numbers/hash', {}, UpdateSelectParentList, null, reqtype = 'POST');
    };


    LoadDataPageFunc.TryToSubmit = function () {

        const currentformdata = LoadDataPageFunc.ValidateForm();

        if (!currentformdata) {
            ModalQuickDismiss('Error', 'Name, Description, Category and Address are required fields.', modalid = '', modaltohide = '', functiontodo = '', conditiontrue = true, modalfooter = '');
            return false;
        }

        const errorModal = function (errorstring = '') {
            ModalQuickDismiss('Error', 'Unable Submit To New Store. <br>' + errorstring, modalid = '', modaltohide = '', functiontodo = '', conditiontrue = true, modalfooter = '');
        };

        const successModal = function () {
            hideallmodals();
            ModalQuickDismiss('Success', 'New Store Created');
        };

        const submitsuccess = function (response) {
            responseOk = isResponseAHash(response);
            if (!responseOk) {
                errorModal(response);
                return false;
            }
            if (responseOk) {
                // Preloaders.ViewProductinMarket(response);
                successModal();
                gotoPage('ViewStoreMarket', response);
                return true;
            }

        };

        SendPostDataFormwithTARGETUPLOADEDFILES(LoadDataPageFunc.URLs.NewUrl, LoadDataPageFunc.formclass, submitsuccess);

    };


    LoadDataPageFunc.ValidateForm = function () {
        return validateInputForm(['name', 'description', 'address', 'category']);

        const isAnyoftheRequiredEmpty = !inputsArray['NewProductName'] || !inputsArray['NewProductDescription'] || !inputsArray['NewProductCategory'] || !inputsArray['NewProductSubCategory'] ||
            !inputsArray['NewProductPrice'] || !inputsArray['NewProductAvailable'] || !inputsArray['NewProductUnitName'] || Target_Uploaded_Files.length === 0;





        if (isAnyoftheRequiredEmpty || isBarcodeNumeric === false) {
            return false;
        }

        const IsBarcodeValid = IsStringBarcode12Digits(inputsArray['NewProductBarcode']);


        return true;
    };



    LoadDataPageFunc.Main = function () {

        LoadDataPageFunc.LoadUI();
        LoadDataPageFunc.RepopulateStoreOwnerList();
        changeTopbarTitle(LoadDataPageFunc.PageTitle);

    };

    LoadDataPageFunc.Main();

</script>