<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/session.php');
require_once($_SERVER['DOCUMENT_ROOT'].'/lib/mydb.php');
$pdo = db_connect();

$title_message = '경동기업 4단계 BOM 구성';

// 1) DB에서 1~4레벨 카테고리 전부 SELECT
$l1_data = $pdo->query("SELECT * FROM {$DB}.category_l1 ORDER BY sortOrder, id")->fetchAll(PDO::FETCH_ASSOC);
$l2_data = $pdo->query("SELECT * FROM {$DB}.category_l2 ORDER BY sortOrder, id")->fetchAll(PDO::FETCH_ASSOC);
$l3_data = $pdo->query("SELECT * FROM {$DB}.category_l3 ORDER BY sortOrder, id")->fetchAll(PDO::FETCH_ASSOC);
$l4_data = $pdo->query("SELECT * FROM {$DB}.category_l4 ORDER BY sortOrder, id")->fetchAll(PDO::FETCH_ASSOC);

// 2) PHP에서 parent_id별로 배열화
$l2_map = [];
foreach($l2_data as $row2){
    $l2_map[$row2['parent_id']][] = $row2;
}
$l3_map = [];
foreach($l3_data as $row3){
    $l3_map[$row3['parent_id']][] = $row3;
}
$l4_map = [];
foreach($l4_data as $row4){
    $l4_map[$row4['parent_id']][] = $row4;
}

include $_SERVER['DOCUMENT_ROOT'] . '/load_header.php';  // common.php 포함되어 있음

?>

<title><?=$title_message?></title>
<style>
  .tree-node {
    margin-left: 1.25rem; /* Bootstrap의 1rem = 16px -> 약 20px */
  }
  .toggle-btn {
    cursor: pointer;
    color: #0d6efd; /* 부트스트랩 primary 색상 */
    margin-right: 0.25rem;
  }
  .d-none {
    display: none !important;
  }
</style>
</head>
<body>

