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

@section("header")
@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="service_id" class="form-label">서비스 구분</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <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 class="input-wrapper">
                        <label for="etc_product_type_id" class="form-label">항목 구분</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <select name="etc_product_type_id" id="etc_product_type_id">
                                <option value="">전체</option>
                                @foreach ($etcProductTypes as $etcProductType)
                                <option value="{{ $etcProductType->id }}">{{ $etcProductType->name }}</option>
                                @endforeach
                            </select>
                        </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="etcProductListGrid">
                    <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="getEtcProducts()">조회</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>선택된 항목 총 <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]', '', getEtcProducts)">
                                <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(etcProductListGrid, etcProductAddListGrid)">추가</button>
                        </div>
                    </div>
                    <!-- //구성항목 타이틀 -->
                    <!-- tui table 추가 -->
                    <div id="etcProductListGrid"></div>
                    <!-- //tui table 추가 -->
                </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(etcProductAddListGrid)">선택 삭제</a>
                            </div>
                        </div>
                        <!-- //구성항목 타이틀 -->
                        <!-- tui table 추가 -->
                        <div id="etcProductAddListGrid"></div>
                        <!-- //tui table 추가 -->
                        <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.addEtcProduct, etcProductAddListGrid)">적용</button>
    </div>
</div>
@endsection

@push("script")
<script>
    let etcProductListGrid = null;
    let etcProductAddListGrid = null;

    window.addEventListener("load", () => {
        etcProductListGrid = new Grid({
            el: document.getElementById("etcProductListGrid"),
            scrollX: false,
            scrollY: false,
            contextMenu: null,
            rowHeaders: [
                {
                    type: 'checkbox'
                }
            ],
            columns: ETC_PRODUCT_COLUMNS,
        });

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

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

        getEtcProducts();
        fitWindowSize();
    });

    function getEtcProducts() {
        getListDataExec({{ Js::from(route('product.etc-product.list')) }}, new FormData(document.querySelector('#search-form')), etcProductListGrid);
    }

</script>
@endpush