sam-manage/resources/views/approvals/drafts.blade.php

@extends('layouts.app')

@section('title', '기안함')

@section('content')
    <!-- 페이지 헤더 -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
        <h1 class="text-2xl font-bold text-gray-800">기안함</h1>
        <a href="{{ route('approvals.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition text-center w-full sm:w-auto">
            + 새 기안
        </a>
    </div>

    <!-- 필터 영역 -->
    <x-filter-collapsible id="filterForm">
        <form id="filterForm" class="flex flex-wrap gap-2 sm:gap-4">
            <div class="flex-1 min-w-0 w-full sm:w-auto">
                <input type="text" name="search" placeholder="제목, 문서번호 검색..."
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="w-full sm:w-36">
                <select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">전체 상태</option>
                    <option value="draft">임시저장</option>
                    <option value="pending">진행</option>
                    <option value="approved">완료</option>
                    <option value="rejected">반려</option>
                    <option value="cancelled">회수</option>
                </select>
            </div>
            <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition w-full sm:w-auto">
                검색
            </button>
        </form>
    </x-filter-collapsible>

    <!-- 테이블 영역 -->
    <div id="approval-table" class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="flex justify-center items-center p-12">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
        </div>
    </div>

    <!-- 페이지네이션 -->
    <div id="pagination-area" class="mt-4"></div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    loadDrafts();

    document.getElementById('filterForm').addEventListener('submit', function(e) {
        e.preventDefault();
        loadDrafts();
    });
});

function loadDrafts(page = 1) {
    const form = document.getElementById('filterForm');
    const params = new URLSearchParams(new FormData(form));
    params.set('page', page);
    params.set('per_page', 15);

    fetch(`/api/admin/approvals/drafts?${params}`, {
        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    })
    .then(r => r.json())
    .then(data => {
        renderTable(data.data || [], data);
    })
    .catch(() => {
        document.getElementById('approval-table').innerHTML = '<div class="p-8 text-center text-gray-500">데이터를 불러올 수 없습니다.</div>';
    });
}

function renderTable(items, pagination) {
    const container = document.getElementById('approval-table');

    if (!items.length) {
        container.innerHTML = '<div class="p-8 text-center text-gray-500">기안 문서가 없습니다.</div>';
        document.getElementById('pagination-area').innerHTML = '';
        return;
    }

    const statusBadge = (status) => {
        const map = {
            draft: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700">임시저장</span>',
            pending: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">진행</span>',
            approved: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">완료</span>',
            rejected: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">반려</span>',
            cancelled: '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">회수</span>',
        };
        return map[status] || status;
    };

    let html = `<div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">문서번호</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">제목</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">양식</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">상태</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">긴급</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">작성일</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">`;

    items.forEach(item => {
        const createdAt = item.created_at ? new Date(item.created_at).toLocaleDateString('ko-KR') : '-';
        const urgent = item.is_urgent ? '<span class="text-red-500 font-bold text-xs">긴급</span>' : '';
        const url = item.status === 'draft' || item.status === 'rejected'
            ? `/approval-mgmt/${item.id}/edit`
            : `/approval-mgmt/${item.id}`;

        html += `<tr class="hover:bg-gray-50 cursor-pointer" onclick="location.href='${url}'">
            <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">${item.document_number || '-'}</td>
            <td class="px-4 py-3 text-sm text-gray-800 font-medium">${item.title || '-'}</td>
            <td class="px-4 py-3 text-sm text-gray-600">${item.form?.name || '-'}</td>
            <td class="px-4 py-3 text-center">${statusBadge(item.status)}</td>
            <td class="px-4 py-3 text-center">${urgent}</td>
            <td class="px-4 py-3 text-sm text-gray-500 whitespace-nowrap">${createdAt}</td>
        </tr>`;
    });

    html += '</tbody></table></div>';
    container.innerHTML = html;

    // 페이지네이션
    renderPagination(pagination);
}

function renderPagination(data) {
    const area = document.getElementById('pagination-area');
    if (!data.last_page || data.last_page <= 1) {
        area.innerHTML = '';
        return;
    }

    let html = '<div class="flex justify-center gap-1">';
    for (let i = 1; i <= data.last_page; i++) {
        const active = i === data.current_page ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-100';
        html += `<button onclick="loadDrafts(${i})" class="px-3 py-1 rounded border text-sm ${active}">${i}</button>`;
    }
    html += '</div>';
    area.innerHTML = html;
}

function confirmDelete(id, title) {
    if (!confirm(`"${title}" 문서를 삭제하시겠습니까?`)) return;

    fetch(`/api/admin/approvals/${id}`, {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showToast(data.message, 'success');
            loadDrafts();
        } else {
            showToast(data.message, 'error');
        }
    });
}
</script>
@endpush