{{--
    공문서 읽기전용 렌더링
    Props:
        $content (array) - approvals.content JSON
--}}
<div class="space-y-4">
    {{-- 미리보기 버튼 --}}
    <div class="flex justify-end gap-2">
        <button type="button" onclick="openOfficialLetterShowPreview()"
                class="px-3 py-1.5 bg-indigo-50 text-indigo-600 hover:bg-indigo-100 border border-indigo-200 rounded-lg text-sm font-medium transition inline-flex items-center gap-1">
            <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
            </svg>
            공문서 미리보기
        </button>
    </div>

    {{-- 문서 정보 --}}
    <div class="border border-gray-200 rounded-lg overflow-hidden">
        <div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-700">문서 정보</h3>
        </div>
        <div class="p-4">
            <div class="grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));">
                <div>
                    <span class="text-xs text-gray-500">문서번호</span>
                    <div class="text-sm font-medium mt-0.5">{{ $content['doc_number'] ?? '-' }}</div>
                </div>
                <div>
                    <span class="text-xs text-gray-500">일자</span>
                    <div class="text-sm font-medium mt-0.5">{{ $content['doc_date'] ?? '-' }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- 수신/참조/제목 --}}
    <div class="border border-gray-200 rounded-lg overflow-hidden">
        <div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-700">수신 정보</h3>
        </div>
        <div class="p-4 space-y-2">
            <div class="grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
                <div>
                    <span class="text-xs text-gray-500">수신</span>
                    <div class="text-sm font-medium mt-0.5">{{ $content['recipient'] ?? '-' }}</div>
                </div>
                @if(!empty($content['reference']))
                <div>
                    <span class="text-xs text-gray-500">참조</span>
                    <div class="text-sm font-medium mt-0.5">{{ $content['reference'] }}</div>
                </div>
                @endif
            </div>
            <div>
                <span class="text-xs text-gray-500">제목</span>
                <div class="text-sm font-semibold mt-0.5">{{ $content['subject'] ?? '-' }}</div>
            </div>
        </div>
    </div>

    {{-- 본문 --}}
    <div class="border border-gray-200 rounded-lg overflow-hidden">
        <div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-700">본문</h3>
        </div>
        <div class="p-4">
            <div class="text-sm text-gray-700 whitespace-pre-wrap leading-relaxed">{{ $content['body'] ?? '' }}</div>
        </div>
    </div>

    {{-- 붙임 --}}
    @if(!empty($content['attachments_desc']))
    <div class="border border-gray-200 rounded-lg overflow-hidden">
        <div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-700">붙임</h3>
        </div>
        <div class="p-4">
            <div class="text-sm text-gray-700 whitespace-pre-wrap">{{ $content['attachments_desc'] }}</div>
        </div>
    </div>
    @endif

    {{-- 발신자 --}}
    <div class="border border-gray-200 rounded-lg overflow-hidden">
        <div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-700">발신자</h3>
        </div>
        <div class="p-4">
            <div class="grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));">
                <div>
                    <span class="text-xs text-gray-500">상호</span>
                    <div class="text-sm font-medium mt-0.5">{{ $content['company_name'] ?? '-' }}</div>
                </div>
                <div>
                    <span class="text-xs text-gray-500">대표이사</span>
                    <div class="text-sm font-medium mt-0.5">{{ $content['ceo_name'] ?? '-' }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- 미리보기 모달 --}}
