@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 event">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1><span>00</span> 이벤트</h1>
            </div>

            <!-- 게시판 뷰 -->
            <div class="board-view">
                <div class="eventContent">
                    <!-- html 파일 -->
                    이 곳에 이벤트 html파일이 들어갑니다.
                </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 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>
                    </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>
@endsection

@section('ielts-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