@extends('portal.layout')
@section('title', 'Document Vault')

@section('content')
<div class="report-layout">
    @include('portal.partials.report-sidebar', ['report' => $report])
    <div class="report-content" style="padding:32px 28px;">

        <div style="margin-bottom:28px;">
            <div style="display:inline-flex;align-items:center;gap:6px;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.25);padding:4px 12px;border-radius:20px;font-size:11px;color:#c4b5fd;margin-bottom:14px;letter-spacing:.08em;text-transform:uppercase;">
                <i data-lucide="folder" style="width:12px;height:12px;"></i> Document Vault
            </div>
            <h1 style="font-size:22px;font-weight:700;margin-bottom:6px;">Document Vault</h1>
            <p style="font-size:13px;color:var(--text-secondary);">Store and organize all property documents with AI-powered text extraction, tagging, and full-text search.</p>
        </div>

        @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        {{-- Upload Form --}}
        <div class="card" style="padding:20px;margin-bottom:24px;">
            <div style="font-size:13px;font-weight:600;margin-bottom:16px;">Upload Document</div>
            <form method="POST" action="{{ route('portal.document-vault.upload', $report) }}" enctype="multipart/form-data">
                @csrf
                <div style="display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;">
                    <div>
                        <label class="form-label">File (PDF, Word, Image)</label>
                        <input type="file" name="file" class="form-input" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.tiff" required>
                    </div>
                    <div>
                        <label class="form-label">Document Type</label>
                        <select name="document_type" class="form-input" required>
                            @foreach(\App\Models\DocumentVault::DOCUMENT_TYPES as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary" style="height:38px;">
                        <i data-lucide="upload" style="width:14px;height:14px;"></i> Upload
                    </button>
                </div>
                <div style="margin-top:8px;">
                    <label class="form-label">Notes (optional)</label>
                    <input type="text" name="notes" class="form-input" placeholder="Brief note about this document">
                </div>
            </form>
        </div>

        {{-- Search --}}
        <div class="card" style="padding:16px;margin-bottom:24px;">
            <div style="display:flex;gap:8px;">
                <input type="text" id="doc-search" class="form-input" placeholder="Search documents by content or tags..." style="flex:1;">
                <button onclick="searchDocs()" class="btn btn-secondary" style="height:38px;">
                    <i data-lucide="search" style="width:14px;height:14px;"></i> Search
                </button>
            </div>
            <div id="search-results" style="margin-top:12px;display:none;"></div>
        </div>

        {{-- Document List --}}
        @if($documents->count())
        <div style="display:grid;gap:8px;">
            @foreach($documents as $doc)
            <div class="card" style="padding:14px 16px;display:flex;align-items:center;gap:14px;">
                @php
                    $ext = pathinfo($doc->title, PATHINFO_EXTENSION);
                    $iconColor = match(strtolower($ext)) { 'pdf' => '#ef4444', 'doc','docx' => '#3b82f6', 'jpg','jpeg','png','tiff' => '#22c55e', default => '#64748b' };
                @endphp
                <div style="width:36px;height:36px;background:{{ $iconColor }}15;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i data-lucide="file-text" style="width:16px;height:16px;color:{{ $iconColor }};"></i>
                </div>
                <div style="flex:1;min-width:0;">
                    <div style="font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ $doc->title }}</div>
                    <div style="font-size:11px;color:var(--text-secondary);">
                        {{ \App\Models\DocumentVault::DOCUMENT_TYPES[$doc->document_type] ?? $doc->document_type }}
                        &middot; {{ $doc->created_at->format('M j, Y') }}
                        @if($doc->ai_tags && is_array($doc->ai_tags))
                            @foreach(array_slice($doc->ai_tags, 0, 3) as $tag)
                            <span class="badge badge-blue" style="margin-left:4px;">{{ $tag }}</span>
                            @endforeach
                        @endif
                    </div>
                </div>
                <a href="{{ route('portal.document-vault.download', [$report, $doc->id]) }}" class="btn btn-secondary" style="padding:6px 12px;font-size:11px;">
                    <i data-lucide="download" style="width:12px;height:12px;"></i> Download
                </a>
            </div>
            @endforeach
        </div>
        @else
        <div class="card" style="padding:40px;text-align:center;">
            <i data-lucide="folder-open" style="width:36px;height:36px;color:var(--text-muted);margin-bottom:12px;"></i>
            <div style="font-size:15px;font-weight:600;margin-bottom:6px;">No Documents Yet</div>
            <div style="font-size:13px;color:var(--text-secondary);">Upload property documents to build your digital vault.</div>
        </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
<script>
const docTypeLabels = @json(\App\Models\DocumentVault::DOCUMENT_TYPES);
const downloadBase = `{{ route('portal.document-vault', $report) }}`;

function searchDocs() {
    const q = document.getElementById('doc-search').value.trim();
    if (!q) return;
    const resultsDiv = document.getElementById('search-results');
    resultsDiv.style.display = 'block';
    resultsDiv.innerHTML = '<div style="color:var(--text-muted);font-size:12px;">Searching...</div>';

    fetch(`{{ route('portal.document-vault.search', $report) }}?q=${encodeURIComponent(q)}`)
        .then(r => {
            if (!r.ok) throw new Error('Server error ' + r.status);
            return r.json();
        })
        .then(docs => {
            if (!docs.length) {
                resultsDiv.innerHTML = '<div style="color:var(--text-muted);font-size:12px;">No results found.</div>';
                return;
            }
            resultsDiv.innerHTML = docs.map(d => {
                const typeLabel = docTypeLabels[d.document_type] || d.document_type;
                const tags = (d.ai_tags || []).slice(0, 3).map(t => `<span class="badge badge-blue" style="margin-left:4px;">${t}</span>`).join('');
                return `<div style="display:flex;align-items:center;gap:10px;padding:10px;background:var(--bg);border-radius:6px;margin-bottom:4px;">
                    <div style="flex:1;min-width:0;">
                        <div style="font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${d.title}</div>
                        <div style="font-size:11px;color:var(--text-secondary);">${typeLabel}${tags}</div>
                    </div>
                    <a href="${downloadBase}/${d.id}/download" class="btn btn-secondary" style="padding:4px 10px;font-size:10px;flex-shrink:0;">
                        <i data-lucide="download" style="width:11px;height:11px;"></i> Download
                    </a>
                </div>`;
            }).join('');
            if (typeof lucide !== 'undefined') lucide.createIcons();
        })
        .catch(e => { resultsDiv.innerHTML = `<div style="color:var(--red);font-size:12px;">Search failed: ${e.message}</div>`; });
}
document.getElementById('doc-search').addEventListener('keydown', e => { if (e.key === 'Enter') searchDocs(); });
</script>
@endsection