sam-manage/resources/views/documents/show.blade.php

@extends('layouts.app')

@section('title', '문서 상세')

@section('content')
    <!-- 헤더 -->
    <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">문서 상세</h1>
            <p class="text-sm text-gray-500 mt-1 hidden sm:block">{{ $document->document_no }} - {{ $document->title }}</p>
        </div>
        <div class="flex flex-wrap items-center gap-2 sm:gap-3">
            @if($document->canEdit())
                <a href="{{ route('documents.edit', $document->id) }}"
                   class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    수정
                </a>
            @endif
            @if($document->isPending())
                <button onclick="approveDocument()"
                        class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    승인
                </button>
                <button onclick="showRejectModal()"
                        class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    반려
                </button>
            @endif
            <a href="{{ route('documents.index') }}"
               class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg transition">
                목록
            </a>
        </div>
    </div>

    {{-- 문서 정보 --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- 메인 컨텐츠 --}}
        <div class="lg:col-span-2 space-y-6">
            {{-- 기본 정보 --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-gray-800 mb-4">기본 정보</h2>

                <dl class="grid grid-cols-2 gap-4">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">문서번호</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $document->document_no }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">템플릿</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $document->template->name ?? '-' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">제목</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $document->title }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">상태</dt>
                        <dd class="mt-1">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                @switch($document->status)
                                    @case('DRAFT') bg-gray-100 text-gray-800 @break
                                    @case('PENDING') bg-yellow-100 text-yellow-800 @break
                                    @case('APPROVED') bg-green-100 text-green-800 @break
                                    @case('REJECTED') bg-red-100 text-red-800 @break
                                    @default bg-gray-100 text-gray-800
                                @endswitch
                            ">
                                {{ $document->status_label }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">작성자</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $document->creator->name ?? '-' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">작성일</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $document->created_at?->format('Y-m-d H:i') ?? '-' }}</dd>
                    </div>
                    @if($document->updated_at && $document->updated_at->ne($document->created_at))
                    <div>
                        <dt class="text-sm font-medium text-gray-500">수정자</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $document->updater->name ?? '-' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">수정일</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $document->updated_at?->format('Y-m-d H:i') ?? '-' }}</dd>
                    </div>
                    @endif
                </dl>
            </div>

            {{-- 기본 필드 데이터 --}}
            @if($document->template?->basicFields && $document->template->basicFields->count() > 0)
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ $document->template->title ?? '문서 정보' }}</h2>

                <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    @foreach($document->template->basicFields as $field)
                        @php
                            $fieldData = $document->data->where('field_key', $field->field_key)->first();
                            $value = $fieldData?->field_value ?? '-';
                        @endphp
                        <div class="{{ $field->type === 'textarea' ? 'col-span-2' : '' }}">
                            <dt class="text-sm font-medium text-gray-500">{{ $field->label }}</dt>
                            <dd class="mt-1 text-sm text-gray-900 {{ $field->type === 'textarea' ? 'whitespace-pre-wrap' : '' }}">{{ $value }}</dd>
                        </div>
                    @endforeach
                </dl>
            </div>
            @endif

            {{-- 섹션 데이터 (테이블) --}}
            @if($document->template?->sections && $document->template->sections->count() > 0)
                @foreach($document->template->sections as $section)
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ $section->name }}</h2>
                    <p class="text-sm text-gray-500">테이블 형태의 데이터 표시는 추후 구현 예정입니다.</p>
                </div>
                @endforeach
            @endif

            {{-- 첨부파일 --}}
            @if($document->attachments && $document->attachments->count() > 0)
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-gray-800 mb-4">첨부파일</h2>

                <ul class="divide-y divide-gray-200">
                    @foreach($document->attachments as $attachment)
                    <li class="py-3 flex items-center justify-between">
                        <div class="flex items-center">
                            <svg class="w-5 h-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                            </svg>
                            <div>
                                <p class="text-sm font-medium text-gray-900">{{ $attachment->file->original_name ?? '파일명 없음' }}</p>
                                <p class="text-xs text-gray-500">
                                    {{ $attachment->type_label }} ·
                                    {{ $attachment->file ? number_format($attachment->file->size / 1024, 1) . ' KB' : '-' }}
                                </p>
                            </div>
                        </div>
                        @if($attachment->file)
                        <a href="{{ route('files.download', $attachment->file->id) }}"
                           class="text-sm text-blue-600 hover:text-blue-800">
                            다운로드
                        </a>
                        @endif
                    </li>
                    @endforeach
                </ul>
            </div>
            @endif
        </div>

        {{-- 사이드바 --}}
        <div class="space-y-6">
            {{-- 결재 현황 --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-gray-800 mb-4">결재 현황</h2>

                @if($document->approvals && $document->approvals->count() > 0)
                <ol class="relative border-l border-gray-200 ml-3">
                    @foreach($document->approvals as $approval)
                    <li class="mb-6 ml-6">
                        <span class="absolute flex items-center justify-center w-6 h-6 rounded-full -left-3 ring-4 ring-white
                            @if($approval->status === 'APPROVED') bg-green-500
                            @elseif($approval->status === 'REJECTED') bg-red-500
                            @elseif($approval->status === 'PENDING') bg-yellow-500
                            @else bg-gray-300
                            @endif">
                            @if($approval->status === 'APPROVED')
                                <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                            @elseif($approval->status === 'REJECTED')
                                <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                </svg>
                            @else
                                <span class="text-white text-xs font-bold">{{ $approval->step }}</span>
                            @endif
                        </span>
                        <div>
                            <h3 class="text-sm font-medium text-gray-900">
                                {{ $approval->role }}
                                <span class="text-xs text-gray-400 ml-1">
                                    ({{ $approval->status_label }})
                                </span>
                            </h3>
                            <p class="text-xs text-gray-500">{{ $approval->user->name ?? '미지정' }}</p>
                            @if($approval->acted_at)
                            <p class="text-xs text-gray-400 mt-1">{{ $approval->acted_at->format('Y-m-d H:i') }}</p>
                            @endif
                            @if($approval->comment)
                            <p class="text-xs text-gray-600 mt-1 bg-gray-50 p-2 rounded">{{ $approval->comment }}</p>
                            @endif
                        </div>
                    </li>
                    @endforeach
                </ol>
                @else
                <p class="text-sm text-gray-500">결재선이 설정되지 않았습니다.</p>
                @endif
            </div>

            {{-- 문서 이력 --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-gray-800 mb-4">문서 이력</h2>
                <p class="text-sm text-gray-500">문서 이력 기능은 추후 구현 예정입니다.</p>
            </div>
        </div>
    </div>
{{-- 반려 사유 모달 --}}
@if($document->isPending())
<div id="rejectModal" class="hidden fixed inset-0 bg-gray-600/50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">문서 반려</h3>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">반려 사유 <span class="text-red-500">*</span></label>
            <textarea id="rejectComment" rows="4" required
                      class="w-full rounded-lg border-gray-300 text-sm focus:border-red-500 focus:ring-red-500"
                      placeholder="반려 사유를 입력하세요"></textarea>
        </div>
        <div class="flex justify-end gap-3">
            <button onclick="closeRejectModal()"
                    class="px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200">
                취소
            </button>
            <button onclick="rejectDocument()"
                    class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700">
                반려
            </button>
        </div>
    </div>
</div>
@endif

@endsection

@push('scripts')
<script>
@if($document->isPending())
window.approveDocument = function() {
    if (!confirm('이 문서를 승인하시겠습니까?')) return;

    fetch('/api/admin/documents/{{ $document->id }}/approve', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
        },
        body: JSON.stringify({ comment: '' })
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            showToast(result.message, 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showToast(result.message || '오류가 발생했습니다.', 'error');
        }
    })
    .catch(error => {
        console.error('Approve error:', error);
        showToast('승인 중 오류가 발생했습니다.', 'error');
    });
};

window.showRejectModal = function() {
    document.getElementById('rejectModal').classList.remove('hidden');
};

window.closeRejectModal = function() {
    document.getElementById('rejectModal').classList.add('hidden');
    document.getElementById('rejectComment').value = '';
};

window.rejectDocument = function() {
    const comment = document.getElementById('rejectComment').value.trim();
    if (!comment) {
        showToast('반려 사유를 입력해주세요.', 'error');
        return;
    }

    fetch('/api/admin/documents/{{ $document->id }}/reject', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
        },
        body: JSON.stringify({ comment: comment })
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            showToast(result.message, 'success');
            closeRejectModal();
            setTimeout(() => location.reload(), 1000);
        } else {
            showToast(result.message || '오류가 발생했습니다.', 'error');
        }
    })
    .catch(error => {
        console.error('Reject error:', error);
        showToast('반려 중 오류가 발생했습니다.', 'error');
    });
};
@endif
</script>
@endpush