@extends('layouts.portal')

@section('title', 'Finance Dashboard')
@section('page_title', 'Finance Dashboard')
@section('page_subtitle', 'Real-time Financial Overview & Performance Metrics')

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

@section('content')
<div class="max-w-7xl mx-auto px-6 py-8">
    <!-- Header -->
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Finance Dashboard</h1>
            <p class="text-gray-600 mt-1">Comprehensive Financial Overview & Reporting</p>
        </div>
        <a href="{{ route('admin.reports.master.index') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
            <i class="fas fa-arrow-left mr-2"></i>Back
        </a>
    </div>

    <!-- Quick Filters -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <form method="GET" class="grid grid-cols-1 md:grid-cols-6 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Year</label>
                <select name="year" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option value="">All Years</option>
                    @for($y = now()->year; $y >= 2020; $y--)
                        <option value="{{ $y }}" {{ request('year') == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endfor
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Month</label>
                <select name="month" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option value="">All Months</option>
                    @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" {{ request('month') == $m ? 'selected' : '' }}>{{ \Carbon\Carbon::create(null, $m)->format('F') }}</option>
                    @endfor
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">From Date</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">To Date</label>
                <input type="date" name="date_to" value="{{ request('date_to') }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">&nbsp;</label>
                <div class="flex gap-2">
                    <button type="submit" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium">
                        <i class="fas fa-search mr-2"></i>Filter
                    </button>
                    <a href="{{ route('admin.reports.master.finance-dashboard') }}" class="px-4 py-2 bg-gray-400 text-white rounded-lg hover:bg-gray-500 transition-colors font-medium">
                        Reset
                    </a>
                </div>
            </div>
        </form>
    </div>

    <!-- Key Financial Metrics -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
        <!-- Client Income -->
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-emerald-500 hover:shadow-lg transition-shadow">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <p class="text-emerald-600 font-semibold text-sm uppercase tracking-wide">Client Income</p>
                    <p class="text-4xl font-bold text-gray-900 mt-3">RM {{ number_format($dashStats['total_client_paid'], 0) }}</p>
                    <p class="text-sm text-gray-500 mt-2">{{ $dashStats['completed_payments'] }} completed</p>
                </div>
                <div class="bg-emerald-100 rounded-lg p-3 ml-4">
                    <i class="fas fa-money-bill-wave text-2xl text-emerald-600"></i>
                </div>
            </div>
        </div>

        <!-- Agent Commission -->
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-amber-500 hover:shadow-lg transition-shadow">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <p class="text-amber-600 font-semibold text-sm uppercase tracking-wide">Agent Commission</p>
                    <p class="text-4xl font-bold text-gray-900 mt-3">RM {{ number_format($dashStats['total_agent_paid'], 0) }}</p>
                    <p class="text-sm text-gray-500 mt-2">{{ $dashStats['total_agents'] }} agents active</p>
                </div>
                <div class="bg-amber-100 rounded-lg p-3 ml-4">
                    <i class="fas fa-user-tie text-2xl text-amber-600"></i>
                </div>
            </div>
        </div>

        <!-- Lawyer Invoices -->
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-blue-500 hover:shadow-lg transition-shadow">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <p class="text-blue-600 font-semibold text-sm uppercase tracking-wide">Lawyer Invoices</p>
                    <p class="text-4xl font-bold text-gray-900 mt-3">RM {{ number_format($dashStats['total_lawyer_paid'], 0) }}</p>
                    <p class="text-sm text-gray-500 mt-2">{{ $dashStats['total_lawyers'] }} lawyers</p>
                </div>
                <div class="bg-blue-100 rounded-lg p-3 ml-4">
                    <i class="fas fa-scale-balanced text-2xl text-blue-600"></i>
                </div>
            </div>
        </div>

        <!-- Net Income -->
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-violet-500 hover:shadow-lg transition-shadow">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <p class="text-violet-600 font-semibold text-sm uppercase tracking-wide">Net Income</p>
                    <p class="text-4xl font-bold text-gray-900 mt-3">RM {{ number_format($dashStats['net_income'], 0) }}</p>
                    <p class="text-sm text-gray-500 mt-2">After all payouts</p>
                </div>
                <div class="bg-violet-100 rounded-lg p-3 ml-4">
                    <i class="fas fa-chart-line text-2xl text-violet-600"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Overview Metrics -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
        <!-- Total Transactions -->
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-sky-500 hover:shadow-lg transition-shadow">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <p class="text-sky-600 font-semibold text-sm uppercase tracking-wide">Transactions</p>
                    <p class="text-4xl font-bold text-gray-900 mt-3">{{ $dashStats['total_transactions'] }}</p>
                    <p class="text-sm text-gray-500 mt-2">Total processed</p>
                </div>
                <div class="bg-sky-100 rounded-lg p-3 ml-4">
                    <i class="fas fa-exchange-alt text-2xl text-sky-600"></i>
                </div>
            </div>
        </div>

        <!-- Wills Created -->
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-green-500 hover:shadow-lg transition-shadow">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <p class="text-green-600 font-semibold text-sm uppercase tracking-wide">Wills Created</p>
                    <p class="text-4xl font-bold text-gray-900 mt-3">{{ $dashStats['total_wills'] }}</p>
                    <p class="text-sm text-gray-500 mt-2">+{{ $dashStats['wills_created_this_period'] }} this period</p>
                </div>
                <div class="bg-green-100 rounded-lg p-3 ml-4">
                    <i class="fas fa-file-contract text-2xl text-green-600"></i>
                </div>
            </div>
        </div>

        <!-- Total Clients -->
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-indigo-500 hover:shadow-lg transition-shadow">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <p class="text-indigo-600 font-semibold text-sm uppercase tracking-wide">Total Clients</p>
                    <p class="text-4xl font-bold text-gray-900 mt-3">{{ $dashStats['total_clients'] }}</p>
                    <p class="text-sm text-gray-500 mt-2">+{{ $dashStats['new_clients'] }} new</p>
                </div>
                <div class="bg-indigo-100 rounded-lg p-3 ml-4">
                    <i class="fas fa-users text-2xl text-indigo-600"></i>
                </div>
            </div>
        </div>

        <!-- Wills Paid Status -->
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-rose-500 hover:shadow-lg transition-shadow">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <p class="text-rose-600 font-semibold text-sm uppercase tracking-wide">Wills Paid</p>
                    <p class="text-4xl font-bold text-gray-900 mt-3">{{ $dashStats['wills_paid'] }}</p>
                    <p class="text-sm text-gray-500 mt-2">{{ $dashStats['wills_pending_payment'] }} pending</p>
                </div>
                <div class="bg-rose-100 rounded-lg p-3 ml-4">
                    <i class="fas fa-check-circle text-2xl text-rose-600"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Status Breakdown -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-teal-500 hover:shadow-lg transition-shadow">
            <p class="text-teal-600 font-semibold text-sm uppercase tracking-wide">Completed</p>
            <p class="text-4xl font-bold text-gray-900 mt-3">{{ $dashStats['completed_payments'] }}</p>
            <p class="text-sm text-gray-500 mt-2">{{ number_format(($dashStats['completed_payments'] / ($dashStats['total_transactions'] ?: 1)) * 100, 1) }}% success rate</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-amber-500 hover:shadow-lg transition-shadow">
            <p class="text-amber-600 font-semibold text-sm uppercase tracking-wide">Pending</p>
            <p class="text-4xl font-bold text-gray-900 mt-3">{{ $dashStats['pending_payments'] }}</p>
            <p class="text-sm text-gray-500 mt-2">Awaiting completion</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-red-500 hover:shadow-lg transition-shadow">
            <p class="text-red-600 font-semibold text-sm uppercase tracking-wide">Failed</p>
            <p class="text-4xl font-bold text-gray-900 mt-3">{{ $dashStats['failed_payments'] }}</p>
            <p class="text-sm text-gray-500 mt-2">Needs review</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-purple-500 hover:shadow-lg transition-shadow">
            <p class="text-purple-600 font-semibold text-sm uppercase tracking-wide">Success Rate</p>
            <p class="text-4xl font-bold text-gray-900 mt-3">{{ number_format(($dashStats['completed_payments'] / ($dashStats['total_transactions'] ?: 1)) * 100, 0) }}%</p>
            <p class="text-sm text-gray-500 mt-2">Overall performance</p>
        </div>
    </div>

    <!-- Profit Breakdown Section -->
    <div class="bg-white rounded-lg shadow-md p-8 mb-8 border-2 border-gray-100">
        <h2 class="text-2xl font-bold text-gray-900 mb-6">
            <i class="fas fa-calculator text-blue-600 mr-3"></i>Profit Breakdown
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
            <!-- Total Income -->
            <div class="bg-gradient-to-br from-emerald-50 to-emerald-100 p-6 rounded-lg border-l-4 border-emerald-600">
                <p class="text-emerald-700 font-semibold text-sm uppercase">Total Client Income</p>
                <p class="text-3xl font-bold text-emerald-600 mt-2">RM {{ number_format($dashStats['total_client_paid'], 0) }}</p>
                <p class="text-xs text-gray-500 mt-1">Money In</p>
            </div>

            <!-- Less: Agent Commission -->
            <div class="flex items-center justify-center">
                <div class="text-center">
                    <i class="fas fa-minus text-3xl text-gray-400 mb-2"></i>
                    <p class="text-xs text-gray-500 font-semibold">Less</p>
                </div>
            </div>

            <div class="bg-gradient-to-br from-amber-50 to-amber-100 p-6 rounded-lg border-l-4 border-amber-600">
                <p class="text-amber-700 font-semibold text-sm uppercase">Agent Commission</p>
                <p class="text-3xl font-bold text-amber-600 mt-2">RM {{ number_format($dashStats['total_agent_paid'], 0) }}</p>
                <p class="text-xs text-gray-500 mt-1">Paid Out</p>
            </div>

            <!-- Less: Lawyer Commission -->
            <div class="flex items-center justify-center">
                <div class="text-center">
                    <i class="fas fa-minus text-3xl text-gray-400 mb-2"></i>
                    <p class="text-xs text-gray-500 font-semibold">Less</p>
                </div>
            </div>

            <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-lg border-l-4 border-blue-600">
                <p class="text-blue-700 font-semibold text-sm uppercase">Lawyer Invoices</p>
                <p class="text-3xl font-bold text-blue-600 mt-2">RM {{ number_format($dashStats['total_lawyer_paid'], 0) }}</p>
                <p class="text-xs text-gray-500 mt-1">Paid Out</p>
            </div>
        </div>

        <!-- Net Profit Result -->
        <div class="mt-6 pt-6 border-t-2 border-gray-200">
            <div class="bg-gradient-to-r from-violet-500 to-purple-600 rounded-lg p-6 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-violet-100 font-semibold text-sm uppercase mb-1">Net Profit After All Deductions</p>
                        <p class="text-5xl font-bold">RM {{ number_format($dashStats['net_income'], 0) }}</p>
                        <p class="text-violet-200 mt-2">Your remaining income after agent & lawyer payments</p>
                    </div>
                    <div class="text-right">
                        @php
                            $profitMargin = $dashStats['total_client_paid'] > 0 ? ($dashStats['net_income'] / $dashStats['total_client_paid']) * 100 : 0;
                        @endphp
                        <p class="text-4xl font-bold opacity-80">{{ number_format($profitMargin, 1) }}%</p>
                        <p class="text-violet-200 text-sm">Profit Margin</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Breakdown Details -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">
                <i class="fas fa-money-bill-wave text-emerald-600 mr-2"></i>Income Breakdown
            </h3>
            <div class="space-y-4">
                <div class="flex items-center justify-between pb-3 border-b">
                    <span class="text-gray-700">Total Income</span>
                    <span class="text-xl font-bold text-emerald-600">RM {{ number_format($dashStats['total_client_paid'], 0) }}</span>
                </div>
                <div class="flex items-center justify-between text-sm text-gray-600">
                    <span>From {{ $dashStats['total_transactions'] }} transactions</span>
                    <span class="font-semibold">{{ $dashStats['completed_payments'] }} completed</span>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">
                <i class="fas fa-user-tie text-amber-600 mr-2"></i>Agent Payments
            </h3>
            <div class="space-y-4">
                <div class="flex items-center justify-between pb-3 border-b">
                    <span class="text-gray-700">Total Paid</span>
                    <span class="text-xl font-bold text-amber-600">RM {{ number_format($dashStats['total_agent_paid'], 0) }}</span>
                </div>
                @if($dashStats['agent_commission_breakdown'] && $dashStats['agent_commission_breakdown']->count() > 0)
                    <div class="text-sm text-gray-600 space-y-2">
                        @foreach($dashStats['agent_commission_breakdown'] as $breakdown)
                            <div class="flex items-center justify-between bg-gray-50 p-2 rounded">
                                <span class="font-medium">{{ $breakdown->user->name ?? 'Unknown Agent' }}</span>
                                <span class="text-amber-600 font-semibold">RM {{ number_format($breakdown->total_commission, 0) }}</span>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-sm text-gray-500">No agent commissions in this period</div>
                @endif
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">
                <i class="fas fa-scale-balanced text-blue-600 mr-2"></i>Lawyer Payments
            </h3>
            <div class="space-y-4">
                <div class="flex items-center justify-between pb-3 border-b">
                    <span class="text-gray-700">Total Paid</span>
                    <span class="text-xl font-bold text-blue-600">RM {{ number_format($dashStats['total_lawyer_paid'], 0) }}</span>
                </div>
                <div class="flex items-center justify-between text-sm text-gray-600">
                    <span>To {{ $dashStats['total_lawyers'] }} lawyers</span>
                    <span class="font-semibold">{{ $dashStats['total_lawyers'] > 0 ? number_format($dashStats['total_lawyer_paid'] / $dashStats['total_lawyers'], 0) : 0 }} avg</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Creation Stats -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">
                <i class="fas fa-chart-bar text-blue-600 mr-2"></i>By Lawyers
            </h3>
            <div class="space-y-3">
                <div class="flex items-center justify-between">
                    <span class="text-gray-700">Total Lawyers</span>
                    <span class="text-2xl font-bold text-blue-600">{{ $dashStats['total_lawyers'] }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-gray-700">Wills Created by Lawyers</span>
                    <span class="text-2xl font-bold text-green-600">{{ $dashStats['wills_by_lawyers'] }}</span>
                </div>
                @if($dashStats['total_lawyers'] > 0)
                <div class="border-t pt-3 text-sm text-gray-600">
                    <p>Avg Wills per Lawyer: <span class="font-bold text-gray-900">{{ number_format($dashStats['wills_by_lawyers'] / $dashStats['total_lawyers'], 1) }}</span></p>
                </div>
                @endif
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">
                <i class="fas fa-chart-bar text-purple-600 mr-2"></i>By Agents
            </h3>
            <div class="space-y-3">
                <div class="flex items-center justify-between">
                    <span class="text-gray-700">Total Agents</span>
                    <span class="text-2xl font-bold text-purple-600">{{ $dashStats['total_agents'] }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-gray-700">Wills Created by Agents</span>
                    <span class="text-2xl font-bold text-green-600">{{ $dashStats['wills_by_agents'] }}</span>
                </div>
                @if($dashStats['total_agents'] > 0)
                <div class="border-t pt-3 text-sm text-gray-600">
                    <p>Avg Wills per Agent: <span class="font-bold text-gray-900">{{ number_format($dashStats['wills_by_agents'] / $dashStats['total_agents'], 1) }}</span></p>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Transaction Details Table -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="p-6 border-b">
            <h2 class="text-xl font-bold text-gray-900">
                <i class="fas fa-table mr-2 text-blue-600"></i>Transaction Details
            </h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-gray-900 text-white">
                        <th class="px-6 py-4 text-left font-semibold">ID</th>
                        <th class="px-6 py-4 text-left font-semibold">Will ID</th>
                        <th class="px-6 py-4 text-left font-semibold">Client Name</th>
                        <th class="px-6 py-4 text-right font-semibold">Amount</th>
                        <th class="px-6 py-4 text-left font-semibold">Transfer To</th>
                        <th class="px-6 py-4 text-left font-semibold">Status</th>
                        <th class="px-6 py-4 text-left font-semibold">Method</th>
                        <th class="px-6 py-4 text-left font-semibold">Date & Time</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @forelse($payments as $payment)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 font-mono text-xs font-bold text-blue-600">#{{ $payment->id }}</td>
                        <td class="px-6 py-4 font-mono text-xs text-gray-600">{{ $payment->will_id ?? 'N/A' }}</td>
                        <td class="px-6 py-4 font-medium text-gray-900">
                            @if($payment->will && $payment->will->client)
                                {{ $payment->will->client->full_name }}
                            @elseif($payment->client)
                                {{ $payment->client->full_name }}
                            @elseif($payment->user_id && $payment->user)
                                Admin
                            @else
                                N/A
                            @endif
                        </td>
                        <td class="px-6 py-4 text-right font-bold text-green-600">RM {{ number_format($payment->amount, 2) }}</td>
                        <td class="px-6 py-4">
                            @php
                                $transferTo = 'Unknown';
                                $badgeClass = 'bg-gray-100 text-gray-800';
                                $icon = 'fa-question-circle';
                                $description = '';
                                
                                // Priority 1: Check if payment has a user_id (admin sending to agent/lawyer)
                                if ($payment->user_id && $payment->user) {
                                    $transferTo = $payment->user->name ?? 'Unknown User';
                                    $description = $payment->user->name . ' (' . ucfirst($payment->user->role ?? 'user') . ')';
                                    $userRole = $payment->user->role ?? null;
                                    
                                    if ($userRole === 'agent') {
                                        $badgeClass = 'bg-purple-100 text-purple-800';
                                        $icon = 'fa-user-tie';
                                    } elseif ($userRole === 'lawyer') {
                                        $badgeClass = 'bg-indigo-100 text-indigo-800';
                                        $icon = 'fa-scale-balanced';
                                    }
                                }
                                // Priority 2: Check if it's from a client (admin receives money)
                                elseif ($payment->client_id || ($payment->will && $payment->will->client)) {
                                    $transferTo = 'Admin';
                                    $badgeClass = 'bg-blue-100 text-blue-800';
                                    $icon = 'fa-building';
                                    $description = 'Company Account';
                                }
                                // Priority 3: Check payment method for lawyer invoices
                                elseif ($payment->amount && (strpos($payment->payment_method ?? '', 'lawyer') !== false || strpos(strtolower($payment->notes ?? ''), 'lawyer') !== false)) {
                                    $transferTo = 'Lawyer';
                                    $badgeClass = 'bg-indigo-100 text-indigo-800';
                                    $icon = 'fa-scale-balanced';
                                    $description = 'Lawyer Invoice';
                                }
                            @endphp
                            <div class="flex flex-col">
                                <span class="inline-block px-3 py-1 {{ $badgeClass }} rounded-full text-xs font-semibold w-fit">
                                    <i class="fas {{ $icon }} mr-1"></i>{{ $transferTo }}
                                </span>
                                <span class="text-xs text-gray-500 mt-1">{{ $description }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            @php
                                $statusClass = match($payment->status ?? 'pending') {
                                    'completed' => 'bg-green-100 text-green-800',
                                    'pending' => 'bg-yellow-100 text-yellow-800',
                                    'failed' => 'bg-red-100 text-red-800',
                                    default => 'bg-gray-100 text-gray-800'
                                };
                            @endphp
                            <span class="inline-block px-3 py-1 {{ $statusClass }} rounded-full text-xs font-semibold">
                                {{ ucfirst($payment->status ?? 'pending') }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-gray-700">{{ $payment->payment_method ?? 'N/A' }}</td>
                        <td class="px-6 py-4 text-gray-600">{{ $payment->created_at->format('d M Y H:i') }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                            <i class="fas fa-inbox text-3xl mb-3 block opacity-50"></i>
                            <span>No transactions found for selected filters</span>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <!-- Pagination -->
        @if($payments->total() > 0)
        <div class="px-6 py-4 border-t bg-gray-50">
            <div class="flex items-center justify-between">
                <div class="text-sm text-gray-600">
                    Showing <span class="font-semibold">{{ $payments->firstItem() }}</span> to <span class="font-semibold">{{ $payments->lastItem() }}</span> of <span class="font-semibold">{{ $payments->total() }}</span> transactions
                </div>
                <div>
                    {{ $payments->links() }}
                </div>
            </div>
        </div>
        @endif
    </div>

    <!-- Quick Links -->
    <!-- <div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
        <a href="{{ route('admin.reports.master.clients') }}" class="p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg shadow-md hover:shadow-lg transition-all text-center">
            <i class="fas fa-users text-blue-600 text-2xl mb-2 block"></i>
            <p class="text-sm font-semibold text-gray-900">Clients Report</p>
        </a>
        <a href="{{ route('admin.reports.master.wills') }}" class="p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-lg shadow-md hover:shadow-lg transition-all text-center">
            <i class="fas fa-file-contract text-green-600 text-2xl mb-2 block"></i>
            <p class="text-sm font-semibold text-gray-900">Wills Report</p>
        </a>
        <a href="{{ route('admin.reports.master.financial') }}" class="p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg shadow-md hover:shadow-lg transition-all text-center">
            <i class="fas fa-money-bill-wave text-purple-600 text-2xl mb-2 block"></i>
            <p class="text-sm font-semibold text-gray-900">Financial Report</p>
        </a>
        <a href="{{ route('admin.reports.master.commission-hierarchy') }}" class="p-4 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg shadow-md hover:shadow-lg transition-all text-center">
            <i class="fas fa-project-diagram text-orange-600 text-2xl mb-2 block"></i>
            <p class="text-sm font-semibold text-gray-900">Commission Hierarchy</p>
        </a>
    </div> -->
</div>

<style>
    .sidebar-item.active a {
        background-color: rgba(59, 130, 246, 0.1);
        border-left: 3px solid #3b82f6;
        padding-left: calc(0.5rem - 3px);
    }
</style>
@endsection