<?php
include_once 'header.php';
?>
<main class="max-w-[1600px] mx-auto p-6">
    
    <header class="mb-6">
      <h2 class="text-2xl font-bold text-gray-800 italic">학습자관리</h2>
    </header>

    <section class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm mb-6">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
          <label class="block text-xs font-bold text-gray-500 mb-2">법인 선택</label>
          <select class="w-full border-gray-200 rounded-lg text-sm p-2 bg-gray-50 focus:ring-2 focus:ring-blue-500">
            <option>전체</option>
            <option>한맥기술</option>
            <option>삼안</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-bold text-gray-500 mb-2">부서 선택</label>
          <select class="w-full border-gray-200 rounded-lg text-sm p-2 bg-gray-50">
            <option>전체</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-bold text-gray-500 mb-2">분기별 조회</label>
          <select class="w-full border-gray-200 rounded-lg text-sm p-2 bg-gray-50">
            <option>전체</option>
            <option>1분기</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-bold text-gray-500 mb-2">사번 및 성명 검색</label>
          <div class="relative">
            <input type="text" placeholder="예: b24064 또는 홍길동" class="w-full border-gray-200 rounded-lg text-sm p-2 pl-8 bg-gray-50">
            <i class="fa-solid fa-magnifying-glass absolute left-3 top-2.5 text-gray-400 text-xs"></i>
          </div>
        </div>
      </div>
    </section>

    <section class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden mb-12">
      <div class="overflow-x-auto">
        <table class="w-full text-sm text-left">
          <thead class="bg-gray-50 border-b border-gray-200 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">부서</th>
              <th class="p-4 w-40">마이클래스</th>
              <th class="p-4 w-40">법정의무교육</th>
              <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-100">
            <tr class="hover:bg-blue-50/30 transition">
              <td class="p-4 text-gray-500 font-medium">b24064</td>
              <td class="p-4 font-bold text-gray-800">홍길동</td>
              <td class="p-4">한맥기술</td>
              <td class="p-4">전략기획팀</td>
              <td class="p-4">
                <div class="flex items-center space-x-2">
                  <div class="progress-bar flex-1 h-2 bg-gray-100 rounded-full overflow-hidden"><div class="progress-fill bg-blue-500 h-full" style="width: 100%;"></div></div>
                  <span class="text-[10px] font-bold text-blue-600">100%</span>
                </div>
              </td>
              <td class="p-4">
                <div class="flex items-center space-x-2">
                  <div class="progress-bar flex-1 h-2 bg-gray-100 rounded-full overflow-hidden"><div class="progress-fill bg-teal-500 h-full" style="width: 100%;"></div></div>
                  <span class="text-[10px] font-bold text-teal-600">100%</span>
                </div>
              </td>
              <td class="p-4 font-bold">52시간</td>
              <td class="p-4 text-gray-400">2026.02.24</td>
              <td class="p-4 text-center">
                <span class="px-2 py-1 bg-purple-100 text-purple-600 rounded-md text-[10px] font-bold uppercase"><i class="fa-solid fa-crown mr-1"></i>Master</span>
              </td>
              <td class="p-4 text-center">
                <button class="text-gray-400 hover:text-blue-600 transition"><i class="fa-solid fa-circle-info text-lg"></i></button>
              </td>
            </tr>
            <tr class="hover:bg-blue-50/30 transition">
              <td class="p-4 text-gray-500 font-medium">h31245</td>
              <td class="p-4 font-bold text-gray-800">이영희</td>
              <td class="p-4">삼안</td>
              <td class="p-4">설계2팀</td>
              <td class="p-4">
                <div class="flex items-center space-x-2">
                  <div class="progress-bar flex-1 h-2 bg-gray-100 rounded-full overflow-hidden"><div class="progress-fill bg-blue-400 h-full" style="width: 60%;"></div></div>
                  <span class="text-[10px] font-bold text-blue-500">60%</span>
                </div>
              </td>
              <td class="p-4">
                <div class="flex items-center space-x-2">
                  <div class="progress-bar flex-1 h-2 bg-gray-100 rounded-full overflow-hidden"><div class="progress-fill bg-teal-400 h-full" style="width: 80%;"></div></div>
                  <span class="text-[10px] font-bold text-teal-500">80%</span>
                </div>
              </td>
              <td class="p-4 font-bold">18시간</td>
              <td class="p-4 text-gray-400">2026.02.20</td>
              <td class="p-4 text-center">
                <span class="px-2 py-1 bg-blue-50 text-blue-500 rounded-md text-[10px] font-bold uppercase"><i class="fa-solid fa-star mr-1"></i>Elite</span>
              </td>
              <td class="p-4 text-center">
                <button class="text-gray-400 hover:text-blue-600 transition"><i class="fa-solid fa-circle-info text-lg"></i></button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="p-4 bg-gray-50/50 border-t border-gray-100 flex justify-center space-x-1">
        <button class="w-8 h-8 rounded border border-gray-200 bg-white text-gray-400"><i class="fa-solid fa-angle-left"></i></button>
        <button class="w-8 h-8 rounded bg-blue-600 text-white font-bold">1</button>
        <button class="w-8 h-8 rounded border border-gray-200 bg-white text-gray-600">2</button>
        <button class="w-8 h-8 rounded border border-gray-200 bg-white text-gray-600">3</button>
        <button class="w-8 h-8 rounded border border-gray-200 bg-white text-gray-400"><i class="fa-solid fa-angle-right"></i></button>
      </div>
    </section>

    <section class="mt-6 flex flex-wrap gap-4 justify-center py-4 bg-white rounded-xl border border-dashed border-gray-300">
      <div class="flex items-center text-xs font-medium text-gray-500">
        <span class="w-3 h-3 rounded-full bg-gray-200 mr-2"></span> Rookie: 0-8시간
      </div>
      <div class="flex items-center text-xs font-medium text-gray-500">
        <span class="w-3 h-3 rounded-full bg-green-200 mr-2"></span> Learner: 8-20시간
      </div>
      <div class="flex items-center text-xs font-medium text-gray-500">
        <span class="w-3 h-3 rounded-full bg-blue-200 mr-2"></span> Elite: 20-40시간
      </div>
      <div class="flex items-center text-xs font-medium text-gray-500">
        <span class="w-3 h-3 rounded-full bg-purple-200 mr-2"></span> Master: 40시간 이상
      </div>
    </section>
</main>
</body>
</html>
