@extends('dashboard.layout')

@section('title', 'Payment Invoices - Invo Security')
@section('page-title', 'Payment Invoices')
@section('page-subtitle', 'Manage and track all payment transactions')

@section('header-actions')
<button class="px-4 py-2 rounded-xl bg-gradient-to-r from-primary-600 to-primary-700 text-white font-semibold shadow-lg hover:shadow-xl hover:from-primary-700 hover:to-primary-800 active:scale-95 transition-all duration-300 flex items-center gap-2">
    <i class="fas fa-plus text-sm"></i>
    <span class="text-sm">New Invoice</span>
</button>
@endsection

@section('content')
<div class="animate-fade-in">
    <!-- Stats Overview -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Total Invoices -->
        <div class="glass rounded-xl p-6 hover:shadow-xl transition-all duration-300 animate-slide-up">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Total Invoices</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ $payments->count() }}</p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/10 to-blue-600/10 flex items-center justify-center">
                    <i class="fas fa-file-invoice text-blue-500 dark:text-blue-400 text-xl"></i>
                </div>
            </div>
            <div class="mt-6 pt-4 border-t border-gray-100 dark:border-gray-700">
                <div class="flex items-center gap-2">
                    <i class="fas fa-chart-line text-green-500 text-sm"></i>
                    <p class="text-xs text-gray-500 dark:text-gray-400">All payment records</p>
                </div>
            </div>
        </div>

        <!-- Total Amount -->
        <div class="glass rounded-xl p-6 hover:shadow-xl transition-all duration-300 animate-slide-up delay-100">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Total Amount</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white">
                        {{ number_format($payments->sum('amount'), 2) }} SR
                    </p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500/10 to-green-600/10 flex items-center justify-center">
                    <i class="fas fa-money-bill-wave text-green-500 dark:text-green-400 text-xl"></i>
                </div>
            </div>
            <div class="mt-6 pt-4 border-t border-gray-100 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500 dark:text-gray-400">Revenue</span>
                    <span class="text-xs font-bold text-green-600 dark:text-green-400">100%</span>
                </div>
                <div class="modern-progress mt-2">
                    <div class="modern-progress-fill bg-gradient-to-r from-green-500 to-emerald-600" style="width: 100%"></div>
                </div>
            </div>
        </div>

        <!-- This Month -->
        <div class="glass rounded-xl p-6 hover:shadow-xl transition-all duration-300 animate-slide-up delay-200">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">This Month</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white">
                        {{ number_format($payments->where('created_at', '>=', now()->startOfMonth())->sum('amount'), 2) }} SR
                    </p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-500/10 to-purple-600/10 flex items-center justify-center">
                    <i class="fas fa-calendar-day text-purple-500 dark:text-purple-400 text-xl"></i>
                </div>
            </div>
            <div class="mt-6 pt-4 border-t border-gray-100 dark:border-gray-700">
                <div class="flex items-center gap-2">
                    <div class="w-2 h-2 rounded-full bg-purple-500 animate-pulse"></div>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Current month revenue</p>
                </div>
            </div>
        </div>

        <!-- Pending -->
        <div class="glass rounded-xl p-6 hover:shadow-xl transition-all duration-300 animate-slide-up delay-300">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Pending</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white">
                        {{ $payments->where('status', 'pending')->count() }}
                    </p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500/10 to-orange-600/10 flex items-center justify-center">
                    <i class="fas fa-clock text-orange-500 dark:text-orange-400 text-xl"></i>
                </div>
            </div>
            <div class="mt-6 pt-4 border-t border-gray-100 dark:border-gray-700">
                @php
                    $pendingPercentage = $payments->count() > 0 ? ($payments->where('status', 'pending')->count() / $payments->count()) * 100 : 0;
                @endphp
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500 dark:text-gray-400">Attention needed</span>
                    <span class="text-xs font-bold text-orange-600 dark:text-orange-400">{{ number_format($pendingPercentage, 0) }}%</span>
                </div>
                <div class="modern-progress mt-2">
                    <div class="modern-progress-fill bg-gradient-to-r from-orange-500 to-yellow-500" style="width: {{ $pendingPercentage }}%"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter -->
    <div class="glass rounded-xl p-6 mb-6 animate-slide-up delay-400">
        <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
            <div class="flex-1">
                <div class="relative max-w-md">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                    <input type="text" placeholder="Search invoices by ID, client, or project..."
                           class="w-full pl-10 pr-4 py-3 rounded-xl bg-white/50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                </div>
            </div>
            
        </div>
    </div>

    <!-- Desktop Table -->
    <div class="hidden lg:block glass rounded-xl overflow-hidden animate-slide-up delay-500">
        <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
            <h2 class="font-bold text-gray-900 dark:text-white text-lg">All Invoices</h2>
            <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
                <i class="fas fa-info-circle text-primary-600"></i>
                <span>{{ $payments->count() }} invoices found</span>
            </div>
        </div>
        
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-100 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700/30">
                    <tr>
                        <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Invoice Details
                        </th>
                        <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Project & Client
                        </th>
                        <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Payment Info
                        </th>
                        <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Status
                        </th>
                        <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                    @forelse($payments as $payment)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors">
                        <!-- Invoice Details -->
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 rounded-xl bg-gradient-to-r from-primary-600 to-primary-700 flex items-center justify-center shadow-md">
                                    <i class="fas fa-file-invoice text-white"></i>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-center gap-2">
                                        <p class="text-sm font-bold text-gray-900 dark:text-white">
                                            INV-{{ str_pad($payment->id, 6, '0', STR_PAD_LEFT) }}
                                        </p>
                                        <span class="text-xs text-gray-500 dark:text-gray-400">
                                            ID: {{ $payment->id }}
                                        </span>
                                    </div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        {{ \Carbon\Carbon::parse($payment->payment_date)->format('M d, Y') }}
                                        <span class="mx-1">•</span>
                                        {{ $payment->created_at->format('h:i A') }}
                                    </div>
                                </div>
                            </div>
                        </td>

                        <!-- Project & Client Information -->
                        <td class="px-6 py-4">
                            <div class="space-y-2">
                                <div>
                                    <div class="flex items-center gap-2">
                                        <i class="fas fa-project-diagram text-primary-600 text-xs"></i>
                                        <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Project</span>
                                    </div>
                                    <p class="text-sm font-bold text-gray-900 dark:text-white mt-1">
                                        {{ $payment->project->name ?? 'N/A' }}
                                    </p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">ID: {{ $payment->project_id }}</p>
                                </div>
                                <div>
                                    <div class="flex items-center gap-2">
                                        <i class="fas fa-user text-primary-600 text-xs"></i>
                                        <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Client</span>
                                    </div>
                                    <p class="text-sm text-gray-900 dark:text-white mt-1">
                                        {{ $payment->user->name ?? 'N/A' }}
                                    </p>
                                </div>
                            </div>
                        </td>

                        <!-- Payment Info -->
                        <td class="px-6 py-4">
                            <div class="space-y-2">
                                <div>
                                    <div class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Amount</div>
                                    <div class="text-lg font-bold text-green-600 dark:text-green-400">
                                        {{ number_format($payment->amount, 2) }} SR
                                    </div>
                                </div>
                                <div>
                                    <div class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Method</div>
                                    @php
                                        $methodConfig = [
                                            'cash' => [
                                                'color' => 'from-green-500 to-emerald-600',
                                                'icon' => 'fa-money-bill'
                                            ],
                                            'bank_transfer' => [
                                                'color' => 'from-blue-500 to-blue-600',
                                                'icon' => 'fa-university'
                                            ],
                                            'check' => [
                                                'color' => 'from-purple-500 to-purple-600',
                                                'icon' => 'fa-file-invoice'
                                            ],
                                            'online' => [
                                                'color' => 'from-indigo-500 to-indigo-600',
                                                'icon' => 'fa-globe'
                                            ],
                                            'mobile_banking' => [
                                                'color' => 'from-orange-500 to-orange-600',
                                                'icon' => 'fa-mobile-alt'
                                            ],
                                            'card' => [
                                                'color' => 'from-red-500 to-red-600',
                                                'icon' => 'fa-credit-card'
                                            ]
                                        ];
                                        $config = $methodConfig[$payment->payment_method] ?? [
                                            'color' => 'from-gray-500 to-gray-600',
                                            'icon' => 'fa-money-bill'
                                        ];
                                    @endphp
                                    <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold bg-gradient-to-r {{ $config['color'] }} text-white shadow-sm">
                                        <i class="fas {{ $config['icon'] }} text-xs"></i>
                                        {{ ucfirst(str_replace('_', ' ', $payment->payment_method)) }}
                                    </span>
                                </div>
                            </div>
                        </td>

                        <!-- Status -->
                        <td class="px-6 py-4">
                            @php
                                $statusConfig = [
                                    'paid' => [
                                        'color' => 'from-green-500 to-emerald-600',
                                        'icon' => 'fa-check-circle',
                                        'text' => 'text-white'
                                    ],
                                    'pending' => [
                                        'color' => 'from-yellow-500 to-orange-500',
                                        'icon' => 'fa-clock',
                                        'text' => 'text-white'
                                    ],
                                    'failed' => [
                                        'color' => 'from-red-500 to-rose-600',
                                        'icon' => 'fa-times-circle',
                                        'text' => 'text-white'
                                    ]
                                ];
                                $config = $statusConfig[$payment->status] ?? [
                                    'color' => 'from-gray-500 to-gray-600',
                                    'icon' => 'fa-question-circle',
                                    'text' => 'text-white'
                                ];
                            @endphp
                            <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold bg-gradient-to-r {{ $config['color'] }} {{ $config['text'] }} shadow-sm">
                                <i class="fas {{ $config['icon'] }} text-xs"></i>
                                {{ ucfirst($payment->status) }}
                            </span>
                        </td>

                        <!-- Actions -->
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <a href="{{ route('dashboard.invoices.details', $payment->id) }}"
                                   class="inline-flex items-center gap-2 bg-gradient-to-r from-primary-600 to-primary-700 text-white px-4 py-2 rounded-lg hover:from-primary-700 hover:to-primary-800 active:scale-[0.97] transition-all shadow-md hover:shadow-lg text-sm font-bold">
                                    <i class="fas fa-eye text-xs"></i>
                                    View
                                </a>
                                <button class="w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-600 transition">
                                    <i class="fas fa-ellipsis-h text-gray-600 dark:text-gray-400"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-6 py-12">
                            <div class="flex flex-col items-center justify-center text-gray-400 dark:text-gray-500">
                                <div class="w-20 h-20 rounded-full bg-gradient-to-r from-primary-500 to-primary-600 flex items-center justify-center mb-6 shadow-lg">
                                    <i class="fas fa-file-invoice text-white text-2xl"></i>
                                </div>
                                <p class="text-xl font-bold text-gray-500 dark:text-gray-400 mb-3">No invoices found</p>
                                <p class="text-sm text-gray-400 dark:text-gray-500 mb-6">No payment records available yet</p>
                                <button class="bg-gradient-to-r from-primary-600 to-primary-700 text-white px-6 py-3 rounded-xl font-semibold hover:shadow-lg transition-all">
                                    <i class="fas fa-plus mr-2"></i> Create First Invoice
                                </button>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($payments->hasPages())
        <div class="px-6 py-4 border-t border-gray-100 dark:border-gray-700">
            <div class="flex items-center justify-between">
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Showing {{ $payments->firstItem() }} to {{ $payments->lastItem() }} of {{ $payments->total() }} results
                </p>
                <div class="flex items-center gap-2">
                    @if($payments->onFirstPage())
                    <span class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 text-sm">
                        <i class="fas fa-chevron-left mr-1"></i> Previous
                    </span>
                    @else
                    <a href="{{ $payments->previousPageUrl() }}" class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 text-sm transition">
                        <i class="fas fa-chevron-left mr-1"></i> Previous
                    </a>
                    @endif
                    
                    @if($payments->hasMorePages())
                    <a href="{{ $payments->nextPageUrl() }}" class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 text-sm transition">
                        Next <i class="fas fa-chevron-right ml-1"></i>
                    </a>
                    @else
                    <span class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 text-sm">
                        Next <i class="fas fa-chevron-right ml-1"></i>
                    </span>
                    @endif
                </div>
            </div>
        </div>
        @endif
    </div>

    <!-- Mobile Cards -->
    <div class="lg:hidden space-y-4 animate-slide-up delay-500">
        <div class="flex items-center justify-between mb-4">
            <h2 class="font-bold text-gray-900 dark:text-white text-lg">All Invoices</h2>
            <span class="text-xs text-gray-500 dark:text-gray-400">{{ $payments->count() }} invoices</span>
        </div>
        
        @forelse($payments as $payment)
        <div class="glass rounded-xl p-4 hover:shadow-xl transition-all duration-300">
            <!-- Header -->
            <div class="flex items-start justify-between mb-3">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 rounded-xl bg-gradient-to-r from-primary-600 to-primary-700 flex items-center justify-center shadow-md">
                        <i class="fas fa-file-invoice text-white"></i>
                    </div>
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-bold text-gray-900 dark:text-white">
                            INV-{{ str_pad($payment->id, 6, '0', STR_PAD_LEFT) }}
                        </p>
                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                            ID: {{ $payment->id }}
                        </div>
                    </div>
                </div>
                @php
                    $statusConfig = [
                        'paid' => [
                            'color' => 'from-green-500 to-emerald-600',
                            'icon' => 'fa-check-circle',
                            'text' => 'text-white'
                        ],
                        'pending' => [
                            'color' => 'from-yellow-500 to-orange-500',
                            'icon' => 'fa-clock',
                            'text' => 'text-white'
                        ],
                        'failed' => [
                            'color' => 'from-red-500 to-rose-600',
                            'icon' => 'fa-times-circle',
                            'text' => 'text-white'
                        ]
                    ];
                    $config = $statusConfig[$payment->status] ?? [
                        'color' => 'from-gray-500 to-gray-600',
                        'icon' => 'fa-question-circle',
                        'text' => 'text-white'
                    ];
                @endphp
                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-bold bg-gradient-to-r {{ $config['color'] }} {{ $config['text'] }}">
                    <i class="fas {{ $config['icon'] }} text-xs"></i>
                </span>
            </div>

            <!-- Project & Client -->
            <div class="space-y-3 mb-4">
                <div>
                    <div class="flex items-center gap-2 mb-1">
                        <i class="fas fa-project-diagram text-primary-600 text-xs"></i>
                        <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Project</span>
                    </div>
                    <p class="text-sm font-bold text-gray-900 dark:text-white">{{ $payment->project->name ?? 'N/A' }}</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">ID: {{ $payment->project_id }}</p>
                </div>
                <div>
                    <div class="flex items-center gap-2 mb-1">
                        <i class="fas fa-user text-primary-600 text-xs"></i>
                        <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Client</span>
                    </div>
                    <p class="text-sm text-gray-900 dark:text-white">{{ $payment->user->name ?? 'N/A' }}</p>
                </div>
            </div>

            <!-- Payment Details -->
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div class="bg-gray-50 dark:bg-gray-800/50 rounded-xl p-3">
                    <div class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Amount</div>
                    <div class="text-lg font-bold text-green-600 dark:text-green-400">
                        {{ number_format($payment->amount, 2) }} SR
                    </div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-800/50 rounded-xl p-3">
                    <div class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Method</div>
                    @php
                        $methodConfig = [
                            'cash' => [
                                'color' => 'text-green-600',
                                'icon' => 'fa-money-bill'
                            ],
                            'bank_transfer' => [
                                'color' => 'text-blue-600',
                                'icon' => 'fa-university'
                            ],
                            'check' => [
                                'color' => 'text-purple-600',
                                'icon' => 'fa-file-invoice'
                            ],
                            'online' => [
                                'color' => 'text-indigo-600',
                                'icon' => 'fa-globe'
                            ],
                            'mobile_banking' => [
                                'color' => 'text-orange-600',
                                'icon' => 'fa-mobile-alt'
                            ],
                            'card' => [
                                'color' => 'text-red-600',
                                'icon' => 'fa-credit-card'
                            ]
                        ];
                        $config = $methodConfig[$payment->payment_method] ?? [
                            'color' => 'text-gray-600',
                            'icon' => 'fa-money-bill'
                        ];
                    @endphp
                    <div class="flex items-center gap-2">
                        <i class="fas {{ $config['icon'] }} {{ $config['color'] }}"></i>
                        <span class="text-sm font-medium text-gray-900 dark:text-white">
                            {{ ucfirst(str_replace('_', ' ', $payment->payment_method)) }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Date Info -->
            <div class="mb-4 p-3 rounded-xl bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800/50 dark:to-gray-900/50">
                <div class="flex items-center gap-2 text-sm">
                    <i class="fas fa-calendar text-primary-600"></i>
                    <span class="font-bold text-gray-900 dark:text-white">
                        {{ \Carbon\Carbon::parse($payment->payment_date)->format('M d, Y') }}
                    </span>
                    <span class="mx-1">•</span>
                    <span class="text-gray-500 dark:text-gray-400">
                        {{ $payment->created_at->format('h:i A') }}
                    </span>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex items-center gap-2 pt-4 border-t border-gray-100 dark:border-gray-700">
                <a href="{{ route('dashboard.invoices.details', $payment->id) }}"
                   class="flex-1 inline-flex items-center justify-center gap-2 bg-gradient-to-r from-primary-600 to-primary-700 text-white px-4 py-2.5 rounded-xl hover:from-primary-700 hover:to-primary-800 active:scale-[0.98] transition-all shadow-md hover:shadow-lg text-sm font-bold">
                    <i class="fas fa-eye text-xs"></i>
                    View Details
                </a>
            </div>
        </div>
        @empty
        <div class="glass rounded-xl p-8 text-center">
            <div class="w-20 h-20 rounded-full bg-gradient-to-r from-primary-500 to-primary-600 flex items-center justify-center mb-6 mx-auto shadow-lg">
                <i class="fas fa-file-invoice text-white text-2xl"></i>
            </div>
            <p class="text-lg font-bold text-gray-500 dark:text-gray-400 mb-3">No invoices found</p>
            <p class="text-sm text-gray-400 dark:text-gray-500 mb-6">No payment records available yet</p>
            <button class="bg-gradient-to-r from-primary-600 to-primary-700 text-white px-6 py-3 rounded-xl font-semibold hover:shadow-lg transition-all w-full max-w-xs mx-auto">
                <i class="fas fa-plus mr-2"></i> Create First Invoice
            </button>
        </div>
        @endforelse
        
        @if($payments->hasPages())
        <div class="glass rounded-xl p-4">
            <div class="flex items-center justify-between">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    {{ $payments->count() }} of {{ $payments->total() }}
                </p>
                <div class="flex items-center gap-2">
                    @if($payments->onFirstPage())
                    <span class="px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 text-sm">
                        <i class="fas fa-chevron-left"></i>
                    </span>
                    @else
                    <a href="{{ $payments->previousPageUrl() }}" class="px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 text-sm transition">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    @endif
                    
                    @if($payments->hasMorePages())
                    <a href="{{ $payments->nextPageUrl() }}" class="px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 text-sm transition">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    @else
                    <span class="px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 text-sm">
                        <i class="fas fa-chevron-right"></i>
                    </span>
                    @endif
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Search functionality
        const searchInput = document.querySelector('input[type="text"]');
        if (searchInput) {
            searchInput.addEventListener('input', function(e) {
                const searchTerm = e.target.value.toLowerCase();
                
                // Search in desktop table
                const desktopRows = document.querySelectorAll('tbody tr');
                desktopRows.forEach(row => {
                    if (row.querySelector('td[colspan]')) return;
                    const text = row.textContent.toLowerCase();
                    row.style.display = text.includes(searchTerm) ? '' : 'none';
                });

                // Search in mobile cards
                const mobileCards = document.querySelectorAll('.lg\\:hidden .glass.rounded-xl.p-4');
                mobileCards.forEach(card => {
                    if (card.querySelector('p.text-lg')) return; // Skip empty state card
                    const text = card.textContent.toLowerCase();
                    card.style.display = text.includes(searchTerm) ? 'block' : 'none';
                });
            });
        }

        // Filter functionality
        const statusFilter = document.querySelector('select');
        if (statusFilter) {
            statusFilter.addEventListener('change', function(e) {
                const status = e.target.value;
                
                // Filter desktop table
                const desktopRows = document.querySelectorAll('tbody tr');
                desktopRows.forEach(row => {
                    if (row.querySelector('td[colspan]')) return;
                    const rowStatus = row.querySelector('span').textContent.toLowerCase();
                    row.style.display = !status || rowStatus === status ? '' : 'none';
                });

                // Filter mobile cards
                const mobileCards = document.querySelectorAll('.lg\\:hidden .glass.rounded-xl.p-4');
                mobileCards.forEach(card => {
                    if (card.querySelector('p.text-lg')) return;
                    const cardStatus = card.querySelector('span').textContent.toLowerCase();
                    card.style.display = !status || cardStatus === status ? 'block' : 'none';
                });
            });
        }
    });
</script>
@endsection