@extends('layouts.responsive')

@section('title', 'Dashboard')

@section('content')
<div class="space-y-6 pb-20">
    <!-- Balance Card - Matching Mobile App Design -->
    <div class="relative">
        <div class="balance-card slide-up">
            <div class="relative z-10">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <p class="text-white/80 text-sm font-medium">Balance</p>
                        <p id="balance-amount" class="text-3xl font-bold text-white mt-1">₦{{ number_format($wallet?->balance ?? 0, 2) }}</p>
                        <p id="balance-hidden" class="text-3xl font-bold text-white mt-1 hidden">₦******</p>
                    </div>
                    <div class="w-12 h-12 bg-white/15 rounded-full flex items-center justify-center backdrop-blur-sm cursor-pointer" onclick="toggleBalance()">
                        <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center">
                            <i id="balance-toggle-icon" class="fas fa-eye text-primary-600 text-sm"></i>
                        </div>
                    </div>
                </div>
                
                <div class="flex justify-between items-end">
                    <div>
                        <p class="text-white/60 text-xs font-medium">{{ setting('business.name', 'AbokiPay') }}</p>
                        <p class="text-white/90 text-sm font-semibold">{{ auth()->user()->virtualAccount?->account_number ?? 'N/A' }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-white/80 text-xs font-medium">{{ setting('business.name', 'AbokiPay') }}</p>
                        <p class="text-white/90 text-sm font-semibold">Account Number</p>
                    </div>
                </div>
            </div>
            
            <!-- Floating circle decorations -->
            <div class="absolute top-4 right-4 w-16 h-16 bg-white/10 rounded-full"></div>
            <div class="absolute bottom-4 left-4 w-8 h-8 bg-white/5 rounded-full"></div>
        </div>
    </div>

    <!-- Quick Actions Grid -->
    <div class="grid grid-cols-4 gap-4 px-1">
        <a href="{{ route('transfer.p2p') }}" class="quick-action group" onclick="hapticFeedback()">
            <div class="quick-action-icon bg-gradient-to-br from-blue-500 to-blue-700 text-white group-hover:scale-110 transition-transform duration-200">
                <i class="fas fa-dollar-sign"></i>
            </div>
            <span class="text-xs text-gray-300 font-semibold mt-2">Transfer</span>
        </a>
        
        <a href="{{ route('request.index') }}" onclick="hapticFeedback()" class="quick-action group">
            <div class="quick-action-icon bg-gradient-to-br from-green-500 to-green-700 text-white group-hover:scale-110 transition-transform duration-200">
                <i class="fas fa-money-bill-wave"></i>
            </div>
            <span class="text-xs text-gray-300 font-semibold mt-2">Request</span>
        </a>
        
        <a href="{{ route('scan.index') }}" onclick="hapticFeedback()" class="quick-action group">
            <div class="quick-action-icon bg-gradient-to-br from-orange-500 to-orange-700 text-white group-hover:scale-110 transition-transform duration-200">
                <i class="fas fa-qrcode"></i>
            </div>
            <span class="text-xs text-gray-300 font-semibold mt-2">Scan</span>
        </a>
        
        <a href="{{ route('swap.index') }}" onclick="hapticFeedback()" class="quick-action group">
            <div class="quick-action-icon bg-gradient-to-br from-purple-500 to-purple-700 text-white group-hover:scale-110 transition-transform duration-200">
                <i class="fas fa-exchange-alt"></i>
            </div>
            <span class="text-xs text-gray-300 font-semibold mt-2">Swap</span>
        </a>

        <a href="{{ route('wallet.index') }}" class="quick-action group" onclick="hapticFeedback()">
            <div class="quick-action-icon bg-gradient-to-br from-cyan-500 to-cyan-700 text-white group-hover:scale-110 transition-transform duration-200">
                <i class="fas fa-plus"></i>
            </div>
            <span class="text-xs text-gray-300 font-semibold mt-2">Fund</span>
        </a>
        
        <a href="{{ route('bills.airtime') }}" class="quick-action group" onclick="hapticFeedback()">
            <div class="quick-action-icon bg-gradient-to-br from-emerald-500 to-emerald-700 text-white group-hover:scale-110 transition-transform duration-200">
                <i class="fas fa-mobile-alt"></i>
            </div>
            <span class="text-xs text-gray-300 font-semibold mt-2">Airtime</span>
        </a>
        
        <a href="{{ route('bills.data') }}" class="quick-action group" onclick="hapticFeedback()">
            <div class="quick-action-icon bg-gradient-to-br from-indigo-500 to-indigo-700 text-white group-hover:scale-110 transition-transform duration-200">
                <i class="fas fa-wifi"></i>
            </div>
            <span class="text-xs text-gray-300 font-semibold mt-2">Data</span>
        </a>
        
        <a href="{{ route('services.index') }}" onclick="hapticFeedback()" class="quick-action group">
            <div class="quick-action-icon bg-gradient-to-br from-gray-500 to-gray-700 text-white group-hover:scale-110 transition-transform duration-200">
                <i class="fas fa-ellipsis-h"></i>
            </div>
            <span class="text-xs text-gray-300 font-semibold mt-2">More</span>
        </a>
    </div>

    <!-- Search Bar -->
    <div class="relative px-1">
        <div class="relative">
            <input type="text" placeholder="Search here" 
                   class="w-full bg-dark-800/50 border border-dark-600/50 rounded-xl pl-12 pr-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:border-primary-500 focus:bg-dark-700/50 transition-all">
            <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
        <button class="absolute right-4 top-1/2 transform -translate-y-1/2 p-2 bg-dark-700/50 rounded-lg border border-dark-600/50">
            <i class="fas fa-sliders-h text-gray-400"></i>
        </button>
    </div>

    <!-- KYC Status Alert -->
    @if(!auth()->user()->hasCompletedKyc())
    <div class="bg-gradient-to-r from-orange-500/20 to-yellow-500/20 border border-orange-500/30 rounded-2xl p-4 mx-1 backdrop-blur-sm">
        <div class="flex items-start">
            <div class="w-10 h-10 bg-orange-500/20 rounded-full flex items-center justify-center mr-3">
                <i class="fas fa-exclamation-triangle text-orange-400 text-lg"></i>
            </div>
            <div class="flex-1">
                <h4 class="text-orange-400 font-bold mb-2">Complete Your KYC</h4>
                <p class="text-gray-300 text-sm mb-3">Verify your identity to unlock higher limits and virtual cards.</p>
                <a href="{{ route('kyc.index') }}" class="inline-flex items-center px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-xl transition-colors duration-200">
                    <i class="fas fa-shield-check mr-2"></i>
                    Verify Now
                </a>
            </div>
        </div>
    </div>
    @endif

    <!-- Transaction Section -->
    <div class="px-1">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-white font-bold text-lg">Transaction</h3>
            <div class="flex items-center text-sm">
                <span class="text-gray-400 mr-2">Sort by</span>
                <button class="text-white font-medium">Latest <i class="fas fa-chevron-down ml-1"></i></button>
            </div>
        </div>
        
        @if($recentTransactions && $recentTransactions->count() > 0)
            <div class="space-y-3">
                @foreach($recentTransactions as $transaction)
                <div class="transaction-item group">
                    <div class="flex items-center flex-1">
                        <div class="transaction-icon {{ $transaction->type === 'credit' ? 'bg-green-500/20 text-green-400 border border-green-500/30' : 'bg-red-500/20 text-red-400 border border-red-500/30' }}">
                            @if($transaction->category === 'wallet_funding')
                                <i class="fas fa-plus"></i>
                            @elseif($transaction->category === 'p2p_transfer')
                                <i class="fas fa-exchange-alt"></i>
                            @elseif($transaction->category === 'bank_transfer')
                                <i class="fas fa-university"></i>
                            @elseif($transaction->category === 'airtime_purchase')
                                <i class="fas fa-mobile-alt"></i>
                            @elseif($transaction->category === 'data_purchase')
                                <i class="fas fa-wifi"></i>
                            @elseif($transaction->category === 'bill_payment')
                                <i class="fas fa-bolt"></i>
                            @else
                                <i class="fas fa-credit-card"></i>
                            @endif
                        </div>
                        <div class="ml-4 flex-1">
                            <p class="text-white font-semibold text-sm">{{ $transaction->description }}</p>
                            <p class="text-gray-400 text-xs">{{ $transaction->created_at->format('M jS, Y') }}</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="font-bold text-sm {{ $transaction->type === 'credit' ? 'text-green-400' : 'text-red-400' }}">
                            {{ $transaction->type === 'credit' ? '+' : '-' }}₦{{ number_format($transaction->amount, 2) }}
                        </p>
                        <div class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium mt-1 {{ $transaction->status === 'completed' ? 'bg-green-500/20 text-green-400' : ($transaction->status === 'pending' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-red-500/20 text-red-400') }}">
                            {{ ucfirst($transaction->status) }}
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-8">
                <div class="w-16 h-16 bg-dark-800/50 rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-receipt text-gray-500 text-2xl"></i>
                </div>
                <h4 class="text-white font-bold text-lg mb-2">No transactions yet</h4>
                <p class="text-gray-400 text-sm mb-4">Start by funding your wallet to begin</p>
                <a href="{{ route('wallet.index') }}" class="inline-flex items-center px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-xl transition-colors duration-200">
                    <i class="fas fa-plus mr-2"></i>Fund Wallet
                </a>
            </div>
        @endif
    </div>
</div>

<!-- More Options Modal -->
<div id="moreOptionsModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden z-50">
    <div class="absolute bottom-0 left-0 right-0 bg-dark-900/95 backdrop-blur-xl rounded-t-3xl p-6 slide-up border-t border-dark-700/50">
        <div class="w-12 h-1 bg-gray-600 rounded-full mx-auto mb-6"></div>
        <h3 class="text-xl font-bold text-white mb-6">More Services</h3>
        <div class="grid grid-cols-3 gap-4 mb-8">
            <a href="{{ route('bills.electricity') }}" class="quick-action group">
                <div class="quick-action-icon bg-gradient-to-br from-yellow-500 to-yellow-700 text-white group-hover:scale-110 transition-transform duration-200">
                    <i class="fas fa-bolt"></i>
                </div>
                <span class="text-xs text-gray-300 font-semibold">Electricity</span>
            </a>
            <a href="{{ route('virtual-account.index') }}" class="quick-action group">
                <div class="quick-action-icon bg-gradient-to-br from-indigo-500 to-indigo-700 text-white group-hover:scale-110 transition-transform duration-200">
                    <i class="fas fa-university"></i>
                </div>
                <span class="text-xs text-gray-300 font-semibold">Virtual Account</span>
            </a>
            <a href="{{ route('cards.index') }}" class="quick-action group">
                <div class="quick-action-icon bg-gradient-to-br from-purple-500 to-purple-700 text-white group-hover:scale-110 transition-transform duration-200">
                    <i class="fas fa-credit-card"></i>
                </div>
                <span class="text-xs text-gray-300 font-semibold">Cards</span>
            </a>
        </div>
        <button onclick="closeModal('moreOptionsModal')" class="w-full bg-dark-700 hover:bg-dark-600 text-white font-semibold py-4 rounded-2xl transition-colors duration-200">
            Close
        </button>
    </div>
</div>

@push('scripts')
<script>
function toggleBalance() {
    const balanceAmount = document.getElementById('balance-amount');
    const balanceHidden = document.getElementById('balance-hidden');
    const toggleIcon = document.getElementById('balance-toggle-icon');
    
    if (balanceAmount.classList.contains('hidden')) {
        // Show balance
        balanceAmount.classList.remove('hidden');
        balanceHidden.classList.add('hidden');
        toggleIcon.classList.remove('fa-eye-slash');
        toggleIcon.classList.add('fa-eye');
    } else {
        // Hide balance
        balanceAmount.classList.add('hidden');
        balanceHidden.classList.remove('hidden');
        toggleIcon.classList.remove('fa-eye');
        toggleIcon.classList.add('fa-eye-slash');
    }
    
    // Add haptic feedback
    hapticFeedback();
}

function requestMoney() {
    // TODO: Implement request money functionality
    showToast('Request money feature coming soon!', 'info');
}

function openScanner() {
    // TODO: Implement QR code scanner
    showToast('QR Scanner feature coming soon!', 'info');
}

function showSwapOptions() {
    // TODO: Implement currency swap
    showToast('Currency swap feature coming soon!', 'info');
}

function showMoreOptions() {
    document.getElementById('moreOptionsModal').classList.remove('hidden');
}

function closeModal(modalId) {
    document.getElementById(modalId).classList.add('hidden');
}

function hapticFeedback() {
    if (navigator.vibrate) {
        navigator.vibrate(50);
    }
}

function showToast(message, type = 'success') {
    // Create toast notification
    const toast = document.createElement('div');
    toast.className = `fixed top-4 right-4 p-4 rounded-lg text-white z-50 transition-all duration-300 ${
        type === 'success' ? 'bg-green-600' : type === 'error' ? 'bg-red-600' : 'bg-blue-600'
    }`;
    toast.textContent = message;
    
    document.body.appendChild(toast);
    
    // Animate in
    setTimeout(() => toast.style.transform = 'translateX(0)', 10);
    
    // Remove after 3 seconds
    setTimeout(() => {
        toast.style.transform = 'translateX(100%)';
        setTimeout(() => document.body.removeChild(toast), 300);
    }, 3000);
}

// Close modal when clicking outside
document.addEventListener('click', function(event) {
    const modal = document.getElementById('moreOptionsModal');
    if (event.target === modal) {
        closeModal('moreOptionsModal');
    }
});
</script>
@endpush
@endsection