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

@section('content')

{{-- Welcome --}}
<div class="mb-6">
    <h2 class="text-2xl font-bold text-gray-900" style="font-family:'Playfair Display',serif">
        Welcome back, {{ auth()->user()->first_name }}
    </h2>
    <p class="text-gray-500 text-sm mt-0.5">Here's your investment portfolio at a glance.</p>
</div>

{{-- ── Stats Row ── --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="stat-card">
        <div class="stat-card-label mb-2">Total Invested</div>
        <div class="stat-card-value">
            @if($totalInvested >= 10000000)
                ₹{{ number_format($totalInvested/10000000, 2) }} Cr
            @elseif($totalInvested >= 100000)
                ₹{{ number_format($totalInvested/100000, 2) }} L
            @else
                ₹{{ number_format($totalInvested) }}
            @endif
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-card-label mb-2">Current Value</div>
        <div class="stat-card-value" style="color:{{ $growthPercent >= 0 ? '#059669' : '#dc2626' }}">
            @if($totalCurrentValue >= 10000000)
                ₹{{ number_format($totalCurrentValue/10000000, 2) }} Cr
            @elseif($totalCurrentValue >= 100000)
                ₹{{ number_format($totalCurrentValue/100000, 2) }} L
            @else
                ₹{{ number_format($totalCurrentValue) }}
            @endif
        </div>
        <div class="stat-card-change" style="color:{{ $growthPercent >= 0 ? '#059669' : '#dc2626' }}">
            {{ $growthPercent >= 0 ? '▲' : '▼' }} {{ abs($growthPercent) }}%
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-card-label mb-2">Total Gain</div>
        <div class="stat-card-value" style="color:{{ $totalGrowth >= 0 ? '#059669' : '#dc2626' }}">
            @if(abs($totalGrowth) >= 100000)
                {{ $totalGrowth >= 0 ? '+' : '-' }}₹{{ number_format(abs($totalGrowth)/100000, 2) }} L
            @else
                {{ $totalGrowth >= 0 ? '+' : '' }}₹{{ number_format($totalGrowth) }}
            @endif
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-card-label mb-2">Active Investments</div>
        <div class="stat-card-value">{{ $investments->where('status','active')->count() }}</div>
        <div class="text-xs text-gray-400 mt-1">{{ $investments->count() }} total</div>
    </div>
</div>

<div class="grid lg:grid-cols-3 gap-5">

    {{-- ── Portfolio Summary ── --}}
    <div class="lg:col-span-2 section-card">
        <div class="section-card-header">
            <span class="section-card-title">My Portfolio</span>
            <a href="{{ route('investor.portfolio') }}" class="text-xs font-semibold hover:underline" style="color:#a8863a">View All →</a>
        </div>
        <div class="section-card-body p-0">
            @if($investments->count())
                @foreach($investments->take(4) as $inv)
                    @php $img = $inv->property->images->where('is_primary',true)->first() ?? $inv->property->images->first(); @endphp
                    <a href="{{ route('investor.portfolio.show', $inv) }}"
                       class="flex items-center gap-3 px-5 py-3.5 border-b border-gray-50 hover:bg-gray-50 transition-colors"
                       style="text-decoration:none;color:inherit">
                        <div class="w-10 h-10 rounded-xl overflow-hidden flex-shrink-0" style="background:#0f2942">
                            @if($img)
                                <img src="{{ $img->image_url }}" class="w-full h-full object-cover">
                            @endif
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-semibold text-gray-900 text-sm truncate">{{ $inv->property->title }}</p>
                            <p class="text-xs text-gray-400">{{ $inv->investment_date->format('d M Y') }} · {{ $inv->property->full_location }}</p>
                        </div>
                        <div class="text-right flex-shrink-0">
                            <p class="font-bold text-sm text-gray-900">
                                ₹{{ number_format(($inv->current_value ?? $inv->invested_amount)/100000, 1) }}L
                            </p>
                            @php $g = $inv->growth_percent; @endphp
                            <p class="text-xs font-semibold {{ $g >= 0 ? 'text-green-600' : 'text-red-500' }}">
                                {{ $g >= 0 ? '▲' : '▼' }} {{ abs($g) }}%
                            </p>
                        </div>
                        <span class="badge {{ $inv->status === 'active' ? 'badge-green' : 'badge-gray' }} ml-1 hidden sm:inline-flex">
                            {{ ucfirst($inv->status) }}
                        </span>
                    </a>
                @endforeach
            @else
                <div class="text-center py-10 text-gray-400">
                    <svg class="w-12 h-12 mx-auto mb-3 text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                    <p class="text-sm font-semibold text-gray-400">No investments yet</p>
                    <p class="text-xs text-gray-400 mt-1">Your portfolio will appear here once your advisor adds your investments.</p>
                    <a href="{{ route('investments.index') }}" class="inline-block mt-3 text-xs font-semibold hover:underline" style="color:#a8863a">Explore Opportunities →</a>
                </div>
            @endif
        </div>
    </div>

    {{-- ── Right column ── --}}
    <div class="space-y-5">

        {{-- Upcoming Payments --}}
        <div class="section-card">
            <div class="section-card-header">
                <span class="section-card-title">Upcoming Payments</span>
                <a href="{{ route('investor.payments') }}" class="text-xs font-semibold hover:underline" style="color:#a8863a">View All →</a>
            </div>
            <div class="section-card-body p-0">
                @if($pendingPayments->count())
                    @foreach($pendingPayments as $pay)
                        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-50 last:border-0">
                            <div>
                                <p class="text-sm font-semibold text-gray-800">{{ $pay->installment_label }}</p>
                                <p class="text-xs text-gray-400">Due: {{ $pay->due_date->format('d M Y') }}</p>
                            </div>
                            <div class="text-right">
                                <p class="font-bold text-sm text-gray-900">₹{{ number_format($pay->amount) }}</p>
                                <span class="badge {{ $pay->is_overdue ? 'badge-red' : 'badge-gold' }}">
                                    {{ $pay->is_overdue ? 'Overdue' : 'Pending' }}
                                </span>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="px-4 py-6 text-center text-gray-400 text-xs">No pending payments</div>
                @endif
            </div>
        </div>

        {{-- Construction Updates --}}
        <div class="section-card">
            <div class="section-card-header">
                <span class="section-card-title">Latest Updates</span>
            </div>
            <div class="section-card-body p-0">
                @if($constructionUpdates->count())
                    @foreach($constructionUpdates as $update)
                        <div class="flex gap-3 px-4 py-3 border-b border-gray-50 last:border-0 items-start">
                            @if($update->photo_url)
                                <img src="{{ $update->photo_url }}" class="w-10 h-10 rounded-lg object-cover flex-shrink-0">
                            @else
                                <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#e8edf5">
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="color:#0f2942"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16"/></svg>
                                </div>
                            @endif
                            <div class="min-w-0">
                                <p class="text-sm font-semibold text-gray-800 truncate">{{ $update->title }}</p>
                                <p class="text-xs text-gray-400">{{ $update->property->title }} · {{ $update->update_month }}</p>
                                <div class="flex items-center gap-2 mt-1">
                                    <div class="flex-1 bg-gray-100 rounded-full h-1.5">
                                        <div class="h-1.5 rounded-full" style="width:{{ $update->completion_percentage }}%;background:#C9A84C"></div>
                                    </div>
                                    <span class="text-xs text-gray-400 flex-shrink-0">{{ $update->completion_percentage }}%</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="px-4 py-6 text-center text-gray-400 text-xs">No updates yet</div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Recent Documents --}}
@if($recentDocuments->count())
    <div class="section-card mt-5">
        <div class="section-card-header">
            <span class="section-card-title">Recent Documents</span>
            <a href="{{ route('investor.documents') }}" class="text-xs font-semibold hover:underline" style="color:#a8863a">View Vault →</a>
        </div>
        <div class="section-card-body">
            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
                @foreach($recentDocuments as $doc)
                    <a href="{{ route('investor.documents.download', $doc) }}"
                       class="flex items-center gap-2.5 p-3 border border-gray-100 rounded-xl hover:border-yellow-200 hover:bg-yellow-50 transition-all"
                       style="text-decoration:none;color:inherit">
                        <div class="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#fee2e2">
                            <svg class="w-4 h-4" 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="min-w-0">
                            <p class="text-xs font-semibold text-gray-800 truncate">{{ $doc->title }}</p>
                            <p class="text-xs text-gray-400">{{ \App\Models\InvestorDocument::getDocumentTypes()[$doc->document_type] ?? $doc->document_type }}</p>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </div>
@endif

@endsection