@extends('super_admin.layouts.master')

@section('title', 'Plan Pricing Management')
@section('page_title', 'Subscription Plans & Pricing')

@section('content')

<!-- Header -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-4">
    <div>
        <h2 class="text-2xl font-bold text-gray-800">Plan Pricing</h2>
        <p class="text-sm text-gray-500">Manage subscription plans, modules and AI services</p>
    </div>
    <div class="flex gap-3">
        <a href="{{ route('super_admin.settings.pricing.create') }}" 
           class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
            <i class="fas fa-plus mr-2"></i>Create New Plan
        </a>
        <a href="{{ route('super_admin.settings.pricing.history.all') }}" 
           class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
            <i class="fas fa-history mr-2"></i>View All History
        </a>
    </div>
</div>

<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-xl shadow-sm p-4 border-l-4 border-blue-500">
        <p class="text-xs text-gray-500 uppercase">Total Plans</p>
        <p class="text-2xl font-bold text-gray-800">{{ $priceStats['total_plans'] }}</p>
    </div>
    <div class="bg-white rounded-xl shadow-sm p-4 border-l-4 border-green-500">
        <p class="text-xs text-gray-500 uppercase">Active Plans</p>
        <p class="text-2xl font-bold text-gray-800">{{ $priceStats['active_plans'] }}</p>
    </div>
    <div class="bg-white rounded-xl shadow-sm p-4 border-l-4 border-purple-500">
        <p class="text-xs text-gray-500 uppercase">Total Modules</p>
        <p class="text-2xl font-bold text-gray-800">{{ \App\Models\Module::count() }}</p>
    </div>
    <div class="bg-white rounded-xl shadow-sm p-4 border-l-4 border-orange-500">
        <p class="text-xs text-gray-500 uppercase">Avg. Monthly Price</p>
        <p class="text-2xl font-bold text-gray-800">₹{{ number_format($priceStats['average_price']) }}</p>
    </div>
</div>

