@extends('templates.' . site('template') . '.layouts.user')
@section('contents')

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        'dark-bg': '#0f0f23',
                        'dark-surface': '#1a1a2e',
                        'dark-border': '#16213e',
                        'primary': '#ff6900',
                        'primary-dark': '#e55100',
                        'primary-light': '#ff8f00'
                    }
                }
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #0f0f23 100%);
            background-attachment: fixed;
            transition: all 0.3s ease;
        }
        
        /* Light mode styles */
        body.light-mode {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%);
        }
        
        body.light-mode .text-white {
            color: #1f2937 !important;
        }
        
        body.light-mode .text-gray-300 {
            color: #4b5563 !important;
        }
        
        body.light-mode .text-gray-400 {
            color: #6b7280 !important;
        }
        
        body.light-mode .bg-dark-surface\/80 {
            background-color: rgba(255, 255, 255, 0.9) !important;
            border-color: rgba(209, 213, 219, 0.3) !important;
        }
        
        body.light-mode .bg-dark-surface\/50 {
            background-color: rgba(255, 255, 255, 0.7) !important;
            border-color: rgba(209, 213, 219, 0.3) !important;
        }
        
        .plan-card {
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 105, 0, 0.2);
            transition: all 0.3s ease;
        }
        
        .plan-card:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 105, 0, 0.4);
            box-shadow: 0 10px 25px rgba(255, 105, 0, 0.15);
        }
        
        .plan-popular {
            position: relative;
            border: 2px solid #ff6900;
        }
        
        .plan-popular::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(90deg, #ff6900, #e55100);
            color: white;
            padding: 4px 16px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .theme-toggle {
            position: fixed;
            top: 1rem;
            right: 1rem;
            z-index: 50;
            background: rgba(255, 105, 0, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 105, 0, 0.3);
            border-radius: 50%;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .theme-toggle:hover {
            background: rgba(255, 105, 0, 0.4);
            transform: scale(1.05);
        }
        
        .glass-effect {
            background: rgba(26, 26, 46, 0.6);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 105, 0, 0.1);
        }
        
        body.light-mode .glass-effect {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
    </style>


   <div class="transition-all duration-300 ease-in-out mb-24"
     :class="{
         'lg:ml-64': !isCollapsed,
         'lg:ml-20': isCollapsed
     }">
  <div class="min-h-screen m-6 lg:m-12 mb-24" id="refreshPage">
        <!-- Header -->
        <div class="text-center pb-2">
            <h1 class="text-white text-4xl lg:text-5xl font-bold mb-4">Mining Plans</h1>
            <p class="text-gray-300 text-lg lg:text-xl opacity-80">Choose the perfect plan to boost your mining power</p>
        </div>
        
        

        <!-- Plans Grid -->
        <div class="max-w-7xl mx-auto mb-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-6">
                
              
                @foreach($plans as $plan)
                <!-- Professional Plan (Popular) -->
                <div class="plan-card plan-popular glass-effect mt-4 rounded-xl p-6">
                    <div class="text-center mb-6">
                        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-r from-primary to-primary-dark flex items-center justify-center">
                            <i class="fas fa-star text-white text-xl"></i>
                        </div>
                        <h3 class="text-white text-2xl font-bold mb-2">{{ $plan->title }}</h3>
                        <p class="text-gray-300">Most popular choice</p>
                    </div>
                    
                    <div class="text-center mb-6">
                        <div class="text-white text-4xl font-bold mb-2">
                            ${{ number_format($plan->price, 2) }}<span class="text-lg text-gray-400">/{{ $plan->period }} Hour(s) </span>
                        </div>
                    </div>
                    
                    <div class="space-y-4 mb-8">
                        <div class="flex items-center space-x-3">
                            <div class="w-5 h-5 rounded-full bg-primary flex items-center justify-center">
                                <i class="fas fa-check text-white text-xs"></i>
                            </div>
                            <span class="text-gray-300">{{ $plan->speed }} MH/s Hash Rate</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="w-5 h-5 rounded-full bg-primary flex items-center justify-center">
                                <i class="fas fa-check text-white text-xs"></i>
                            </div>
                            <span class="text-gray-300">CBC Mining</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="w-5 h-5 rounded-full bg-primary flex items-center justify-center">
                                <i class="fas fa-check text-white text-xs"></i>
                            </div>
                            <span class="text-gray-300">Miners: {{ $plan->miners }}</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="w-5 h-5 rounded-full bg-primary flex items-center justify-center">
                                <i class="fas fa-check text-white text-xs"></i>
                            </div>
                            <span class="text-gray-300">Priority Support</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="w-5 h-5 rounded-full bg-primary flex items-center justify-center">
                                <i class="fas fa-check text-white text-xs"></i>
                            </div>
                            <span class="text-gray-300">Advanced Analytics</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="w-5 h-5 rounded-full bg-primary flex items-center justify-center">
                                <i class="fas fa-check text-white text-xs"></i>
                            </div>
                            <span class="text-gray-300">Pool Fee Discount</span>
                        </div>
                    </div>
                    
                    <div class="glass-effect rounded-lg p-4 mb-6">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-400">Est. Daily Earnings:</span>
                            <span class="text-white font-medium">${{ number_format($plan->max_return_per_day, 2) }}</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-400">Contract Duration:</span>
                            <span class="text-white font-medium">{{ $plan->period }} Hour(s)</span>
                        </div>
                    </div>
                    @if(user()->plan_id == $plan->id)
                    <button class="w-full bg-gradient-to-r from-green-500 to-green-700 hover:from-green-700 hover:to-green-500 text-white font-semibold py-3 rounded-lg transition-all duration-300" >
                        Active Plan
                    </button>
                    @else
                    <button 
                        class="purchase-plan-btn w-full bg-gradient-to-r from-primary to-primary-dark hover:from-primary-dark hover:to-primary text-white font-semibold py-3 rounded-lg transition-all duration-300" 
                        data-url="{{ route('user.plan.purchase', $plan->id) }}">
                        Choose {{ $plan->title }}
                    </button>


                    {{--
                    <a href="{{ route('user.plan.purchase', $plan->id) }}">
                    <button class="w-full bg-gradient-to-r from-primary to-primary-dark hover:from-primary-dark hover:to-primary text-white font-semibold py-3 rounded-lg transition-all duration-300" >
                        Choose {{ $plan->title }}
                    </button>
                    </a>
                    --}}
                    @endif
                </div>
                
                @endforeach

               
            </div>
        </div>

        
   
    </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function () {
        $('.purchase-plan-btn').on('click', function (e) {
            e.preventDefault();
            const $btn = $(this);
            const url = $btn.data('url');
            const originalHtml = $btn.html();

            $btn.html('<i class="fas fa-spinner fa-spin mr-2"></i>Processing...').prop('disabled', true);

            $.ajax({
                url: url,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message,
                            confirmButtonColor: '#ff6900'
                        }).then(() => {
                            window.location.href = response.redirect;
                        });
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Action Blocked',
                            text: response.message
                        });
                        $btn.html(originalHtml).prop('disabled', false);
                    }
                },
                error: function (xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Something went wrong. Please try again.'
                    });
                    $btn.html(originalHtml).prop('disabled', false);
                }
            });
        });
    });
