<?php
include_once 'header.php';
?>
<main class="max-w-[1600px] mx-auto p-6">
    
    <header class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
      <h2 class="text-2xl font-bold text-gray-800 italic">법정의무교육</h2>
      <div class="flex flex-wrap gap-2">
        <button class="px-4 py-2 bg-white border border-gray-200 rounded-md text-sm font-medium hover:bg-gray-50 flex items-center shadow-sm">
          <i class="fa-solid fa-print mr-2"></i>이수증 출력
        </button>
        <button class="px-4 py-2 bg-white border border-gray-200 rounded-md text-sm font-medium hover:bg-gray-50 flex items-center shadow-sm">
          <i class="fa-solid fa-file-excel mr-2"></i>교육결과보고서
        </button>
        <button class="px-4 py-2 bg-red-50 text-red-600 border border-red-100 rounded-md text-sm font-bold flex items-center hover:bg-red-100 shadow-sm transition">
          <i class="fa-solid fa-bell mr-2"></i>미수료자 알림 (5명)
        </button>
        <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-md text-sm font-medium hover:bg-gray-200 flex items-center transition">
          <i class="fa-solid fa-download mr-2"></i>다운로드
        </button>
      </div>
    </header>

    <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
      <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
        <p class="text-xs font-bold text-gray-400 mb-1">전체 대상자</p>
        <p class="text-3xl font-bold text-gray-800">15명</p>
      </div>
      <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
        <p class="text-xs font-bold text-gray-400 mb-1">수료 완료</p>
        <p class="text-3xl font-bold text-teal-600">10명</p>
      </div>
      <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
        <p class="text-xs font-bold text-gray-400 mb-1">미수료</p>
        <p class="text-3xl font-bold text-red-500">5명</p>
      </div>
    </section>

    <section class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm mb-6 flex flex-col md:flex-row gap-6">
      <div class="flex-1">
        <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.5 bg-gray-50">
          <option>전체</option>
          <option>한맥기술</option>
          <option>삼안</option>
        </select>
      </div>
      <div class="flex-[2]">
        <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.5 bg-gray-50">
          <option>전체</option>
          <option>직장 내 성희롱 예방 교육</option>
          <option>개인정보 보호 교육</option>
        </select>
      </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 italic">
            <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">학습시간</th>
              <th class="p-4 w-48">진도율</th>
              <th class="p-4 text-center">수료 구분</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100">
            <tr class="hover:bg-gray-50 transition">
              <td class="p-4 font-bold text-gray-800">김철수</td>
              <td class="p-4 text-gray-400">바른컨설턴트</td>
              <td class="p-4">직장 내 성희롱 예방 교육</td>
              <td class="p-4 text-[11px] leading-tight">2026.01.17<br>15:32</td>
              <td class="p-4">1시간 25분</td>
              <td class="p-4">
                <div class="flex items-center space-x-2">
                  <div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
                    <div class="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 text-center">
                <span class="px-3 py-1 bg-green-50 text-green-600 border border-green-100 rounded-full text-[11px] font-bold"><i class="fa-solid fa-check-circle mr-1"></i>수료</span>
              </td>
            </tr>
            <tr class="hover:bg-gray-50 transition">
              <td class="p-4 font-bold text-gray-800">백승훈</td>
              <td class="p-4 text-gray-400">PTC</td>
              <td class="p-4">산업안전보건 교육</td>
              <td class="p-4 text-gray-300">-</td>
              <td class="p-4">45분</td>
              <td class="p-4">
                <div class="flex items-center space-x-2">
                  <div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
                    <div class="bg-gray-400 h-full" style="width: 70%;"></div>
                  </div>
                  <span class="text-[10px] font-bold text-gray-500">70%</span>
                </div>
              </td>
              <td class="p-4 text-center">
                <span class="px-3 py-1 bg-red-50 text-red-600 border border-red-100 rounded-full text-[11px] font-bold"><i class="fa-solid fa-circle-xmark mr-1"></i>미수료</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
</main>
</body>
</html>
