@extends('dashboard.layout')

@section('title', 'Transaction History - Invo Security')
@section('page-title', 'Transaction History')
@section('page-subtitle', 'View and manage all payment transactions')

@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 Transactions -->
        <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 Transactions</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ $transections->total() }}</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-exchange-alt 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>

        <!-- Verified Transactions -->
        <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">Verified</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white">
                        {{ $transections->where('status', 'verified')->count() }}
                    </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-check-circle 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">
                @php
                    $verifiedPercentage = $transections->count() > 0 ? ($transections->where('status', 'verified')->count() / $transections->count()) * 100 : 0;
                @endphp
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500 dark:text-gray-400">Success rate</span>
                    <span class="text-xs font-bold text-green-600 dark:text-green-400">{{ number_format($verifiedPercentage, 0) }}%</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: {{ $verifiedPercentage }}%"></div>
                </div>
            </div>
        </div>

        <!-- Pending Verification -->
        <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">Pending</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white">
                        {{ $transections->where('status', 'pending_verification')->count() }}
                    </p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-yellow-500/10 to-yellow-600/10 flex items-center justify-center">
                    <i class="fas fa-clock text-yellow-500 dark:text-yellow-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-yellow-500 animate-pulse"></div>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Awaiting verification</p>
                </div>
            </div>
        </div>

        <!-- Failed Transactions -->
        <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">Failed</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white">
                        {{ $transections->where('status', 'failed')->count() }}
                    </p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-red-500/10 to-red-600/10 flex items-center justify-center">
                    <i class="fas fa-times-circle text-red-500 dark:text-red-400 text-xl"></i>
                </div>
            </div>
            <div class="mt-6 pt-4 border-t border-gray-100 dark:border-gray-700">
                @php
                    $failedPercentage = $transections->count() > 0 ? ($transections->where('status', 'failed')->count() / $transections->count()) * 100 : 0;
                @endphp
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500 dark:text-gray-400">Failure rate</span>
                    <span class="text-xs font-bold text-red-600 dark:text-red-400">{{ number_format($failedPercentage, 0) }}%</span>
                </div>
                <div class="modern-progress mt-2">
                    <div class="modern-progress-fill bg-gradient-to-r from-red-500 to-rose-600" 
                         style="width: {{ $failedPercentage }}%"></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 transactions by ID, user, 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 Transactions</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>{{ $transections->total() }} transactions 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">
                            Transaction 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 & User
                        </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">
                            Amount & Method
                        </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($transections as $transaction)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors">
                        <!-- Transaction 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-receipt 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">
                                            #{{ $transaction->transaction_id }}
                                        </p>
                                        <span class="text-xs text-gray-500 dark:text-gray-400">
                                            ID: {{ $transaction->id }}
                                        </span>
                                    </div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        {{ $transaction->created_at->format('M d, Y') }}
                                        <span class="mx-1">•</span>
                                        {{ $transaction->created_at->format('h:i A') }}
                                    </div>
                                </div>
                            </div>
                        </td>

                        <!-- Project & User 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">
                                        {{ $transaction->project->name ?? 'N/A' }}
                                    </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">User</span>
                                    </div>
                                    <p class="text-sm text-gray-900 dark:text-white mt-1">
                                        {{ $transaction->user->name ?? 'N/A' }}
                                    </p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">
                                        {{ $transaction->user->email ?? 'N/A' }}
                                    </p>
                                </div>
                            </div>
                        </td>

                        <!-- Amount & Method -->
                        <td class="px-6 py-4">
                            <div class="space-y-2">
                                @if($transaction->amount)
                                <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($transaction->amount, 2) }} SR
                                    </div>
                                </div>
                                @endif
                                @if($transaction->payment_method)
                                <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[$transaction->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('_', ' ', $transaction->payment_method)) }}
                                    </span>
                                </div>
                                @endif
                            </div>
                        </td>

                        <!-- Status -->
                        <td class="px-6 py-4">
                            @php
                                $statusConfig = [
                                    'verified' => [
                                        'color' => 'from-green-500 to-emerald-600',
                                        'icon' => 'fa-check-circle',
                                        'text' => 'text-white'
                                    ],
                                    'pending_verification' => [
                                        '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[$transaction->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>
                                {{ str_replace('_', ' ', ucfirst($transaction->status)) }}
                            </span>
                        </td>

                        <!-- Actions -->
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-2">
                                <a href="{{ route('dashboard.transactions.details', $transaction->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>
                                @if($transaction->receipt)
                                <a href="{{ asset('storage/' . $transaction->receipt) }}" target="_blank"
                                   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 text-gray-600 dark:text-gray-400"
                                   title="View Receipt">
                                    <i class="fas fa-receipt text-sm"></i>
                                </a>
                                @endif
                            </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-exchange-alt text-white text-2xl"></i>
                                </div>
                                <p class="text-xl font-bold text-gray-500 dark:text-gray-400 mb-3">No transactions found</p>
                                <p class="text-sm text-gray-400 dark:text-gray-500 mb-6">Transactions will appear here once payments are made</p>
                                <div class="flex items-center gap-3">
                                    <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> New Transaction
                                    </button>
                                    <button class="px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                                        <i class="fas fa-sync mr-2"></i> Refresh
                                    </button>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($transections->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 {{ $transections->firstItem() }} to {{ $transections->lastItem() }} of {{ $transections->total() }} results
                </p>
                <div class="flex items-center gap-2">
                    @if($transections->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="{{ $transections->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($transections->hasMorePages())
                    <a href="{{ $transections->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 Transactions</h2>
            <span class="text-xs text-gray-500 dark:text-gray-400">{{ $transections->count() }} transactions</span>
        </div>
        
        @forelse($transections as $transaction)
        <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-receipt text-white"></i>
                    </div>
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-bold text-gray-900 dark:text-white">
                            #{{ $transaction->transaction_id }}
                        </p>
                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                            ID: {{ $transaction->id }}
                        </div>
                    </div>
                </div>
                @php
                    $statusConfig = [
                        'verified' => [
                            'color' => 'from-green-500 to-emerald-600',
                            'icon' => 'fa-check-circle',
                            'text' => 'text-white'
                        ],
                        'pending_verification' => [
                            '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[$transaction->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 & User -->
            <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">{{ $transaction->project->name ?? 'N/A' }}</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">User</span>
                    </div>
                    <p class="text-sm text-gray-900 dark:text-white">{{ $transaction->user->name ?? 'N/A' }}</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ $transaction->user->email ?? 'N/A' }}</p>
                </div>
            </div>

            <!-- Amount & Details -->
            <div class="grid grid-cols-2 gap-3 mb-4">
                @if($transaction->amount)
                <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($transaction->amount, 2) }} SR
                    </div>
                </div>
                @endif
                @if($transaction->payment_method)
                <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[$transaction->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('_', ' ', $transaction->payment_method)) }}
                        </span>
                    </div>
                </div>
                @endif
            </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">
                        {{ $transaction->created_at->format('M d, Y') }}
                    </span>
                    <span class="mx-1">•</span>
                    <span class="text-gray-500 dark:text-gray-400">
                        {{ $transaction->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.transactions.details', $transaction->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>
                @if($transaction->receipt)
                <a href="{{ asset('storage/' . $transaction->receipt) }}" target="_blank"
                   class="w-10 h-10 rounded-xl bg-gray-100 dark:bg-gray-700 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-600 transition text-gray-600 dark:text-gray-400"
                   title="View Receipt">
                    <i class="fas fa-receipt"></i>
                </a>
                @endif
            </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-exchange-alt text-white text-2xl"></i>
            </div>
            <p class="text-lg font-bold text-gray-500 dark:text-gray-400 mb-3">No transactions found</p>
            <p class="text-sm text-gray-400 dark:text-gray-500 mb-6">Transactions will appear here once payments are made</p>
            <div class="flex flex-col sm:flex-row gap-3">
                <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> New Transaction
                </button>
                <button class="px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                    <i class="fas fa-sync mr-2"></i> Refresh
                </button>
            </div>
        </div>
        @endforelse
        
        @if($transections->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">
                    {{ $transections->count() }} of {{ $transections->total() }}
                </p>
                <div class="flex items-center gap-2">
                    @if($transections->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="{{ $transections->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($transections->hasMorePages())
                    <a href="{{ $transections->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().replace(' ', '_');
                    row.style.display = !status || rowStatus.includes(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().replace(' ', '_');
                    card.style.display = !status || cardStatus.includes(status) ? 'block' : 'none';
                });
            });
        }

        // Refresh button functionality
        const refreshButtons = document.querySelectorAll('button:has(.fa-sync)');
        refreshButtons.forEach(button => {
            button.addEventListener('click', function() {
                this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Refreshing...';
                this.disabled = true;
                
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            });
        });
    });
</script>
@endsection