<?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-end md:items-center mb-6 gap-4">
      <div>
        <h2 class="text-2xl font-bold text-gray-800 flex items-center">
          전체학습현황
          <span class="ml-4 text-xs font-normal px-2 py-1 bg-gray-200 rounded text-gray-600">전체 학습자 수: 74명</span>
        </h2>
        <p class="text-sm text-gray-400 mt-1 italic leading-relaxed">법정의무교육 기간: 2026.11.01 ~ 2026.12.15</p>
      </div>
      <div class="flex items-center space-x-2">
        <div class="flex bg-gray-200 p-1 rounded-md">
           <button class="px-3 py-1 text-sm rounded text-gray-500 hover:text-gray-800 transition">2025년</button>
           <button class="px-3 py-1 text-sm rounded bg-[#114b3d] text-white shadow-sm font-bold">2026년</button>
        </div>
        <button class="px-4 py-2 bg-[#2563eb] text-white rounded-md text-sm font-bold flex items-center hover:bg-blue-700 transition shadow-lg">
          <i class="fa-solid fa-file-invoice mr-2"></i>교육결과보고서
        </button>
      </div>
    </header>

    <!-- 통계 카드 3개 -->
    <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">
        <h3 class="font-bold text-gray-800 mb-4 flex items-center justify-between text-sm">
          법인별 학습인원 현황
          <i class="fa-solid fa-ellipsis-vertical text-gray-300"></i>
        </h3>
        <!-- SVG Bar Chart -->
        <div class="relative w-full" style="height:240px;">
          <svg viewBox="0 0 320 210" class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
            <!-- y=0→svg y=175, y=1800→svg y=10. 범위 165px -->
            <!-- y_svg = 175 - (val/1800)*165 -->

            <!-- 격자선 -->
            <line x1="42" y1="175" x2="315" y2="175" stroke="#e5e7eb" stroke-width="1"/>
            <line x1="42" y1="134" x2="315" y2="134" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
            <line x1="42" y1="93"  x2="315" y2="93"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
            <line x1="42" y1="52"  x2="315" y2="52"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
            <line x1="42" y1="10"  x2="315" y2="10"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>

            <!-- Y축 레이블 -->
            <text x="38" y="178" text-anchor="end" font-size="11" fill="#9ca3af">0</text>
            <text x="38" y="137" text-anchor="end" font-size="11" fill="#9ca3af">450</text>
            <text x="38" y="96"  text-anchor="end" font-size="11" fill="#9ca3af">900</text>
            <text x="38" y="55"  text-anchor="end" font-size="11" fill="#9ca3af">1350</text>
            <text x="38" y="13"  text-anchor="end" font-size="11" fill="#9ca3af">1800</text>

            <!-- Y축 라인 -->
            <line x1="42" y1="8" x2="42" y2="175" stroke="#d1d5db" stroke-width="1"/>

            <!-- 막대 너비 36, 간격 8, 6개 막대, x시작 50 -->
            <!-- 한맥:450 → h=(450/1800)*165=41.25 → y=175-41=134 -->
            <!-- 삼안:520 → h=47.7 → y=127 -->
            <!-- 한라:1800→ h=165   → y=10 -->
            <!-- PTC:120 → h=11    → y=164 -->
            <!-- 바른:74  → h=6.8  → y=168 -->
            <!-- 장현:90  → h=8.25 → y=167 -->

            <!-- 한맥기술 -->
            <rect x="50"  y="134" width="36" height="41" fill="#114b3d" rx="3"/>
            <text x="68"  y="194" text-anchor="middle" font-size="10" fill="#6b7280">한맥</text>
            <!-- 삼안 -->
            <rect x="94"  y="127" width="36" height="48" fill="#114b3d" rx="3"/>
            <text x="112" y="194" text-anchor="middle" font-size="10" fill="#6b7280">삼안</text>
            <!-- 한라산업 -->
            <rect x="138" y="10"  width="36" height="165" fill="#114b3d" rx="3"/>
            <text x="156" y="194" text-anchor="middle" font-size="10" fill="#6b7280">한라산업</text>
            <!-- PTC -->
            <rect x="182" y="164" width="36" height="11" fill="#1d6b56" rx="3"/>
            <text x="200" y="194" text-anchor="middle" font-size="10" fill="#6b7280">PTC</text>
            <!-- 바른컨설턴트 -->
            <rect x="226" y="168" width="36" height="7"  fill="#1d6b56" rx="3"/>
            <text x="244" y="194" text-anchor="middle" font-size="10" fill="#6b7280">바른</text>
            <!-- 장현산업 -->
            <rect x="270" y="167" width="36" height="8"  fill="#1d6b56" rx="3"/>
            <text x="288" y="194" text-anchor="middle" font-size="10" fill="#6b7280">장현</text>
          </svg>
        </div>
      </div>

      <!-- 법인별 통계 -->
      <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
        <div class="flex justify-between items-center mb-5">
            <h3 class="font-bold text-gray-800 italic underline decoration-blue-200 decoration-4 text-sm">법인별 통계</h3>
            <select class="text-xs bg-gray-50 border border-gray-100 rounded p-1">
                <option>평균학습</option>
                <option>총 학습시간</option>
            </select>
        </div>
        <div class="space-y-3">
          <div class="flex justify-between items-center pb-2 border-b border-gray-50">
            <span class="text-sm font-medium text-gray-600">한맥기술</span><span class="text-sm font-bold text-blue-600">15.2회</span>
          </div>
          <div class="flex justify-between items-center pb-2 border-b border-gray-50">
            <span class="text-sm font-medium text-gray-600">삼안</span><span class="text-sm font-bold text-blue-600">12.8회</span>
          </div>
          <div class="flex justify-between items-center pb-2 border-b border-gray-50">
            <span class="text-sm font-medium text-gray-600">장현산업</span><span class="text-sm font-bold text-blue-600">18.5회</span>
          </div>
          <div class="flex justify-between items-center pb-2 border-b border-gray-50">
            <span class="text-sm font-medium text-gray-600">PTC</span><span class="text-sm font-bold text-blue-600">14.1회</span>
          </div>
          <div class="flex justify-between items-center pb-2 border-b border-gray-50">
            <span class="text-sm font-medium text-gray-600">한라산업</span><span class="text-sm font-bold text-blue-600">16.3회</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-gray-600">바른컨설턴트</span><span class="text-sm font-bold text-blue-600">19.7회</span>
          </div>
        </div>
      </div>

      <!-- 법인별 접속 추이 (라인 차트) -->
      <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
        <div class="flex justify-between items-center mb-4">
          <h3 class="font-bold text-gray-800 text-sm">법인별 접속 추이</h3>
          <div class="flex gap-1">
            <select class="text-xs bg-gray-50 border border-gray-100 rounded p-1">
              <option>전체</option>
              <option>한맥기술</option>
              <option>삼안</option>
            </select>
            <select class="text-xs bg-gray-50 border border-gray-100 rounded p-1">
              <option>일별</option>
              <option>주별</option>
            </select>
          </div>
        </div>
        <!-- SVG Line Chart -->
        <div class="relative w-full" style="height:240px;">
          <svg viewBox="0 0 320 210" class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
            <!-- y=0→svg y=175, y=800→svg y=10. 범위 165px -->
            <!-- y_svg = 175 - (val/800)*165 -->
            <!-- x: x=42 ~ x=310 (6점), 간격 53.6 -->
            <!-- 220→129.6, 310→111.1, 450→82.7, 480→76.9, 570→55.1, 590→51.4 -->

            <!-- 격자선 -->
            <line x1="42" y1="175" x2="315" y2="175" stroke="#e5e7eb" stroke-width="1"/>
            <line x1="42" y1="134" x2="315" y2="134" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
            <line x1="42" y1="93"  x2="315" y2="93"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
            <line x1="42" y1="52"  x2="315" y2="52"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
            <line x1="42" y1="10"  x2="315" y2="10"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>

            <!-- Y축 레이블 -->
            <text x="38" y="178" text-anchor="end" font-size="11" fill="#9ca3af">0</text>
            <text x="38" y="137" text-anchor="end" font-size="11" fill="#9ca3af">200</text>
            <text x="38" y="96"  text-anchor="end" font-size="11" fill="#9ca3af">400</text>
            <text x="38" y="55"  text-anchor="end" font-size="11" fill="#9ca3af">600</text>
            <text x="38" y="13"  text-anchor="end" font-size="11" fill="#9ca3af">800</text>

            <!-- Y축 라인 -->
            <line x1="42" y1="8" x2="42" y2="175" stroke="#d1d5db" stroke-width="1"/>

            <!-- 라인 경로 -->
            <polyline
              points="42,130 96,111 150,83 204,77 258,55 310,51"
              fill="none"
              stroke="#0d9488"
              stroke-width="2.5"
              stroke-linejoin="round"
            />

            <!-- 데이터 포인트 (원) -->
            <circle cx="42"  cy="130" r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
            <circle cx="96"  cy="111" r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
            <circle cx="150" cy="83"  r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
            <circle cx="204" cy="77"  r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
            <circle cx="258" cy="55"  r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
            <circle cx="310" cy="51"  r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>

            <!-- X축 레이블 -->
            <text x="42"  y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/20</text>
            <text x="96"  y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/21</text>
            <text x="150" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/22</text>
            <text x="204" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/23</text>
            <text x="258" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/24</text>
            <text x="310" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/26</text>
          </svg>
        </div>
      </div>
    </section>

    <!-- 하단: 가장 많이 본 영상 + 배움터 학습 랭킹 -->
    <section class="grid grid-cols-1 lg:grid-cols-2 gap-6 pb-12">

      <!-- 가장 많이 본 영상 -->
      <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="p-5 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
          <h3 class="font-bold text-gray-800 flex items-center italic text-sm">
            <i class="fa-solid fa-play-circle text-blue-500 mr-2"></i>가장 많이 본 영상
          </h3>
          <select class="text-xs bg-white border border-gray-200 rounded p-1"><option>인사이트</option><option>리더십</option><option>온보딩</option></select>
        </div>
        <div class="p-5 space-y-5">
          <div class="flex items-start space-x-4">
            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center text-slate-400 text-xs"><i class="fa-solid fa-play text-lg"></i></div>
            <div>
              <h4 class="font-bold text-sm leading-tight">실리콘밸리 PM이 말해주는 AI 시대 PM 생존법</h4>
              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,245회</span> | 완료율: <span class="text-blue-500 font-bold">92%</span></p>
            </div>
          </div>
          <div class="flex items-start space-x-4">
            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center text-slate-400 text-xs"><i class="fa-solid fa-play text-lg"></i></div>
            <div>
              <h4 class="font-bold text-sm leading-tight">AI와 함께 진화하는 법 : AI 일잘러의 비밀</h4>
              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,132회</span> | 완료율: <span class="text-blue-500 font-bold">88%</span></p>
            </div>
          </div>
          <div class="flex items-start space-x-4">
            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center text-slate-400 text-xs"><i class="fa-solid fa-play text-lg"></i></div>
            <div>
              <h4 class="font-bold text-sm leading-tight">인생이 바뀌는 환경을 셋업하는 뇌과학적 방법</h4>
              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,089회</span> | 완료율: <span class="text-blue-500 font-bold">85%</span></p>
            </div>
          </div>
          <div class="flex items-start space-x-4">
            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center text-slate-400 text-xs"><i class="fa-solid fa-play text-lg"></i></div>
            <div>
              <h4 class="font-bold text-sm leading-tight">인생의 기회를 100% 내 것으로 만드는 '운의 공식'</h4>
              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">987회</span> | 완료율: <span class="text-blue-500 font-bold">83%</span></p>
            </div>
          </div>
        </div>
        <button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-100 italic transition">
          <i class="fa-solid fa-comment-dots mr-2"></i>한줄 소감문 보기
        </button>
      </div>

      <!-- 배움터 학습 랭킹 -->
      <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="p-5 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
          <h3 class="font-bold text-gray-800 flex items-center italic text-sm">
            <i class="fa-solid fa-award text-teal-600 mr-2"></i>배움터 학습 랭킹
          </h3>
          <select class="text-xs bg-white border border-gray-200 rounded p-1"><option>전체</option><option>한맥기술</option><option>삼안</option></select>
        </div>
        <div class="p-4">
          <table class="w-full text-sm">
            <tbody>
              <tr class="hover:bg-gray-50 transition">
                <td class="p-3 font-bold text-blue-600 text-lg w-10">1</td>
                <td class="p-3">
                  <p class="font-bold">홍길동</p>
                  <p class="text-[10px] text-gray-400">한맥기술 선임연구원</p>
                </td>
                <td class="p-3 text-right">
                  <span class="font-bold mr-2">52시간</span>
                  <span class="px-2 py-0.5 bg-purple-100 text-purple-600 text-[10px] rounded font-bold">Master</span>
                </td>
              </tr>
              <tr class="hover:bg-gray-50 transition border-t border-gray-50">
                <td class="p-3 font-bold text-gray-400 text-lg">2</td>
                <td class="p-3">
                  <p class="font-bold">김철수</p>
                  <p class="text-[10px] text-gray-400">삼안 책임연구원</p>
                </td>
                <td class="p-3 text-right">
                  <span class="font-bold mr-2">48시간</span>
                  <span class="px-2 py-0.5 bg-purple-100 text-purple-600 text-[10px] rounded font-bold">Master</span>
                </td>
              </tr>
              <tr class="hover:bg-gray-50 transition border-t border-gray-50">
                <td class="p-3 font-bold text-gray-400 text-lg">3</td>
                <td class="p-3">
                  <p class="font-bold">이영희</p>
                  <p class="text-[10px] text-gray-400">삼안 수석연구원</p>
                </td>
                <td class="p-3 text-right">
                  <span class="font-bold mr-2">45시간</span>
                  <span class="px-2 py-0.5 bg-purple-100 text-purple-600 text-[10px] rounded font-bold">Master</span>
                </td>
              </tr>
              <tr class="hover:bg-gray-50 transition border-t border-gray-50">
                <td class="p-3 font-bold text-gray-400 text-lg">4</td>
                <td class="p-3">
                  <p class="font-bold">박민수</p>
                  <p class="text-[10px] text-gray-400">한맥기술 주임연구원</p>
                </td>
                <td class="p-3 text-right">
                  <span class="font-bold mr-2">38시간</span>
                  <span class="px-2 py-0.5 bg-blue-50 text-blue-500 text-[10px] rounded font-bold">Elite</span>
                </td>
              </tr>
              <tr class="hover:bg-gray-50 transition border-t border-gray-50">
                <td class="p-3 font-bold text-gray-400 text-lg">5</td>
                <td class="p-3">
                  <p class="font-bold">정수진</p>
                  <p class="text-[10px] text-gray-400">바른컨설턴트 선임연구원</p>
                </td>
                <td class="p-3 text-right">
                  <span class="font-bold mr-2">35시간</span>
                  <span class="px-2 py-0.5 bg-blue-50 text-blue-500 text-[10px] rounded font-bold">Elite</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-100 italic transition">
          <i class="fa-solid fa-thumbs-up mr-2"></i>추천 영상 보기
        </button>
      </div>
    </section>
</main>
</body>
</html>