<!-- Plans Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    @forelse($plans as $plan)
    @php
        // Get modules assigned to this plan
        $planModuleIds = \DB::table('plan_modules')
            ->where('plan_id', $plan->id)
            ->pluck('module_id')
            ->toArray();
        
        $planModules = \App\Models\Module::whereIn('id', $planModuleIds)->get();
        $moduleCount = $planModules->count();
        
        // Count AI features in these modules
        $aiFeatureCount = \App\Models\Feature::whereIn('module_id', $planModuleIds)
            ->where('is_ai_feature', true)
            ->count();
        
        // Get total features count
        $totalFeatureCount = \App\Models\Feature::whereIn('module_id', $planModuleIds)->count();
        
        // Count schools using this plan
        $schoolsUsingPlan = \App\Models\School::where('plan', $plan->plan_key)->count();
    @endphp
    
    <div class="bg-white rounded-xl shadow-sm overflow-hidden {{ $plan->is_active ? 'ring-2 ring-green-400' : 'opacity-75' }}">
        <!-- Plan Header -->
        <div class="px-6 py-4 {{ $plan->plan_key === 'basic' ? 'bg-blue-50' : ($plan->plan_key === 'standard' ? 'bg-purple-50' : 'bg-amber-50') }} border-b">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-3 
                        {{ $plan->plan_key === 'basic' ? 'bg-blue-200 text-blue-600' : ($plan->plan_key === 'standard' ? 'bg-purple-200 text-purple-600' : 'bg-amber-200 text-amber-600') }}">
                        <i class="fas {{ $plan->plan_key === 'basic' ? 'fa-star' : ($plan->plan_key === 'standard' ? 'fa-gem' : 'fa-crown') }} text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800">{{ $plan->plan_name }}</h3>
                        <!-- Status Badge with Toggle -->
                        <div class="flex items-center gap-2 mt-1">
                            <span class="text-xs px-2 py-0.5 rounded-full {{ $plan->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                {{ $plan->is_active ? 'Active' : 'Inactive' }}
                            </span>
                            @if($schoolsUsingPlan > 0)
                                <span class="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-700">
                                    <i class="fas fa-users mr-1"></i>{{ $schoolsUsingPlan }}
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
                @if($plan->ai_enabled)
                    <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full font-medium">
                        <i class="fas fa-robot mr-1"></i>AI
                    </span>
                @endif
            </div>
        </div>

        <!-- Pricing -->
        <div class="p-6">
            <div class="text-center mb-4">
                <div class="flex items-baseline justify-center">
                    <span class="text-3xl font-bold text-gray-800">₹{{ number_format($plan->monthly_price) }}</span>
                    <span class="text-gray-500 ml-1">/month</span>
                </div>
                @if($plan->yearly_price)
                    <p class="text-sm text-green-600 mt-1">
                        ₹{{ number_format($plan->yearly_price) }}/year 
                        @php
                            $savings = ($plan->monthly_price * 12) - $plan->yearly_price;
                        @endphp
                        @if($savings > 0)
                            <span class="text-xs text-gray-500">(Save ₹{{ number_format($savings) }})</span>
                        @endif
                    </p>
                @endif
            </div>

            <!-- Modules & AI Services -->
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div class="bg-blue-50 rounded-lg p-3 text-center border border-blue-100">
                    <div class="flex items-center justify-center gap-2 mb-1">
                        <i class="fas fa-cubes text-blue-600"></i>
                        <span class="text-2xl font-bold text-blue-700">{{ $moduleCount }}</span>
                    </div>
                    <p class="text-xs text-blue-600 font-medium">Modules</p>
                </div>
                <div class="bg-purple-50 rounded-lg p-3 text-center border border-purple-100">
                    <div class="flex items-center justify-center gap-2 mb-1">
                        <i class="fas fa-brain text-purple-600"></i>
                        <span class="text-2xl font-bold text-purple-700">{{ $aiFeatureCount }}</span>
                    </div>
                    <p class="text-xs text-purple-600 font-medium">AI Services</p>
                </div>
            </div>

            <!-- Module Names -->
            @if($moduleCount > 0)
            <div class="mb-4">
                <p class="text-xs font-semibold text-gray-500 uppercase mb-2">Included Modules</p>
                <div class="flex flex-wrap gap-1">
                    @foreach($planModules->take(3) as $module)
                        <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">
                            <i class="fas {{ $module->icon }} mr-1 text-xs"></i>{{ $module->name }}
                        </span>
                    @endforeach
                    @if($moduleCount > 3)
                        <span class="px-2 py-1 bg-gray-100 text-gray-500 rounded text-xs">
                            +{{ $moduleCount - 3 }} more
                        </span>
                    @endif
                </div>
            </div>
            @endif

            <!-- Total Features Count -->
            <div class="flex items-center justify-between py-3 border-t border-gray-100 mb-4">
                <span class="text-sm text-gray-600">Total Features</span>
                <span class="font-semibold text-gray-800">{{ $totalFeatureCount }}</span>
            </div>

            <!-- Limits -->
            <div class="grid grid-cols-2 gap-3 mb-4 text-center">
                <div class="bg-gray-50 rounded-lg p-2">
                    <p class="text-xs text-gray-500">Max Students</p>
                    <p class="font-semibold text-gray-800">{{ $plan->max_students ?? '∞' }}</p>
                </div>
                <div class="bg-gray-50 rounded-lg p-2">
                    <p class="text-xs text-gray-500">Max Teachers</p>
                    <p class="font-semibold text-gray-800">{{ $plan->max_teachers ?? '∞' }}</p>
                </div>
            </div>

            <!-- Activate/Deactivate Toggle Button -->
            <form action="{{ route('super_admin.settings.pricing.toggle-status', $plan) }}" 
                method="POST" 
                class="mb-3"
                id="toggleForm{{ $plan->id }}">
                @csrf
                @method('PATCH')
                
                @php
                    if ($plan->is_active) {
                        $btnClass = 'bg-gradient-to-r from-red-500 to-red-600 text-white hover:from-red-600 hover:to-red-700 shadow-lg shadow-red-200';
                        $icon = 'fa-toggle-off';
                        $btnText = 'Deactivate Plan';
                        $confirmTitle = 'Deactivate Plan?';
                        $confirmText = ($schoolsUsingPlan > 0 ? "{$schoolsUsingPlan} school(s) are currently using this plan. " : "") . "Existing schools will NOT be affected, but new schools cannot select this plan.";
                        $confirmBtn = 'Yes, Deactivate';
                        $confirmColor = '#ef4444';
                        $iconColor = 'text-red-100';
                    } else {
                        $btnClass = 'bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 shadow-lg shadow-green-200';
                        $icon = 'fa-toggle-on';
                        $btnText = 'Activate Plan';
                        $confirmTitle = 'Activate Plan?';
                        $confirmText = "This plan will be available for new schools to subscribe.";
                        $confirmBtn = 'Yes, Activate';
                        $confirmColor = '#22c55e';
                        $iconColor = 'text-green-100';
                    }
                @endphp
                
                <button type="button" 
                        onclick="showToggleModal('{{ $plan->id }}', '{{ $confirmTitle }}', '{{ $confirmText }}', '{{ $confirmBtn }}', '{{ $confirmColor }}')"
                        class="w-full py-3 rounded-xl font-semibold text-sm transition-all duration-200 flex items-center justify-center gap-2 {{ $btnClass }} transform hover:scale-[1.02] active:scale-[0.98]">
                    <i class="fas {{ $icon }} {{ $iconColor }} text-lg"></i>
                    <span>{{ $btnText }}</span>
                </button>
            </form>

            <!-- Actions -->
            <div class="flex gap-2">
                <a href="{{ route('super_admin.settings.pricing.edit', $plan) }}" 
                   class="flex-1 py-2 bg-blue-600 text-white text-center rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">
                    <i class="fas fa-edit mr-1"></i>Edit
                </a>
                <a href="{{ route('super_admin.settings.pricing.history', $plan) }}" 
                   class="flex-1 py-2 bg-gray-100 text-gray-700 text-center rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium">
                    <i class="fas fa-history mr-1"></i>History
                </a>
            </div>
            
            <!-- Delete Button (only if no schools using it) -->
            @if($schoolsUsingPlan === 0)
                <form action="{{ route('super_admin.settings.pricing.destroy', $plan) }}" method="POST" class="mt-2" onsubmit="return confirm('Delete this plan permanently?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="w-full py-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors text-sm font-medium">
                        <i class="fas fa-trash mr-1"></i>Delete Plan
                    </button>
                </form>
            @else
                <p class="mt-2 text-xs text-center text-orange-600 bg-orange-50 rounded-lg py-2">
                    <i class="fas fa-users mr-1"></i>{{ $schoolsUsingPlan }} school(s) using this plan
                </p>
            @endif
        </div>
    </div>
    @empty
    <div class="lg:col-span-3 text-center py-12">
        <div class="bg-white rounded-xl shadow-sm p-8">
            <i class="fas fa-tags text-4xl text-gray-300 mb-4"></i>
            <h3 class="text-lg font-medium text-gray-800">No Plans Found</h3>
            <p class="text-gray-500 mb-4">Create your first subscription plan to get started.</p>
            <a href="{{ route('super_admin.settings.pricing.create') }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                <i class="fas fa-plus mr-2"></i>Create Plan
            </a>
        </div>
    </div>
    @endforelse
