@php
    if (request()->has('popup')) $layout = "common.layout-popup";
    else $layout = "common.layout";
@endphp

@extends($layout)

@section("page-title", "회원 관리: ".$user->name)

@section("header")
{!! resource('css/form.css') !!}
{!! resource('js/common/kakaoPost.js') !!}
{!! resource('js/modal.js') !!}

<link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>

{!! setResources([ 'toast-calendar']) !!}
{{-- {!! resource('js/components/calendar.js') !!} --}}
{!! resource('js/schedule/schedule.js') !!}
@endsection

@section("content")
@if (!request()->has('popup'))
<h1>
    <div>
        <a href="{{ route('user.list') }}"><i class="bi bi-arrow-left-circle"></i></a>
        회원 관리: {{ $user->name }}
    </div>
</h1>
@endif


<form id="user-update-form" action="{{ route('api.user.update') ?? '' }}" method="post" class="default set-user-form" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="id" value="{{ $user->id }}">

    <section>
        <header>
            <h6>회원 정보({{ $user->id }})</h6>
            <button type="submit" class="btn btn-sm btn-primary">저장</button>
        </header>
        <main>
            @if($User->role->name == 'root')
            <div class="row m-0 p-0 mb-3">
                <label class="required">역할</label>
                <div>
                    <input type="radio" class="btn-check" name="role" id="role0" autocomplete="off" value="student" @checked(empty($user->role->name))>
                    <label class="btn btn-sm btn-outline-secondary px-2 py-1" for="role0">학생</label>

                    @foreach ($roles as $role)
                        <input type="radio" class="btn-check" name="role" id="role{{ $role->id }}" autocomplete="off" value="{{ $role->name }}" @checked(!empty($user->role->name) and $user->role->name == $role->name)>
                        <label class="btn btn-sm btn-outline-secondary px-2 py-1" for="role{{ $role->id }}">{{ $role->name }}</label>
                    @endforeach
                </div>
            </div>
        @endif
            <div class="row m-0 p-0">
                <div style="width: 200px;">
                    <label>회원 이미지</label>
                    <div class="img-upload-wrapper">
                        <button class="btn btn-outline-secondary w-100" type="button" onclick="this.nextElementSibling.click();">이미지 등록</button>
                        <input type="file" class="form-control" onchange="previewImage(event);" name="photo" id="user_profile_img" accept="image/*" style="display: none;">
                        <div class="thumbnail mt-1" id="thumbnail">
                            @if (!empty($user->photo))
                                <button class="btn btn-sm btn-outline-danger btn-delete" type="button" onclick="deleteProfileImage({{ $user->id }})"><i class="bi bi-x-lg"></i></button>
                            @endif
                            <img id="user_image" src="{{ !empty($user->photo) ? $user->photo_url : 'https://placehold.co/200x250' }}" alt="Selected Image" width="100%">
                        </div>
                        </div>
                </div>
                <div style="width: calc(100% - 200px)">
                    <div class=" row m-0 p-0 align-item-top">
                        <div class="col-2">
                            <label class="required" for="validationCustom03">이름</label>
                            <div>
                                <input type="text" class="form-control" id="validationCustom03" name="name" placeholder="2글자 이상, 영문/한글 혼합 사용 불가" value="{{ $user->name }}" required @disabled(! $user->role)>
                                @error('name')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-3">
                            <label>계정정보</label>
                            <div class="row align-item-center m-0 p-0">
                                @if ( $user->role )
                                    {{ $user->edm_id }}
                                @else
                                    @if ( $user->register_type == 'default')
                                        {{ $user->edm_id }} ({{ $user->email }})
                                    @else

                                        @foreach (['google', 'naver', 'kakao'] as $social)
                                            @php
                                                $isExist = $user->userProviders()->where("provider", $social)->where("activated", 1)->count() > 0;
                                            @endphp
                                            @if ($isExist)
                                            <i class="icon-{{ $social }}"></i>
                                            @endif
                                        @endforeach

                                        {{ $user->email }}
                                    @endif
                                @endif
                            </div>
                        </div>
                        @if($User->role->name == 'root')
                            <div class="col-2">
                                <label class="required">활성 구분</label>
                                <div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" role="switch" id="activated" name="activated" value="1" @checked($user->activated)>
                                        <label class="form-check-label" for="activated">
                                            @if (!$user->activated && $user->deactivated_at)
                                                휴면 ({{date("Y.m.d", strtotime($user->deactivated_at)) }})
                                            @else
                                                활성
                                            @endif
                                        </label>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div>
                                @if ($user->activated == 0)
                                    탈퇴 ({{date("Y.m.d", strtotime($user->deactivated_at)) }})
                                @else
                                    활성 {{ $user->activated == 2 ? "(정책위반)" : '' }}
                                @endif
                                <input type="hidden" name="activated" value="{{ $user->activated }}">
                            </div>
                        @endif

                        @if ($user->role)
                            <div class="col-4 mt-0">
                                <label for="validationCustom02">비밀번호</label>
                                <div>
                                    <input type="password" class="form-control" name="password" />
                                </div>
                            </div>

                        @else
                            <div class="col-2">
                                <label>가입구분</label>
                                <div>
                                    <x-service-name service="{{ $user->service }}" />
                                    <span class="font-sm">({{date("Y.m.d", strtotime($user->created_at)) }})</span>
                                </div>
                            </div>
                        @endif

                        <div class="col-2">
                            <label>등록 기기</label>
                            <div>
                                <button class="btn btn-outline-secondary w-100" type="button" onclick="edmPopupOpen('{{ route('user.popup.device', $user->id) ?? '' }}')">
                                    @if ( $user->is_device_unlimited == 1 )
                                        기기제한해제
                                    @else
                                        <strong class="text-primary">
                                            {{ empty($user->userDevices) ? 0 : count($user->userDevices) }}
                                        </strong> / <span>3</span>

                                    @endif
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="row m-0 p-0 mt-3">
                        <div class="col-5">
                            <label class="required" for="validationCustom04">휴대폰</label>
                            <div class="input-group">
                                <select class="form-select" id="phone_code" name="phone_code" style="flex: 0 0 120px" @disabled(! $user->role)>
                                    <option value="">국가번호</option>
                                    @foreach ($countries as $country)
                                        @if ($country->phone_code and $country->iso_code != 'CA')
                                            <option value="{{ $country->phone_code }}" @selected($user->phone_code == $country->phone_code)>{{ $country->phone_code }} ({{ $country->iso_code }})</option>
                                        @endif
                                    @endforeach
                                </select>
                                <input type="text" class="form-control" id="validationCustom04" name="phone" placeholder="숫자만 입력 가능" value="{{ $user->phone }}" required oninput="oninputPhone(this)" maxlength="13"  @disabled(! $user->role)>
                            </div>
                            @error('phone')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-2">
                            <label for="validationCustom08">카카오톡ID</label>
                            <div>
                                <input type="text" class="form-control" id="validationCustom08" name="kakao_id" value="{{ $user->kakao_id }}" placeholder="카카오톡 ID를 입력해 주세요.">
                            </div>
                        </div>
                        <div class="col-4">
                            <label>마케팅 수신동의</label>
                            <div>
                                 @if($user->is_accepted_email)
                                    <span class="badge badge-icon badge-info font-lg"><i class="bi bi-at"></i></span>
                                @endif
                                @if($user->is_accepted_phone)
                                    <span class="badge badge-icon badge-warning font-lg"><i class="bi bi-phone-vibrate"></i></span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="row m-0 p-0 mt-3">
                        <div class="col-2">
                            <label>국가</label>
                            <div>{{ $user->country?->name ?? "-"}}</div>
                        </div>
                        <div class="col-6">
                            <label for="country">주소</label>
                            <div>
                                @if ( $user->zip_code )
                                    ({{ $user->zip_code }}) {{ $user->address }} {{ $user->region }} {{ $user->address_detail }}
                                @else
                                    -
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

    </section>
