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

@section("header")
@routes("product")
@vite([
    'resources/js/domains/common/toastEditor.js',
    'resources/js/domains/common/toastGrid.js',
    'resources/js/domains/product/gridColumns.js',
    'resources/js/domains/product/composed.js',
    'resources/js/domains/product/component/Product.js',
    'resources/js/domains/product/component/productOption/ProductOption.js',
])

<style>
    input.product-option-discount-price {
        
        background-color: unset !important;
        border: 0;
        font-weight: 500;
    }
    input.product-option-discount-price:focus-visible {
        outline: 0;
    }
    product-option-right-content input[type=number] {
        padding-right: 0;
    }
    dl.discount-type-detail {
        display: none;
    }
</style>
@endsection

@php
    $SERVICE_NAME = $service == "academy" ? "어학원" : "인강";
    $SERVICE_ID = App\Domains\Product\Infrastructure\Model\Service::getIdByName($service);
@endphp
@section("main-content")
    <div class="container-fluid detail" style="padding-bottom: 0.5rem;">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <h1>{{ $SERVICE_NAME }} 상품 등록</h1>
                    <ul class="page-wayfinding">
                        <li onclick="window.location.href='{{ route('product.list') }}'">상품 관리</li>
                        <li>{{ $SERVICE_NAME }} 상품
                            @if ($product?->id)
                            상세
                            @else
                            등록
                            @endif
                        </li>
                    </ul>
                    <div class="page-btn-wrap">
                        <button class="button btn-style-2" onclick="window.location.href='{{ route('product.list') }}'">목록</button>
                        @if ($product?->id)
                        <button class="button btn-style-6" onclick="window.open({{ Js::from(route('product.copy', ['service' => $service, 'id' => $product->id])) }}, '_blank')">복제</button>
                        <button class="button btn-style-1" onclick="handleSubmit()">저장</button>
                        @else
                        <button class="button btn-style-1" onclick="handleSubmit()">등록</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->


        <form id="productForm" class="set-user-form" >
            <input id="id" name="id" type="hidden" value="{{ $product?->id ?? '' }}">
            <input id="service_id" name="service_id" type="hidden" value="{{ $SERVICE_ID }}">
            <div class="row detail-con-wrap3">
                <div class="detail-con card">
                    <div class="card-body">
                        <div class="flex-box">
                            <div class="w100">
                                <h2 class="detail-title">상품 구분</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt>상품 번호</dt>
                                        <dd><span>{{ $product?->id ?? '-' }}</span></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">상품 구분</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="salesType1" name="sales_type" class="form-check-input" value="판매" @checked(!$product || $product->sales_type == "판매") onchange="changeSalesType()">
                                                <label class="form-check-label" for="salesType1">판매</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="salesType2" name="sales_type" class="form-check-input" value="지급" @checked($product?->sales_type == "지급") onchange="changeSalesType()">
                                                <label class="form-check-label" for="salesType2">지급</label>
                                            </div>
                                            <div>
                                                <select name="product_type_id" id="product_type_id" @disabled(!$product || $product->sales_type == "판매")>
                                                    <option value="">선택</option>
                                                    @foreach ($productTypes as $productType)
                                                    <option value="{{ $productType->id }}" @selected($product?->product_type_id == $productType->id)>{{ $productType->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">모듈</dt>
                                        <dd>
                                            @foreach ($modules as $key => $module)
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="moduleId{{ $key }}" name="module_id" class="form-check-input" value="{{ $module->id }}" @checked($product?->module_id == $module->id)>
                                                <label class="form-check-label" for="moduleId{{ $key }}">{{ $module->name }}</label>
                                            </div>
                                            @endforeach
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>

                                    <dl class="input-wrapper">
                                        <dt class="req">
                                            목표 점수
                                            <div class="info">
                                                <i class="ico-info">i</i>
                                                <div class="tooltip-con">
                                                    수강 전 학생들의 점수입니다.
                                                </div>
                                            </div>
                                        </dt>
                                        <dd>
                                            <select name="goal_score" id="goal_score">
                                                <option value="">선택</option>
                                                @foreach ($goals as $goal)
                                                <option value="{{ $goal }}" @selected($product?->goal_score == $goal)>{{ $goal }}</option>
                                                @endforeach
                                            </select>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">
                                            대상 점수
                                            <div class="info">
                                                <i class="ico-info">i</i>
                                                <div class="tooltip-con">
                                                    수강 후 학생들의 목표 점수입니다.
                                                </div>
                                            </div>
                                        </dt>
                                        <dd>
                                            <select name="target_score" id="target_score">
                                                <option value="">선택</option>
                                                @foreach ($goals as $goal)
                                                <option value="{{ $goal }}" @selected($product?->target_score == $goal)>{{ $goal }}</option>
                                                @endforeach
                                            </select>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                </div>
                                <h2 class="detail-title">상품 정보</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt class="req">상품명</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <input type="text" maxlength="30" class="form-control" id="name" name="name" placeholder="최대 30자까지 입력 가능합니다." value="{{ $product?->name }}">
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>간략 소개</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <input type="text" class="form-control" id="description" name="description" placeholder="" value="{{ $product?->description }}">
                                            </div>
                                        </dd>
                                    </dl>
                                    @if ($SERVICE_ID == 1)
                                    <dl class="input-wrapper">
                                        <dt>수강 대상</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <textarea name="target" id="target" cols="30" rows="10">{{ $product?->target }}</textarea>
                                            </div>
                                        </dd>
                                    </dl>
                                    @endif
                                    <dl class="input-wrapper">
                                        <dt>수강생 혜택</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <div id="benefit-editor"></div>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="detail-con card">
                    <div class="card-body">
                        <div class="flex-box">
                            <div class="w100">
                                <h2 class="detail-title">전시 구분</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt class="req">전시 구분</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="activated0" name="activated" class="form-check-input" value="1" @checked(!$product || $product->activated == 1)>
                                                <label class="form-check-label" for="activated0">전시</label>
                                            </div>
                                            <div class="flex-box">
                                                <input type="date" id="activated_start_date" name="activated_start_date" value="{{ explode(" ", $product?->activated_start_date ?? " ")[0] }}">
                                                <span class="btw-bullet">-</span>
                                                <input type="date" id="activated_end_date" name="activated_end_date" value="{{ explode(" ", $product?->activated_end_date ?? " ")[0] }}" @disabled(!$product || !(!$product->is_end_date_disabled))>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="checkbox" id="is_end_date_disabled" name="is_end_date_disabled" class="form-check-input" value="1" @checked(!$product || $product->is_end_date_disabled) onchange="changeActivatedStatus()">
                                                <label class="form-check-label" for="is_end_date_disabled">종료일 없음</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="activated1" name="activated" class="form-check-input" value="0" @checked($product?->activated === 0)>
                                                <label class="form-check-label" for="activated1">
                                                    비전시
                                                    @if ($product?->activated === 0 && $product?->deactivated_at)
                                                        ({{ explode(" ", $product->deactivated_at)[0] }})
                                                    @endif
                                                    <div class="info">
                                                        <i class="ico-info">i</i>
                                                        <div class="tooltip-con">
                                                        비전시 처리 시 사용자 사이트에서 보이지 않으며 이미 구매 처리된 고객의 상품에는 영향을 주지 않습니다.
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">접수 상태</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="isAccepted0" name="is_accepted" class="form-check-input" value="1" @checked(!$product || $product->is_accepted == 1)>
                                                <label class="form-check-label" for="isAccepted0">오픈</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="isAccepted1" name="is_accepted" class="form-check-input" value="0" @checked($product?->is_accepted === 0)>
                                                <label class="form-check-label" for="isAccepted1">
                                                    마감
                                                    <div class="info">
                                                        <i class="ico-info">i</i>
                                                        <div class="tooltip-con">
                                                            @if ($SERVICE_ID == 1)
                                                            상품을 품절 처리 합니다.
                                                            @elseif ($SERVICE_ID == 2)
                                                            마감 선택 시 사용자 사이트에서 결제 불가 상태가 되며 노출 여부에는 변함이 없습니다.
                                                            @endif
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>

                                    @if ($SERVICE_ID == 1)
                                    <dl class="input-wrapper">
                                        <dt class="req">환급 여부</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="is_refund_possible0" name="is_refund_possible" class="form-check-input" value="0" @checked(!$product || $product->is_refund_possible === 0)>
                                                <label class="form-check-label" for="is_refund_possible0">불가</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="is_refund_possible1" name="is_refund_possible" class="form-check-input" value="1" @checked($product && $product->is_refund_possible == 1)>
                                                <label class="form-check-label" for="is_refund_possible1">
                                                    가능
                                                    <div class="info">
                                                        <i class="ico-info">i</i>
                                                        <div class="tooltip-con">
                                                            가능 선택 시 사용자 사이트에서 환급 신청 가능합니다.
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">휴강 여부</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="is_recess_possible0" name="is_recess_possible" class="form-check-input" value="0" @checked($product && $product->is_recess_possible === 0)>
                                                <label class="form-check-label" for="is_recess_possible0">불가</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="is_recess_possible1" name="is_recess_possible" class="form-check-input" value="1" @checked(!$product || $product->is_recess_possible == 1)>
                                                <label class="form-check-label" for="is_recess_possible1">
                                                    가능
                                                    <div class="info">
                                                        <i class="ico-info">i</i>
                                                        <div class="tooltip-con">
                                                            [휴강조건]<br>
                                                            -수강기간 중 1회 최대 30일까지 신청 가능 (휴강불가 상품 제외 모든 상품은 1회 신청 가능)<br>
                                                            *휴강불가 상품 목록<br>
                                                            -입문 200% 페이백 (아카데믹/제너럴)<br>
                                                            -실전 200% 페이백 (아카데믹/제너럴)
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">연장 여부</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="is_extension_possible0" name="is_extension_possible" class="form-check-input" value="0" @checked($product && $product->is_extension_possible === 0) onchange="changeExtensionStatus()">
                                                <label class="form-check-label" for="is_extension_possible0">불가</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="is_extension_possible1" name="is_extension_possible" class="form-check-input" value="1" @checked(!$product || $product->is_extension_possible == 1) onchange="changeExtensionStatus()">
                                                <label class="form-check-label" for="is_extension_possible1">가능</label>
                                            </div>
                                            <div class="flex-box">
                                                <select name="extension_option_id" id="extension_option_id" @disabled($product && $product->is_extension_possible != 1)>
                                                    <option value="">선택</option>
                                                    @foreach ($extensionOptions as $extensionOption)
                                                    <option value="{{ $extensionOption->id }}" @selected($product?->id == $extensionOption->id)>{{ $extensionOption->name }}</option>
                                                    @endforeach
                                                </select>
                                                <input type="text" name="extension_value" id="extension_value" value="{{ $product?->extension_value }}" @disabled($product && $product->is_extension_possible != 1)>일
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    @endif

                                    @if ($SERVICE_ID == 2)
                                    <dl class="input-wrapper">
                                        <dt>
                                            접수 예약
                                            <div class="info">
                                                <i class="ico-info">i</i>
                                                <div class="tooltip-con">
                                                    선택한 날짜 기준 오전 12시 오픈/ 익일 오전 12시 마감 처리됩니다.
                                                </div>
                                            </div>
                                        </dt>
                                        <dd>
                                            <div class="reservation-wrapper" style="display: flex;">
                                                <div class="form-check form-check-inline ">
                                                    <input type="checkbox" id="is_reserved_accepted" name="is_reserved_accepted" class="form-check-input" value="1" @checked($product?->is_reserved_accepted == 1) onchange="changeReservationStatus(event)">
                                                    <label class="form-check-label" for="is_reserved_accepted">오픈 예약</label>
                                                </div>
                                                <div class="flex-box">
                                                    <select class="reservation-select" name="accepted_reservation_type_id" id="accepted_reservation_type_id" @disabled(!($product?->is_reserved_accepted))  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>
                                                    <div class="reservation-detail" data-accepted_reservation_type_id="0" @if ($product || isset($product->accepted_reservation_type_id)) hidden @endif>
                                                        <input type="text" name="accepted_reservation_value" value="{{ $product?->accepted_reservation_type_id == 4 ? $product?->accepted_reservation_value : "" }}" disabled>
                                                    </div>
                                                    <div class="reservation-detail" data-accepted_reservation_type_id="1" @if ($product?->accepted_reservation_type_id != 1) hidden @endif>
                                                        <input class="reservation-value" type="date" name="accepted_reservation_value"
                                                        value="{{ $product?->accepted_reservation_type_id == 1 ? explode(' ', $product?->accepted_reservation_value ?? ' ')[0] : "" }}"
                                                        @disabled(!$product || $product->accepted_reservation_type_id != 1)>
                                                    </div>
                                                    <div class="reservation-detail" data-accepted_reservation_type_id="2" @if ($product?->accepted_reservation_type_id != 2) hidden @endif>
                                                        <select class="reservation-value" name="accepted_reservation_value" class="w132"  @disabled(!$product || $product->accepted_reservation_type_id != 2)>
                                                            <option value="">선택</option>
                                                            @foreach ($productReservationTypeDetails[2] as $productReservationTypeDetail)
                                                            <option data-value="{{ $productReservationTypeDetail->value }}" value="{{ $productReservationTypeDetail->id }}"
                                                                @selected($product?->accepted_reservation_type_id == $productReservationTypeDetail->product_reservation_type_id
                                                                && $product?->accepted_reservation_value == $productReservationTypeDetail->id)
                                                            >{{ $productReservationTypeDetail->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="reservation-detail" data-accepted_reservation_type_id="3" @if ($product?->accepted_reservation_type_id != 3) hidden @endif>
                                                        <select class="reservation-value" name="accepted_reservation_value"  @disabled(!$product || $product->accepted_reservation_type_id != 3)>
                                                            <option value="">선택</option>
                                                            @foreach ($productReservationTypeDetails[3] as $productReservationTypeDetail)
                                                            <option data-value="{{ $productReservationTypeDetail->value }}" value="{{ $productReservationTypeDetail->id }}"
                                                                @selected($product?->accepted_reservation_type_id == $productReservationTypeDetail->product_reservation_type_id
                                                                && $product?->accepted_reservation_value == $productReservationTypeDetail->id)
                                                            >{{ $productReservationTypeDetail->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="reservation-detail" data-accepted_reservation_type_id="4" @if ($product?->accepted_reservation_type_id != 4) hidden @endif>
                                                        <input class="reservation-value" name="accepted_reservation_value" type="number" class="w80px"
                                                        value="{{ $product?->accepted_reservation_type_id == 4 ? $product?->accepted_reservation_value : "" }}"
                                                        @disabled(!$product || $product->accepted_reservation_type_id != 4)
                                                        onkeyup="changeReservationTypeValue(event)"
                                                        >명 미만
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="reservation-wrapper" style="display: flex;">
                                                <div class="form-check form-check-inline ">
                                                    <input type="checkbox" id="is_reserved_rejected" name="is_reserved_rejected" class="form-check-input" value="1"
                                                    @checked($product?->is_reserved_rejected == 1)
                                                    onchange="changeReservationStatus(event)">
                                                    <label class="form-check-label" for="is_reserved_rejected">마감 예약</label>
                                                </div>
                                                <div class="flex-box">
                                                    <select class="reservation-select" name="rejected_reservation_type_id" id="rejected_reservation_type_id" @disabled(!($product?->is_reserved_rejected)) 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>
                                                    <div class="reservation-detail" data-rejected_reservation_type_id="0" @if ($product || isset($product->rejected_reservation_type_id)) hidden @endif>
                                                        <input type="text" name="rejected_reservation_value" value="{{ $product?->rejected_reservation_type_id == 4 ? $product?->rejected_reservation_value : "" }}" disabled>
                                                    </div>
                                                    <div class="reservation-detail" data-rejected_reservation_type_id="1" @if ($product?->rejected_reservation_type_id != 1) hidden @endif>
                                                        <input class="reservation-value" type="date" name="rejected_reservation_value"
                                                        value="{{ $product?->rejected_reservation_type_id == 1 ? explode(' ', $product?->rejected_reservation_value ?? ' ')[0] : "" }}"
                                                        @disabled(!$product || $product->rejected_reservation_type_id != 1)>
                                                    </div>
                                                    <div class="reservation-detail" data-rejected_reservation_type_id="2" @if ($product?->rejected_reservation_type_id != 2) hidden @endif>
                                                        <select class="reservation-value" name="rejected_reservation_value" class="w132" @disabled(!$product || $product->rejected_reservation_type_id != 2)>
                                                            <option value="">선택</option>
                                                            @foreach ($productReservationTypeDetails[2] as $productReservationTypeDetail)
                                                            <option data-value="{{ $productReservationTypeDetail->value }}" value="{{ $productReservationTypeDetail->id }}"
                                                                @selected($product?->rejected_reservation_type_id == $productReservationTypeDetail->product_reservation_type_id
                                                                && $product?->rejected_reservation_value == $productReservationTypeDetail->id)
                                                            >{{ $productReservationTypeDetail->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="reservation-detail" data-rejected_reservation_type_id="3" @if ($product?->rejected_reservation_type_id != 3) hidden @endif>
                                                        <select class="reservation-value" name="rejected_reservation_value" @disabled(!$product || $product->rejected_reservation_type_id != 3)>
                                                            <option value="">선택</option>
                                                            @foreach ($productReservationTypeDetails[3] as $productReservationTypeDetail)
                                                            <option data-value="{{ $productReservationTypeDetail->value }}" value="{{ $productReservationTypeDetail->id }}"
                                                                @selected($product?->rejected_reservation_type_id == $productReservationTypeDetail->product_reservation_type_id
                                                                && $product?->rejected_reservation_value == $productReservationTypeDetail->id)
                                                            >{{ $productReservationTypeDetail->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="reservation-detail" data-rejected_reservation_type_id="4" @if ($product?->rejected_reservation_type_id != 4) hidden @endif>
                                                        <input class="reservation-value" name="rejected_reservation_value" type="number" class="w80px"
                                                        value="{{ $product?->rejected_reservation_type_id == 4 ? $product?->rejected_reservation_value : "" }}"
                                                        @disabled(!$product || $product->rejected_reservation_type_id != 4)
                                                        >명 이상
                                                    </div>
                                                </div>
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    @endif

                                    <dl class="input-wrapper">
                                        <dt>
                                            카테고리
                                        </dt>
                                        <dd class="flex-wrap">
                                            @foreach ($productCategories[$SERVICE_ID] as $key => $productCategory)
                                            <div class="form-check form-check-inline">
                                                <input type="checkbox" id="category{{ $key }}" name="categories[]" class="form-check-input" value="{{ $productCategory->id }}" @checked($product?->productCategories->contains($productCategory->id)) onchange="changeCategory(event)">
                                                <label class="form-check-label" for="category{{ $key }}">{{ $productCategory->name }}</label>
                                                @if ($SERVICE_ID == 1 && $productCategory->name == "기타")
                                                <select name="product_sub_category_id" @disabled(!$product?->id || !$product->productCategories->contains($productCategory->id))>
                                                    <option value="">선택</option>
                                                    @foreach ($productSubCategories[$productCategory->id] as $productSubCategory)
                                                    <option value="{{ $productSubCategory->id }}" @selected($product?->product_sub_category_id == $productSubCategory->id)>{{ $productSubCategory->name }}</option>
                                                    @endforeach
                                                </select>
                                                @endif
                                            </div>
                                            @endforeach
                                        </dd>
                                    </dl>
                                </div>
                                <h2 class="detail-title">
                                    <dt class="req">전시 썸네일</dt>
                                    <p class="p-alert">드래그를 통해 순서 변경이 가능하며 첫번째 이미지가 대표 이미지가 됩니다.</p>
                                    <div class="button-wrap">
                                        <button class="button btn-style-1" type="button" onclick="document.getElementById('thumbnail').click()">찾기</button>
                                        <input type="file" id="thumbnail" name="" accept="image/*" style="display: none;" multiple onchange="changeImage(event)"/>
                                    </div>
                                </h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dd class="thumbnail-img-wrap multi">
                                            @foreach ($product?->productThumbnails ?? [] as $productThumbnail)
                                            <div class="thumbnail-img mb-1">
                                                <button class="btn-delete" type="button" onclick="deleteImage(event)">이미지 삭제</button>
                                                <img name="thumbnails[]" data-id="{{ $productThumbnail->id }}" alt="" src="{{ app(\S3Helper::class)->getDownloadPresignedUrl($productThumbnail->s3_key) }}">
                                            </div>
                                            @endforeach
                                        </dd>
                                        <dd class="thumbnail-img-notice">
                                            * 파일 형식 : jpg, jpeg, png / 권장 이미지 사이즈 : 512*344
                                        </dd>
                                        <dd class="validation-wrap" style="margin-left: 0;"><p></p></dd>
                                    </dl>
                                </div>
                                <h2 class="detail-title">
                                    프로모션 플래그
                                </h2>
                                <div class="detail-input">
                                    <input maxlength="10" name="promotion_flag_word" type="text" placeholder="최대 10글자까지 입력 가능" class="long-input" value="{{ $product?->promotion_flag_word }}">
                                    <dl class="flag-color-list">
                                        <dt class="blind">플래그 색상 리스트</dt>
                                        @foreach ($promotionFlags as $promotionFlag)
                                        <dd>
                                            <input type="radio" name="promotion_flag_id" style="background-color: {{ $promotionFlag->color }}" value="{{ $promotionFlag->id }}" @checked($product?->promotion_flag_id == $promotionFlag->id)>
                                        </dd>
                                        @endforeach
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <product-component data-product="{{ json_encode($product) }}"
                            data-service-id="{{ $SERVICE_ID }}"
                            data-discount-types="{{ json_encode($discountTypes) }}"
                            data-discount-type-details="{{ json_encode($discountTypeDetails) }}"
                            data-cdt-provide-types="{{ json_encode($cdtProvideTypes) }}"
                            data-enrollment-provide-types="{{ json_encode($enrollmentProvideTypes) }}"
        >
            @forelse ($product?->productOptions ?? [] as $key => $productOption)
            <product-option data-is-first="{{ $key === 0 ? 1 : 0 }}" data-product-option="{{ json_encode($productOption) }}"></product-option>
            @empty
            <product-option data-is-first="1"></product-option>
            @endforelse
        </product-component>

        @if ($product?->id)
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <h2 class="detail-title">히스토리</h2>
                    <table class="default-table">
                        <colgroup>
                            <col width="70">
                            <col width="100">
                            <col width="120">
                            <col width="auto">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                        </colgroup>
                        <thead>
                            <tr>
                                <th scope="col" class="th_nm">번호</th>
                                <th scope="col">일시</th>
                                <th scope="col">모듈</th>
                                <th scope="col">상품명</th>
                                <th scope="col">전시 구분</th>
                                <th scope="col">접수 상태</th>
                                <th scope="col">카테고리</th>
                                <th scope="col">썸네일</th>
                                <th scope="col">담당자명</th>
                                <th scope="col">자세히보기</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            @php
                                $logs = $product->getParsingLogs() ?? [];
                            @endphp
                            @forelse ($logs as $key => $log)
                            <tr>
                                <td>{{ count($logs) - $key }}</td>
                                <td>
                                    @if (isset($log->created_at))
                                    {{ explode(" ", $log->created_at)[0] }} <br>
                                    {{ explode(" ", $log->created_at)[1] }}
                                    @else
                                    -
                                    @endif
                                </td>
                                <td>{{ $log->module->name }}</td>
                                <td class="text-left">{{ $log->name }}</td>
                                <td>
                                    @if ($log->activated == 1)
                                    활성
                                    @else
                                    비활성
                                    @endif
                                </td>
                                <td>
                                    @if ($log->is_accepted == 1)
                                    오픈
                                    @else
                                    마감
                                    @endif
                                </td>
                                <td>
                                    @if (isset($logs[$key - 1]) && $logs[$key - 1]->product_categories != $log->product_categories)
                                    변경
                                    @else
                                    -
                                    @endif
                                </td>
                                <td class="text-left">
                                    @if ($log->product_thumbnails)
                                    {{ last(explode('/', $log->product_thumbnails[0]->s3_key ?? '')) }}
                                    @else
                                    -
                                    @endif
                                </td>
                                <td>{{ $log->created_by }}</td>
                                <td>
                                    <a href="#none">자세히 보기</a>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="10">No data.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif

        <!-- end row -->
    </div>

@endsection

@push("script")
<script>
    const THUMBNAILS = {{ Js::from($product->productThumbnails ?? null) }};
    const SERVICE_ID = {{ Js::from($SERVICE_ID) }};
    const PRODUCT_ID = {{ Js::from($product->id ?? null) }};
    const PRODUCT = {{ Js::from($product ?? null) }};
    let benefitEditor = null;

    window.addEventListener("load", () => {
        benefitEditor = new Editor({
            el: document.querySelector("#benefit-editor"),
            height: 'auto',
            initialEditType: 'wysiwyg',
            previewStyle: 'vertical',
            language: 'ko-KR',
            toolbarItems: [
                ['heading', 'bold', 'italic', 'strike'],
                ['hr', 'quote'],
                ['ul', 'ol', 'task', 'indent', 'outdent'],
                ['table', 'image', 'link'],
                ['code', 'codeblock'],
                ['scrollSync'],
            ],
            plugins: [colorSyntax]
        });
        if (PRODUCT && PRODUCT.benefit && PRODUCT.benefit != "")
            benefitEditor.setMarkdown(PRODUCT.benefit);

        document.querySelectorAll("div.toastui-editor.ww-mode").forEach(element => {
            element.addEventListener("click", (e) => {
                let editElem = e.target.querySelector("div.ProseMirror.toastui-editor-contents");
                if (editElem)
                    editElem.focus();
            });
        });

        // Copy
        if (!PRODUCT_ID && PRODUCT) {
            THUMBNAILS.forEach(async (thumbnail, index) => {
                const $thumbnailImg = document.querySelector(`img[data-id='${thumbnail.id}']`);
                if ($thumbnailImg)
                    $thumbnailImg.file = await getS3File(thumbnail.s3_key);
            });
        }
    });

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

        let message = "변경 내용을 저장하시겠습니까?";
        if (await alertifyAsync("알림", message))
            execSubmit();
    }

    function execSubmit() {
        const BODY = getRequestBody();
        const CALLBACK = (response) => {
            if (response.status == 200 || response.status == 201)
                alertify.alert("알림", "완료되었습니다.", () => {
                    if (PRODUCT_ID)
                        location.reload();
                    else
                        window.location.href = route('product.list');
                });
            else
                alertify.alert('Error', '오류가 발생했습니다.');

        };

        let setUrl = route('api.product.set');
        if (PRODUCT_ID)
            setUrl += "/" + PRODUCT_ID;

        edmAjax({
            method: "POST",
            url: setUrl,
            data: BODY,
            callback: CALLBACK,
        });
    }

    // Get Request Body
    function getRequestBody() {
        const $formElem = document.getElementById("productForm");
        const formData = new FormData($formElem);

        // 수강상 혜택 마크다운 에디터 데이터
        formData.append("benefit", benefitEditor.getMarkdown());

        // 종료일 처리
        const isEndDateDisabled = document.querySelector("input[name='is_end_date_disabled']:checked") ? 1 : 0;
        formData.append("is_end_date_disabled", isEndDateDisabled);
        formData.append("activated_end_date", isEndDateDisabled ? document.querySelector("input[name='activated_end_date']").value : null);

        // 접수 예약 - 어학원만 진행
        if (SERVICE_ID == 2) {
            formData.append("is_reserved_accepted", document.querySelector("input[name='is_reserved_accepted']:checked") ? 1 : 0);
            formData.append("is_reserved_rejected", document.querySelector("input[name='is_reserved_rejected']:checked") ? 1 : 0);

            const $acceptedReservationTypeId = document.getElementById("accepted_reservation_type_id");
            const $rejectedReservationTypeId = document.getElementById("rejected_reservation_type_id");
            if ($acceptedReservationTypeId.value) {
                const $acceptedReservationDetail = document.querySelector(`div.reservation-detail[data-accepted_reservation_type_id='${$acceptedReservationTypeId.value}'] .reservation-value`);
                formData.append("accepted_reservation_value", $acceptedReservationDetail.value);
            }
            if ($rejectedReservationTypeId.value) {
                const $rejectedReservationDetail = document.querySelector(`div.reservation-detail[data-rejected_reservation_type_id='${$rejectedReservationTypeId.value}'] .reservation-value`);
                formData.append("rejected_reservation_value", $rejectedReservationDetail.value);
            }
        }

        // 전시 썸네일
        document.querySelectorAll("img[name='thumbnails[]']").forEach(item => {
            if (item.file)
                formData.append("thumbnails[]", item.file);
        });

        // 카테고리
        const $categories = document.querySelectorAll("input[name='categories[]']:checked");
        if ($categories.length < 1)
            formData.append("categories[]", null);

        // Product Options
        document.querySelectorAll("product-option form[name='productOptions[]']").forEach((item, index) => {
            const productOptionFormData = new FormData(item);
            const productOptionJson = {};
            for (const [key, value] of productOptionFormData.entries()) {
                productOptionJson[key] = value;
            }

            // 할인가 처리
            const $discountTypeId = item.querySelector("select[name='discount_type_id']");
            if ($discountTypeId.value) {
                const $discountTypeValueWrapper = item.querySelector(`dl.discount-type-detail[data-discount-type-id='${$discountTypeId.value}']`);
                const $detailValue1 = $discountTypeValueWrapper.querySelector(".discount_type_detail_value_1");
                const $detailValue2 = $discountTypeValueWrapper.querySelector(".discount_type_detail_value_2");

                productOptionJson["discount_type_detail_value_1"] = $detailValue1.value;
                productOptionJson["discount_type_detail_value_2"] = $detailValue2.value;
            } else {
                productOptionJson["discount_type_id"] = null;
                delete productOptionJson["discount_type_detail_value_1"];
                delete productOptionJson["discount_type_detail_value_2"];
            }

            // 배송 관련
            const isDeliveryPriceDisplayed = item.querySelector("input[name='is_delivery_price_displayed']:checked") ? 1 : 0;
            const isOverseaDeliveryPossible = item.querySelector("input[name='is_oversea_delivery_possible']:checked") ? 1 : 0;
            productOptionJson["is_delivery_price_displayed"] = isDeliveryPriceDisplayed;
            productOptionJson["is_oversea_delivery_possible"] = isOverseaDeliveryPossible;

            // TODO 프로모션, 추가 구매, 구매혜택 Request Body에 추가하는 로직 작성
            // Left contents' composed Grid
            // const $leftContent = item.parentElement.querySelector("product-option-left-content");
            // productOptionJson["coupons"] = $rightContent.grids["사용 가능 쿠폰"].getData().map(item => item.id);
            // productOptionJson["additionalProducts"] = $rightContent.grids["추가 구매 상품"].getData().map(item => item.id);
            // productOptionJson["benefitProducts"] = $rightContent.grids["구매 혜택"].getData().map(item => item.id);

            // Right contents' composed Grid
            const $rightContent = item.parentElement.querySelector("product-option-right-content");
            productOptionJson["courses"] = $rightContent.grids["강좌"].getData().map(item => item.id);
            productOptionJson["corrections"] = $rightContent.grids["첨삭"].getData().map(item => item.id);
            productOptionJson["cdtGroups"] = $rightContent.grids["CDT"].getData().map(item => item.id);
            productOptionJson["textbooks"] = $rightContent.grids["교재"].getData().map(item => item.id);
            productOptionJson["etcProducts"] = $rightContent.grids["기타"].getData().map(item => item.id);

            formData.append("productOptions[]", JSON.stringify(productOptionJson));
        });

        return formData;
    }

    // Validation methods
    async function validate() {
        document.querySelectorAll("dd.validation-wrap").forEach((item) => item.style.display = "none");
        let $validationWrap = null;

        // 상품 구분
        const $salesType = document.querySelector('input[name="sales_type"]:checked');
        const salesType = $salesType?.value;
        if (!salesType)
            $validationWrap = displayValidationForm(document.querySelector('input[name="sales_type"]'), "선택된 항목이 없습니다.");
        else {
            if (salesType == "지급") {
                const $productType = document.querySelector("select[name='product_type_id']");
                if (!$productType?.value)
                    $validationWrap = displayValidationForm($productType, "선택된 항목이 없습니다.");
            }
        }

        // 모듈
        const $module = document.querySelector('input[name="module_id"]:checked');
        const moduleId = $module?.value;
        if (!moduleId)
            $validationWrap = displayValidationForm(document.querySelector('input[name="module_id"]'), "선택된 항목이 없습니다.");

        // 목표 점수
        const $goalScore = document.getElementById('goal_score');
        const goalScore = $goalScore?.value;
        if (!goalScore)
            $validationWrap = displayValidationForm($goalScore, "선택된 항목이 없습니다.");

        // 목표 점수
        const $targetScore = document.getElementById('target_score');
        const targetScore = $targetScore?.value;
        if (!targetScore)
            $validationWrap = displayValidationForm($targetScore, "선택된 항목이 없습니다.");

        // 상품명
        const $name = document.getElementById('name');
        const name = $name?.value;
        if (!name)
            $validationWrap = displayValidationForm($name, "입력된 내용이 없습니다.");
        else if (!(await validateName(name)))
            $validationWrap = displayValidationForm($name, "동일한 상품명이 존재합니다.");

        // 전시 구분
        const $activated = document.querySelector('input[name="activated"]:checked');
        const activated = $activated?.value;
        if (activated === null)
            $validationWrap = displayValidationForm($activated, "입력된 내용이 없습니다.");
        else {
            const $activatedStartDate = document.getElementById('activated_start_date');
            const $activatedEndDate = document.getElementById('activated_end_date');
            const $isEndDateDisabled = document.getElementById('is_end_date_disabled');

            if (activated == 1 && $isEndDateDisabled.checked && !$activatedStartDate.value)
                $validationWrap = displayValidationForm($activated, "입력된 내용이 없습니다.");
            else if (activated == 1 && !$isEndDateDisabled.checked) {
                const from = $activatedStartDate.value;
                const to = $activatedEndDate.value;

                if (!from || !to)
                    $validationWrap = displayValidationForm($activated, "입력된 내용이 없습니다.");
                else {
                    const fromDate = new Date(from);
                    const toDate = new Date(to);
                    if (fromDate.getTime() > toDate.getTime())
                        $validationWrap = displayValidationForm($activated, "전시 종료일이 시작일보다 빠릅니다.");
                }
            }
        }

        // 접수 상태
        const $isAccepted = document.querySelector('input[name="is_accepted"]:checked');
        const isAccepted = $isAccepted?.value;
        if (!isAccepted)
            $validationWrap = displayValidationForm(document.querySelector('input[name="is_accepted"]'), "선택된 항목이 없습니다.");

        // 접수 예약 - 어학원만 진행
        if (SERVICE_ID == 2) {
            const $isReservedAccepted = document.getElementById('is_reserved_accepted');
            const $isReservedRejected = document.getElementById('is_reserved_rejected');

            // 오픈/마감 중 하나만 체크되었을 때
            if (($isReservedAccepted.checked && !$isReservedRejected.checked)
            || (!$isReservedAccepted.checked && $isReservedRejected.checked)) {
                const $reserved = $isReservedAccepted.checked ? $isReservedAccepted : $isReservedRejected;
                const $reservationType = $reserved.closest("div.reservation-wrapper").querySelector('select.reservation-select');
                const $reservedValidationWrap = validateSingleReservation($reservationType, $isReservedAccepted);
                if (!$validationWrap)
                    $validationWrap = $reservedValidationWrap;
            }
            // 오픈/마감 두개 다 체크되었을 때
            else if ($isReservedAccepted.checked && $isReservedRejected.checked) {
                const $acceptedReservationType = $isReservedAccepted.closest("div.reservation-wrapper").querySelector('select.reservation-select');
                const $rejectedReservationType = $isReservedRejected.closest("div.reservation-wrapper").querySelector('select.reservation-select');
                let $reservedValidationWrap = validateSingleReservation($acceptedReservationType, $isReservedAccepted) ?? validateSingleReservation($rejectedReservationType, $isReservedAccepted);
                if (!$validationWrap)
                    $validationWrap = $reservedValidationWrap;

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

        // 전시 썸네일
        const $thumbnails = document.querySelectorAll('img[name="thumbnails[]"]');
        if ($thumbnails.length < 1)
            $validationWrap = displayValidationForm(document.querySelector('dd.thumbnail-img-wrap'), "등록된 파일이 없습니다.");

        // 프로모션 플래그
        const $promotionFlagWord = document.querySelector("input[name='promotion_flag_word']");
        if ($promotionFlagWord?.value) {
            const $promotionFlagId = document.querySelector("input[name='promotion_flag_id']:checked");
            if (!$promotionFlagId)
                $validationWrap = displayValidationForm(document.querySelector("input[name='promotion_flag_id']"), "프로모션 플래그 단어가 설정된 경우 플래그 색상을 지정해야 합니다.");
        }

        // Product Option
        const $productOptionValidationWrap = validateProductOptions();
        if (!$validationWrap)
            $validationWrap = $productOptionValidationWrap;

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

    function validateProductOptions() {
        let $resultWrap = null;
        const $productOptions = document.querySelectorAll("product-component product-option");
        if ($productOptions.length < 1) {
            $resultWrap = 1;
            alertify.alert("경고", "정상적으로 완료할 수 없습니다.<br>새로고침 후 다시 시도해주세요.");
        }

        $productOptions.forEach(item => {
            $resultWrap = validateProductOptionLeftContents(item);
            const $tmpRightWrap = validateProductOptionRightContents(item);
            if (!$resultWrap)
                $resultWrap = $tmpRightWrap;
        });
        const $tmpEtcWrap = validateProductOptionEtc($productOptions);
        if (!$resultWrap)
            $resultWrap = $tmpEtcWrap;

        return $resultWrap;
    }

    function validateProductOptionEtc($productOptions) {
        let $validationWrap = null;

        // 옵션 순서 체크
        const $orders = [];
        $productOptions.forEach(item => $orders.push(item.querySelector("product-option-left-content select[name='order']")));

        const orderCounter = {};
        $orders.forEach(($item, index) => {
            const tmpValue = $item.value ? $item.value : "선택";
            if (orderCounter[tmpValue])
                orderCounter[tmpValue] = orderCounter[tmpValue] + 1;
            else
                orderCounter[tmpValue] = 1;
        });

        let isValidated = true;
        for (const [order, count] of Object.entries(orderCounter)) {
            if (count > 1)
                isValidated = false;
        }

        if (!isValidated)
            $validationWrap = displayValidationForm($orders[0], "중복된 순서가 있습니다.");

        return $validationWrap;
    }

    function validateProductOptionRightContents($productOption) {
        let $validationWrap = null;
        const $rightContent = $productOption.querySelector("product-option-right-content");

        // 전체 구성항목 존재 여부
        let dataTotal = 0;
        $rightContent.composedItems.forEach(item => dataTotal += $rightContent.grids[item].getRowCount());
        if (dataTotal < 1)
            $validationWrap = displayValidationForm($rightContent.querySelector("select[name='composedSelect']"), "구성된 항목이 없습니다.", "div.pd-con-title");

        // 강좌
        const courseGrid = $rightContent.grids["강좌"];
        const $enrollmentProvideTypeId = $rightContent.querySelector("select[name='enrollment_provide_type_id']");
        if (courseGrid && courseGrid.getRowCount() > 0 && $enrollmentProvideTypeId) {
            if (!$enrollmentProvideTypeId.value)
                $validationWrap = displayValidationForm($enrollmentProvideTypeId, "선택된 항목이 없습니다.", "div.add-list-wrapper");
        }

        // CDT
        const cdtGrid = $rightContent.grids["CDT"];
        if (cdtGrid && cdtGrid.getRowCount() > 0) {
            const $grid = cdtGrid.el;
            const $parent = $grid.closest("div.add-list-wrapper");

            // 이용일
            const $cdtTotalDayCount = $parent.querySelector("input[name='cdt_total_day_count']");
            // 이용횟수
            const $cdtTotalUseCount = $parent.querySelector("input[name='cdt_total_use_count']");
            // 미이용 차감일
            const $cdtUnusedDeductionDay = $parent.querySelector("input[name='cdt_unused_deduction_day']");
            // 이용제한 일
            const $cdtLimitDay = $parent.querySelector("input[name='cdt_limit_day']");
            // 이용제한 회
            const $cdtLimitCount = $parent.querySelector("input[name='cdt_limit_count']");

            // 지급일 - 어학원만 진행
            if (SERVICE_ID == 2) {
                const $cdtProviderTypeId = $parent.querySelector("select[name='cdt_provide_type_id']");
                if (!$cdtProviderTypeId.value)
                    $validationWrap = displayValidationForm($cdtProviderTypeId, "선택된 항목이 없습니다.", "div.add-list-wrapper");
            }

            // 이용일
            if (!$cdtTotalDayCount.value)
                $validationWrap = displayValidationForm($cdtProviderTypeId, "입력된 내용이 없습니다.", "div.add-list-wrapper");
            // 이용횟수
            else if (!$cdtTotalUseCount.value)
                $validationWrap = displayValidationForm($cdtProviderTypeId, "입력된 내용이 없습니다.", "div.add-list-wrapper");
            // 미이용 차감일
            else if ($cdtUnusedDeductionDay.value && (Number($cdtUnusedDeductionDay.value) > Number($cdtTotalDayCount.value)))
                $validationWrap = displayValidationForm($cdtProviderTypeId, "미이용 차감일은 이용일 미만으로만 설정 가능합니다.", "div.add-list-wrapper");
            // 이용제한 일 및 회
            else if (($cdtLimitDay.value && !$cdtLimitCount.value) || (!$cdtLimitDay.value && $cdtLimitCount.value))
                $validationWrap = displayValidationForm($cdtProviderTypeId, "이용 제한 설정 시 일, 회 모두 입력하셔야 합니다.", "div.add-list-wrapper");
            // 이용제한 일
            else if ($cdtLimitDay.value && Number($cdtLimitDay.value) > Number($cdtTotalDayCount.value))
                $validationWrap = displayValidationForm($cdtProviderTypeId, "이용 제한일은 이용일 이하로만 설정 가능합니다.", "div.add-list-wrapper");
            // 이용제한 회
            else if ($cdtLimitCount.value && Number($cdtLimitCount.value) > Number($cdtTotalUseCount.value))
                $validationWrap = displayValidationForm($cdtProviderTypeId, "이용 제한 횟수는 이용 횟수 이하로만 설정 가능합니다.", "div.add-list-wrapper");

            // 첨삭 CDT와 이용일, 이용횟수 동기화
            const correctionGrid = $rightContent.grids["첨삭"];
            if (correctionGrid && correctionGrid.getRowCount() > 0) {
                const correctionCdtData = correctionGrid.getData().filter(item => item.type == "CDT");
                if (correctionCdtData.length > 0) {
                    const correctionTotalDayCount = correctionCdtData[0].total_day_count;
                    const correctionTotalUseCount = correctionCdtData[0].total_use_count;

                    if (correctionTotalDayCount != $cdtTotalDayCount.value)
                        $validationWrap = displayValidationForm($cdtTotalDayCount, "첨삭의 이용일, 이용횟수와 일치해야 합니다.", "div.add-list-wrapper");
                    else if (correctionTotalUseCount != $cdtTotalUseCount.value)
                        $validationWrap = displayValidationForm($cdtTotalDayCount, "첨삭의 이용일, 이용횟수와 일치해야 합니다.", "div.add-list-wrapper");
                }
            }
        }

        return $validationWrap;
    }

    function validateProductOptionLeftContents($productOption) {
        let $validationWrap = null;
        const $leftContent = $productOption.querySelector("product-option-left-content");

        // 옵션 순서
        const $order = $leftContent.querySelector("select[name='order']");
        const orderValue = $order?.value;
        if (!orderValue)
            $validationWrap = displayValidationForm($order, "옵션 순서를 선택해 주세요.");

        // 옵션명
        const $name = $leftContent.querySelector("input[name='name']");
        const nameValue = $name?.value;
        if (!nameValue)
            $validationWrap = displayValidationForm($name, "입력된 내용이 없습니다.");

        const $period = $leftContent.querySelector("input[name='period']");
        if ($period) {
            const periodValue = $period.value;
            if (periodValue === null || periodValue == "")
                $validationWrap = displayValidationForm($period, "입력된 내용이 없습니다.");
            else if(periodValue < 1)
                $validationWrap = displayValidationForm($period, "1일 이상만 입력이 가능합니다.");
        }

        const $salesType = document.querySelector('input[name="sales_type"]:checked');
        const salesType = $salesType?.value;
        // 상품 구분의 값이 지급이면 진행 안함
        if (salesType != "지급") {
            // 판매가
            const $salesPrice = $leftContent.querySelector("input[name='sales_price']");
            const salesPriceValue = $salesPrice?.value;
            if (!salesPriceValue)
                $validationWrap = displayValidationForm($salesPrice, "입력된 내용이 없습니다.");
            else if (salesPriceValue < 1000)
                $validationWrap = displayValidationForm($salesPrice, "1,000원 이상만 입력 가능합니다.");

            // 할인
            const $discountTypeId = $leftContent.querySelector("select[name='discount_type_id']");
            const discountTypeIdValue = $discountTypeId?.value;
            if (discountTypeIdValue) {
                const $discountPrice = $leftContent.querySelector("input[name='discount_price']");
                const discountPriceValue = $discountPrice?.value;
                if (!discountPriceValue)
                    $validationWrap = displayValidationForm($discountPrice, "할인이 적용된 경우 할인가 입력은 필수 입니다.");

                const $discountTypeDetailWrapper = $discountTypeId.closest("div.detail-input").querySelector(`dl.discount-type-detail[data-discount-type-id='${discountTypeIdValue}']`);
                // 기간 지정
                if (discountTypeIdValue == 1 || discountTypeIdValue == 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 (discountTypeIdValue == 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 (discountTypeIdValue == 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 validateDoubleReservation($acceptedReservationType, $rejectedReservationType, $validationRoot) {
        let $validationWrap = null;
        if ($acceptedReservationType.value != $rejectedReservationType.value)
            $validationWrap = displayValidationForm($validationRoot, "오픈/마감 예약의 종류가 같지 않습니다.");
        else {
            const $acceptedParent = $acceptedReservationType.closest("div.reservation-wrapper");
            const $acceptedReservationValueWrapper = $acceptedParent.querySelector(`div[data-${$acceptedReservationType.name}='${$acceptedReservationType.value}']`);
            const $acceptedReservationValue = $acceptedReservationValueWrapper.querySelector('.reservation-value');
            const acceptedReservationValue = $acceptedReservationValueWrapper.querySelector('.reservation-value').value;

            const $rejectedParent = $rejectedReservationType.closest("div.reservation-wrapper");
            const $rejectedReservationValueWrapper = $rejectedParent.querySelector(`div[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 validateSingleReservation($reservationType, $validationRoot) {
        let $validationWrap = null;
        if (!$reservationType?.value)
            $validationWrap = displayValidationForm($validationRoot, "선택된 항목이 없습니다.");
        else {
            const $parent = $reservationType.closest("div.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(`div[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 compareValue = valueName == "accepted_reservation_value" ? PRODUCT?.accepted_reservation_value : PRODUCT?.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;
    }

    async function validateName(name) {
        const url = route('api.product.detail-by-name');
        const params = {
            "id": PRODUCT_ID,
            "name": name,
        };

        let result = false;
        await edmAjax({
            method: "GET",
            url: url,
            data: params,
            isBlock: false,
            callback: response => {
                if (response.status == 200 && !response.data)
                    result = true;
            }
        });

        return result;
    }

    // Image Control methods
    function addImageElement(file) {
        const $thumbnailDiv = document.createElement("div");
        $thumbnailDiv.className = "thumbnail-img mb-1";

        const $deleteBtn = document.createElement("button");
        $deleteBtn.className = "btn-delete";
        $deleteBtn.type = "button";
        $deleteBtn.addEventListener("click", deleteImage);
        $deleteBtn.innerText = "이미지 삭제";
        $thumbnailDiv.appendChild($deleteBtn);

        const $thumbnailImg = document.createElement("img");
        const imageSource = URL.createObjectURL(file);
        $thumbnailImg.src = imageSource;
        $thumbnailImg.name = "thumbnails[]";
        $thumbnailImg.file = file;
        $thumbnailDiv.appendChild($thumbnailImg);

        const $parent = document.querySelector("dd.thumbnail-img-wrap.multi");
        $parent.appendChild($thumbnailDiv);
        URL.revokeObjectURL(file);
    }

    function deleteImage(e) {
        const $image = e.target.nextElementSibling;
        const thumbnailId = $image.dataset?.id;
        if (!PRODUCT_ID || !thumbnailId)
            e.target.parentElement.remove();
        else {
            const targetUrl = route("api.product.delete-thumbnail", {id: thumbnailId});
            edmAjax({
                method: "delete",
                url: targetUrl,
                callback: response => location.reload(),
            });
        }
    }

    // Change Listeners
    function changeSalesType() {
        const $salesType = document.querySelector("input[name='sales_type']:checked");
        const $productType = document.getElementById("product_type_id");

        const $optionContents = document.querySelectorAll("product-option-left-content");
        let priceDisplayStatus = "";
        if ($salesType.value == "판매") {
            $productType.disabled = true;
            priceDisplayStatus = "flex";
        }
        else {
            $productType.disabled = false;
            priceDisplayStatus = "none";
        }
        $optionContents.forEach($content => $content.changePriceDisplayStatus(priceDisplayStatus));
    }

    function changeActivatedStatus() {
        // const $activated = document.querySelector("input[name='activated']:checked");
        // const $startDate = document.querySelector("input[name='activated_start_date']");
        const $endDate = document.querySelector("input[name='activated_end_date']");
        const $isEndDateDisabled = document.querySelector("input[name='is_end_date_disabled']");
        $endDate.disabled = $isEndDateDisabled.checked;

        // if ($activated.value == 1 && !$isEndDateDisabled.checked) {
        //     $startDate.disabled = false;
        //     $endDate.disabled = false;
        // } else if ($activated.value == 1 && $isEndDateDisabled.checked) {
        //     $startDate.disabled = false;
        //     $endDate.disabled = true;
        // } else if ($activated.value == 0) {
        //     $startDate.disabled = true;
        //     $endDate.disabled = true;
        // }
    }

    function changeReservationStatus(e) {
        const $checkbox = e.target;
        if ($checkbox.checked) {
            const $parent = $checkbox.closest("div.reservation-wrapper");
            const $reservationType = $parent.querySelector("select.reservation-select");

            $reservationType.disabled = false;
            $reservationValues = $parent.querySelectorAll(".reservation-value");

            // if ($reservationType.value)
                $reservationValues.forEach(item => item.disabled = false);
            // else
                // $reservationValues.forEach(item => item.disabled = true);
        }
        else {
            const $parent = $checkbox.closest("div.reservation-wrapper");
            const $reservationType = $parent.querySelector("select.reservation-select");

            $reservationType.disabled = true;
            $reservationValues = $parent.querySelectorAll(".reservation-value");
            $reservationValues.forEach(item => item.disabled = true);
        }
    }

    function changeReservationType(e) {
        const changedValue = e.target.value;
        const $typeSelects = document.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("div.reservation-wrapper");
            $parent.querySelectorAll("div.reservation-detail").forEach(item => item.hidden = true);

            const $target = $parent.querySelector(`div[data-${dataSetName}='${item.value}']`);
            if ($target)
                $target.hidden = false;
        });
    }

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

    function changeExtensionStatus() {
        const $extensionStatus = document.querySelector("input[name='is_extension_possible']:checked");
        const $extensionOptionId = document.getElementById("extension_option_id");
        const $extensionValue = document.getElementById("extension_value");

        let isDisabled = true;
        if ($extensionStatus.value == 1)
            isDisabled = false;

        $extensionOptionId.disabled = isDisabled;
        $extensionValue.disabled = isDisabled;
    }

    function changeCategory(e) {
        if (SERVICE_ID != 1)
            return;

        const $checkboxes = document.querySelectorAll("input[name='categories[]']:checked");
        const $subSelect = e.target.closest('dd.flex-wrap').querySelector('select[name="product_sub_category_id"]');
        if ($subSelect) {
            $subSelect.disabled = true;
            $checkboxes.forEach(item => {
                if (item.parentElement.querySelector("label").innerText == "기타")
                    $subSelect.disabled = false;
            });
        }
    }

    function changeImage(e) {
        const $thumbnails = document.querySelectorAll("img[name='thumbnails[]']");
        Array.from(e.target.files).forEach(item => {
            if (document.querySelectorAll("img[name='thumbnails[]']").length < 5)
                addImageElement(item);
        });

        e.target.value = null;
    }

    // Composed methods
    function addCourse(grid) {
        appendSelectedRow(grid, composedGrids["강좌"]);
        composedGrids["강좌"].el.closest("product-option-right-content").checkGridsVisible();
    }

    function addCorrection(grid) {
        appendSelectedRow(grid, composedGrids["첨삭"]);
        composedGrids["첨삭"].el.closest("product-option-right-content").checkGridsVisible();
    }

    function addCdtGroup(grid) {
        appendSelectedRow(grid, composedGrids["CDT"]);
        composedGrids["CDT"].el.closest("product-option-right-content").checkGridsVisible();
    }

    function addTextbook(grid) {
        appendSelectedRow(grid, composedGrids["교재"]);
        composedGrids["교재"].el.closest("product-option-right-content").checkGridsVisible();
    }

    function addEtcProduct(grid) {
        appendSelectedRow(grid, composedGrids["기타"]);
        composedGrids["기타"].el.closest("product-option-right-content").checkGridsVisible();
    }
</script>
@endpush