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

@section("header")
@routes("product")
@vite([
    'resources/js/domains/common/tomSelect.js',
    'resources/js/domains/common/tomSelectAllCheck.js',
])
<style>
    div.ts-wrapper div.ts-control input {
        height: auto;
    }
</style>
@endsection

@section("main-content")
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h1>상품 가격 관리</h1>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-xl-12 col-lg-12 order-lg-2 order-xl-1">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('product.price-management') }}" class="search-form" method="GET">
                        <div class="search-input-wrap">
                            <div class="search-input">
                                <label for="register_start_date">등록일</label>
                                <input type="date" id="register_start_date" name="register_start_date"
                                @if (Request::get("register_start_date"))
                                    value="{{ Request::get("register_start_date") }}"
                                @endif
                                > - <input  type="date" name="register_end_date"
                                @if (Request::get("register_end_date"))
                                    value="{{ Request::get("register_end_date") }}"
                                @endif
                                >
                            </div>
                            <div class="search-input">
                                <label for="service_id" class="req">서비스 구분</label>
                                <select name="service_id" id="service_id" onchange="changeServiceId(event)">
                                    @foreach ($services->sortByDesc("id") as $service)
                                        <option value={{ $service->id }} @selected(Request::get("service_id", null) == $service->id)>{{ $service->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="module_id">모듈 구분</label>
                                <select name="module_id" id="module_id">
                                    <option value="" >선택</option>
                                    @foreach ($modules as $module)
                                        <option value={{ $module->id }} @selected(Request::get("module_id", null) == $module->id)>{{ $module->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="activated">전시 상태</label>
                                <select name="activated" id="activated">
                                    <option value="" @selected(Request::get("activated") === null)>전체</option>
                                    <option value="1" @selected(Request::get("activated") == "1")>전시</option>
                                    <option value="0" @selected(Request::get("activated") === "0")>비전시</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="is_accepted">접수 상태</label>
                                <select name="is_accepted" id="is_accepted">
                                    <option value="" @selected(Request::get("is_accepted") === null)>전체</option>
                                    <option value="1" @selected(Request::get("is_accepted") == "1")>오픈</option>
                                    <option value="0" @selected(Request::get("is_accepted") === "0")>마감</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="categories">카테고리</label>
                                <select name="categories[]" id="categories" class="long-input" multiple>
                                    <option value="">전체</option>
                                    @foreach ($productCategories as $key => $tmpProductCategories)
                                        @if (Request::get("service_id", null) && Request::get("service_id") != 3)
                                            @if ($key == Request::get("service_id"))
                                                @foreach ($tmpProductCategories as $productCategory)
                                                <option value="{{ $productCategory->id }}" @selected(in_array($productCategory->id, Request::get("categories", [])))>
                                                    {{ $productCategory->name }} ({{ App\Domains\Product\Infrastructure\Model\Service::getNameById($key) }})
                                                </option>
                                                @endforeach
                                            @endif
                                        @else
                                            @foreach ($tmpProductCategories as $productCategory)
                                            <option value="{{ $productCategory->id }}" @selected(in_array($productCategory->id, Request::get("categories", [])))>
                                                {{ $productCategory->name }} ({{ App\Domains\Product\Infrastructure\Model\Service::getNameById($key) }})
                                            </option>
                                            @endforeach
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="productName">상품명</label>
                                <input type="text" name="productName" id="productName" autocomplete='on' value="{{ Request::get("productName") }}">
                            </div>
                            <div class="search-input">
                                <label for="name">옵션명</label>
                                <input type="text" name="name" id="name" autocomplete='on' value="{{ Request::get("name") }}">
                            </div>
                            <div class="search-input">
                                <label for="included_coupon">쿠폰/구매 혜택</label>
                                <select name="included_coupon" id="included_coupon">
                                    <!-- 인강 -->
                                    <option value="">전체</option>
                                    <option value="1" @selected(Request::get("included_coupon", null) == "1")>포함</option>
                                    <option value="0" @selected(Request::get("included_coupon", null) === "0")>미포함</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="discount_type_id">할인</label>
                                <select name="discount_type_id" id="discount_type_id">
                                    <!-- 인강 -->
                                    <option value="" >전체</option>
                                    @foreach ($discountTypes as $discountType)
                                    <option value={{ $discountType->id }} @selected(Request::get("discount_type_id", null) == $discountType->id)>{{ $discountType->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="search-input">
                                <input type="hidden" name="paginate" value="{{ Request::get("paginate") }}">
                                <input type="hidden" name="order_by" value="{{ Request::get("order_by") }}">
                                <input type="hidden" name="sort" value="{{ Request::get("sort") }}">
                            </div>
                        </div>
                        <button type="submit" class="search-button">조회</button>
                    </form>

                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-xl-12 col-lg-12 order-lg-2 order-xl-1">
            <div class="card">
                <div class="card-body">
                    <div class="user-btn-wrap">
                        <div class="pagination-result">
                            <span>총 <strong class="point-color">{{ $productOptions->total() }}</strong>건</span>
                        </div>
                        <div class="pagination-helper">
                            <div class="pagination-wrapper">
                                {{ $productOptions->links("vendor.pagination.default") }}
                            </div>
                            <select id='paginate-control' class='form-select-sm data-length-select' onchange="copyValue('.data-length-select', 'input[name=paginate]', '.search-form')">
                                <option value="10" @selected(Request::get("paginate") == null || Request::get("paginate") == 10)>10개씩 보기</option>
                                <option value="30" @selected(Request::get("paginate") == 30)>30개씩 보기</option>
                                <option value="50" @selected(Request::get("paginate") == 50)>50개씩 보기</option>
                                <option value="100" @selected(Request::get("paginate") == 100)>100개씩 보기</option>
                            </select>
                            <button type="button" class="button btn-style-2" onclick="excelDownload('.search-form', '{{ route('api.product.price-management-excel') ?? '' }}')">엑셀다운로드</button>
                            <a class="button btn-style-1" onclick="handleSubmit()">적용</a>
                        </div>
                    </div>
                    <table class="default-table">
                        <colgroup>
                            <col width="50">
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>
                                    <input class="all-select" type="checkbox" onchange="changeAllSelect(event)">
                                </th>
                                <th>번호</th>
                                <th>등록일시</th>
                                <th>모듈</th>
                                <th>접수 상태</th>
                                <th>카테고리</th>
                                <th>상품명</th>
                                <th>옵션명</th>
                                <th>쿠폰/구매 혜택</th>
                                <th class="editable">소비자가</th>
                                <th class="req editable">판매가</th>
                                <th class="editable">할인 설정</th>
                                <th class="editable">할인가</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            <tr class="new-product-option">
                                <td class="table-alert" colspan="9">
                                    <p>
                                        일괄 적용할 값을 선택 및 입력 후 적용할 옵션들을 목록에서 체크하여 상단의 적용 버튼 선택 시 일괄 적용 가능합니다.<br>
                                        목록에는 전시 / 판매 상품만 노출됩니다.
                                    </p>
                                </td>
                                <td>
                                    <input type="text" name="consumer_price" class="consumer_price">
                                </td>
                                <td>
                                    <dl>
                                        <input type="text" name="sales_price" class="sales_price">
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                </td>
                                <td>
                                    <dl class="sale-table-select">
                                        <dt>
                                            <select name="discount_type_id" id="discount_type_id" class="discount_type_id" onchange="discountTypeChange(event)">
                                                <option value="">없음</option>
                                                @foreach ($discountTypes as $discountType)
                                                <option value="{{ $discountType->id }}">{{ $discountType->name }}</option>
                                                @endforeach
                                            </select>
                                        </dt>
                                        <div>
                                            <dd data-discount_type_id="0" class="discount-detail">
                                                <input class="discount_type_detail_value_1" name="discount_type_detail_value_1" type="text" readonly>
                                                <span class="btw-bullet">-</span>
                                                <input class="discount_type_detail_value_2" name="discount_type_detail_value_2" type="text" readonly>
                                            </dd>
                                            <dd data-discount_type_id="1" class="discount-detail hidden">
                                                <input class="discount_type_detail_value_1" type="date" name="discount_type_detail_value_1" value="">
                                                <span class="btw-bullet">-</span>
                                                <input class="discount_type_detail_value_2" type="date" name="discount_type_detail_value_2" value="">
                                            </dd>
                                            <dd data-discount_type_id="2" class="discount-detail hidden">
                                                <select class="discount_type_detail_value_1" name="discount_type_detail_value_1">
                                                    <option value="">선택</option>
                                                    @foreach ($discountTypeDetails[2] as $discountTypeDetail)
                                                    <option data-value="{{ $discountTypeDetail->value }}" value="{{ $discountTypeDetail->id }}">{{ $discountTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                                <span class="btw-bullet">-</span>
                                                <select class="discount_type_detail_value_2" name="discount_type_detail_value_2">
                                                    <option value="">선택</option>
                                                    @foreach ($discountTypeDetails[2] as $discountTypeDetail)
                                                    <option data-value="{{ $discountTypeDetail->value }}" value="{{ $discountTypeDetail->id }}">{{ $discountTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                            <dd data-discount_type_id="3" class="discount-detail hidden">
                                                <select class="discount_type_detail_value_1" name="discount_type_detail_value_1">
                                                    <option value="">선택</option>
                                                    @foreach ($discountTypeDetails[3] as $discountTypeDetail)
                                                    <option data-value="{{ $discountTypeDetail->value }}" value="{{ $discountTypeDetail->id }}">{{ $discountTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                                <span class="btw-bullet">-</span>
                                                <select class="discount_type_detail_value_2" name="discount_type_detail_value_2">
                                                    <option value="">선택</option>
                                                    @foreach ($discountTypeDetails[3] as $discountTypeDetail)
                                                    <option data-value="{{ $discountTypeDetail->value }}" value="{{ $discountTypeDetail->id }}">{{ $discountTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                            <dd data-discount_type_id="4" class="discount-detail hidden">
                                                <input class="discount_type_detail_value_1" type="date" name="discount_type_detail_value_1" value="">
                                                <span class="btw-bullet">-</span>
                                                <input class="discount_type_detail_value_2" type="date" name="discount_type_detail_value_2" value="">
                                            </dd>
                                            <dd class="validation-wrap"><p></p></dd>
                                        </div>
                                    </dl>
                                </td>
                                <td>
                                    <dl>
                                        <input type="text" name="discount_price" class="discount_price">
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                </td>
                            </tr>
                            @forelse ($productOptions as $productOption)
                            <tr class="product-option" data-id="{{ $productOption->id }}">
                                <td class="check-wrap"><input name="check" type="checkbox" onchange="changeSelect(event)"></td>
                                <td>{{ $productOption->id }}</td>
                                <td>
                                    @if (isset($productOption->created_at))
                                    {{ explode(" ", $productOption->created_at)[0] }} <br>
                                    {{ explode(" ", $productOption->created_at)[1] }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>{{ $productOption->product->module->name }}</td>
                                <td>{{ $productOption->product->is_accepted == 1 ? "오픈" : "마감" }}</td>
                                <td>{{ $productOption->product->productCategories?->implode("name", ", ") ?? "-" }}</td>
                                <td class="text-left">
                                    <a href="{{ route('product.detail', ['service' => App\Domains\Product\Infrastructure\Model\Service::getNameById($productOption->product->service_id, true), 'id' => $productOption->product->id]) }}"  target="_blank">
                                        {{ $productOption->product->name }}
                                    </a>
                                </td>
                                <td class="text-left">
                                    {{ $productOption->name }}
                                </td>
                                <td>포함</td>
                                <td>
                                    <dl>
                                        <input class="consumer_price" type="text" name="consumer_price" value="{{ $productOption->consumer_price }}">
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                </td>
                                <td>
                                    <dl>
                                        <input class="sales_price" type="text" name="sales_price" value="{{ $productOption->sales_price }}">
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                </td>
                                <td>
                                    <dl class="sale-table-select">
                                        <dt>
                                            <select class="discount_type_id" name="discount_type_id" id="discount_type_id" onchange="discountTypeChange(event)">
                                                <option value="">없음</option>
                                                @foreach ($discountTypes as $discountType)
                                                <option value="{{ $discountType->id }}" @selected($discountType->id == $productOption->discount_type_id)>{{ $discountType->name }}</option>
                                                @endforeach
                                            </select>
                                        </dt>
                                        <div>
                                            <dd data-discount_type_id="0" @class(["discount-detail", "hidden" => $productOption->discount_type_id != null])>
                                                <input class="discount_type_detail_value_1" name="discount_type_detail_value_1" type="text" readonly>
                                                <span class="btw-bullet">-</span>
                                                <input class="discount_type_detail_value_2" name="discount_type_detail_value_2" type="text" readonly>
                                            </dd>
                                            <dd data-discount_type_id="1" @class(["discount-detail", "hidden" => $productOption->discount_type_id != 1])>
                                                <input class="discount_type_detail_value_1" type="date" name="discount_type_detail_value_1" value="{{ $productOption->discount_type_id == 1 ? $productOption->discount_type_detail_value_1 : '' }}">
                                                <span class="btw-bullet">-</span>
                                                <input class="discount_type_detail_value_2" type="date" name="discount_type_detail_value_2" value="{{ $productOption->discount_type_id == 1 ? $productOption->discount_type_detail_value_2 : '' }}">
                                            </dd>
                                            <dd data-discount_type_id="2" @class(["discount-detail", "hidden" => $productOption->discount_type_id != 2])>
                                                <select class="discount_type_detail_value_1" name="discount_type_detail_value_1">
                                                    <option value="">선택</option>
                                                    @foreach ($discountTypeDetails[2] as $discountTypeDetail)
                                                    <option data-value="{{ $discountTypeDetail->value }}" value="{{ $discountTypeDetail->id }}" @selected($productOption->discount_type_id == 2 && $productOption->discount_type_detail_value_1 == $discountTypeDetail->id)>{{ $discountTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                                <span class="btw-bullet">-</span>
                                                <select class="discount_type_detail_value_2" name="discount_type_detail_value_2">
                                                    <option value="">선택</option>
                                                    @foreach ($discountTypeDetails[2] as $discountTypeDetail)
                                                    <option data-value="{{ $discountTypeDetail->value }}" value="{{ $discountTypeDetail->id }}" @selected($productOption->discount_type_id == 2 && $productOption->discount_type_detail_value_2 == $discountTypeDetail->id)>{{ $discountTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                            <dd data-discount_type_id="3" @class(["discount-detail", "hidden" => $productOption->discount_type_id != 3])>
                                                <select class="discount_type_detail_value_1" name="discount_type_detail_value_1">
                                                    <option value="">선택</option>
                                                    @foreach ($discountTypeDetails[3] as $discountTypeDetail)
                                                    <option data-value="{{ $discountTypeDetail->value }}" value="{{ $discountTypeDetail->id }}" @selected($productOption->discount_type_id == 3 && $productOption->discount_type_detail_value_1 == $discountTypeDetail->id)>{{ $discountTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                                <span class="btw-bullet">-</span>
                                                <select class="discount_type_detail_value_2" name="discount_type_detail_value_2">
                                                    <option value="">선택</option>
                                                    @foreach ($discountTypeDetails[3] as $discountTypeDetail)
                                                    <option data-value="{{ $discountTypeDetail->value }}" value="{{ $discountTypeDetail->id }}" @selected($productOption->discount_type_id == 3 && $productOption->discount_type_detail_value_2 == $discountTypeDetail->id)>{{ $discountTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                            <dd data-discount_type_id="4" @class(["discount-detail", "hidden" => $productOption->discount_type_id != 4])>
                                                <input class="discount_type_detail_value_1" type="date" name="discount_type_detail_value_1" value="{{ $productOption->discount_type_id == 4 ? $productOption->discount_type_detail_value_1 : '' }}">
                                                <span class="btw-bullet">-</span>
                                                <input class="discount_type_detail_value_2" type="date" name="discount_type_detail_value_2" value="{{ $productOption->discount_type_id == 4 ? $productOption->discount_type_detail_value_2 : '' }}">
                                            </dd>
                                            <dd class="validation-wrap"><p></p></dd>
                                        </div>
                                    </dl>
                                </td>
                                <td>
                                    <dl>
                                        <input type="text" class="discount_price" name="discount_price" value="{{ $productOption->discount_price }}">
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="13">No data</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div>
    <!-- end row -->
</div>
@endsection

@push("script")
<script>
    const PRODUCT_OPTIONS = {{ Js::from($productOptions->groupBy("id")->all()) }}
    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)) }},
    };
    const prdouctCategorySelectId = "categories";
    let productCategoryTomSelect = null;

    window.addEventListener("load", () => {
        productCategoryTomSelect = initProductCategoryTomSelect(`#${prdouctCategorySelectId}`);
        changeServiceId({target: document.getElementById("service_id")});
    });

    async function handleSubmit() {
        const isVerified = validate();
        if (!isVerified)
            return;

        if (!(await alertifyAsync("알림", "설정 내용을 일괄 저장하시겠습니까?<br>기존의 판매가/할인가가 업데이트 처리 됩니다.")))
            return;

        const BODY = getRequestBody();
        const URL = route('api.product.product-options-set');
        const callback = response => response?.data == 1 ? location.reload() : errorUI("오류가 발생했습니다.");
        edmAjax({
            method: "post",
            url: URL,
            data: BODY,
            callback: callback,
        });
    }

    function validate() {
        document.querySelectorAll("dd.validation-wrap").forEach((item) => item.style.display = "none");

        let $validationWrap = null;
        const $allCheckboxes = Array.from(document.querySelectorAll("tr.product-option input[name='check']"));
        const $checkedCheckboxes = $allCheckboxes.filter(item => item.checked == true);
        const $uncheckedCheckboxes = $allCheckboxes.filter(item => item.checked == false);

        // 일괄 적용 Validation
        if ($checkedCheckboxes.length > 0) {
            let $tmpWrap = null;
            const $newProductOption = document.querySelector("tr.new-product-option");

            const $salesPrice = $newProductOption.querySelector("input[name='sales_price']");
            $tmpWrap = validateSalesPrice($salesPrice);
            if (!$validationWrap)
                $validationWrap = $tmpWrap;

            const $discountTypeId = $newProductOption.querySelector("select[name='discount_type_id']");
            $tmpWrap = validateDiscountOptions($discountTypeId);
            if (!$validationWrap)
                $validationWrap = $tmpWrap;
        }

        // 개별 항목 Validation
        $uncheckedCheckboxes.forEach($checkbox => {
            let $tmpWrap = null;
            const $productOption = $checkbox.closest("tr");

            const $salesPrice = $productOption.querySelector("input[name='sales_price']");
            $tmpWrap = validateSalesPrice($salesPrice);
            if (!$validationWrap)
                $validationWrap = $tmpWrap;

            const $discountTypeId = $productOption.querySelector("select[name='discount_type_id']");
            $tmpWrap = validateDiscountOptions($discountTypeId);
            if (!$validationWrap)
                $validationWrap = $tmpWrap;
        });

        if ($validationWrap)
            return false;
        else
            return true;
    }

    function validateSalesPrice($salesPrice) {
        let $validationWrap = null;

        const salesPrice = Number($salesPrice.value);
        if (!salesPrice)
            $validationWrap = displayValidationForm($salesPrice, "입력된 내용이 없습니다.");
        else if (salesPrice < 1000)
            $validationWrap = displayValidationForm($salesPrice, "판매가는 1,000원 이상만 입력 가능합니다.");

        return $validationWrap;
    }

    function validateDiscountOptions($discountTypeId) {
        let $validationWrap = null;

        const discountTypeId = $discountTypeId.value ?? 0;
        if (discountTypeId) {
            const $parentWrapper = $discountTypeId.closest("tr");

            // 할인가
            const $discountPrice = $parentWrapper.querySelector("input[name='discount_price']");
            const discountPrice = Number($discountPrice.value);
            if (!discountPrice)
                $validationWrap = displayValidationForm($discountPrice, "할인이 적용된 경우 할인가 입력은 필수 입니다.");
            else if (discountPrice < 1000)
                $validationWrap = displayValidationForm($discountPrice, "할인가는 1,000원 이상만 입력 가능합니다.");

            const $discountTypeDetailWrapper = $parentWrapper.querySelector(`dd[data-discount_type_id='${discountTypeId}']`);
            // 기간 지정
            if (discountTypeId == 1 || discountTypeId == 4) {
                const $value1 = $discountTypeDetailWrapper.querySelector("input[name='discount_type_detail_value_1']");
                const $value2 = $discountTypeDetailWrapper.querySelector("input[name='discount_type_detail_value_2']");

                if (!$value1.value || !$value2.value)
                    $validationWrap = displayValidationForm($value1, "입력된 내용이 없습니다.");
                else {
                    const startDate = new Date($value1.value);
                    const endDate = new Date($value2.value);

                    if (startDate.getTime() >= endDate.getTime())
                        $validationWrap = displayValidationForm($value1, "할인 종료일이 시작일보다 빠릅니다.");
                }
            }
            // 얼리버드 할인
            else if (discountTypeId == 2) {
                const $value1 = $discountTypeDetailWrapper.querySelector("select[name='discount_type_detail_value_1']");
                const $value2 = $discountTypeDetailWrapper.querySelector("select[name='discount_type_detail_value_2']");

                if (!$value1.value || !$value2.value)
                    $validationWrap = displayValidationForm($value1, "입력된 내용이 없습니다.");
                else if (Number($value1.options[$value1.selectedIndex].dataset.value) <= Number($value2.options[$value2.selectedIndex].dataset.value))
                    $validationWrap = displayValidationForm($value1, "할인 종료일이 시작일보다 빠릅니다.");
            }
            // 매월 반복
            else if (discountTypeId == 3) {
                const $value1 = $discountTypeDetailWrapper.querySelector("select[name='discount_type_detail_value_1']");
                const $value2 = $discountTypeDetailWrapper.querySelector("select[name='discount_type_detail_value_2']");

                if (!$value1.value || !$value2.value)
                    $validationWrap = displayValidationForm($value1, "입력된 내용이 없습니다.");
                else if (Number($value1.options[$value1.selectedIndex].dataset.value) >= Number($value2.options[$value2.selectedIndex].dataset.value))
                    $validationWrap = displayValidationForm($value1, "할인 종료일이 시작일보다 빠릅니다.");
            }
        }

        return $validationWrap;
    }

    function getRequestBody() {
        const $allCheckboxes = Array.from(document.querySelectorAll("tr.product-option input[name='check']"));

        const BODY = [];
        const $uncheckedProductOptions = $allCheckboxes.filter(item => item.checked == false).map(item => item.closest("tr"));
        $uncheckedProductOptions.forEach($productOption => {
            const productOption = getProductOptionObject($productOption);
            BODY.push(productOption);
        });

        const $newProductOption = document.querySelector("tr.new-product-option");
        const newProductOption = getProductOptionObject($newProductOption);

        const $checkedProductOptions = $allCheckboxes.filter(item => item.checked == true).map(item => item.closest("tr"));
        $checkedProductOptions.forEach($productOption => {
            const productOption = getProductOptionObject($productOption);
            if (newProductOption.consumer_price)
                productOption.consumer_price = newProductOption.consumer_price;
            if (newProductOption.sales_price)
                productOption.sales_price = newProductOption.sales_price;
            if (newProductOption.discount_price)
                productOption.discount_price = newProductOption.discount_price;

            productOption.discount_type_id = newProductOption.discount_type_id;
            productOption.discount_type_detail_value_1 = newProductOption.discount_type_detail_value_1;
            productOption.discount_type_detail_value_2 = newProductOption.discount_type_detail_value_2;

            BODY.push(productOption);
        });

        return BODY;
    }

    function getProductOptionObject($productOption) {
        const id = $productOption.dataset.id;
        const consumerPrice = $productOption.querySelector(".consumer_price")?.value ?? null;
        const salesPrice = $productOption.querySelector(".sales_price")?.value ?? null;
        const discountTypeId = $productOption.querySelector(".discount_type_id")?.value ? $productOption.querySelector(".discount_type_id")?.value : 0;
        const discountTypeDetailValue1 = $productOption.querySelector(`dd[data-discount_type_id='${discountTypeId}']`).querySelector(".discount_type_detail_value_1").value;
        const discountTypeDetailValue2 = $productOption.querySelector(`dd[data-discount_type_id='${discountTypeId}']`).querySelector(".discount_type_detail_value_2").value;
        const discountPrice = $productOption.querySelector(".discount_price")?.value ?? null;

        const productOption = {
            id: id,
            consumer_price: consumerPrice,
            sales_price: salesPrice,
            discount_type_id: discountTypeId ? discountTypeId : null,
            discount_type_detail_value_1: discountTypeDetailValue1 ? discountTypeDetailValue1 : null,
            discount_type_detail_value_2: discountTypeDetailValue2 ? discountTypeDetailValue2 : null,
            discount_price: discountPrice,
        };

        return productOption;
    }

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

    function changeAllSelect(e) {
        document.querySelectorAll("tr.product-option input[name='check']").forEach(item => item.checked = e.target.checked);
    }

    function changeSelect(e) {
        let isAllSelected = true;
        document.querySelectorAll("tr.product-option input[name='check']").forEach(item => item.checked == false ? isAllSelected = false : 1);

        const $allSelectCheckbox = document.querySelector("input.all-select");
        if (isAllSelected)
            $allSelectCheckbox.checked = true;
        else
            $allSelectCheckbox.checked = false;
    }

    function changeServiceId(e) {
        const serviceId = e.target.value;

        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();
    }

    function discountTypeChange(event) {
        let $elem = event.target;
        const $parentDiv = $elem.closest("td");
        $parentDiv.querySelectorAll("dd.discount-detail").forEach($element => $element.classList.add("hidden"));

        if ($elem.value)
            $parentDiv.querySelector(`dd[data-discount_type_id='${$elem.value}']`).classList.remove("hidden");
        else
            $parentDiv.querySelector("dd[data-discount_type_id='0']").classList.remove("hidden");
    }
</script>
@endpush