@extends('layouts.mobile')

@section('title', 'More Services')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="text-center">
        <div class="w-16 h-16 bg-gradient-to-r from-indigo-500 to-indigo-600 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-th-large text-white text-2xl"></i>
        </div>
        <h1 class="text-2xl font-bold text-white mb-2">More Services</h1>
        <p class="text-gray-400">Explore additional financial services and tools</p>
    </div>

    <!-- Quick Access -->
    <div class="card">
        <h3 class="text-lg font-semibold text-white mb-4">Popular Services</h3>
        <div class="grid grid-cols-2 gap-3">
            @foreach($popularServices as $service)
            <a href="{{ route($service['route']) }}" class="block p-4 bg-{{ $service['color'] }}-600/20 border border-{{ $service['color'] }}-600/30 rounded-lg hover:bg-{{ $service['color'] }}-600/30 transition-colors">
                <div class="text-center">
                    <div class="w-12 h-12 bg-{{ $service['color'] }}-600 rounded-lg flex items-center justify-center mx-auto mb-3">
                        <i class="{{ $service['icon'] }} text-white text-xl"></i>
                    </div>
                    <h4 class="text-white font-medium text-sm mb-1">{{ $service['name'] }}</h4>
                    <p class="text-gray-400 text-xs">{{ $service['description'] }}</p>
                </div>
            </a>
            @endforeach
        </div>
    </div>

    <!-- All Services -->
    <div class="space-y-4">
        <h3 class="text-lg font-semibold text-white">All Services</h3>
        
        @foreach($serviceCategories as $key => $service)
        <div class="card">
            <div class="flex items-start">
                <div class="w-14 h-14 bg-{{ $service['color'] }}-600 rounded-xl flex items-center justify-center mr-4 flex-shrink-0">
                    <i class="{{ $service['icon'] }} text-white text-xl"></i>
                </div>
                
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-2">
                        <h4 class="text-white font-semibold">{{ $service['title'] }}</h4>
                        @if($service['status'] === 'available')
                            <span class="text-xs bg-success-600/20 text-success-400 px-2 py-1 rounded-full">Available</span>
                        @else
                            <span class="text-xs bg-warning-600/20 text-warning-400 px-2 py-1 rounded-full">Coming Soon</span>
                        @endif
                    </div>
                    
                    <p class="text-gray-400 text-sm mb-3">{{ $service['description'] }}</p>
                    
                    <div class="flex flex-wrap gap-2 mb-3">
                        @foreach($service['features'] as $feature)
                            <span class="text-xs bg-dark-800 text-gray-300 px-2 py-1 rounded">{{ $feature }}</span>
                        @endforeach
                    </div>
                    
                    @if($service['status'] === 'available')
                        <a href="{{ route('services.' . str_replace('_', '-', $key)) }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-arrow-right mr-2"></i>Explore
                        </a>
                    @else
                        <button onclick="notifyWhenAvailable('{{ $service['title'] }}')" class="btn btn-secondary btn-sm">
                            <i class="fas fa-bell mr-2"></i>Notify Me
                        </button>
                    @endif
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Account Management -->
    <div class="card">
        <h3 class="text-lg font-semibold text-white mb-4">Account & Settings</h3>
        <div class="space-y-3">
            <a href="{{ route('settings.profile') }}" class="flex items-center justify-between p-3 bg-dark-800/30 rounded-lg hover:bg-dark-700/50 transition-colors">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-primary-600/20 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-user text-primary-400"></i>
                    </div>
                    <div>
                        <p class="text-white font-medium text-sm">Profile Settings</p>
                        <p class="text-gray-400 text-xs">Update your personal information</p>
                    </div>
                </div>
                <i class="fas fa-chevron-right text-gray-500"></i>
            </a>
            
            <a href="{{ route('settings.security') }}" class="flex items-center justify-between p-3 bg-dark-800/30 rounded-lg hover:bg-dark-700/50 transition-colors">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-success-600/20 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-shield-alt text-success-400"></i>
                    </div>
                    <div>
                        <p class="text-white font-medium text-sm">Security Settings</p>
                        <p class="text-gray-400 text-xs">Manage PIN, 2FA, and security</p>
                    </div>
                </div>
                <i class="fas fa-chevron-right text-gray-500"></i>
            </a>
            
            <button onclick="showSupport()" class="w-full flex items-center justify-between p-3 bg-dark-800/30 rounded-lg hover:bg-dark-700/50 transition-colors">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-info-600/20 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-headset text-info-400"></i>
                    </div>
                    <div class="text-left">
                        <p class="text-white font-medium text-sm">Customer Support</p>
                        <p class="text-gray-400 text-xs">Get help with your account</p>
                    </div>
                </div>
                <i class="fas fa-chevron-right text-gray-500"></i>
            </button>
            
            <button onclick="shareApp()" class="w-full flex items-center justify-between p-3 bg-dark-800/30 rounded-lg hover:bg-dark-700/50 transition-colors">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-purple-600/20 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-share text-purple-400"></i>
                    </div>
                    <div class="text-left">
                        <p class="text-white font-medium text-sm">Share {{ setting('business.name', 'AbokiPay') }}</p>
                        <p class="text-gray-400 text-xs">Invite friends and earn rewards</p>
                    </div>
                </div>
                <i class="fas fa-chevron-right text-gray-500"></i>
            </button>
        </div>
    </div>

    <!-- App Information -->
    <div class="card">
        <h3 class="text-lg font-semibold text-white mb-4">App Information</h3>
        <div class="space-y-3">
            <div class="flex justify-between items-center">
                <span class="text-gray-400 text-sm">Version</span>
                <span class="text-white text-sm">1.0.0</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-gray-400 text-sm">Build</span>
                <span class="text-white text-sm">2025.01.{{ date('md') }}</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-gray-400 text-sm">Last Update</span>
                <span class="text-white text-sm">{{ now()->format('M d, Y') }}</span>
            </div>
        </div>
        
        <div class="mt-4 pt-4 border-t border-dark-700">
            <div class="flex space-x-3">
                <button onclick="rateApp()" class="flex-1 btn btn-secondary btn-sm">
                    <i class="fas fa-star mr-2"></i>Rate App
                </button>
                <button onclick="reportIssue()" class="flex-1 btn btn-secondary btn-sm">
                    <i class="fas fa-bug mr-2"></i>Report Issue
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Notification Modal -->
<div id="notificationModal" 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-warning-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-bell text-white text-2xl"></i>
            </div>
            <h3 class="text-xl font-semibold text-white mb-2" id="notificationTitle">Get Notified</h3>
            <p class="text-gray-400 mb-6" id="notificationMessage">We'll notify you when this service becomes available.</p>
            <div class="space-y-3">
                <button onclick="subscribeToNotifications()" class="w-full btn btn-primary">
                    <i class="fas fa-bell mr-2"></i>Enable Notifications
                </button>
                <button onclick="closeNotificationModal()" class="w-full btn btn-secondary">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
