<?php
/**
 * 로그인 후 메인 — 그래프 중심 대시보드 (Chart.js 목업)
 * 상단 메뉴바는 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"/>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  <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;
    }
    .chart-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 0.375rem;
      box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    .chart-card h2 {
      font-size: 12px;
      font-weight: 700;
      color: #1f2937;
      padding: 0.5rem 0.75rem;
      border-bottom: 1px solid #f3f4f6;
      background: #fafafa;
    }
    .chart-wrap { position: relative; height: 200px; padding: 0.5rem 0.75rem 0.75rem; }
    .chart-wrap.tall { height: 280px; }
    .chart-wrap.wide { height: 240px; }
  </style>
</head>
<body class="bg-[#eef1f6] flex flex-col min-h-screen">
  <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-3 py-1.5 gap-3 flex-wrap">
      <div class="flex items-center gap-2 shrink-0">
        <div class="flex items-center gap-2 text-green-700 font-bold text-base">
          <i class="fa-solid fa-recycle text-lg"></i>
          <span>종량제 시스템</span>
        </div>
        <span class="hidden sm:inline text-[11px] text-gray-500 border-l border-gray-300 pl-2">
          <?= esc($lgLabel) ?> · <strong class="text-gray-700"><?= esc($mbName) ?></strong>님
        </span>
      </div>
      <nav class="nav-top hidden lg:flex flex-wrap items-center gap-3 xl:gap-4 text-[13px] font-medium text-gray-700">
        <a class="nav-active flex items-center gap-1 whitespace-nowrap" href="<?= esc($dashCharts) ?>">
          <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-1.5 shrink-0 text-[11px]">
        <a href="<?= esc($dashClassic) ?>" class="text-[#2b4c8c] hover:underline whitespace-nowrap hidden md:inline">클래식</a>
        <span class="text-gray-300 hidden md:inline">|</span>
        <a href="<?= esc($dashModern) ?>" class="text-[#2b4c8c] hover:underline whitespace-nowrap hidden md:inline">모던</a>
        <span class="text-gray-300 hidden md:inline">|</span>
        <a href="<?= esc($dashDense) ?>" class="text-[#2b4c8c] hover:underline whitespace-nowrap hidden md:inline">종합</a>
        <a href="<?= base_url('logout') ?>" class="text-gray-500 hover:text-gray-800 p-1 ml-1" title="로그아웃">
          <i class="fa-solid fa-arrow-right-from-bracket"></i>
        </a>
      </div>
    </div>
  </header>

  <div class="bg-[#eff5fb] border-b border-gray-300 px-3 py-1.5 flex flex-wrap items-center justify-between gap-2 text-[12px] shrink-0">
    <span class="font-semibold text-gray-800">
      <i class="fa-solid fa-chart-column text-[#2b4c8c] mr-1"></i>통계·그래프 대시보드
      <span class="font-normal text-gray-500 ml-1">· 목업 데이터 · Chart.js</span>
    </span>
    <span class="text-gray-600 text-[11px]"><i class="fa-regular fa-calendar mr-0.5"></i><?= date('Y-m-d H:i') ?> · <?= esc($lgLabel) ?></span>
  </div>

  <main class="flex-1 overflow-y-auto p-2 sm:p-3">
    <?php if (session()->getFlashdata('success')): ?>
    <div class="mb-2 p-2 rounded border border-green-200 bg-green-50 text-green-800 text-[11px]"><?= esc(session()->getFlashdata('success')) ?></div>
    <?php endif; ?>

    <!-- 1행: 도넛 2 + 막대 + 레이더 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-2 mb-2">
      <section class="chart-card">
        <h2><i class="fa-solid fa-chart-pie text-[#2b4c8c] mr-1"></i>봉투 규격 출고 비중</h2>
        <div class="chart-wrap"><canvas id="chDoughnutSpec"></canvas></div>
      </section>
      <section class="chart-card">
        <h2><i class="fa-solid fa-circle-notch text-[#2b4c8c] mr-1"></i>구매신청 처리 단계</h2>
        <div class="chart-wrap"><canvas id="chDoughnutFlow"></canvas></div>
      </section>
      <section class="chart-card">
        <h2><i class="fa-solid fa-calendar-week text-[#2b4c8c] mr-1"></i>금주 일별 출고(천장)</h2>
        <div class="chart-wrap"><canvas id="chBarWeek"></canvas></div>
      </section>
      <section class="chart-card">
        <h2><i class="fa-solid fa-bullseye text-[#2b4c8c] mr-1"></i>운영 지표 (목업)</h2>
        <div class="chart-wrap"><canvas id="chRadar"></canvas></div>
      </section>
    </div>

    <!-- 2행: 월별 추이 라인 -->
    <section class="chart-card mb-2">
      <h2><i class="fa-solid fa-chart-line text-[#2b4c8c] mr-1"></i>월별 출고 vs 구매신청 건수 (최근 12개월)</h2>
      <div class="chart-wrap tall"><canvas id="chLineYear"></canvas></div>
    </section>

    <!-- 3행: 품목 막대 + 판매소 가로막대 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mb-2">
      <section class="chart-card">
        <h2><i class="fa-solid fa-boxes-stacked text-[#2b4c8c] mr-1"></i>품목별 재고 (천 장)</h2>
        <div class="chart-wrap wide"><canvas id="chBarSku"></canvas></div>
      </section>
      <section class="chart-card">
        <h2><i class="fa-solid fa-store text-[#2b4c8c] mr-1"></i>판매소별 월 출고 TOP</h2>
        <div class="chart-wrap wide"><canvas id="chBarHStore"></canvas></div>
      </section>
    </div>

    <!-- 4행: 스택 막대 -->
    <section class="chart-card mb-2">
      <h2><i class="fa-solid fa-layer-group text-[#2b4c8c] mr-1"></i>분기별 입고 / 출고 / 조정 (천 장)</h2>
      <div class="chart-wrap wide"><canvas id="chStackedQ"></canvas></div>
    </section>

    <!-- 5행: 영역 + 극좌표 누적 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mb-2">
      <section class="chart-card">
        <h2><i class="fa-solid fa-chart-area text-[#2b4c8c] mr-1"></i>누적 출고 추이 (올해)</h2>
        <div class="chart-wrap"><canvas id="chAreaCum"></canvas></div>
      </section>
      <section class="chart-card">
        <h2><i class="fa-solid fa-compass text-[#2b4c8c] mr-1"></i>요일·시간대 신청 분포 (극좌표)</h2>
        <div class="chart-wrap"><canvas id="chPolarTime"></canvas></div>
      </section>
    </div>

    <p class="text-center text-[10px] text-gray-400 py-1">
      <a href="<?= esc($dashClassic) ?>" class="text-[#2b4c8c] hover:underline">/dashboard</a>
      · <a href="<?= esc($dashModern) ?>" class="text-[#2b4c8c] hover:underline">/dashboard/modern</a>
      · <a href="<?= esc($dashDense) ?>" class="text-[#2b4c8c] hover:underline">/dashboard/dense</a>
      · <strong class="text-gray-600">/dashboard/charts</strong>
    </p>
  </main>

  <script>
  (function () {
    const C = {
      primary: '#2b4c8c',
      blue: '#3b82f6',
      teal: '#0d9488',
      emerald: '#059669',
      amber: '#d97706',
      rose: '#e11d48',
      violet: '#7c3aed',
      slate: '#64748b',
      grid: 'rgba(0,0,0,.06)',
    };

    Chart.defaults.font.family = "'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif";
    Chart.defaults.font.size = 11;
    Chart.defaults.color = '#4b5563';

    const commonOpts = {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { position: 'bottom', labels: { boxWidth: 10, padding: 8, font: { size: 10 } } },
      },
    };

    const axisOpts = {
      scales: {
        x: { grid: { color: C.grid }, ticks: { maxRotation: 45, minRotation: 0, font: { size: 10 } } },
        y: { grid: { color: C.grid }, ticks: { font: { size: 10 } }, beginAtZero: true },
      },
    };

    new Chart(document.getElementById('chDoughnutSpec'), {
      type: 'doughnut',
      data: {
        labels: ['일반 5L', '일반 10·20L', '음식물 스티커', '재사용', '기타'],
        datasets: [{
          data: [38, 22, 28, 9, 3],
          backgroundColor: [C.primary, C.blue, C.teal, C.emerald, C.slate],
          borderWidth: 0,
        }],
      },
      options: { ...commonOpts, cutout: '58%' },
    });

    new Chart(document.getElementById('chDoughnutFlow'), {
      type: 'doughnut',
      data: {
        labels: ['접수', '검토', '발주', '납품', '완료'],
        datasets: [{
          data: [12, 8, 6, 5, 42],
          backgroundColor: [C.amber, C.blue, C.violet, C.teal, C.emerald],
          borderWidth: 0,
        }],
      },
      options: { ...commonOpts, cutout: '55%' },
    });

    new Chart(document.getElementById('chBarWeek'), {
      type: 'bar',
      data: {
        labels: ['월', '화', '수', '목', '금', '토', '일'],
        datasets: [{
          label: '출고',
          data: [42, 55, 48, 61, 58, 22, 8],
          backgroundColor: C.primary,
          borderRadius: 4,
        }],
      },
      options: { ...commonOpts, ...axisOpts, plugins: { ...commonOpts.plugins, legend: { display: false } } },
    });

    new Chart(document.getElementById('chRadar'), {
      type: 'radar',
      data: {
        labels: ['재고안정', '신청처리', '납기준수', '민원응대', '데이터품질'],
        datasets: [
          {
            label: '이번 달',
            data: [82, 76, 88, 71, 85],
            borderColor: C.primary,
            backgroundColor: 'rgba(43, 76, 140, 0.2)',
            pointBackgroundColor: C.primary,
          },
          {
            label: '전월',
            data: [78, 80, 84, 75, 80],
            borderColor: C.blue,
            backgroundColor: 'rgba(59, 130, 246, 0.12)',
            pointBackgroundColor: C.blue,
          },
        ],
      },
      options: {
        ...commonOpts,
        scales: {
          r: {
            beginAtZero: true,
            max: 100,
            ticks: { stepSize: 20, font: { size: 9 } },
            grid: { color: C.grid },
            pointLabels: { font: { size: 10 } },
          },
        },
      },
    });

    new Chart(document.getElementById('chLineYear'), {
      type: 'line',
      data: {
        labels: ['3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월', '1월', '2월'],
        datasets: [
          {
            label: '출고(천 장)',
            data: [320, 340, 310, 355, 380, 360, 370, 390, 400, 385, 410, 395],
            borderColor: C.primary,
            backgroundColor: 'rgba(43, 76, 140, 0.08)',
            fill: true,
            tension: 0.35,
            pointRadius: 3,
          },
          {
            label: '구매신청(건)',
            data: [118, 125, 112, 130, 142, 128, 135, 140, 155, 148, 160, 152],
            borderColor: C.teal,
            backgroundColor: 'transparent',
            tension: 0.35,
            yAxisID: 'y1',
            pointRadius: 3,
          },
        ],
      },
      options: {
        ...commonOpts,
        ...axisOpts,
        scales: {
          x: axisOpts.scales.x,
          y: { type: 'linear', position: 'left', grid: { color: C.grid }, title: { display: true, text: '출고', font: { size: 10 } } },
          y1: {
            type: 'linear',
            position: 'right',
            grid: { drawOnChartArea: false },
            title: { display: true, text: '건수', font: { size: 10 } },
            beginAtZero: true,
          },
        },
      },
    });

    new Chart(document.getElementById('chBarSku'), {
      type: 'bar',
      data: {
        labels: ['5L', '10L', '20L', '스티커', '재사용', '특수'],
        datasets: [{
          label: '재고',
          data: [12.4, 8.2, 2.1, 15.0, 4.3, 0.9],
          backgroundColor: [C.primary, C.blue, C.amber, C.teal, C.emerald, C.rose],
          borderRadius: 4,
        }],
      },
      options: {
        ...commonOpts,
        ...axisOpts,
        indexAxis: 'x',
        plugins: { ...commonOpts.plugins, legend: { display: false } },
      },
    });

    new Chart(document.getElementById('chBarHStore'), {
      type: 'bar',
      data: {
        labels: ['행복마트 북구', '◇◇할인점', '□□마트', '○○슈퍼', '△△상회'],
        datasets: [{
          label: '천 장',
          data: [5.2, 4.8, 3.9, 3.5, 2.1],
          backgroundColor: C.primary,
          borderRadius: 4,
        }],
      },
      options: {
        ...commonOpts,
        indexAxis: 'y',
        plugins: { ...commonOpts.plugins, legend: { display: false } },
        scales: {
          x: { grid: { color: C.grid }, beginAtZero: true, ticks: { font: { size: 10 } } },
          y: { grid: { display: false }, ticks: { font: { size: 10 } } },
        },
      },
    });

    new Chart(document.getElementById('chStackedQ'), {
      type: 'bar',
      data: {
        labels: ['1분기', '2분기', '3분기', '4분기(예)'],
        datasets: [
          { label: '입고', data: [420, 450, 480, 460], backgroundColor: C.emerald, stack: 's' },
          { label: '출고', data: [380, 410, 440, 430], backgroundColor: C.primary, stack: 's' },
          { label: '조정', data: [12, 8, 15, 10], backgroundColor: C.amber, stack: 's' },
        ],
      },
      options: {
        ...commonOpts,
        scales: {
          x: { stacked: true, grid: { display: false }, ticks: { font: { size: 10 } } },
          y: { stacked: true, grid: { color: C.grid }, ticks: { font: { size: 10 } }, beginAtZero: true },
        },
      },
    });

    new Chart(document.getElementById('chAreaCum'), {
      type: 'line',
      data: {
        labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
        datasets: [{
          label: '누적 출고(만 장)',
          data: [3.2, 6.8, 10.5, 14.2, 18.0, 21.5, 25.1, 28.9, 32.4, 36.0, 39.8, 43.5],
          borderColor: C.blue,
          backgroundColor: 'rgba(59, 130, 246, 0.25)',
          fill: true,
          tension: 0.4,
          pointRadius: 0,
        }],
      },
      options: { ...commonOpts, ...axisOpts, plugins: { ...commonOpts.plugins, legend: { display: true } } },
    });

    new Chart(document.getElementById('chPolarTime'), {
      type: 'polarArea',
      data: {
        labels: ['평일 오전', '평일 오후', '평일 야간', '주말'],
        datasets: [{
          data: [28, 45, 8, 19],
          backgroundColor: [
            'rgba(43, 76, 140, 0.75)',
            'rgba(13, 148, 136, 0.7)',
            'rgba(217, 119, 6, 0.65)',
            'rgba(124, 58, 237, 0.65)',
          ],
          borderWidth: 1,
          borderColor: '#fff',
        }],
      },
      options: {
        ...commonOpts,
        scales: {
          r: {
            ticks: { backdropColor: 'transparent', font: { size: 9 } },
            grid: { color: C.grid },
            pointLabels: { font: { size: 10 } },
          },
        },
      },
    });
  })();
  </script>
</body>
</html>
