<?php
include_once 'header.php';
?>
<main class="max-w-[1600px] mx-auto p-6">
    
    <header class="flex justify-between items-center mb-8">
      <h2 class="text-3xl font-bold text-gray-800 tracking-tight">콘텐츠 입력</h2>
      <button onclick="document.getElementById('upload-modal').classList.remove('hidden')" class="px-5 py-2.5 bg-[#114b3d] text-white rounded-lg font-bold flex items-center shadow-lg hover:bg-[#0d3a2f] transition">
        <i class="fa-solid fa-plus mr-2"></i>새 콘텐츠 추가
      </button>
    </header>

    <section class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm mb-8">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label class="block text-sm font-bold text-gray-700 mb-2">추천 콘텐츠 (강좌)</label>
          <select class="w-full border-gray-200 rounded-xl p-3 bg-gray-50 focus:ring-2 focus:ring-teal-500">
            <option>전체</option>
            <option>온보딩</option>
            <option>리더십</option>
            <option>인사이트</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-bold text-gray-700 mb-2">콘텐츠명 검색</label>
          <div class="relative">
            <input type="text" placeholder="콘텐츠명을 검색하세요" class="w-full border-gray-200 rounded-xl p-3 pl-11 bg-gray-50 focus:ring-2 focus:ring-teal-500">
            <i class="fa-solid fa-magnifying-glass absolute left-4 top-4 text-gray-400"></i>
          </div>
        </div>
      </div>
    </section>

    <section class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden mb-12">
      <table class="w-full text-left border-collapse">
        <thead>
          <tr class="bg-gray-50/50 border-b border-gray-100">
            <th class="p-4 text-sm font-bold text-gray-500 w-24">분류</th>
            <th class="p-4 text-sm font-bold text-gray-500">콘텐츠명</th>
            <th class="p-4 text-sm font-bold text-gray-500">한맥PICK</th>
            <th class="p-4 text-sm font-bold text-gray-500">콘텐츠구분</th>
            <th class="p-4 text-sm font-bold text-gray-500">숨김</th>
            <th class="p-4 text-sm font-bold text-gray-500 w-24">정렬순번</th>
            <th class="p-4 text-sm font-bold text-gray-500 text-center w-24">관리</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-50 text-sm">
          <tr class="hover:bg-teal-50/30 transition">
            <td class="p-4"><span class="px-2 py-1 bg-blue-50 text-blue-700 border border-blue-100 rounded text-xs font-bold">인사이트</span></td>
            <td class="p-4 font-bold text-gray-800">(공통) 미리 사는 미래, 디지털 트윈</td>
            <td class="p-4 text-gray-500">마이클래스</td>
            <td class="p-4">영상</td>
            <td class="p-4 text-gray-400">숨기지않음</td>
            <td class="p-4 font-mono text-center">0</td>
            <td class="p-4 text-center">
              <button class="px-3 py-1 bg-teal-800 text-white rounded text-xs hover:bg-teal-900 transition">수정</button>
            </td>
          </tr>
          <tr class="hover:bg-teal-50/30 transition">
            <td class="p-4"><span class="px-2 py-1 bg-purple-50 text-purple-700 border border-purple-100 rounded text-xs font-bold">리더십</span></td>
            <td class="p-4 font-bold text-gray-800">효과적인 팀 리딩 전략</td>
            <td class="p-4 text-gray-500">마이클래스</td>
            <td class="p-4">영상</td>
            <td class="p-4 text-gray-400">숨기지않음</td>
            <td class="p-4 font-mono text-center">1</td>
            <td class="p-4 text-center">
              <button class="px-3 py-1 bg-teal-800 text-white rounded text-xs hover:bg-teal-900 transition">수정</button>
            </td>
          </tr>
          <tr class="hover:bg-teal-50/30 transition">
            <td class="p-4"><span class="px-2 py-1 bg-green-50 text-green-700 border border-green-100 rounded text-xs font-bold">온보딩</span></td>
            <td class="p-4 font-bold text-gray-800">회사 소개 및 조직 문화</td>
            <td class="p-4 text-gray-500">선택없음</td>
            <td class="p-4">영상</td>
            <td class="p-4 text-gray-400">숨기지않음</td>
            <td class="p-4 font-mono text-center">2</td>
            <td class="p-4 text-center">
              <button class="px-3 py-1 bg-teal-800 text-white rounded text-xs hover:bg-teal-900 transition">수정</button>
            </td>
          </tr>
        </tbody>
      </table>
    </section>

  </main>

  <div id="upload-modal" class="fixed inset-0 bg-black/60 flex items-center justify-center z-[100] hidden p-4">
    <div class="bg-white w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden">
      <div class="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50">
        <h3 class="text-xl font-bold text-gray-800">새 콘텐츠 등록</h3>
        <button onclick="document.getElementById('upload-modal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-xmark text-xl"></i></button>
      </div>
      <div class="p-8 space-y-5">
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-bold text-gray-400 mb-2 uppercase">분류 선택</label>
            <select class="w-full border-gray-200 rounded-lg p-2.5 bg-gray-50"><option>인사이트</option><option>리더십</option></select>
          </div>
          <div>
            <label class="block text-xs font-bold text-gray-400 mb-2 uppercase">정렬 순번</label>
            <input type="number" class="w-full border-gray-200 rounded-lg p-2.5 bg-gray-50" value="0">
          </div>
        </div>
        <div>
          <label class="block text-xs font-bold text-gray-400 mb-2 uppercase">콘텐츠명 (강좌명)</label>
          <input type="text" class="w-full border-gray-200 rounded-lg p-2.5 bg-gray-50" placeholder="콘텐츠 제목을 입력하세요">
        </div>
        <div>
          <label class="block text-xs font-bold text-gray-400 mb-2 uppercase">유튜브 URL (영상 주소)</label>
          <input type="text" class="w-full border-gray-200 rounded-lg p-2.5 bg-gray-50" placeholder="https://youtu.be/...">
        </div>
        <div class="flex items-center space-x-6 py-2">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" class="w-4 h-4 text-teal-600 rounded"> <span class="text-sm font-bold">한맥 PICK 등록</span>
          </label>
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" class="w-4 h-4 text-red-600 rounded"> <span class="text-sm font-bold">사용자에게 숨김</span>
          </label>
        </div>
      </div>
      <div class="p-6 bg-gray-50 border-t border-gray-100 flex justify-end space-x-3">
        <button onclick="document.getElementById('upload-modal').classList.add('hidden')" class="px-6 py-2 text-gray-500 font-bold hover:text-gray-700">취소</button>
        <button class="px-8 py-2 bg-teal-800 text-white rounded-lg font-bold shadow-lg">저장하기</button>
      </div>
    </div>
  </div>
</body>
</html>
