@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') !!}

<style>
    .p-list + .p-list { margin-left: 6px;}
    .p-list + .p-list::before { content : ""; border-left: 2px solid #9a9a9a; padding-left: 6px}
</style>
@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)


        @if ( $cdtPass->provide_method == '상품구매' && $cdtPass->provide_type == '종강일마다' )
            <section class="mb-3">
                <header>종강일</header>
                <main>

                    <table class="table table-striped table-hover">
                        <colgroup>
                            <col width="150px">
                            <col width="/">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>종강일</th>
                                <th>해당상품</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($mergedSchedules as $date => $schedule)
                                <tr>
                                    <td>{{ $date }}</td>
                                    <td style="display: flex">
                                        <span class="badge badge-info mr-3">{{ sizeof( $schedule) }}개</span>
                                        <div>
                                            @foreach ($schedule as $product)
                                                <a href="javascript:onOpenSchedulePopup('period', {{ $product['product_id'] }})" class=" p-list">{{ $product['product_name'] }}</a>
                                            @endforeach
                                        </div>
                                    </td>
                                </tr>
                            @endforeach

                        </tbody>
                    </table>
                </main>
            </section>
        @endif


    {{-- @if ($cdtPass->provide_method == '직접지급')<div class="layout-2-cols lb-layout max-scroll">@endif --}}
        @if ($cdtPass->provide_method == '상품구매' || $cdtPass->provide_method == '회원가입' || $cdtPass->provide_type == '매달 20일' ||  $cdtPass->provide_type == '종강일마다')
        <section class="mb-3">
            <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>
        @endif
        @if ($cdtPass->provide_type == 'CDT 모의고사일마다')
        <section class="mb-3">
            <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 class="alert alert-info">
                    지급일이 수강기간 내에 있는 회원들에게만 지급됩니다.
                </div>

                <div id="manual-provide-options">
                    <div id="cdt-set-fields">
                        @if ($mergedSchedules->count() > 0)
                            @foreach ($mergedSchedules as $item)
                                @php
                                    $isAutomatic = false;
                                    // 스케줄인 경우와 기존 지급 정보인 경우 구분
                                    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="hidden" name="cdt_pass_cdt_set_id" value="{{ $isProvided ? $item->id : '' }}">
                                    <input type="date" id="cdt_provide_date{{ $loop->index }}" name="cdt_provide_date" value="{{ $date }}" class="form-control form-control-sm reset-width">
                                    <input type="date" id="cdt_expiry_date{{ $loop->index }}" name="cdt_expiry_date" value="{{ $expiryDate }}" class="form-control form-control-sm reset-width" placeholder="만료일">
                                    <select name="cdt_set_id" class="form-select form-select-sm" @disabled($isAutomatic)>
                                        <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> --}}
                                        <button type="button" class="btn btn-warning btn-sm provide" disabled>지급</button>
                                        <button type="button" class="btn btn-danger btn-sm revoke">회수</button>
                                    @elseif ($isPastDate)
                                        <div class="input-group-text">기한만료</div>
                                    @else
                                        <button type="button" class="btn btn-info btn-sm provide" disabled>지급</button>
                                    @endif
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </main>
        </section>
        {{-- @elseif ($cdtPass->provide_type == '즉시지급') --}}
        @endif

        @if ($cdtPass->provide_type == '즉시지급' || $cdtPass->provide_type == '매달 20일')
        <section class="mb-3">
            <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 }}">
                                    {{ strtoupper($cdtSet->service) }}
                                    {{ strtoupper($cdtSet->module) }} -
                                    {{ $cdtSet->name }}
                                </option>
                            @endforeach
                        </select>

                        <button type="button" class="btn btn-info btn-sm provide" disabled>지급</button>
                    </div>
                </div>
            </main>
        </section>
        @endif

        @if ($cdtPass)
        <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 }}">

            <section class="cdt-pass-users mb-3">
                <header>
                    지급 내역

                    <div class="d-flex align-items-center">
                        <div class="input-group input-group-sm reset-width me-3">
                            <input type="text" id="enrollment-search"
                                placeholder="이름, 아이디, 상품명 검색"
                                class="form-control form-control-sm reset-width"
                                style="width: 200px;"
                                value="{{ request('search') }}">
                            <input type="number" name="per_page"
                                value="{{ request('per_page', 20) }}"
                                class="form-control form-control-sm text-center"
                                style="width: 60px;"
                                min="1"
                                title="페이지당 표시할 항목 수"
                                placeholder="20">
                            <span class="input-group-text small">개/페이지</span>
                            <button type="button" id="search-btn" class="btn btn-sm btn-outline-primary">검색</button>
                            <button type="button" id="reset-btn" class="btn btn-sm btn-outline-secondary">초기화</button>
                        </div>

                        <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>
                    </div>
                </header>

                <main id="enrollments-section">
                    <div class="text-center py-4">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2 text-muted">지급 내역을 불러오는 중...</p>
                    </div>
                </main>
            </section>
        </form>
        @endif
    {{-- @if ($cdtPass->provide_method == '직접지급')</div>@endif --}}

    <section class="max-scroll">
        <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>
