@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>
                                <a href="#none">
                                    <i class="ico-myclass-03"></i>
                                    <span>CDT<br>모의고사</span>
                                </a>
                            </li>
                            <li class="on">
                                <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 boardView">
                        <div class="row">
                            <div class="column c100p">
                                <div class="my-tab">
                                    <ul>
                                        <li class="on"><a href="/publish/academy/classroom/boarddata">선생님 자료실</a></li>
                                        <li><a href="/publish/academy/classroom/boarddata2">모의고사 자료실</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column c100p">
                                <div class="card my-class-sub">
                                    <div class="topWrap">
                                        <h3 class="board-title">IELTS Writing 어휘&문장연습 책 공부중인데 여쭤볼게 있어서 글 남겨요</h3>
                                        <div class="infoWrap flex">
                                            <div class="box">
                                                <strong>작성자</strong>
                                                <span>소피아</span>
                                            </div>
                                            <div class="box">
                                                <strong>작성일</strong>
                                                <span>25.04.05</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="contentWrap">
                                        사용자가 입력한 내용이 노출됩니다. 텍스트 필드 텍스트 필드 텍스트 필드 텍스트 필드
                                    </div>

                                    <!-- 첨부파일이 없는 경우 fileWrap 제거 -->
                                    <div class="fileWrap">
                                        <div class="file"><p class="ellipsis_1 name">파일명이 들어가고 확장자가 들어가고 파일크기가 들어갑니다.확장자(파일크기)</p> <a href="#none" class="icon" download>다운로드</a></div>
                                        <div class="file"><p class="ellipsis_1 name">파일명파일명.확장자(파일크기)</p> <a href="#none" class="icon" download>다운로드</a></div>
                                        <div class="file"><p class="ellipsis_1 name">%파일명%%파일명%%파일명%.jpg(14kb)</p> <a href="#none" class="icon" download>다운로드</a></div>
                                    </div>

                                    <div class="bottomBtnWrap flex">
                                        <!-- 목록 버튼 -->
                                        <div class="go-list">
                                            <a href="/publish/academy/classroom/boarddata">목록 보기</a>
                                        </div>
                                        <!-- 수정 버튼 -->
                                        <div class="applyWrap">
                                            <label><input type="submit" value="수정"></label>
                                        </div>
                                        <!-- 삭제 버튼 -->
                                        <div class="delete">
                                            <a href="">삭제</a>
                                        </div>
                                    </div>

                                    <!-- 댓글 영역 -->
                                    <div class="commentArea">
                                        <p class="title customLine">이벤트 댓글 <span>12</span>건</p>

                                        <div class="inputArea">
                                            <div class="replyArea">
                                                <!-- 댓글 -->
                                                <div class="original-comment">
                                                    <div class="box">
                                                        <button type="button" class="remove-comment"><span class="hidden">삭제</span></button>
                                                        <div class="manager">
                                                            <div class="profile"><figure style="background-image:url('');"></figure></div>
                                                            <div class="info">
                                                                <div class="name">edm IELTS</div>
                                                                <div class="optionWrap">
                                                                    <span>2023.06.13</span>
                                                                    <span>00:00:01</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="textWrap">
                                                            <div class="text">
                                                                <div class="reply">모든 국민은 인간으로서의 존엄과 가치를 가지며, 행복을 추구할 권리를 가진다. 국가는 개인이 가지는 불가침의 기본적 인권을 확인하고 이를 보장할 의무를 진다. 헌법재판소에서 법률의 위헌결정, 탄핵의 결정, 정당해산의 결정 또는 헌법소원에 관한 인용결정을 할 때에는 재판관 6인 이상의 찬성이 있어야 한다. 새로운 회계연도가 개시될 때까지 예산안이 의결되지 못한 때에는 정부는 국회에서 예산안이 의결될 때까지 다음의 목적을 위한 경비는 전년도 예산에 준하여 집행할 수 있다. 대법원장의 임기는 6년으로 하며, 중임할 수 없다. 재산권의 행사는 공공복리에 적합하도록 하여야 한다. 국가는 국민 모두의 생산 및 생활의 기반이 되는 국토의 효율적이고 균형있는 이용·개발과 보전을 위하여 법률이 정하는 바에 의하여 그에 관한 필요한 제한과 의무를 과할 수 있다.</div>
                                                            </div>
                                                            <div class="flex buttonWrap">
                                                                <button type="button" class="add-comment">답글 달기</button>
                                                                <button type="button" class="hide-comment">답글 <span class="num">2</span>개 <p>&nbsp;<span class="type1">숨기기</span><span class="type2">보기</span></p></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- 답글 -->
                                                <div class="addCommentArea"></div>
                                            </div>

                                            <div class="comment">
                                                <div class="box">
                                                    <button type="button" class="remove-comment"><span class="hidden">삭제</span></button>
                                                    <div class="manager">
                                                        <div class="profile"><figure style="background-image:url('');"></figure></div>
                                                        <div class="info">
                                                            <div class="name">edm IELTS</div>
                                                            <div class="optionWrap">
                                                                <span>2023.06.13</span>
                                                                <span>00:00:01</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="textWrap">
                                                        <div class="text">
                                                            <div class="reply"><p class="who"><b>대댓글의 대상자</b></p>이 곳에 입력한 텍스트가 들어갑니다.</div>
                                                        </div>
                                                        <div class="flex buttonWrap">
                                                            <button type="button" class="add-comment">답글 달기</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 댓글 작성 -->
                                        <div class="replyInputWrap bottom-fix-btn">
                                            <form action="">
                                                <div class="flex align-c">
                                                    <label class="text"><textarea placeholder="댓글을 입력해주세요." class="inputReply"></textarea></label>
                                                    <button type="button" class="registration" data-comment="original" disabled>등록</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection



