@extends('layouts.app')

@section('page_title', 'Notifications')

@section('content')

<div class="grid md:grid-cols-2 gap-4">

    {{-- Upcoming Loan Due Dates --}}
    <div class="fp-card p-5">
        <h2 class="font-semibold text-[14px]">Upcoming Loan Due Dates</h2>

        <div class="mt-3 space-y-2">
            @forelse($loans as $l)
                <div class="p-3 rounded-xl bg-red-50 dark:bg-red-950/20 flex justify-between">
                    <div>
                        <div class="text-[11px] font-semibold">
                            {{ $l->contact?->name ?? 'Loan' }}
                        </div>
                        <div class="text-[10px] {{ strtolower($l->type) === 'lent' ? 'text-green-600' : 'text-red-600' }}">
                            Due {{ $l->due_date->format('d M Y') }}
                        </div>
                    </div>
                    <b class="text-[12px]">
                        ৳ {{ number_format((float) $l->outstanding, 2) }}
                    </b>
                </div>
            @empty
                <div class="fp-muted text-[11px] py-8 text-center">
                    No loan deadlines in the next 30 days.
                </div>
            @endforelse
        </div>
    </div>

    {{-- Goal Deadlines --}}
    <div class="fp-card p-5">
        <h2 class="font-semibold text-[14px]">Goal Deadlines</h2>

        <div class="mt-3 space-y-2">
            @forelse($goals as $g)
                <div class="p-3 rounded-xl bg-violet-50 dark:bg-violet-950/20">
                    <div class="text-[11px] font-semibold">
                        {{ $g->name }}
                    </div>
                    <div class="text-[10px] fp-muted">
                        Target {{ $g->target_date->format('d M Y') }}
                        · ৳ {{ number_format((float) $g->target_amount, 2) }}
                    </div>
                </div>
            @empty
                <div class="fp-muted text-[11px] py-8 text-center">
                    No goal deadlines in the next 30 days.
                </div>
            @endforelse
        </div>
    </div>

    {{-- Upcoming Recurring Payments --}}
    <div class="fp-card p-5">
        <div class="flex items-center justify-between">
            <h2 class="font-semibold text-[14px]">Upcoming Recurring Payments</h2>
            <span class="text-[9px] fp-muted">Next 5 days</span>
        </div>

        <div class="mt-3 space-y-2">
            @forelse($recurringReminders as $r)
                <div class="p-3 rounded-xl bg-blue-50 dark:bg-blue-950/20 flex items-center justify-between gap-4">

                    {{-- Description --}}
                    <div class="min-w-0 flex-1">
                        <div class="text-[11px] font-semibold truncate">
                            {{ $r->description ?: ucfirst($r->type) }}
                        </div>
                        <div class="text-[10px] {{ $r->type === 'income' ? 'text-green-500' : ($r->type === 'expense' ? 'text-red-500' : 'fp-muted') }} mt-1">
                            {{ ucfirst($r->type) }}
                            · Due {{ $r->next_run->format('d M Y') }}
                        </div>
                    </div>

                    {{-- Account + Balance --}}
                    <div class="flex-1 text-center min-w-0">
                        <div class="text-[11px] font-semibold truncate">
                            {{ $r->account?->name ?? 'Account' }}
                        </div>
                        <div class="text-[10px] fp-muted mt-1">
                            Balance: ৳ {{ number_format((float) ($r->account?->current_balance ?? 0), 2) }}
                        </div>
                    </div>

                    {{-- Amount --}}
                    <div class="flex-1 flex items-center justify-end">
                        <b class="text-[12px] whitespace-nowrap">
                            ৳ {{ number_format((float) $r->amount, 2) }}
                        </b>
                    </div>

                </div>
            @empty
                <div class="fp-muted text-[11px] py-8 text-center">
                    No recurring payments due in the next 5 days.
                </div>
            @endforelse
        </div>
    </div>

</div>

@endsection