@extends('layouts.app')

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

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="container mx-auto px-4">
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">Finance Dashboard</h1>
            <p class="text-gray-600">Overview of platform financials</p>
        </div>

        <!-- Revenue Stats -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow-sm p-6">
                <p class="text-sm text-gray-500">Monthly Revenue</p>
                <p class="text-3xl font-bold text-green-600">R {{ number_format($data['revenue']['monthly'], 2) }}</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm p-6">
                <p class="text-sm text-gray-500">Yearly Revenue</p>
                <p class="text-3xl font-bold text-blue-600">R {{ number_format($data['revenue']['yearly'], 2) }}</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm p-6">
                <p class="text-sm text-gray-500">Outstanding</p>
                <p class="text-3xl font-bold text-yellow-600">R {{ number_format($data['outstanding'], 2) }}</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm p-6">
                <p class="text-sm text-gray-500">Commission Earned</p>
                <p class="text-3xl font-bold text-purple-600">R {{ number_format($data['commission']['total'], 2) }}</p>
            </div>
        </div>

        <!-- Profit/Loss Summary -->
        <div class="grid lg:grid-cols-2 gap-8 mb-8">
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h2 class="font-semibold text-lg mb-4">Profit & Loss (This Month)</h2>
                <div class="space-y-4">
                    <div class="flex justify-between items-center py-2 border-b">
                        <span class="text-gray-600">Total Income</span>
                        <span class="font-semibold text-green-600">R {{ number_format($profitLoss['total_income'], 2) }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2 border-b">
                        <span class="text-gray-600">Total Expenses</span>
                        <span class="font-semibold text-red-600">R {{ number_format($profitLoss['total_expenses'], 2) }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2">
                        <span class="font-bold text-lg">Net Profit</span>
                        <span class="font-bold text-lg {{ $profitLoss['net_profit'] >= 0 ? 'text-green-600' : 'text-red-600' }}">
                            R {{ number_format($profitLoss['net_profit'], 2) }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm p-6">
                <h2 class="font-semibold text-lg mb-4">Accounts Receivable Aging</h2>
                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">Current</span>
                        <span class="font-medium text-green-600">R {{ number_format($data['aging']['current'], 2) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">1-30 Days</span>
                        <span class="font-medium text-yellow-600">R {{ number_format($data['aging']['1-30'], 2) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">31-60 Days</span>
                        <span class="font-medium text-orange-600">R {{ number_format($data['aging']['31-60'], 2) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">61-90 Days</span>
                        <span class="font-medium text-red-500">R {{ number_format($data['aging']['61-90'], 2) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">90+ Days</span>
                        <span class="font-medium text-red-700">R {{ number_format($data['aging']['90+'], 2) }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid lg:grid-cols-3 gap-8">
            <!-- Recent Invoices -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6 border-b flex justify-between items-center">
                        <h2 class="font-semibold text-lg">Recent Invoices</h2>
                        <a href="{{ route('admin.finance.invoices') }}" class="text-blue-600 hover:underline text-sm">View All</a>
                    </div>
                    @if($recentInvoices->count() > 0)
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Invoice #</th>
                                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Customer</th>
                                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase">Amount</th>
                                        <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Status</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    @foreach($recentInvoices as $invoice)
                                        <tr class="hover:bg-gray-50">
                                            <td class="px-6 py-4">
                                                <a href="{{ route('admin.finance.invoices.show', $invoice->id) }}" class="text-blue-600 hover:underline">
                                                    {{ $invoice->invoice_number }}
                                                </a>
                                            </td>
                                            <td class="px-6 py-4 text-gray-600">{{ $invoice->user->name }}</td>
                                            <td class="px-6 py-4 text-right font-semibold">R {{ number_format($invoice->total_amount, 2) }}</td>
                                            <td class="px-6 py-4 text-center">
                                                @php
                                                    $statusColors = [
                                                        'draft' => 'bg-gray-100 text-gray-800',
                                                        'sent' => 'bg-blue-100 text-blue-800',
                                                        'paid' => 'bg-green-100 text-green-800',
                                                        'overdue' => 'bg-red-100 text-red-800',
                                                    ];
                                                @endphp
                                                <span class="inline-flex px-2 py-1 rounded-full text-xs font-medium {{ $statusColors[$invoice->status] ?? 'bg-gray-100 text-gray-800' }}">
                                                    {{ ucfirst($invoice->status) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="p-8 text-center text-gray-500">No invoices yet</div>
                    @endif
                </div>
            </div>

            <!-- Quick Links & Pending Payouts -->
            <div class="space-y-6">
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="font-semibold text-lg mb-4">Finance Menu</h2>
                    <div class="space-y-3">
                        <a href="{{ route('admin.finance.invoices') }}" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
                            <span class="text-2xl">📄</span>
                            <span class="font-medium">Invoices</span>
                        </a>
                        <a href="{{ route('admin.finance.quotes') }}" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
                            <span class="text-2xl">📝</span>
                            <span class="font-medium">Quotes</span>
                        </a>
                        <a href="{{ route('admin.finance.payouts') }}" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
                            <span class="text-2xl">💳</span>
                            <span class="font-medium">Supplier Payouts</span>
                        </a>
                        <a href="{{ route('admin.finance.ledger') }}" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
                            <span class="text-2xl">📊</span>
                            <span class="font-medium">Ledger</span>
                        </a>
                        <a href="{{ route('admin.finance.reports') }}" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
                            <span class="text-2xl">📈</span>
                            <span class="font-medium">Reports</span>
                        </a>
                        <a href="{{ route('admin.delivery-zones') }}" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
                            <span class="text-2xl">🚚</span>
                            <span class="font-medium">Delivery Zones</span>
                        </a>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="font-semibold text-lg mb-4">Pending Payouts</h2>
                    <p class="text-3xl font-bold text-blue-600 mb-4">R {{ number_format($data['payouts']['pending'], 2) }}</p>
                    @if($pendingPayouts->count() > 0)
                        <div class="space-y-2">
                            @foreach($pendingPayouts as $payout)
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-600">{{ $payout->supplier->company_name }}</span>
                                    <span class="font-medium">R {{ number_format($payout->net_amount, 2) }}</span>
                                </div>
                            @endforeach
                        </div>
                        <a href="{{ route('admin.finance.payouts') }}" class="block text-center text-blue-600 hover:underline text-sm mt-4">
                            Manage Payouts
                        </a>
                    @else
                        <p class="text-gray-500 text-sm">No pending payouts</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection