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

@section("header")
@routes("product")
@vite([
    'resources/js/domains/common/tomSelect.js',
    'resources/js/domains/common/tomSelectAllCheck.js',
    'resources/js/domains/common/toastGrid.js',
    'resources/js/domains/product/composed.js',
    'resources/js/domains/product/gridColumns.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">
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="sales_type" class="form-label">상품 구분</label>
                        <select name="sales_type" id="sales_type">
                            <option value="" >선택</option>
                            <option value="판매">판매</option>
                            <option value="지급">지급</option>
                        </select>
                    </div>
                    <div class="input-wrapper">
                        <label for="service_id" class="form-label">서비스 구분</label>
                        <div class="">
                            <select name="service_id" id="service_id" onchange="changeServiceId(event)">
                                <option value="">선택</option>
                                @foreach ($services as $service)
                                <option value="{{ $service->id }}">{{ $service->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="input-wrapper" style="flex-wrap: nowrap;">
                        <label for="categories" class="form-label">카테고리</label>
                        <select name="categories[]" id="categories" class="long-input" multiple disabled>
                            <option value="">선택</option>
                            @foreach ($productCategories as $key => $tmpProductCategories)
                                @foreach ($tmpProductCategories as $productCategory)
                                <option value="{{ $productCategory->id }}">
                                    {{ $productCategory->name }} ({{ App\Domains\Product\Infrastructure\Model\Service::getNameById($key) }})
                                </option>
                                @endforeach
                            @endforeach
                        </select>
                    </div>
                    <div class="input-wrapper">
                        <label for="module_id" class="form-label">모듈</label>
                        <div class="">
                            <select name="module_id" id="module_id">
                                <option value="">전체</option>
                                @foreach ($modules as $module)
                                <option value="{{ $module->id }}">{{ $module->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="name" class="form-label">상품명</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="text" name="productName" id="productName">
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="name" class="form-label">옵션명</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="text" name="name" id="name">
                        </div>
                    </div>
                </div>
                <div class="input-wrapper" style="display: none;">
                    <input type="hidden" name="onlyData" value="1">
                    <input type="hidden" name="target_grid" value="productOptionsGrid">
                    <input type="hidden" name="paginate" value="">
                    <input type="hidden" name="order_by" value="">
                    <input type="hidden" name="sort" value="">
                    <input type="hidden" name="page" value="">
                </div>
            </div>
            <button type="button" class="search-button" onclick="getProductOptions()">조회</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-total">0</strong>건</span>,&nbsp;<span style="display: none;">선택된 상품 총 <strong class="point-color pagination-selected">0</strong>건</span>
                        </div>
                        <div class="pagination-helper">
                            <div class="pagination-wrapper"></div>
                            <select id='paginate-control' class='form-select-sm data-length-select' onchange="copyValue('.data-length-select', 'input[name=paginate]', '', getProductOptions)">
                                <option value="10">10개씩 보기</option>
                                <option value="30">30개씩 보기</option>
                                <option value="50">50개씩 보기</option>
                                <option value="100">100개씩 보기</option>
                            </select>
                            <button class="button btn-style-1" onclick="appendSelectedRow(productOptionsGrid, addProductOptionsGrid)">추가</button>
                        </div>
                    </div>
                    <div id="productOptionsGrid"></div>
                </div>
            </div>
        </div>
        <div class="pd-con-wrap">
            <div class="pd-con">
                <dl>
                    <div class="add-list-wrapper">
                        <div class="user-btn-wrap">
                            <div class="pagination-result">
                                <span>적용 예정 옵션 총 <strong class="point-color add-list-total">0</strong>건</span>
                            </div>
                            <div class="pagination-helper">
                                <a class="button btn-style-8" onclick="removeCheckedRows(addProductOptionsGrid)">선택 삭제</a>
                            </div>
                        </div>
                        <div id="addProductOptionsGrid"></div>
                        <dd class="validation-wrap"><p></p></dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>

    <div class="text-center">
        <button class="button btn-style-1" type="button" onclick="callOpenerMethodWithGrid(window.opener.addProductOptions, addProductOptionsGrid)">적용</button>
    </div>
</div>
@endsection

@push("script")
<script>
    let productOptionsGrid = null;
    let addProductOptionsGrid = null;
    const prdouctCategorySelectId = "categories";
    const PRODUCT_CATEGORIES = {{ Js::from($productCategories) }};
    const SERVICE_NAMES = {
        {{ Js::from(1) }} : {{ Js::from(App\Domains\Product\Infrastructure\Model\Service::getNameById(1)) }},
        {{ Js::from(2) }} : {{ Js::from(App\Domains\Product\Infrastructure\Model\Service::getNameById(2)) }},
    };

    window.addEventListener("load", () => {
        productCategoryTomSelect = initProductCategoryTomSelect(`#${prdouctCategorySelectId}`);

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

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

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

        getProductOptions();
        fitWindowSize();
    });

    function getProductOptions() {
        getListDataExec(route('api.product.product-option-list'), new FormData(document.querySelector('#search-form')), productOptionsGrid);
    }

    function initProductCategoryTomSelect(element) {
        const tomSelect = new TomSelect(element, {
            onChange: tomSelectedTopFix,
            placeholder: "선택",
            plugins: {
                "checkbox_options": {},
                "input_autogrow": {},
                'dropdown_header': {
                	title: '전체 선택',
                    html: tomSelectAllCheckRender,
                },
            },
        });
        return tomSelect;
    }

    function changeServiceId(e) {
        const serviceId = e.target.value;
        if (serviceId)
            productCategoryTomSelect.enable();
        else
            productCategoryTomSelect.disable();

        if (productCategoryTomSelect) {
            productCategoryTomSelect.clear();
            productCategoryTomSelect.destroy();
        }

        const $productCategorySelect = document.getElementById(prdouctCategorySelectId);
        $productCategorySelect.querySelectorAll("option").forEach(item => item.remove());

        const $defaultOption = document.createElement("option");
        $defaultOption.innerText = `전체`;
        $defaultOption.value = "";
        $productCategorySelect.appendChild($defaultOption);

        let targetCategories = [];
        if (serviceId == 1 || serviceId == 2) {
            targetCategories = PRODUCT_CATEGORIES[serviceId];
            targetCategories.forEach(item => {
                const $option = document.createElement("option");
                $option.innerText = `${item.name} (${SERVICE_NAMES[serviceId]})`;
                $option.value = item.id;
                $productCategorySelect.appendChild($option);
            });
        } else {
            targetCategories = PRODUCT_CATEGORIES[1];
            targetCategories.forEach(item => {
                const $option = document.createElement("option");
                $option.innerText = `${item.name} (${SERVICE_NAMES[1]})`;
                $option.value = item.id;
                $productCategorySelect.appendChild($option);
            });

            targetCategories = PRODUCT_CATEGORIES[2];
            targetCategories.forEach(item => {
                const $option = document.createElement("option");
                $option.innerText = `${item.name} (${SERVICE_NAMES[2]})`;
                $option.value = item.id;
                $productCategorySelect.appendChild($option);
            });
        }

        productCategoryTomSelect = initProductCategoryTomSelect($productCategorySelect);
        productCategoryTomSelect.refreshItems();
    }

</script>
@endpush