@extends("common.layout")

@php
    $page_title = $pageServiceName . ' CDT 이용권 ' . ($cdtPass?->id ? '상세보기 ('.$cdtPass->id.')' : '등록');
@endphp

@section('page-title', $page_title)

@section("header")
<script>
    // 자바스크립트 파일에서 필요한 모든 데이터를 전역 변수로 정의
    window.AppData = window.AppData || {};
    window.AppData.service = '{{ $service }}';
    window.AppData.cdtPassId = {{ $cdtPass->id ?? 'null' }};
</script>

{!! resource('css/form.css') !!}
{!! resource('js/form.js') !!}
{!! resource('js/product/cdt-pass-detail.js') !!}
{!! resource('js/product/cdt-pass-period.js') !!}
@endsection

@section("content")

<form id="cdtPass-form" action="{{ $cdtPass?->id ? route('product.cdt-pass.set', ['id'=>$cdtPass->id]) : route('product.cdt-pass.set') }}" method="post" class="default" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="service" value="{{ $service }}">

    <h1>
        <div>
            <a href="{{ route('product.cdt-pass.list', $service) }}"><i class="bi bi-arrow-left-circle"></i></a>
            {{ $page_title }}
        </div>

        <div class="fixed-btns btn-group">
            @if ($cdtPass?->id)
                @if ($User->is->root)
                <button class="btn btn-danger" type="button" onclick="cdtPassDelete({{ $cdtPass->id }}, '{{ $service }}')">삭제</button>
                @endif
            @endif
            <button type="submit" class="btn btn-primary">저장</button>
            <button class="btn btn-warning" type="button" onclick="toggleOptions(this)"><i class="bi bi-chevron-up"></i></button>
        </div>
    </h1>

    <div class="cdt-pass-layout mb-3">
        <section>
            <header>
                CDT 이용권
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtPass-{{ $cdtPass?->id }}-1"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                {{--CDT 이용권 번호--}}
                @if ($cdtPass?->id)
                <div class="form-group">
                    <label>CDT 이용권 번호</label>
                    <div class="right-col">
                        {{ $cdtPass->id }}
                        <input type="hidden" id="cdtPassId" value="{{ $cdtPass->id }}">
                    </div>
                </div>
                @endif

                {{--활성 구분--}}
                <div class="form-group">
                    <label>활성 구분</label>

                    <div class="right-col">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="activated" name="activated" value="1" @checked(!$cdtPass || $cdtPass->activated == 1)>
                        </div>

                        @if ($cdtPass?->activated === 0 && $cdtPass?->deactivated_at)
                            ({{ explode(" ", $cdtPass->deactivated_at)[0] }})
                        @endif
                    </div>
                </div>

                {{--모듈--}}
                <div class="form-group">
                    <label>모듈</label>
                    <div class="right-col">
                        @php
                            if (isset($cdtPass->module)) $modules = explode('|', $cdtPass->module);
                            else $modules = [];
                        @endphp
                        @foreach (config('system.modules') as $key => $module)
                        <div class="form-check">
                            <input type="checkbox" id="moduleId{{ $key }}" name="module[]" class="form-check-input" value="{{ $module }}" @checked(in_array($module, $modules))>
                            <label class="form-check-label" for="moduleId{{ $key }}">{{ $module }}</label>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{--지급방법--}}
                <div class="form-group">
                    <label>지급방법</label>

                    <div class="right-col">
                        @if ($cdtPass)
                            {{  $cdtPass->provide_method }}
                        @else
                            @foreach (config('system.cdt_provide_methods') as $method)
                            <div class="form-check">
                                <input type="radio" id="provide_method{{ $method }}" name="provide_method" class="form-check-input" value="{{ $method }}"
                                    @checked(($cdtPass && $cdtPass->provide_method == $method) || (!$cdtPass?->provide_method && $method == '상품구매'))
                                    @disabled($cdtPass && $cdtPass->provide_method != $method)>
                                <label class="form-check-label" for="provide_method{{ $method }}">{{ $method }}</label>
                            </div>
                            @endforeach
                        @endif
                    </div>
                </div>

                <div class="form-group">
                    <label>지급일</label>

                    <div class="right-col">
                        @if ($cdtPass)
                            {{  $cdtPass->provide_type }}
                        @else
                            @foreach (config('system.cdt_provide_types')[$service] as $item)
                            <div class="form-check">
                                <input type="radio" id="provide_type{{ $item }}" name="provide_type" class="form-check-input" value="{{ $item }}" @checked($item == $cdtPass?->provide_type)>
                                <label class="form-check-label" for="provide_type{{ $item }}">{{ $item }}</label>
                            </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </main>
        </section>

        <section>
            <header>
                기본 정보
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtPass-{{ $cdtPass?->id }}-basic"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                <div class="form-group">
                    <label for="name" class="required">CDT 이용권명</label>

                    <div class="right-col">
                        <input type="text" class="form-control" name="name" id="name" value="{{ $cdtPass?->name }}" placeholder="CDT 이용권명을 입력해 주세요." required>
                    </div>
                </div>

                <div class="form-group">
                    <label for="description">간략 소개</label>

                    <div class="right-col">
                        <input type="text" class="form-control" id="description" name="description" placeholder="" value="{{ $cdtPass?->description ?? '' }}">
                    </div>
                </div>

                <div class="form-group">
                    <label for="content">설명</label>

                    <div class="right-col">
                        <textarea name="content" id="content" class="form-control" cols="30" rows="10">{{ $cdtPass?->content ?? '' }}</textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label for="content">소비자가</label>

                    <div class="right-col">
                        <input type="number" class="form-control" id="consumer_price" name="consumer_price" placeholder="소비자가를 입력해 주세요." value="{{ $cdtPass?->consumer_price }}" min="0">
                    </div>
                </div>

                <div class="form-group">
                    <label for="content">판매가</label>

                    <div class="right-col">
                        <input type="number" class="form-control" id="sales_price" name="sales_price" placeholder="판매가를 입력해 주세요." value="{{ $cdtPass?->sales_price }}" min="0">
                    </div>
                </div>
            </main>
        </section>

        <section>
            <header>
                썸네일
                <div>
                    <button type="button" class="btn btn-info" onclick="$('#thumbnail').click();" id="thumbnail-find-btn">이미지 찾기</button>
                            <input class="d-none" type="file" id="thumbnail" name="thumbnail" accept="image/*" onchange="changeImage(event)"/>
                    <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtPass-{{ $cdtPass?->id }}-preview"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

            <main>
                <div id="thumbnail-wrapper">
                    @if ($cdtPass?->s3_key)
                        <div class="thumbnail-img-wrapper">
                            <button class="btn-delete" type="button" onclick="deleteImage({{ $cdtPass->id }})"><i class="bi bi-x-circle-fill"></i></button>
                            <img name="thumbnail" data-id="{{ $cdtPass->id }}" alt="" src="{{ app(\S3Helper::class)->getPublicUrl($cdtPass->s3_key) }}">
                        </div>
                    @endif
                </div>
            </main>
        </section>
    </div>
