@extends('layouts.default', [
    'activatedNavItem' => 'INQUIRY',
])

@push('head')
    <link rel="stylesheet" type="text/css" href="/css/board/common.css"/>
    <link rel="stylesheet" type="text/css" href="/css/board/qna/board.css"/>

    <link rel="stylesheet" type="text/css" href="/css/inquiry.css?ver=20200715"/>
@endpush

@section('content')
    <div class="bbs-banner inquiry">
        <p class="title">실시간Q&amp;A</p>
        <p class="sub">궁금한 사항을 남겨주세요 <br>전문 컨설턴트가 24시간 이내 <br class="mo-br">친절히 답변해드리겠습니다</p>
        <a href="{{ route('inquiry.qna.create') }}" class="createBtn" style="color: #fff;">문의하기</a>
    </div>

    <div class="max-width">
        <div class="bbs read">
            <div class="view-wrap-qna">
                <!-- 게시판 헤더 -->
                <header>
    {{--                                <div class="q-title"><i>Q.</i>{{ $content['title'] }}</div>--}}
                    <div class="titleWrap">
                        <i>Q.</i><h1 class="subject">[{{ $content['country_name'] }} {{ $content['category_name'] }}] {{ $content['title'] }}</h1>
                    </div>
                    <div class="info">
                        <span class="user-name">{{ $content['mask_name'] }}</span>
                        <span class="user-date">{{ $content['created_at'] }}</span>
                        <span class="count">{{ $content['read_cnt'] }}</span>
                    </div>
                    @if ($content['status'] === 'CLOSED')
                        <div class="q-process complete">답변완료</div>
                    @else
                        <div class="q-process">답변대기</div>
                    @endif
                </header>
                <!-- 질문내용 -->
                <article class="view-content-question">
                    {!! $content['content'] !!}
                </article>

                @foreach ($content['comments'] as $comment)
                    <div class="{{ $comment['host'] === 'INTRA' ? 'view-content-answer' : 'view-content-question' }}">
                        <i>A.</i>
                        <div>{!! $comment['content'] !!}</div>
                        <div class="write-date">{{ $comment['created_at'] }}</div>
                    </div>
                @endforeach

                @if ($content['permission']['REPLY'])
                    <!-- 코멘트작성 -->
                    <div id="qna-reply-form" class="d-none">
                        <form method="POST" name="form-recomment" id="form-recomment" action="{{ route('inquiry.qna.replies.store', $content['id']) }}">
                            @csrf
                            <div class="view-content-comment">
                                <textarea name="content"></textarea>
                            </div>
                            <div class="button-wrap center">
                                <button type="submit" class="button color">작성하기</button>
                                <button type="button" class="button" id="qna-reply-cancel">취소</button>
                                <a href="{{ route('inquiry.qna.index', request()->query()) }}" class="button">목록</a>
                            </div>
                        </form>
                    </div>
                @endif
            </div>

            <div id="qna-button-form">
                <div class="button-wrap center">
                    @if ($content['permission']['UPDATE'])
                        <a href="{{ route('inquiry.qna.edit', array_merge(['id' => $content['id']], request()->all())) }}" class="button color">수정</a>
                    @endif
                    @if ($content['permission']['DELETE'])
                        <button type="button" class="button" id="qna-delete">삭제</button>
                    @endif
                    @if ($content['permission']['REPLY'])
                        <button type="button" class="button color" id="qna-reply">다시문의하기</button>
                    @endif
                </div>
            </div>

            <div class="listBtn">
                <a href="{{ route('inquiry.qna.index', request()->query()) }}">목록</a>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function() {
            @if ($content['permission']['DELETE'])
                $('#qna-delete').click(function() {
                    $.ui_ajax({
                        ajax: {
                            url: '{{ route('inquiry.qna.destroy', $content['id']) }}',
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                _method: 'DELETE'
                            }
                        },
                        dialog: {
                            type: 'error',
                            confirm: true,
                            text_confirm: '질문을 삭제하시겠습니까?',
                            text_process: '질문을 삭제중입니다.<br/>잠시만 기다려 주세요.',
                            text_done: '질문 삭제가 완료되었습니다.',
                            text_fail: '질문 삭제에 실패했습니다.',
                            done: function(data) {
                                if (data.url) {
                                    window.location.href = data.url;
                                }
                            }
                        }
                    });

                    return false;
                });
            @endif

            @if ($content['permission']['REPLY'])
                $('#form-recomment').submit(function() {

                    var $form = $(this);

                    $.ui_ajax({
                        ajax: {
                            url: $form.attr('action'),
                            method: $form.attr('method'),
                            data: $form.serialize(),
                        },
                        dialog: {
                            text_process: '질문을 등록중입니다.<br/>잠시만 기다려 주세요.',
                            text_done: '질문 등록이 완료되었습니다.<br/>담당컨설턴트가 빠르게 답변 드리도록 하겠습니다.<br/><br/>감사합니다.',
                            text_fail: '질문 등록에 실패했습니다.',
                            done: function(data) {
                                if (data.url) {
                                    window.location.href = data.url;
                                }
                            }
                        }
                    });

                    return false;
                });
            @endif

            $('#qna-reply').click(function() {
                $('#qna-button-form').addClass('d-none');
                $('#qna-reply-form').removeClass('d-none');
            });

            $('#qna-reply-cancel').click(function() {
                $('#qna-button-form').removeClass('d-none');
                $('#qna-reply-form').addClass('d-none');
            });
        });
    </script>
@endsection