@extends('ielts.layout')

@section('ielts-css')
    <!-- promotion -->
    {!! resource('css/common/board.css') !!}
@endsection

@section("progress")
    @include('progress')
@endsection

@section("ielts-content")
    <div id="wrap" class="boardPage refund">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1>환급신청</h1>
            </div>

            <form action="" enctype="multipart/form-data" id="refund-form">
                <input type="hidden" name="payment_id" value="{{ $enrollment->payment_id }}" />
                <input type="hidden" name="enrollment_id" value="{{ $enrollment->id }}" />
                <!-- 게시판 작성 -->
                <div class="board-view board-write">
                    <div class="view-top">
                        <ul>
                            <li>
                                <div class="box name">
                                    <div class="title">작성자</div>
                                    <div class="text"><span>{{ Auth::user()->name }}</span></div>
                                </div>
                                <div class="box date">
                                    <div class="title">신청일</div>
                                    <div class="text"><span>{{ date('y.m.d') }}</span></div>
                                </div>
                            </li>
                            <li>
                                <div class="box product">
                                    <div class="title">환급상품</div>
                                    <div class="text"><span class="ellipsis_1">
                                        @if (empty($enrollment))
                                            환급가능한 수강상품이 없습니다.
                                        @else
                                            {{ $enrollment->product->name }} ({{ $enrollment->productOption->name }})
                                        @endif
                                        </span>
                                    </div>
                                </div>
                                <div class="box payment">
                                    <div class="title">결제수단</div>
                                    <div class="text"><span>{{ empty($enrollment) ? "-" : (isset($method[$enrollment->payment->method]) ? $method[$enrollment->payment->method] : $enrollment->payment->method)  }}</span></div>
                                </div>

                                @if ( $enrollment?->payment?->method == 'TRANSFER' )
                                <!-- 결제수단이 계좌이체일 경우에만 accountWrap가 생성됩니다. -->
                                <div class="accountWrap">
                                    <div class="box refund-account">
                                        <div class="title">환불계좌</div>
                                        <div class="text">
                                            <div class="dropDownMenu type2">
                                                <div class="selectBox">
                                                    <button type="button" class="label" data-selected="">은행선택</button>
                                                    <input type="hidden" name="bank_code" id="bank_code" value="" />
                                                    <div class="optionListWrap">
                                                        <div class="scrollWidth">
                                                            <ul class="optionList scrollWrap">
                                                                @foreach ($banks as $code => $name)
                                                                <li class="optionItem"><button type="button" data-account="{{ $code }}">{{ $name }}</button></li>
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box account-number">
                                        <div class="title">계좌번호</div>
                                        <div class="text">
                                            <label><input type="text" id="account" name="account" placeholder="계좌번호를 입력해 주세요." class="onlynumber"></label>
                                            <p class="pc-text">신청하시려는 은행이 없는 경우 ‘없음’ 선택 후 계좌번호 입력 게시판에 은행명을 입력해 주세요</p>
                                        </div>
                                    </div>
                                </div>

                                @endif
                            </li>
                        </ul>
                    </div>

                    <div class="contentWrap">
                        <label>
                            <textarea name="content" id="content" placeholder="내용을 입력해 주세요." class="content">{{ $board['template'] }}</textarea>
                        </label>
                    </div>

                    <p class="file-infoText">최대 3개까지/ 이미지만 등록 가능</p>

                    <x-board.attachments isPreview="{{ false }}" max="3" />


                    <div @class(['bottomBtnWrap', 'flex' => ! empty($enrollment)])>
                        <!-- 목록 버튼 -->
                        <div class="go-list pc-go-list">
                            <a href="{{ route("refund.index", ['service' => $service]) }}">목록 보기</a>
                        </div>

                        @if (! empty($enrollment))
                        <!-- 신청 버튼 -->
                        <div class="applyWrap bottom-fix-btn">
                            <label><input type="button" value="등록하기" onclick="onSubmit()"></label>
                        </div>
                        @endif
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('ielts-script')
    {!! resource('js/common/board/default.js') !!}
    {!! resource('js/common/board/file-upload.js') !!}
    <script>
        const fileUploadType = "text";
        setPageConfig({
            "service" : '{{ $service }}',
            "boardType" : '{{ $board["page"] }}',
            "isActiveInfinity" : false,
            "isLogin" : "{{ Auth::check() }}"
        })

    </script>
    <script>

        async function onSubmit() {
            // const editor = window.toastuiEditors['content'];
            if ($('#account').length > 0 && $.isEmptyObject($('#account').val())) {
                alertPopup("환급받을 계좌번호를 입력해주세요", {
                    onConfirm: function() { },
                    onClose: function() { },
                })
                return false;
            }

            if ($.isEmptyObject($('#content').val())) {
                alertPopup("신청내용을 입력하세요", {
                    onConfirm: function() { },
                    onClose: function() { },
                })
                return false;
            }

            const formData = new FormData(document.getElementById("refund-form"));
            if (Object.keys(files).length > 0) {
                $.each(Object.keys(files), function(key, index) {
                    formData.append("files[]", files[index]);
                })
            }

            const result = await useFetch(getRoute("store"), {
                method: 'POST',
                body: formData,
            });

            if (result.status) {
                alertPopup("환급신청이 완료되었습니다.", {
                    onConfirm: function() {
                        location.href = '{{ route("refund.index", ["service" => $service ]) }}'
                    },
                    onClose: function() { },
                })
            }

        }
    </script>
@endsection