sam-manage/resources/views/lab/ai/work-memo-summary.blade.php

@extends('layouts.app')

@section('title', '업무협의록 AI 요약')

@push('styles')
<style>
    .upload-container { max-width: 900px; margin: 0 auto; }

    .drop-zone {
        border: 2px dashed #d1d5db;
        border-radius: 12px;
        padding: 48px 24px;
        text-align: center;
        transition: all 0.3s ease;
        background: #f9fafb;
        cursor: pointer;
    }

    .drop-zone:hover, .drop-zone.dragover {
        border-color: #0891b2;
        background: #ecfeff;
    }

    .drop-zone.uploading {
        border-color: #3b82f6;
        background: #eff6ff;
        cursor: not-allowed;
    }

    .drop-zone-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
        color: #9ca3af;
    }

    .drop-zone.dragover .drop-zone-icon { color: #0891b2; }

    .file-info {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: #f3f4f6;
        border-radius: 8px;
        margin-top: 16px;
    }

    .file-icon { width: 40px; height: 40px; color: #0891b2; }

    .spinner {
        width: 24px;
        height: 24px;
        border: 3px solid #e5e7eb;
        border-top-color: #0891b2;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
    }
    .status-waiting { background: #f1f5f9; color: #64748b; }
    .status-processing { background: #dbeafe; color: #1d4ed8; }
    .status-completed { background: #dcfce7; color: #16a34a; }
    .status-error { background: #fee2e2; color: #dc2626; }

    .meeting-card {
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .meeting-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .accordion-header { cursor: pointer; user-select: none; }
    .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
    .accordion-content.open { max-height: 500px; }
    .accordion-icon { transition: transform 0.3s ease; }
    .accordion-icon.open { transform: rotate(180deg); }

    .info-box {
        background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
        border: 1px solid #22d3ee;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 24px;
    }
</style>
@endpush

@section('content')
<div class="upload-container">
    {{-- 헤더 --}}
    <div class="text-center mb-8">
        <h1 class="text-2xl font-bold text-gray-800 mb-2">업무협의록 AI 요약</h1>
        <p class="text-gray-500">고객사 미팅 녹음을 업로드하면 AI가 업무 협의 내용을 정리합니다</p>
    </div>

    {{-- 안내 박스 --}}
    <div class="info-box">
        <div class="flex items-start gap-3">
            <svg class="w-6 h-6 text-cyan-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div class="text-sm text-cyan-800">
                <p class="font-semibold mb-1">업무협의록 전용 AI 요약</p>
                <p>고객 요구사항, 합의 사항, 후속 조치(To-Do) 등 업무 협의에 특화된 구조로 정리됩니다.</p>
            </div>
        </div>
    </div>

    {{-- 업로드 섹션 --}}
    <div class="bg-white rounded-xl shadow-md mb-8 p-6">
        <form id="uploadForm" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="summary_type" value="work-memo">

            {{-- 제목 입력 --}}
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">협의록 제목</label>
                <input type="text" name="title" id="titleInput"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                    placeholder="예: OO기업 킥오프 미팅, XX프로젝트 요구사항 협의">
            </div>

            {{-- 파일 드롭존 --}}
            <div class="drop-zone" id="dropZone" onclick="document.getElementById('fileInput').click()">
                <svg class="drop-zone-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                </svg>
                <p class="text-lg font-medium text-gray-700 mb-2">파일을 드래그하거나 클릭하여 업로드</p>
                <p class="text-sm text-gray-500">지원 형식: WebM, WAV, MP3, OGG, M4A, MP4 (최대 100MB)</p>
                <input type="file" name="audio_file" id="fileInput" class="hidden"
                    accept=".webm,.wav,.mp3,.ogg,.m4a,.mp4,audio/*">
            </div>

            {{-- 선택된 파일 정보 --}}
            <div class="file-info hidden" id="fileInfo">
                <svg class="file-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
                </svg>
                <div class="flex-1 min-w-0">
                    <p class="font-medium text-gray-800 truncate" id="fileName"></p>
                    <p class="text-sm text-gray-500" id="fileSize"></p>
                </div>
                <button type="button" class="text-gray-400 hover:text-gray-600" onclick="clearFile()">
                    <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>

            {{-- 업로드 버튼 --}}
            <button type="submit" id="uploadBtn"
                class="w-full mt-6 py-3 px-6 bg-cyan-600 hover:bg-cyan-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors"
                disabled>
                <span id="uploadBtnText">파일을 선택해주세요</span>
                <span id="uploadBtnSpinner" class="hidden inline-flex items-center">
                    <div class="spinner mr-2"></div>
                    처리 중...
                </span>
            </button>
        </form>
    </div>

    {{-- 처리 중 상태 --}}
    <div class="bg-white rounded-xl shadow-md mb-8 p-8 hidden" id="processingCard">
        <div class="flex flex-col items-center text-center">
            <div class="spinner" style="width:40px;height:40px;border-width:4px;"></div>
            <h3 class="text-lg font-semibold mt-4 text-gray-800">AI가 업무협의록을 작성하고 있습니다</h3>
            <p class="text-sm text-gray-500 mt-2" id="processingStatus">음성을 텍스트로 변환 중...</p>
            <div class="w-56 h-2 bg-gray-200 rounded-full mt-4 overflow-hidden">
                <div class="h-full bg-cyan-500 rounded-full transition-all" id="progressBar" style="width: 0%"></div>
            </div>
        </div>
    </div>

    {{-- 결과 섹션 --}}
    <div class="hidden" id="resultSection">
        <div class="bg-white rounded-xl shadow-md mb-6 p-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
                    <svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                    </svg>
                    업무협의록 AI 요약
                </h2>
                <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors" onclick="resetForm()">새 파일 업로드</button>
            </div>

            {{-- 요약 내용 --}}
            <div class="bg-cyan-50 rounded-lg p-4 mb-4">
                <h3 class="font-semibold text-gray-800 mb-2">협의록 요약</h3>
                <div id="summaryContent" class="text-gray-700 prose max-w-none"></div>
            </div>

            {{-- 원본 텍스트 (아코디언) --}}
            <div class="bg-gray-50 rounded-lg overflow-hidden">
                <div class="accordion-header flex items-center justify-between p-4" onclick="toggleAccordion(this)">
                    <span class="font-medium text-gray-800">원본 녹취록 보기</span>
                    <svg class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="accordion-content">
                    <div id="transcriptContent" class="px-4 pb-4 text-sm text-gray-600 whitespace-pre-wrap"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- 최근 협의록 목록 --}}
    <div class="bg-white rounded-xl shadow-md p-6">
        <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
            <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
            </svg>
            최근 협의록
        </h2>

        <div id="meetingList" hx-get="{{ route('api.admin.meeting-logs.index') }}" hx-trigger="load" hx-swap="innerHTML">
            <div class="flex justify-center py-8">
                <div class="spinner"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');
const fileInfo = document.getElementById('fileInfo');
const uploadBtn = document.getElementById('uploadBtn');
const uploadForm = document.getElementById('uploadForm');

// 드래그 앤 드롭 이벤트
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, (e) => {
        e.preventDefault();
        e.stopPropagation();
    });
});

['dragenter', 'dragover'].forEach(eventName => {
    dropZone.addEventListener(eventName, () => dropZone.classList.add('dragover'));
});

['dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, () => dropZone.classList.remove('dragover'));
});

dropZone.addEventListener('drop', (e) => {
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        fileInput.files = files;
        showFileInfo(files[0]);
    }
});

