@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-white mb-4">
            <i class="fa-solid fa-crown me-2 text-warning"></i>Choose Your Plan
        </h1>
        <p class="text-white mb-5">Manage and monitor all financial transactions</p>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($plans as $plan)
            <div class="bg-white rounded-lg shadow-lg overflow-hidden relative">
                <!-- Popular Badge -->
                @if($plan->name === 'Pro Plan')
                    <span class="absolute top-0 right-0 bg-yellow-400 text-black px-3 py-1 rounded-tl-lg rounded-br-lg">
                        <i class="fa-solid fa-star me-1"></i>
                        Most Popular
                    </span>
                @endif

                <div class="bg-gradient-to-r from-blue-500 to-purple-600 p-6 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <h2 class="text-2xl font-bold">{{ $plan->name }}</h2>
                            <h3 class="text-3xl font-bold mt-2 text-yellow-400">${{ number_format($plan->price, 0) }}</h3>
                        </div>
                        @if($plan->icon)
                            <div class="text-4xl">
                                <i class="fa-solid fa-{{ $plan->icon }}"></i>
                            </div>
                        @endif
                    </div>
                    @if($plan->description)
                        <p class="mt-2 text-sm opacity-90">{{ $plan->description }}</p>
                    @endif
                </div>
                
                <div class="p-6">
                    <div class="space-y-4">
                        <!-- Key Features -->
                        <div class="grid grid-cols-2 gap-4">
                            <div class="flex items-center">
                                <i class="fa-solid fa-percentage me-2 text-yellow-400"></i>
                                <div>
                                    <p class="text-gray-600">Commission Rate</p>
                                    <p class="font-semibold">{{ $plan->commission_rate }}%</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="fa-solid fa-gift me-2 text-yellow-400"></i>
                                <div>
                                    <p class="text-gray-600">Cashback</p>
                                    <p class="font-semibold">${{ number_format($plan->cashback, 0) }}</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="fa-solid fa-hand-holding-dollar me-2 text-yellow-400"></i>
                                <div>
                                    <p class="text-gray-600">Direct Commission</p>
                                    <p class="font-semibold">${{ number_format($plan->direct_commission, 0) }}</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="fa-solid fa-user-tie me-2 text-yellow-400"></i>
                                <div>
                                    <p class="text-gray-600">Owner Share</p>
                                    <p class="font-semibold">${{ number_format($plan->owner_share, 0) }}</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Additional Features -->
                        <div class="mt-4 space-y-2">
                            <div class="flex items-center">
                                <i class="fa-solid fa-book me-2 text-green-500"></i>
                                <span>E-Book Access: {{ $plan->ebook_access ? 'Yes' : 'No' }}</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa-solid fa-bullseye me-2 text-green-500"></i>
                                <span>Target Hitting Bonus: {{ $plan->target_hitting_bonus ? 'Yes' : 'No' }}</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="mt-6 space-y-4">
                        <!-- VIEW BUTTON - NOW MORE PROMINENT -->
                        <button type="button" 
                                class="w-full text-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105"
                                data-modal-target="planModal{{ $plan->id }}"
                                data-modal-toggle="planModal{{ $plan->id }}">
                            <div class="flex items-center justify-center">
                                <i class="fa-solid fa-eye me-2"></i>
                                View Details
                            </div>
                        </button>

                        @auth
                            @if(auth()->user()->plan_id === $plan->id)
                                <button class="w-full text-center bg-green-500 text-white font-bold py-3 px-4 rounded-lg" disabled>
                                    <i class="fa-solid fa-check me-2"></i>Current Plan
                                </button>
                            @else
                                <a href="{{ route('payment.show', $plan->id) }}" 
                                   class="block w-full text-center bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
                                    <div class="flex items-center justify-center">
                                        <i class="fa-solid fa-cart-shopping me-2"></i>
                                        Purchase Now
                                    </div>
                                </a>
                            @endif
                        @else
                            <a href="{{ route('login') }}"
                               class="block w-full text-center {{ $plan->price == 0 ? 'bg-gray-600 hover:bg-gray-700' : ($plan->name === 'Pro Plan' ? 'bg-yellow-500 hover:bg-yellow-600' : 'bg-blue-600 hover:bg-blue-700') }} text-white font-bold py-3 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
                                <div class="flex items-center justify-center">
                                    <i class="fa-solid fa-{{ $plan->price == 0 ? 'arrow-right' : ($plan->name === 'Pro Plan' ? 'crown' : 'arrow-up') }} me-2"></i>
                                    {{ $plan->price == 0 ? 'Get Started' : ($plan->name === 'Pro Plan' ? 'Go Pro' : 'Upgrade Now') }}
                                </div>
                            </a>
                        @endauth
                    </div>
                </div>
            </div>

            <!-- Modal -->
            <div id="planModal{{ $plan->id }}" tabindex="-1" aria-hidden="true" 
                 class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
                <div class="relative w-full max-w-2xl max-h-full">
                    <div class="relative bg-white rounded-lg shadow">
                        <div class="flex items-start justify-between p-4 border-b rounded-t">
                            <h3 class="text-xl font-semibold text-gray-900">
                                {{ $plan->name }} - Full Details
                            </h3>
                            <button type="button" 
                                    class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center"
                                    data-modal-hide="planModal{{ $plan->id }}">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </div>
                        <div class="p-6 space-y-6">
                            <!-- Basic Information -->
                            <div class="grid grid-cols-2 gap-4">
                                <div class="flex items-center">
                                    <i class="fa-solid fa-tag me-2 text-yellow-400"></i>
                                    <div>
                                        <p class="text-gray-600">Price</p>
                                        <p class="font-semibold">${{ number_format($plan->price, 0) }}</p>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa-solid fa-gift me-2 text-yellow-400"></i>
                                    <div>
                                        <p class="text-gray-600">Cashback</p>
                                        <p class="font-semibold">${{ number_format($plan->cashback, 0) }}</p>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa-solid fa-hand-holding-dollar me-2 text-yellow-400"></i>
                                    <div>
                                        <p class="text-gray-600">Direct Commission</p>
                                        <p class="font-semibold">${{ number_format($plan->direct_commission, 0) }}</p>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa-solid fa-user-tie me-2 text-yellow-400"></i>
                                    <div>
                                        <p class="text-gray-600">Owner Share</p>
                                        <p class="font-semibold">${{ number_format($plan->owner_share, 0) }}</p>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa-solid fa-percentage me-2 text-yellow-400"></i>
                                    <div>
                                        <p class="text-gray-600">Commission Rate</p>
                                        <p class="font-semibold">{{ $plan->commission_rate }}%</p>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa-solid fa-money-bill-wave me-2 text-yellow-400"></i>
                                    <div>
                                        <p class="text-gray-600">Total Distributed</p>
                                        <p class="font-semibold">${{ number_format($plan->total_distributed, 0) }}</p>
                                    </div>
                                </div>
                            </div>

                            @if($plan->description)
                                <div class="mt-4">
                                    <h4 class="font-semibold mb-2 flex items-center">
                                        <i class="fa-solid fa-info-circle me-2 text-yellow-400"></i>
                                        Description
                                    </h4>
                                    <p class="text-gray-600">{{ $plan->description }}</p>
                                </div>
                            @endif

                            @if($plan->indirect_levels)
                                <div class="mt-4">
                                    <h4 class="font-semibold mb-2 flex items-center">
                                        <i class="fa-solid fa-layer-group me-2 text-yellow-400"></i>
                                        Indirect Levels
                                    </h4>
                                    <div class="space-y-2">
                                        @foreach($plan->indirect_levels as $level)
                                            <div class="flex justify-between text-sm bg-gray-50 p-2 rounded">
                                                <span>Level {{ $level['level'] }} ({{ $level['percentage'] }}%)</span>
                                                <span>${{ number_format($level['amount'], 0) }}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <div class="mt-4 space-y-2">
                                <div class="flex items-center">
                                    <i class="fa-solid fa-book me-2 text-green-500"></i>
                                    <span>E-Book Access: {{ $plan->ebook_access ? 'Yes' : 'No' }}</span>
                                </div>
                                <div class="flex items-center">
                                    <i class="fa-solid fa-bullseye me-2 text-green-500"></i>
                                    <span>Target Hitting Bonus: {{ $plan->target_hitting_bonus ? 'Yes' : 'No' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b">
                            <button data-modal-hide="planModal{{ $plan->id }}" type="button" 
                                    class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10">
                                Close
                            </button>
                            @if($plan->price > 0)
                                <a href="{{ route('payment.show', $plan->id) }}" 
                                   class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
                                    Purchase Now
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

<!-- Modal Script -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const modalButtons = document.querySelectorAll('[data-modal-target]');
        modalButtons.forEach(button => {
            button.addEventListener('click', function() {
                const modalId = this.getAttribute('data-modal-target');
                const modal = document.getElementById(modalId);
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            });
        });

        const closeButtons = document.querySelectorAll('[data-modal-hide]');
        closeButtons.forEach(button => {
            button.addEventListener('click', function() {
                const modalId = this.getAttribute('data-modal-hide');
                const modal = document.getElementById(modalId);
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            });
        });

        // Close modal when clicking outside
        window.onclick = function(event) {
            if (event.target.classList.contains('fixed')) {
                event.target.classList.add('hidden');
                event.target.classList.remove('flex');
            }
        }
    });
</script>
@endsection