@extends('ielts.layout')

@section('gnb', view('gnb', ['service'=>'ielts']))

@section('subgnb', view('ielts.gnb'))

@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="">
                <!-- 게시판 작성 -->
                <div class="board-view board-write">
                    <div class="view-top">
                        <ul>
                            <li>
                                <div class="box name">
                                    <div class="title">작성자</div>
                                    <div class="text"><span>홍길동</span></div>
                                </div>
                                <div class="box date">
                                    <div class="title">신청일</div>
                                    <div class="text"><span>24.10.17</span></div>
                                </div>
                            </li>
                            <li>
                                <div class="box product">
                                    <div class="title">환급상품</div>
                                    <div class="text"><span class="ellipsis_1">200%환급반(입문 페이백) 상품명이 길어질 수 있습니다.</span></div>
                                </div>
                                <div class="box payment">
                                    <div class="title">결제수단</div>
                                    <div class="text"><span>계좌이체</span></div>
                                </div>

                                <!-- 결제수단이 계좌이체일 경우에만 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>
                                                    <div class="optionListWrap">
                                                        <div class="scrollWidth">
                                                            <ul class="optionList scrollWrap">
                                                                <li class="optionItem"><button type="button" data-account="기업은행">기업은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="국민은행">국민은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="우리은행">우리은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="신한은행">신한은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="하나은행">하나은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="농협은행">농협은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="카카오뱅크">카카오뱅크</button></li>
                                                                <li class="optionItem"><button type="button" data-account="토스뱅크">토스뱅크</button></li>
                                                                <li class="optionItem"><button type="button" data-account="지역농축협">지역농축협</button></li>
                                                                <li class="optionItem"><button type="button" data-account="SC은행">SC은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="한국씨티은행">한국씨티은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="우체국">우체국</button></li>
                                                                <li class="optionItem"><button type="button" data-account="경남은행">경남은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="광주은행">광주은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="iM[구 대구은행]">iM[구 대구은행]</button></li>
                                                                <li class="optionItem"><button type="button" data-account="도이치">도이치</button></li>
                                                                <li class="optionItem"><button type="button" data-account="부산은행">부산은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="산림조합">산림조합</button></li>
                                                                <li class="optionItem"><button type="button" data-account="산업은행">산업은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="저축은행">저축은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="새마을금고">새마을금고</button></li>
                                                                <li class="optionItem"><button type="button" data-account="수협">수협</button></li>
                                                                <li class="optionItem"><button type="button" data-account="신협">신협</button></li>
                                                                <li class="optionItem"><button type="button" data-account="전북은행">전북은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="제주은행">제주은행</button></li>
                                                                <li class="optionItem"><button type="button" data-account="BOA">BOA</button></li>
                                                                <li class="optionItem"><button type="button" data-account="HSBC">HSBC</button></li>
                                                                <li class="optionItem"><button type="button" data-account="은행없음">은행없음</button></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box account-number">
                                        <div class="title">계좌번호</div>
                                        <div class="text">
                                            <label><input type="number" placeholder="계좌번호를 입력해 주세요." required></label>
                                            <p class="pc-text">신청 하시려는 은행이 없는 경우 ‘없음’을 선택 후 게시판에 직접 입력해 주세요.</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="contentWrap">
                        <!-- 해당 영역 속에 에디터가 들어갑니다. -->
                        <label><textarea name="" id="" placeholder="내용을 입력해 주세요." class="content"></textarea></label>
                    </div>

                    <!-- 파일 첨부 -->
                    <div class="uploadFile">
                        <label class="mo_tab-file uploadArea"><div class="flex"><figure class="upload-icon"></figure><input type="file" class="el-hide" class="file"><span>파일 첨부</span></div></label>
                        <label class="file-drop pc-file-drop uploadArea"><div class="flex"><figure class="upload-icon"></figure><p>파일을 마우스로 끌어오세요.</p><input type="file" class="el-hide" class="file"><span>내 컴퓨터에서</span></div></label>
                        <div class="file-list">
                            <!-- <div class="fileBtn"><label class="file-drop pc-file-drop"><input type="file" class="el-hide" class="file"><span>내 컴퓨터에서</span></label></div> -->
                        </div>
                    </div>

                    <div class="bottomBtnWrap flex">
                        <!-- 목록 버튼 -->
                        <div class="go-list pc-go-list">
                            <a href="">목록 보기</a>
                        </div>

                        <!-- 신청 버튼 -->
                        <div class="applyWrap bottom-fix-btn">
                            <label><input type="submit" value="등록하기"></label>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('ielts-script')
    <script>
        $(function(){
            // 파일 첨부
            var mb = 1024 * 1024; //1mb(메가)
            $('.uploadFile input[type="file"]').on('change',function(){
                if(window.FileReader){
                    var filename = $(this)[0].files[0].name;
                    var fileSize = ($(this)[0].files[0].size / 1024).toFixed(1);
                } else {
                    var filename = $(this).val().split('/').pop().split('\\').pop();
                }
                $('.uploadFile').addClass('active').find('.file-list').append('<div class="file-name"><span>' + filename + '(' + fileSize + 'kb)</span><button type="button" class="remove"></button></div>');

                //첨부파일 삭제
                $('.uploadFile .file-list .file-name .remove').on('click',function(){
                    $(this).parent().remove();
                    if($('.uploadFile .file-list .file-name').length < 1){
                        $('.uploadFile').removeClass('active')
                    }
                });
            });


            var fileList = []; //파일 정보를 담아 둘 배열
            // 드래그 파일 첨부
            $(".uploadFile .file-drop, .uploadFile .file-list").on("dragenter", function(e){
                e.preventDefault();
                e.stopPropagation();
            }).on("dragover", function(e){
                e.preventDefault();
                e.stopPropagation();
                $(this).css("background-color", "var(--b-color3)");
            }).on("dragleave", function(e){
                e.preventDefault();
                e.stopPropagation();
                $('.uploadFile .file-drop, .uploadFile .file-list').css("background-color", "transparent");
            }).on("drop", function(e){
                e.preventDefault();

                var files = e.originalEvent.dataTransfer.files;
                if(files != null && files != undefined){
                    var tag = "";
                    for(i=0; i<files.length; i++){
                        var f = files[i];
                        fileList.push(f);
                        var fileName = f.name;
                        var fileSize = f.size / 1024;
                        fileSize = fileSize < 1 ? fileSize.toFixed(3) : fileSize.toFixed(1);
                        tag += "<div class='file-name'><span>'" + fileName + "(" + fileSize + "kb)'</span><button type='button' class='remove'></button></div>";
                    }
                    $('.uploadFile').addClass('active').find('.file-list').append(tag);

                    //첨부파일 삭제
                    $('.uploadFile .file-list .file-name .remove').on('click',function(){
                        $(this).parent().remove();
                        if($('.uploadFile .file-list .file-name').length < 1){
                            $('.uploadFile').removeClass('active')
                        }
                    });
                }
                $('.uploadFile .file-drop, .uploadFile .file-list').css("background-color", "transparent");
            });

        });
    </script>
@endsection