@endif

@endsection

@push("script")

{!! resource("js/schedule/schedule.js") !!}
<script>
function setCdtSetId(column, element, enrollmentCdtSetId) {
    const $element = $(element);
    let val = element.value;

    console.log(`setCdtSetId called for column: ${column}, value: ${val}, enrollmentCdtSetId: ${enrollmentCdtSetId}`);

    // input[type="date"] 처리
    if (element.tagName.toLowerCase() === 'input' && element.type === 'date') {
        // 초기화 시점 처리
        if (!$element.data('initialized')) {
            $element.data('initialized', true);
            $element.data('original-value', val);
            console.log(`Initialized date input: ${element.id} with value: ${val}`);
            return; // 초기화만 하고 종료
        }

        // 값이 변경되지 않았으면 처리하지 않음
        if ($element.data('original-value') === val) {
            console.log(`No change detected for ${element.id}`);
            const existingButton = $element.next('.cdt-set-apply-btn');
            if (existingButton.length > 0) {
                existingButton.remove();
            }
            return;
        }

        console.log(`Value changed for ${element.id}: ${$element.data('original-value')} -> ${val}`);
    }
    // select 처리
    else if (element.tagName.toLowerCase() === 'select') {
        if ($element.data('original-value') === undefined) {
            $element.data('original-value', val);
            console.log(`Initialized select: ${element.name} with value: ${val}`);
            return;
        }

        if ($element.data('original-value') === val) {
            console.log(`No change detected for select: ${element.name}`);
            const existingButton = $element.next('.cdt-set-apply-btn');
            if (existingButton.length > 0) {
                existingButton.remove();
            }
            return;
        }

        console.log(`Select value changed: ${$element.data('original-value')} -> ${val}`);
    }

    // 버튼 생성
    createApplyButton(column, element, enrollmentCdtSetId, val);
}

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

    // console.log(`Creating apply button for column: ${column}, value: ${value}, enrollmentCdtSetId: ${enrollmentCdtSetId}`);

    // 이미 존재하는 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;
    });
}

window.createApplyButton = createApplyButton;
window.setCdtSetId = setCdtSetId;

