<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>기간별 사용약품 조회 - 청춘약국</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #f8fafc;
            -webkit-font-smoothing: antialiased;
            color: #1e293b;
        }

        /* ── 헤더 ── */
        .header {
            background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
            padding: 28px 32px 24px;
            color: #fff;
        }
        .header-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .header-nav a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
        }
        .header-nav a:hover { color: #fff; }
        .header h1 {
            font-size: 24px;
            font-weight: 700;
            letter-spacing: -0.5px;
            margin-bottom: 6px;
        }
        .header p {
            font-size: 14px;
            opacity: 0.85;
        }

        /* ── 컨텐츠 ── */
        .content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 24px 20px 60px;
        }

        /* ── 검색 영역 ── */
        .search-section {
            background: #fff;
            border-radius: 14px;
            padding: 24px;
            margin-bottom: 20px;
            border: 1px solid #e2e8f0;
        }
        .search-row {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            align-items: flex-end;
        }
        .search-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .search-group label {
            font-size: 12px;
            font-weight: 600;
            color: #64748b;
        }
        .date-range {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .date-input {
            padding: 12px 14px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 14px;
            font-family: inherit;
            transition: all 0.2s;
            width: 160px;
        }
        .date-input:focus {
            outline: none;
            border-color: #10b981;
            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
        }
        .date-range span {
            color: #94a3b8;
            font-size: 14px;
        }
        .radio-group {
            display: flex;
            gap: 16px;
            padding: 10px 0;
        }
        .radio-group label {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            font-size: 14px;
            color: #475569;
        }
        .radio-group input[type="radio"] {
            width: 18px;
            height: 18px;
            accent-color: #10b981;
            cursor: pointer;
        }
        .search-input {
            flex: 1;
            min-width: 200px;
            padding: 12px 16px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 14px;
            font-family: inherit;
            transition: all 0.2s;
        }
        .search-input:focus {
            outline: none;
            border-color: #10b981;
            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
        }
        .search-input::placeholder {
            color: #94a3b8;
        }
        .search-btn {
            background: #10b981;
            color: #fff;
            border: none;
            padding: 12px 28px;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .search-btn:hover { background: #059669; }
        .search-btn:active { transform: scale(0.98); }
        .search-btn:disabled {
            background: #94a3b8;
            cursor: not-allowed;
        }

        /* ── 결과 카운트 ── */
        .result-count {
            margin-bottom: 16px;
            font-size: 14px;
            color: #64748b;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .result-count strong {
            color: #10b981;
            font-weight: 700;
        }
        .result-period {
            font-size: 13px;
            color: #94a3b8;
        }

        /* ── 테이블 ── */
        .table-wrap {
            background: #fff;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            overflow: hidden;
        }
        .table-scroll {
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px;
        }
        thead th {
            background: #f8fafc;
            padding: 14px 16px;
            font-size: 12px;
            font-weight: 600;
            color: #64748b;
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
            white-space: nowrap;
            cursor: pointer;
            user-select: none;
            transition: background 0.15s;
        }
        thead th:hover {
            background: #f1f5f9;
        }
        thead th.sortable::after {
            content: ' ↕';
            color: #cbd5e1;
        }
        thead th.sort-asc::after {
            content: ' ↑';
            color: #10b981;
        }
        thead th.sort-desc::after {
            content: ' ↓';
            color: #10b981;
        }
        tbody td {
            padding: 14px 16px;
            font-size: 14px;
            color: #334155;
            border-bottom: 1px solid #f1f5f9;
            vertical-align: middle;
        }
        tbody tr:hover { background: #f0fdf4; }
        tbody tr:last-child td { border-bottom: none; }

        /* ── 코드 스타일 ── */
        .code {
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 6px;
            display: inline-block;
            background: #d1fae5;
            color: #065f46;
        }
        .category-badge {
            display: inline-block;
            background: #ede9fe;
            color: #7c3aed;
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 4px;
            font-weight: 500;
        }
        .product-name {
            font-weight: 600;
            color: #1e293b;
        }

        /* ── 숫자 스타일 ── */
        .num-cell {
            text-align: right;
            font-family: 'JetBrains Mono', monospace;
        }
        .num-highlight {
            color: #10b981;
            font-weight: 600;
        }
        .num-secondary {
            color: #3b82f6;
        }
        .negative-stock {
            color: #dc2626 !important;
            font-weight: 600;
        }

        /* ── 빈 상태 ── */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #94a3b8;
        }
        .empty-state .icon {
            font-size: 48px;
            margin-bottom: 16px;
        }
        .empty-state p {
            font-size: 15px;
        }

        /* ── 로딩 상태 ── */
        .loading-state {
            text-align: center;
            padding: 60px 20px;
            color: #64748b;
        }
        .loading-spinner {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 3px solid #e2e8f0;
            border-top-color: #10b981;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 16px;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* ── 페이지네이션 ── */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        .pagination-btn {
            padding: 8px 14px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #fff;
            color: #475569;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.15s;
        }
        .pagination-btn:hover:not(:disabled) {
            background: #f1f5f9;
            border-color: #cbd5e1;
        }
        .pagination-btn.active {
            background: #10b981;
            color: #fff;
            border-color: #10b981;
        }
        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .pagination-info {
            color: #64748b;
            font-size: 13px;
            margin: 0 12px;
        }

        /* ── 상세 패널 ── */
        .detail-row td {
            /* padding removed - handled by detail-table */
            background: #f0fdf4;
        }
        .detail-panel {
            display: flex;
            gap: 16px;
            padding: 20px;
            border-top: 2px solid #10b981;
        }
        .detail-left, .detail-right {
            flex: 1;
            background: #fff;
            border-radius: 10px;
            padding: 16px;
            border: 1px solid #e2e8f0;
        }
        .detail-left h4, .detail-right h4 {
            font-size: 14px;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .detail-left h4 .count, .detail-right h4 .count {
            font-size: 12px;
            color: #10b981;
            font-weight: 500;
        }
        .patient-info {
            display: inline-flex;
            gap: 4px;
            margin-left: 8px;
            flex-wrap: wrap;
        }
        .patient-badge {
            display: inline-block;
            padding: 2px 8px;
            font-size: 11px;
            font-weight: 500;
            background: #e0f2fe;
            color: #0369a1;
            border-radius: 12px;
        }
        .patient-badge.more {
            background: #fef3c7;
            color: #92400e;
        }
        .usage-badge {
            display: inline-block;
            padding: 2px 10px;
            font-size: 12px;
            font-weight: 600;
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            border-radius: 12px;
            margin-left: 8px;
        }
        .detail-table-wrapper {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
        }
        .detail-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 12px;
            min-width: 0;
            table-layout: fixed;
        }
        .detail-table thead th {
            position: sticky;
            top: 0;
            background: #f8fafc;
            z-index: 1;
            box-shadow: 0 1px 0 #e2e8f0;
        }
        .detail-table td, .detail-table th {
            padding: 4px 8px;
            border-bottom: 1px solid #e0e0e0;
        }
        .truncate-cell {
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .detail-table thead th {
            background: #f8fafc;
            padding: 8px 10px;
            font-size: 11px;
            font-weight: 600;
            color: #64748b;
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
            white-space: nowrap;
        }
        .detail-table tbody td {
            padding: 8px 10px;
            font-size: 12px;
            color: #334155;
            border-bottom: 1px solid #f1f5f9;
        }
        .detail-table tbody tr:last-child td {
            border-bottom: none;
        }
        .detail-loading {
            text-align: center;
            padding: 30px;
            color: #94a3b8;
        }
        .detail-empty {
            text-align: center;
            padding: 30px;
            color: #94a3b8;
            font-size: 13px;
        }
        tbody tr.clickable {
            cursor: pointer;
        }
        tbody tr.clickable:hover {
            background: #ecfdf5;
        }
        tbody tr.expanded {
            background: #d1fae5 !important;
        }

        /* ── 반응형 ── */
        @media (max-width: 768px) {
            .search-row { flex-direction: column; }
            .date-range { flex-wrap: wrap; }
            .date-input { width: 100%; }
            .search-input { width: 100%; }
            .detail-panel { flex-direction: column; }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-nav">
            <a href="/admin">← 관리자 홈</a>
            <div>
                <a href="/admin/rx-usage" style="margin-right: 16px;">전문약 사용량</a>
                <a href="/admin/products">제품 검색</a>
            </div>
        </div>
        <h1>📊 기간별 사용약품 조회</h1>
        <p>기간 내 조제 및 입고 현황을 한눈에 확인</p>
    </div>

    <div class="content">
        <!-- 검색 -->
        <div class="search-section">
            <div class="search-row">
                <div class="search-group">
                    <label>📅 기간</label>
                    <div class="date-range">
                        <input type="date" class="date-input" id="startDate">
                        <span>~</span>
                        <input type="date" class="date-input" id="endDate">
                    </div>
                </div>
                <div class="search-group">
                    <label>📌 기준</label>
                    <div class="radio-group">
                        <label>
                            <input type="radio" name="dateType" value="dispense" checked>
                            조제일
                        </label>
                        <label>
                            <input type="radio" name="dateType" value="expiry">
                            소진일
                        </label>
                    </div>
                </div>
                <div class="search-group" style="flex: 1;">
                    <label>🔍 약품명 검색</label>
                    <input type="text" class="search-input" id="searchInput" 
                           placeholder="약품명 입력 (선택사항)"
                           onkeypress="if(event.key==='Enter')searchDrugUsage()">
                </div>
                <button class="search-btn" id="searchBtn" onclick="searchDrugUsage()">🔍 조회</button>
            </div>
        </div>

        <!-- 결과 카운트 -->
        <div class="result-count" id="resultInfo" style="display:none;">
            <div>
                검색 결과: <strong id="resultNum">0</strong>개 약품
            </div>
            <div class="result-period" id="resultPeriod"></div>
        </div>

        <!-- 테이블 -->
        <div class="table-wrap">
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th class="sortable" data-sort="drug_code">약품코드</th>
                            <th class="sortable" data-sort="goods_name">약품명</th>
                            <th class="sortable" data-sort="category">분류</th>
                            <th class="sortable sort-desc" data-sort="rx_count">조제건수</th>
                            <th class="sortable" data-sort="import_count">입고건수</th>
                            <th class="sortable" data-sort="rx_total_qty">조제량</th>
                            <th class="sortable" data-sort="import_total_qty">입고량</th>
                            <th class="sortable" data-sort="current_stock">현재고</th>
                        </tr>
                    </thead>
                    <tbody id="drugUsageBody">
                        <tr>
                            <td colspan="8" class="empty-state">
                                <div class="icon">📊</div>
                                <p>기간을 선택하고 조회 버튼을 클릭하세요</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 페이지네이션 -->
        <div class="pagination" id="pagination" style="display:none;"></div>
    </div>

    <script>
    // ═══ 상태 변수 ═══
    let allData = [];
    let filteredData = [];
    let currentPage = 1;
    const pageSize = 50;
    let currentSort = { field: 'rx_count', dir: 'desc' };

    // ═══ 초기화 ═══
    document.addEventListener('DOMContentLoaded', function() {
        // 기본 날짜 설정 (최근 3개월)
        const today = new Date();
        const threeMonthsAgo = new Date();
        threeMonthsAgo.setMonth(today.getMonth() - 3);
        
        document.getElementById('endDate').value = formatDate(today);
        document.getElementById('startDate').value = formatDate(threeMonthsAgo);
        
        // 정렬 헤더 이벤트
        document.querySelectorAll('thead th.sortable').forEach(th => {
            th.addEventListener('click', () => sortBy(th.dataset.sort));
        });
    });

    function formatDate(date) {
        return date.toISOString().split('T')[0];
    }

    function formatNumber(num) {
        if (!num && num !== 0) return '-';
        return new Intl.NumberFormat('ko-KR').format(num);
    }

    function escapeHtml(str) {
        if (!str) return '';
        return str.replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
    }

    // ═══ 조회 ═══
    async function searchDrugUsage() {
        const startDate = document.getElementById('startDate').value;
        const endDate = document.getElementById('endDate').value;
        const dateType = document.querySelector('input[name="dateType"]:checked').value;
        const search = document.getElementById('searchInput').value.trim();

        if (!startDate || !endDate) {
            alert('기간을 선택하세요');
            return;
        }

        const tbody = document.getElementById('drugUsageBody');
        const btn = document.getElementById('searchBtn');
        
        // 로딩 상태
        btn.disabled = true;
        btn.textContent = '조회 중...';
        tbody.innerHTML = `
            <tr>
                <td colspan="8" class="loading-state">
                    <div class="loading-spinner"></div>
                    <p>데이터를 불러오는 중...</p>
                </td>
            </tr>
        `;

        try {
            const params = new URLSearchParams({
                start_date: startDate.replace(/-/g, ''),
                end_date: endDate.replace(/-/g, ''),
                date_type: dateType,
                limit: 5000  // 전체 조회 후 클라이언트에서 페이징
            });
            if (search) params.append('search', search);

            const res = await fetch(`/api/drug-usage?${params}`);
            const data = await res.json();

            if (data.success) {
                allData = data.items || [];
                filteredData = [...allData];
                currentPage = 1;
                
                // 결과 정보 표시
                document.getElementById('resultInfo').style.display = 'flex';
                document.getElementById('resultNum').textContent = filteredData.length;
                document.getElementById('resultPeriod').textContent = 
                    `${data.period?.start || startDate} ~ ${data.period?.end || endDate} (${dateType === 'dispense' ? '조제일' : '소진일'} 기준)`;
                
                // 기본 정렬 적용
                sortData();
                renderTable();
                renderPagination();
            } else {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="8" class="empty-state">
                            <div class="icon">⚠️</div>
                            <p>오류: ${escapeHtml(data.error || '알 수 없는 오류')}</p>
                        </td>
                    </tr>
                `;
            }
        } catch (err) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="8" class="empty-state">
                        <div class="icon">❌</div>
                        <p>조회 실패: ${escapeHtml(err.message)}</p>
                    </td>
                </tr>
            `;
        } finally {
            btn.disabled = false;
            btn.textContent = '🔍 조회';
        }
    }

    // ═══ 정렬 ═══
    function sortBy(field) {
        // 같은 필드면 방향 토글
        if (currentSort.field === field) {
            currentSort.dir = currentSort.dir === 'desc' ? 'asc' : 'desc';
        } else {
            currentSort.field = field;
            currentSort.dir = 'desc';
        }
        
        // 헤더 표시 업데이트
        document.querySelectorAll('thead th.sortable').forEach(th => {
            th.classList.remove('sort-asc', 'sort-desc');
            if (th.dataset.sort === field) {
                th.classList.add(currentSort.dir === 'asc' ? 'sort-asc' : 'sort-desc');
            }
        });
        
        sortData();
        currentPage = 1;
        renderTable();
        renderPagination();
    }

    function sortData() {
        const { field, dir } = currentSort;
        
        filteredData.sort((a, b) => {
            let aVal = a[field];
            let bVal = b[field];
            
            // 숫자 필드
            if (['rx_count', 'import_count', 'rx_total_qty', 'import_total_qty'].includes(field)) {
                aVal = Number(aVal) || 0;
                bVal = Number(bVal) || 0;
            } else {
                // 문자열 필드
                aVal = String(aVal || '').toLowerCase();
                bVal = String(bVal || '').toLowerCase();
            }
            
            if (aVal < bVal) return dir === 'asc' ? -1 : 1;
            if (aVal > bVal) return dir === 'asc' ? 1 : -1;
            return 0;
        });
    }

    // ═══ 상세 패널 상태 ═══
    let expandedDrugCode = null;

    // ═══ 렌더링 ═══
    function renderTable() {
        const tbody = document.getElementById('drugUsageBody');
        
        if (filteredData.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="8" class="empty-state">
                        <div class="icon">📭</div>
                        <p>조회 결과가 없습니다</p>
                    </td>
                </tr>
            `;
            document.getElementById('pagination').style.display = 'none';
            return;
        }
        
        // 페이지 데이터 추출
        const start = (currentPage - 1) * pageSize;
        const pageData = filteredData.slice(start, start + pageSize);
        
        tbody.innerHTML = pageData.map(item => `
            <tr class="clickable ${expandedDrugCode === item.drug_code ? 'expanded' : ''}" 
                data-drug-code="${escapeHtml(item.drug_code)}"
                onclick="toggleDetail('${escapeHtml(item.drug_code)}')">
                <td><span class="code">${escapeHtml(item.drug_code)}</span></td>
                <td><span class="product-name">${escapeHtml(item.goods_name)}</span></td>
                <td>${item.category ? `<span class="category-badge">${escapeHtml(item.category)}</span>` : '<span style="color:#94a3b8;">-</span>'}</td>
                <td class="num-cell num-highlight">${formatNumber(item.rx_count)}</td>
                <td class="num-cell num-secondary">${formatNumber(item.import_count)}</td>
                <td class="num-cell num-highlight">${formatNumber(item.rx_total_qty)}</td>
                <td class="num-cell num-secondary">${formatNumber(item.import_total_qty)}</td>
                <td class="num-cell ${item.current_stock < 0 ? 'negative-stock' : ''}">${formatNumber(item.current_stock)}</td>
            </tr>
            <tr class="detail-row" id="detail-${escapeHtml(item.drug_code)}" style="display:${expandedDrugCode === item.drug_code ? 'table-row' : 'none'};">
                <td colspan="8">
                    <div class="detail-panel">
                        <div class="detail-left" id="imports-${escapeHtml(item.drug_code)}">
                            <h4>📦 입고목록 <span class="count"></span></h4>
                            <div class="detail-loading">불러오는 중...</div>
                        </div>
                        <div class="detail-right" id="prescriptions-${escapeHtml(item.drug_code)}">
                            <h4>💊 조제목록 <span class="count"></span></h4>
                            <div class="detail-loading">불러오는 중...</div>
                        </div>
                    </div>
                </td>
            </tr>
        `).join('');
    }

    // ═══ 상세 패널 토글 ═══
    async function toggleDetail(drugCode) {
        const detailRow = document.getElementById(`detail-${drugCode}`);
        const mainRow = document.querySelector(`tr[data-drug-code="${drugCode}"]`);
        
        // 같은 행 클릭 시 닫기
        if (expandedDrugCode === drugCode) {
            detailRow.style.display = 'none';
            mainRow.classList.remove('expanded');
            expandedDrugCode = null;
            return;
        }
        
        // 다른 행이 열려있으면 닫기
        if (expandedDrugCode) {
            const prevDetail = document.getElementById(`detail-${expandedDrugCode}`);
            const prevMain = document.querySelector(`tr[data-drug-code="${expandedDrugCode}"]`);
            if (prevDetail) prevDetail.style.display = 'none';
            if (prevMain) prevMain.classList.remove('expanded');
        }
        
        // 현재 행 열기
        detailRow.style.display = 'table-row';
        mainRow.classList.add('expanded');
        expandedDrugCode = drugCode;
        
        // 데이터 로드 (순차 호출 - DB 세션 충돌 방지)
        const startDate = document.getElementById('startDate').value.replace(/-/g, '');
        const endDate = document.getElementById('endDate').value.replace(/-/g, '');
        
        // 입고 데이터 로드 후 조제 데이터 로드 (순차)
        await loadImports(drugCode, startDate, endDate);
        await loadPrescriptions(drugCode, startDate, endDate);
    }

    // ═══ 입고 데이터 로드 ═══
    async function loadImports(drugCode, startDate, endDate) {
        const container = document.getElementById(`imports-${drugCode}`);
        
        try {
            const res = await fetch(`/api/drug-usage/${drugCode}/imports?start_date=${startDate}&end_date=${endDate}`);
            const data = await res.json();
            
            if (data.success && data.items.length > 0) {
                container.innerHTML = `
                    <h4>📦 입고목록 <span class="count">(${data.total_count}건)</span></h4>
                    <div class="detail-table-wrapper">
                    <table class="detail-table" style="table-layout:fixed;">
                        <colgroup>
                            <col style="width:70px;">
                            <col style="width:55px;">
                            <col style="width:45px;">
                            <col style="width:65px;">
                            <col style="width:auto;">
                            <col style="width:50px;">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>입고일자</th>
                                <th>수량</th>
                                <th>단가</th>
                                <th>금액</th>
                                <th>거래처</th>
                                <th>담당자</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${data.items.map(item => `
                                <tr>
                                    <td style="white-space:nowrap;padding:4px 6px;">${formatDetailDate(item.import_date)}</td>
                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;">${formatNumber(item.quantity)}</td>
                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;">${formatNumber(item.unit_price)}</td>
                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;border-right:1px solid #ccc;">${formatNumber(item.amount)}</td>
                                    <td class="truncate-cell" style="padding:4px 6px;" title="${escapeHtml(item.supplier_name)}">${escapeHtml(item.supplier_name)}</td>
                                    <td style="white-space:nowrap;padding:4px 6px;">${escapeHtml(item.person_name)}</td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                    </div>
                `;
            } else {
                container.innerHTML = `
                    <h4>📦 입고목록 <span class="count">(0건)</span></h4>
                    <div class="detail-empty">입고 내역이 없습니다</div>
                `;
            }
        } catch (err) {
            container.innerHTML = `
                <h4>📦 입고목록</h4>
                <div class="detail-empty">⚠️ 로드 실패: ${escapeHtml(err.message)}</div>
            `;
        }
    }

    // ═══ 조제 데이터 로드 ═══
    async function loadPrescriptions(drugCode, startDate, endDate) {
        const container = document.getElementById(`prescriptions-${drugCode}`);
        
        try {
            const res = await fetch(`/api/drug-usage/${drugCode}/prescriptions?start_date=${startDate}&end_date=${endDate}`);
            const data = await res.json();
            
            if (data.success && data.items.length > 0) {
                // 환자 뱃지 생성
                const uniqueCount = data.unique_patients || 0;
                const recentPatients = data.recent_patients || [];
                let patientBadges = '';
                
                if (uniqueCount <= 3) {
                    // 3명 이하: 전체 표시
                    patientBadges = recentPatients.map(p => 
                        `<span class="patient-badge">${escapeHtml(p)}</span>`
                    ).join('');
                } else {
                    // 3명 초과: 최근 3명 + 외 N명
                    patientBadges = recentPatients.map(p => 
                        `<span class="patient-badge">${escapeHtml(p)}</span>`
                    ).join('') + `<span class="patient-badge more">외 ${uniqueCount - 3}명</span>`;
                }
                
                // 총 사용량 + 단위
                const totalUsage = data.total_usage || 0;
                const unit = data.unit || '개';
                const usageBadge = `<span class="usage-badge">${formatNumber(totalUsage)}${unit}</span>`;
                
                container.innerHTML = `
                    <h4>💊 조제목록 <span class="count">(${data.total_count}건)</span> ${usageBadge} <span class="patient-info">${patientBadges}</span></h4>
                    <div class="detail-table-wrapper">
                    <table class="detail-table" style="table-layout:fixed;">
                        <colgroup>
                            <col style="width:65px;">
                            <col style="width:65px;">
                            <col style="width:55px;">
                            <col style="width:auto;">
                            <col style="width:45px;">
                            <col style="width:35px;">
                            <col style="width:35px;">
                            <col style="width:55px;">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>조제일</th>
                                <th>만료일</th>
                                <th>고객명</th>
                                <th>발행기관</th>
                                <th>투약량</th>
                                <th>횟수</th>
                                <th>일수</th>
                                <th>총투약량</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${data.items.map(item => `
                                <tr>
                                    <td style="white-space:nowrap;padding:4px 6px;">${formatDetailDate(item.rx_date)}</td>
                                    <td style="white-space:nowrap;padding:4px 6px;">${formatDetailDate(item.expiry_date)}</td>
                                    <td style="white-space:nowrap;padding:4px 6px;">${escapeHtml(item.patient_name)}</td>
                                    <td class="truncate-cell" style="padding:4px 6px;" title="${escapeHtml(item.institution_name)}">${escapeHtml(item.institution_name)}</td>
                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;">${item.dosage}</td>
                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;">${item.frequency}</td>
                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;">${item.days}</td>
                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;">${formatNumber(item.total_qty)}</td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                    </div>
                `;
            } else {
                container.innerHTML = `
                    <h4>💊 조제목록 <span class="count">(0건)</span></h4>
                    <div class="detail-empty">조제 내역이 없습니다</div>
                `;
            }
        } catch (err) {
            container.innerHTML = `
                <h4>💊 조제목록</h4>
                <div class="detail-empty">⚠️ 로드 실패: ${escapeHtml(err.message)}</div>
            `;
        }
    }

    // ═══ 날짜 포맷 (YYYYMMDD → YYYY-MM-DD) ═══
    function formatDetailDate(dateStr) {
        if (!dateStr || dateStr.length !== 8) return dateStr || '-';
        return `${dateStr.slice(2,4)}-${dateStr.slice(4,6)}-${dateStr.slice(6,8)}`;
    }

    function renderPagination() {
        const pagination = document.getElementById('pagination');
        const totalPages = Math.ceil(filteredData.length / pageSize);
        
        if (totalPages <= 1) {
            pagination.style.display = 'none';
            return;
        }
        
        pagination.style.display = 'flex';
        
        let html = '';
        
        // 이전 버튼
        html += `<button class="pagination-btn" ${currentPage <= 1 ? 'disabled' : ''} onclick="goToPage(${currentPage - 1})">◀ 이전</button>`;
        
        // 페이지 번호
        const maxVisible = 5;
        let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
        let endPage = Math.min(totalPages, startPage + maxVisible - 1);
        if (endPage - startPage < maxVisible - 1) {
            startPage = Math.max(1, endPage - maxVisible + 1);
        }
        
        if (startPage > 1) {
            html += `<button class="pagination-btn" onclick="goToPage(1)">1</button>`;
            if (startPage > 2) html += `<span style="color:#94a3b8;">...</span>`;
        }
        
        for (let i = startPage; i <= endPage; i++) {
            html += `<button class="pagination-btn ${i === currentPage ? 'active' : ''}" onclick="goToPage(${i})">${i}</button>`;
        }
        
        if (endPage < totalPages) {
            if (endPage < totalPages - 1) html += `<span style="color:#94a3b8;">...</span>`;
            html += `<button class="pagination-btn" onclick="goToPage(${totalPages})">${totalPages}</button>`;
        }
        
        // 다음 버튼
        html += `<button class="pagination-btn" ${currentPage >= totalPages ? 'disabled' : ''} onclick="goToPage(${currentPage + 1})">다음 ▶</button>`;
        
        // 페이지 정보
        html += `<span class="pagination-info">총 ${filteredData.length}개</span>`;
        
        pagination.innerHTML = html;
    }

    function goToPage(page) {
        currentPage = page;
        renderTable();
        renderPagination();
        
        // 테이블 상단으로 스크롤
        document.querySelector('.table-wrap').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
    </script>
</body>
</html>
