@extends('common.layout')
@section('commostyle')
    <link rel="stylesheet" type="text/css" href="{{asset('css/nt.css') }}" />
    <script type="text/javascript" src="{{asset('cmm/utils.js') }}"></script>
@endsection('commostyle')
@section('content')

    <div class="container">
        <section id="sec01" class="sec01">
            <ul class="breadCrumb">
                <li>홈</li>
                <li>자주 하는 질문</li>
            </ul>
            <div class="title titleSelect">
                <h2 class="txt23_700">자주 하는 질문</h2>
                <div class="searchWrap">
                    <select name="searchSelect" id="searchSelect" class="searchSelect txt12_400" onchange="nSend('0')">
                        <option value="all">전체</option>
                        <option value="Title" @if($searchType == 'Title') selected @endif>제목</option>
                        <option value="Content"  @if($searchType == 'Content') selected @endif>내용</option>
                    </select>
                    <input type="text" id="searchName" name="searchName" class="searchName" placeholder="검색어를 입력해주세요" onkeypress="enterEvent()" value="{{ $stx }}"/>
                    <button type="button" id="searchBtn" class="searchBtn" onclick="nSend('{{ $searchType }}')"><img src="{{asset('images/search_small.svg') }}" alt="검색 icon" /></button>
                </div>
            </div>
            <div class="contWrap ntList bsList">
                <div class="listBox">
                    <ul class="tabBox">
                        <li class="{{ $faqType == '' ? 'active' : ($faqType ==0 ? 'active' : '') }}"><a href="javascript:void(0);" class="active txt11_500"  onclick="tabButton(1,0)">전체</a></li>
                        @if(count((array)$catelist) > 0)
                            @foreach($catelist AS $key=>$cate)
                                <li class="{{  $cate->seq == intval($faqType) ? 'active':'' }}"><a href="javascript:tabButton({{ $key + 2 }} , {{ $cate->seq }})" class="txt11_500">{{$cate->QuestionType === 'UX Writing 가이드라인' ? '가이드라인' : ($cate->QuestionType === '피드' ? '콘텐츠 피드' : $cate->QuestionType) }}</a></li>
                            @endforeach
                        @endif
                    </ul>
                    <ul class="listBody">
                     @if($catedata->total_num > 0)
                         @foreach($catedata->list AS $item)
                           <li>
                               <a href="javascript:clsListClass.openItemView('{{ $item->faqNo }}','/frn/bs/bsPop?faqNo={{ $item->faqNo }}')" class="faqBt faq" data-faq="{{ $item->faqNo }}">
                                   <div class="tabTitle txt11_500">{{ $item->faqType }}</div>
                                   <div class="txt14_400">{{ $item->faqTitle }}</div>
                               </a>
                           </li>
                         @endforeach
                     @endif
                    </ul>
                    <div class="pageWrap">
                        <ul class="pageNum"></ul>

                        <div class="tooltip" onmouseleave="tooTipHover(event, 'leave')">
                            <div class="tipTit" onmouseenter="tooTipHover(event, 'enter')">
                                <p class="txt12_500">담당자 정보</p>
                                <span><img src="{{asset('images/question_small_gray.svg') }}" alt="" /></span>
                            </div>
                        </div>
                        <div class="tipTxt">
                            <p>더 궁금한 사항은 담당자에게 문의해 주세요.</p>
                            <ul>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </div>
    <script>
        var g_total_page    = "{{ $catedata->total_page }}";
        var g_total_num     = "{{ $catedata->total_num }}";
        var g_current_pg    = "{{ $page }}";
        var g_faqtype       = "{{ $faqType }}";
        var g_searchType       = "{{ $searchType }}";


        function setManagerInfo(){
            clsTmsClass.setDataInformation("/frn/api/manager", "GET", "" , function(data){
                var   tipTxtCont = document.querySelector('.tipTxt ul');
                var managerData = null;
                try {
                    managerData = JSON.parse(data).data;
                } catch(e){

                }

                if (managerData == null) return;
                tipTxtCont.innerHTML = " ";
                tipTxtCont.innerHTML += '<li><p>'+managerData.manager_mail+'</p></li>' +
                    '<li><p>'+managerData.manager_phone_number+' ('+managerData.manager_name+')</p></li>';
            });
        }

        function setInitData(){
            setManagerInfo();
            setTimeout(function(){
                var currentPage = g_current_pg !='' ? parseInt(g_current_pg,10) : 1;
                console.log('currentPage :' + currentPage);
                clsListClass.pgElm = document.querySelector(".pageNum");
                clsListClass.totalpage = g_total_page;    // 총 페이지
                clsListClass.totalcount = g_total_num;    // 총 게시물 갯수
                clsListClass.getPaging(currentPage);
                clsListClass.clsTmsClass = clsTmsClass;
            },500);
        }

        function changeLocation(seq){
            var keyword     = document.querySelector("#searchName").value;
            var keyfield    = document.querySelector("#searchSelect").value;

            document.location.href='/frn/bs/fa?page=1&stx=' + keyword + '&faqType=' + seq + "&searchType=" + keyfield;
        }

        function tabButton(idx , seq){
            tabBtn = document.querySelectorAll('.tabBox li');
            for(var i=0;i<tabBtn.length;i++){
                tabBtn[i].classList.remove('active');
            }
            tabBtn[idx-1].classList.add('active');

            document.querySelector('#searchName').value ='';
            changeLocation(seq);
        }

        function nSend(type='0'){
            if(type == '0') {
                var nTypes = parseInt(g_faqtype,10);
                changeLocation(nTypes);
            } else {
                var keyword     = document.querySelector("#searchName").value;
                var searchtype = (g_searchType == "Title") ? "Title" : (g_searchType == "Content") ? "Content" : "all";
                console.log("searchtype : ", searchtype);
                console.log(type);
                document.location.href='/frn/bs/fa?page=1&stx=' + keyword + "&searchType=" + g_searchType;
            }
        }

        function enterEvent(){
            if (window.event.keyCode == 13) {
                nSend(g_searchType);
            }
        }


        window.onload=function(){
            setInitData();
        }
    </script>
@endsection