@extends('layouts.portal')

@section('title', 'Finance Dashboard')
@section('page_title', 'Finance Dashboard')
@section('page_subtitle', 'Financial overview and analytics')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'finance'])
@endsection

@section('content')
<div class="max-w-6xl mx-auto">
    <!-- Welcome Banner -->
    <div class="bg-gradient-to-r from-red-900 via-red-800 to-red-900 rounded-xl p-8 text-white mb-4 shadow-xl animate-fade-in-up relative overflow-hidden min-h-[120px]">
        <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full -ml-16 -mb-16"></div>
        
        <div class="relative z-10 flex items-center justify-between">
            <div>
                <h2 class="text-xl font-bold mb-2">Finance Dashboard</h2>
                <p class="text-red-100 text-sm mb-3">Financial overview and analytics</p>
                <div class="flex items-center space-x-3">
                    <span class="inline-flex items-center px-3 py-2 rounded-full text-xs font-medium bg-white/20 backdrop-blur-sm">
                        <i class="fas fa-dollar-sign mr-2"></i>
                        Total Revenue: RM{{ number_format($stats['total_revenue'], 2) }}
                    </span>
                    <span class="inline-flex items-center px-3 py-2 rounded-full text-xs font-medium bg-green-400/30 backdrop-blur-sm">
                        <i class="fas fa-circle text-green-300 mr-2 text-xs"></i>
                        System Online
                    </span>
                </div>
            </div>
            <div class="hidden md:block">
                <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                    <i class="fas fa-chart-line text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Financial Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Total Revenue</h3>
                <i class="fas fa-dollar-sign text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($stats['total_revenue'], 2) }}</div>
            <div class="text-sm opacity-90">This Month: RM{{ number_format($stats['current_month_revenue'], 2) }}</div>
        </div>
        
        <div class="bg-gradient-to-br from-green-600 to-green-700 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Commissions Paid</h3>
                <i class="fas fa-hand-holding-usd text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($stats['total_commissions_paid'], 2) }}</div>
            <div class="text-sm opacity-90">This Month: RM{{ number_format($stats['current_month_commissions'], 2) }}</div>
        </div>
        
        <div class="bg-gradient-to-br from-yellow-600 to-orange-600 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Pending Commissions</h3>
                <i class="fas fa-clock text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($stats['pending_commissions'], 2) }}</div>
            <div class="text-sm opacity-90">Awaiting payment</div>
        </div>
        
        <div class="bg-gradient-to-br from-purple-600 to-purple-700 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Active Clients</h3>
                <i class="fas fa-users text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">{{ $stats['active_clients'] }} / {{ $stats['total_clients'] }}</div>
            <div class="text-sm opacity-90">{{ number_format(($stats['active_clients'] / max($stats['total_clients'], 1)) * 100, 1) }}% active</div>
        </div>
    </div>

    <!-- Invoice & Payment Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-gradient-to-br from-indigo-600 to-indigo-700 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Total Invoices</h3>
                <i class="fas fa-file-invoice-dollar text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($totalInvoices, 2) }}</div>
            <div class="text-sm opacity-90">All paid invoices</div>
        </div>
        
        <div class="bg-gradient-to-br from-teal-600 to-teal-700 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Lawyer Paid</h3>
                <i class="fas fa-balance-scale text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($lawyerPaid, 2) }}</div>
            <div class="text-sm opacity-90">Lawyer invoice payments</div>
        </div>
        
        <div class="bg-gradient-to-br from-pink-600 to-pink-700 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Agent Paid</h3>
                <i class="fas fa-user-tie text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($agentPaid, 2) }}</div>
            <div class="text-sm opacity-90">Agent commission payments</div>
        </div>
        
        <div class="bg-gradient-to-br from-amber-600 to-amber-700 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Remaining</h3>
                <i class="fas fa-coins text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($remainingAmount, 2) }}</div>
            <div class="text-sm opacity-90">Unpaid balance</div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-red-800 to-red-900 text-white p-4">
                    <h3 class="text-lg font-semibold">Monthly Revenue Trend</h3>
                </div>
                <div class="p-6">
                    <canvas id="revenueChart" height="100"></canvas>
                </div>
            </div>
        </div>
        <div class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-red-800 to-red-900 text-white p-4">
                    <h3 class="text-lg font-semibold">Commission Breakdown</h3>
                </div>
                <div class="p-6">
                    <canvas id="commissionChart" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Transactions & Top Performers -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Recent Transactions -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-red-800 to-red-900 text-white p-4">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold">Recent Transactions</h3>
                    <a href="{{ route('admin.finance.transactions') }}" class="text-white hover:text-red-200 text-sm font-medium">
                        View All <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
            </div>
            <div class="p-4">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="text-left py-2 px-2 text-sm font-semibold text-gray-700">Date</th>
                                <th class="text-left py-2 px-2 text-sm font-semibold text-gray-700">Client</th>
                                <th class="text-left py-2 px-2 text-sm font-semibold text-gray-700">Amount</th>
                                <th class="text-left py-2 px-2 text-sm font-semibold text-gray-700">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentTransactions as $transaction)
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                <td class="py-2 px-2 text-sm">{{ $transaction->created_at->format('M d, Y') }}</td>
                                <td class="py-2 px-2 text-sm">{{ $transaction->client?->first_name }} {{ $transaction->client?->last_name }}</td>
                                <td class="py-2 px-2 text-sm font-medium">RM{{ number_format($transaction->amount, 2) }}</td>
                                <td class="py-2 px-2">
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        {{ ucfirst($transaction->status) }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- Top Performers -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-red-800 to-red-900 text-white p-4">
                <h3 class="text-lg font-semibold">Top Performers</h3>
            </div>
            <div class="p-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <h4 class="text-sm font-semibold text-gray-700 mb-3">Agents</h4>
                        <div class="space-y-2">
                            @foreach($topAgents as $agent)
                            <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                                <span class="text-sm text-gray-700 truncate">{{ $agent->email }}</span>
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    RM{{ number_format($agent->total_commissions, 2) }}
                                </span>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div>
                        <h4 class="text-sm font-semibold text-gray-700 mb-3">Lawyers</h4>
                        <div class="space-y-2">
                            @foreach($topLawyers as $lawyer)
                            <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                                <span class="text-sm text-gray-700 truncate">{{ $lawyer->email }}</span>
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                    RM{{ number_format($lawyer->total_commissions, 2) }}
                                </span>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
        <div class="bg-gradient-to-r from-red-800 to-red-900 text-white p-4">
            <h3 class="text-lg font-semibold">Quick Actions</h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="text-center">
                    <a href="{{ route('admin.finance.transactions') }}" class="inline-flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 shadow-md">
                        <i class="fas fa-exchange-alt mr-2"></i>
                        View Transactions
                    </a>
                </div>
                <div class="text-center">
                    <a href="{{ route('admin.finance.commissions') }}" class="inline-flex items-center justify-center px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200 shadow-md">
                        <i class="fas fa-dollar-sign mr-2"></i>
                        Manage Commissions
                    </a>
                </div>
                <div class="text-center">
                    <a href="{{ route('admin.finance.assets_liabilities') }}" class="inline-flex items-center justify-center px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors duration-200 shadow-md">
                        <i class="fas fa-chart-pie mr-2"></i>
                        Assets & Liabilities
                    </a>
                </div>
                <div class="text-center">
                    <a href="{{ route('admin.reports.enhanced.index') }}" class="inline-flex items-center justify-center px-6 py-3 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors duration-200 shadow-md">
                        <i class="fas fa-file-alt mr-2"></i>
                        Generate Reports
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Per-Will Commission & Invoice Breakdown -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
        <div class="bg-gradient-to-r from-red-800 to-red-900 text-white p-4">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold">Per-Will Commission & Invoice Breakdown</h3>
                <span class="text-sm text-red-200">{{ $willBreakdown->count() }} wills</span>
            </div>
        </div>
        <div class="p-4">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-200 bg-gray-50">
                            <th class="text-left py-3 px-3 text-sm font-semibold text-gray-700">Will ID</th>
                            <th class="text-left py-3 px-3 text-sm font-semibold text-gray-700">Client</th>
                            <th class="text-right py-3 px-3 text-sm font-semibold text-gray-700">Client Invoice</th>
                            <th class="text-right py-3 px-3 text-sm font-semibold text-gray-700">Lawyer Invoice</th>
                            <th class="text-right py-3 px-3 text-sm font-semibold text-gray-700">Agent Commission</th>
                            <th class="text-right py-3 px-3 text-sm font-semibold text-gray-700">Lawyer Commission</th>
                            <th class="text-right py-3 px-3 text-sm font-semibold text-gray-700">Total Cost</th>
                            <th class="text-center py-3 px-3 text-sm font-semibold text-gray-700">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($willBreakdown as $will)
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-3 text-sm font-medium text-gray-900">#{{ $will['will_id'] }}</td>
                            <td class="py-3 px-3">
                                <div class="text-sm font-medium text-gray-900">{{ $will['client_name'] }}</div>
                                <div class="text-xs text-gray-500">{{ $will['client_email'] }}</div>
                            </td>
                            <td class="py-3 px-3 text-right text-sm font-medium text-blue-600">
                                RM{{ number_format($will['client_invoice'], 2) }}
                            </td>
                            <td class="py-3 px-3 text-right text-sm font-medium text-purple-600">
                                RM{{ number_format($will['lawyer_invoice'], 2) }}
                            </td>
                            <td class="py-3 px-3 text-right text-sm font-medium text-green-600">
                                RM{{ number_format($will['agent_commission'], 2) }}
                            </td>
                            <td class="py-3 px-3 text-right text-sm font-medium text-orange-600">
                                RM{{ number_format($will['lawyer_commission'], 2) }}
                            </td>
                            <td class="py-3 px-3 text-right text-sm font-bold text-gray-900 bg-gray-100">
                                RM{{ number_format($will['total_cost'], 2) }}
                            </td>
                            <td class="py-3 px-3 text-center">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium 
                                    {{ $will['status'] === 'completed' ? 'bg-green-100 text-green-800' : 
                                       ($will['status'] === 'pending_approval' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800') }}">
                                    {{ ucfirst(str_replace('_', ' ', $will['status'])) }}
                                </span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="py-8 text-center text-gray-500">
                                No will data available
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                    <tfoot>
                        <tr class="bg-gray-100 border-t-2 border-gray-200 font-semibold">
                            <td colspan="2" class="py-3 px-3 text-sm text-gray-700">Totals</td>
                            <td class="py-3 px-3 text-right text-sm text-blue-700">
                                RM{{ number_format($willBreakdown->sum('client_invoice'), 2) }}
                            </td>
                            <td class="py-3 px-3 text-right text-sm text-purple-700">
                                RM{{ number_format($willBreakdown->sum('lawyer_invoice'), 2) }}
                            </td>
                            <td class="py-3 px-3 text-right text-sm text-green-700">
                                RM{{ number_format($willBreakdown->sum('agent_commission'), 2) }}
                            </td>
                            <td class="py-3 px-3 text-right text-sm text-orange-700">
                                RM{{ number_format($willBreakdown->sum('lawyer_commission'), 2) }}
                            </td>
                            <td class="py-3 px-3 text-right text-sm text-gray-900">
                                RM{{ number_format($willBreakdown->sum('total_cost'), 2) }}
                            </td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Wait for DOM to be fully loaded
    document.addEventListener('DOMContentLoaded', function() {
        // Revenue Chart
        const revenueCanvas = document.getElementById('revenueChart');
        if (revenueCanvas) {
            const revenueCtx = revenueCanvas.getContext('2d');
            const revenueChart = new Chart(revenueCtx, {
                type: 'line',
                data: {
                    labels: {!! $monthlyRevenue->pluck('month') !!},
                    datasets: [{
                        label: 'Monthly Revenue',
                        data: {!! $monthlyRevenue->pluck('revenue') !!},
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return 'RM' + value.toLocaleString();
                                }
                            }
                        }
                    }
                }
            });
        }

        // Commission Chart
        const commissionCanvas = document.getElementById('commissionChart');
        if (commissionCanvas) {
            const commissionCtx = commissionCanvas.getContext('2d');
            const commissionChart = new Chart(commissionCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Agent Commissions', 'Lawyer Commissions', 'Pending Agent', 'Pending Lawyer'],
                    datasets: [{
                        data: [
                            {{ $commissionBreakdown['agent_commissions'] ?? 0 }},
                            {{ $commissionBreakdown['lawyer_commissions'] ?? 0 }},
                            {{ $commissionBreakdown['pending_agent_commissions'] ?? 0 }},
                            {{ $commissionBreakdown['pending_lawyer_commissions'] ?? 0 }}
                        ],
                        backgroundColor: [
                            'rgb(54, 162, 235)',
                            'rgb(75, 192, 192)',
                            'rgb(255, 205, 86)',
                            'rgb(255, 99, 132)'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }
    });
</script>
@endpush