{{-- Bottom Navigation Component for User Pages --}}
@props([
    'active' => 'dashboard'
])

<div class="bottom-nav">
    <a href="{{ route('user.dashboard') }}" class="nav-item {{ $active === 'dashboard' ? 'active' : '' }}">
        <i class="fas fa-home"></i>
        <span>{{ __('user.dashboard') }}</span>
    </a>
    <a href="{{ route('user.recharge') }}" class="nav-item {{ $active === 'recharge' ? 'active' : '' }}">
        <i class="fas fa-gem"></i>
        <span>{{ __('user.recharge') }}</span>
    </a>
    <a href="{{ route('user.withdraw') }}" class="nav-item {{ $active === 'withdraw' ? 'active' : '' }}">
        <i class="fas fa-money-bill-transfer"></i>
        <span>{{ __('user.withdraw') }}</span>
    </a>
    <a href="{{ route('user.recharge.history') }}" class="nav-item {{ $active === 'history' ? 'active' : '' }}">
        <i class="fas fa-history"></i>
        <span>{{ __('user.history') }}</span>
    </a>
</div>

<style>
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface, white);
    border-top: 1px solid var(--color-border, #e2e8f0);
    padding: var(--space-sm, 0.75rem);
    display: flex;
    justify-content: space-around;
    z-index: 100;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs, 0.25rem);
    text-decoration: none;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: var(--space-sm, 0.5rem);
    border-radius: var(--radius-md, 8px);
    min-width: 60px;
    position: relative;
    overflow: hidden;
}

.nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(124, 109, 242, 0.1), transparent);
    transition: left 0.5s ease;
}

.nav-item:hover::before {
    left: 100%;
}

.nav-item:hover {
    color: var(--primary-600, #7c6df2);
    transform: translateY(-2px);
}

.nav-item.active {
    color: var(--primary-600, #7c6df2);
    background: rgba(124, 109, 242, 0.1);
    transform: translateY(-2px);
}

.nav-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--primary-600, #7c6df2);
    border-radius: 0 0 2px 2px;
}

.nav-item i {
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.nav-item.active i {
    transform: scale(1.1);
}

/* Add haptic feedback for mobile */
.nav-item:active {
    transform: scale(0.95);
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .bottom-nav {
        display: none;
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .bottom-nav {
        padding: var(--space-xs, 0.5rem);
    }
    
    .nav-item {
        font-size: 0.6875rem;
        min-width: 50px;
        padding: var(--space-xs, 0.375rem);
    }
    
    .nav-item i {
        font-size: 1.125rem;
    }
}

/* Dark mode support */
[data-theme="dark"] .bottom-nav {
    background: var(--neutral-800, #1e293b);
    border-top-color: var(--neutral-700, #334155);
}

[data-theme="dark"] .nav-item {
    color: var(--neutral-400, #94a3b8);
}

[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .nav-item.active {
    color: var(--primary-400, #8b93f8);
}

[data-theme="dark"] .nav-item.active {
    background: rgba(139, 147, 248, 0.1);
}
</style>

<script>
// Add haptic feedback for mobile devices
document.addEventListener('DOMContentLoaded', function() {
    const navItems = document.querySelectorAll('.nav-item');
    
    navItems.forEach(item => {
        item.addEventListener('touchstart', function() {
            // Light haptic feedback on supported devices
            if (navigator.vibrate) {
                navigator.vibrate(10);
            }
        });
        
        // Add ripple effect on touch
        item.addEventListener('touchstart', function(e) {
            const ripple = document.createElement('div');
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.touches[0].clientX - rect.left - size / 2;
            const y = e.touches[0].clientY - rect.top - size / 2;
            
            ripple.style.cssText = `
                position: absolute;
                width: ${size}px;
                height: ${size}px;
                left: ${x}px;
                top: ${y}px;
                background: rgba(124, 109, 242, 0.3);
                border-radius: 50%;
                transform: scale(0);
                animation: ripple 0.6s linear;
                pointer-events: none;
                z-index: 1;
            `;
            
            this.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 600);
        });
    });
});

// Add ripple animation
const style = document.createElement('style');
style.textContent = `
    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);
</script>