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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Dell iDRAC 멀티 서버 펌웨어 관리</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/idrac_style.css') }}">
</head>

<body>
    <div class="container">
        <header>
            <h1>🖥️ Dell iDRAC 멀티 서버 펌웨어 관리</h1>
            <p class="subtitle">납품 전 펌웨어 일괄 업데이트 시스템 - 버전 비교 기능</p>
        </header>

        <!-- 탭 메뉴 -->
        <div class="tab-menu">
            <button class="tab-button active" onclick="showTab('servers')">서버 관리</button>
            <button class="tab-button" onclick="showTab('versions')">펌웨어 버전 관리</button>
            <button class="tab-button" onclick="showTab('comparison')">버전 비교 결과</button>
        </div>

        <!-- 서버 관리 탭 -->
        <div id="servers-tab" class="tab-content active">
            <!-- 서버 관리 섹션 -->
            <section class="card">
                <div class="card-header">
                    <h2>📋 서버 관리</h2>
                    <div class="header-actions">
                        <button onclick="showAddServerModal()" class="btn btn-primary">+ 서버 추가</button>
                        <button onclick="refreshServers()" class="btn btn-info">🔄 새로고침</button>
                    </div>
                </div>

                <!-- 그룹 필터 -->
                <div class="filter-group">
                    <label>그룹:</label>
                    <select id="group-filter" onchange="filterByGroup()">
                        <option value="all">전체</option>
                    </select>
                    <span id="server-count" class="count-badge">0대</span>
                </div>

                <!-- 서버 목록 테이블 -->
                <div class="table-container">
                    <table class="server-table" id="server-table">
                        <thead>
                            <tr>
                                <th width="40"><input type="checkbox" id="select-all" onchange="toggleSelectAll()"></th>
                                <th>서버명</th>
                                <th>IP 주소</th>
                                <th>그룹</th>
                                <th>상태</th>
                                <th>BIOS 버전</th>
                                <th>업데이트 상태</th>
                                <th width="150">작업</th>
                            </tr>
                        </thead>
                        <tbody id="server-list">
                            <tr>
                                <td colspan="8" class="empty-message">등록된 서버가 없습니다</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 선택 작업 -->
                <div class="bulk-actions">
                    <span id="selected-count">선택: 0대</span>
                    <button onclick="testSelectedConnections()" class="btn btn-info">연결 테스트</button>
                    <button onclick="compareSelectedFirmware()" class="btn btn-warning">버전 비교</button>
                    <button onclick="showUploadModal()" class="btn btn-primary">펌웨어 업로드</button>
                    <button onclick="rebootSelected()" class="btn btn-danger">재부팅</button>
                </div>
            </section>

            <!-- 업로드 진행 상황 -->
            <section class="card" id="upload-progress-section" style="display: none;">
                <h2>📊 업로드 진행 상황</h2>
                <div id="upload-progress-list"></div>
                <div class="progress-summary" id="progress-summary"></div>
            </section>
        </div>

        <!-- 펌웨어 버전 관리 탭 -->
        <div id="versions-tab" class="tab-content">
            <section class="card">
                <div class="card-header">
                    <h2>📦 펌웨어 최신 버전 관리</h2>
                    <div class="header-actions">
                        <button onclick="syncDellCatalog('PowerEdge R750')" class="btn btn-success">🔄 Dell에서 버전
                            가져오기</button>
                        <button onclick="syncFromDRM()" class="btn btn-info">📁 DRM에서 가져오기</button>
                        <button onclick="showAddVersionModal()" class="btn btn-primary">+ 버전 추가</button>
                    </div>
                </div>

                <div class="table-container">
                    <table class="server-table">
                        <thead>
                            <tr>
                                <th>컴포넌트</th>
                                <th>최신 버전</th>
                                <th>서버 모델</th>
                                <th>릴리즈 날짜</th>
                                <th>중요</th>
                                <th width="150">작업</th>
                            </tr>
                        </thead>
                        <tbody id="version-list">
                            <tr>
                                <td colspan="6" class="empty-message">등록된 버전 정보가 없습니다</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </section>
        </div>

        <!-- 버전 비교 결과 탭 -->
        <div id="comparison-tab" class="tab-content">
            <section class="card">
                <div class="card-header">
                    <h2>🔍 펌웨어 버전 비교 결과</h2>
                    <button onclick="compareSelectedFirmware()" class="btn btn-primary">🔄 다시 비교</button>
                </div>

                <!-- 로딩 상태 -->
                <div id="comparison-loading" style="display: none;">
                    <div class="loading-spinner"></div>
                    <p>버전 비교 중...</p>
                </div>

                <!-- 비교 결과 -->
                <div id="comparison-result">
                    <div class="info-text">
                        <p><strong>📋 사용 방법:</strong></p>
                        <ol style="margin-top: 10px; margin-left: 20px; line-height: 1.8;">
                            <li>"서버 관리" 탭에서 비교할 서버를 선택하세요</li>
                            <li>"버전 비교" 버튼을 클릭하세요</li>
                            <li>현재 설치된 펌웨어 버전과 최신 버전을 자동으로 비교합니다</li>
                            <li>업데이트가 필요한 컴포넌트를 확인할 수 있습니다</li>
                        </ol>
                    </div>
                </div>
            </section>
        </div>

        <footer>
            <p>Dell iDRAC 멀티 서버 펌웨어 관리 시스템 - 버전 자동 비교</p>
        </footer>
    </div>

    <!-- 서버 추가 모달 -->
    <div id="add-server-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>서버 추가</h3>
                <span class="close" onclick="closeAddServerModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="server-name">서버명 *</label>
                    <input type="text" id="server-name" placeholder="예: Server-01">
                </div>
                <div class="form-group">
                    <label for="server-ip">iDRAC IP *</label>
                    <input type="text" id="server-ip" placeholder="192.168.1.100">
                </div>
                <div class="form-group">
                    <label for="server-username">사용자명</label>
                    <input type="text" id="server-username" value="root">
                </div>
                <div class="form-group">
                    <label for="server-password">비밀번호 *</label>
                    <input type="password" id="server-password">
                </div>
                <div class="form-group">
                    <label for="server-group">그룹</label>
                    <input type="text" id="server-group" placeholder="예: 삼성전자 납품">
                </div>
                <div class="form-group">
                    <label for="server-model">모델</label>
                    <input type="text" id="server-model" placeholder="예: PowerEdge R750">
                </div>
            </div>
            <div class="modal-footer">
                <button onclick="closeAddServerModal()" class="btn btn-secondary">취소</button>
                <button onclick="addServer()" class="btn btn-primary">추가</button>
            </div>
        </div>
    </div>

    <!-- 버전 추가 모달 -->
    <div id="add-version-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>펌웨어 최신 버전 추가</h3>
                <span class="close" onclick="closeAddVersionModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="version-component">컴포넌트명 *</label>
                    <input type="text" id="version-component" placeholder="예: BIOS">
                </div>
                <div class="form-group">
                    <label for="version-latest">최신 버전 *</label>
                    <input type="text" id="version-latest" placeholder="예: 2.15.0">
                </div>
                <div class="form-group">
                    <label for="version-model">서버 모델 (선택)</label>
                    <input type="text" id="version-model" placeholder="예: PowerEdge R750 (비우면 모든 모델)">
                </div>
                <div class="form-group">
                    <label for="version-vendor">벤더</label>
                    <input type="text" id="version-vendor" placeholder="예: Dell">
                </div>
                <div class="form-group">
                    <label for="version-release-date">릴리즈 날짜</label>
                    <input type="date" id="version-release-date">
                </div>
                <div class="form-group">
                    <label for="version-download-url">다운로드 URL</label>
                    <input type="text" id="version-download-url" placeholder="DUP 파일 다운로드 링크">
                </div>
                <div class="form-group">
                    <label for="version-notes">비고</label>
                    <textarea id="version-notes" rows="3" placeholder="버전 변경 사항 등"></textarea>
                </div>
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="version-critical">
                        중요 업데이트
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button onclick="closeAddVersionModal()" class="btn btn-secondary">취소</button>
                <button onclick="addFirmwareVersion()" class="btn btn-primary">추가</button>
            </div>
        </div>
    </div>

    <!-- 펌웨어 업로드 모달 -->
    <div id="upload-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>펌웨어 업로드</h3>
                <span class="close" onclick="closeUploadModal()">&times;</span>
            </div>
            <div class="modal-body">
                <p class="warning-text">⚠️ 선택한 서버에 펌웨어를 일괄 업로드합니다</p>
                <div class="form-group">
                    <label>선택한 서버: <strong id="upload-server-count">0대</strong></label>
                </div>
                <div class="form-group">
                    <label for="firmware-file">DUP 파일 선택 *</label>
                    <input type="file" id="firmware-file" accept=".exe,.bin">
                </div>
            </div>
            <div class="modal-footer">
                <button onclick="closeUploadModal()" class="btn btn-secondary">취소</button>
                <button onclick="startMultiUpload()" class="btn btn-primary">업로드 시작</button>
            </div>
        </div>
    </div>
    <section class="card" id="result-section" style="display:none;">
        <div id="result-content"></div>
    </section>

    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
    <script src="{{ url_for('static', filename='js/idrac_main.js') }}"></script>
</body>

</html>