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

@section("academy-css")

    {!! resource('css/academy/sub.css') !!}
    {!! resource('css/myclass/my_class_mo.css') !!}
    {!! resource('css/myclass/my_class_mo_academy.css') !!}
@endsection



@section("academy-content")
<div class="container_m boardView">
    <div class="max-width">
        <div id="nav">
            <button type="button" onclick="history.back()" class="ico-back">뒤로가기</button>
            <h2>자료실</h2>
        </div>
        <!-- <div id="btn">
            <a href="#none" class="btn-list on">
                목록
            </a>
        </div> -->
        <div class="contentWrap">
            <div class="board-title">IELTS Writing 어휘&문장연습 책 공부중인데 여쭤볼게 있어서 글 남겨요</div>
            <div class="board-info">
                <div class="box">
                    <strong>작성자</strong>
                    <span>엘리자베스</span>
                </div>
                <div class="box">
                    <strong>작성일</strong>
                    <span>24.03.13</span>
                </div>
            </div>
            <div class="content">이안 선생님의 writing 수업 덕분에 합격한것 같습니다. 처음에는 4.5가 나와서 걱정을 많이 했지만, 수업을 다 챙겨듣고 템플릿을 외우고 꼭 들어가야 하는 표현 등 시험 볼 때 중요한 정보들을 다 외우고 시험을 치러 갔더니 좋은 성적을 받은 것 같아요.</div>
        </div>

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

            <!-- 댓글 작성 -->
            <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 class="go-list">
            <a href="/m/academy/classroom/data">목록 보기</a>
        </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