<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문의사항 관리 - Project Master</title>
    <link rel="stylesheet" as="style" crossorigin
        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
    <link rel="stylesheet" href="style/common.css">
    <link rel="stylesheet" href="style/dashboard.css">
    <link rel="stylesheet" href="style/inquiries.css">
</head>

<body>
    <nav class="topbar">
        <div class="topbar-header">
            <a href="/">
                <h2>Project Master Test</h2>
            </a>
        </div>
        <ul class="nav-list">
            <li class="nav-item" onclick="location.href='/dashboard'">대시보드</li>
            <li class="nav-item active" onclick="location.href='/inquiries'">문의사항</li>
            <li class="nav-item" onclick="location.href='/mailTest'">메일관리</li>
            <li class="nav-item" onclick="location.href='/analysis'">분석</li>
        </ul>
    </nav>

    <main class="inquiry-board">
        <div id="stickyHeader" class="board-sticky-header">
            <div class="board-header">
                <div>
                    <h2>문의사항</h2>
                    <p style="font-size: 13px; color: #666; margin-top: 4px;">시스템 운영 관련 불편사항 및 개선 요청 관리</p>
                </div>
                <div class="header-stats" id="headerStats">
                    <div class="stat-item total">
                        <span class="stat-label">전체</span>
                        <span class="stat-value" id="countTotal">0</span>
                    </div>
                    <div class="stat-item complete">
                        <span class="stat-label">완료</span>
                        <span class="stat-value" id="countComplete">0</span>
                    </div>
                    <div class="stat-item working">
                        <span class="stat-label">작업 중</span>
                        <span class="stat-value" id="countWorking">0</span>
                    </div>
                    <div class="stat-item checking">
                        <span class="stat-label">확인 중</span>
                        <span class="stat-value" id="countChecking">0</span>
                    </div>
                    <div class="stat-item pending">
                        <span class="stat-label">개발예정</span>
                        <span class="stat-value" id="countPending">0</span>
                    </div>
                    <div class="stat-item unconfirmed">
                        <span class="stat-label">미확인</span>
                        <span class="stat-value" id="countUnconfirmed">0</span>
                    </div>
                </div>
            </div>

            <!-- 시트 상단 공지 영역 재현 (통합 박스) -->
            <div class="notice-container">
                <div style="margin-bottom: 12px; display: flex; gap: 20px;">
                    <div style="flex: 1;">
                        <h4
                            style="color: #d32f2f; margin-bottom: 5px; font-size: 14px; display: flex; align-items: center; gap: 6px;">
                            <span style="font-size: 16px;">📢</span> &lt;공지&gt;
                        </h4>
                        <ul style="font-size: 12px; line-height: 1.6; color: #444; padding-left: 20px; margin: 0;">
                            <li>파워포인트 파일에 읽기전용포함(제한)글꼴이 있는 경우 컨버팅이 되지 않습니다. 제한된 글꼴 제거 후 업로드 권장.</li>
                            <li>이미지는 '문의사항 이미지' 시트에 문의사항 번호와 함께 업로드 부탁드립니다.</li>
                        </ul>
                    </div>
                    <div style="flex: 2; border-left: 1px dashed #ddd; padding-left: 20px;">
                        <h4
                            style="color: #1976d2; margin-bottom: 5px; font-size: 14px; display: flex; align-items: center; gap: 6px;">
                            <span style="font-size: 16px;">📂</span> &lt;이전 문의사항 요약&gt;
                        </h4>
                        <div
                            style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 11px; color: #666; line-height: 1.4;">
                            <div><strong>1. 폴더트리:</strong> 하위폴더 권한, 숨김 기능 등 (완료)</div>
                            <div><strong>2. 뷰어:</strong> 변환 오류, 특정 문서 깨짐 등 (완료)</div>
                            <div><strong>3. 업로드/다운로드:</strong> 대용량 전송 오류 등 (완료)</div>
                            <div><strong>4. 기타:</strong> 정렬, 화면 개선 등 (완료)</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="filter-section">
                <div class="filter-group">
                    <label>시스템(PM 종류)</label>
                    <select id="filterPmType" onchange="loadInquiries()">
                        <option value="">전체</option>
                        <option value="Overseas">Overseas</option>
                        <option value="기술개발센터">기술개발센터</option>
                        <option value="장헌">장헌</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>구분(카테고리)</label>
                    <select id="filterCategory" onchange="loadInquiries()">
                        <option value="">전체</option>
                        <option value="업로드">업로드</option>
                        <option value="다운로드">다운로드</option>
                        <option value="폴더트리">폴더트리</option>
                        <option value="뷰어">뷰어</option>
                        <option value="기타">기타</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>처리여부</label>
                    <select id="filterStatus" onchange="loadInquiries()">
                        <option value="">전체</option>
                        <option value="완료">완료</option>
                        <option value="작업 중">작업 중</option>
                        <option value="확인 중">확인 중</option>
                        <option value="개발예정">개발예정</option>
                        <option value="미확인">미확인</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>검색(내용/작성자/프로젝트)</label>
                    <input type="text" id="searchKeyword" placeholder="검색어 입력 후 Enter..."
                        onkeyup="if(event.key==='Enter') loadInquiries()" style="width: 250px;">
                </div>
            </div>
        </div>

        <table class="inquiry-table">
            <thead>
                <tr>
                    <th width="50" class="sortable" onclick="handleSort('no')">
                        <div class="header-content">No <span id="sort-no" class="sort-icon">▼</span></div>
                    </th>
                    <th width="80">이미지</th>
                    <th width="120" class="sortable" onclick="handleSort('pm_type')">
                        <div class="header-content">PM 종류 <span id="sort-pm_type" class="sort-icon"></span></div>
                    </th>
                    <th width="100" class="sortable" onclick="handleSort('browser')">
                        <div class="header-content">환경 <span id="sort-browser" class="sort-icon"></span></div>
                    </th>
                    <th width="150" class="sortable" onclick="handleSort('category')">
                        <div class="header-content">구분 <span id="sort-category" class="sort-icon"></span></div>
                    </th>
                    <th class="sortable" onclick="handleSort('project_nm')">
                        <div class="header-content">프로젝트 <span id="sort-project_nm" class="sort-icon"></span></div>
                    </th>
                    <th width="400">문의내용</th>
                    <th width="100" class="sortable" onclick="handleSort('author')">
                        <div class="header-content">작성자 <span id="sort-author" class="sort-icon"></span></div>
                    </th>
                    <th width="120" class="sortable" onclick="handleSort('reg_date')">
                        <div class="header-content">날짜 <span id="sort-reg_date" class="sort-icon"></span></div>
                    </th>
                    <th width="400">답변내용</th>
                    <th width="100" class="sortable" onclick="handleSort('status')">
                        <div class="header-content">상태 <span id="sort-status" class="sort-icon"></span></div>
                    </th>
                </tr>
            </thead>
            <tbody id="inquiryList">
                <!-- Data will be loaded here -->
            </tbody>
        </table>
    </main>

    <!-- 이미지 크게 보기 모달 (디자인 가이드 - 화이트 계열 및 우측 하단 닫기 적용) -->
    <div id="imageModal" class="modal-overlay" onclick="ModalManager.close('imageModal')">
        <div class="modal-content" style="max-width: 960px; width: 92%; padding: 0; overflow: hidden; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff;" onclick="event.stopPropagation()">
            <div class="modal-header" style="padding: 16px 24px; margin-bottom: 0; border-bottom: 1px solid #f1f5f9; background: #fff;">
                <h3 style="color: #1e5149; font-weight: 700; font-size: 16px;">첨부 이미지 확대 보기</h3>
                <span class="modal-close" onclick="ModalManager.close('imageModal')" style="font-size: 24px; color: #94a3b8;">&times;</span>
            </div>
            <div style="padding: 32px; background: #fff; display: flex; justify-content: center; align-items: center; min-height: 300px; max-height: 75vh; overflow: auto;">
                <img id="modalImage" style="max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);">
            </div>
            <div style="padding: 16px 24px; border-top: 1px solid #f1f5f9; text-align: right; background: #fff;">
                <button class="_button-medium" style="background: #1e5149; color: #fff; border: none; padding: 10px 28px; border-radius: 8px; cursor: pointer; transition: background 0.2s;" 
                        onmouseover="this.style.background='#163b36'" onmouseout="this.style.background='#1e5149'"
                        onclick="ModalManager.close('imageModal')">닫기</button>
            </div>
        </div>
    </div>

    <script src="js/common.js"></script>
    <script src="js/inquiries.js"></script>
</body>

</html>