@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>구성 CDT 세트 추가</h2>
    <span class="window-popup-close" onclick="edmPopupClose()"><i class="dripicons-cross"></i></span>
</div>
<div class="window-popup-con">
    <p class="mb-3">
        상품에 구성할 CDT 세트를 추가합니다.<br>
        활성 상태인 CDT 세트만 노출됩니다.
    </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="module_id" class="form-label">모듈</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <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 class="input-wrapper">
                        <label for="subjects" class="form-label">과목</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <select name="subjects[]" id="subjects" multiple>
                                <option value="" >선택</option>
                                @foreach ($subjects as $subject)
                                <option value="{{ $subject->id }}">{{ $subject->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="name" class="form-label">CDT 세트명</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="cdtGroupListGrid">
                    <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="getCdtGroups()">조회</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>선택된 CDT 총 <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]', '', getCdtGroups)">
                                <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(cdtGroupListGrid, cdtGroupAddListGrid)">추가</button>
                        </div>
                    </div>
                    <!-- //구성항목 타이틀 -->
                    <!-- tui table 추가 -->
                    <div id="cdtGroupListGrid"></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>추가 예정 CDT 총 <strong class="point-color add-list-total">0</strong>건</span>
                            </div>
                            <div class="pagination-helper">
                                <a class="button btn-style-8" onclick="removeCheckedRows(cdtGroupAddListGrid)">선택 삭제</a>
                            </div>
                        </div>
                        <!-- //구성항목 타이틀 -->
                        <!-- tui table 추가 -->
                        <div id="cdtGroupAddListGrid"></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.addCdtGroup, cdtGroupAddListGrid)">적용</button>
    </div>
</div>
@endsection

@push("script")
<script>
    let subjectsTomSelect = null;
    let cdtGroupListGrid = null;
    let cdtGroupAddListGrid = null;

    window.addEventListener("load", () => {
        subjectsTomSelect = new TomSelect("#subjects", {
            onChange: tomSelectedTopFix,
            // dropdownParent: "body",
            plugins: {
                "checkbox_options": {},
                "input_autogrow": {},
                'dropdown_header': {
                	title: '전체 선택',
                    html: tomSelectAllCheckRender,
                },
            },
        });

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

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

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

        getCdtGroups();
        fitWindowSize();
    });

    function getCdtGroups() {
        getListDataExec({{ Js::from(route('product.cdt-group.list')) }}, new FormData(document.querySelector('#search-form')), cdtGroupListGrid);
    }

</script>
@endpush