@extends('layout.main')

@section('content')
    <div class="container mx-auto px-4 py-8" x-data="incomesTabs()">
        <!-- Page Header -->
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Income Management</h1>
                <p class="text-gray-600 dark:text-gray-400">Track all income sources from loans, charges, and penalties</p>
            </div>
            <div class="flex items-center space-x-2">
                <!-- Summary Stats Cards - Optional -->
                <div class="hidden md:flex space-x-4">
                    <div class="text-center">
                        <p class="text-sm text-gray-500 dark:text-gray-400">Total Income</p>
                        <p class="text-lg font-bold text-green-600 dark:text-green-400">
                            @php
                                $totalIncome = $loanCharges->sum(function($loan) {
                                    return $loan->charges->sum('pivot.amount');
                                }) + $clientCharges->sum('charge.amount') + $loanInterests->sum('interest_paid') + $loanPenalties->sum('amount');
                            @endphp
                            {{ formatCurrencyDecimals($totalIncome) }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Income Tabs -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-6">
            <div class="border-b border-gray-200 dark:border-gray-700">
                <ul class="flex flex-wrap -mb-px">
                    <li class="mr-2">
                        <a href="#" @click.prevent="setActiveTab('loan-charges')"
                           class="inline-block p-4 border-b-2 rounded-t-lg transition-colors"
                           :class="activeTab === 'loan-charges' ? 'text-purple-600 border-purple-600 active dark:text-purple-400 dark:border-purple-400' : 'text-gray-500 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'">
                            <i class="fa fa-money-bill mr-2"></i>
                            Loan Charges ({{ $loanCharges->sum(function($loan) { return $loan->charges->count(); }) }})
                        </a>
                    </li>
                    <li class="mr-2">
                        <a href="#" @click.prevent="setActiveTab('client-charges')"
                           class="inline-block p-4 border-b-2 rounded-t-lg transition-colors"
                           :class="activeTab === 'client-charges' ? 'text-purple-600 border-purple-600 active dark:text-purple-400 dark:border-purple-400' : 'text-gray-500 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'">
                            <i class="fa fa-user-tag mr-2"></i>
                            Client Charges ({{ $clientCharges->count() }})
                        </a>
                    </li>
                    <li class="mr-2">
                        <a href="#" @click.prevent="setActiveTab('loan-interests')"
                           class="inline-block p-4 border-b-2 rounded-t-lg transition-colors"
                           :class="activeTab === 'loan-interests' ? 'text-purple-600 border-purple-600 active dark:text-purple-400 dark:border-purple-400' : 'text-gray-500 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'">
                            <i class="fa fa-percentage mr-2"></i>
                            Loan Interests ({{ $loanInterests->count() }})
                        </a>
                    </li>
                    <li class="mr-2">
                        <a href="#" @click.prevent="setActiveTab('loan-penalties')"
                           class="inline-block p-4 border-b-2 rounded-t-lg transition-colors"
                           :class="activeTab === 'loan-penalties' ? 'text-purple-600 border-purple-600 active dark:text-purple-400 dark:border-purple-400' : 'text-gray-500 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'">
                            <i class="fa fa-exclamation-triangle mr-2"></i>
                            Loan Penalties ({{ $loanPenalties->count() }})
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Tab Content -->
            <div class="p-6">
                <!-- Loan Charges Tab -->
                <div x-show="activeTab === 'loan-charges'" 
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform translate-y-2"
                     x-transition:enter-end="opacity-100 transform translate-y-0">
                    
                    <!-- Summary Card for Loan Charges -->
                    <div class="bg-purple-50 dark:bg-purple-900 rounded-lg p-4 mb-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <h3 class="text-lg font-semibold text-purple-800 dark:text-purple-200">Loan Charges Summary</h3>
                                <p class="text-purple-600 dark:text-purple-400">Income generated from loan-related charges</p>
                            </div>
                            <div class="text-center">
                                <p class="text-sm text-purple-600 dark:text-purple-400">Total Amount</p>
                                <p class="text-2xl font-bold text-purple-800 dark:text-purple-200">
                                    {{ formatCurrencyDecimals($loanCharges->sum(function($loan) { return $loan->charges->sum('pivot.amount'); })) }}
                                </p>
                            </div>
                        </div>
                    </div>

                    @if($loanCharges->count() > 0)
                        <div class="overflow-x-auto">
                            <x-table.table datatable>
                                <x-table.head>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="fa fa-code mr-2 text-gray-400"></i>
                                            Loan Code
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="fa fa-tag mr-2 text-gray-400"></i>
                                            Charge Type
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="mr-2 text-gray-400">{{getCurrencyCode()}}</i>
                                            Amount
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="fa fa-calendar mr-2 text-gray-400"></i>
                                            Date Applied
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">Actions</th>
                                </x-table.head>
                                <x-table.body>
                                    @foreach ($loanCharges as $loanCharge)
                                        @foreach ($loanCharge->charges as $charge)
                                            <x-table.row>
                                                <x-table.cell>
                                                    <div class="flex items-center">
                                                        <span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 rounded-full">
                                                            {{ $loanCharge?->loan_code }}
                                                        </span>
                                                    </div>
                                                </x-table.cell>
                                                <x-table.cell>
                                                    <div class="flex items-center">
                                                        <i class="fa fa-money-bill text-purple-500 mr-2"></i>
                                                        {{ $loanCharge?->charge?->name }}
                                                    </div>
                                                </x-table.cell>
                                                <x-table.cell>
                                                    <span class="font-semibold text-green-600 dark:text-green-400">
                                                        {{ formatAmount($charge?->pivot->amount) }}
                                                    </span>
                                                </x-table.cell>
                                                <x-table.cell>
                                                    <span class="text-gray-600 dark:text-gray-400">
                                                        {{ $charge?->pivot->created_at ? \Carbon\Carbon::parse($charge->pivot->created_at)->format('d M, Y') : 'N/A' }}
                                                    </span>
                                                </x-table.cell>
                                                <x-table.cell>
                                                    <x-tooltip message="View loan details" position="left">
                                                        <a href="{{ route('loans.show', ['loan' => $loanCharge]) }}"
                                                           class="inline-flex items-center px-3 py-1 text-sm font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700 transition-colors">
                                                            <i class="fa fa-eye mr-1"></i>
                                                            View Loan
                                                        </a>
                                                    </x-tooltip>
                                                </x-table.cell>
                                            </x-table.row>
                                        @endforeach
                                    @endforeach
                                </x-table.body>
                            </x-table.table>
                        </div>
                    @else
                        <div class="text-center py-12">
                            <i class="fa fa-money-bill text-6xl text-gray-300 dark:text-gray-600 mb-4"></i>
                            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No loan charges found</h3>
                            <p class="text-gray-500 dark:text-gray-400">No income from loan charges has been recorded yet.</p>
                        </div>
                    @endif
                </div>

                <!-- Client Charges Tab -->
                <div x-show="activeTab === 'client-charges'" 
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform translate-y-2"
                     x-transition:enter-end="opacity-100 transform translate-y-0">
                    
                    <!-- Summary Card for Client Charges -->
                    <div class="bg-blue-50 dark:bg-blue-900 rounded-lg p-4 mb-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200">Client Charges Summary</h3>
                                <p class="text-blue-600 dark:text-blue-400">Income generated from client-specific charges</p>
                            </div>
                            <div class="text-center">
                                <p class="text-sm text-blue-600 dark:text-blue-400">Total Amount</p>
                                <p class="text-2xl font-bold text-blue-800 dark:text-blue-200">
                                    {{ formatCurrencyDecimals($clientCharges->sum('charge.amount')) }}
                                </p>
                            </div>
                        </div>
                    </div>

                    @if($clientCharges->count() > 0)
                        <div class="overflow-x-auto">
                            <x-table.table datatable>
                                <x-table.head>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="fa fa-tag mr-2 text-gray-400"></i>
                                            Charge Type
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="mr-2 text-gray-400">{{getCurrencyCode()}}</i>
                                            Amount
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="fa fa-calendar mr-2 text-gray-400"></i>
                                            Date Paid
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="fa fa-user mr-2 text-gray-400"></i>
                                            Client Name
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">Actions</th>
                                </x-table.head>
                                <x-table.body>
                                    @foreach ($clientCharges as $clientCharge)
                                        <x-table.row>
                                            <x-table.cell>
                                                <div class="flex items-center">
                                                    <i class="fa fa-user-tag text-blue-500 mr-2"></i>
                                                    {{ $clientCharge?->charge?->name }}
                                                </div>
                                            </x-table.cell>
                                            <x-table.cell>
                                                <span class="font-semibold text-green-600 dark:text-green-400">
                                                    {{ formatAmount($clientCharge?->charge?->amount) }}
                                                </span>
                                            </x-table.cell>
                                            <x-table.cell>
                                                <span class="text-gray-600 dark:text-gray-400">
                                                    {{ $clientCharge?->created_at->format('D, d M Y') }}
                                                </span>
                                            </x-table.cell>
                                            <x-table.cell>
                                                <div class="flex items-center">
                                                    <div class="w-8 h-8 bg-gray-300 dark:bg-gray-600 rounded-full flex items-center justify-center mr-3">
                                                        <i class="fa fa-user text-gray-600 dark:text-gray-300 text-sm"></i>
                                                    </div>
                                                    <span class="font-medium text-gray-900 dark:text-white">
                                                        {{ $clientCharge?->fullname }}
                                                    </span>
                                                </div>
                                            </x-table.cell>
                                            <x-table.cell>
                                                @if ($clientCharge)
                                                    <x-tooltip message="View client details" position="left">
                                                        <a href="{{ route('clients.show', ['client' => $clientCharge]) }}"
                                                           class="inline-flex items-center px-3 py-1 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 transition-colors">
                                                            <i class="fa fa-eye mr-1"></i>
                                                            View Client
                                                        </a>
                                                    </x-tooltip>
                                                @endif
                                            </x-table.cell>
                                        </x-table.row>
                                    @endforeach
                                </x-table.body>
                            </x-table.table>
                        </div>
                    @else
                        <div class="text-center py-12">
                            <i class="fa fa-user-tag text-6xl text-gray-300 dark:text-gray-600 mb-4"></i>
                            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No client charges found</h3>
                            <p class="text-gray-500 dark:text-gray-400">No income from client charges has been recorded yet.</p>
                        </div>
                    @endif
                </div>

                <!-- Loan Interests Tab -->
                <div x-show="activeTab === 'loan-interests'" 
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform translate-y-2"
                     x-transition:enter-end="opacity-100 transform translate-y-0">
                    
                    <!-- Summary Card for Loan Interests -->
                    <div class="bg-green-50 dark:bg-green-900 rounded-lg p-4 mb-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <h3 class="text-lg font-semibold text-green-800 dark:text-green-200">Loan Interests Summary</h3>
                                <p class="text-green-600 dark:text-green-400">Income generated from loan interest payments</p>
                            </div>
                            <div class="text-center">
                                <p class="text-sm text-green-600 dark:text-green-400">Total Amount</p>
                                <p class="text-2xl font-bold text-green-800 dark:text-green-200">
                                    {{ formatCurrencyDecimals($loanInterests->sum('interest_paid')) }}
                                </p>
                            </div>
                        </div>
                    </div>

                    @if($loanInterests->count() > 0)
                        <div class="overflow-x-auto">
                            <x-table.table datatable>
                                <x-table.head>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="fa fa-code mr-2 text-gray-400"></i>
                                            Loan Code
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="mr-2 text-gray-400">{{getCurrencyCode()}}</i>
                                            Interest Amount
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="fa fa-calendar mr-2 text-gray-400"></i>
                                            Date Paid
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="fa fa-info-circle mr-2 text-gray-400"></i>
                                            Payment Status
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">Actions</th>
                                </x-table.head>
                                <x-table.body>
                                    @foreach ($loanInterests as $loanInterest)
                                        <x-table.row>
                                            <x-table.cell>
                                                <div class="flex items-center">
                                                    <span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 rounded-full">
                                                        {{ $loanInterest?->loan?->loan_code }}
                                                    </span>
                                                </div>
                                            </x-table.cell>
                                            <x-table.cell>
                                                <span class="font-semibold text-green-600 dark:text-green-400">
                                                    {{ formatAmount($loanInterest?->interest_paid) }}
                                                </span>
                                            </x-table.cell>
                                            <x-table.cell>
                                                <span class="text-gray-600 dark:text-gray-400">
                                                    {{ $loanInterest?->updated_at->format('D, d M Y') }}
                                                </span>
                                            </x-table.cell>
                                            <x-table.cell>
                                                <span class="px-2 py-1 text-xs font-semibold rounded-full 
                                                    {{ $loanInterest->status === 'paid' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 
                                                       ($loanInterest->status === 'partial' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' : 
                                                        'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200') }}">
                                                    {{ ucfirst($loanInterest->status ?? 'pending') }}
                                                </span>
                                            </x-table.cell>
                                            <x-table.cell>
                                                @if ($loanInterest?->loan)
                                                    <x-tooltip message="View loan details" position="left">
                                                        <a href="{{ route('loans.show', ['loan' => $loanInterest?->loan]) }}"
                                                           class="inline-flex items-center px-3 py-1 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700 transition-colors">
                                                            <i class="fa fa-eye mr-1"></i>
                                                            View Loan
                                                        </a>
                                                    </x-tooltip>
                                                @endif
                                            </x-table.cell>
                                        </x-table.row>
                                    @endforeach
                                </x-table.body>
                            </x-table.table>
                        </div>
                    @else
                        <div class="text-center py-12">
                            <i class="fa fa-percentage text-6xl text-gray-300 dark:text-gray-600 mb-4"></i>
                            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No loan interests found</h3>
                            <p class="text-gray-500 dark:text-gray-400">No income from loan interests has been recorded yet.</p>
                        </div>
                    @endif
                </div>

                <!-- Loan Penalties Tab -->
                <div x-show="activeTab === 'loan-penalties'" 
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform translate-y-2"
                     x-transition:enter-end="opacity-100 transform translate-y-0">
                    
                    <!-- Summary Card for Loan Penalties -->
                    <div class="bg-red-50 dark:bg-red-900 rounded-lg p-4 mb-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <h3 class="text-lg font-semibold text-red-800 dark:text-red-200">Loan Penalties Summary</h3>
                                <p class="text-red-600 dark:text-red-400">Income generated from loan penalty charges</p>
                            </div>
                            <div class="text-center">
                                <p class="text-sm text-red-600 dark:text-red-400">Total Amount</p>
                                <p class="text-2xl font-bold text-red-800 dark:text-red-200">
                                    {{ formatCurrencyDecimals($loanPenalties->sum('amount')) }}
                                </p>
                            </div>
                        </div>
                    </div>

                    @if($loanPenalties->count() > 0)
                        <div class="overflow-x-auto">
                            <x-table.table datatable>
                                <x-table.head>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="fa fa-code mr-2 text-gray-400"></i>
                                            Loan Code
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="fa fa-exclamation-triangle mr-2 text-gray-400"></i>
                                            Penalty Type
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="mr-2 text-gray-400">{{getCurrencyCode()}}</i>
                                            Amount
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="fa fa-calendar mr-2 text-gray-400"></i>
                                            Date Applied
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">
                                        <div class="flex items-center">
                                            <i class="fa fa-info-circle mr-2 text-gray-400"></i>
                                            Status
                                        </div>
                                    </th>
                                    <th class="px-4 py-3">Actions</th>
                                </x-table.head>
                                <x-table.body>
                                    @foreach ($loanPenalties as $penalty)
                                        <x-table.row>
                                            <x-table.cell>
                                                <div class="flex items-center">
                                                    <span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 rounded-full">
                                                        {{ $penalty?->loan?->loan_code }}
                                                    </span>
                                                </div>
                                            </x-table.cell>
                                            <x-table.cell>
                                                <div class="flex items-center">
                                                    <i class="fa fa-exclamation-triangle text-red-500 mr-2"></i>
                                                    {{ $penalty?->loanProductPenalty?->name ?? 'Late Payment' }}
                                                </div>
                                            </x-table.cell>
                                            <x-table.cell>
                                                <span class="font-semibold text-red-600 dark:text-red-400">
                                                    {{ formatAmount($penalty?->amount) }}
                                                </span>
                                            </x-table.cell>
                                            <x-table.cell>
                                                <span class="text-gray-600 dark:text-gray-400">
                                                    {{ $penalty?->created_at?->format('D, d M Y') ?? 'N/A' }}
                                                </span>
                                            </x-table.cell>
                                            <x-table.cell>
                                                <span class="px-2 py-1 text-xs font-semibold rounded-full 
                                                    {{ isset($penalty->payment) && $penalty->payment ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' }}">
                                                    {{ isset($penalty->payment) && $penalty->payment ? 'Paid' : 'Pending' }}
                                                </span>
                                            </x-table.cell>
                                            <x-table.cell>
                                                @if ($penalty?->loan)
                                                    <x-tooltip message="View loan details" position="left">
                                                        <a href="{{ route('loans.show', ['loan' => $penalty->loan]) }}"
                                                           class="inline-flex items-center px-3 py-1 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 transition-colors">
                                                            <i class="fa fa-eye mr-1"></i>
                                                            View Loan
                                                        </a>
                                                    </x-tooltip>
                                                @endif
                                            </x-table.cell>
                                        </x-table.row>
                                    @endforeach
                                </x-table.body>
                            </x-table.table>
                        </div>
                    @else
                        <div class="text-center py-12">
                            <i class="fa fa-exclamation-triangle text-6xl text-gray-300 dark:text-gray-600 mb-4"></i>
                            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No loan penalties found</h3>
                            <p class="text-gray-500 dark:text-gray-400">No income from loan penalties has been recorded yet.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Overall Summary Card -->
        <div class="bg-gradient-to-r from-purple-500 to-blue-600 rounded-lg shadow-lg p-6 text-white">
            <h3 class="text-xl font-bold mb-4">Overall Income Summary</h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="text-center">
                    <p class="text-purple-200">Loan Charges</p>
                    <p class="text-2xl font-bold">
                        {{ formatCurrencyDecimals($loanCharges->sum(function($loan) { return $loan->charges->sum('pivot.amount'); })) }}
                    </p>
                </div>
                <div class="text-center">
                    <p class="text-purple-200">Client Charges</p>
                    <p class="text-2xl font-bold">
                        {{ formatCurrencyDecimals($clientCharges->sum('charge.amount')) }}
                    </p>
                </div>
                <div class="text-center">
                    <p class="text-purple-200">Loan Interests</p>
                    <p class="text-2xl font-bold">
                        {{ formatCurrencyDecimals($loanInterests->sum('interest_paid')) }}
                    </p>
                </div>
                <div class="text-center border-l-2 border-purple-300">
                    <p class="text-purple-200">Loan Penalties</p>
                    <p class="text-2xl font-bold">
                        {{ formatCurrencyDecimals($loanPenalties->sum('amount')) }}
                    </p>
                </div>
            </div>
            <div class="mt-6 pt-4 border-t border-purple-300">
                <div class="text-center">
                    <p class="text-purple-200 text-lg">Total Income</p>
                    <p class="text-4xl font-bold">
                        @php
                            $grandTotal = $loanCharges->sum(function($loan) {
                                return $loan->charges->sum('pivot.amount');
                            }) + $clientCharges->sum('charge.amount') + $loanInterests->sum('interest_paid') + $loanPenalties->sum('amount');
                        @endphp
                        {{ formatCurrencyDecimals($grandTotal) }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script>
        function incomesTabs() {
            return {
                activeTab: 'loan-charges', // Default to loan charges tab
                
                init() {
                    // Load saved tab from localStorage
                    const savedTab = localStorage.getItem('incomesActiveTab');
                    if (savedTab) {
                        this.activeTab = savedTab;
                    }
                },
                
                setActiveTab(tab) {
                    this.activeTab = tab;
                    // Save to localStorage
                    localStorage.setItem('incomesActiveTab', tab);
                }
            }
        }
    </script>
@endsection