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

@section('content')
<div class="mb-6">
    <h2 class="text-2xl font-bold text-gray-900" style="font-family:'Playfair Display',serif">My Portfolio</h2>
    <p class="text-gray-500 text-sm mt-0.5">All your real estate investments in one place.</p>
</div>

@if($investments->count())
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        @foreach($investments 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="section-card block hover:shadow-lg hover:-translate-y-1 transition-all"
               style="text-decoration:none;color:inherit">

                {{-- Image --}}
                <div style="height:160px;overflow:hidden;background:linear-gradient(135deg,#0f2942,#1a3a5c)">
                    @if($img)
                        <img src="{{ $img->image_url }}" class="w-full h-full object-cover">
                    @endif
                </div>

                <div class="p-4 space-y-3">
                    {{-- Title + location --}}
                    <div>
                        <p class="font-bold text-gray-900 text-sm leading-snug">{{ $inv->property->title }}</p>
                        <p class="text-xs text-gray-400 mt-0.5 flex items-center gap-1">
                            <svg class="w-3 h-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"/></svg>
                            {{ $inv->property->full_location }}
                        </p>
                    </div>

                    {{-- Investment amount vs current value --}}
                    <div class="grid grid-cols-2 gap-2">
                        <div class="bg-gray-50 rounded-xl p-2.5 text-center">
                            <p class="text-xs text-gray-400 mb-0.5">Invested</p>
                            <p class="font-bold text-sm text-gray-900">
                                ₹{{ number_format($inv->invested_amount/100000, 1) }}L
                            </p>
                        </div>
                        <div class="rounded-xl p-2.5 text-center" style="background:#f0fdf4">
                            <p class="text-xs text-gray-400 mb-0.5">Current Value</p>
                            <p class="font-bold text-sm text-green-700">
                                ₹{{ number_format(($inv->current_value ?? $inv->invested_amount)/100000, 1) }}L
                            </p>
                        </div>
                    </div>

                    {{-- Growth bar --}}
                    @php $g = $inv->growth_percent; @endphp
                    <div class="flex items-center justify-between text-xs">
                        <span class="text-gray-400">Growth</span>
                        <span class="font-bold {{ $g >= 0 ? 'text-green-600' : 'text-red-500' }}">
                            {{ $g >= 0 ? '▲ +' : '▼ ' }}{{ abs($g) }}%
                        </span>
                    </div>

                    {{-- Footer --}}
                    <div class="flex items-center justify-between pt-2 border-t border-gray-50">
                        <span class="text-xs text-gray-400">Invested {{ $inv->investment_date->format('M Y') }}</span>
                        <span class="badge {{ $inv->status === 'active' ? 'badge-green' : ($inv->status === 'possession_received' ? 'badge-navy' : 'badge-gray') }}">
                            {{ \App\Models\InvestorInvestment::getStatuses()[$inv->status] ?? $inv->status }}
                        </span>
                    </div>
                </div>
            </a>
        @endforeach
    </div>

@else
    <div class="section-card text-center py-16 px-4">
        <svg class="w-16 h-16 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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
        <p class="text-lg font-semibold text-gray-400 mb-2">No investments in your portfolio yet</p>
        <p class="text-sm text-gray-400 mb-6 max-w-md mx-auto">
            Once you invest through Kashi Housing, your advisor will add your investments here.
            You can track value, documents, and payments from this dashboard.
        </p>
        <a href="{{ route('investments.index') }}"
           class="inline-flex items-center gap-2 font-bold px-5 py-2.5 rounded-xl text-sm"
           style="background:linear-gradient(135deg,#C9A84C,#a8863a);color:#07111f">
            Explore Opportunities
        </a>
    </div>
@endif
@endsection