@extends('layout', ['service'=>$service])

@section('css')
    <link rel="stylesheet" href="{{ asset('css/board.css') . $css_version }}">
@endsection

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

@section('subgnb', view($service.'.gnb'))

@section('content')

<div class="container">
    @include('common.board.path')

    <div class="view-wrapper">
        <div class="wrapper">
            <div class="view-header">
                <div class="view-title">{{ $article->title }}</div>
                <div class="view-info">
                    <dl>
                        <dt>
                            작성자
                        </dt>
                        <dd>
                            {{ $article->created_by ? $article->writer->name:'' }}
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            작성일
                        </dt>
                        <dd>
                            {{ $article->created_at->format('Y-m-d') }}
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            조회
                        </dt>
                        <dd>
                            {{ $article->views }}
                        </dd> 
                    </dl>
                </div>
            </div>
            <div class="view">
                @if(view()->exists('common.board.'.$db.'.view-detail-inc'))
                    @include('common.board.'.$db.'.view-detail-inc')
                @endif

                {!! $article->content !!}
            </div>

            @if ($config->attachable and !empty($article->attachments))
                <div class="file-attach-wrapper">
                    <ul>
                        @foreach($article->attachments as $file)
                            <li id="file-{{ $file->id }}">
                                @if(in_array($file->extension, config('system.image_ext')))
                                    <img src="{{ $file->url }}">
                                @endif
                                <div>
                                    <a href="{{ $file->url }}" target="_blank">{{ $file->name }}</a>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>            
            @endif

            <div class="view-cmt">
                @if ($article->comments->count() > 0)
                <div class="view-cmt-total">
                    <span>전체</span>
                    <span class="number">{{ $article->comments->count() }}</span>
                </div>
                @endif

                @foreach($comments as $comment)
                    <ul class="comments">
                        @include('common.board.comment', ['comment' => $comment])
                    </ul>
                @endforeach

                @can('create-comments')
                    @include('common.board.comment-form', ['article_id' => $article->id])
                @endcan
            </div>

            <div class="view-others">
                <div class="view-prev-post">
                    @if ($article->prev)
                        <a href="{{ route($db.'.view', ['service'=>$service, 'id'=>$article->prev->id]) }}">{{ $article->prev->title }}</a>
                    @endif
                </div>
                <div class="view-next-post">
                    @if ($article->next)
                        <a href="{{ route($db.'.view', ['service'=>$service, 'id'=>$article->next->id]) }}">{{ $article->next->title }}</a>
                    @endif
                </div>
            </div>

            @if ($db == 'pass_review')
                <div class="view-related-post">
                    <strong>합격생이 수강한 강좌</strong>
                    <ul>
                        <li><a href="#none">응시권+CDT 모의고사 2회 무료 패키지 보러가기 </a></li>
                        <li><a href="#none">ALL-PASS IELTS 보러가기</a></li>
                        <li><a href="#none">ALL-PASS IELTS 보러가기</a></li>
                    </ul>
                </div>
            @endif

            <div class="view-footer">
                <div class="view-btn-area">
                    <div class="view-btn-left">
                        <a class="button primary" href="{{ route($db.'.index', ['service'=>$service]) }}">목록</a>
                    </div>
                    <div class="view-btn-right">
                        @auth
                            @if(auth()->user()->can('edit-articles') or auth()->user()->id == $article->created_by)
                                <a class="button primary" href="{{ route($db.'.compose', ['service'=>$service, 'id'=>$article->id]) }}">수정</a>
                            @endif
                            @if(auth()->user()->can('delete-articles') or auth()->user()->id == $article->created_by)
                                <a class="button primary del" href="{{ route($db.'.delete', ['service'=>$service, 'id'=>$article->id]) }}">삭제</a>

                                <form id="delete-form" method="post" action="">
                                    @csrf
                                    @method('delete')
                                </form>
                            @endif
                        @endauth
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer', view('footer'))

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js" integrity="sha512-EAEoidLzhKrfVg7qX8xZFEAebhmBMsXrIcI0h7VPx2CyAyFHuDvOAUs9CEATB2Ou2/kuWEDtluEVrQcjXBy9yw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function () {
        autosize($('textarea'));

        if (window.location.hash) {
            var targetName = window.location.hash.substring(1);
            var targetElement = $('a[name="' + targetName + '"]');

            if (targetElement.length) {
                var offset = 300;
                $('html, body').animate({
                    scrollTop: targetElement.offset().top - offset
                }, 'slow');
            }
        }

        $('.del').each(function(){
            var $obj = $(this);
            $obj.on('click', function(e){
                e.preventDefault();
				if (confirm('정말 삭제하시겠습니까?')) {
                    $('#delete-form').attr('action', $obj.attr('href'));
                    $('#delete-form').submit();
				}
            });
        });

        $('.cmt-del').each(function(){
            var $obj = $(this);
            $obj.on('click', function(e){
                e.preventDefault();
				if (confirm('정말 삭제하시겠습니까?')) {
                    $('#comment-delete-form').attr('action', $obj.attr('href'));
                    $('#comment-delete-form').submit();
				}
            });
        });

        $('.cmt-reply').each(function(){
            var $obj = $(this);
            $obj.on('click', function(e){
                e.preventDefault();
                var cmt_id = $obj.attr('data-uid');
                $.ajax({
                    url: $obj.attr('href'),
                    type: 'GET',
                    success: function(result) {
                        $('#reply-form-'+cmt_id).html(result);
                        autosize($('textarea'));
                    }
                });
            });
        });

        $('.cmt-show-hide').each(function(){
            var $obj = $(this);
            var $target = $('#cmt-children-'+$obj.attr('data-uid'));

            $obj.on('click', function(){
                var cnt = $obj.attr('data-count');
                if ($target.is(':hidden')) {
                    $target.slideDown();
                    $obj.html('답글 <span>'+cnt+'</span>개 숨기기');
                } else {
                    $target.slideUp();
                    $obj.html('답글 <span>'+cnt+'</span>개 보이기');
                }
            });
        });
    });
</script>
@endsection