<div class="container mt-4">
  <div class="card justify-content-center text-center mt-3 mb-2">
    <div class="card-body">
      <div class="d-flex justify-content-center align-items-center mb-2">
        <h4 class="mx-1"><?=$title_message?></h4>
		<button type="button" class="btn btn-dark btn-sm mx-3"  onclick='location.reload();' > <i class="bi bi-arrow-clockwise"></i> </button>  	   		  				
        <button type="button" class="btn btn-success btn-sm mx-1" onclick="addCategory(1,0)"> <i class="bi bi-plus-square"></i> 최상위 추가 </button>
        <button type="button" class="btn btn-primary btn-sm mx-1" onclick="expandAllTree();"> <i class="bi bi-plus-square"></i> 전체 펼치기 </button>
        <button type="button" class="btn btn-secondary btn-sm mx-1" onclick="foldAllTree();"> <i class="bi bi-plus-square"></i> 전체 접기 </button>
        <button type="button" class="btn btn-dark btn-sm mx-5" onclick="self.close();"> &times; 닫기 </button>
      </div>
    </div>
  </div>

  <!-- 레벨1 목록 -->
  <?php foreach($l1_data as $l1): ?>
    <div class="tree-node mb-2">
      <!-- 펼치기/접기 아이콘 -->
      <span class="toggle-btn" data-target="l1-<?= $l1['id'] ?>" >
        <i class="bi bi-caret-right-fill"></i>
      </span>
      <strong><?= htmlspecialchars($l1['name']) ?></strong>

    <!-- 수정/삭제/하위추가 버튼들 -->
	<!-- 1단계 항목의 복사 버튼 (아이콘: bi-files) -->
	<button class="btn btn-sm btn-outline-secondary ms-1 mb-1" style="padding:2"
		onclick="copyCategory(1, <?= $l1['id'] ?>)">
	<i class="bi bi-files"></i>
	</button>	  
      <button class="btn btn-sm btn-outline-info ms-2 mb-1" style="padding : 2" 
              onclick="editCategory(1, <?= $l1['id'] ?> , '<?= $l1['name'] ?>')">
        <i class="bi bi-pencil-square"></i> 
      </button>
      <button class="btn btn-sm btn-outline-danger ms-1 mb-1" style="padding : 2" 
              onclick="deleteCategory(1, <?= $l1['id'] ?>)">
        <i class="bi bi-trash3"></i> 
      </button>
      <button class="btn btn-sm btn-outline-primary ms-1 mb-1" style="padding : 2" 
              onclick="addCategory(2, <?= $l1['id'] ?>)">
        <i class="bi bi-plus-square"></i> 
      </button>

      <!-- L2 목록 -->
      <div id="l1-<?= $l1['id'] ?>" class="d-none">
        <?php if(isset($l2_map[$l1['id']])):
          foreach($l2_map[$l1['id']] as $l2):
            $l2_id = $l2['id'];
        ?>
          <div class="tree-node mb-2">
		   &nbsp;&nbsp;&nbsp;
            <span class="toggle-btn" data-target="l2-<?= $l2_id ?>">
              <i class="bi bi-caret-right-fill"></i>
            </span>  
            <?= htmlspecialchars($l2['name']) ?>

            <button class="btn btn-sm btn-outline-info ms-2 mb-1" style="padding : 2" 
                    onclick="editCategory(2, <?= $l2_id ?>, '<?= $l2['name'] ?>')">
              <i class="bi bi-pencil-square"></i> 
            </button>
            <button class="btn btn-sm btn-outline-danger ms-1 mb-1" style="padding : 2" 
                    onclick="deleteCategory(2, <?= $l2_id ?>)">
              <i class="bi bi-trash3"></i> 
            </button>
            <button class="btn btn-sm btn-outline-primary ms-1 mb-1" style="padding : 2" 
                    onclick="addCategory(3, <?= $l2_id ?>)">
              <i class="bi bi-plus-square"></i> 
            </button>

            <!-- L3 목록 -->
            <div id="l2-<?= $l2_id ?>" class="d-none">
              <?php if(isset($l3_map[$l2_id])):
                foreach($l3_map[$l2_id] as $l3):
                  $l3_id = $l3['id'];
              ?>
                <div class="tree-node mb-2">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span class="toggle-btn" data-target="l3-<?= $l3_id ?>">
                    <i class="bi bi-caret-right-fill"></i>
                  </span>  
                  <?= htmlspecialchars($l3['name']) ?>

                  <button class="btn btn-sm btn-outline-info ms-2 mb-1" style="padding : 2" 
                          onclick="editCategory(3, <?= $l3_id ?>, '<?= $l3['name'] ?>')">
                    <i class="bi bi-pencil-square"></i> 
                  </button>
                  <button class="btn btn-sm btn-outline-danger ms-1 mb-1" style="padding : 2" 
                          onclick="deleteCategory(3, <?= $l3_id ?>)">
                    <i class="bi bi-trash3"></i> 
                  </button>
                  <button class="btn btn-sm btn-outline-primary ms-1 mb-1" style="padding : 2" 
                          onclick="addCategory(4, <?= $l3_id ?>)">
                    <i class="bi bi-plus-square"></i>
                  </button>

                  <!-- L4 목록 -->
                  <div id="l3-<?= $l3_id ?>" class="d-none">				  
                    <?php if(isset($l4_map[$l3_id])):
                      foreach($l4_map[$l3_id] as $l4):
                        $l4_id = $l4['id'];
                    ?>
                      <div class="tree-node mb-2"> 
					  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <?= htmlspecialchars($l4['name']) ?>

                        <button class="btn btn-sm btn-outline-info ms-2 mb-1" style="padding : 2" 
                                onclick="editCategory(4, <?= $l4_id ?>, '<?= $l4['name'] ?>')">
                          <i class="bi bi-pencil-square"></i> 
                        </button>
                        <button class="btn btn-sm btn-outline-danger ms-1 mb-1" style="padding : 2" 
                                onclick="deleteCategory(4, <?= $l4_id ?>)">
                          <i class="bi bi-trash3"></i> 
                        </button>
                      </div>
                    <?php endforeach; endif; ?>
                  </div>
                  <!-- end L4 -->

                </div>
              <?php endforeach; endif; ?>
            </div>
            <!-- end L3 -->
          </div>
        <?php endforeach; endif; ?>
      </div>
      <!-- end L2 -->
    </div>
  <?php endforeach; ?>