</script>


    <script>
        // Theme management
        function toggleTheme() {
            document.body.classList.toggle('light-mode');
            const isLight = document.body.classList.contains('light-mode');
            localStorage.setItem('theme', isLight ? 'light' : 'dark');
        }

        function initializeTheme() {
            const savedTheme = localStorage.getItem('theme') || 'dark';
            if (savedTheme === 'light') {
                document.body.classList.add('light-mode');
            }
        }

        // FAQ Toggle
        function toggleFAQ(button) {
            const content = button.nextElementSibling;
            const icon = button.querySelector('i');
            
            content.classList.toggle('hidden');
            icon.classList.toggle('rotate-180');
        }

        // Plan selection
        function selectPlan(planType) {
            // Show loading animation
            const button = event.target;
            const originalText = button.textContent;
            button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Processing...';
            button.disabled = true;
            
            // Simulate processing
            setTimeout(() => {
                alert(`You selected the ${planType} plan! Redirecting to payment...`);
                button.innerHTML = originalText;
                button.disabled = false;
                // Here you would typically redirect to a payment processor or Laravel route
                // window.location.href = `/subscribe/${planType}`;
            }, 2000);
        }

        // Initialize
        window.addEventListener('DOMContentLoaded', function() {
            initializeTheme();
        });
    </script>
@endsection