// 파일 선택 이벤트
fileInput.addEventListener('change', (e) => {
    if (e.target.files.length > 0) {
        showFileInfo(e.target.files[0]);
    }
});

// 파일 정보 표시
function showFileInfo(file) {
    document.getElementById('fileName').textContent = file.name;
    document.getElementById('fileSize').textContent = formatFileSize(file.size);
    fileInfo.classList.remove('hidden');
    uploadBtn.disabled = false;
    document.getElementById('uploadBtnText').textContent = '협의록 생성하기';
}

// 파일 크기 포맷
function formatFileSize(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
}

// 파일 클리어
function clearFile() {
    fileInput.value = '';
    fileInfo.classList.add('hidden');
    uploadBtn.disabled = true;
    document.getElementById('uploadBtnText').textContent = '파일을 선택해주세요';
}

// 폼 리셋
function resetForm() {
    clearFile();
    document.getElementById('titleInput').value = '';
    document.getElementById('resultSection').classList.add('hidden');
    document.getElementById('processingCard').classList.add('hidden');
    dropZone.classList.remove('uploading');
}

// 아코디언 토글
function toggleAccordion(header) {
    const content = header.nextElementSibling;
    const icon = header.querySelector('.accordion-icon');
    content.classList.toggle('open');
    icon.classList.toggle('open');
}

