<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                    <i class="fas fa-credit-card mr-2"></i>{{ __('menu.plans_subscriptions') }}
                </h2>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    <a href="{{ route('dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">{{ __('menu.dashboard') }}</a>
                    <span class="mx-2">/</span>
                    <span>{{ __('menu.plans_subscriptions') }}</span>
                </p>
            </div>
            <a href="{{ route('dashboard') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200">
                <i class="fas fa-arrow-left mr-2"></i>
                {{ __('menu.back') }}
            </a>
        </div>
    </x-slot>

    <div class="space-y-6">

            {{-- Mesaje de succes/eroare --}}
            @if(session('success'))
                <div class="bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 p-4 mb-6 rounded-lg">
                    <div class="flex items-center">
                        <svg class="h-6 w-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <p class="text-green-700 dark:text-green-300 font-medium">{{ session('success') }}</p>
                    </div>
                </div>
            @endif

            @if(session('error'))
                <div class="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 mb-6 rounded-lg">
                    <div class="flex items-center">
                        <svg class="h-6 w-6 text-red-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <p class="text-red-700 dark:text-red-300 font-medium">{{ session('error') }}</p>
                    </div>
                </div>
            @endif

            {{-- Abonament Curent --}}
            @if($currentSubscription)
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg mb-6">
                    <div class="p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            Abonamentul Tău Curent
                        </h3>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Status</p>
                                <p class="text-lg font-semibold text-gray-900 dark:text-white">
                                    @if($currentSubscription->active())
                                        <span class="text-green-600">Activ</span>
                                    @elseif($currentSubscription->onGracePeriod())
                                        <span class="text-orange-600">În perioada de grație</span>
                                    @else
                                        <span class="text-red-600">Inactiv</span>
                                    @endif
                                </p>
                            </div>

                            <div>
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    @if($currentSubscription->onGracePeriod())
                                        Se termină la
                                    @else
                                        Următoarea facturare
                                    @endif
                                </p>
                                <p class="text-lg font-semibold text-gray-900 dark:text-white">
                                    @if($currentSubscription->onGracePeriod() && $currentSubscription->ends_at)
                                        <span class="text-orange-600">{{ $currentSubscription->ends_at->format('d.m.Y') }}</span>
                                    @elseif($currentSubscription->onTrial() && $currentSubscription->trial_ends_at)
                                        {{ $currentSubscription->trial_ends_at->format('d.m.Y') }}
                                    @elseif($currentSubscription->active())
                                        @php
                                            $nextBillingDate = 'N/A';
                                            try {
                                                $stripeSubscription = $currentSubscription->asStripeSubscription();
                                                if ($stripeSubscription && isset($stripeSubscription->current_period_end) && $stripeSubscription->current_period_end) {
                                                    $nextBillingDate = \Carbon\Carbon::createFromTimestamp($stripeSubscription->current_period_end)->format('d.m.Y');
                                                }
                                            } catch (\Exception $e) {
                                                // Keep N/A
                                            }
                                            echo $nextBillingDate;
                                        @endphp
                                    @else
                                        <span class="text-gray-400">-</span>
                                    @endif
                                </p>
                            </div>

                            <div class="flex items-end justify-end space-x-2">
                                @if($currentSubscription->onGracePeriod())
                                    <form action="{{ route('subscription.resume') }}" method="POST">
                                        @csrf
                                        <button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition">
                                            <i class="fas fa-play mr-1"></i> Reia Abonamentul
                                        </button>
                                    </form>
                                @else
                                    <a href="{{ route('subscription.billing-portal') }}" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                                        <i class="fas fa-cog mr-1"></i> Gestionează
                                    </a>
                                    <form action="{{ route('subscription.cancel-subscription') }}" method="POST" onsubmit="return confirm('Ești sigur că vrei să anulezi abonamentul?')">
                                        @csrf
                                        <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition">
                                            <i class="fas fa-times mr-1"></i> Anulează
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Planuri Disponibile --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                @foreach($plans as $plan)
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden {{ $currentSubscription && $currentSubscription->stripe_price == $plan->stripe_price_id ? 'ring-2 ring-blue-500' : '' }}">
                        <div class="p-6">
                            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                                {{ $plan->name }}
                                @if($currentSubscription && $currentSubscription->stripe_price == $plan->stripe_price_id)
                                    <span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded-full ml-2">Curent</span>
                                @endif
                            </h3>

                            <div class="mb-4">
                                <span class="text-4xl font-bold text-gray-900 dark:text-white">{{ number_format($plan->price, 2) }} RON</span>
                                <span class="text-gray-500 dark:text-gray-400">/lună</span>
                            </div>

                            <ul class="space-y-3 mb-6">
                                <li class="flex items-center text-gray-700 dark:text-gray-300">
                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                    {{ $plan->max_zones }} zone DNS
                                </li>
                                <li class="flex items-center text-gray-700 dark:text-gray-300">
                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                    {{ number_format($plan->max_dns_queries) }} interogări/lună
                                </li>
                                @if($plan->api_enabled)
                                    <li class="flex items-center text-gray-700 dark:text-gray-300">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Acces API
                                    </li>
                                @endif
                                @if($plan->priority_support)
                                    <li class="flex items-center text-gray-700 dark:text-gray-300">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Suport prioritar
                                    </li>
                                @endif
                            </ul>

                            @if($currentSubscription && $currentSubscription->stripe_price == $plan->stripe_price_id)
                                <button disabled class="w-full px-6 py-3 bg-gray-400 text-white rounded-lg cursor-not-allowed">
                                    Plan Curent
                                </button>
                            @elseif($currentSubscription)
                                <form action="{{ route('subscription.swap', $plan) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition">
                                        Schimbă la acest plan
                                    </button>
                                </form>
                            @else
                                <a href="{{ route('subscription.checkout', $plan) }}" class="block w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg text-center transition">
                                    Achiziționează
                                </a>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
    </div>
</x-app-layout>
