@extends('layouts.mobile')

@section('title', 'Bill Payments')

@section('content')
<div class="space-y-6">
    <!-- Monthly Stats -->
    <div class="grid grid-cols-2 gap-4">
        <div class="card bg-gradient-to-r from-success-600/20 to-success-700/20 border-success-600/30">
            <div class="text-center">
                <p class="text-success-400 text-sm font-medium mb-1">This Month</p>
                <p class="text-2xl font-bold text-white">₦{{ number_format($monthlySpending ?? 0, 2) }}</p>
                <p class="text-xs text-gray-400">Bill payments</p>
            </div>
        </div>
        
        <div class="card bg-gradient-to-r from-primary-600/20 to-primary-700/20 border-primary-600/30">
            <div class="text-center">
                <p class="text-primary-400 text-sm font-medium mb-1">Transactions</p>
                <p class="text-2xl font-bold text-white">{{ $monthlyTransactions ?? 0 }}</p>
                <p class="text-xs text-gray-400">This month</p>
            </div>
        </div>
    </div>

    <!-- Service Categories -->
    <div class="space-y-4">
        <h2 class="text-lg font-semibold text-white">Services</h2>
        
        <div class="grid grid-cols-2 gap-4">
            <!-- Airtime -->
            <a href="{{ route('bills.airtime') }}" class="card-gradient hover:bg-dark-700/50 transition-all duration-200 active:scale-95">
                <div class="text-center p-4">
                    <div class="w-16 h-16 bg-gradient-to-r from-success-500 to-success-600 rounded-xl flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-mobile-alt text-white text-2xl"></i>
                    </div>
                    <h3 class="text-white font-semibold mb-1">Airtime</h3>
                    <p class="text-gray-400 text-xs mb-2">All networks</p>
                    <div class="flex items-center justify-center text-xs text-success-400">
                        <i class="fas fa-bolt mr-1"></i>
                        <span>Instant</span>
                    </div>
                </div>
            </a>
            
            <!-- Data -->
            <a href="{{ route('bills.data') }}" class="card-gradient hover:bg-dark-700/50 transition-all duration-200 active:scale-95">
                <div class="text-center p-4">
                    <div class="w-16 h-16 bg-gradient-to-r from-primary-500 to-primary-600 rounded-xl flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-wifi text-white text-2xl"></i>
                    </div>
                    <h3 class="text-white font-semibold mb-1">Data</h3>
                    <p class="text-gray-400 text-xs mb-2">All plans</p>
                    <div class="flex items-center justify-center text-xs text-primary-400">
                        <i class="fas fa-zap mr-1"></i>
                        <span>Fast</span>
                    </div>
                </div>
            </a>
            
            <!-- Electricity -->
            <a href="{{ route('bills.electricity') }}" class="card-gradient hover:bg-dark-700/50 transition-all duration-200 active:scale-95">
                <div class="text-center p-4">
                    <div class="w-16 h-16 bg-gradient-to-r from-warning-500 to-warning-600 rounded-xl flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-bolt text-white text-2xl"></i>
                    </div>
                    <h3 class="text-white font-semibold mb-1">Electricity</h3>
                    <p class="text-gray-400 text-xs mb-2">All DisCos</p>
                    <div class="flex items-center justify-center text-xs text-warning-400">
                        <i class="fas fa-shield-alt mr-1"></i>
                        <span>Secure</span>
                    </div>
                </div>
            </a>
            
            <!-- Cable TV -->
            <a href="#" onclick="showComingSoon('Cable TV')" class="card-gradient hover:bg-dark-700/50 transition-all duration-200 active:scale-95">
                <div class="text-center p-4">
                    <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-tv text-white text-2xl"></i>
                    </div>
                    <h3 class="text-white font-semibold mb-1">Cable TV</h3>
                    <p class="text-gray-400 text-xs mb-2">DSTV, GOTV</p>
                    <div class="flex items-center justify-center text-xs text-purple-400">
                        <i class="fas fa-clock mr-1"></i>
                        <span>Soon</span>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="space-y-4">
        <h3 class="text-lg font-semibold text-white">Quick Actions</h3>
        
        <div class="space-y-3">
            <!-- Repeat Last Transaction -->
            @if($lastTransaction)
            <button onclick="repeatTransaction()" class="w-full card-gradient hover:bg-dark-700/50 transition-colors p-4">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-primary-600/20 rounded-lg flex items-center justify-center mr-4">
                        <i class="fas fa-redo text-primary-400"></i>
                    </div>
                    <div class="flex-1 text-left">
                        <p class="text-white font-medium">Repeat Last Purchase</p>
                        <p class="text-gray-400 text-sm">{{ $lastTransaction->description ?? 'Quick repeat' }}</p>
                    </div>
                    <i class="fas fa-chevron-right text-gray-500"></i>
                </div>
            </button>
            @endif
            
            <!-- Favorites -->
            <button onclick="showFavorites()" class="w-full card-gradient hover:bg-dark-700/50 transition-colors p-4">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-warning-600/20 rounded-lg flex items-center justify-center mr-4">
                        <i class="fas fa-star text-warning-400"></i>
                    </div>
                    <div class="flex-1 text-left">
                        <p class="text-white font-medium">Favorites</p>
                        <p class="text-gray-400 text-sm">Your saved contacts</p>
                    </div>
                    <i class="fas fa-chevron-right text-gray-500"></i>
                </div>
            </button>
            
            <!-- Transaction History -->
            <a href="{{ route('transactions.index') }}?category=bill_payment" class="block w-full card-gradient hover:bg-dark-700/50 transition-colors p-4">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-dark-600 rounded-lg flex items-center justify-center mr-4">
                        <i class="fas fa-history text-gray-400"></i>
                    </div>
                    <div class="flex-1 text-left">
                        <p class="text-white font-medium">Bill History</p>
                        <p class="text-gray-400 text-sm">View all bill payments</p>
                    </div>
                    <i class="fas fa-chevron-right text-gray-500"></i>
                </div>
            </a>
        </div>
    </div>

    <!-- Recent Transactions -->
    @if($recentBillPayments && $recentBillPayments->count() > 0)
    <div class="space-y-4">
        <div class="flex justify-between items-center">
            <h3 class="text-lg font-semibold text-white">Recent Bills</h3>
            <a href="{{ route('transactions.index') }}?category=bill_payment" class="text-primary-400 text-sm">View All</a>
        </div>
        
        <div class="space-y-3">
            @foreach($recentBillPayments as $transaction)
            <div class="transaction-item">
                <div class="flex items-center flex-1">
                    <div class="transaction-icon {{ $transaction->status === 'completed' ? 'bg-success-600/20 text-success-400' : ($transaction->status === 'pending' ? 'bg-warning-600/20 text-warning-400' : 'bg-error-600/20 text-error-400') }}">
                        @if($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-receipt"></i>
                        @endif
                    </div>
                    <div class="ml-3 flex-1">
                        <p class="text-white font-medium text-sm">{{ $transaction->description }}</p>
                        <p class="text-gray-400 text-xs">{{ $transaction->created_at->format('M d, Y H:i') }}</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-semibold text-sm text-error-400">-₦{{ number_format($transaction->amount, 2) }}</p>
                    <div class="status-badge mt-1 {{ $transaction->status === 'completed' ? 'status-success' : ($transaction->status === 'pending' ? 'status-pending' : 'status-failed') }}">
                        {{ ucfirst($transaction->status) }}
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Service Providers Info -->
    <div class="card">
        <h3 class="text-lg font-semibold text-white mb-4">Supported Networks</h3>
        <div class="grid grid-cols-4 gap-4">
            <div class="text-center">
                <div class="w-12 h-12 bg-yellow-600 rounded-lg flex items-center justify-center mx-auto mb-2">
                    <span class="text-white font-bold text-sm">MTN</span>
                </div>
                <p class="text-gray-400 text-xs">Available</p>
            </div>
            <div class="text-center">
                <div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center mx-auto mb-2">
                    <span class="text-white font-bold text-sm">GLO</span>
                </div>
                <p class="text-gray-400 text-xs">Available</p>
            </div>
            <div class="text-center">
                <div class="w-12 h-12 bg-red-600 rounded-lg flex items-center justify-center mx-auto mb-2">
                    <span class="text-white font-bold text-sm">ATL</span>
                </div>
                <p class="text-gray-400 text-xs">Available</p>
            </div>
            <div class="text-center">
                <div class="w-12 h-12 bg-green-800 rounded-lg flex items-center justify-center mx-auto mb-2">
                    <span class="text-white font-bold text-xs">9MOB</span>
                </div>
                <p class="text-gray-400 text-xs">Available</p>
            </div>
        </div>
    </div>
</div>

<!-- Coming Soon Modal -->
<div id="comingSoonModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50">
    <div class="absolute bottom-0 left-0 right-0 bg-dark-900 rounded-t-3xl p-6 slide-up">
        <div class="w-12 h-1 bg-gray-600 rounded-full mx-auto mb-6"></div>
        <div class="text-center">
            <div class="w-16 h-16 bg-primary-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-clock text-white text-2xl"></i>
            </div>
            <h3 class="text-xl font-semibold text-white mb-2" id="comingSoonTitle">Coming Soon</h3>
            <p class="text-gray-400 mb-6">This service will be available soon. We'll notify you when it's ready!</p>
            <button onclick="closeComingSoonModal()" class="w-full btn btn-primary">Got it</button>
        </div>
    </div>
</div>

@push('scripts')
<script>
function showComingSoon(serviceName) {
    document.getElementById('comingSoonTitle').textContent = serviceName + ' - Coming Soon';
    document.getElementById('comingSoonModal').classList.remove('hidden');
}

function closeComingSoonModal() {
    document.getElementById('comingSoonModal').classList.add('hidden');
}

function repeatTransaction() {
    // TODO: Implement repeat transaction functionality
    showToast('Repeat transaction feature coming soon!', 'info');
}

function showFavorites() {
    // TODO: Implement favorites functionality
    showToast('Favorites feature coming soon!', 'info');
}

function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `fixed top-4 right-4 p-4 rounded-lg text-white z-50 ${type === 'success' ? 'bg-success-600' : type === 'error' ? 'bg-error-600' : 'bg-primary-600'}`;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 3000);
}

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