<?php $CURRENT_SECTION = 'approval';
include '../inc/header.php'; ?>
    <div class="container" style="max-width:1280px; margin-top:24px;">
        <div class="card shadow-sm">
            <div class="card-header d-flex gap-2 align-items-center">
                <strong>결재 현황</strong>
                <select class="form-select form-select-sm" style="width:200px;">
                    <option>LEAVE</option><option>IQC_REPORT</option>
                </select>
                <input class="form-control form-control-sm" style="width:220px;" placeholder="제목/작성자/번호">
                <button class="btn btn-sm btn-outline-secondary">검색</button>
            </div>
            <div class="card-body">
                <table class="table table-hover align-middle text-center">
                    <thead class="table-light"><tr><th>#</th><th>대상</th><th>참조키</th><th>상태</th><th>작성자</th><th>생성일</th><th style="width:120px;">보기</th></tr></thead>
                    <tbody>
                    <tr><td>101</td><td>LEAVE</td><td>5678</td><td><span class="badge bg-warning text-dark">진행중</span></td><td>kevin</td><td>2025-08-01</td>
                        <td><button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#viewModal">상세</button></td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 상세 모달: 진행중 결재선 + 의견 -->
    <div class="modal fade" id="viewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg"><div class="modal-content">
                <div class="modal-header"><h5 class="modal-title">결재 상세</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
                <div class="modal-body">
                    <div class="mb-3">
                        <div class="small text-muted">결재선</div>
                        <ul class="approval-tree">
                            <li><div class="node"><span class="badge bg-dark">루트=문서 포함 승인자</span></div>
                                <ul>
                                    <li><div class="node"><span class="badge bg-secondary">개발팀</span> — <span class="badge bg-success">승인</span></div></li>
                                    <li><div class="node"><span class="badge bg-info text-dark">일반관리자</span> — <span class="badge bg-warning text-dark">대기</span></div></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <label class="form-label">의견</label>
                        <textarea class="form-control" rows="3"></textarea>
                        <div class="mt-2 d-flex gap-2">
                            <button class="btn btn-success">승인</button>
                            <button class="btn btn-danger">반려</button>
                        </div>
                    </div>
                </div>
            </div></div>
    </div>

    <style>
        .approval-tree { list-style:none; padding-left:1rem; }
        .approval-tree .node { padding:.25rem .5rem; border:1px solid #e5e8ef; border-radius:.5rem; display:inline-block; background:#f8fafc; }
        .approval-tree ul { list-style:none; margin-left:1.25rem; padding-left:1rem; border-left:2px dashed #dde3f3; }
        .approval-tree li { margin:.5rem 0; }
    </style>

<?php include '../inc/footer.php'; ?>