</form>

<div class="row mx-0 px-0">
    <div class="col-8" style="padding-left: 0">
        <section class="mt-3">
            <header>
                <h6>어학원 강좌 지급</h6>
            </header>

            <main class="user-enrollment">
                <div class="custom-scroll limit-height" style="--height: 900">
                @if ($academyEnrollments->isNotEmpty())
                    @foreach($academyEnrollments as $enrollment)
                        @php
                            $startDate = \Carbon\Carbon::parse($enrollment->started_at);
                            $endDate = \Carbon\Carbon::parse($enrollment->ended_at);
                            $currentDate = $startDate->copy()->startOfMonth();
                            $monthlyPeriods = [];
                            $courseIndex = 0; // 강좌 순서를 추적할 변수
                            $totalCourses = $enrollment->enrollmentCourses->count(); // 총 강좌 수

                            while ($currentDate->lte($endDate)) {
                                $startOfMonth = $currentDate->copy()->startOfMonth();
                                $endOfMonth = $currentDate->copy()->endOfMonth();

                                $periodStart = $startDate->greaterThan($startOfMonth) ? $startDate : $startOfMonth;
                                $periodEnd = $endDate->lessThan($endOfMonth) ? $endDate : $endOfMonth;

                                $monthlyPeriods[] = [
                                    'start' => $periodStart->format('Y-m-d'),
                                    'end' => $periodEnd->format('Y-m-d'),
                                ];

                                $currentDate->addMonth();
                            }

                            $thisUsePeriods = $endDate->diff($startDate)->days;
                        @endphp


                        <div class="mb-3">
                            <form class="card search-form" method="post" action="{{ route('api.enrollment.update-enrollment-courses') }}">
                                <input type="hidden" name="enrollment_id" value="{{ $enrollment->id }}">
                                @csrf

                                <div class="card-body">
                                    <input type="hidden" name="enrollment_id" value="{{ $enrollment->id }}">
                                    <div class="header">
                                        <h5 class="card-title">
                                            <div class="font-sm">{{ $enrollment->payment?->payment_no ?? "[지급]"}}</div>
                                            [{{ ucfirst($enrollment->module) }}] {{ $enrollment->product->name }}
                                            <span>({{ $enrollment->productOption->name }})</span>
                                        </h5>

                                        <div class="status">{{ config('system.enrollment_status')[$enrollment->status] }}</div>
                                    </div>

                                    @php
                                        $children = $enrollment->getEnrollmentChangeHistories();
                                        $totalPeriods = $enrollment->getEnrollmentTotalPeriod();
                                    @endphp
                                    <div @class(['header-control','mb-3', "active" => $children->isNotEmpty() ])>
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text">수강기간</span>
                                            <input type="date" class="form-control" id="started_at{{ $enrollment->id }}" name="started_at" value="{{ date('Y-m-d', strtotime($enrollment->started_at)) }}" data-min-date='{{ $totalPeriods[1] }}'>
                                            <input type="date" class="form-control" id="ended_at{{ $enrollment->id }}" name="ended_at" value="{{  date('Y-m-d', strtotime($enrollment->ended_at)) }}">
                                            <button type="button" class="btn btn-secondary" onclick="updateEnrollment(this)">저장</button>
                                        </div>
                                        <div class="input-group input-group-sm">

                                            @if ( $children->isNotEmpty() )
                                                <div class="header-history old-course-wrap">
                                                    <a href="javascript:void(0)" class="onShow" data-id="{{ $enrollment->id }}" data-prefix='change'>
                                                        <span class="badge badge-danger">[반변경]</span>
                                                        @if ($children[0]->top_enrollment_id == $enrollment->id )
                                                            <span class="font-sm">{{ $children->count() }} 회</span>
                                                        @endif
                                                    </a>
                                                    <div class="old-course-list" id="change-{{ $enrollment->id }}">
                                                        <ul class="list-item-none">
                                                        @foreach ( $children as $child )
                                                            <li class="old-course-item">
                                                                <div class="font-sm">
                                                                    {{ $child->depth }}회.
                                                                    {{ $child->childEnrollment->getEnrollmentName() }}
                                                                    ({{ date('Y-m-d H:i', strtotime($child->childEnrollment->created_at)) }})</div>
                                                            </li>
                                                        @endforeach
                                                        </ul>
                                                    </div>

                                                </div>
                                            @else
                                                @php
                                                    $usePeriods = $totalPeriods[0] > 0 ? $totalPeriods[0] : $thisUsePeriods;
                                                @endphp
                                                    <span class="input-group-text">상품정보</span>
                                                    <select class="form-select form-select-sm" name="module" id="module_{{ $enrollment->id }}">
                                                        <option value="academic">Academic</option>
                                                        <option value="general">General</option>
                                                    </select>

                                                    <div >
                                                        <select name="product_option_id" class="form-select form-select-sm" id="optionId_{{ $enrollment->id }}">
                                                            <option value="">선택하세요</option>
                                                            @foreach ( $productOptions as $productOption )
                                                                @if ($productOption->id == $enrollment->product_option_id ) @continue @endif
                                                                @php
                                                                    $started_at = \Carbon\Carbon::parse($enrollment->ended_at)->addDay();
                                                                    $ended_at = $usePeriods >= $productOption->period ? $started_at->copy()->addDays($productOption->period) : $started_at->copy()->addDays($productOption->period - $usePeriods);
                                                                @endphp
                                                                <option value="{{ $productOption->id }}" data-started-at="{{ $started_at->toDateString() }}" data-ended-at="{{ $ended_at->toDateString() }}">{{ $productOption->product->name }} {{ $productOption->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <button type="button" class="btn btn-secondary" onclick="onChangeClass({{ $enrollment->id }})">반변경</button>
                                            @endif
                                        </div>


                                    </div>

                                    <table class="table table-bordered table-striped mb-0">
                                        <colgroup>
                                            <col width="80px">
                                            <col width="200px">
                                            <col>
                                            <col width="50px">
                                        </colgroup>
                                        <thead>
                                            <th class="text-center">수강월</th>
                                            <th class="text-center">수강기간</th>
                                            <th>강좌</th>
                                            <th></th>
                                        </thead>
                                        <tbody>
                                            @foreach($monthlyPeriods as $period)
                                                @php
                                                    $periodStartDate = \Carbon\Carbon::parse($period['start']);
                                                    $periodMonth = $periodStartDate->format('ym'); // YYMM 형식으로 월을 추출
                                                    $todayDate = \Carbon\Carbon::now();
                                                    $isPastOrStarted = $periodStartDate->lte($todayDate); // 현재 날짜가 시작일보다 이후인지 확인

                                                    // 현재 월에 해당하는 강좌 찾기
                                                    $monthCourse = $enrollment->enrollmentCourses->firstWhere('month', $periodMonth);
                                                @endphp
                                                <tr>
                                                    <td class="text-center">{{ $periodStartDate->format('n') }}월</td>
                                                    <td class="text-center">{{ $period['start'] }} ~ {{ $period['end'] }}</td>
                                                    <td>
                                                        {{-- 250516 테스트를 위해 강좌 제한 조건 주석처리 --}}
                                                        {{-- @if (!$isPastOrStarted) --}}

                                                        <select name="course[{{ $periodMonth }}][{{ $monthCourse->id ?? 'new' }}]">
                                                            <option value="">강좌 선택</option>
                                                            @foreach($courses as $course)
                                                                {{-- @disabled($isPastOrStarted) --}}
                                                                <option value="{{ $course->id }}"
                                                                    @selected($monthCourse && $monthCourse->course_id == $course->id)>{{ $course->name }}</option>
                                                            @endforeach
                                                        </select>
                                                        {{-- @else
                                                            {{ $monthCourse ? $monthCourse->name : '미등록' }}
                                                        @endif --}}
                                                    </td>
                                                    <td class="text-center">
                                                        {{-- @if (!$isPastOrStarted && $monthCourse) --}}
                                                        @if ($monthCourse)
                                                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteCourse({{ $monthCourse->id }})"><i class="bi bi-trash3"></i></button>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach

                                            @if ($totalCourses > count($monthlyPeriods))
                                                @php
                                                    // month가 null인 강좌들 (미할당 강좌)
                                                    $unassignedCourses = $enrollment->enrollmentCourses->filter(function($course) {
                                                        return $course->month === null;
                                                    });
                                                @endphp

                                                @if ($unassignedCourses->count() > 0)
                                                    @foreach($unassignedCourses as $index => $unassignedCourse)
                                                    <tr>
                                                        <td></td>
                                                        <td></td>
                                                        <td>
                                                            <select name="course[unassigned_{{ $index }}][{{ $unassignedCourse->id }}]">
                                                                <option value="">강좌 선택</option>
                                                                @foreach($courses as $course)
                                                                    <option value="{{ $course->id }}" @selected($unassignedCourse->course_id == $course->id)>{{ $course->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                        <td class="text-center">
                                                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteCourse({{ $unassignedCourse->id }})"><i class="bi bi-trash3"></i></button>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                @endif
                                            @endif
                                        </tbody>
                                    </table>
                                </div>

                                <div class="card-footer text-end">
                                    <button type="submit" class="btn btn-sm btn-success">강좌 변경사항 저장</button>
                                </div>

                            </form>
                        </div>
                    @endforeach
                @endif
                </div>
            </main>
        </section>
    </div>
    <div class="col-4" style="padding-right: 0">
        @include("user.popups.user-memo", ['userId' => $user->id])
    </div>
</div>


<section class="with-tab mt-3">
    <header>
        <ul class="detail-tab-menu">
            <li><a href="{{ route('api.user.tab-item', ['item' => 'academy', 'id' => $user->id]) }}">어학원정보</a></li>
            <li><a href="{{ route('api.user.tab-item', ['item' => 'ielts', 'id' => $user->id]) }}">인강정보</a></li>
            <li><a href="{{ route('api.user.tab-item', ['item' => 'payment', 'id' => $user->id]) }}">결제 정보</a></li>
            {{-- <li><a href="{{ route('api.user.tab-item', ['item' => 'refund', 'id' => $user->id]) }}">환불 정보</a></li> --}}
        </ul>
    </header>

    <main id="tab-content"></main>
</section>
@endsection

@push("script")
<script>
    const userId = {{ $user->id }};
    const createMemoUrl = "{{ route('api.user.create-memo') }}";
    const deleteMemoUrl = "{{ route('api.user.delete-memo') }}/";
    // const passwordInitUrl = "{{ route('api.user.password-init') }}";
    const deleteUserPhotoUrl = "{{ route('api.user.delete-photo') }}";
    const tabContentCache = {};
    const tabItems = document.querySelectorAll(".detail-tab-menu ul li");
    const tabMenu = document.querySelector('ul.detail-tab-menu');

    const countrySelect = document.getElementById('country');
    const zipCodeInput = document.getElementById('validationCustom07');
    const addressInput = document.getElementById('validationCustom07-1');
    const postCodeBtn = document.querySelector('.kakao-post-code-btn');

    let categoriesTomSelect = null;
    let productIdTomSelect = null;
    let courseIdTomSelect = null;
    let scheduleTypes = null;

    window.addEventListener("load", () => {
        @if (request()->has('popup'))
        fitWindowHeight();
        @endif

        tabMenu.addEventListener('click', function(e) {
            // 클릭된 요소가 a 태그인지 확인
            if (e.target.tagName === 'A') {
                e.preventDefault(); // 여기서 preventDefault 실행
                activateTab(e.target);
            }
        });

        // 페이지 로드 시 첫 번째 탭 자동 클릭
        const firstTabLink = tabMenu.querySelector('li a');
        if (firstTabLink) {
            activateTab(firstTabLink);
        }

        // 어학원정보탭 드롭다운
        let dropdownBar = document.querySelectorAll('.table-wrap')
        let dropdownBarBtn = document.querySelectorAll('.dropdown-bar button')
        for (let i = 0; i < dropdownBarBtn.length; i++) {
            dropdownBarBtn[i].addEventListener('click', () => {
                dropdownBar[i].classList.toggle('open')
            })
        }

        // 전화번호 형식
        oninputPhone(document.querySelector('input[name=phone]'));

        // 국가선택에 따른 우편번호 검색
        // updateZipCodeField();
        // countrySelect.addEventListener('change', updateZipCodeField);

        @if ($User->cannot('edit.user') and $User->id != $user->id)
            disableFormElements();
        @endif
    });

    // document.getElementById('activated').addEventListener('change', function() {
    //     let label = document.querySelector('label[for="activated"]');
    //     if (this.checked) {
    //         label.textContent = '활성';
    //     } else {
    //         label.textContent = '휴면';
    //     }
    // });

    function activateTab(tabLink) {
        // 모든 li에서 active 클래스 제거
        tabMenu.querySelectorAll('li').forEach(li => li.classList.remove('active'));

        // 클릭된 a의 부모 li에 active 클래스 추가
        tabLink.closest('li').classList.add('active');

        const url = tabLink.getAttribute('href');
        const tabContentElement = document.querySelector('#tab-content');

        loadTabContent(url, tabContentElement)
            .catch(error => {
                console.error('Error:', error);
                tabContentElement.innerHTML = 'Error loading content. Please try again.';
            });
    }

    function loadTabContent(url, tabContentElement) {
        // if (tabContentCache[url]) {
        //     // 캐시에 내용이 있으면 바로 사용
        //     tabContentElement.innerHTML = tabContentCache[url];
        //     return Promise.resolve();
        // } else {
            // 캐시에 내용이 없으면 가져와서 저장
            return fetch(url)
                .then(response => response.text())
                .then(data => {
                    tabContentCache[url] = data; // 캐시에 저장
                    tabContentElement.innerHTML = data;
                });
        // }
    }

    function previewImage(event) {
        let fileName = event.target.value;
        if (fileName == null || fileName == undefined || fileName == "")
            return;

        let fileNameArray = fileName.split(".");
        let fileExtension = fileNameArray[fileNameArray.length - 1];
        fileExtension = fileExtension.toLowerCase();
        if (fileExtension != 'jpg' && fileExtension != 'jpeg' && fileExtension != 'png' && fileExtension != 'bmp' && fileExtension != 'webp') {
            event.target.value = "";
            alertify.alert("이미지 파일만 업로드 가능합니다.");
            return;
        }

        // 파일리더 생성
        var preview = new FileReader();
        preview.onload = e => {
            // img id 값
            document.getElementById("user_image").src = e.target.result;
        };
        // input id 값
        preview.readAsDataURL(document.getElementById("user_profile_img").files[0]);
    };


    async function deleteProfileImage(id) {
        let options = {};

        const result = await customFetch(deleteUserPhotoUrl, {
            method: "POST",
            body: JSON.stringify({"user_id": id}),
            headers: { "Content-Type" : "application/json"}
        });

        if ( result.status )  {
            location.reload()
        } else {
            alertify.alert("error!");
            console.log("Error:", result.message );
        }

    }


    function disableFormElements() {
        const form = document.querySelector('#user-update-form');

        form.classList.add("readonly");

        // 폼 내의 모든 입력 요소를 비활성화합니다.
        const formElements = form.elements;
        for (let i = 0; i < formElements.length; i++) {
            formElements[i].disabled = true;
        }

        // submit 버튼을 숨깁니다.
        const submitButton = form.querySelector('input[type="submit"], button');
        if (submitButton) {
            submitButton.style.display = 'none';
        }
    }

    function onViewEnrollment(enrollmentId = '', params = '') {
        let href = "{{ route('user.popup.enroll', ['userId' => $user->id, 'enrollmentId' => ':enrollmentId']) }}";
        if ( params ) {
            href = href + "?" + params;
        }
        edmPopupOpen(href.replace(":enrollmentId", enrollmentId))
    }

    function onViewEnrollmentHistory(enrollmentId) {
        let href = "{{ route('user.popup.enroll.history', [ 'enrollmentId' => ':enrollmentId']) }}";
        edmPopupOpen(href.replace(":enrollmentId", enrollmentId))
    }

    function onPaymentDetail(paymentId, transactionId) {
        const href = "{{ route('payment.detail', ['paymentId' => ':paymentId', 'transactionId' => ':transactionId']) }}";

        window.open(href.replace(":paymentId", paymentId).replace(":transactionId", transactionId), '_blank')
    }

    function onUserMemo() {
        let href = "{{ route('user.popup.memo', ['userId' => $user->id]) }}";
        edmPopupOpen(href)
    }

    function onChangeClass(enrollmentId) {
        const productOptionId = $('#optionId_' + enrollmentId).val();
        if ( $.isEmptyObject(productOptionId)) {
            alertify.alert("error", "상품을 선택하세요", () => {});
            return false;
        }

        const option = $('#optionId_' + enrollmentId).find("option:selected");;

        let message = "현재 선택한 상품으로 반을 변경하시겠습니까?";
        alertify.confirm("확인", message, async () => {
            const params = {
                "enrollment_id" : enrollmentId,
                "product_option_id" : productOptionId,
                "module" : $('#module_'+enrollmentId).val(),
                "started_at" : option.data("started-at"),
                "ended_at" : option.data("ended-at"),
                "reason" : "수강상품 변경",
                "user_id" : $('#user_id').val()
            }

            const result = await customFetch("{{ route('api.user.enroll.change', ['type' => 'class']) }}", {
                body: JSON.stringify(params),
                method: "POST",
                headers: { "Content-Type" : "application/json"}
            })

            if ( result.status ) {
                alertify.alert("확인", "변경되었습니다.", () => {
                    location.reload()
                })
            } else {
                alertify.alert("에러", result.message, () => {})
            }
        }, () => {})
    }

    async function updateEnrollment(obj) {
        // enrollmentId 가져오기
        const enrollmentId = $(obj).closest('.card').find('input[name="enrollment_id"]').val();
        const startedAt = $('#started_at' + enrollmentId).val();
        const endedAt = $('#ended_at' + enrollmentId).val();

        // 입력값 검증
        if (!startedAt || !endedAt) {
            alert("수강 기간을 입력해 주세요.");
            return;
        }

        const result = await customFetch("{{ route('api.user.enroll.change', ['type' => 'default']) }}", {
            body: JSON.stringify({ started_at: startedAt, ended_at: endedAt, "reason" : "수강기간 변경", 'enrollment_id' : enrollmentId  }),
            method: "POST",
            headers: { "Content-Type" : "application/json"}
        })

        if ( result.status ) {
            alertify.alert("확인", "변경되었습니다.", () => {
                location.reload()
            })
        } else {
            alertify.alert("에러", result.message, () => {})
        }

        // URL 생성
        // const url = "{{ route('api.enrollment.update-enrollment', ['id' => ':id']) }}".replace(':id', enrollmentId);

        // // AJAX 요청
        // $.ajax({
        //     url: url,
        //     type: 'PATCH', // PATCH 메서드 사용
        //     data: {
        //         started_at: startedAt,
        //         ended_at: endedAt,
        //         _token: "{{ csrf_token() }}" // CSRF 토큰 추가
        //     },
        //     success: function(response) {
        //         if (response.success) {
        //             alert("수강 정보가 업데이트되었습니다.");
        //             location.reload(); // 페이지 새로고침
        //         } else {
        //             alert("업데이트에 실패했습니다. 다시 시도해 주세요.");
        //         }
        //     },
        //     error: function(xhr, status, error) {
        //         console.error("Error:", error);
        //         alert("오류가 발생했습니다. 관리자에게 문의하세요.");
        //     }
        // });
    }

    function deleteCourse(enrollmentCourseId) {
        if (confirm("해당 강좌를 삭제하시겠습니까?")) {
            $.ajax({
                url: "{{ route('api.enrollment.delete-course', ['id' => ':id']) }}".replace(':id', enrollmentCourseId),
                type: 'DELETE',  // DELETE 메서드 사용
                data: {
                    _token: "{{ csrf_token() }}"  // CSRF 토큰은 여전히 필요
                },
                success: function(response) {
                    if (response.success) {
                        alert("강좌가 삭제되었습니다.");
                        location.reload();
                    } else {
                        alert("삭제에 실패했습니다: " + response.message);
                    }
                },
                error: function(xhr) {
                    alert("오류가 발생했습니다. 관리자에게 문의하세요.");
                    console.error(xhr.responseText);
                }
            });
        }
    }

    $(function() {

        $(document).on("click", '.toggle-children',function() {
            $(this).toggleClass("open")
            $('tr.row_' + $(this).data('id')).slideToggle();
        })
    })


    $(document).ready(function(){
        $("select[name^='course']").each(function () {
            new TomSelect(this, {
                plugins: ['dropdown_input'], // 검색 기능 추가
                allowEmptyOption: true,      // 빈 옵션 허용
                create: false,               // 새 옵션 생성 방지
            });
        });

        $("select[name^=product_option_id]").chosen({
            width: "100%",
            no_results_text: "검색 결과가 없습니다: ",
            placeholder_text_single: "상품을 선택하세요",
            search_contains: true
        });



        $(document).on( "click",'.onShow', function() {
            const target = $(this).next();
            if ( target.hasClass("active")) {
                target.removeClass("active");
            } else {
                $('.old-course-list.active').removeClass('active');
                target.addClass('active');
            }
        })
    });

</script>
@endpush