@extends("common.layout-popup")

@section("header")

@endsection

@section("page-title", "[". ($service == 'ielts' ? "인강" : "어학원") . "] 수강 정보")
@section("content")
    @if ($enrollment)
        @php
            $feedback = $enrollment->getEnrollmentFeedbackSummary();
            $cdt = $enrollment->getEnrollmentCdtSummary();
            $examTicket = $enrollment->getEnrollmentExamTicket();
            $textbookCnt = $enrollment->enrollmentTextbooks->count();
        @endphp

        <section>
            <header>수강정보</header>
            <main>
                <form action="" method="POST" class="default">
                    <div class="enrollment-wrap">
                        <div class="form-group enrollment-title">
                            <label>수강정보</label>
                            <div>[{{ $enrollment->module }}] {{ $enrollment->getEnrollmentName() }} </div>
                        </div>
                        <div class="form-group enrollment-card">
                            <label>수강상태</label>
                            <div>{{ $status[$enrollment->status] }}</div>
                        </div>
                        <div class="form-group enrollment-card">
                            <label>강좌</label>
                            <div>{{ $enrollment->enrollmentCourses->count() }}개</div>
                        </div>

                        <div class="form-group enrollment-card">
                            <label>응시권</label>
                            <div>{{ $examTicket == 0 ? "-" : $examTicket . "개" }}</div>
                        </div>

                        @if ( $service == 'ielts')
                            <div class="form-group enrollment-card">
                                <label>교재</label>
                                <div>{{ $textbookCnt == 0 ? "-" : $textbookCnt . "권"  }}</div>
                            </div>
                            <div class="form-group enrollment-card">
                                <label>진도율(인강)</label>
                                <div>{{ $enrollment->progress_rate }}%</div>
                            </div>
                            @if ($enrollment->is_refundable)
                            <div class="form-group enrollment-card">
                                <label>출석율(인강-환급)</label>
                                <div>{{ $enrollment->attendance_rate }}%</div>
                            </div>
                            @endif
                        @endif
                    </div>
                </form>
            </main>
        </section>
        <section class="mt-3">
            <header>
                <h6>수강정보 변경</h6>
                <span class="badge badge-primary badge-icon enrollType" id="btnPeriod" @style($service == 'academy' ? "display: none" : "")>
                    <i class="bi bi-pencil-square"></i>
                </span>
            </header>
            <main>
                <form action="" method="POST" class="default" id="enrollmentForm">
                    <input type="hidden" name="enrollment_id" id="enrollment_id" value="{{ $enrollment->id }}" />

                        @if ($service == 'academy')
                            <div class="enrollment-wrap">
                                <div class="form-group enrollment-title">
                                    <label>변경구분</label>
                                    <div class="">
                                        <button type="button" class="type btn btn-sm btn-outline-success" data-type="class">반 변경</button>
                                        <button type="button" class="type btn btn-sm btn-outline-success" data-type="enroll">수강기간 변경</button>
                                    </div>
                                </div>
                            </div>
                        @else
                            <input type="hidden" name="type" value="enroll" />
                        @endif


                        <div class="enrollment-wrap">
                            <div class="form-group enrollment-title">
                                <label>
                                    수강기간
                                    <span class="font-sm">(총 수강기간 : <span class="text-danger">{{ $enrollment->productOption->period }}</span> 일)</span>

                                </label>
                                <div class="row m-0 px-0 mt-2">
                                    <div class="col-5 px-0">
                                        <input type="date" name="started_at" id="started_at" value="{{ date('Y-m-d', strtotime($enrollment->started_at)) }}" class="form-control form-control-sm" disabled />
                                    </div>
                                    <div class="col-1 align-center px-0lg">~</div>
                                    <div class="col-5 px-0">
                                        <input type="date" name="ended_at" id="ended_at" value="{{ date('Y-m-d', strtotime($enrollment->ended_at)) }}" class="form-control form-control-sm" disabled />
                                    </div>
                                </div>
                            </div>
                            @if ( $service == 'ielts')
                                <div class="form-group enrollment-edit">
                                    <label>첨삭</label>
                                    @if ($feedback != null)
                                        <div>
                                            {{ $feedback['useCnt'] }}
                                            <span>/</span>
                                            <input type="number" name="feedback_total_cnt" id="feedback_total_cnt" value="{{ $feedback['totalCnt'] }}" class="form-control form-control-sm" disabled />
                                        </div>
                                    @else
                                        <div>-</div>
                                    @endif
                                </div>
                            @endif

                            <div class="form-group enrollment-edit">
                                <label>CDT</label>
                                @if ($cdt != null)
                                    <div>
                                        {{ $cdt['useCnt'] }}
                                        <span>/</span>
                                        <input type="number" name="cdt_total_cnt" id="cdt_total_cnt" value="{{ $cdt['totalCnt'] }}" class="form-control form-control-sm" disabled />
                                    </div>
                                @else
                                    <div>-</div>
                                @endif
                            </div>
                        </div>

                    <div class="enrollment-wrap" style="margin: 0px 8px">
                        <div class="form-group col-6">
                            <label @class(['enrollType', "required" => $service == 'ielts'])>변경사유</label>
                            <div>
                                <input type="text" name="reason" id="reason" placeholder="변경사유를 입력하세요 " class="form-control form-control-sm" />
                            </div>
                        </div>
                    </div>
                </form>

            </main>

            <footer class="align-right enrollType" style="{{ $service == 'academy' ? "display: none" : "" }}">
                <button class="btn btn-primary" id="btnEnroll" type="button" @disabled($service == 'academy') onclick="onChangePeriod()" disabled>변경</button>
            </footer>
        </section>
    @endif
    @if ( ! $enrollment || $enrollment && $service == 'academy')
    <section class="mt-3 classType" id="product" style="{{ $enrollment && $service == 'academy' ? "display: none" : "" }}">
        <header>변경상품</header>
        @if ( $productOptions->isEmpty() )
            <div class="empty-wrap">
                <div class="empty-box">
                    <div class="empty-title"> 지급용으로 생성된 상품이 없습니다.</div>
                    <div class="empty-desc">상품을 생성하고 수강 정보를 추가해 주세요.</div>
                </div>
            </div>
        @endif
        <main>

            <form class="search-form">
                <input type="hidden" name="user_id" value="{{ $userId }}" id="user_id" />
                <div class="search-input-wrap">
                    <div class="input-group input-group-sm">
                        <label class="input-group-text">상품정보</label>
                        <select name="product_option_id" class="form-select form-select-sm" id="optionId">
                            @foreach ( $productOptions as $productOption )
                                <option value="{{ $productOption->id }}">{{ $productOption->product->name }} {{ $productOption->name }} </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <button class="btn btn-sm btn-outline-dark search-button" onclick="onSearchProduct()" type="button">조회</button>
            </form>

            <form class="default" id="product-info" style="display: none">
                <div class="form-group">
                    <label>상품명</label>
                    <div id="productName"></div>
                </div>
                <div class="enrollment-wrap">
                    <div class="form-group enrollment-title">
                        <label>모듈</label>
                        <div id="modules" class="d-flex align-item-center">
                            <label class="form-check-label col-4">
                                <input type="radio" name="module" value="general" class="form-check-input mt-1"/>
                                <span>general</span>
                            </label>
                            <label class="form-check-label col-4">
                                <input type="radio" name="module" value="academic" class="form-check-input mt-1" />
                                <span>academic</span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group enrollment-card">
                        <label>강좌</label>
                        <div id="courseCnt"></div>
                    </div>
                    @if ($service == 'ielts')
                        <div class="form-group enrollment-card">
                            <label>첨삭</label>
                            <div id="feedbackText"></div>
                        </div>
                    @endif
                    <div class="form-group enrollment-card">
                        <label>CDT</label>
                        <div>사용/전체</div>
                    </div>
                    <div class="form-group enrollment-card">
                        <label>응시권</label>
                        <div id="examTicket"></div>
                    </div>
                    @if ($service == 'ielts')
                        <div class="form-group enrollment-card">
                            <label>교재</label>
                            <div>N개</div>
                        </div>
                    @endif
                </div>

                <div class="enrollment-wrap">
                    <div class="form-group enrollment-title">
                        <label>수강기간 (<span class="font-sm">총 수강기간 : <span id="periodCnt" class="text-danger"></span> 일</span>)</label>
                        <div class="row m-0 px-0 mt-2">
                            <div class="col-5 px-0">
                                <input type="date" name="started_at" id="new_started_at" value="" class="form-control form-control-sm" />
                            </div>
                            <div class="col-2 align-center px-0lg">~</div>
                            <div class="col-5 px-0">
                                <input type="date" name="ended_at" id="new_ended_at" value="" class="form-control form-control-sm" />
                            </div>
                        </div>
                    </div>
                </div>

                @if ( ! $enrollment )
                <div class="enrollment-wrap">
                    <div class="form-group col-6">
                        <label class="required">지급사유</label>
                        <div>
                            @if ( $service == 'ielts')
                            <select class="form-select form-selected-sm mb-2" id="present_reason">
                                <option value="구매 혜택">구매 혜택</option>
                                <option value="CS">CS</option>
                                <option value="24시 무료수강권">24시 무료수강권</option>
                                <option value="edm유학원 인강제공">edm유학원 인강제공</option>
                                <option value="기타">기타</option>
                            </select>
                        @endif

                            <input type="text" name="reason" id="reason" placeholder="지급사유를 입력하세요 " class="form-control form-control-sm" style="{{ $service == 'ielts' ? 'display: none' : "" }}"/>
                        </div>
                    </div>
                </div>
                @endif
            </form>

        </main>
        <footer class="align-right">
            <button class="btn btn-primary" id="btnSubmit" type="button" onclick="onChangeClass()" disabled>저장</button>
        </footer>
    </section>
{{-- </div> --}}
    @endif