</form>

@if($cdtPass)
    <div class="layout-2-cols">
        @if ($cdtPass->provide_method == '상품구매' || $cdtPass->provide_method == '회원가입' || $cdtPass->provide_type == '매달 20일')
        <section>
            <header>
                지급용 무료 세트

                <div>
                    <button type="button" class="btn btn-success" onclick="popupSelector('cdt-set', {
                        service: '{{ $service }}', targetId: {{ $cdtPass->id }}, gridType: 'cdt-set', is_paid: 0,
                        removeIds: $('input[name^=cdtSets]').map(function() { return $(this).val(); }).get()
                        })"><i class="bi bi-plus-circle-dotted me-1"></i> 세트추가</button>

                    <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtPass-{{ $cdtPass?->id }}-sets"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

            <main>
                <x-product.cdt-set service="{{ $service }}" addable="1" optionId="{{ $cdtPass->id }}" :cdtSets="$cdtPass->availableCdtSets" />
            </main>
        </section>
        @elseif ($cdtPass->provide_type == 'CDT 모의고사일마다')
        <section>
            <header>
                CDT세트 지급
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtPass-{{ $cdtPass?->id }}-provide"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main>
                <div id="manual-provide-options">
                    <div id="cdt-set-fields">
                        @if ($mergedSchedules->count() > 0)
                            @foreach ($mergedSchedules as $item)
                                @php
                                    // 스케줄인 경우와 기존 지급 정보인 경우 구분
                                    if ($item instanceof \App\Domains\Schedule\Model\ScheduleDetail) {
                                        $date = $item->date;
                                        $cdtPassCdtSet = null;
                                        $cdtSetId = null;
                                        $expiryDate = null;
                                        $isPastDate = $date < date('Y-m-d');
                                        $isProvided = false;
                                    } else {
                                        $date = $item->provide_date;
                                        $cdtPassCdtSet = $item;
                                        $cdtSetId = $cdtPassCdtSet->cdt_set_id;
                                        $expiryDate = $cdtPassCdtSet->expiry_date;
                                        $isPastDate = $date < date('Y-m-d');
                                        $isProvided = true;
                                    }
                                @endphp
                                <div class="input-group input-group-sm my-1">
                                    <input type="date" id="cdt_provide_date{{ $loop->index }}" name="cdt_provide_date" value="{{ $date }}" class="form-control form-control-sm reset-width" {{ $isProvided ? 'readonly' : '' }}>
                                    <input type="date" id="cdt_expiry_date{{ $loop->index }}" name="cdt_expiry_date" value="{{ $expiryDate }}" class="form-control form-control-sm reset-width" placeholder="만료일" {{ $isProvided ? 'readonly' : '' }}>
                                    <select name="cdt_set_id" class="form-select form-select-sm" {{ $isProvided ? 'disabled' : '' }}>
                                        <option value="">선택하세요</option>
                                        @foreach ($cdtSets as $cdtSet)
                                            <option value="{{ $cdtSet->id }}" @selected($cdtSetId == $cdtSet->id)>{{ $cdtSet->name }}</option>
                                        @endforeach
                                    </select>

                                    @if ($isProvided)
                                        <div class="input-group-text">지급완료</div>
                                    @elseif ($isPastDate)
                                        <div class="input-group-text">기한만료</div>
                                    @else
                                        <button type="button" class="btn btn-info btn-sm" disabled>지급</button>
                                    @endif
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </main>
        </section>
        @elseif ($cdtPass->provide_type == '즉시지급')
        <section>
            <header>
                CDT세트 지급
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtPass-{{ $cdtPass?->id }}-provide2"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main>
                @php

                @endphp
                <div id="cdt-set-fields">
                    <div class="input-group input-group-sm my-1">
                        <input type="date" id="cdt_provide_date" name="cdt_provide_date" value="{{ date('Y-m-d') }}" class="form-control form-control-sm reset-width" placeholder="지급일">
                        <input type="date" id="cdt_expiry_date" name="cdt_expiry_date" class="form-control form-control-sm reset-width" placeholder="만료일">
                        <select name="cdt_set_id" class="form-select form-select-sm">
                            <option value="">선택하세요</option>
                            @foreach ($cdtSets as $cdtSet)
                                <option value="{{ $cdtSet->id }}">{{ $cdtSet->name }}</option>
                            @endforeach
                        </select>

                        <button type="button" class="btn btn-info btn-sm" disabled>지급</button>
                    </div>
                </div>
            </main>
        </section>
        {{-- @else
        <section>
            <header>
                CDT세트 지급
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtPass-{{ $cdtPass?->id }}-provide2"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main>
                <div class="alert alert-info">
                    매달 20일에 랜덤하게 자동 지급됩니다.
                </div>
            </main>
        </section> --}}
        @endif

        <section>
            <header>
                포함 상품
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtPass-{{ $cdtPass?->id }}-products"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main>
                <table class="table table-sm table-striped table-hover">
                    <colgroup>
                        <col width="30">
                    </colgroup>
                    <thead>
                        <tr class="text-center">
                            <th>번호</th>
                            <th class="text-start">상품명</th>
                            <th>모듈</th>
                            <th>판매중</th>
                            <th>등록일</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($cdtPass->productOptions as $productOption)
                        <tr class="text-center">
                            <td>{{ $productOption->id }}</td>
                            <td class="text-start">
                                <a href="{{ route('product.detail', ['id' => $productOption->product->id, 'service' => $productOption->product->service]) }}">{{ $productOption->product->name }}</a>
                                {{ $productOption->name }}
                            </td>
                            <td>{{ $productOption->product->module }}</td>
                            <td>{{ $productOption->product->is_sellable ? 'Y':'' }}</td>
                            <td>{{ explode(" ", $productOption->product->created_at)[0] }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </main>
        </section>
    </div>

    @if ($cdtPass->provide_method == '직접지급')
        @if ($cdtPass->enrollmentCdtPasses->count() > 0)
            <section class="cdt-pass-users mt-3">
                <header>
                    지급 내역
                    <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtPass-{{ $cdtPass?->id }}-history"><i class="bi bi-chevron-up"></i></button>
                </header>

                <main>
                    <form id="update-users-form" action="{{ route('api.product.cdt-pass.update') }}" method="POST">
                        @csrf
                        <input type="hidden" name="service" value="{{ $service }}">
                        <input type="hidden" name="cdt_pass_id" value="{{ $cdtPass->id }}">

                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th class="text-center">번호</th>
                                    <th>이름</th>
                                    <th>상품</th>
                                    <th>첨삭이용권</th>
                                    <th>수강기간</th>
                                    <th class="text-center">남은 횟수</th>
                                    <th>이용횟수</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($cdtPass->enrollmentCdtPasses as $enrollmentCdtPass)
                                    <tr>
                                        <td class="text-center">
                                            <input type="checkbox" name="enrollment_ids[]" value="{{ $enrollmentCdtPass->enrollment->id }}">
                                        </td>

                                        <td class="text-center">
                                            {{ $enrollmentCdtPass->enrollment->id }}
                                        </td>

                                        <td>
                                            {{ $enrollmentCdtPass->user->name }}
                                        </td>

                                        <td>
                                            <a class="product-link" href="{{ route('product.detail', ['id' => $enrollmentCdtPass->enrollment->product->id, 'service' => $enrollmentCdtPass->enrollment->product->service]) }}">{{ $enrollmentCdtPass->enrollment->product->name }}</a>
                                            {{ $enrollmentCdtPass->enrollment->productOption->name }}

                                            @if ($enrollmentCdtPass->enrollmentCdtSets->count() > 0)
                                                <button type="button" class="btn btn-sm btn-outline-success toggle-cdt-set-table" data-id="{{ $enrollmentCdtPass->id }}">지급된 CDT 세트</button>
                                            @endif
                                        </td>

                                        <td>
                                            @foreach($enrollmentCdtPass->enrollmentFeedbackPasses as $enrollmentFeedbackPass)
                                                <a href="{{ route('product.feedback-pass.detail', ['id' => $enrollmentFeedbackPass->feedbackPass->id, 'service' => $enrollmentFeedbackPass->feedbackPass->service]) }}">{{ $enrollmentFeedbackPass->feedbackPass->name }}</a>
                                            @endforeach
                                        </td>

                                        <td>
                                            {{  explode(' ', $enrollmentCdtPass->enrollment->started_at)[0] }} ~ {{ explode(' ', $enrollmentCdtPass->enrollment->ended_at)[0] }}
                                        </td>

                                        <td class="text-center">{{ floor($enrollmentCdtPass->remaining_count) }}</td>

                                        <td>
                                            <input type="number" min="0" max="{{ $cdtPass->total_use_count }}" class="form-control form-control-sm" name="user_total_use_count[{{ $enrollmentCdtPass->id }}]" value="{{ $enrollmentCdtPass->total_use_count }}">
                                        </td>
                                    </tr>

                                    @if ($enrollmentCdtPass->enrollmentCdtSets->count() > 0)
                                    <tr>
                                        <td colspan="10" class="cdt-set-detail" id="cdt-set-table-{{ $enrollmentCdtPass->id }}">
                                            <table class="table table-bordered cdt-set-detail-table">
                                                <thead>
                                                    <tr class="text-center">
                                                        <th>지급일</th>
                                                        <th>만료일</th>
                                                        <th>사용일</th>
                                                        <th>CDT 세트</th>
                                                        <th>듣기</th>
                                                        <th>읽기</th>
                                                        <th>쓰기</th>
                                                        <th>말하기</th>
                                                        <th>듣기점수</th>
                                                        <th>읽기점수</th>
                                                        <th>종합점수</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                @foreach($enrollmentCdtPass->enrollmentCdtSets as $enrollmentCdtSet)
                                                <tr class="text-center">
                                                    <td>
                                                        {{-- <input type="date" id="pd{{ $enrollmentCdtSet->id }}" value="{{ explode(' ', $enrollmentCdtSet->provide_date)[0] }}" class="form-control form-control-sm"> --}}
                                                        {{ explode(' ', $enrollmentCdtSet->provide_date)[0] }}
                                                    </td>
                                                    <td class="provide-date">
                                                        <input type="date" id="ed{{ $enrollmentCdtSet->id }}" value="{{ explode(' ', $enrollmentCdtSet->expiry_date)[0] }}" class="form-control form-control-sm">
                                                    </td>
                                                    <td>
                                                        {{  $enrollmentCdtSet->used_at ? explode(' ', $enrollmentCdtSet->used_at)[0] : '' }}
                                                    </td>
                                                    <td class="cdt-set">
                                                        <select class="form-select form-select-sm" onchange="setCdtSetId('cdt_set_id', this, {{ $enrollmentCdtSet->id }})">
                                                            <option value=""></option>
                                                            @foreach($cdtSets as $cdtSet)
                                                                <option value="{{ $cdtSet->id }}" @selected($cdtSet->id == $enrollmentCdtSet->cdt_set_id)>{{ $cdtSet->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td>{{ $enrollmentCdtSet->listening_status }}</td>
                                                    <td>{{ $enrollmentCdtSet->reading_status }}</td>
                                                    <td>{{ $enrollmentCdtSet->writing_status }}</td>
                                                    <td>{{ $enrollmentCdtSet->speaking_status }}</td>
                                                    <td>{{ $enrollmentCdtSet->listening_score }}</td>
                                                    <td>{{ $enrollmentCdtSet->reading_score }}</td>
                                                    <td>{{ $enrollmentCdtSet->overall_score }}</td>
                                                </tr>
                                                @endforeach
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>

                        <div class="text-end">
                            <button id="update-btn" type="submit" class="btn btn-sm btn-primary">이용제한 업데이트</button>
                        </div>
                    </form>
                </main>
            </section>
        @endif
    @endif
@endif

@endsection

@push("script")
<script>
function setCdtSetId(column, element, enrollmentCdtSetId) {
    const $element = $(element);
    let val = element.value;

    // 특별히 input[type="date"] 처리
    if (element.tagName.toLowerCase() === 'input') {
        // 초기화 시점 처리
        if (!$element.data('initialized')) {
            $element.data('initialized', true);
            $element.data('original-value', val);

            // 기존 이벤트를 제거하고 변경 이벤트만 처리
            $element.off('change').on('change', function() {
                const newVal = this.value;
                const oldVal = $(this).data('original-value');

                // 값이 변경된 경우에만 처리
                if (newVal !== oldVal) {
                    // 이미 존재하는 apply 버튼을 제거
                    const existingButton = $(this).next('.cdt-set-apply-btn');
                    if (existingButton.length > 0) {
                        existingButton.remove();
                    }

                    // 제공일이 변경되면 만료일도 자동으로 계산
                    if (column === 'provide_date') {
                        // 만료일 입력 필드 찾기
                        const $expiryInput = $(this).closest('.input-group').find('input[name^="cdt_expiry_date"]');
                        if ($expiryInput.length > 0) {
                            // 이 행이 마지막 행인지 확인
                            const $currentRow = $(this).closest('.input-group');
                            const $nextRow = $currentRow.next('.input-group');

                            if ($nextRow.length > 0) {
                                // 다음 행이 있는 경우, 다음 행의 제공일 전날이 만료일
                                const nextProvideDate = new Date($nextRow.find('input[name^="cdt_provide_date"]').val());
                                nextProvideDate.setDate(nextProvideDate.getDate() - 1);
                                $expiryInput.val(nextProvideDate.toISOString().split('T')[0]);
                            } else {
                                // 마지막 행인 경우, 전체 종료일이 만료일
                                const endDate = $("#end-date").val();
                                if (endDate && endDate !== "수강종료일") {
                                    $expiryInput.val(endDate);
                                }
                            }
                        }
                    }

                    // 새로운 apply 버튼 추가
                    createApplyButton(column, this, enrollmentCdtSetId, newVal);
                }
            });

            return; // 초기화만 하고 종료
        }

        // blur 이벤트로 호출된 경우, 값의 변경 여부 확인
        if ($element.data('original-value') === val) {
            // 값이 변경되지 않았으면 버튼 표시하지 않음
            const existingButton = $element.next('.cdt-set-apply-btn');
            if (existingButton.length > 0) {
                existingButton.remove();
            }
            return;
        }
    } else if (element.tagName.toLowerCase() === 'select') {
        // select 요소의 초기화
        if ($element.data('original-value') === undefined) {
            $element.data('original-value', val);
            return; // 초기화만 하고 종료
        }

        // 값이 변경되지 않았으면 버튼 표시하지 않음
        if ($element.data('original-value') === val) {
            const existingButton = $element.next('.cdt-set-apply-btn');
            if (existingButton.length > 0) {
                existingButton.remove();
            }
            return;
        }
    }

    // 여기까지 왔다면 값이 변경된 경우이므로 버튼 생성
    createApplyButton(column, element, enrollmentCdtSetId, val);
}

// 버튼 생성 및 AJAX 처리를 위한 별도 함수
function createApplyButton(column, element, enrollmentCdtSetId, value) {
    const $element = $(element);

    // 이미 존재하는 apply 버튼을 제거
    const existingButton = $element.next('.cdt-set-apply-btn');
    if (existingButton.length > 0) {
        existingButton.remove();
    }

    // 새로운 apply 버튼 추가
    const applyButton = $('<button>')
        .addClass('btn btn-sm btn-primary cdt-set-apply-btn')
        .attr('type', 'button')
        .text('적용')
        .on('click', function() {
            // 버튼 비활성화 및 로딩 표시
            const $btn = $(this);
            $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 처리중...');

            // 현재 값을 다시 가져와서 사용
            const currentValue = element.value;

            // 만료일 값도 함께 전송할지 확인
            let additionalData = {};
            if (column === 'provide_date') {
                // 만료일 입력 필드 찾기
                const $expiryInput = $(element).closest('.input-group').find('input[name^="cdt_expiry_date"]');
                if ($expiryInput.length > 0) {
                    additionalData.expiry_date = $expiryInput.val();
                }
            }

            // // 동적으로 폼 생성
            // const $form = $('<form>', {
            //     action: '{{ route("api.product.cdt-pass.update-cdt-set") }}',
            //     method: 'POST'
            // });

            // // 폼에 필요한 필드 추가
            // $form.append($('<input>', {
            //     type: 'hidden',
            //     name: 'enrollmentCdtSetId',
            //     value: enrollmentCdtSetId
            // }));

            // $form.append($('<input>', {
            //     type: 'hidden',
            //     name: 'column',
            //     value: column
            // }));

            // $form.append($('<input>', {
            //     type: 'hidden',
            //     name: 'value',
            //     value: currentValue
            // }));

            // // 추가 데이터가 있으면 폼에 추가
            // for (const [key, val] of Object.entries(additionalData)) {
            //     $form.append($('<input>', {
            //         type: 'hidden',
            //         name: key,
            //         value: val
            //     }));
            // }

            // $form.append($('<input>', {
            //     type: 'hidden',
            //     name: '_token',
            //     value: '{{ csrf_token() }}'
            // }));

            // // 폼을 body에 추가하고 제출
            // $('body').append($form);
            // $form.submit();

            // Ajax 요청
            $.ajax({
                url: '{{ route("api.product.cdt-pass.update-cdt-set") }}',
                type: 'POST',
                data: {
                    enrollmentCdtSetId: enrollmentCdtSetId,
                    column: column,
                    value: currentValue,
                    ...additionalData,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    // 성공 알림
                    alertify.success('CDT Set이 업데이트되었습니다.');

                    // 버튼 제거
                    $btn.remove();

                    // 새로운 원본 값 저장
                    $element.data('original-value', currentValue);

                    // 만료일 입력 필드의 원본 값도 업데이트
                    if (column === 'provide_date' && additionalData.expiry_date) {
                        const $expiryInput = $(element).closest('.input-group').find('input[name^="cdt_expiry_date"]');
                        if ($expiryInput.length > 0) {
                            $expiryInput.data('original-value', additionalData.expiry_date);
                        }
                    }
                },
                error: function(xhr, status, error) {
                    // 에러 알림
                    alertify.error('업데이트 중 오류가 발생했습니다: ' + (xhr.responseJSON?.message || error));

                    // 버튼 다시 활성화
                    $btn.prop('disabled', false).text('적용');
                }
            });
        });

    // 요소 다음에 버튼 추가
    $element.after(applyButton);
}

function toggleAllCheckboxes(checkbox, name) {
    const isChecked = checkbox.checked;
    const checkboxes = document.querySelectorAll(`input[name="${name}"]`);

    checkboxes.forEach(function(item) {
        item.checked = isChecked;
    });
}

$(document).ready(function() {
    // 모든 날짜 필드 초기화
    $('.provide-date input').each(function() {
        const id = $(this).attr('id');
        const enrollmentCdtSetId = id.startsWith('ed') ? id.replace('ed', '') : id.replace('pd', '');
        setCdtSetId('expiry_date', this, enrollmentCdtSetId);
    });

    // 모든 select 필드 초기화
    $('.cdt-set select').each(function() {
        setCdtSetId('cdt_set_id', this, $(this).closest('tr').find('.provide-date input').attr('id').replace('pd', ''));
    });

    // 초기 만료일 설정 (첫 로드 시)
    $('.cdt-set-detail-table tbody tr').each(function(index, row) {
        const $row = $(row);
        const $provideInput = $row.find('.provide-date input');
        const $expiryInput = $row.find('input[name^="cdt_expiry_date"]');

        if ($provideInput.length > 0 && $expiryInput.length > 0) {
            const provideDate = $provideInput.val();
            if (provideDate) {
                // 다음 행 확인
                const $nextRow = $row.next('tr');
                if ($nextRow.length > 0) {
                    // 다음 행이 있는 경우, 다음 행의 제공일 전날이 만료일
                    const nextProvideDate = new Date($nextRow.find('.provide-date input').val());
                    nextProvideDate.setDate(nextProvideDate.getDate() - 1);
                    $expiryInput.val(nextProvideDate.toISOString().split('T')[0]);
                } else {
                    // 마지막 행인 경우, 전체 종료일이 만료일
                    const endDate = $("#end-date").val();
                    if (endDate && endDate !== "수강종료일") {
                        $expiryInput.val(endDate);
                    }
                }
            }
        }
    });

    $('#cdt-set-fields button').each(function(){
        const $btn = $(this);

        $btn.on('click', function() {
            // 해당 row 의 input 값들로 ajax 요청
            const $row = $btn.closest('.input-group');
            const provideDate = $row.find('input[name="cdt_provide_date"]').val();
            const expiryDate = $row.find('input[name="cdt_expiry_date"]').val();
            const cdtSetId = $row.find('select[name="cdt_set_id"]').val();
            const cdtPassId = $('#cdtPassId').val();
            const url = '{{ route("api.product.cdt-pass.provide-cdt-set") }}';

            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    cdt_pass_id: cdtPassId,
                    cdt_set_id: cdtSetId,
                    provide_date: provideDate,
                    expiry_date: expiryDate,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log(response);

                    // 성공 알림
                    alertify.success('CDT Set이 업데이트되었습니다.');

                    // location.reload();

                    // 버튼 제거
                    $btn.remove();

                    // 새로운 원본 값 저장
                    $row.find('input[name="cdt_provide_date"]').data('original-value', provideDate);
                    $row.find('input[name="cdt_expiry_date"]').data('original-value', expiryDate);
                },
                error: function(xhr, status, error) {
                    // 에러 알림
                    alertify.error((xhr.responseJSON?.message || error));

                    // 버튼 다시 활성화
                    $btn.prop('disabled', false).text('적용');
                }
            });

            // // 동적으로 폼 생성
            // const $form = $('<form>', {
            //     action: '{{ route("api.product.cdt-pass.provide-cdt-set") }}',
            //     method: 'POST',
            //     style: 'display: none;'
            // });

            // // 폼에 필요한 필드 추가
            // $form.append($('<input>', {
            //     type: 'hidden',
            //     name: 'cdt_pass_id',
            //     value: cdtPassId
            // }));

            // $form.append($('<input>', {
            //     type: 'hidden',
            //     name: 'cdt_set_id',
            //     value: cdtSetId
            // }));

            // $form.append($('<input>', {
            //     type: 'hidden',
            //     name: 'provide_date',
            //     value: provideDate
            // }));

            // $form.append($('<input>', {
            //     type: 'hidden',
            //     name: 'expiry_date',
            //     value: expiryDate
            // }));

            // $form.append($('<input>', {
            //     type: 'hidden',
            //     name: '_token',
            //     value: '{{ csrf_token() }}'
            // }));

            // // 폼을 body에 추가하고 제출
            // $('body').append($form);
            // $form.submit();
        });
    });

    // 페이지 로드 시 모든 제공일 필드에 대해 만료일 자동 계산 실행
    $("#cdt-set-fields").find('input[name^="cdt_provide_date"]').each(function() {
        // 읽기 전용이 아닌 필드만 처리
        if (!$(this).attr("readonly") && !$(this).attr("disabled")) {
            CDTPeriodCalculator.updateExpiryDate(this);
        }
    });

    // CDT 세트 선택 시 지급 버튼 활성화
    $('#cdt-set-fields').on('change', 'select[name^="cdt_set_id"]', function() {
        const $select = $(this);
        const $row = $select.closest('.input-group');
        const $button = $row.find('button');

        // 선택된 값이 있으면 버튼 활성화
        $button.prop('disabled', !$select.val());
    });

    // 기존 버튼 초기화
    $('#cdt-set-fields select[name^="cdt_set_id"]').each(function() {
        const $select = $(this);
        const $row = $select.closest('.input-group');
        const $button = $row.find('button');

        // 선택된 값이 있으면 버튼 활성화
        $button.prop('disabled', !$select.val());
    });
});
</script>
@endpush