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

@section('content')
<div class="mb-6">
    <h2 class="text-2xl font-bold text-gray-900" style="font-family:'Playfair Display',serif">Payment Tracker</h2>
    <p class="text-gray-500 text-sm mt-0.5">Track all your installments and payment history.</p>
</div>

{{-- Summary --}}
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
    <div class="stat-card">
        <div class="stat-card-label mb-2">Total Paid</div>
        <div class="stat-card-value text-green-600">₹{{ number_format($totalPaid/100000, 2) }}L</div>
    </div>
    <div class="stat-card">
        <div class="stat-card-label mb-2">Pending Amount</div>
        <div class="stat-card-value" style="color:#C9A84C">₹{{ number_format($totalPending/100000, 2) }}L</div>
    </div>
    @if($overdue->count())
        <div class="stat-card" style="border-color:#fca5a5">
            <div class="stat-card-label mb-2" style="color:#dc2626">Overdue</div>
            <div class="stat-card-value text-red-600">{{ $overdue->count() }} payments</div>
        </div>
    @endif
</div>

@if($investments->count())
    @foreach($investments as $inv)
        @if($inv->payments->count())
            <div class="section-card mb-5">
                <div class="section-card-header">
                    <div>
                        <p class="section-card-title">{{ $inv->property->title }}</p>
                        <p class="text-xs text-gray-400 mt-0.5">{{ $inv->property->full_location }}</p>
                    </div>
                    <div class="text-right text-xs text-gray-500">
                        <p>Total: ₹{{ number_format($inv->invested_amount) }}</p>
                        <p class="text-red-500">Pending: ₹{{ number_format($inv->pending_amount) }}</p>
                    </div>
                </div>

                {{-- Progress bar --}}
                @php
                    $totalAmt = $inv->payments->sum('amount');
                    $paidAmt  = $inv->payments->where('status','paid')->sum('amount');
                    $paidPct  = $totalAmt > 0 ? ($paidAmt / $totalAmt) * 100 : 0;
                @endphp
                <div class="px-5 py-3 border-b border-gray-50">
                    <div class="flex justify-between text-xs text-gray-500 mb-1.5">
                        <span>Payment Progress</span>
                        <span>{{ round($paidPct) }}% paid</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2">
                        <div class="h-2 rounded-full" style="width:{{ $paidPct }}%;background:linear-gradient(90deg,#C9A84C,#a8863a)"></div>
                    </div>
                </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-400 uppercase tracking-wide">Installment</th>
                                <th class="text-right px-5 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wide">Amount</th>
                                <th class="text-center px-5 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wide">Due Date</th>
                                <th class="text-center px-5 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wide">Paid On</th>
                                <th class="text-center px-5 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wide">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($inv->payments as $pay)
                                <tr class="border-b border-gray-50 hover:bg-gray-50 {{ $pay->is_overdue ? 'bg-red-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 text-gray-500">
                                        {{ $pay->paid_date ? $pay->paid_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
    @endforeach
@else
    <div class="section-card text-center py-16">
        <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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
        <p class="text-gray-400 font-semibold">No payment schedules yet</p>
        <p class="text-gray-400 text-xs mt-1">Payment schedules will appear here once your investments are set up.</p>
    </div>
@endif
@endsection