</div>

<!-- Bootstrap Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel">카테고리 수정/추가</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="닫기"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="catLevel" value="">
        <input type="hidden" id="catId" value="">
        <input type="hidden" id="catParent" name="catParent" value="">
        <div class="mb-3">
          <label for="catName" class="form-label">이름</label>
          <input type="text" class="form-control" id="catName" name="catName" placeholder="카테고리명" autocomplete="off">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary mx-1" onclick="saveCategory()">저장</button>
        <button type="button" class="btn btn-secondary mx-1" data-bs-dismiss="modal">취소</button>
      </div>
    </div>
  </div>
</div>

<!-- 로딩 오버레이 숨김 + 트리 토글 + SweetAlert2 알림 -->
<script>
$(document).ready(function(){
    // 로딩 hide
    var loader = document.getElementById('loadingOverlay');
    if(loader) loader.style.display = 'none';

    // // 트리 토글 (부트스트랩 아이콘 caret 교체)
    // document.querySelectorAll('.toggle-btn').forEach(btn => {
      // btn.addEventListener('click', () => {
        // const targetId = btn.getAttribute('data-target');
        // const sub = document.getElementById(targetId);
        // if(sub) {
          // if(sub.classList.contains('d-none')){
            // sub.classList.remove('d-none');
            // btn.innerHTML = '<i class="bi bi-caret-down-fill"></i>';
          // } else {
            // sub.classList.add('d-none');
            // btn.innerHTML = '<i class="bi bi-caret-right-fill"></i>';
          // }
        // }
      // });
    // });

    // // [추가 요구사항] 초기에 전체 트리를 펼치기
    // expandAllTree();
});

// 트리를 전부 접는 함수
function foldAllTree(){
  // 모든 .d-none 제거하고, 아이콘을 caret-down-fill 로 변경
  document.querySelectorAll('[id^="l1-"], [id^="l2-"], [id^="l3-"]').forEach(subDiv => {
    subDiv.classList.add('d-none');
  });
  // toggle-btn 아이콘도 다 down으로
  document.querySelectorAll('.toggle-btn').forEach(btn => {
    btn.innerHTML = '<i class="bi bi-caret-right-fill"></i>';
  });
}
// 트리를 전부 펼치는 함수
function expandAllTree(){
  // 모든 .d-none 제거하고, 아이콘을 caret-down-fill 로 변경
  document.querySelectorAll('[id^="l1-"], [id^="l2-"], [id^="l3-"]').forEach(subDiv => {
    subDiv.classList.remove('d-none');
  });
  // toggle-btn 아이콘도 다 down으로
  document.querySelectorAll('.toggle-btn').forEach(btn => {
    btn.innerHTML = '<i class="bi bi-caret-down-fill"></i>';
  });
}

// 추가
function addCategory(level, parentId){
  document.getElementById('catLevel').value = level;
  document.getElementById('catId').value = 0; // insert
  document.getElementById('catParent').value = parentId;
  document.getElementById('catName').value = '';
  const myModal = new bootstrap.Modal(document.getElementById('editModal'));
  myModal.show();
}

// 수정
function editCategory(level, id, name){
  document.getElementById('catLevel').value = level;
  document.getElementById('catId').value = id;  
  document.getElementById('catName').value = name ;
  const myModal = new bootstrap.Modal(document.getElementById('editModal'));
  myModal.show();
}

// 삭제
function deleteCategory(level, id){
  Swal.fire({
    title: '삭제 확인',
    text: '정말 삭제하시겠습니까?',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: '삭제',
    cancelButtonText: '취소'
  }).then((result) => {
    if (result.isConfirmed) {
      fetch(`deleteCategory.php?level=${level}&id=${id}`)
        .then(res=>res.json())
        .then(data=>{
          if(data.result==='ok'){
            Swal.fire({
              icon: 'success',
              title: '삭제완료',
              text: '카테고리가 삭제되었습니다.'
            }).then(()=> location.reload());
          } else {
            Swal.fire({
              icon: 'error',
              title: '삭제실패',
              text: data.msg
            });
          }
        });
    }
  });
}

