<?php
include_once 'header.php';
?>
<main class="max-w-[1600px] mx-auto p-8">
    <header class="mb-8">
      <h2 class="text-3xl font-bold text-gray-800 tracking-tight">설정</h2>
    </header>

    <div class="flex flex-col lg:flex-row gap-8">
      
      <!-- 사이드 탭 메뉴 -->
      <aside class="w-full lg:w-64 flex-shrink-0">
        <nav class="bg-white border border-gray-200 rounded-2xl p-2 space-y-1 shadow-sm sticky top-24">
          <button onclick="showTab('tab-corp')" id="btn-corp" class="w-full flex items-center gap-3 p-3.5 text-sm font-bold text-white bg-[#114b3d] rounded-xl transition">
            <i class="fa-solid fa-building w-5 text-center"></i>법인 관리
          </button>
          <button onclick="showTab('tab-auth')" id="btn-auth" class="w-full flex items-center gap-3 p-3.5 text-sm font-bold text-gray-500 rounded-xl transition hover:bg-gray-50">
            <i class="fa-solid fa-user-shield w-5 text-center"></i>관리자 권한 관리
          </button>
          <button onclick="showTab('tab-course')" id="btn-course" class="w-full flex items-center gap-3 p-3.5 text-sm font-bold text-gray-500 rounded-xl transition hover:bg-gray-50">
            <i class="fa-solid fa-book-open w-5 text-center"></i>교육 과정 관리
          </button>
          <button onclick="showTab('tab-msg')" id="btn-msg" class="w-full flex items-center gap-3 p-3.5 text-sm font-bold text-gray-500 rounded-xl transition hover:bg-gray-50">
            <i class="fa-solid fa-bell w-5 text-center"></i>알림 템플릿 관리
          </button>
          <button onclick="showTab('tab-period')" id="btn-period" class="w-full flex items-center gap-3 p-3.5 text-sm font-bold text-gray-500 rounded-xl transition hover:bg-gray-50">
            <i class="fa-solid fa-calendar-check w-5 text-center"></i>법정의무교육 기간 설정
          </button>
        </nav>
      </aside>

      <!-- 탭 콘텐츠 영역 -->
      <section class="flex-1 min-h-[600px]">

        <!-- 법인 관리 탭 -->
        <div id="tab-corp" class="tab-content bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
          <div class="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/30">
            <h3 class="font-bold text-gray-800">법인 관리</h3>
            <button class="px-4 py-2 bg-[#114b3d] text-white rounded-lg text-xs font-bold shadow-md hover:bg-[#0d3a2f] transition">
              <i class="fa-solid fa-plus mr-1"></i> 법인 추가
            </button>
          </div>
          <table class="w-full text-sm text-left">
            <thead class="bg-gray-50/50 text-gray-500 font-bold">
              <tr>
                <th class="p-4">법인명</th>
                <th class="p-4">학습자 수</th>
                <th class="p-4">상태</th>
                <th class="p-4 text-center">관리</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
              <tr class="hover:bg-gray-50/50 transition">
                <td class="p-4 font-bold">한맥기술</td>
                <td class="p-4 text-gray-500">450명</td>
                <td class="p-4"><span class="px-2 py-1 bg-teal-50 text-teal-600 rounded-full text-[10px] font-bold">활성</span></td>
                <td class="p-4 text-center text-xs">
                  <button class="text-blue-500 mr-2 font-bold hover:underline">수정</button>
                  <button class="text-red-400 font-bold hover:underline">삭제</button>
                </td>
              </tr>
              <tr class="hover:bg-gray-50/50 transition">
                <td class="p-4 font-bold">삼안</td>
                <td class="p-4 text-gray-500">520명</td>
                <td class="p-4"><span class="px-2 py-1 bg-teal-50 text-teal-600 rounded-full text-[10px] font-bold">활성</span></td>
                <td class="p-4 text-center text-xs">
                  <button class="text-blue-500 mr-2 font-bold hover:underline">수정</button>
                  <button class="text-red-400 font-bold hover:underline">삭제</button>
                </td>
              </tr>
              <tr class="hover:bg-gray-50/50 transition">
                <td class="p-4 font-bold">바른컨설턴트</td>
                <td class="p-4 text-gray-500">74명</td>
                <td class="p-4"><span class="px-2 py-1 bg-teal-50 text-teal-600 rounded-full text-[10px] font-bold">활성</span></td>
                <td class="p-4 text-center text-xs">
                  <button class="text-blue-500 mr-2 font-bold hover:underline">수정</button>
                  <button class="text-red-400 font-bold hover:underline">삭제</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 관리자 권한 관리 탭 -->
        <div id="tab-auth" class="tab-content hidden bg-white border border-gray-200 rounded-2xl shadow-sm p-8">
          <h3 class="font-bold text-xl text-gray-800 mb-6">관리자 권한 관리</h3>
          <div class="space-y-8">
            <div class="border-b border-gray-100 pb-6">
              <div class="flex justify-between items-center mb-4">
                <h4 class="font-bold text-gray-700">최고 관리자</h4>
                <span class="text-xs text-gray-400 font-medium px-3 py-1 bg-gray-100 rounded-full">현재 사용자: B24064</span>
              </div>
              <p class="text-sm text-gray-500 leading-relaxed">모든 기능에 대한 전체 접근 권한을 가집니다. 법인 추가, 교육 기간 설정 등 시스템 전반을 관리합니다.</p>
            </div>
            <div>
              <h4 class="font-bold text-gray-700 mb-4">접근 가능 메뉴 설정</h4>
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <label class="flex items-center space-x-3 p-3 bg-gray-50 rounded-xl cursor-pointer hover:bg-gray-100 transition">
                  <input type="checkbox" checked class="w-4 h-4 text-[#114b3d] rounded focus:ring-0">
                  <span class="text-sm font-medium">전체학습현황</span>
                </label>
                <label class="flex items-center space-x-3 p-3 bg-gray-50 rounded-xl cursor-pointer hover:bg-gray-100 transition">
                  <input type="checkbox" checked class="w-4 h-4 text-[#114b3d] rounded focus:ring-0">
                  <span class="text-sm font-medium">학습자관리</span>
                </label>
                <label class="flex items-center space-x-3 p-3 bg-gray-50 rounded-xl cursor-pointer hover:bg-gray-100 transition">
                  <input type="checkbox" checked class="w-4 h-4 text-[#114b3d] rounded focus:ring-0">
                  <span class="text-sm font-medium">법정의무교육</span>
                </label>
                <label class="flex items-center space-x-3 p-3 bg-gray-50 rounded-xl cursor-pointer hover:bg-gray-100 transition">
                  <input type="checkbox" checked class="w-4 h-4 text-[#114b3d] rounded focus:ring-0">
                  <span class="text-sm font-medium">콘텐츠 입력</span>
                </label>
                <label class="flex items-center space-x-3 p-3 bg-gray-50 rounded-xl cursor-pointer hover:bg-gray-100 transition">
                  <input type="checkbox" checked class="w-4 h-4 text-[#114b3d] rounded focus:ring-0">
                  <span class="text-sm font-medium">설정</span>
                </label>
              </div>
            </div>
            <div class="flex justify-end pt-4">
              <button class="px-6 py-2.5 bg-[#114b3d] text-white rounded-lg font-bold text-sm shadow-md hover:bg-[#0d3a2f] transition">권한 저장</button>
            </div>
          </div>
        </div>

        <!-- 교육 과정 관리 탭 -->
        <div id="tab-course" class="tab-content hidden bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
          <div class="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/30">
            <h3 class="font-bold text-gray-800">교육 과정 관리</h3>
            <button class="px-4 py-2 bg-[#114b3d] text-white rounded-lg text-xs font-bold shadow-md hover:bg-[#0d3a2f] transition">
              <i class="fa-solid fa-plus mr-1"></i> 과정 추가
            </button>
          </div>
          <table class="w-full text-sm text-left">
            <thead class="bg-gray-50/50 text-gray-500 font-bold">
              <tr>
                <th class="p-4">과정명</th>
                <th class="p-4">구분</th>
                <th class="p-4 text-center">교육 시간</th>
                <th class="p-4 text-center">관리</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
              <tr class="hover:bg-gray-50/50 transition">
                <td class="p-4 font-bold">직장 내 성희롱 예방 교육</td>
                <td class="p-4"><span class="px-2 py-0.5 bg-red-50 text-red-500 rounded text-[10px] font-bold">법정의무</span></td>
                <td class="p-4 text-center text-gray-500">1시간</td>
                <td class="p-4 text-center text-xs">
                  <button class="text-blue-500 mr-2 font-bold hover:underline">수정</button>
                  <button class="text-red-400 font-bold hover:underline">삭제</button>
                </td>
              </tr>
              <tr class="hover:bg-gray-50/50 transition">
                <td class="p-4 font-bold">개인정보 보호 교육</td>
                <td class="p-4"><span class="px-2 py-0.5 bg-red-50 text-red-500 rounded text-[10px] font-bold">법정의무</span></td>
                <td class="p-4 text-center text-gray-500">1시간 10분</td>
                <td class="p-4 text-center text-xs">
                  <button class="text-blue-500 mr-2 font-bold hover:underline">수정</button>
                  <button class="text-red-400 font-bold hover:underline">삭제</button>
                </td>
              </tr>
              <tr class="hover:bg-gray-50/50 transition">
                <td class="p-4 font-bold">산업안전보건 교육</td>
                <td class="p-4"><span class="px-2 py-0.5 bg-red-50 text-red-500 rounded text-[10px] font-bold">법정의무</span></td>
                <td class="p-4 text-center text-gray-500">1시간</td>
                <td class="p-4 text-center text-xs">
                  <button class="text-blue-500 mr-2 font-bold hover:underline">수정</button>
                  <button class="text-red-400 font-bold hover:underline">삭제</button>
                </td>
              </tr>
              <tr class="hover:bg-gray-50/50 transition">
                <td class="p-4 font-bold">인생이 바뀌는 환경을 셋업하는 뇌과학적 방법</td>
                <td class="p-4"><span class="px-2 py-0.5 bg-blue-50 text-blue-500 rounded text-[10px] font-bold">마이클래스</span></td>
                <td class="p-4 text-center text-gray-500">45분</td>
                <td class="p-4 text-center text-xs">
                  <button class="text-blue-500 mr-2 font-bold hover:underline">수정</button>
                  <button class="text-red-400 font-bold hover:underline">삭제</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 알림 템플릿 관리 탭 -->
        <div id="tab-msg" class="tab-content hidden space-y-6">
          <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
            <h3 class="font-bold text-gray-800 mb-2">미수료자 알림</h3>
            <p class="text-xs text-gray-400 mb-4">사용 가능한 변수: <code class="bg-gray-100 px-1 py-0.5 rounded">{학습자명}</code>, <code class="bg-gray-100 px-1 py-0.5 rounded">{과정명}</code>, <code class="bg-gray-100 px-1 py-0.5 rounded">{종료일}</code></p>
            <textarea class="w-full border border-gray-200 rounded-xl p-4 bg-gray-50 text-sm focus:ring-2 focus:ring-teal-500 outline-none resize-none" rows="4">안녕하세요, {학습자명}님. 아직 완료하지 못한 학습 과정이 있습니다. 기한 내 수료를 부탁드립니다.</textarea>
            <div class="flex justify-end mt-4">
              <button class="px-6 py-2 bg-[#114b3d] text-white rounded-lg font-bold text-xs flex items-center shadow-md hover:bg-[#0d3a2f] transition">
                <i class="fa-solid fa-save mr-2"></i>저장
              </button>
            </div>
          </div>
          <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
            <h3 class="font-bold text-gray-800 mb-2">법정의무교육 안내</h3>
            <p class="text-xs text-gray-400 mb-4">사용 가능한 변수: <code class="bg-gray-100 px-1 py-0.5 rounded">{학습자명}</code>, <code class="bg-gray-100 px-1 py-0.5 rounded">{시작일}</code>, <code class="bg-gray-100 px-1 py-0.5 rounded">{종료일}</code></p>
            <textarea class="w-full border border-gray-200 rounded-xl p-4 bg-gray-50 text-sm focus:ring-2 focus:ring-teal-500 outline-none resize-none" rows="4">안녕하세요, {학습자명}님. 법정의무교육 기간이 시작되었습니다. 기간: {시작일} ~ {종료일}</textarea>
            <div class="flex justify-end mt-4">
              <button class="px-6 py-2 bg-[#114b3d] text-white rounded-lg font-bold text-xs flex items-center shadow-md hover:bg-[#0d3a2f] transition">
                <i class="fa-solid fa-save mr-2"></i>저장
              </button>
            </div>
          </div>
        </div>

        <!-- 법정의무교육 기간 설정 탭 -->
        <div id="tab-period" class="tab-content hidden bg-white border border-gray-200 rounded-2xl p-8 shadow-sm">
          <h3 class="font-bold text-xl text-gray-800 mb-8">법정의무교육 기간 설정</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
            <div>
              <label class="block text-xs font-bold text-gray-400 mb-3 uppercase tracking-wider">교육 시작일</label>
              <input type="date" value="2026-11-01" class="w-full border border-gray-200 rounded-xl p-3.5 bg-gray-50 focus:ring-2 focus:ring-teal-500 font-medium outline-none">
            </div>
            <div>
              <label class="block text-xs font-bold text-gray-400 mb-3 uppercase tracking-wider">교육 종료일</label>
              <input type="date" value="2026-12-15" class="w-full border border-gray-200 rounded-xl p-3.5 bg-gray-50 focus:ring-2 focus:ring-teal-500 font-medium outline-none">
            </div>
          </div>
          <div class="bg-blue-50 border border-blue-100 p-5 rounded-xl mb-8 flex items-start">
            <i class="fa-solid fa-circle-info text-blue-500 mt-1 mr-4 text-lg"></i>
            <div>
              <p class="text-sm text-blue-800 font-bold leading-tight">현재 설정된 기간: 2026.11.01 ~ 2026.12.15</p>
              <p class="text-xs text-blue-600 mt-1.5 opacity-80 leading-relaxed">기간을 변경하면 시스템에 등록된 모든 법인 학습자에게 동일하게 기간이 적용됩니다.</p>
            </div>
          </div>
          <div class="flex justify-center">
            <button class="px-12 py-3.5 bg-[#114b3d] text-white rounded-xl font-bold shadow-xl hover:bg-[#0d3a2f] transition flex items-center">
              <i class="fa-solid fa-calendar-check mr-2"></i>기간 저장
            </button>
          </div>
        </div>

      </section>
    </div>
</main>

<script>
  function showTab(tabId) {
    // 모든 탭 콘텐츠 숨기기
    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
    // 선택된 탭 보이기
    document.getElementById(tabId).classList.remove('hidden');

    // 사이드 버튼 활성화 상태 변경
    document.querySelectorAll('aside nav button').forEach(btn => {
      btn.classList.remove('text-white', 'bg-[#114b3d]');
      btn.classList.add('text-gray-500');
    });
    const btnId = 'btn-' + tabId.split('-')[1];
    const activeBtn = document.getElementById(btnId);
    if (activeBtn) {
      activeBtn.classList.add('text-white', 'bg-[#114b3d]');
      activeBtn.classList.remove('text-gray-500');
    }
  }
</script>
</body>
</html>
