<?php
/**
 * 로그인 후 메인 대시보드 — 모던 콘텐츠 레이아웃
 * 상단 메뉴바는 /dashboard(lg_dashboard.php)와 동일
 *
 * @var string $lgLabel
 */
$lgLabel = $lgLabel ?? '북구';
$mbName  = session()->get('mb_name') ?? '담당자';
$dashClassic = base_url('dashboard/classic-mock');
$dashModern  = base_url('dashboard/modern');
$dashDense   = base_url('dashboard/dense');
$dashCharts  = base_url('dashboard/charts');
?>
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>종량제 시스템 — 업무 현황 (모던)</title>
  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap" rel="stylesheet"/>
  <style>
    body {
      font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
      font-size: 13px;
      color: #333;
    }
    .nav-top a.nav-active {
      color: #2b4c8c;
      font-weight: 600;
      border-bottom: 2px solid #2b4c8c;
      padding-bottom: 2px;
      margin-bottom: -2px;
    }
    .stat-card { transition: transform .15s, box-shadow .15s; }
    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15,23,42,.08); }
  </style>
</head>
<body class="bg-gray-50 flex flex-col min-h-screen">
  <!-- 상단 메뉴: lg_dashboard.php 와 동일 구조·스타일 (현재 URL만 /dashboard/modern 반영) -->
  <header class="border-b border-gray-300 bg-white shadow-sm shrink-0" data-purpose="top-navigation">
    <div class="flex items-center justify-between px-4 py-2 gap-4 flex-wrap">
      <div class="flex items-center gap-3 shrink-0">
        <div class="flex items-center gap-2 text-green-700 font-bold text-lg">
          <i class="fa-solid fa-recycle text-xl"></i>
          <span>종량제 시스템</span>
        </div>
        <span class="hidden sm:inline text-xs text-gray-500 border-l border-gray-300 pl-3">
          <?= esc($lgLabel) ?> · <strong class="text-gray-700"><?= esc($mbName) ?></strong>님
        </span>
      </div>
      <nav class="nav-top hidden lg:flex flex-wrap items-center gap-4 xl:gap-5 text-sm font-medium text-gray-700">
        <a class="nav-active flex items-center gap-1 whitespace-nowrap" href="<?= esc($dashModern) ?>">
          <i class="fa-solid fa-gauge-high"></i> 업무 현황
        </a>
        <a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-regular fa-file-lines"></i> 문서 관리</a>
        <a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-box-open"></i> 규격</a>
        <a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-bag-shopping"></i> 봉투 양식</a>
        <a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-table"></i> 데이터 양식</a>
        <a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-clock-rotate-left"></i> 사용 내역</a>
        <a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="<?= base_url('bag/inventory-inquiry') ?>"><i class="fa-solid fa-boxes-stacked"></i> 재고 현황</a>
        <a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="<?= base_url('bag/waste-suibal-enterprise') ?>"><i class="fa-solid fa-table-list"></i> 수불 현황</a>
        <a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-chart-line"></i> 통계 분석</a>
        <a class="flex items-center gap-1 hover:text-blue-600 whitespace-nowrap" href="#"><i class="fa-solid fa-gear"></i> 설정</a>
      </nav>
      <div class="flex items-center gap-2 shrink-0">
        <a href="<?= esc($dashClassic) ?>" class="text-xs text-[#2b4c8c] hover:underline whitespace-nowrap hidden sm:inline">클래식</a>
        <span class="text-gray-300 hidden sm:inline">|</span>
        <a href="<?= esc($dashDense) ?>" class="text-xs text-[#2b4c8c] hover:underline whitespace-nowrap hidden sm:inline" title="정보 집약 종합">종합</a>
        <span class="text-gray-300 hidden sm:inline">|</span>
        <a href="<?= esc($dashCharts) ?>" class="text-xs text-[#2b4c8c] hover:underline whitespace-nowrap hidden sm:inline" title="그래프 대시보드">차트</a>
        <a href="<?= base_url('logout') ?>" class="text-gray-500 hover:text-gray-800 p-1" title="로그아웃">
          <i class="fa-solid fa-arrow-right-from-bracket text-lg"></i>
        </a>
      </div>
    </div>
  </header>

  <main class="flex-1 flex flex-col min-h-0 overflow-y-auto p-4 md:p-6">
      <?php if (session()->getFlashdata('success')): ?>
      <div class="mb-4 p-3 rounded-xl bg-emerald-50 text-emerald-800 text-sm border border-emerald-100"><?= esc(session()->getFlashdata('success')) ?></div>
      <?php endif; ?>

      <!-- 히어로 배너 -->
      <section class="rounded-2xl bg-gradient-to-r from-slate-800 via-slate-800 to-emerald-900 text-white p-6 md:p-8 mb-6 shadow-lg relative overflow-hidden">
        <div class="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 pointer-events-none"></div>
        <div class="relative">
          <p class="text-emerald-300/90 text-sm font-medium mb-1"><?= esc($lgLabel) ?></p>
          <h1 class="text-2xl md:text-3xl font-bold tracking-tight mb-2">안녕하세요, <?= esc($mbName) ?>님</h1>
          <p class="text-slate-300 text-sm max-w-xl">오늘의 재고·구매신청·발주 요약을 한눈에 확인하세요. 다른 레이아웃은 <a href="<?= esc($dashClassic) ?>" class="text-emerald-300 underline hover:text-white">가로 메뉴형 대시보드</a>에서 볼 수 있습니다.</p>
        </div>
      </section>

      <!-- KPI 카드 -->
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4 mb-6">
        <div class="stat-card rounded-2xl bg-white border border-slate-100 p-4 shadow-sm">
          <div class="w-10 h-10 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center mb-3"><i class="fa-solid fa-triangle-exclamation"></i></div>
          <p class="text-2xl font-bold text-slate-900">3</p>
          <p class="text-xs text-slate-500 mt-1">재고 부족 품목</p>
        </div>
        <div class="stat-card rounded-2xl bg-white border border-slate-100 p-4 shadow-sm">
          <div class="w-10 h-10 rounded-xl bg-sky-100 text-sky-600 flex items-center justify-center mb-3"><i class="fa-solid fa-cart-arrow-down"></i></div>
          <p class="text-2xl font-bold text-slate-900">12</p>
          <p class="text-xs text-slate-500 mt-1">미처리 구매신청</p>
        </div>
        <div class="stat-card rounded-2xl bg-white border border-slate-100 p-4 shadow-sm">
          <div class="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center mb-3"><i class="fa-solid fa-truck-ramp-box"></i></div>
          <p class="text-2xl font-bold text-slate-900">8</p>
          <p class="text-xs text-slate-500 mt-1">이번 주 발주·입고</p>
        </div>
        <div class="stat-card rounded-2xl bg-white border border-slate-100 p-4 shadow-sm">
          <div class="w-10 h-10 rounded-xl bg-violet-100 text-violet-600 flex items-center justify-center mb-3"><i class="fa-solid fa-user-clock"></i></div>
          <p class="text-2xl font-bold text-slate-900">4</p>
          <p class="text-xs text-slate-500 mt-1">승인 대기 회원</p>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <!-- 링 차트 느낌 (CSS) -->
        <div class="lg:col-span-1 rounded-2xl bg-white border border-slate-100 p-5 shadow-sm">
          <h3 class="font-semibold text-slate-800 mb-4 text-sm">봉투 재고 비중</h3>
          <div class="flex items-center justify-center gap-6">
            <div class="relative w-36 h-36 rounded-full" style="background: conic-gradient(#10b981 0% 35%, #3b82f6 35% 62%, #f59e0b 62% 88%, #e2e8f0 88% 100%);">
              <div class="absolute inset-3 rounded-full bg-white flex flex-col items-center justify-center text-center">
                <span class="text-lg font-bold text-slate-800">100%</span>
                <span class="text-[10px] text-slate-500">목업</span>
              </div>
            </div>
            <ul class="text-xs space-y-2 text-slate-600">
              <li class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-emerald-500"></span> 일반용</li>
              <li class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-blue-500"></span> 스티커</li>
              <li class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-amber-500"></span> 재사용</li>
              <li class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-slate-200"></span> 기타</li>
            </ul>
          </div>
        </div>
        <!-- 미니 타임라인 스타일 구매신청 -->
        <div class="lg:col-span-2 rounded-2xl bg-white border border-slate-100 p-5 shadow-sm">
          <div class="flex items-center justify-between mb-4">
            <h3 class="font-semibold text-slate-800 text-sm">지정판매소 구매신청</h3>
            <button type="button" class="text-xs font-medium text-emerald-600 hover:text-emerald-800">전체</button>
          </div>
          <ul class="space-y-3">
            <?php
            $timeline = [
                ['행복마트 북구점', '일반용 5L · 2,000장', '09:12', '접수'],
                ['○○슈퍼', '음식물 스티커 · 500장', '08:45', '처리중'],
                ['△△상회', '일반용 20L · 박스 3', '어제', '완료'],
            ];
            foreach ($timeline as $t):
                $dot = $t[3] === '완료' ? 'bg-emerald-500' : ($t[3] === '처리중' ? 'bg-amber-400' : 'bg-slate-400');
            ?>
            <li class="flex gap-3 text-sm">
              <span class="w-2 shrink-0 mt-1.5"><span class="block w-2 h-2 rounded-full <?= $dot ?>"></span></span>
              <div class="flex-1 min-w-0 border-b border-slate-50 pb-3">
                <div class="flex justify-between gap-2">
                  <span class="font-medium text-slate-800 truncate"><?= esc($t[0]) ?></span>
                  <span class="text-xs text-slate-400 shrink-0"><?= esc($t[2]) ?></span>
                </div>
                <p class="text-xs text-slate-500 mt-0.5"><?= esc($t[1]) ?></p>
                <span class="inline-block mt-1 text-[10px] px-2 py-0.5 rounded-md bg-slate-100 text-slate-600"><?= esc($t[3]) ?></span>
              </div>
            </li>
            <?php endforeach; ?>
          </ul>
        </div>
      </div>

      <!-- 표 형태 요약 (카드 안) -->
      <div class="rounded-2xl bg-white border border-slate-100 shadow-sm overflow-hidden mb-4">
        <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/80">
          <h3 class="font-semibold text-slate-800 text-sm">최근 신청 상세</h3>
        </div>
        <div class="overflow-x-auto">
          <table class="w-full text-sm">
            <thead>
              <tr class="text-left text-xs text-slate-500 border-b border-slate-100">
                <th class="px-5 py-3 font-medium">일시</th>
                <th class="px-5 py-3 font-medium">판매소</th>
                <th class="px-5 py-3 font-medium">품목</th>
                <th class="px-5 py-3 font-medium text-right">수량</th>
                <th class="px-5 py-3 font-medium text-center">상태</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
              <tr class="hover:bg-slate-50/80">
                <td class="px-5 py-3 text-slate-600">2025-02-26 09:12</td>
                <td class="px-5 py-3">행복마트 북구점</td>
                <td class="px-5 py-3">일반용 5L</td>
                <td class="px-5 py-3 text-right tabular-nums">2,000장</td>
                <td class="px-5 py-3 text-center"><span class="text-xs px-2 py-1 rounded-lg bg-slate-100">접수</span></td>
              </tr>
              <tr class="hover:bg-slate-50/80">
                <td class="px-5 py-3 text-slate-600">2025-02-26 08:45</td>
                <td class="px-5 py-3">○○슈퍼</td>
                <td class="px-5 py-3">음식물 스티커</td>
                <td class="px-5 py-3 text-right tabular-nums">500장</td>
                <td class="px-5 py-3 text-center"><span class="text-xs px-2 py-1 rounded-lg bg-amber-50 text-amber-800">처리중</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <p class="text-center text-[11px] text-slate-400">
        URL 비교 — <strong class="text-slate-600">클래식 레이아웃</strong> <code class="bg-slate-100 px-1 rounded">/dashboard</code>
        · <strong class="text-slate-600">모던 콘텐츠(이 화면)</strong> <code class="bg-slate-100 px-1 rounded">/dashboard/modern</code>
        · <a href="<?= esc($dashCharts) ?>" class="text-[#2b4c8c] hover:underline">/dashboard/charts</a>
        <span class="block sm:inline mt-1 sm:mt-0">· 상단 메뉴는 동일</span>
      </p>
    </main>
</body>
</html>