@section("academy-script")
    <script>
        $(function(){
            // 댓글 입력하면 조회 버튼 활성화
            $('.replyInputWrap .inputReply').on('keyup',function(key){
                if($(this).val() != ''){
                    $(this).parents('.replyInputWrap').find('.registration').attr('disabled',false);
                    // 텍스트 길이에 따라 textarea height 조절
                    var height = $(this).css("height");
                    var iScrollHeight = $(this).prop("scrollHeight");
                    $(this).parents('.replyInputWrap').find('.text').css('height',iScrollHeight);
                }else{
                    $(this).parents('.replyInputWrap').find('.registration').attr('disabled',true);
                    $(this).parents('.replyInputWrap').find('.text').css('height','40');
                }
            });

            // 답글 달기 버튼
            let _commentState = false;
            $('.replyArea .add-comment').on('click',function(){
                _commentState = true;
                let thisCommentArea = $(this).parents('.replyArea').find('.addCommentArea');
                if(_commentState == true){
                    $('.replyInputWrap .registration').on('click',function(){
                        thisCommentArea.prepend(inputReplyHtml);
                        $('.replyInputWrap .inputReply').val('');
                        $('.replyInputWrap .text').css('height','40');
                        _commentState = false;
                    });
                }else{
                    $('.commentArea').pretend(inputReplyHtml_original);
                    $('.replyInputWrap .inputReply').val('');
                    $('.replyInputWrap .text').css('height','40');
                }
            });

            $('.replyInputWrap .registration').on('click',function(){
                // 대댓글 추가
                $('.commentArea .inputArea').prepend(inputReplyHtml_original);
                $('.replyInputWrap .inputReply').val('');
                $('.replyInputWrap .text').css('height','40');
            });

            // 답글 숨기기 버튼
            $('.replyArea .original-comment .hide-comment').each(function(index,item){
                $(item).on('click',function(){
                    if($(item).hasClass('hide') == false){
                        $(this).addClass('hide').closest('.replyArea').find('.comment').hide();
                    }else{
                        $(this).removeClass('hide').closest('.replyArea').find('.comment').show();
                    }
                });
            });

            // 댓글
            const inputReplyHtml_original = `
                <div class="replyArea">
                    <div class="original-comment">
                        <div class="box">
                            <button type="button" class="remove-comment"><span class="hidden">삭제</span></button>
                            <div class="manager">
                                <div class="profile"><figure style="background-image:url('');"></figure></div>
                                <div class="info">
                                    <div class="name">edm IELTS</div>
                                    <div class="optionWrap">
                                        <span>2023.06.13</span>
                                        <span>00:00:01</span>
                                    </div>
                                </div>
                            </div>
                            <div class="textWrap">
                                <div class="text">
                                    <div class="reply">이 곳에 입력한 텍스트가 들어갑니다.</div>
                                </div>
                                <div class="flex buttonWrap">
                                    <button type="button" class="add-comment">답글 달기</button>
                                    <button type="button" class="hide-comment">답글 <span class="num">2</span>개 <p>&nbsp;<span class="type1">숨기기</span><span class="type2">보기</span></p></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="addCommentArea"></div>
                </div>
            `;

            // 대댓글
            const inputReplyHtml = `
                <div class="comment">
                    <div class="box">
                        <button type="button" class="remove-comment"><span class="hidden">삭제</span></button>
                        <div class="manager">
                            <div class="profile"><figure style="background-image:url('');"></figure></div>
                            <div class="info">
                                <div class="name">edm IELTS</div>
                                <div class="optionWrap">
                                    <span>2023.06.13</span>
                                    <span>00:00:01</span>
                                </div>
                            </div>
                        </div>
                        <div class="textWrap">
                            <div class="text">
                                <div class="reply"><p class="who"><b>대댓글의 대상자</b></p>이 곳에 입력한 텍스트가 들어갑니다.</div>
                            </div>
                            <div class="flex buttonWrap">
                                <button type="button" class="add-comment">답글 달기</button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });
    </script>
@endsection