{{-- resources/views/dashboard/finance.blade.php --}}
@extends('layouts.app')

@section('title', 'Finance Dashboard')

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-slate-800 dark:text-slate-100">
        <!-- Header -->
        <div class="flex items-start justify-between gap-4">
            <div>
                <h1 class="text-2xl sm:text-3xl font-bold tracking-tight">Finance Dashboard</h1>
                <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Track expenses, budgets, and cash flow at a
                    glance.</p>
            </div>
            <!-- Period Filter -->
            <form method="GET" action="{{ url()->current() }}" class="flex items-center gap-2">
                <select name="range"
                    class="rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2 text-sm">
                    <option value="30" {{ request('range', 30) == 30 ? 'selected' : '' }}>Last 30 days</option>
                    <option value="90" {{ request('range') == 90 ? 'selected' : '' }}>Last 90 days</option>
                    <option value="365" {{ request('range') == 365 ? 'selected' : '' }}>Last 12 months</option>
                </select>
                <button
                    class="px-4 py-2 rounded-xl bg-brand-600 text-white text-sm font-medium hover:bg-brand-700">Apply</button>
            </form>
        </div>

        <!-- KPI Cards -->
        <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
            @php
                // Fallbacks if controller didn't pass values
$kpis = $kpis ?? [
    ['label' => 'Total Expenses', 'value' => 12850.75, 'delta' => -6.2],
    ['label' => 'Budget Used', 'value' => 72, 'suffix' => '%', 'delta' => 2.4],
    ['label' => 'Net Cash Flow', 'value' => 2150.12, 'delta' => 4.1],
    ['label' => 'Upcoming Bills', 'value' => 5, 'delta' => 0],
                ];
            @endphp

            @foreach ($kpis as $i => $k)
                <div
                    class="p-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/70 dark:bg-slate-900/40 shadow-sm">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-sm text-slate-500">{{ $k['label'] }}</p>
                            <p class="mt-1 text-2xl font-semibold">
                                @if (isset($k['suffix']) && $k['suffix'] === '%')
                                    {{ number_format($k['value'], 0) }}%
                                @else
                                    ${{ number_format($k['value'], 2) }}
                                @endif
                            </p>
                        </div>
                        <!-- tiny sparkline placeholder -->
                        <svg viewBox="0 0 100 30" class="h-8 w-24 text-brand-600 dark:text-brand-400">
                            <polyline fill="none" stroke="currentColor" stroke-width="2"
                                points="0,20 15,18 30,22 45,15 60,17 75,10 90,14 100,8" />
                        </svg>
                    </div>
                    <div class="mt-3 text-xs">
                        @php $delta = $k['delta']; @endphp
                        <span
                            class="inline-flex items-center gap-1 px-2 py-1 rounded-lg {{ $delta >= 0 ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300' : 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300' }}">
                            @if ($delta >= 0)
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M5 12l7-7 7 7" />
                                </svg>
                                <span>{{ number_format(abs($delta), 1) }}%</span>
                                <span>vs prev.</span>
                            @else
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M19 12l-7 7-7-7" />
                                </svg>
                                <span>{{ number_format(abs($delta), 1) }}%</span>
                                <span>vs prev.</span>
                            @endif
                        </span>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Charts Row -->
        <div class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-4">
            <!-- Expenses by Category -->
            <div
                class="lg:col-span-1 p-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/70 dark:bg-slate-900/40">
                <h3 class="font-semibold">Expenses by Category</h3>
                @php
                    $categories = $categories ?? [
                        ['name' => 'Food & Dining', 'amount' => 865.24],
                        ['name' => 'Transport', 'amount' => 310.9],
                        ['name' => 'Utilities', 'amount' => 420.0],
                        ['name' => 'Rent', 'amount' => 1200.0],
                        ['name' => 'Entertainment', 'amount' => 155.7],
                    ];
                    $totalCat = array_sum(array_map(fn($c) => $c['amount'], $categories));
                @endphp
                <ul class="mt-4 space-y-3">
                    @foreach ($categories as $c)
                        @php $pct = $totalCat? round($c['amount']/$totalCat*100) : 0; @endphp
                        <li>
                            <div class="flex items-center justify-between text-sm">
                                <span>{{ $c['name'] }}</span>
                                <span class="tabular-nums">${{ number_format($c['amount'], 2) }}
                                    ({{ $pct }}%)
                                </span>
                            </div>
                            <div class="mt-2 h-2 w-full rounded-full bg-slate-200 dark:bg-slate-800">
                                <div class="h-2 rounded-full bg-brand-600 dark:bg-brand-500"
                                    style="width: {{ $pct }}%"></div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>

            <!-- Budget vs Actual -->
            <div
                class="lg:col-span-2 p-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/70 dark:bg-slate-900/40">
                <div class="flex items-center justify-between">
                    <h3 class="font-semibold">Budget vs Actual (This Month)</h3>
                    <a href="#" class="text-sm text-brand-600 hover:underline">Manage
                        budgets</a>
                </div>
                @php
                    $budget = $budget ?? [
                        ['category' => 'Food & Dining', 'budget' => 600, 'actual' => 465],
                        ['category' => 'Transport', 'budget' => 200, 'actual' => 180],
                        ['category' => 'Utilities', 'budget' => 450, 'actual' => 420],
                        ['category' => 'Rent', 'budget' => 1200, 'actual' => 1200],
                        ['category' => 'Entertainment', 'budget' => 200, 'actual' => 156],
                    ];
                @endphp
                <div class="mt-4 grid sm:grid-cols-2 gap-4">
                    @foreach ($budget as $b)
                        @php
                            $pct = $b['budget'] > 0 ? min(100, round(($b['actual'] / $b['budget']) * 100)) : 0;
                            $over = $b['actual'] > $b['budget'];
                        @endphp
                        <div class="p-4 rounded-xl border border-slate-200 dark:border-slate-800">
                            <div class="flex items-center justify-between text-sm">
                                <span class="font-medium">{{ $b['category'] }}</span>
                                <span class="tabular-nums">${{ number_format($b['actual'], 0) }} /
                                    ${{ number_format($b['budget'], 0) }}</span>
                            </div>
                            <div class="mt-3 h-2 w-full rounded-full bg-slate-200 dark:bg-slate-800">
                                <div class="h-2 rounded-full {{ $over ? 'bg-rose-500' : 'bg-emerald-500' }}"
                                    style="width: {{ $pct }}%"></div>
                            </div>
                            @if ($over)
                                <p class="mt-2 text-xs text-rose-600 dark:text-rose-300">Over budget by
                                    ${{ number_format($b['actual'] - $b['budget'], 0) }}</p>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Cash Flow & Upcoming Bills -->
        <div class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-4">
            <!-- Cash Flow -->
            <div
                class="lg:col-span-2 p-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/70 dark:bg-slate-900/40">
                <div class="flex items-center justify-between">
                    <h3 class="font-semibold">Cash Flow (last {{ request('range', 30) }} days)</h3>
                    <a href="{{ route('transactions.index') ?? '#' }}" class="text-sm text-brand-600 hover:underline">View
                        all</a>
                </div>
                @php
                    $transactions = $transactions ?? [
                        [
                            'date' => '2025-09-01',
                            'desc' => 'Coffee House',
                            'category' => 'Food & Dining',
                            'amount' => -3.8,
                        ],
                        ['date' => '2025-09-01', 'desc' => 'Salary', 'category' => 'Income', 'amount' => +2400.0],
                        ['date' => '2025-08-30', 'desc' => 'Ride‑Hailing', 'category' => 'Transport', 'amount' => -6.5],
                        [
                            'date' => '2025-08-28',
                            'desc' => 'Electricity Bill',
                            'category' => 'Utilities',
                            'amount' => -78.2,
                        ],
                        ['date' => '2025-08-27', 'desc' => 'Rent', 'category' => 'Rent', 'amount' => -1200.0],
                    ];
                @endphp
                <div class="mt-4 overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead class="text-left text-slate-500">
                            <tr>
                                <th class="py-2 pr-4">Date</th>
                                <th class="py-2 pr-4">Description</th>
                                <th class="py-2 pr-4">Category</th>
                                <th class="py-2 pr-4 text-right">Amount</th>
                                <th class="py-2 pr-4"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                            @foreach ($transactions as $t)
                                <tr>
                                    <td class="py-2 pr-4 tabular-nums">
                                        {{ \Carbon\Carbon::parse($t['date'])->format('M d, Y') }}</td>
                                    <td class="py-2 pr-4">{{ $t['desc'] }}</td>
                                    <td class="py-2 pr-4">
                                        <span
                                            class="inline-flex items-center px-2 py-0.5 rounded-md bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-200">{{ $t['category'] }}</span>
                                    </td>
                                    <td
                                        class="py-2 pr-4 text-right tabular-nums {{ $t['amount'] < 0 ? 'text-rose-600 dark:text-rose-400' : 'text-emerald-600 dark:text-emerald-400' }}">
                                        {{ $t['amount'] < 0 ? '-' : '+' }}${{ number_format(abs($t['amount']), 2) }}
                                    </td>
                                    <td class="py-2 pr-4 text-right">
                                        <a href="#" class="text-brand-600 hover:underline">Details</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Upcoming Bills -->
            <div class="p-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/70 dark:bg-slate-900/40">
                <h3 class="font-semibold">Upcoming Bills</h3>
                @php
                    $bills = $bills ?? [
                        ['due' => '2025-09-05', 'name' => 'Internet', 'amount' => 35.0, 'status' => 'due'],
                        ['due' => '2025-09-10', 'name' => 'Water', 'amount' => 12.4, 'status' => 'scheduled'],
                        ['due' => '2025-09-15', 'name' => 'Credit Card', 'amount' => 250.0, 'status' => 'scheduled'],
                    ];
                @endphp
                <ul class="mt-4 space-y-3">
                    @foreach ($bills as $b)
                        @php $dueIn = \Carbon\Carbon::parse($b['due'])->diffInDays(now(), false); @endphp
                        <li class="p-4 rounded-xl border border-slate-200 dark:border-slate-800">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="font-medium">{{ $b['name'] }}</p>
                                    <p class="text-xs text-slate-500">Due
                                        {{ \Carbon\Carbon::parse($b['due'])->format('M d') }} ·
                                        ${{ number_format($b['amount'], 2) }}</p>
                                </div>
                                <span
                                    class="text-xs px-2 py-1 rounded-lg {{ $dueIn <= 0 ? 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300' : 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300' }}">
                                    {{ $dueIn <= 0 ? 'Due now' : $dueIn . ' days' }}
                                </span>
                            </div>
                        </li>
                    @endforeach
                </ul>
                <a href="#" class="mt-4 inline-block text-sm text-brand-600 hover:underline">Manage bills</a>
            </div>
        </div>
    </div>
@endsection