@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","inquiry",
            "history-select" => request()->routeIs("qna.index") && Request::get("isView") == 1,
            "category-select" => request()->routeIs("qna.write") && Request::get("isView") == 1,
            "write-select" => request()->routeIs("qna.view"),
            "viewPage" => request()->routeIs("qna.view")
        ])>
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1>1:1 문의</h1>
            </div>

            <div class="content">
                <div class="changeArea">

                    <div class="inquiry-area introWrap">
                        <div class="intro">
                            <figure class="logo"></figure>
                            <p><b>고객의 꿈을 사랑하고 꿈을 이룰 '수 있도록 응원하는 <br>이디엠아이엘츠 입니다.</b></p>
                            <p>문제가 아직 해결되지 않았나요? <br>문의내역을 남겨주시면 안내 도와드리겠습니다.</p>

                            <div class="btnWrap">
                                <button type="button" onclick="onViewPage('write')" class="inquiry-btn">1:1문의 하기</button>
                                <button type="button" onclick="onViewPage('list')" class="inquiry-details">문의 내역 보기</button>
                            </div>
                        </div>
                    </div>

                    @yield("board-qna-content")
                </div>

                <!-- 자주 묻는 질문 -->
                <div class="faq-bottom bottom-sheet type2">
                    <div class="slidingWrap">
                        <button type="button" class="closeBtn"><span>닫기</span></button>
                        <div class="topWrap openBtn">
                            <p class="title"><b>서비스 이용에 어려움을 겪으셨나요?</b></p>
                            <p>1:1 문의 전 아래 내용을 확인하시면 더욱 빠르고 원활하게 서비스를 이용하실 수 있습니다.</p>
                        </div>
                        <div class="listWrap">
                            <div class="title flex sb">
                                <p><b>자주 묻는 질문</b></p>
                                <a href="{{ route("faq.index", [$service]) }}" class="hover-primary2"><b>FAQ 더보기</b><svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke="#9B9BAA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
                            </div>
                            <div class="scrollWidth">

                                @if ($faqList->isNotEmpty())
                                <ul class="list scrollWrap">
                                    @foreach ($faqList as $item)
                                    @php
                                        $content = $item->content;
                                    @endphp
                                    <li>
                                        <div class="q">
                                            <div @class(['category', $item->faq_type])><span></span></div>
                                            <div class="subject ellipsis_1">{{ $content->title}}<figure class="arrow"></figure></div>
                                        </div>
                                        <div class="a">
                                            <div class="scrollWidth">
                                                <div class="scrollWrap"><p class="viewer" id="viewer_{{ $item->id }}">{!! $content->content !!}</p></div>
                                            </div>
                                        </div>
                                    </li>
                                    @endforeach

                                </ul>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="dim"></div>
                </div>
            </div>
        </div>


    </div>
@endsection

@section('ielts-script')
{!! setResources(['toastui-viewer']) !!}
    <script>
        const viewers = {} ;
        $.each($(".viewer"), function() {
            const id = $(this).attr('id');

            viewers[id] = new toastui.Editor({
                el: document.querySelector('#' + id),
                initialValue: $(this).html()
            });
        })


    </script>
    <script>
        function onViewPage(id, isView = 1) {

            @if (Auth::check())
            if ($('#' + id).length > 0) {
                if ( id == 'list' ) {
                    $('#wrap').addClass('history-select').removeClass('write-select category-select');
                } else {
                    $('#wrap').addClass('category-select').removeClass('history-select write-select');
                }
            } else {
                const href = id == 'write' ? "{{ route('qna.write', $service) }}" : "{{ route('qna.index', $service) }}"
                location.href = href + (isView == 1 ? '?isView=' + isView : "") ;
            }
            @else
            location.href = "{{ route('login') }}"
            @endif

        }

        $(function(){
            function resizeW(){
                if($(window).width() < 1200){
                    $('#footer').hide();
                }else{
                    $('#footer').show();
                }
            }
            resizeW();

            $(window).on('resize',function(){
                resizeW();
            });



            if (localStorage.getItem("isDirectView")) {
                const id = localStorage.getItem("isDirectView");
                onViewPage(id);
                localStorage.removeItem("isDirectView");
            }

            /*********************************************************************
                자주 묻는 질문 (bottom sheet)
            *********************************************************************/
            $('.bottom-sheet .list .q').on('click',function(){
                $(this).parent().toggleClass('active').find('.a').stop().slideToggle(300).parent().siblings().removeClass('active').find('.a').stop().slideUp(300);
            });
        });
    </script>

    @yield("qna-script")
@endsection