<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GBLS — 봉투 수불 현황</title>
  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<style data-purpose="global-font-scale">html{font-size:18px}.app-brand,.app-brand *{font-size:16px}</style>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <style data-purpose="base-typography">
    body {
      font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
      font-size: 13px;
      color: #333;
    }
  </style>
  <style data-purpose="table-styling">
    .data-grid {
      border-collapse: collapse;
      width: 100%;
      min-width: 1200px;
    }
    .data-grid th, .data-grid td {
      border: 1px solid #d1d5db;
      padding: 6px 8px;
    }
    .data-grid th {
      background-color: #f3f4f6;
      font-weight: 600;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
    }
    .data-grid td {
      vertical-align: middle;
    }
    .data-grid tbody tr:hover {
      background-color: #f9fafb;
    }
    .col-number { text-align: right; }
    .col-center { text-align: center; }
    .data-grid thead th.border-b-0 { border-bottom: 1px solid #f3f4f6; }
  </style>
</head>
<body class="bg-white flex flex-col min-h-screen">
  <header class="border-b border-gray-300 bg-white shadow-sm" data-purpose="top-navigation">
    <div class="flex items-center justify-between px-4 py-2 gap-4 flex-wrap">
      <div class="shrink-0">
        <?= view('components/header_brand', [
            'href' => base_url(),
            'linkClass' => 'flex items-center gap-2 text-green-700 font-bold text-lg hover:opacity-90',
            'svgClass' => 'h-7 w-7 shrink-0',
        ]) ?>
      </div>
      <nav class="hidden lg:flex flex-wrap items-center gap-4 xl:gap-6 text-sm font-medium text-gray-700">
        <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="#"><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="<?= base_url('dashboard') ?>" class="text-xs text-gray-500 hover:text-blue-600 hidden sm:inline">대시보드</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-grow flex flex-col min-h-0" data-purpose="dashboard-content">
    <div class="bg-[#eff5fb] border-b border-gray-300 px-4 py-2 flex justify-between items-center text-sm font-semibold text-gray-800" data-purpose="page-title">
      <span><i class="fa-solid fa-table-list text-[#2b4c8c] mr-2"></i>봉투 수불 현황 <span class="text-xs font-normal text-gray-500">(기간·품목별)</span></span>
      <button type="button" class="text-gray-500 hover:text-gray-800" title="필터"><i class="fa-solid fa-filter"></i></button>
    </div>

    <section class="p-2 border-b border-gray-300 bg-white" data-purpose="search-filters">
      <div class="flex flex-wrap items-center justify-between gap-4">
        <div class="flex items-center gap-3 flex-wrap">
          <div class="flex items-center gap-1">
            <label class="text-gray-600 font-medium whitespace-nowrap">조회기간</label>
            <input class="border border-gray-300 px-2 py-1 text-xs w-24 rounded shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500" type="text" value="2024.01.01" readonly>
            <span>~</span>
            <input class="border border-gray-300 px-2 py-1 text-xs w-24 rounded shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500" type="text" value="2025.12.12" readonly>
          </div>
          <div class="flex items-center gap-2">
            <label class="text-gray-600 font-medium whitespace-nowrap">봉투구분</label>
            <select class="border border-gray-300 px-2 py-1 text-xs rounded shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 w-28">
              <option>전체</option>
            </select>
          </div>
          <div class="flex items-center gap-2">
            <label class="text-gray-600 font-medium whitespace-nowrap">봉투형식</label>
            <select class="border border-gray-300 px-2 py-1 text-xs rounded shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 w-32">
              <option>전체 봉투</option>
            </select>
          </div>
          <div class="flex items-center gap-2">
            <label class="text-gray-600 font-medium whitespace-nowrap">대행소</label>
            <select class="border border-gray-300 px-2 py-1 text-xs rounded shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 w-28">
              <option>북구</option>
            </select>
          </div>
          <button type="button" class="bg-[#243a5e] hover:brightness-110 text-white px-4 py-1.5 rounded text-sm font-medium shadow flex items-center gap-1">
            <i class="fa-solid fa-magnifying-glass"></i> 검색
          </button>
        </div>
        <div class="flex items-center gap-2 flex-wrap">
          <button type="button" class="bg-[#3b8c45] hover:bg-green-700 text-white px-3 py-1.5 rounded text-sm font-medium shadow flex items-center gap-1">
            <i class="fa-solid fa-file-excel"></i> 엑셀 저장
          </button>
          <button type="button" class="bg-[#5a6268] hover:bg-gray-700 text-white px-3 py-1.5 rounded text-sm font-medium shadow flex items-center gap-1">
            <i class="fa-solid fa-print"></i> 인쇄
          </button>
          <button type="button" class="bg-[#dc3545] hover:bg-red-700 text-white px-3 py-1.5 rounded text-sm font-medium shadow flex items-center gap-1">
            <i class="fa-solid fa-power-off"></i> 닫기
          </button>
        </div>
      </div>
    </section>

    <section class="flex-grow overflow-auto bg-gray-50 p-2" data-purpose="data-table-container">
      <table class="data-grid bg-white shadow-sm" id="inventory-table">
        <thead>
          <tr>
            <th rowspan="2">일자</th>
            <th rowspan="2">품목</th>
            <th rowspan="2">전월재고</th>
            <th class="border-b-0" colspan="3">입고</th>
            <th rowspan="2">입고<br><span class="text-xs font-normal text-gray-500">소계</span></th>
            <th rowspan="2">출고<br><span class="text-xs font-normal text-gray-500">소계</span></th>
            <th class="border-b-0" colspan="3">출고</th>
            <th rowspan="2">잔량</th>
          </tr>
          <tr>
            <th>입고</th>
            <th>반품</th>
            <th>기타</th>
            <th>판매</th>
            <th>기타</th>
            <th>합계</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="col-center align-top bg-white font-medium" rowspan="18">2024.01.01</td>
            <td>일반형 5L</td>
            <td class="col-number">187,240</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">0</td>
            <td class="col-number font-bold">187,240</td>
          </tr>
          <tr>
            <td>일반형 5L</td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">0</td>
            <td class="col-number font-bold">0</td>
          </tr>
          <tr>
            <td>일반형 10L</td>
            <td class="col-number">159,428</td>
            <td class="col-number">252,000</td>
            <td class="col-number">252,000</td>
            <td class="col-number">8,580</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">8,580</td>
            <td class="col-number">8,990</td>
            <td class="col-number font-bold bg-[#1cae9e] text-white">402,248</td>
          </tr>
          <tr>
            <td>일반형 20L</td>
            <td class="col-number">212,082</td>
            <td class="col-number">201,000</td>
            <td class="col-number">201,600</td>
            <td class="col-number">11,320</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">11,320</td>
            <td class="col-number">11,320</td>
            <td class="col-number font-bold bg-[#1cae9e] text-white">402,365</td>
          </tr>
          <tr>
            <td>일반형 50L</td>
            <td class="col-number">7,605</td>
            <td class="col-number">13,000</td>
            <td class="col-number">13,000</td>
            <td class="col-number">540</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">540</td>
            <td class="col-number">540</td>
            <td class="col-number font-bold bg-[#e87a27] text-white">20,065</td>
          </tr>
          <tr>
            <td>일반형 75L</td>
            <td class="col-number">31,459</td>
            <td class="col-number">22,600</td>
            <td class="col-number">22,600</td>
            <td class="col-number">2,990</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">2,090</td>
            <td class="col-number">3,640</td>
            <td class="col-number font-bold bg-[#e87a27] text-white">86,240</td>
          </tr>
          <tr>
            <td>일반형 100L</td>
            <td class="col-number">11</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">0</td>
            <td class="col-number font-bold">11</td>
          </tr>
          <tr>
            <td>할인용 70L</td>
            <td class="col-number">77,400</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">1,000</td>
            <td class="col-number"></td>
            <td class="col-number">1,000</td>
            <td class="col-number">1,000</td>
            <td class="col-number font-bold">76,400</td>
          </tr>
          <tr>
            <td>공공용(매립) 20L</td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
          </tr>
          <tr>
            <td>공공용(매립) 50L</td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
          </tr>
          <tr>
            <td>재사용 백</td>
            <td class="col-number">58,540</td>
            <td class="col-number">27,000</td>
            <td class="col-number">27,000</td>
            <td class="col-number">560</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">560</td>
            <td class="col-number">560</td>
            <td class="col-number font-bold bg-[#1cae9e] text-white">84,990</td>
          </tr>
          <tr>
            <td>음식물 2L</td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
          </tr>
          <tr>
            <td>음식물 스티커 1L</td>
            <td class="col-number">376,758</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">100</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">100</td>
            <td class="col-number">180</td>
            <td class="col-number font-bold">376,658</td>
          </tr>
          <tr>
            <td>음식물 스티커 2L</td>
            <td class="col-number">231,542</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">100</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">100</td>
            <td class="col-number">100</td>
            <td class="col-number font-bold">231,422</td>
          </tr>
          <tr>
            <td>음식물 스티커 3L</td>
            <td class="col-number">529,938</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">1,200</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">1,200</td>
            <td class="col-number">1,200</td>
            <td class="col-number font-bold">529,738</td>
          </tr>
          <tr>
            <td>음식물 스티커 70L</td>
            <td class="col-number">751,036</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">1,400</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">1,400</td>
            <td class="col-number">1,400</td>
            <td class="col-number font-bold">750,030</td>
          </tr>
          <tr>
            <td>대형용 스티커 120L</td>
            <td class="col-number">209,743</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">80</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">80</td>
            <td class="col-number">80</td>
            <td class="col-number font-bold">209,663</td>
          </tr>
          <tr>
            <td>폐기물 스티커 1,000원</td>
            <td class="col-number">161,676</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">300</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">300</td>
            <td class="col-number">300</td>
            <td class="col-number font-bold">161,376</td>
          </tr>
          <tr class="border-t-2 border-gray-400">
            <td class="col-center align-top bg-white font-medium" rowspan="4">2024.01.03</td>
            <td>폐기물 스티커 10,000원</td>
            <td class="col-number">44,860</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">0</td>
            <td class="col-number font-bold">44,860</td>
          </tr>
          <tr>
            <td>일반형 5L</td>
            <td class="col-number">187,240</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">0</td>
            <td class="col-number font-bold">187,240</td>
          </tr>
          <tr>
            <td>일반형 10L</td>
            <td class="col-number">402,848</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">0</td>
            <td class="col-number font-bold">402,848</td>
          </tr>
          <tr>
            <td>일반형 20L</td>
            <td class="col-number">402,365</td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number"></td>
            <td class="col-number">0</td>
            <td class="col-number">0</td>
            <td class="col-number font-bold">402,365</td>
          </tr>
        </tbody>
      </table>
    </section>
  </main>

  <footer class="bg-[#e9ecef] border-t border-gray-300 px-4 py-1.5 text-xs text-gray-600 flex justify-between items-center shrink-0" data-purpose="status-bar">
    <div>준비됨</div>
    <div class="flex gap-4">
      <span>북구</span>
      <span>Ver. 목업</span>
      <span><?= date('Y.m.d (D) g:i A') ?></span>
    </div>
  </footer>
</body>
</html>