// 저장
function saveCategory(){
  const level    = document.getElementById('catLevel').value;
  const id       = document.getElementById('catId').value;
  const parentId = document.getElementById('catParent').value;
  const name     = document.getElementById('catName').value.trim();

  if(name === ''){
    Swal.fire({
      icon: 'warning',
      title: '입력확인',
      text: '이름을 입력하세요.'
    });
    return;
  }

  fetch('saveCategory.php',{
    method:'POST',
    headers:{ 'Content-Type':'application/json' },
    body: JSON.stringify({ level, id, parentId, name })
  })
  .then(r=>r.json())
  .then(d=>{
    if(d.result==='ok'){
      Swal.fire({
        icon: 'success',
        title: '저장완료',
        text: '카테고리 등록/수정되었습니다.'
      }).then(()=> location.reload());
    } else {
      Swal.fire({
        icon: 'error',
        title: '오류',
        text: d.msg
      });
    }
  });
}

// 복사 카테고리
function copyCategory(level, id) {
  Swal.fire({
    title: '복사 확인',
    text: '해당 1단계와 그 하위 항목 전체를 복사하시겠습니까?',
    icon: 'question',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: '복사',
    cancelButtonText: '취소'
  }).then((result) => {
    if (result.isConfirmed) {
      fetch(`copyCategory.php?level=${level}&id=${id}`)
        .then(res => res.json())
        .then(data => {
          if(data.result==='ok'){
            Swal.fire({
              icon: 'success',
              title: '복사완료',
              text: '하위 단계까지 복사되었습니다.'
            }).then(()=> location.reload());
          } else {
            Swal.fire({
              icon: 'error',
              title: '복사실패',
              text: data.msg
            });
          }
        });
    }
  });
}

</script>


<script>
// [기존] 트리 토글 (부트스트랩 아이콘 caret 교체) + 쿠키 업데이트 기능 추가
function updateTreeStateCookie(){
    let expandedNodes = [];
    // 모든 토글 버튼을 순회하면서 대상 요소가 보이면 배열에 추가
    document.querySelectorAll('.toggle-btn').forEach(btn => {
       const targetId = btn.getAttribute('data-target');
       const sub = document.getElementById(targetId);
       if(sub && !sub.classList.contains('d-none')){
           expandedNodes.push(targetId);
       }
    });
    // 쿠키에 저장 (유효시간 10분)
    setCookie("treeState", JSON.stringify(expandedNodes), 10);
}

document.querySelectorAll('.toggle-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        const targetId = btn.getAttribute('data-target');
        const sub = document.getElementById(targetId);
        if(sub) {
            if(sub.classList.contains('d-none')){
                sub.classList.remove('d-none');
                btn.innerHTML = '<i class="bi bi-caret-down-fill"></i>';
            } else {
                sub.classList.add('d-none');
                btn.innerHTML = '<i class="bi bi-caret-right-fill"></i>';
            }
            // 토글 동작 후 현재 트리 상태를 쿠키에 저장
            updateTreeStateCookie();
        }
    });
});

// 쿠키에서 트리 상태 복원 함수
function restoreTreeStateFromCookie(){
    let cookieVal = getCookie("treeState");
    if(cookieVal){
       try{
           let expandedNodes = JSON.parse(cookieVal);
           expandedNodes.forEach(targetId => {
               let sub = document.getElementById(targetId);
               if(sub && sub.classList.contains('d-none')){
                   sub.classList.remove('d-none');
                   // 해당 토글 버튼의 아이콘도 down으로 변경
                   document.querySelectorAll(`.toggle-btn[data-target="${targetId}"]`).forEach(btn => {
                        btn.innerHTML = '<i class="bi bi-caret-down-fill"></i>';
                   });
               }
           });
       } catch(e){
           console.error("Error parsing treeState cookie", e);
       }
    }
}

// 페이지 로드시 트리 상태 복원
document.addEventListener("DOMContentLoaded", function(){
   restoreTreeStateFromCookie();
});
</script>


</body>
</html>
