@extends('investor.layouts.app')
@php $pageTitle = $investment->property->title; @endphp

@section('content')
<div class="mb-5 flex items-center gap-2 text-sm text-gray-500">
    <a href="{{ route('investor.portfolio') }}" class="hover:underline" style="color:#a8863a">Portfolio</a>
    <span>/</span>
    <span class="text-gray-700 font-medium">{{ Str::limit($investment->property->title, 40) }}</span>
</div>

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

    {{-- Main --}}
    <div class="lg:col-span-2 space-y-5">

        {{-- Hero card --}}
        <div class="section-card">
            @php $img = $investment->property->images->first(); @endphp
            @if($img)
                <img src="{{ $img->image_url }}" class="w-full object-cover" style="height:260px;border-radius:16px 16px 0 0">
            @else
                <div style="height:200px;background:linear-gradient(135deg,#07111f,#0f2942);border-radius:16px 16px 0 0;display:flex;align-items:center;justify-content:center">
                    <svg class="w-16 h-16" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="color:rgba(255,255,255,0.1)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                </div>
            @endif
            <div class="p-5">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <h2 class="text-xl font-bold text-gray-900">{{ $investment->property->title }}</h2>
                        <p class="text-gray-500 text-sm">{{ $investment->property->full_location }}</p>
                    </div>
                    <span class="badge {{ $investment->status === 'active' ? 'badge-green' : 'badge-navy' }}">
                        {{ \App\Models\InvestorInvestment::getStatuses()[$investment->status] }}
                    </span>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-4">
                    @foreach([
                        ['label' => 'Invested', 'val' => '₹'.number_format($investment->invested_amount)],
                        ['label' => 'Current Value', 'val' => '₹'.number_format($investment->current_value ?? $investment->invested_amount)],
                        ['label' => 'Growth', 'val' => ($investment->growth_percent >= 0 ? '▲ +' : '▼ ').abs($investment->growth_percent).'%'],
                        ['label' => 'Investment Date', 'val' => $investment->investment_date->format('d M Y')],
                    ] as $s)
                        <div class="bg-gray-50 rounded-xl p-3 text-center">
                            <p class="text-xs text-gray-400">{{ $s['label'] }}</p>
                            <p class="font-bold text-sm text-gray-900 mt-0.5">{{ $s['val'] }}</p>
                        </div>
                    @endforeach
                </div>
                @if($investment->unit_number || $investment->area_purchased || $investment->agreement_number)
                    <div class="mt-3 flex flex-wrap gap-2 text-xs text-gray-500">
                        @if($investment->unit_number)<span class="bg-gray-100 px-2 py-1 rounded-lg">Unit: {{ $investment->unit_number }}</span>@endif
                        @if($investment->area_purchased)<span class="bg-gray-100 px-2 py-1 rounded-lg">{{ $investment->area_purchased }} {{ $investment->area_unit }}</span>@endif
                        @if($investment->agreement_number)<span class="bg-gray-100 px-2 py-1 rounded-lg">Agreement: {{ $investment->agreement_number }}</span>@endif
                    </div>
                @endif
            </div>
        </div>

        {{-- Construction Updates --}}
        @php $updates = $investment->property->constructionUpdates->where('is_published', true); @endphp
        @if($updates->count())
            <div class="section-card">
                <div class="section-card-header"><span class="section-card-title">Construction Progress</span></div>
                <div class="section-card-body space-y-4">
                    @foreach($updates as $update)
                        <div class="flex gap-4 items-start">
                            @if($update->photo_url)
                                <img src="{{ $update->photo_url }}" class="w-20 h-16 rounded-xl object-cover flex-shrink-0">
                            @else
                                <div class="w-20 h-16 rounded-xl flex-shrink-0" style="background:#e8edf5"></div>
                            @endif
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center justify-between mb-1">
                                    <p class="font-semibold text-sm text-gray-900">{{ $update->title }}</p>
                                    <span class="text-xs text-gray-400 flex-shrink-0 ml-2">{{ $update->update_month }}</span>
                                </div>
                                @if($update->description)
                                    <p class="text-xs text-gray-500 mb-2">{{ $update->description }}</p>
                                @endif
                                <div class="flex items-center gap-2">
                                    <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:linear-gradient(90deg,#C9A84C,#a8863a)"></div>
                                    </div>
                                    <span class="text-xs font-semibold text-gray-600">{{ $update->completion_percentage }}%</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Payment Schedule --}}
        @if($investment->payments->count())
            <div class="section-card">
                <div class="section-card-header">
                    <span class="section-card-title">Payment Schedule</span>
                    <span class="text-xs text-gray-400">
                        Pending: ₹{{ number_format($investment->pending_amount) }}
                    </span>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-gray-100">
                                <th class="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Installment</th>
                                <th class="text-right px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Amount</th>
                                <th class="text-center px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Due Date</th>
                                <th class="text-center px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($investment->payments as $pay)
                                <tr class="border-b border-gray-50 hover:bg-gray-50">
                                    <td class="px-5 py-3 font-medium text-gray-900">{{ $pay->installment_label }}</td>
                                    <td class="px-5 py-3 text-right font-bold text-gray-900">₹{{ number_format($pay->amount) }}</td>
                                    <td class="px-5 py-3 text-center text-gray-500">{{ $pay->due_date->format('d M Y') }}</td>
                                    <td class="px-5 py-3 text-center">
                                        <span class="badge {{ match($pay->status) { 'paid' => 'badge-green', 'overdue' => 'badge-red', 'pending' => 'badge-gold', default => 'badge-gray' } }}">
                                            {{ ucfirst($pay->status) }}
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif
    </div>

    {{-- Sidebar --}}
    <div class="space-y-5">

        {{-- Documents --}}
        <div class="section-card">
            <div class="section-card-header">
                <span class="section-card-title">Documents</span>
                <a href="{{ route('investor.documents') }}" class="text-xs font-semibold hover:underline" style="color:#a8863a">All →</a>
            </div>
            <div class="section-card-body p-3">
                @if($investment->documents->count())
                    @foreach($investment->documents->where('is_visible_to_investor', true) as $doc)
                        <a href="{{ route('investor.documents.download', $doc) }}"
                           class="flex items-center gap-2.5 p-2.5 rounded-xl hover:bg-gray-50 transition-colors mb-1"
                           style="text-decoration:none;color:inherit">
                            <div class="w-8 h-8 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] ?? '' }}</p>
                            </div>
                            <svg class="w-3.5 h-3.5 text-gray-300 flex-shrink-0" 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
                @else
                    <p class="text-xs text-gray-400 text-center py-4">No documents uploaded yet</p>
                @endif
            </div>
        </div>

        {{-- Need help --}}
        <div class="rounded-2xl p-4" style="background:linear-gradient(135deg,#07111f,#0f2942)">
            <p class="text-white font-semibold text-sm mb-1">Questions about this investment?</p>
            <p class="text-white/40 text-xs mb-3">Talk to your advisor for updates, documentation, or exit planning.</p>
            <a href="{{ route('contact') }}"
               class="block w-full text-center py-2 rounded-xl text-xs font-bold"
               style="background:linear-gradient(135deg,#C9A84C,#a8863a);color:#07111f">
                Contact Advisor
            </a>
        </div>
    </div>
</div>
@endsection