@endsection


@push("script")
    <script>
        let isConfirm = false;
        $(function() {
            $('.type').on("click", function() {
                const type = $(this).data("type");
                $(this).addClass("btn-success").removeClass("btn-outline-success");
                $(this).siblings().addClass("btn-outline-success").removeClass("btn-success");

                $(':not(label)[class*=Type]').hide();
                $(':not(label).' + type + "Type").show();

                if ( type == 'enroll' ) {
                    $('label.enrollType').addClass("required");
                } else {
                    $('label.enrollType').removeClass("required");
                }


            })

            $('#modules input[type=radio]').on("click", function() {
                $('#btnSubmit').prop("disabled", false);
            })

            $('#btnPeriod').on('click', function() {
                alertify.confirm("승인", "잔여수강기간이 남아있는 상태에서 결제취소가 이루어지는 경우에 한해 수강기간 조정이 가능합니다.<br>(수강이 즉시 중지되는 경우 기간을 설정하실 필요가 없습니다)", () => {
                    $('#started_at, #ended_at, #btnEnroll, #cdt_total_cnt, #feedback_total_cnt' ).prop("disabled", false);
                    onLoadDatePicker()
                }, () => { })
            })

            $('#present_reason').on("change", function() {
                if ( $(this).val() == '기타') {
                    $('#reason').val("").show();
                } else {
                    $('#reason').val($(this).val()).hide();
                }
            })
        })

        async function onSearchProduct() {

            const id = $('#optionId option:selected').val()
            const href = "{{ route('api.product.option-summary', ['id' => ':id']) }}";
            const result = await customFetch(href.replace(":id", id));

            if ( result.status) {
                $.each(result.count, function(key) {
                    $('#product-info #' + key).text(result.count[key]);
                })

                $.each($('#modules input[type=radio]'), function() {
                    const isDisabled = result.module.indexOf($(this).val()) == -1;
                    $(this).prop( {
                        "disabled" : isDisabled, "checked" : result.module.length == 1 && ! isDisabled
                    } );
                    isDisabled ? $(this).closest("label.form-check-label").addClass("disabled") : $(this).closest("label.form-check-label").removeClass("disabled");
                })

                $('#new_started_at').val(result.period[0]);
                $('#new_ended_at').val(result.period[1]);

                $('#product-info').show();
                $('#btnSubmit').prop("disabled", result.module.length != 1);
            }
        }

        function onChangeClass() {
            if ( $('#modules input[type=radio]:checked').length == 0 ) {
                alertify.alert("확인", "모듈을 선택하세요", () => {} );
                return false;
            }

            let message = "현재 수강상품은 수강완료로 변경됩니다. <br> 현재 선택한 상품으로 반을 변경하시겠습니까?";
            if ( $('#enrollment_id').length == 0) {
                if ($.isEmptyObject($('#reason').val())) {
                    alertify.alert("Error","지급사유를 입력해주세요");
                    return false;
                }
                message = "상품을 지급하시겠습니까?"
            }
            alertify.confirm("확인", message, async () => {
                const params = {
                    "enrollment_id" : $('#enrollment_id').length > 0 ? $('#enrollment_id').val() : 0,
                    "product_option_id" : $('#optionId option:selected').val(),
                    "module" : $('#modules input[type=radio]:checked').val(),
                    "started_at" : $('#new_started_at').val(),
                    "ended_at" : $('#new_ended_at').val(),
                    "reason" : $('#reason').val(),
                    "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("확인", "변경되었습니다.", () => {
                        onClosePopup();
                    })
                } else {
                    alertify.alert("에러", result.message, () => {})
                }
            }, () => {})
        }

        function onChangePeriod() {
            const reason = $('#reason').val();
            if ( $.isEmptyObject(reason) ) {
                alertify.alert("Error", "수강정보 변경사유를 입력하세요", () => {} );
                return false;
            }
            const params = {};
            $.each($('#enrollmentForm input'), function() {
                params[$(this).attr('name')] = $(this).val();
            })

            console.log(params)

            alertify.confirm("알림", "회원의 수강정보를 변경하시겠습니까?", async () => {

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

                if ( result.status ) {
                    alertify.alert("확인", "변경되었습니다.", () => {
                        onClosePopup();
                    })
                } else {
                    alertify.alert("에러", result.message, () => {})
                }
            }, () => { });
        }
    </script>
@endpush