@extends('investor.layouts.app')
@php $pageTitle = 'Documents Vault'; @endphp

@section('content')
<div class="mb-6">
    <h2 class="text-2xl font-bold text-gray-900" style="font-family:'Playfair Display',serif">Documents Vault</h2>
    <p class="text-gray-500 text-sm mt-0.5">All your investment documents — securely stored and always accessible.</p>
</div>

@if($documents->isEmpty())
    <div class="section-card text-center py-16 px-4">
        <svg class="w-14 h-14 mx-auto mb-4 text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        <p class="text-gray-400 font-semibold mb-1">No documents yet</p>
        <p class="text-gray-400 text-xs max-w-sm mx-auto">Your advisor will upload agreements, receipts, and registry documents here once available.</p>
    </div>
@else
    @foreach($types as $typeKey => $typeLabel)
        @if(isset($documents[$typeKey]) && $documents[$typeKey]->count())
            <div class="section-card mb-5">
                <div class="section-card-header">
                    <span class="section-card-title">{{ $typeLabel }}</span>
                    <span class="badge badge-gray">{{ $documents[$typeKey]->count() }}</span>
                </div>
                <div class="section-card-body">
                    <div class="grid sm:grid-cols-2 gap-3">
                        @foreach($documents[$typeKey] as $doc)
                            <a href="{{ route('investor.documents.download', $doc) }}"
                               class="flex items-center gap-3 p-3.5 border border-gray-100 rounded-2xl hover:border-yellow-200 hover:bg-yellow-50 transition-all group"
                               style="text-decoration:none;color:inherit">
                                <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" style="background:#fee2e2">
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="#dc2626"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="font-semibold text-sm text-gray-900 truncate">{{ $doc->title }}</p>
                                    <p class="text-xs text-gray-400">
                                        @if($doc->document_date) {{ $doc->document_date->format('d M Y') }} · @endif
                                        @if($doc->investment) {{ Str::limit($doc->investment->property->title ?? '', 30) }} @endif
                                    </p>
                                </div>
                                <svg class="w-4 h-4 text-gray-300 group-hover:text-yellow-500 flex-shrink-0 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    @endforeach
@endif
@endsection