@extends("domains.common.layouts.layout")
@section("header")
@routes("promotion")
@vite([
    'resources/js/domains/common/toastGrid.js',
    'resources/js/domains/product/gridColumns.js',
    'resources/js/domains/promotion/gridColumns.js',
    'resources/js/domains/product/composed.js',
])
@endsection

@section("main-content")
    <div class="container-fluid detail">

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

                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <form id="coupon-form" class="set-user-form">
            <input type="hidden" name="id" value="{{ $coupon?->id }}">
            <div class="row detail-con-wrap">
                <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>
                                            @if ($coupon?->id)
                                                {{ $coupon->id }}
                                            @else
                                                -
                                            @endif
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">서비스 구분</dt>
                                        <dd>
                                            @foreach ($services as $key => $service)
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="serviec{{ $key }}" name="service_id" class="form-check-input" value="{{ $service->id }}" @checked(($key === 0 && !$coupon) || ($service->id == $coupon?->service_id))>
                                                <label class="form-check-label" for="serviec{{ $key }}">{{ $service->name }}</label>
                                            </div>
                                            @endforeach
                                        </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="activated0" name="activated" class="form-check-input" value="1" @checked(!$coupon || $coupon->activated == 1)>
                                                <label class="form-check-label" for="activated0">활성</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="activated1" name="activated" class="form-check-input" value="0" @checked($coupon?->activated === 0)>
                                                <label class="form-check-label" for="activated1">비활성</label>
                                            </div>
                                            <p class="p-alert">비활성 처리 시 쿠폰의 사용 기간과 무관하게 사용이 불가합니다.</p>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">쿠폰명</dt>
                                        <dd>
                                            <input type="text" name="name" value="{{ $coupon?->name }}" autocomplete="on">
                                        </dd>
                                        <dd class="validation-wrap"><p></p></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">
                                    쿠폰 이미지
                                    <div class="button-wrap">
                                        <button class="button btn-style-1" type="button" onclick="findThumbnail()">찾기</button>
                                        <input type="file" id="thumbnail" name="thumbnail" accept="image/*" style="display: none;" onchange="thumbnailChange(event)"/>
                                    </div>
                                </h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dd class="thumbnail-img-wrap">
                                            <div class="thumbnail-img mb-1">
                                                <button class="btn-delete" type="button" onclick="deleteThumbnail()">이미지 삭제</button>
                                                <img id="thumbnail_image" alt=""
                                                @if ($coupon?->s3_key)
                                                src="{{ app(\S3Helper::class)->getDownloadPresignedUrl($coupon->s3_key) }}"
                                                @endif
                                                >
                                            </div>
                                        </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>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <h2 class="detail-title">발행 옵션</h2>
                        <div class="detail-input">

                            <dl class="input-wrapper">
                                <dt class="req">발행 기간</dt>
                                <dd>
                                    <div class="flex-box">
                                        <input type="date" id="issue_start_date" name="issue_start_date" value="{{ explode(' ', $coupon?->issue_start_date ?? ' ')[0] }}">
                                        <input type="time" name="issue_start_time" id="issue_start_time" value="{{ $coupon?->issue_start_time }}">
                                        <span class="btw-bullet">-</span>
                                        <input type="date" id="issue_end_date" name="issue_end_date" value="{{ explode(' ', $coupon?->issue_end_date ?? ' ')[0] }}" @disabled(!$coupon || $coupon?->is_issue_end_date_disabled)>
                                        <input type="time" name="issue_end_time" id="issue_end_time" value="{{ $coupon?->issue_end_time }}" @disabled(!$coupon || $coupon?->is_issue_end_date_disabled)>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" id="is_issue_end_date_disabled" name="is_issue_end_date_disabled" class="form-check-input" value="1" onchange="disalbedChange(event)" @checked(!$coupon || $coupon?->is_issue_end_date_disabled == 1)>
                                        <label class="form-check-label" for="is_issue_end_date_disabled">종료일 없음</label>
                                    </div>
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">발행 매수</dt>
                                <dd>
                                    <div>
                                        <input type="number" id="issue_max" name="issue_max" value="{{ $coupon?->issue_max }}" @disabled(!$coupon || $coupon?->is_unlimited)>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" id="is_unlimited" name="is_unlimited" class="form-check-input" value="1" onchange="disalbedChange(event)" @checked(!$coupon || $coupon?->is_unlimited)>
                                        <label class="form-check-label" for="is_unlimited">무제한</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_automatic_code0" name="is_automatic_code" class="form-check-input" value="1" onchange="disalbedChange(event)" @checked(!$coupon || $coupon?->is_automatic_code == 1) @disabled($coupon?->id)>
                                        <label class="form-check-label" for="is_automatic_code0">자동 발행</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" id="is_automatic_code1" name="is_automatic_code" class="form-check-input" value="0" onchange="disalbedChange(event)" @checked($coupon?->is_automatic_code === 0) @disabled($coupon?->id)>
                                        <label class="form-check-label" for="is_automatic_code1">고정 발행</label>
                                    </div>
                                    <div>
                                        <input type="text" id="fixed_code" name="fixed_code" placeholder="최대 20글자 입력" value="{{ $coupon?->fixed_code }}" @disabled(!$coupon || $coupon->is_automatic_code || $coupon?->id)>
                                    </div>
                                    <p class="p-alert">
                                        고정 발행하는 경우 고정된 코드 하나만 사용 가능합니다.
                                    </p>
                                </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_automatic_issue0" name="is_automatic_issue" class="form-check-input" value="1" onchange="disalbedChange(event)" @checked($coupon?->is_automatic_issue) @disabled($coupon?->id)>
                                        <label class="form-check-label" for="is_automatic_issue0">자동</label>
                                    </div>
                                    <div class="mr20">
                                        <select name="automatic_issue_type_id" id="automatic_issue_type_id" @disabled(!$coupon || $coupon?->is_automatic_issue === 0 || $coupon?->id)>
                                            <option value="">선택</option>
                                            @foreach ($automaticIssueTypes as $automaticIssueType)
                                            <option value="{{ $automaticIssueType->id }}" @selected($coupon?->automatic_issue_type_id == $automaticIssueType->id)>{{ $automaticIssueType->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" id="is_automatic_issue1" name="is_automatic_issue" class="form-check-input" value="0" onchange="disalbedChange(event)" @checked(!$coupon || $coupon?->is_automatic_issue === 0) @disabled($coupon?->id)>
                                        <label class="form-check-label" for="is_automatic_issue1">수동</label>
                                    </div>
                                    @if ($coupon?->id)
                                    <div class="form-check">
                                        <button type="button" class="button btn-style-1" onclick="issueCoupons()">코드 내려받기</button>
                                    </div>
                                    <div class="form-check">
                                        <input type="number" id="request_issue_count">
                                    </div>
                                    매
                                    <p class="ml20">
                                        잔여 매수 <strong class="point-color issue-remaining-count">{{ $coupon->is_unlimited == 1 ? "무제한" : $coupon->issue_max - $coupon->issue_count }}</strong>매
                                    </p>
                                    @endif
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <h2 class="detail-title">사용 옵션</h2>
                        <div class="detail-input">

                            <dl class="input-wrapper">
                                <dt class="req">사용 기간</dt>
                                <dd>
                                    <div class="flex-box">
                                        <input type="date" id="use_start_date" name="use_start_date" value="{{ explode(' ', $coupon?->use_start_date ?? ' ')[0] }}">
                                        <input type="time" name="use_start_time" id="use_start_time" value="{{ $coupon?->use_start_time }}">
                                        <span class="btw-bullet">-</span>
                                        <input type="date" id="use_end_date" name="use_end_date" value="{{ explode(' ', $coupon?->use_end_date ?? ' ')[0] }}" @disabled(!$coupon || $coupon?->is_use_end_date_disabled)>
                                        <input type="time" name="use_end_time" id="use_end_time" value="{{ $coupon?->use_end_time }}" @disabled(!$coupon || $coupon?->is_use_end_date_disabled)>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" id="is_use_end_date_disabled" name="is_use_end_date_disabled" class="form-check-input" value="1" onchange="disalbedChange(event)" @checked(!$coupon || $coupon?->is_use_end_date_disabled)>
                                        <label class="form-check-label" for="is_use_end_date_disabled">종료일 없음</label>
                                    </div>
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">할인 방식</dt>
                                <dd>
                                    @foreach ($couponDiscountTypes as $key => $couponDiscountType)
                                    <div class="form-check form-check-inline">
                                        <input type="radio" id="coupon_discount_type_id{{ $key }}" name="coupon_discount_type_id" class="form-check-input" value="{{ $couponDiscountType->id }}" onchange="disalbedChange(event)"
                                        @checked($couponDiscountType->id == $coupon?->coupon_discount_type_id || ($key === 0 && !$coupon)) @disabled($coupon?->id)>
                                        <label class="form-check-label" for="coupon_discount_type_id{{ $key }}">{{ $couponDiscountType->name }}</label>
                                    </div>
                                    <div class="mr20" style="display: inline-flex; align-items: center; gap: inherit;">
                                        <input type="number" data-coupon_discount_type_id="{{ $couponDiscountType->id }}" id="discount_value{{ $key }}" name="discount_value" placeholder="소수점 입력 불가" min="0" step="1"
                                        value="{{ $couponDiscountType->id == $coupon?->coupon_discount_type_id ? $coupon?->discount_value : null }}"
                                        @disabled(($key != 0 && !$coupon) || ($coupon && $couponDiscountType->id != $coupon?->coupon_discount_type_id) || $coupon?->id)>{{ $couponDiscountType->id == 1 ? "원" : "%" }}
                                    </div>
                                    @endforeach
                                    <div>
                                        최대 할인 금액
                                    </div>
                                    <div>
                                        <input type="number" id="discount_max" name="discount_max" placeholder="소수점 입력 불가" value="{{ $coupon?->discount_max }}" min="0" step="1" @disabled(!$coupon || $coupon?->coupon_discount_type_id == 1 || $coupon?->id)>
                                    </div>
                                    <p class="p-alert">
                                        상품 금액에 소수점 발생 시 절삭 처리됩니다.
                                    </p>
                                </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_used_overlapping0" name="is_used_overlapping" class="form-check-input" value="1" @checked(!$coupon || $coupon?->is_used_overlapping)>
                                        <label class="form-check-label" for="is_used_overlapping0">가능</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" id="is_used_overlapping1" name="is_used_overlapping" class="form-check-input" value="0" @checked($coupon?->is_used_overlapping === 0)>
                                        <label class="form-check-label" for="is_used_overlapping1">불가능</label>
                                    </div>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">발행 제한</dt>
                                <dd>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" id="is_limit_per_id0" name="is_limit_per_id" class="form-check-input" value="0" @checked(!$coupon || $coupon?->is_limit_per_id === 0)>
                                        <label class="form-check-label" for="is_limit_per_id0">없음</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" id="is_limit_per_id1" name="is_limit_per_id" class="form-check-input" value="1" @checked($coupon?->is_limit_per_id)>
                                        <label class="form-check-label" for="is_limit_per_id1">ID 당 1회 발급</label>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <dl>
                        <h2 class="detail-title">
                            사용 가능 상품 옵션
                            <p class="p-alert">추가된 상품이 없는 경우 모든 상품에 사용 가능합니다.</p>
                            <div class="button-wrap">
                                <button class="button btn-style-8" type="button" onclick="removeCheckedRows(productOptionGrid)">행 삭제</button>
                                <button class="button btn-style-1" type="button" onclick="edmPopupOpen('{{ route('product.popup.add-product-option') ?? '' }}', null)">상품 추가</button>
                            </div>
                        </h2>
                        <div id="product-option-grid"></div>
                        <dd class="validation-wrap"><p></p></dd>
                    </dl>
                </div>
            </div>
        </div>

        @if ($coupon?->id)
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <h2 class="detail-title">
                        발행 완료 및 사용 내역
                        <p class="p-alert">발행 완료일은 사용자가 쿠폰을 등록한 날짜로 표기 됩니다.</p>
                        <div class="button-wrap">
                            <div class="pagination-wrapper">
                            </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">10개씩 보기</option>
                                <option value="30">30개씩 보기</option>
                                <option value="50">50개씩 보기</option>
                                <option value="100">100개씩 보기</option>
                            </select>
                            <button type="button" class="button btn-style-2" onclick="">엑셀다운로드</button>
                        </div>
                    </h2>
                    <div id="issued-coupon-grid"></div>
                    <dd class="validation-wrap"><p></p></dd>
                    {{-- <table class="default-table">
                        <colgroup>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>번호</th>
                                <th>쿠폰 코드</th>
                                <th>발행 완료일</th>
                                <th>사용일</th>
                                <th>서비스 구분</th>
                                <th>상품명</th>
                                <th>옵션명</th>
                                <th>사용 금액</th>
                                <th>결제 금액</th>
                                <th>이름</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            <tr>
                                <td>1</td>
                                <td>%쿠폰코드%</td>
                                <td>2024.02.13 23:59:59</td>
                                <td>2024.02.13 23:59:59</td>
                                <td>어학원</td>
                                <td class="text-left">
                                    <a href="#none">상품명</a>
                                </td>
                                <td class="text-left">
                                    %옵션명%
                                </td>
                                <td>1,000</td>
                                <td>1,000</td>
                                <td>
                                    <a href="#none">%회원명%</a>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>%쿠폰코드%</td>
                                <td>2024.02.13 23:59:59</td>
                                <td>2024.02.13 23:59:59</td>
                                <td>어학원</td>
                                <td class="text-left">
                                    <a href="#none">상품명</a>
                                </td>
                                <td class="text-left">
                                    %옵션명%
                                </td>
                                <td>1,000</td>
                                <td>1,000</td>
                                <td>
                                    <a href="#none">%회원명%</a>
                                </td>
                            </tr>
                        </tbody>
                    </table> --}}
                </div>
            </div>
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <h2 class="detail-title">
                        히스토리
                    </h2>
                    <table class="default-table">
                        <colgroup>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>번호</th>
                                <th>일시</th>
                                <th>서비스 구분</th>
                                <th>활성 구분</th>
                                <th>쿠폰명</th>
                                <th>발행 기간</th>
                                <th>사용 기간</th>
                                <th>카테고리</th>
                                <th>썸네일</th>
                                <th>담당자명</th>
                                <th>자세히 보기</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            <tr>
                                <td>1</td>
                                <td>2023.08.15<br>23:59:59</td>
                                <td>인강</td>
                                <td>활성</td>
                                <td class="text-left">
                                    %쿠폰명%
                                </td>
                                <td>YYYY.MM.DD 23:59:59 - <br>종료일 없음</td>
                                <td>YYYY.MM.DD 23:59:59 - <br>종료일 없음</td>
                                <td>변경</td>
                                <td class="text-left">%파일명%</td>
                                <td>%이름%</td>
                                <td><a href="#none">자세히 보기</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif


    </div>

@endsection

@push("script")
<script>
    const PRODUCT_OPTIONS = {{ Js::from($coupon?->productOptions) }};
    const COUPON = {{ Js::from($coupon) }};
    let productOptionGrid = null;
    let issuedCouponGird = null;

    window.addEventListener("load", () => {
        productOptionGrid = new Grid({
            el: document.getElementById("product-option-grid"),
            data: PRODUCT_OPTIONS,
            draggable: false,
            scrollX: false,
            scrollY: false,
            contextMenu: null,
            columnOptions: {resizable: true,},
            rowHeaders: [{type: 'checkbox'}],
            columns: PRODUCT_OPTION_COLUMNS,
        });

        if (COUPON?.id) {
            issuedCouponGird = new Grid({
                el: document.getElementById("issued-coupon-grid"),
                data: null,
                draggable: false,
                scrollX: false,
                scrollY: false,
                contextMenu: null,
                columnOptions: {resizable: true,},
                columns: ISSUED_COUPON_COLUMNS,
            });
        }
    });

    async function handleSubmit() {
        if (!(await validate()))
            return;
        else if (await alertifyAsync("알림", "변경 내용을 저장하시겠습니까?"))
            execSubmit();
    }

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

        // 서비스 구분
        const $serviceId = document.querySelector("input[name='service_id']:checked");
        const serviceId = $serviceId?.value;
        if (!serviceId)
            $validationWrap = displayValidationForm(document.querySelector("input[name='service_id']"), "입력된 내용이 없습니다.");

        // 활성 구분
        const $activated = document.querySelector("input[name='activated']:checked");
        const activated = $activated?.value;
        if (!activated)
            $validationWrap = displayValidationForm(document.querySelector("input[name='activated']"), "입력된 내용이 없습니다.");

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

        const $thumbnail = document.getElementById("thumbnail_image");
        if (!$thumbnail.src)
            $validationWrap = displayValidationForm($thumbnail, "등록된 파일이 없습니다.");

        // 발행 기간
        const $issueStartDate = document.getElementById('issue_start_date');
        const issueStartDate = $issueStartDate?.value;
        const $issueStartTime = document.getElementById('issue_start_time');
        const issueStartTime = $issueStartTime?.value;
        if (!issueStartDate || !issueStartTime)
            $validationWrap = displayValidationForm($issueStartDate, "입력된 내용이 없습니다.");

        const $isIssueEndDateDisabled = document.getElementById('is_issue_end_date_disabled');
        const isIssueEndDateDisabled = $isIssueEndDateDisabled?.checked;
        const $issueEndDate = document.getElementById('issue_end_date');
        const issueEndDate = $issueEndDate?.value;
        const $issueEndTime = document.getElementById('issue_end_time');
        const issueEndTime = $issueEndTime?.value;
        if (!isIssueEndDateDisabled && (!issueEndDate || !issueEndTime))
            $validationWrap = displayValidationForm($issueEndDate, "입력된 내용이 없습니다.");
        else if (!isIssueEndDateDisabled && issueStartDate && issueStartTime && issueEndDate && issueEndTime) {
            const fromDate = new Date(`${issueStartDate} ${issueStartTime}`);
            const toDate = new Date(`${issueEndDate} ${issueEndTime}`);
            if (fromDate.getTime() >= toDate.getTime())
                $validationWrap = displayValidationForm($issueEndTime, "발행기간 종료일이 시작일보다 같거나 빠릅니다.");
        }

        // 발행 매수
        const $isUnlimited = document.getElementById('is_unlimited');
        if (!$isUnlimited.checked) {
            const $issueMax = document.getElementById('issue_max');
            const issueMas = $issueMax?.value
            if (!issueMas || issueMas < 1)
                $validationWrap = displayValidationForm($issueMax, "입력된 내용이 없거나 올바른 값이 입력되지 않았습니다.");
        }

        // 쿠폰 코드
        const $isAutomaticCode = document.querySelector("input[name='is_automatic_code']:checked");
        const isAutomaticCode = $isAutomaticCode?.value;
        if (isAutomaticCode === null)
            $validationWrap = displayValidationForm($isAutomaticCode, "입력된 내용이 없습니다.");
        else if (isAutomaticCode == 0) {
            const $fixedCode = document.getElementById('fixed_code');
            const fixedCode = $fixedCode?.value;
            if (!fixedCode)
                $validationWrap = displayValidationForm($isAutomaticCode, "입력된 내용이 없습니다.");
            else if (fixedCode.length > 20)
                $validationWrap = displayValidationForm($isAutomaticCode, "20글자 이상 입력하셨습니다.");
        }

        // 배포 방식
        const $isAutomaticIssue = document.querySelector("input[name='is_automatic_issue']:checked");
        const isAutomaticIssue = $isAutomaticIssue?.value;
        if (isAutomaticIssue === null)
            $validationWrap = displayValidationForm($isAutomaticIssue, "입력된 내용이 없습니다.");
        else if (isAutomaticIssue == 1) {
            const $automaticIssueTypeId = document.getElementById('automatic_issue_type_id');
            const automaticIssueTypeId = $automaticIssueTypeId.value;
            if (!automaticIssueTypeId)
                $validationWrap = displayValidationForm($isAutomaticIssue, "입력된 내용이 없습니다.");
        }


        // 사용 기간
        const $useStartDate = document.getElementById('use_start_date');
        const useStartDate = $useStartDate?.value;
        const $useStartTime = document.getElementById('use_start_time');
        const useStartTime = $useStartTime?.value;
        if (!useStartDate || !useStartTime)
            $validationWrap = displayValidationForm($useStartDate, "입력된 내용이 없습니다.");

        const $isUseEndDateDisabled = document.getElementById('is_use_end_date_disabled');
        const isUseEndDateDisabled = $isUseEndDateDisabled?.checked;
        const $useEndDate = document.getElementById('use_end_date');
        const useEndDate = $useEndDate?.value;
        const $useEndTime = document.getElementById('use_end_time');
        const useEndTime = $useEndTime?.value;
        if (!isUseEndDateDisabled && (!useEndDate || !useEndTime))
            $validationWrap = displayValidationForm($useEndDate, "입력된 내용이 없습니다.");
        else if (!isUseEndDateDisabled && useStartDate && useStartTime && useEndDate && useEndTime) {
            const fromDate = new Date(`${useStartDate} ${useStartTime}`);
            const toDate = new Date(`${useEndDate} ${useEndTime}`);
            if (fromDate.getTime() >= toDate.getTime())
                $validationWrap = displayValidationForm($useEndTime, "발행기간 종료일이 시작일보다 같거나 빠릅니다.");
        }

        // 할인 방식
        const $couponDiscountTypeId = document.querySelector("input[name='coupon_discount_type_id']:checked");
        const couponDiscountTypeId = $couponDiscountTypeId?.value;
        const $discountValue = document.querySelector(`input[data-coupon_discount_type_id='${$couponDiscountTypeId.value}']`);
        const discountValue = Number($discountValue?.value);
        if (!couponDiscountTypeId)
            $validationWrap = displayValidationForm($couponDiscountTypeId, "입력된 내용이 없습니다.");
        else {
            if (!discountValue)
                $validationWrap = displayValidationForm($couponDiscountTypeId, "입력된 내용이 없습니다.");
            if (discountValue < 0)
                $validationWrap = displayValidationForm($couponDiscountTypeId, "0 이상의 정수만 입력할 수 있습니다.");
            else if (couponDiscountTypeId == 2 && discountValue > 100)
                $validationWrap = displayValidationForm($couponDiscountTypeId, "100 이하의 정수만 입력할 수 있습니다.");
        }

        // 최대 할인 금액
        if (couponDiscountTypeId == 2) {
            const $discountMax = document.getElementById("discount_max");
            const discountMax = Number($discountMax?.value);
            if (!discountMax)
                $validationWrap = displayValidationForm($discountMax, "입력된 내용이 없습니다.");
            if (discountMax < 0)
                $validationWrap = displayValidationForm($discountMax, "0 이상의 정수만 입력할 수 있습니다.");
        }

        // 중복 사용
        const $isUsedOverlapping = document.querySelector("input[name='is_used_overlapping']:checked");
        if (!$isUsedOverlapping)
            $validationWrap = displayValidationForm($isUsedOverlapping, "입력된 내용이 없습니다.");

        // 발행 제한
        const $isLimitPerId = document.querySelector("input[name='is_limit_per_id']:checked");
        if (!$isLimitPerId)
            $validationWrap = displayValidationForm($isLimitPerId, "입력된 내용이 없습니다.");

        // 상품 옵션 - 정액 할인일 때만 진행
        if (couponDiscountTypeId == 1 && productOptionGrid) {
            productOptionGrid.getData().forEach(productOption => {
                const salesPrice = Number(productOption.sales_price);
                const discountPrice = Number(productOption.discount_price);
                const targetPrice = discountPrice ? discountPrice : salesPrice;

                if (targetPrice) {
                    if ((targetPrice - discountValue) < 0) {
                        $validationWrap = displayValidationForm(productOptionGrid.el, "결제 금액이 0원 미만인 상품이 존재합니다.");
                        return false;
                    }
                }
            });
        }

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

    async function validateName(name) {
        const url = route('api.promotion.coupon.by-name');
        const params = {
            "id": COUPON?.id,
            "query": name,
            "strict": true,
        };

        const result = await edmAjax({
            method: "GET",
            url: url,
            data: params,
            isBlock: false,
            callback: response => response.data.length < 1 ? true : false,
        });

        return result;
    }

    async function execSubmit() {
        const BODY = new FormData(document.getElementById("coupon-form"));

        const $isIssueEndDateDisabled = document.getElementById('is_issue_end_date_disabled');
        if (!$isIssueEndDateDisabled.checked)
            BODY.append("is_issue_end_date_disabled", 0);
        else {
            BODY.append("issue_end_date", "");
            BODY.append("issue_end_time", "");
        }

        const $isUnlimited = document.getElementById('is_unlimited');
        if (!$isUnlimited.checked)
            BODY.append("is_unlimited", 0);
        else
            BODY.append("issue_max", "");

        const $isAutomaticIssue = document.querySelector('input[name="is_automatic_issue"]:checked');
        if ($isAutomaticIssue.value != 1)
            BODY.append("automatic_issue_type_id", "");

        const $isUseEndDateDisabled = document.getElementById('is_use_end_date_disabled');
        if (!$isUseEndDateDisabled.checked)
            BODY.append("is_use_end_date_disabled", 0);
        else {
            BODY.append("use_end_date", "");
            BODY.append("use_end_time", "");
        }

        const productOptionids = productOptionGrid.getData().map(item => item.id);
        BODY.append("productOptions", JSON.stringify(productOptionids));

        // Copy
        const $image = document.getElementById("thumbnail_image");
        const $thumbnail = document.getElementById("thumbnail");
        if (COUPON && !COUPON.id && COUPON.s3_key && $thumbnail.files.length < 1 && $image.currentSrc != "") {
            const tmpThumbnailFile = await getS3File(COUPON.s3_key);
            if (tmpThumbnailFile)
                BODY.append("thumbnail", tmpThumbnailFile);
        }

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

        };

        let setUrl = route('api.promotion.coupon.set');
        if (COUPON?.id)
            setUrl += "/" + COUPON.id;

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

    function addProductOptions(grid) {
        appendSelectedRow(grid, productOptionGrid);
    }

    function disalbedChange(e) {
        const TARGET_NAME = e.target.name;

        if (TARGET_NAME == "is_issue_end_date_disabled") {
            document.getElementById("issue_end_date").disabled = e.target.checked;
            document.getElementById("issue_end_time").disabled = e.target.checked;
        } else if (TARGET_NAME == "is_use_end_date_disabled") {
            document.getElementById("use_end_date").disabled = e.target.checked;
            document.getElementById("use_end_time").disabled = e.target.checked;
        } else if (TARGET_NAME == "is_unlimited") {
            document.getElementById("issue_max").disabled = e.target.checked;
        } else if (TARGET_NAME == "is_automatic_code") {
            const $fixedCode = document.getElementById("fixed_code");
            if (e.target.value == 1) {
                $fixedCode.disabled = true;
                $fixedCode.value = null;
            } else
                $fixedCode.disabled = false;
        } else if (TARGET_NAME == "is_automatic_issue") {
            document.getElementById("automatic_issue_type_id").disabled = e.target.value == 1 ? false : true;
        } else if (TARGET_NAME == "coupon_discount_type_id") {
            e.target.closest("dd").querySelectorAll("input[name='discount_value']")
            .forEach(item => item.dataset.coupon_discount_type_id == e.target.value ? item.disabled = false : item.disabled = true);

            if (e.target.value == 2)
                document.getElementById("discount_max").disabled = false;
            else {
                const $discountMax = document.getElementById("discount_max");
                $discountMax.disabled = true;
                $discountMax.value = null;
            }
        }
    }

    function findThumbnail() {
        const $thumbnailElem = document.getElementById("thumbnail");
        $thumbnailElem.click();
    }

    function thumbnailChange(e) {
        const $thumbnailImageElem = document.getElementById("thumbnail_image");
        const imageSource = URL.createObjectURL(e.target.files[0]);
        $thumbnailImageElem.src = imageSource;
        URL.revokeObjectURL(e.target.files[0]);
    }

    function deleteThumbnail() {
        if (!COUPON?.id) {
            const $thumbnailElem = document.getElementById("thumbnail");
            if ($thumbnailElem)
                $thumbnailElem.value = null;

            const $imageElem = document.getElementById("thumbnail_image");
            if ($imageElem)
                $imageElem.src = "";

        } else {
            alertify.confirm("알림", "정말 삭제하시겠습니까?", () => {
                const URL = route('api.promotion.promotion.delete-thumbnail', {id: COUPON.id});
                edmAjax({
                    method: "DELETE",
                    url: URL,
                    callback: (response) => {
                        if (response.data)
                            alertify.alert("알림", "완료되었습니다.", () => location.reload());
                        else
                            alertify.alert("알림", "오류가 발생했습니다.");
                    },
                    errorCallback: (error) => {
                        alertify.alert("알림", "오류가 발생했습니다.");
                    }
                });
            }, () => 1);
        }
    }

    async function issueCoupons() {
        if (!COUPON?.id)
            return;

        const $requestIssueCount = document.getElementById("request_issue_count");
        const requestIssueCount = Number($requestIssueCount?.value);
        if (!requestIssueCount) {
            alertify.alert("알림", "내려받을 코드 매수를 입력해주세요.");
            return;
        }

        const url = route('api.promotion.coupon.issue-coupons');
        const data = {
            id: COUPON.id,
            count: requestIssueCount,
        }

        await edmAjax({
            url: url,
            data: data,
            method: "POST",
            callback: response => {
                if (response.status == 200 && response.data.length > 0) {
                    if (!COUPON.is_unlimited) {
                        const issuedCount = response.data.length;
                        const $issueRemainingCount = document.querySelector("strong.issue-remaining-count");
                        const originCount = Number($issueRemainingCount.innerText);
                        $issueRemainingCount.innerText = originCount - issuedCount;
                    }

                    downloadCode(response.data);
                }
            },
        });
    }

    function downloadCode(codes) {
        let text = "";
        codes.forEach(item => text = `${text}${item.code}\n`);
        const fileBlob = new Blob([text], {type: "text/plain"});
        downloadFileFromBlob(fileBlob, "coupon_codes.txt");
    }
</script>
@endpush