@extends("domains.common.layouts.layout-popup")

@section("header")
@routes("product")
@vite([
    'resources/js/domains/common/toastGrid.js',
    'resources/js/domains/product/gridColumns.js',
    'resources/js/domains/product/composed.js',
])
<style>
    div.ts-wrapper div.ts-control input {
        height: auto;
    }
    .tui-grid-layer-state {
        z-index: unset !important;
    }
</style>
@endsection

@section("main-content")
<div class="window-popup-titleBox">
    <h2>카테고리 관리</h2>
    <span class="window-popup-close" onclick="edmPopupClose()"><i class="dripicons-cross"></i></span>
</div>
<div class="window-popup-con">
    <p class="mb-3">
        상품 카테고리를 추가 및 수정합니다.<br>
        카테고리 수정 시 상품에도 동시 적용 처리 됩니다.
    </p>
    <!-- 조회조건 -->
    <form class="mb-3" id="search-form">
        <div class="popup-search-wrap search-form">
            <div class="search-input-wrap">
                <dl>
                    <div class="search-input-row">
                        <div class="input-wrapper">
                            <label for="service_id" class="form-label req">서비스 구분</label>
                            <div class="">
                                <select name="service_id" id="service_id">
                                    <option value="">선택</option>
                                    @foreach ($services as $service)
                                    <option value="{{ $service->id }}" >{{ $service->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <dd class="validation-wrap"><p></p></dd>
                </dl>
                <dl>
                    <div class="search-input-row">
                        <div class="input-wrapper">
                            <label for="" class="form-label">카테고리명</label>
                            <div class="">
                                <input type="text" name="name" id="name">
                            </div>
                        </div>
                    </div>
                    <dd class="validation-wrap"><p></p></dd>
                </dl>
            </div>
            <button type="button" class="search-button" onclick="addCategory()">추가</button>
        </div>
    </form>

    <div class="pd-wrap">
        <div class="pd-con-wrap">
            <div class="pd-con">
                <div class="add-list-wrapper">
                    <div class="user-btn-wrap">
                        <div class="pagination-result">
                            <span>선택된 카테고리 총 <strong class="point-color pagination-selected">0</strong>건</span>
                        </div>
                        <div class="pagination-helper">
                            <div class="pagination-wrapper"></div>
                            <button class="button btn-style-8" onclick="removeCategory()">선택 삭제</button>
                        </div>
                    </div>
                    <div id="productCategoryListGrid"></div>
                    <dd class="validation-wrap"><p></p></dd>
                </div>
            </div>
        </div>
        <div class="pd-con-wrap">
            <div class="pd-con">
                <div class="add-list-wrapper">
                    <div class="user-btn-wrap">
                        <div class="pagination-result">
                            <span><strong class="point-color product-category-name"></strong>에 포함된 상품 총 <strong class="point-color product-count">0</strong>건</span>
                        </div>
                        <div class="pagination-helper">
                            <button class="button btn-style-8" onclick="removeProduct()">선택 제외</button>
                        </div>
                    </div>
                    <div id="productListGrid"></div>
                    <dd class="validation-wrap"><p></p></dd>
                </div>
            </div>
        </div>
    </div>

    <div class="text-center">
        <button class="button btn-style-1" type="button" onclick="handleSubmit()">적용</button>
    </div>
</div>
@endsection

@push("script")
<script>
    const IELTS_CATEGORIES = {{ Js::from(App\Domains\Product\Infrastructure\Model\ProductCategory::parseComposedGridData($productCategories[1])) }};
    const ACADEMY_CATEGORIES = {{ Js::from(App\Domains\Product\Infrastructure\Model\ProductCategory::parseComposedGridData($productCategories[2])) }};
    const ALL_CATEGORIES = [...IELTS_CATEGORIES, ...ACADEMY_CATEGORIES];
    const DELETED_CATEGORIES = [];
    const EXCLUDE_PRODUCTS = {};
    let productCategoryListGrid = null;
    let productListGrid = null;

    window.addEventListener("load", () => {
        productCategoryListGrid = new Grid({
            el: document.getElementById("productCategoryListGrid"),
            data: ALL_CATEGORIES,
            draggable: true,
            scrollX: false,
            scrollY: false,
            contextMenu: null,
            rowHeaders: [{type: 'checkbox'}],
            columns: PRODUCT_CATEGORY_COLUMNS,
        });

        productCategoryListGrid.on("check", e => countCheckedRows(productCategoryListGrid));
        productCategoryListGrid.on("checkAll", e => countCheckedRows(productCategoryListGrid));
        productCategoryListGrid.on("uncheck", e => countCheckedRows(productCategoryListGrid));
        productCategoryListGrid.on("uncheckAll", e => countCheckedRows(productCategoryListGrid));

        productListGrid = new Grid({
            el: document.getElementById("productListGrid"),
            scrollX: false,
            scrollY: false,
            contextMenu: null,
            rowHeaders: [{type: 'checkbox'}],
            columns: PRODUCT_COLUMNS,
        });

        productCategoryListGrid.on("drop", async e => {
            await resetRowNumber(productCategoryListGrid, "order");
        });
        productCategoryListGrid.on("click", e => {
            if (e.targetType == "cell") {
                const productCategory = e.instance.getRow(e.rowKey);
                gridResetData(productListGrid, productCategory.parsed_products);
                productListGrid.parentRowKey = e.rowKey;
                productListGrid.parentCategoryId = productCategory.id;

                const $parentWrapper = productListGrid.el.parentElement;
                const $productCategoryName = $parentWrapper.querySelector("strong.product-category-name");
                const $productCount = $parentWrapper.querySelector("strong.product-count");
                $productCategoryName.innerHTML = productCategory.name;
                $productCount.innerHTML = productCategory.parsed_products.length;
            }
        });
        productCategoryListGrid.on("afterChange", async event => {
            const e = event.changes[0];
            const targetRow = productCategoryListGrid.getRow(e.rowKey);
            const $parentWrapper = productCategoryListGrid.el.closest("div.add-list-wrapper");
            $parentWrapper.querySelectorAll("dd.validation-wrap").forEach(item => item.style.display = "none");

            let validationWrap = null;
            if (!e.value)
                validationWrap = displayValidationForm(productCategoryListGrid.el, "입력된 내용이 없습니다.", "div.add-list-wrapper");
            else {
                const datas = productCategoryListGrid.getData();
                datas.forEach(item => {
                    if (item.rowKey != e.rowKey && item.name == e.value)
                        validationWrap = displayValidationForm(productCategoryListGrid.el, "중복된 카테고리명이 있습니다.", "div.add-list-wrapper");
                });
            }

            if (validationWrap) {
                targetRow.name = e.prevValue;
                await productCategoryListGrid.setRow(targetRow.rowKey, targetRow);
                productCategoryListGrid.startEditing(targetRow.rowKey, "name")
            }
            productCategoryListGrid.alreadyHandledEvent = true;
            // event.stop();
        });
        productCategoryListGrid.on("editingFinish", e => {
            if (!productCategoryListGrid.alreadyHandledEvent)
                productCategoryListGrid.el.closest("div.add-list-wrapper").querySelectorAll("dd.validation-wrap").forEach(item => item.style.display = "none");
            else
                productCategoryListGrid.alreadyHandledEvent = false;
        });

        fitWindowSize();
    });

    function addCategory() {
        let validationWrap = null;

        const $serviceId = document.getElementById("service_id");
        $serviceId.closest("div.search-input-wrap").querySelectorAll("dd.validation-wrap").forEach(item => item.style.display = "none");
        if (!$serviceId.value)
            validationWrap = displayValidationForm($serviceId, "선택된 항목이 없습니다.");


        const $name = document.getElementById("name");
        const newName = $name.value;
        if (!newName)
            validationWrap = displayValidationForm($name, "입력된 내용이 없습니다.");
        else {
            let isDuplicated = false;
            productCategoryListGrid.getData().forEach(item => item.name == newName ? isDuplicated = true : 1);
            if (isDuplicated)
                validationWrap = displayValidationForm($name, "중복된 카테고리명이 있습니다.");
        }

        if (validationWrap == null) {
            productCategoryListGrid.appendRow({
                id: null,
                service_id: $serviceId.value,
                service_name: $serviceId.value == 1 ? "인강" : "어학원",
                name: newName,
                product_count: 0,
                parsed_products: [],
                order: null,
            });
            resetRowNumber(productCategoryListGrid, "order");
        }
    }

    async function removeCategory() {
        const checkedRows = productCategoryListGrid.getCheckedRows();
        if (checkedRows.length < 1) {
            alertify.alert("알림", "선택된 카테고리가 없습니다.");
            return;
        }

        const hasIncludeProduct = checkedRows.filter(item => item.product_count > 0);
        if (hasIncludeProduct.length > 0) {
            if (!(await alertifyAsync("알림", "카테고리에 상품이 포함되어 있습니다.<br>삭제 시 포함된 상품에서 카테고리가 제외 처리됩니다.<br><br>삭제 하시겠습니까?")))
                return;
        } else {
            if (!(await alertifyAsync("알림", "카테고리를 삭제 하시겠습니까?")))
                return;
        }

        checkedRows.forEach(item => {
            DELETED_CATEGORIES.push(item);
            productCategoryListGrid.removeRow(item.rowKey)
        });

        resetRowNumber(productCategoryListGrid, "order");
    }

    async function removeProduct() {
        const checkedRows = productListGrid.getCheckedRows();
        if (checkedRows.length < 1) {
            alertify.alert("알림", "선택된 상품이 없습니다.");
            return;
        } else {
            if (!(await alertifyAsync("알림", "카테고리에서 제외 하시겠습니까?")))
                return;
        }

        const productCategoryId = productListGrid.parentCategoryId;
        if (!EXCLUDE_PRODUCTS[productCategoryId])
            EXCLUDE_PRODUCTS[productCategoryId] = [];

        EXCLUDE_PRODUCTS[productCategoryId].push(checkedRows);
        checkedRows.forEach(item => {
            productListGrid.removeRow(item.rowKey)
        });

        const productCategoryRowKey = productListGrid.parentRowKey;
        const productCategory = productCategoryListGrid.getRow(productCategoryRowKey);
        productCategory.parsed_products.forEach((tmpProduct, index) => {
            EXCLUDE_PRODUCTS[productCategoryId].forEach(removedProducts => removedProducts.forEach(removedProduct => {
                if (tmpProduct.id == removedProduct.id) {
                    productCategory.parsed_products.splice(index, 1);
                    productCategory.product_count = productCategory.parsed_products.length;
                    productCategoryListGrid.setRow(productCategoryRowKey, productCategory);
                }
            }));
        });
    }

    function handleSubmit() {
        const URL = route('api.product.category.set');
        const data = {
            deletedCategories: DELETED_CATEGORIES,
            excludeProducts: EXCLUDE_PRODUCTS,
            categories: productCategoryListGrid.getData(),
        };

        // const callback = response => console.log(response);
        const callback = response => location.reload();
        edmAjax({
            url: URL,
            method: "post",
            data: data,
            callback: callback,
        });
    }

</script>
@endpush