@extends('common.layout')
<link rel="stylesheet" type="text/css" href="{{asset('css/list.css') }}" />
@section('content')

<div class="container">
  <section id="sec01" class="sec01">
    <div class="contWrap">
      <div class="listWrap">
        <div class="titleWrap">
          <h2 class="title txt23_700">자주 하는 질문</h2>
          <div class="cateWrap">
            <div class="selectBox">
              <select name="contentType" id="contentType" class="txt14_400" onchange="nSearch(this)">
                <option value="전체" class="txt14_400">전체</option>
                <option value="콘텐츠 교정" class="txt14_400">콘텐츠 교정</option>
                <option value="콘텐츠 유형" class="txt14_400">콘텐츠 유형</option>
                <option value="UX Writing 가이드라인" class="txt14_400">UX Writing 가이드라인</option>
                <option value="고객언어사전" class="txt14_400">고객언어사전</option>
                <option value="피드" class="txt14_400">피드</option>
                <option value="마이페이지" class="txt14_400">마이페이지</option>
                <option value="체크리스트" class="txt14_400">체크리스트</option>
                <option value="기타" class="txt14_400">기타</option>
              </select>
            </div>
          </div>
        </div>

        <div class="tableWrap">
          <table>
            <colgroup>
              <col width="58px">
              <col width="108px">
              <col width="108px">
              <col width="*">
              <col width="158px">
              <col width="108px">
            </colgroup>
            <thead>
              <tr>
                <th>
                  <div class="formCheckBox">
                    <input type="checkbox" id="allCheck" name="allCheck"  onclick="selectAll(this)">
                    <label for="allCheck" role="checkbox"></label>
                  </div>
                </th>
                <th><p class="txt13_400">번호</p></th>
                <th><p class="txt13_400">구분</p></th>
                <th><p class="txt13_400">제목</p></th>
                <th><p class="txt13_400">등록일</p></th>
                <th><p class="txt13_400">관리</p></th>
              </tr>
            </thead>

            <tbody class="tbodyWrap">
            </tbody>
          </table>
        </div>

        <div class="buttonWrap flexBt">
          <button id="faqPopBtn" onclick="btnFaqPop()" class="btn02">담당자 정보 관리</button>
          <div>
            <button type="button" id="deleteBtn" class="btn01" onclick="nDel()">삭제</button>
            <button type="button" class="btn01 btnBlue" onclick="location.href='wr'">등록</button>
          </div>
        </div>

        <div class="pageWrap">
          <ul class="pageNum"></ul>
        </div>
      </div>
    </div>
  </section>
</div>
<script>
  clsUrlSearchParam.init(location.search);
  clsTmsClass.setSearchParam(clsUrlSearchParam);
  clsListClass.setSearchParamClass(clsUrlSearchParam);

  var gLoadCall = 0;
  var currentPage = 1; // 현재 페이지
  var faqType = ""; // FAQ분류

	var ntList = '<tr>' +
										'<td>' +
											'<div class="formCheckBox">'+
												'<input type="checkbox" id="check{0}" name="check{0}" class="checkBox" onclick="checkSelectAll()">' +
												'<label for="check{0}" role="checkbox"></label>' +
											'</div>' +
										'</td>' +
										'<td><p class="txt14_400">{listNo}</p></td>' +
									    '<td><p class="txt14_400">{1}</p></td>' +
									    '<td><p class="txt14_400 textLeft">{2}</p></td>' +
									    '<td><p class="txt14_400">{3}</p></td>' +
									    '<td><button type="button" class="btn03 btnGray" onClick="{100}">상세 보기</button></td>' +
									'</tr>';

  function setInitData(){
      if (clsUrlSearchParam.get("faqtype")) {
          document.querySelector("#contentType").value = clsUrlSearchParam.get("faqtype");
      }

      var page = clsUrlSearchParam.get("page") ? clsUrlSearchParam.get("page") : 1;
      var data = {
        "faqType" : document.querySelector("#contentType").value,
        "page" : page,
      }

      try {
        var initJson = { "apiUrl" : "/mda/api/faqs", "method": "GET", "data":data }
        var listType = { "type": "link", "listCount": 10 }

        //await tmsList.setSimpleInit(initJson, tmsList.setListItemForm, ntList, listType);
        clsListClass.setTmsClass(clsTmsClass);
        clsListClass.setSimpleInit(initJson, setCallBackFnc, ntList, listType , clsTmsClass);

        if (document.querySelector(".tbodyWrap").children.length < 1) {
          var tdLength = document.querySelectorAll("thead tr th").length;
                  document.querySelector(".tbodyWrap").innerHTML ='<tr><td colspan="' + tdLength + '"><p class="txt14_400">데이터가 없습니다.</p></td></tr>';
        }
      } catch (error) {

      }
  }

  function setCallBackFnc(json){
        try {
          clsListClass.currentSetData = JSON.parse(json);
          clsListClass.setInitPage(clsListClass.currentSetData.data , '');
          clsListClass.setPaging(clsListClass.pagingTarget, clsListClass.pageClassName);
          clsListClass.getPaging();
          clsListClass.getList(clsListClass.listTarget, clsListClass.currentSetData.data, ntList);
          } catch(e){
            if ( gLoadCall < 1){
                gLoadCall++
                window.setTimeout(setInitData , 500);
            }
          }
    }

    function btnFaqPop(){
      clsTmsClass.tmsPopOrganize("{{url('fa/fapop')}}", 480 ,TmsPopClass);
    }

  function nSearch(item){
    var faqType = item.value;

    clsUrlSearchParam.set("faqtype", faqType)
    clsUrlSearchParam.set("page", 1)
    location.href = location.pathname + '?' + clsUrlSearchParam.toString();
  }

  function nDel(){
      if(!confirm("삭제 하시겠습니까?"))return;
      var selectChks = document.querySelectorAll('.tbodyWrap input[type="checkbox"]:checked');  // 선택된 체크박스 가져오기
      var selectChkIds = [];
      for(var i=0;i< selectChks.length;i++){
            selectChkIds.push(selectChks[i].id.replace(/\D/g, ''));
      }
      if(selectChks.length !== 0) { // 1개 이상
          if(selectChks.length > 1) { // 2개 이상
            deleteData = selectChkIds;
            clsTmsClass.setDataInformation("/mda/api/faqs", "POST", {"faqNo": deleteData} , function(){
              location.href="lt"; // 목록으로 이동
            });
          }
          else { // 1개 일때 스트링으로 담기
            deleteData = selectChkIds[0];
            clsTmsClass.setDataInformation("/mda/api/faqs", "POST", {"faqNo": deleteData} , function(){
              location.href="lt"; // 목록으로 이동
            });
          }
        }
  }

  function changeData(){
    setInitData()
  }

  window.onload=function(){
    setInitData();
  }

  // 팝업 닫기
  function popCloseFnc() {
    TmsPopClass.popClose();
  }
</script>
@endsection