$(document).ready(function() {
    // enrollment_ids[] 체크박스 클릭 이벤트
    $(document).on('change', 'input[name="enrollment_ids[]"]', function() {
        const $checkbox = $(this);
        const $tr = $checkbox.closest('tr');

        if ($checkbox.is(':checked')) {
            $tr.addClass('selected');
        } else {
            $tr.removeClass('selected');
        }
    });

    // 전체 선택 체크박스와 연동
    $(document).on('change', 'input[type="checkbox"][onclick*="toggleAllCheckboxes"]', function() {
        const isChecked = $(this).is(':checked');

        $('input[name="enrollment_ids[]"]').each(function() {
            const $checkbox = $(this);
            const $tr = $checkbox.closest('tr');

            if (isChecked) {
                $tr.addClass('selected');
            } else {
                $tr.removeClass('selected');
            }
        });

        if (isChecked) {
            $('#update-btn').prop('disabled', false);
        } else {
            $('#update-btn').prop('disabled', true);
        }
    });

    // 모든 날짜 필드 초기화
    // $('.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);
    // });
    $(document).on('change', '.provide-date input[type="date"]', function() {
        const $input = $(this);
        const id = $input.attr('id');
        const enrollmentCdtSetId = id.startsWith('ed') ? id.replace('ed', '') : id.replace('pd', '');
        const newValue = this.value;

        // 초기화 확인
        if (!$input.data('initialized')) {
            $input.data('initialized', true);
            $input.data('original-value', newValue);
            console.log(`Initialized date input: ${id} with value: ${newValue}`);
            return; // 초기화 시에는 버튼 생성하지 않음
        }

        const originalValue = $input.data('original-value');

        // 값이 변경되지 않았으면 기존 버튼 제거
        if (originalValue === newValue) {
            console.log(`No change detected for ${id}`);
            const existingButton = $input.next('.cdt-set-apply-btn');
            if (existingButton.length > 0) {
                existingButton.remove();
            }
            return;
        }

        // console.log(`Value changed for ${id}: ${originalValue} -> ${newValue}`);

        // 버튼 생성
        createApplyButton('expiry_date', this, enrollmentCdtSetId, newValue);
    });

    // 모든 select 필드 초기화
    // $('.cdt-set select').each(function() {
    //     setCdtSetId('cdt_set_id', this, $(this).closest('tr').find('.provide-date input').attr('id').replace('pd', ''));
    // });
    $(document).on('change', '.cdt-set select', function() {
        const $select = $(this);
        const $row = $select.closest('tr');
        const $provideDateInput = $row.find('.provide-date input[type="date"]');

        if ($provideDateInput.length > 0) {
            const id = $provideDateInput.attr('id');
            const enrollmentCdtSetId = id.startsWith('ed') ? id.replace('ed', '') : id.replace('pd', '');
            const newValue = this.value;

            // 초기화 확인
            if (!$select.data('initialized')) {
                $select.data('initialized', true);
                $select.data('original-value', newValue);
                console.log(`Initialized select with value: ${newValue}`);
                return;
            }

            const originalValue = $select.data('original-value');

            // 값이 변경되지 않았으면 기존 버튼 제거
            if (originalValue === newValue) {
                console.log(`No change detected for select`);
                const existingButton = $select.next('.cdt-set-apply-btn');
                if (existingButton.length > 0) {
                    existingButton.remove();
                }
                return;
            }

            console.log(`Select value changed: ${originalValue} -> ${newValue}`);

            // 버튼 생성
            createApplyButton('cdt_set_id', this, enrollmentCdtSetId, newValue);
        }
    });

    // 페이지 로드 시 모든 요소 초기화 (setCdtSetId 호출하지 않음)
    // $('.provide-date input[type="date"]').each(function() {
    //     const $input = $(this);
    //     $input.data('initialized', true);
    //     $input.data('original-value', this.value);
    //     console.log(`Pre-initialized date input: ${this.id} with value: ${this.value}`);
    // });

    // $('.cdt-set select').each(function() {
    //     const $select = $(this);
    //     $select.data('initialized', true);
    //     $select.data('original-value', this.value);
    //     console.log(`Pre-initialized select with value: ${this.value}`);
    // });

    // 초기 만료일 설정 (첫 로드 시)
    $('.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.provide').each(function(){
        const $btn = $(this);

        $btn.on('click', function() {
            // 해당 row 의 input 값들
            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 cdtPassCdtSetId = $row.find('input[name="cdt_pass_cdt_set_id"]').val();
            const cdtPassId = $('#cdtPassId').val();
            const url = '{{ route("api.product.cdt-pass.provide-cdt-set") }}';

            // 선택된 enrollment_ids 체크박스 값 수집
            const checkedEnrollmentIds = [];
            $('input[name="enrollment_ids[]"]:checked').each(function() {
                checkedEnrollmentIds.push($(this).val());
            });

            // 선택된 수강생이 없을 때 확인 메시지 표시 (올바른 방법)
            if (checkedEnrollmentIds.length === 0) {
                alertify.confirm('확인', '선택 대상을 선택하지 않으면 모든 수강생에게 지급이 됩니다. 계속하시겠습니까?',
                    function() {
                        // 확인 버튼 클릭 시 실행
                        executeProvideRequest();
                    },
                    function() {
                        // 취소 버튼 클릭 시 실행
                        console.log('사용자가 취소를 선택했습니다.');
                    }
                );
                return; // 함수 종료
            }

            // 선택된 수강생이 있으면 바로 실행
            executeProvideRequest();

            // 실제 AJAX 요청 함수
            function executeProvideRequest() {
                // 버튼 상태 업데이트 - 처리 중임을 표시
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 처리중...');

                // 기본 요청 데이터
                const requestData = {
                    cdt_pass_id: cdtPassId,
                    cdt_set_id: cdtSetId,
                    provide_date: provideDate,
                    expiry_date: expiryDate,
                    cdt_pass_cdt_set_id: cdtPassCdtSetId,
                    _token: '{{ csrf_token() }}'
                };

                // 선택된 enrollment_ids가 있으면 요청 데이터에 추가
                if (checkedEnrollmentIds.length > 0) {
                    requestData.enrollment_ids = checkedEnrollmentIds;
                }

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: requestData,
                    success: function(response) {
                        // 성공 알림
                        const message = checkedEnrollmentIds.length > 0 ?
                            '선택한 사용자들에게 CDT Set이 지급되었습니다.' :
                            'CDT Set이 모든 사용자들에게 지급되었습니다.';
                        alertify.success(message);

                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        // 에러 알림
                        alertify.error((xhr.responseJSON?.message || error));

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

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

        $btn.on('click', function() {
            // 해당 row 의 input 값들
            const $row = $btn.closest('.input-group');
            const cdtPassCdtSetId = $row.find('input[name="cdt_pass_cdt_set_id"]').val();
            const cdtPassId = $('#cdtPassId').val();
            const url = '{{ route("api.product.cdt-pass.revoke-cdt-set") }}';

            // 선택된 enrollment_ids 체크박스 값 수집
            const checkedEnrollmentIds = [];
            $('input[name="enrollment_ids[]"]:checked').each(function() {
                checkedEnrollmentIds.push($(this).val());
            });

            // 선택된 수강생이 없을 때 확인 메시지 표시
            if (checkedEnrollmentIds.length === 0) {
                alertify.confirm('확인', '선택 대상을 선택하지 않으면 모든 수강생에게서 회수가 됩니다. 계속하시겠습니까?',
                    function() {
                        // 확인 버튼 클릭 시 실행
                        executeRevokeRequest();
                    },
                    function() {
                        // 취소 버튼 클릭 시 실행
                        console.log('사용자가 취소를 선택했습니다.');
                    }
                );
                return; // 함수 종료
            }

            // 선택된 수강생이 있으면 바로 실행
            executeRevokeRequest();

            // 실제 AJAX 요청 함수
            function executeRevokeRequest() {
                // 버튼 상태 업데이트 - 처리 중임을 표시
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 처리중...');

                // 기본 요청 데이터
                const requestData = {
                    cdt_pass_id: cdtPassId,
                    cdt_pass_cdt_set_id: cdtPassCdtSetId,
                    _token: '{{ csrf_token() }}'
                };

                // 선택된 enrollment_ids가 있으면 요청 데이터에 추가
                if (checkedEnrollmentIds.length > 0) {
                    requestData.enrollment_ids = checkedEnrollmentIds;
                }

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: requestData,
                    success: function(response) {
                        // 성공 알림
                        const message = checkedEnrollmentIds.length > 0 ?
                            '선택한 사용자들에게서 CDT Set이 회수되었습니다.' :
                            '모든 사용자들에게서 CDT Set이 회수되었습니다.';
                        alertify.success(message);

                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        // 에러 알림
                        alertify.error((xhr.responseJSON?.message || error));

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

    // 페이지 로드 시 모든 제공일 필드에 대해 만료일 자동 계산 실행
    $("#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