</div>

@endsection

@push('scripts')
<script>
function showToggleModal(planId, title, text, confirmBtn, confirmColor) {
    // Remove existing modal if any
    const existingModal = document.getElementById('toggleModal');
    if (existingModal) existingModal.remove();
    
    // Create modal HTML
    const modalHTML = `
        <div id="toggleModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm transition-opacity duration-300">
            <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full transform scale-95 opacity-0 transition-all duration-300" id="modalContent">
                <!-- Header -->
                <div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white rounded-t-2xl">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full flex items-center justify-center" style="background-color: ${confirmColor}20">
                            <i class="fas fa-exclamation-triangle text-lg" style="color: ${confirmColor}"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">${title}</h3>
                    </div>
                </div>
                
                <!-- Body -->
                <div class="px-6 py-5">
                    <p class="text-gray-600 text-sm leading-relaxed">${text}</p>
                    
                    <!-- Info Box -->
                    <div class="mt-4 p-3 bg-blue-50 border border-blue-100 rounded-lg">
                        <div class="flex items-start gap-2">
                            <i class="fas fa-info-circle text-blue-500 mt-0.5"></i>
                            <p class="text-xs text-blue-700">
                                This action will take effect immediately for new school registrations.
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- Footer -->
                <div class="px-6 py-4 bg-gray-50 rounded-b-2xl flex gap-3">
                    <button onclick="closeToggleModal()" 
                            class="flex-1 py-2.5 px-4 bg-white border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium text-sm">
                        Cancel
                    </button>
                    <button onclick="confirmToggle('${planId}')" 
                            class="flex-1 py-2.5 px-4 text-white rounded-xl transition-all duration-200 font-medium text-sm shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-[1.01]"
                            style="background-color: ${confirmColor}; box-shadow: ${confirmColor}40 0 10px 20px -5px">
                        ${confirmBtn}
                    </button>
                </div>
            </div>
        </div>
    `;
    
    // Add to body
    document.body.insertAdjacentHTML('beforeend', modalHTML);
    
    // Animate in
    setTimeout(() => {
        const modal = document.getElementById('toggleModal');
        const content = document.getElementById('modalContent');
        modal.classList.remove('opacity-0');
        content.classList.remove('scale-95', 'opacity-0');
        content.classList.add('scale-100', 'opacity-100');
    }, 10);
}

function closeToggleModal() {
    const modal = document.getElementById('toggleModal');
    const content = document.getElementById('modalContent');
    
    if (modal && content) {
        content.classList.remove('scale-100', 'opacity-100');
        content.classList.add('scale-95', 'opacity-0');
        modal.classList.add('opacity-0');
        
        setTimeout(() => modal.remove(), 300);
    }
}

function confirmToggle(planId) {
    const form = document.getElementById('toggleForm' + planId);
    if (form) {
        // Add loading state
        const btn = form.querySelector('button[type="button"]');
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
        btn.disabled = true;
        
        form.submit();
    }
}

// Close on backdrop click
document.addEventListener('click', function(e) {
    if (e.target.id === 'toggleModal') {
        closeToggleModal();
    }
});

// Close on Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeToggleModal();
    }
});
</script>
@endpush