@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.activation-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 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="sales_type">상품 구분</label>
                                <select name="sales_type" id="sales_type">
                                    <option value="" >전체</option>
                                    <option value="판매" @selected(Request::get("sales_type", null) == "판매")>판매</option>
                                    <option value="지급" @selected(Request::get("sales_type", null) == "지급")>지급</option>
                                </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="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="name">상품명</label>
                                <input type="text" name="name" id="name" autocomplete='on' value="{{ Request::get("name", null) }}">
                            </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">
                                <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">
                                <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">{{ $products->total() }}</strong>건</span>
                        </div>
                        <div class="pagination-helper">
                            <div class="pagination-wrapper">
                                {{ $products->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.activation-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>
                                    최저 옵션가
                                    <div class="info">
                                        <i class="ico-info">i</i>
                                         <div class="tooltip-con">
                                            옵션가중 가장 낮은 판매가 또는 할인가가 노출됩니다.
                                        </div>
                                    </div>
                                </th>
                                <th class="editable">접수 상태</th>
                                <th class="editable">오픈 예약</th>
                                <th class="editable">마감 예약</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            <tr class="new-product">
                                <td class="table-alert" colspan="10">
                                    <p>
                                        일괄 적용할 값을 선택 및 입력 후 적용할 옵션들을 목록에서 체크하여 상단의 적용 버튼 선택 시 일괄 적용 가능합니다.<br>
                                        목록에는 전시 / 판매 상품만 노출됩니다.
                                    </p>
                                </td>
                                <td>
                                    <select class="is_accepted" name="is_accepted">
                                        <option value="1">오픈</option>
                                        <option value="0">마감</option>
                                    </select>
                                </td>
                                <td>
                                    <dl class="sale-table-select cont1 reservation-wrapper" style="display: block;">
                                        <div style="display: flex; gap: 10px;">
                                            <dt>
                                                <select class="accepted_reservation_type_id reservation-select" name="accepted_reservation_type_id" onchange="changeReservationType(event)">
                                                    <option value="">없음</option>
                                                    @foreach ($productReservationTypes as $productReservationType)
                                                    <option value="{{ $productReservationType->id }}">{{ $productReservationType->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dt>
                                            <!-- 없음 -->

                                            <dd class="reservation-detail" data-accepted_reservation_type_id="0">
                                                <input class="accepted_reservation_value" type="text" name="accepted_reservation_value" value="" disabled>
                                            </dd>
                                            <dd class="reservation-detail hidden" data-accepted_reservation_type_id="1">
                                                <input class="reservation-value accepted_reservation_value" type="date" name="accepted_reservation_value" value="">
                                            </dd>
                                            <dd class="reservation-detail hidden" data-accepted_reservation_type_id="2">
                                                <select class="reservation-value accepted_reservation_value" name="accepted_reservation_value" class="w132">
                                                    <option value="">선택</option>
                                                    @foreach ($productReservationTypeDetails[2] as $productReservationTypeDetail)
                                                    <option data-value="{{ $productReservationTypeDetail->value }}" value="{{ $productReservationTypeDetail->id }}">{{ $productReservationTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                            <dd class="reservation-detail hidden" data-accepted_reservation_type_id="3">
                                                <select class="reservation-value accepted_reservation_value" name="accepted_reservation_value">
                                                    <option value="">선택</option>
                                                    @foreach ($productReservationTypeDetails[3] as $productReservationTypeDetail)
                                                    <option data-value="{{ $productReservationTypeDetail->value }}" value="{{ $productReservationTypeDetail->id }}">{{ $productReservationTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                            <dd class="reservation-detail hidden" data-accepted_reservation_type_id="4">
                                                <input class="reservation-value accepted_reservation_value" name="accepted_reservation_value" type="number" class="w80px" value="" onkeyup="changeReservationTypeValue(event)">명 미만
                                            </dd>
                                        </div>
                                        <div>
                                            <dd class="validation-wrap"><p></p></dd>
                                        </div>
                                    </dl>
                                </td>
                                <td>
                                    <dl class="sale-table-select cont1 reservation-wrapper" style="display: block;">
                                        <div style="display: flex; gap: 10px;">
                                            <dt>
                                                <select class="rejected_reservation_type_id reservation-select" name="rejected_reservation_type_id" onchange="changeReservationType(event)">
                                                    <option value="">없음</option>
                                                    @foreach ($productReservationTypes as $productReservationType)
                                                    <option value="{{ $productReservationType->id }}">{{ $productReservationType->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dt>
                                            <!-- 없음 -->

                                            <dd class="reservation-detail" data-rejected_reservation_type_id="0">
                                                <input class="rejected_reservation_value" type="text" name="rejected_reservation_value" value="" disabled>
                                            </dd>
                                            <dd class="reservation-detail hidden" data-rejected_reservation_type_id="1">
                                                <input class="reservation-value rejected_reservation_value" type="date" name="rejected_reservation_value" value="">
                                            </dd>
                                            <dd class="reservation-detail hidden" data-rejected_reservation_type_id="2">
                                                <select class="reservation-value rejected_reservation_value" name="rejected_reservation_value" class="w132">
                                                    <option value="">선택</option>
                                                    @foreach ($productReservationTypeDetails[2] as $productReservationTypeDetail)
                                                    <option data-value="{{ $productReservationTypeDetail->value }}" value="{{ $productReservationTypeDetail->id }}">{{ $productReservationTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                            <dd class="reservation-detail hidden" data-rejected_reservation_type_id="3">
                                                <select class="reservation-value rejected_reservation_value" name="rejected_reservation_value">
                                                    <option value="">선택</option>
                                                    @foreach ($productReservationTypeDetails[3] as $productReservationTypeDetail)
                                                    <option data-value="{{ $productReservationTypeDetail->value }}" value="{{ $productReservationTypeDetail->id }}">{{ $productReservationTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                            <dd class="reservation-detail hidden" data-rejected_reservation_type_id="4">
                                                <input class="reservation-value rejected_reservation_value" name="rejected_reservation_value" type="number" class="w80px" value="" disabled>명 이상
                                            </dd>
                                        </div>
                                        <div>
                                            <dd class="validation-wrap"><p></p></dd>
                                        </div>
                                    </dl>
                                </td>
                            </tr>
                            @forelse ($products as $product)
                            <tr class="product" data-id="{{ $product->id }}">
                                <td class="check-wrap"><input name="check" type="checkbox" onchange="changeSelect(event)"></td>
                                <td>{{ $product->id }}</td>
                                <td>
                                    @if (isset($product->created_at))
                                    {{ explode(" ", $product->created_at)[0] }} <br>
                                    {{ explode(" ", $product->created_at)[1] }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>{{ $product->sales_type }}</td>
                                <td>{{ $product->module->name }}</td>
                                <td>{{ $product->productCategories?->implode("name", ", ") ?? "-" }}</td>
                                <td class="text-left">
                                    <a href="{{ route('product.detail', ['service' => App\Domains\Product\Infrastructure\Model\Service::getNameById($product->service_id, true), 'id' => $product->id]) }}"  target="_blank">
                                        {{ $product->name }}
                                    </a>
                                </td>
                                <td>포함</td>
                                <td>{{ !empty($product->productOptions->firstWhere("is_discounted", 1)) ? "포함" : "-" }}</td>
                                @php
                                $tmpOption = $product->productOptions->sortBy(fn ($option, $key) => $option->is_discounted ? $option->discount_price : $option->sales_price)->first();
                                @endphp
                                <td>{{ $tmpOption->is_discounted ? $tmpOption->discount_price : $tmpOption->sales_price }}</td>
                                <td>
                                    <select class="is_accepted" name="is_accepted">
                                        <option value="1" @selected($product->is_accepted == 1)>오픈</option>
                                        <option value="0" @selected($product->is_accepted != 1)>마감</option>
                                    </select>
                                </td>
                                <td>
                                    <dl class="sale-table-select cont1 reservation-wrapper" style="display: block;">
                                        <div style="display: flex; gap: 10px;">
                                            <dt>
                                                <select class="accepted_reservation_type_id reservation-select" name="accepted_reservation_type_id" onchange="changeReservationType(event)">
                                                    <option value="">없음</option>
                                                    @foreach ($productReservationTypes as $productReservationType)
                                                    <option value="{{ $productReservationType->id }}" @selected($product->accepted_reservation_type_id == $productReservationType->id)>{{ $productReservationType->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dt>

                                            <dd data-accepted_reservation_type_id="0" @class(['reservation-detail', 'hidden' => $product->accepted_reservation_type_id != null])>
                                                <input class="accepted_reservation_value" type="text" name="accepted_reservation_value" value="" disabled>
                                            </dd>
                                            <dd data-accepted_reservation_type_id="1" @class(['reservation-detail', 'hidden' => $product->accepted_reservation_type_id != 1])>
                                                <input class="reservation-value accepted_reservation_value" type="date" name="accepted_reservation_value" value="{{ $product->accepted_reservation_type_id == 1 ? $product->accepted_reservation_value : '' }}">
                                            </dd>
                                            <dd data-accepted_reservation_type_id="2" @class(['reservation-detail', 'hidden' => $product->accepted_reservation_type_id != 2])>
                                                <select class="reservation-value accepted_reservation_value" name="accepted_reservation_value" class="w132">
                                                    <option value="">선택</option>
                                                    @foreach ($productReservationTypeDetails[2] as $productReservationTypeDetail)
                                                    <option data-value="{{ $productReservationTypeDetail->value }}" value="{{ $productReservationTypeDetail->id }}"
                                                    @selected($product->accepted_reservation_type_id == 2 && $product->accepted_reservation_value == $productReservationTypeDetail->id)
                                                    >{{ $productReservationTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                            <dd data-accepted_reservation_type_id="3" @class(['reservation-detail', 'hidden' => $product->accepted_reservation_type_id != 3])>
                                                <select class="reservation-value accepted_reservation_value" name="accepted_reservation_value">
                                                    <option value="">선택</option>
                                                    @foreach ($productReservationTypeDetails[3] as $productReservationTypeDetail)
                                                    <option data-value="{{ $productReservationTypeDetail->value }}" value="{{ $productReservationTypeDetail->id }}"
                                                    @selected($product->accepted_reservation_type_id == 3 && $product->accepted_reservation_value == $productReservationTypeDetail->id)
                                                    >{{ $productReservationTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                            <dd data-accepted_reservation_type_id="4" style="white-space: nowrap;" @class(['reservation-detail', 'hidden' => $product->accepted_reservation_type_id != 4])>
                                                <input class="reservation-value accepted_reservation_value" name="accepted_reservation_value" type="number" class="w80px" value="{{ $product->accepted_reservation_type_id == 4 ? $product->accepted_reservation_value : '' }}" onkeyup="changeReservationTypeValue(event)">명 미만
                                            </dd>
                                        </div>
                                        <div>
                                            <dd class="validation-wrap"><p></p></dd>
                                        </div>
                                    </dl>
                                </td>
                                <td>
                                    <dl class="sale-table-select cont1 reservation-wrapper" style="display: block;">
                                        <div style="display: flex; gap: 10px;">
                                            <dt>
                                                <select class="rejected_reservation_type_id reservation-select" name="rejected_reservation_type_id" onchange="changeReservationType(event)">
                                                    <option value="">없음</option>
                                                    @foreach ($productReservationTypes as $productReservationType)
                                                    <option value="{{ $productReservationType->id }}" @selected($product->rejected_reservation_type_id == $productReservationType->id)>{{ $productReservationType->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dt>

                                            <dd data-rejected_reservation_type_id="0" @class(['reservation-detail', 'hidden' => $product->rejected_reservation_type_id != null])>
                                                <input class="rejected_reservation_value" type="text" name="rejected_reservation_value" value="" disabled>
                                            </dd>
                                            <dd data-rejected_reservation_type_id="1" @class(['reservation-detail', 'hidden' => $product->rejected_reservation_type_id != 1])>
                                                <input class="reservation-value rejected_reservation_value" type="date" name="rejected_reservation_value" value="{{ $product->rejected_reservation_type_id == 1 ? $product->rejected_reservation_value : '' }}">
                                            </dd>
                                            <dd data-rejected_reservation_type_id="2" @class(['reservation-detail', 'hidden' => $product->rejected_reservation_type_id != 2])>
                                                <select class="reservation-value rejected_reservation_value" name="rejected_reservation_value" class="w132">
                                                    <option value="">선택</option>
                                                    @foreach ($productReservationTypeDetails[2] as $productReservationTypeDetail)
                                                    <option data-value="{{ $productReservationTypeDetail->value }}" value="{{ $productReservationTypeDetail->id }}"
                                                    @selected($product->rejected_reservation_type_id == 2 && $product->rejected_reservation_value == $productReservationTypeDetail->id)
                                                    >{{ $productReservationTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                            <dd data-rejected_reservation_type_id="3" @class(['reservation-detail', 'hidden' => $product->rejected_reservation_type_id != 3])>
                                                <select class="reservation-value rejected_reservation_value" name="rejected_reservation_value">
                                                    <option value="">선택</option>
                                                    @foreach ($productReservationTypeDetails[3] as $productReservationTypeDetail)
                                                    <option data-value="{{ $productReservationTypeDetail->value }}" value="{{ $productReservationTypeDetail->id }}"
                                                    @selected($product->rejected_reservation_type_id == 3 && $product->rejected_reservation_value == $productReservationTypeDetail->id)
                                                    >{{ $productReservationTypeDetail->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                            <dd data-rejected_reservation_type_id="4" style="white-space: nowrap;" @class(['reservation-detail', 'hidden' => $product->rejected_reservation_type_id != 4])>
                                                <input class="reservation-value rejected_reservation_value" name="rejected_reservation_value" type="number" class="w80px" value="{{ $product->rejected_reservation_type_id == 4 ? $product->rejected_reservation_value : '' }}" onkeyup="changeReservationTypeValue(event)" disabled>명 미만
                                            </dd>
                                        </div>
                                        <div>
                                            <dd class="validation-wrap"><p></p></dd>
                                        </div>
                                    </dl>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="13">No data</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                    <dd class="validation-wrap"><p></p></dd>
                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div>
    <!-- end row -->
</div>
@endsection

@push("script")
<script>
    const PRODUCTS = {{ Js::from($products->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")});
    });

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

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

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

        const BODY = getRequestBody();
        const URL = route('api.product.products-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 input[name='check']"));
        const $checkedCheckboxes = $allCheckboxes.filter(item => item.checked == true);
        const $uncheckedCheckboxes = $allCheckboxes.filter(item => item.checked == false);

        // 일괄 적용 Validation
        if ($checkedCheckboxes.length > 0) {
            const $newProduct = document.querySelector("tr.new-product");
            const $acceptedReservationType = $newProduct.querySelector("select[name='accepted_reservation_type_id']");
            const $rejectedReservationType = $newProduct.querySelector("select[name='rejected_reservation_type_id']");

            $validationWrap = validateSingleReservation($acceptedReservationType, $acceptedReservationType);
            if (!$validationWrap)
                $validationWrap = validateSingleReservation($rejectedReservationType, $rejectedReservationType);

            if (!$validationWrap) {
                if ($acceptedReservationType.value && $rejectedReservationType.value)
                    $validationWrap = validateDoubleReservation($acceptedReservationType, $rejectedReservationType, $acceptedReservationType);
            }
        }

        // 개별 항목 Validation
        $uncheckedCheckboxes.forEach($checkbox => {
            let $tmpWrap = null;
            const $product = $checkbox.closest("tr");
            const $acceptedReservationType = $product.querySelector("select[name='accepted_reservation_type_id']");
            const $rejectedReservationType = $product.querySelector("select[name='rejected_reservation_type_id']");

            $validationWrap = validateSingleReservation($acceptedReservationType, $acceptedReservationType);
            if (!$validationWrap)
                $validationWrap = validateSingleReservation($rejectedReservationType, $rejectedReservationType);

            if (!$validationWrap)
                $validationWrap = validateDoubleReservation($acceptedReservationType, $rejectedReservationType, $acceptedReservationType);
        });

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

    function validateSingleReservation($reservationType, $validationRoot) {
        let $validationWrap = null;
        if ($reservationType?.value) {
            const $parent = $reservationType.closest("dl.reservation-wrapper");
            const typeId = $reservationType.value;
            const typeName = $reservationType.name;
            const valueName = typeName == "accepted_reservation_type_id" ? "accepted_reservation_value" : "rejected_reservation_value";

            const $reservationValueWrapper = $parent.querySelector(`dd[data-${typeName}='${typeId}']`);
            const $reservationValue = $reservationValueWrapper.querySelector('.reservation-value');
            if (!$reservationValue?.value)
                $validationWrap = displayValidationForm($validationRoot, "선택된 항목이 없습니다.");
            else {
                // 날짜 지정
                if ($reservationType.value == 1) {
                    const targetValue = $reservationValue.value;
                    const PRODUCT_ID = $reservationValue.closest("tr")?.dataset?.id;
                    let compareValue = null;
                    if (PRODUCT_ID)
                        compareValue = valueName == "accepted_reservation_value" ? PRODUCTS[PRODUCT_ID][0]?.accepted_reservation_value : PRODUCTS[PRODUCT_ID][0]?.rejected_reservation_value

                    if (compareValue != targetValue) {
                        const targetDate = new Date(targetValue);
                        const nowDate = new Date();
                        if (targetDate.getTime() <= nowDate.getTime())
                            $validationWrap = displayValidationForm($validationRoot, "예약은 익일부터 지정 가능합니다.");
                    }
                }
                // 수강생 기준
                else if ($reservationType.value == 4) {
                    if ($reservationValue.value < 1)
                        $validationWrap = displayValidationForm($validationRoot, "0보다 큰 수를 입력해주세요.");
                }
            }
        }

        return $validationWrap;
    }

    function validateDoubleReservation($acceptedReservationType, $rejectedReservationType, $validationRoot) {
        let $validationWrap = null;

        if (!$acceptedReservationType.value || !$rejectedReservationType.value)
            return $validationWrap;

        if ($acceptedReservationType.value != $rejectedReservationType.value)
            $validationWrap = displayValidationForm($validationRoot, "오픈/마감 예약의 종류가 같지 않습니다.");
        else {
            const $acceptedParent = $acceptedReservationType.closest("dl.reservation-wrapper");
            const $acceptedReservationValueWrapper = $acceptedParent.querySelector(`dd[data-${$acceptedReservationType.name}='${$acceptedReservationType.value}']`);
            const $acceptedReservationValue = $acceptedReservationValueWrapper.querySelector('.reservation-value');
            const acceptedReservationValue = $acceptedReservationValueWrapper.querySelector('.reservation-value').value;

            const $rejectedParent = $rejectedReservationType.closest("dl.reservation-wrapper");
            const $rejectedReservationValueWrapper = $rejectedParent.querySelector(`dd[data-${$rejectedReservationType.name}='${$rejectedReservationType.value}']`);
            const $rejectedReservationValue = $rejectedReservationValueWrapper.querySelector('.reservation-value');
            const rejectedReservationValue = $rejectedReservationValueWrapper.querySelector('.reservation-value').value;

            // 날짜 지정
            if ($acceptedReservationType.value == 1) {
                const acceptedDate = new Date(acceptedReservationValue);
                const rejectedDate = new Date(rejectedReservationValue);

                if (acceptedDate.getTime() >= rejectedDate.getTime())
                    $validationWrap = displayValidationForm($validationRoot, "오픈일과 마감일이 중복됩니다.");
            }
            // 날짜 반복
            else if ($acceptedReservationType.value == 2) {
                const $acceptedSelectedOption = $acceptedReservationValue.options[$acceptedReservationValue.selectedIndex];
                const $rejectedSelectedOption = $rejectedReservationValue.options[$rejectedReservationValue.selectedIndex];
                const subValue = $rejectedSelectedOption.dataset.value - $acceptedSelectedOption.dataset.value;
                if (subValue < 2 && subValue > -2)
                    $validationWrap = displayValidationForm($validationRoot, "날짜 반복 마감 예약일은 오픈 예약일보다 최소 2일 이후로만 지정 가능합니다.");
            }
            // 개강일 기준
            else if ($acceptedReservationType.value == 3) {
                const $acceptedSelectedOption = $acceptedReservationValue.options[$acceptedReservationValue.selectedIndex];
                const $rejectedSelectedOption = $rejectedReservationValue.options[$rejectedReservationValue.selectedIndex];
                const subValue = $rejectedSelectedOption.dataset.value - $acceptedSelectedOption.dataset.value;
                if (subValue < 2 && subValue > -2)
                    $validationWrap = displayValidationForm($validationRoot, "오픈일과 마감일이 중복됩니다.");
            }
            // 수강생 기준
            else if ($acceptedReservationType.value == 4) {
                if (acceptedReservationValue != rejectedReservationValue)
                    $validationWrap = displayValidationForm($validationRoot, "두 예약 수강생 수의 값은 같아야합니다.");
            }
        }

        return $validationWrap;
    }

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

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

        const $newProduct = document.querySelector("tr.new-product");
        const newProduct = getProductObject($newProduct);

        const $checkedProductOptions = $allCheckboxes.filter(item => item.checked == true).map(item => item.closest("tr"));
        $checkedProductOptions.forEach($product => {
            const product = getProductObject($product);
            product.is_accepted = newProduct.is_accepted;
            product.accepted_reservation_type_id = newProduct.accepted_reservation_type_id;
            product.accepted_reservation_value = newProduct.accepted_reservation_value;
            product.rejected_reservation_type_id = newProduct.rejected_reservation_type_id;
            product.rejected_reservation_value = newProduct.rejected_reservation_value;

            if (product.accepted_reservation_type_id)
                product.is_reserved_accepted = product.accepted_reservation_type_id != 0 ? 1 : 0;

            if (product.rejected_reservation_type_id)
                product.is_reserved_rejected = product.rejected_reservation_type_id != 0 ? 1 : 0;

            BODY.push(product);
        });

        return BODY;
    }

    function getProductObject($product) {
        const id = $product.dataset.id;
        const isAccepted = $product.querySelector(".is_accepted")?.value ?? 0;

        let acceptedReservationTypeId = $product.querySelector(".accepted_reservation_type_id")?.value ?? null;
        acceptedReservationTypeId = acceptedReservationTypeId == "" ? 0 : acceptedReservationTypeId;
        const acceptedReservationValue = $product.querySelector(`dd[data-accepted_reservation_type_id='${acceptedReservationTypeId}']`)?.querySelector(".accepted_reservation_value").value;

        let rejectedReservationTypeId = $product.querySelector(".rejected_reservation_type_id")?.value ?? null;
        rejectedReservationTypeId = rejectedReservationTypeId == "" ? 0 : rejectedReservationTypeId;
        const rejectedReservationValue = $product.querySelector(`dd[data-rejected_reservation_type_id='${rejectedReservationTypeId}']`)?.querySelector(".rejected_reservation_value").value;

        const isEndDateDisabled = id ? PRODUCTS[id][0].is_end_date_disabled : null;
        const activatedEndDate = id ? PRODUCTS[id][0].activated_end_date : null;

        const product = {
            id: id == undefined || id == ""  ? null : id,
            is_accepted: isAccepted,
            accepted_reservation_type_id: acceptedReservationTypeId,
            accepted_reservation_value: acceptedReservationValue == '' ? null : acceptedReservationValue,
            rejected_reservation_type_id: rejectedReservationTypeId,
            rejected_reservation_value: rejectedReservationValue == '' ? null : rejectedReservationValue,

            is_reserved_accepted: acceptedReservationTypeId != 0 ? 1 : 0,
            is_reserved_rejected: rejectedReservationTypeId != 0 ? 1 : 0,

            is_end_date_disabled: isEndDateDisabled,
            activated_end_date: activatedEndDate,
        };

        return product;
    }

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

    function changeSelect(e) {
        let isAllSelected = true;
        document.querySelectorAll("tr.product 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 changeReservationType(e) {
        const changedValue = e.target.value;
        const $typeSelects = e.target.closest(".reservation-wrapper").querySelectorAll("select.reservation-select");
        $typeSelects.forEach(item => {
            if (item.value != changedValue)
                item.value = changedValue;

            const dataSetName = item.name;
            const $typeSelect = item;
            const $parent = $typeSelect.closest("dl.reservation-wrapper");
            $parent.querySelectorAll("dd.reservation-detail").forEach(item => item.classList.add("hidden"));

            const $target = $parent.querySelector(`dd[data-${dataSetName}='${item.value ? item.value : 0}']`);
            if ($target)
                $target.classList.remove("hidden");
        });
    }

    function changeReservationTypeValue(e) {
        e.target.closest("tr").querySelector('dd[data-rejected_reservation_type_id="4"] input').value = e.target.value;
    }

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

</script>
@endpush