<div id="official-letter-show-preview-modal" style="display: none;" class="fixed inset-0 z-50">
    <div class="absolute inset-0 bg-black/50" onclick="closeOfficialLetterShowPreview()"></div>
    <div class="relative flex items-center justify-center min-h-full p-4">
        <div class="bg-white rounded-xl shadow-2xl w-full overflow-hidden relative" style="max-width: 780px;">
            <div class="flex items-center justify-between px-5 py-3 border-b border-gray-200 bg-gray-50">
                <h3 class="text-base font-semibold text-gray-800">공문서 미리보기</h3>
                <div class="flex items-center gap-2">
                    <button type="button" onclick="printOfficialLetterShowPreview()"
                            class="px-3 py-1.5 bg-white border border-gray-300 hover:bg-gray-50 rounded-lg text-xs font-medium transition inline-flex items-center gap-1">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                        </svg>
                        인쇄
                    </button>
                    <button type="button" onclick="closeOfficialLetterShowPreview()"
                            class="p-1 text-gray-400 hover:text-gray-600 transition">
                        <svg class="w-5 h-5" 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>
                </div>
            </div>
            <div class="overflow-y-auto" style="max-height: 80vh;">
                <div id="official-letter-show-preview-content" style="padding: 40px 48px; font-family: 'Pretendard', 'Malgun Gothic', sans-serif;"></div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function buildOfficialLetterShowPreviewHtml(data) {
    const bodyHtml = (data.body || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/g, '<br>');
    const attachHtml = (data.attachments_desc || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/g, '<br>');
    return '<div style="text-align:center;margin-bottom:32px;">' +
        '<h1 style="font-size:22px;font-weight:800;margin:0;">' + (data.company_name || '') + '</h1>' +
        '</div>' +
        '<div style="border-bottom:2px solid #333;padding-bottom:16px;margin-bottom:24px;font-size:13px;line-height:2;">' +
        '<div><span style="display:inline-block;width:80px;letter-spacing:12px;font-weight:600;">문서번호</span> : ' + (data.doc_number || '') + '</div>' +
        '<div><span style="display:inline-block;width:80px;letter-spacing:18px;font-weight:600;">일자</span> : ' + (data.doc_date || '') + '</div>' +
        '<div><span style="display:inline-block;width:80px;letter-spacing:18px;font-weight:600;">수신</span> : ' + (data.recipient || '') + '</div>' +
        (data.reference ? '<div><span style="display:inline-block;width:80px;letter-spacing:18px;font-weight:600;">참조</span> : ' + data.reference + '</div>' : '') +
        '<div><span style="display:inline-block;width:80px;letter-spacing:18px;font-weight:600;">제목</span> : <strong>' + (data.subject || '') + '</strong></div>' +
        '</div>' +
        '<div style="font-size:13px;line-height:1.8;margin-bottom:24px;min-height:200px;">' + bodyHtml + '</div>' +
        (data.attachments_desc ? '<div style="font-size:13px;line-height:1.6;margin-bottom:24px;padding-top:12px;border-top:1px solid #ddd;"><strong>붙임 :</strong><br>' + attachHtml + '</div>' : '') +
        '<div style="text-align:center;margin:40px 0 16px;font-size:14px;">' +
        '<span>' + (data.company_name || '') + '</span>&nbsp;&nbsp;&nbsp;&nbsp;' +
        '<span>대표이사&nbsp;&nbsp;&nbsp;' + (data.ceo_name || '') + '</span>&nbsp;&nbsp;' +
        '<span style="color:#999;">[직인날인]</span>' +
        '</div>' +
        '<div style="border-top:1px solid #ccc;padding-top:8px;font-size:10px;color:#888;line-height:1.6;">' +
        (data.company_address ? '<div>' + data.company_address + '</div>' : '') +
        '<div>' +
        (data.phone ? '전화 ' + data.phone : '') +
        (data.fax ? ' / 팩스 ' + data.fax : '') +
        (data.email ? ' / 이메일 ' + data.email : '') +
        '</div></div>';
}
function openOfficialLetterShowPreview() {
    const data = @json($content);
    document.getElementById('official-letter-show-preview-content').innerHTML = buildOfficialLetterShowPreviewHtml(data);
    document.getElementById('official-letter-show-preview-modal').style.display = '';
}
function closeOfficialLetterShowPreview() { document.getElementById('official-letter-show-preview-modal').style.display = 'none'; }
function printOfficialLetterShowPreview() {
    const content = document.getElementById('official-letter-show-preview-content').innerHTML;
    const win = window.open('', '_blank');
    win.document.write('<html><head><title>공문서</title><style>body{font-family:"Pretendard","Malgun Gothic",sans-serif;padding:40px 48px;}@media print{body{padding:20px 30px;}}</style></head><body>' + content + '</body></html>');
    win.document.close();
    win.print();
}
</script>
@endpush