// 목록 새로고침
async function refreshMeetingList() {
    try {
        const response = await fetch('{{ route("api.admin.meeting-logs.index") }}', {
            headers: {
                'HX-Request': 'true',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });
        const html = await response.text();
        document.getElementById('meetingList').innerHTML = html;
    } catch (error) {
        console.error('목록 새로고침 실패:', error);
    }
}

// 폼 제출
uploadForm.addEventListener('submit', async (e) => {
    e.preventDefault();

    const formData = new FormData(uploadForm);

    // UI 업데이트
    dropZone.classList.add('uploading');
    uploadBtn.disabled = true;
    document.getElementById('uploadBtnText').classList.add('hidden');
    document.getElementById('uploadBtnSpinner').classList.remove('hidden');
    document.getElementById('processingCard').classList.remove('hidden');
    document.getElementById('progressBar').style.width = '10%';
    document.getElementById('processingStatus').textContent = '파일 업로드 중...';

    try {
        document.getElementById('progressBar').style.width = '30%';
        document.getElementById('processingStatus').textContent = '음성 인식 중...';

        const response = await fetch('{{ route("api.admin.meeting-logs.upload") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: formData
        });

        document.getElementById('progressBar').style.width = '90%';
        document.getElementById('processingStatus').textContent = 'AI 협의록 생성 중...';

        const result = await response.json();

        document.getElementById('progressBar').style.width = '100%';

        if (result.success) {
            showResult(result.data);
            showToast('업무협의록이 생성되었습니다.', 'success');
        } else {
            throw new Error(result.message || '처리 실패');
        }
    } catch (error) {
        console.error('업로드 실패:', error);
        showToast('처리 중 오류가 발생했습니다: ' + error.message, 'error');
        resetUploadUI();
    }
});

// 업로드 UI 리셋
function resetUploadUI() {
    dropZone.classList.remove('uploading');
    uploadBtn.disabled = false;
    document.getElementById('uploadBtnText').classList.remove('hidden');
    document.getElementById('uploadBtnSpinner').classList.add('hidden');
    document.getElementById('processingCard').classList.add('hidden');
}

// 결과 표시
function showResult(meeting) {
    document.getElementById('summaryContent').innerHTML = marked.parse(meeting.summary_text || '요약 내용이 없습니다.');
    document.getElementById('transcriptContent').textContent = meeting.transcript_text || '';

    document.getElementById('processingCard').classList.add('hidden');
    document.getElementById('resultSection').classList.remove('hidden');
    resetUploadUI();

    // 목록 새로고침
    refreshMeetingList();
}

// 협의록 삭제
async function deleteMeeting(id) {
    showDeleteConfirm('이 협의록', async () => {
        try {
            const response = await fetch(`/api/meeting-logs/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });

            const result = await response.json();
            if (result.success) {
                showToast('삭제되었습니다.', 'success');
                refreshMeetingList();
            } else {
                showToast(result.message || '삭제 실패', 'error');
            }
        } catch (error) {
            console.error('삭제 실패:', error);
            showToast('삭제 중 오류가 발생했습니다.', 'error');
        }
    });
}

// 협의록 상세 보기
async function viewMeeting(id) {
    try {
        const response = await fetch(`/api/meeting-logs/${id}/summary`, {
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        const result = await response.json();
        if (result.success) {
            document.getElementById('summaryContent').innerHTML = marked.parse(result.data.summary || '요약 내용이 없습니다.');
            document.getElementById('transcriptContent').textContent = result.data.transcript || '';
            document.getElementById('resultSection').classList.remove('hidden');
        }
    } catch (error) {
        console.error('조회 실패:', error);
        showToast('조회 중 오류가 발생했습니다.', 'error');
    }
}
</script>

{{-- Markdown 파서 --}}
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
@endpush