@extends("academy.layout", ['service' => 'academy'])

@section("academy-css")

    {!! resource('css/academy/sub.css') !!}
    {!! resource('css/myclass/my_class.css') !!}
    {!! resource('css/myclass/my_class_academy.css') !!}
@endsection



@section("academy-content")
<div class="container">
    <div class="path-wrapper">
        <div class="wrapper">
            <dl class="path">
                <dt class="blind">path</dt>
                <dd>전체</dd>
                <dd>나의 강의실</dd>
                <dd>첨삭학습</dd>
            </dl>
        </div>
    </div>
    <div class="my-class-wrapper">
        <div class="wrapper">
            <div class="my-class-menu">
                <ul>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-01"></i>
                            <span>메인</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-07"></i>
                            <span>현장 강의</span>
                        </a>
                    </li>
                    <li class="on">
                        <a href="#none">
                            <i class="ico-myclass-03"></i>
                            <span>CDT<br>모의고사</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-02"></i>
                            <span>자료실</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-05"></i>
                            <span>1:1<br>게시판</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="my-class-contents">
                <div class="row">
                    <div class="column c100p">
                        <div class="card my-class-sub boardWrite">
                            <h2>1:1 게시판</h2>
                            <form action="" class="w100p">
                                <div class="topWrap">
                                    <div class="boxWrap">
                                        <div class="box titleBox">문의강좌</div>
                                        <div class="box contentBox">
                                            <select name="" id="" required class="w100p">
                                                <option value="" disabled selected>수강 중인 강좌를 선택해 주세요.</option>
                                                <option value="">%강좌%</option>
                                                <option value="">%강좌%</option>
                                                <option value="">%강좌%</option>
                                                <option value="">%강좌%</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="boxWrap">
                                        <div class="box titleBox">제목</div>
                                        <div class="box contentBox subject">
                                            <input type="text" class="w100p" placeholder="제목을 입력해주세요." required>
                                            <!-- <div class="validation-wrap"><p>제목을 입력하세요.</p></div> -->
                                        </div>
                                    </div>
                                </div>

                                <div class="mt50 text-editor">
                                    텍스트 에디터 영역
                                </div>
                                <!-- <div class="validation-wrap"><p>내용을 입력하세요.</p></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-wrap"></div>
                                </div>

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

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



@section("academy-script")
    <script>
        const files = [];
        $(function(){
            // 파일 첨부
            var mb = 1024 * 1024; //1mb(메가)
            $('.uploadFile input[type="file"]').on('change',function(){
                setFile($(this)[0].files[0], new Date().getTime());
            });

            $(document).on('click', '.uploadFile .file-list-wrap .file-name .remove' , function(){
                $(this).parent().remove();
                if($('.uploadFile .file-list-wrap .file-name').length < 1){
                    $('.uploadFile').removeClass('active')
                }

                delete files[$(this).data('key')];
            });



            // 드래그 파일 첨부
            $(".uploadFile .file-drop, .uploadFile .file-list-wrap").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-wrap').css("background-color", "transparent");
            }).on("drop", function(e){
                e.preventDefault();

                var data = e.originalEvent.dataTransfer.files;
                const now = new Date().getTime()
                if(data != null && data != undefined){
                    for(i=0; i<data.length; i++){
                        setFile(data[i], now + '_' + i);
                    }
                }
                $('.uploadFile .file-drop, .uploadFile .file-list-wrap').css("background-color", "transparent");
            });


            function setFile(file, key) {
                if (files.length >= 3 && $.inArray(file.type, 'image') == -1) {
                    return false;
                }
                var fileName = file.name;
                var fileSize = file.size / 1024;
                fileSize = fileSize < 1 ? fileSize.toFixed(3) : fileSize.toFixed(1);
                files[key] = file;

                const tag = "<div class='file-name'><span>" + fileName + "(" + fileSize + "kb)</span><button type='button' class='remove' data-key='"+key+"'></button></div>";

                $('.uploadFile').addClass('active').find('.file-list-wrap').append(tag);
            }
        });
    </script>
@endsection