@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="searchWrap">
            <input type="text" id="search" name="search" class="search" placeholder="검색어를 입력해주세요">
            <button type="button" id="searchBtn" class="searchBtn">
              <img src="{{asset('images/search_small.svg') }}" alt="검색 icon">
            </button>
          </div>
        </div>

        <div class="tableWrap">
          <table>
            <colgroup>
              <col width="58px">
              <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>
              </tr>
            </thead>
            <tbody class="tbodyWrap">
            </tbody>
          </table>
        </div>

        <div class="buttonWrap">
          <button id="deleteBtn" class="btn01">삭제</button>
          <button class="btn01 btnBlue" onclick="location.href='wr'">등록</button>
        </div>

        <div class="pageWrap">
          <ul class="pageNum"></ul>
        </div>
      </div>
    </div>
  </section>
</div>
<script>
	const tmsClass = new TmsClass();
	const tmsList = new TmsList();

    const searchParams = new URLSearchParams(location.search);
	let stx = ""; // 검색어

    const 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">{4}</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>' +
                    '</a>' +
                  '</tr>';

    (async () => {
		try {

            if (searchParams.get("stx")) {
                document.querySelector("#search").value = searchParams.get("stx");
                stx = searchParams.get("stx");
            }
            const data = {
                "stx" :  stx
            }

            const initJson = { apiUrl : "/mda/api/notices", method: "GET", data }
            const listType = { type: "link", listCount: 10 }

            await tmsList.setSimpleInit(initJson, tmsList.setListItemForm, ntList, listType);
            if (document.querySelector(".tbodyWrap").children.length < 1) {
                let tdLength = document.querySelectorAll("thead tr th").length;

                document.querySelector(".tbodyWrap").innerHTML ='<tr><td colspan=' + tdLength + '><p class="txt14_400">데이터가 없습니다.</p></td></tr>';
            }
		} catch (error) {
			console.log(error);
		}
  })();

  // 삭제버튼 클릭 시
  document.querySelector("#deleteBtn").addEventListener("click",() => {
    confirmMsg("삭제 하시겠습니까?", () => {
      /* 삭제할 고유 faqNo 추출 */
      const selectChks = document.querySelectorAll('.tbodyWrap input[type="checkbox"]:checked');  // 선택된 체크박스 가져오기
      const selectChkIds = Array.from(selectChks).map(checkbox => parseInt(checkbox.id.replace(/\D/g, ''), 10)); // 선텍된 체크박스의 id에서 숫자만 추출
      if(selectChks.length !== 0) { // 1개 이상
        if(selectChks.length > 1) { // 2개 이상
          deleteData = selectChkIds;
        }
        else { // 1개 일때 스트링으로 담기
          deleteData = selectChkIds[0];
        }
        console.log(deleteData); // 삭제할 faqNo 데이터 ( 1개: 스트링, 2개이상: 배열 )

        const listData = tmsClass.setDataInformation("/mda/api/notices/delete", "POST", {"noticeNo": deleteData})
        .then((data) => {
          location.reload(true);
        })
        .catch((error) => {
          console.error(error);
        });
      }
      else { // 0개
        alert('삭제할 리스트를 선택해 주세요');
      }
    });
  });

  document.querySelector("#searchBtn").addEventListener("click",() => {
    const stx = document.querySelector("#search").value;

    searchParams.set("page", 1);
    searchParams.set("stx", stx);
    location.href = location.pathname + '?' + searchParams.toString();
  });
</script>

@endsection