let currentService = '';

function notifyWhenAvailable(serviceName) {
    currentService = serviceName;
    document.getElementById('notificationTitle').textContent = `Get Notified - ${serviceName}`;
    document.getElementById('notificationMessage').textContent = `We'll notify you as soon as ${serviceName} becomes available.`;
    document.getElementById('notificationModal').classList.remove('hidden');
}

function closeNotificationModal() {
    document.getElementById('notificationModal').classList.add('hidden');
}

function subscribeToNotifications() {
    // TODO: Implement actual notification subscription
    showToast(`You'll be notified when ${currentService} is available!`, 'success');
    closeNotificationModal();
}

function showSupport() {
    showToast('Customer support feature coming soon!', 'info');
}

function shareApp() {
    if (navigator.share) {
        navigator.share({
            title: '{{ setting("business.name", "AbokiPay") }} - Your Trusted Digital Wallet',
            text: 'Experience modern African fintech with {{ setting("business.name", "AbokiPay") }}',
            url: window.location.origin
        });
    } else {
        showToast('App sharing feature coming soon!', 'info');
    }
}

function rateApp() {
    showToast('App rating feature coming soon!', 'info');
}

function reportIssue() {
    showToast('Issue reporting 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('notificationModal');
    if (event.target === modal) {
        closeNotificationModal();
    }
});
</script>
@endpush
@endsection