@extends('super_admin.layouts.master')

@section('title', 'Edit ' . $planPricing->plan_name)
@section('page_title', 'Edit Subscription Plan')

@section('content')

<!-- Header -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-4">
    <div class="flex items-center">
        <a href="{{ route('super_admin.settings.pricing.index') }}" class="mr-4 p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div>
            <h2 class="text-2xl font-bold text-gray-800">Edit {{ $planPricing->plan_name }}</h2>
            <p class="text-sm text-gray-500">Plan Key: <span class="font-mono bg-gray-100 px-2 py-0.5 rounded">{{ $planPricing->plan_key }}</span></p>
        </div>
    </div>
    <button type="submit" form="editPlanForm" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
        <i class="fas fa-save mr-2"></i>Save Changes
    </button>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Form -->
    <div class="lg:col-span-2">
        <form id="editPlanForm" method="POST" action="{{ route('super_admin.settings.pricing.update', $planPricing) }}">
            @csrf
            @method('PUT')

            <!-- Basic Information -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-800">
                        <i class="fas fa-info-circle text-blue-600 mr-2"></i>Basic Information
                    </h3>
                </div>
                
                <div class="p-6 space-y-6">
                    <!-- Plan Name -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Plan Name <span class="text-red-500">*</span></label>
                        <input type="text" name="plan_name" value="{{ old('plan_name', $planPricing->plan_name) }}" 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('plan_name') border-red-500 @enderror"
                               required>
                        @error('plan_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Description -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                        <textarea name="description" rows="1" 
                                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">{{ old('description', $planPricing->description) }}</textarea>
                    </div>
                </div>
            </div>

            <!-- Plan Status -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-800">
                    <i class="fas fa-layer-group text-green-600 mr-2"></i>Plan Status
                    </h3>
                </div>
                
                <div class="p-6">
                    <label class="flex items-center cursor-pointer">
                        <input type="checkbox" name="is_active" value="1" 
                            {{ old('is_active', $planPricing->is_active) ? 'checked' : '' }}
                            class="w-5 h-5 text-green-600 rounded focus:ring-green-500">
                        <span class="ml-3 text-sm text-gray-700 font-medium">
                            Plan Active
                        </span>
                    </label>
                    <p class="text-xs text-gray-500 mt-2 ml-8">
                        Inactive plans won't be available for new schools to subscribe
                    </p>
                </div>
            </div>
            
            <!-- Pricing Details -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-800">
                        <i class="fas fa-tag text-green-600 mr-2"></i>Pricing Details
                    </h3>
                </div>
                
                <div class="p-6 space-y-6">
                    <!-- Prices -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Monthly Price (₹) <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">₹</span>
                                <input type="number" name="monthly_price" id="monthlyPrice"
                                       value="{{ old('monthly_price', $planPricing->monthly_price) }}" 
                                       class="w-full pl-8 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('monthly_price') border-red-500 @enderror"
                                       min="0" step="0.01" required onchange="showPriceChangeWarning()">
                            </div>
                            <p class="text-xs text-gray-500 mt-1">Current: ₹{{ number_format($planPricing->monthly_price) }}</p>
                            @error('monthly_price')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Yearly Price (₹)</label>
                            <div class="relative">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">₹</span>
                                <input type="number" name="yearly_price" id="yearlyPrice"
                                       value="{{ old('yearly_price', $planPricing->yearly_price) }}" 
                                       class="w-full pl-8 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                       min="0" step="0.01" onchange="showPriceChangeWarning()">
                            </div>
                            @php
                                $yearlySavings = ($planPricing->monthly_price * 12) - ($planPricing->yearly_price ?? 0);
                            @endphp
                            @if($yearlySavings > 0)
                                <p class="text-xs text-green-600 mt-1">Current savings: ₹{{ number_format($yearlySavings) }}/year</p>
                            @endif
                        </div>
                    </div>

                    <!-- Limits -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Max Students</label>
                            <input type="number" name="max_students" 
                                   value="{{ old('max_students', $planPricing->max_students) }}" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                   min="1" placeholder="Leave empty for unlimited">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Max Teachers</label>
                            <input type="number" name="max_teachers" 
                                   value="{{ old('max_teachers', $planPricing->max_teachers) }}" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                   min="1" placeholder="Leave empty for unlimited">
                        </div>
                    </div>
                </div>
            </div>

             <!-- Price Change Information (Shown only when price changes) -->
            <div id="priceChangeBox" class="bg-yellow-50 border border-yellow-200 rounded-xl p-6 {{ (old('monthly_price') != $planPricing->monthly_price || old('yearly_price') != $planPricing->yearly_price) ? '' : 'hidden' }}">
                <h4 class="font-semibold text-yellow-800 mb-4">
                    <i class="fas fa-exclamation-triangle mr-2"></i>Price Change Information
                </h4>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-yellow-800 mb-2">Effective Date <span class="text-red-500">*</span></label>
                        <input type="date" name="effective_date" 
                               value="{{ old('effective_date', now()->format('Y-m-d')) }}" 
                               class="w-full px-4 py-3 border border-yellow-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent bg-white"
                               min="{{ now()->format('Y-m-d') }}" required>
                        <p class="text-xs text-yellow-700 mt-1">When should this new pricing take effect?</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-yellow-800 mb-2">Reason for Price Change </label>
                        <textarea name="change_reason" rows="3" 
                                  class="w-full px-4 py-3 border border-yellow-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent bg-white"
                                  placeholder="Explain why you're changing the pricing (min 10 characters)" minlength="10">{{ old('change_reason') }}</textarea>
                    </div>
                </div>
            </div>
            
                    <!-- Modules Selection - NEW -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h3 class="text-lg font-semibold text-gray-800">
                    <i class="fas fa-cubes text-indigo-600 mr-2"></i>ERP Modules
                </h3>
                <p class="text-sm text-gray-500 mt-1">Select which modules are included in this plan</p>
            </div>
            
            <div class="p-6">
                @php
                    $groupedModules = $modules->groupBy('category');
                @endphp
                
                @forelse($groupedModules as $category => $categoryModules)
                <div class="mb-6 last:mb-0">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 uppercase tracking-wide">
                        {{ ucfirst($category) }} ({{ $categoryModules->count() }})
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        @foreach($categoryModules as $module)
                        <label class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors {{ in_array($module->id, $assignedModuleIds) ? 'bg-indigo-50 border-indigo-300' : '' }}">
                            <input type="checkbox" name="modules[]" value="{{ $module->id }}" 
                                   {{ in_array($module->id, old('modules', $assignedModuleIds)) ? 'checked' : '' }}
                                   class="mt-1 w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
                            <div class="ml-3 flex-1">
                                <div class="flex items-center gap-2">
                                    <i class="fas {{ $module->icon }} {{ in_array($module->id, $assignedModuleIds) ? 'text-indigo-600' : 'text-gray-500' }}"></i>
                                    <span class="font-medium {{ in_array($module->id, $assignedModuleIds) ? 'text-indigo-800' : 'text-gray-800' }}">{{ $module->name }}</span>
                                    @if(in_array($module->id, $assignedModuleIds))
                                        <span class="text-xs bg-indigo-100 text-indigo-700 px-2 py-0.5 rounded">Selected</span>
                                    @endif
                                </div>
                                <p class="text-xs text-gray-500 mt-1">{{ $module->features->count() }} features ({{ $module->features->where('is_ai_feature', true)->count() }} AI)</p>
                                @if($module->description)
                                    <p class="text-xs text-gray-400 mt-1">{{ Str::limit($module->description, 60) }}</p>
                                @endif
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>
                @empty
                <p class="text-gray-500 text-center py-4">No modules available.</p>
                @endforelse
                
                <!-- Quick Select Buttons -->
                <div class="mt-4 flex gap-2">
                    <button type="button" onclick="selectAllModules()" class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                        <i class="fas fa-check-square mr-1"></i>Select All
                    </button>
                    <span class="text-gray-300">|</span>
                    <button type="button" onclick="deselectAllModules()" class="text-sm text-gray-600 hover:text-gray-800 font-medium">
                        <i class="fas fa-square mr-1"></i>Deselect All
                    </button>
                </div>
            </div>
        </div>

        

            <!-- Features 
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-800">
                        <i class="fas fa-list-check text-purple-600 mr-2"></i>Features
                    </h3>
                </div>
                
                <div class="p-6">
                    <div id="featuresContainer">
                        @if(old('features', $planPricing->features))
                            @foreach(old('features', $planPricing->features) as $feature)
                                <div class="flex items-center gap-2 mb-2 feature-row">
                                    <input type="text" name="features[]" value="{{ $feature }}" 
                                           class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                           placeholder="Enter feature">
                                    <button type="button" onclick="removeFeature(this)" class="p-2 text-red-600 hover:bg-red-50 rounded-lg">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            @endforeach
                        @else
                            <div class="flex items-center gap-2 mb-2 feature-row">
                                <input type="text" name="features[]" 
                                       class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                       placeholder="Enter feature">
                                <button type="button" onclick="removeFeature(this)" class="p-2 text-red-600 hover:bg-red-50 rounded-lg">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        @endif
                    </div>
                    <button type="button" onclick="addFeature()" class="mt-2 text-sm text-blue-600 hover:text-blue-800 font-medium">
                        <i class="fas fa-plus mr-1"></i>Add Feature
                    </button>
                </div>
            </div>

            <!-- Options 
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-800">
                        <i class="fas fa-cog text-orange-600 mr-2"></i>Options
                    </h3>
                </div>
                
                <div class="p-6">
                    <div class="flex flex-col sm:flex-row gap-6 mb-4">
                        <label class="flex items-center cursor-pointer">
                            <input type="checkbox" name="ai_enabled" value="1" 
                                   {{ old('ai_enabled', $planPricing->ai_enabled) ? 'checked' : '' }}
                                   class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500">
                            <span class="ml-2 text-sm text-gray-700">
                                <i class="fas fa-robot text-purple-500 mr-1"></i>AI Features Enabled
                            </span>
                        </label>
                        
                        <label class="flex items-center cursor-pointer">
                            <input type="checkbox" name="is_active" value="1" 
                                   {{ old('is_active', $planPricing->is_active) ? 'checked' : '' }}
                                   class="w-4 h-4 text-green-600 rounded focus:ring-green-500">
                            <span class="ml-2 text-sm text-gray-700">
                                <i class="fas fa-check-circle text-green-500 mr-1"></i>Plan Active
                            </span>
                        </label>
                    </div>
                </div>
            </div>-->

           
        </form>
    </div>

    <!-- Sidebar -->
    <div class="space-y-6">
        <!-- Current Stats -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h4 class="font-semibold text-gray-800 mb-4">Plan Statistics</h4>
            <div class="space-y-3 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-500">Plan Key</span>
                    <span class="font-mono bg-gray-100 px-2 py-0.5 rounded text-xs">{{ $planPricing->plan_key }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Created</span>
                    <span>{{ $planPricing->created_at->format('M d, Y') }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Last Updated</span>
                    <span>{{ $planPricing->updated_at->diffForHumans() }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Price Changes</span>
                    <span class="font-bold">{{ $planPricing->histories->count() }}</span>
                </div>
                @php
                    $schoolsUsingPlan = \App\Models\School::where('plan', $planPricing->plan_key)->count();
                @endphp
                <div class="flex justify-between">
                    <span class="text-gray-500">Schools Using</span>
                    <span class="font-bold {{ $schoolsUsingPlan > 0 ? 'text-blue-600' : 'text-gray-400' }}">{{ $schoolsUsingPlan }}</span>
                </div>
            </div>
        </div>

        <!-- Recent History -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h4 class="font-semibold text-gray-800 mb-4">Recent Price Changes</h4>
            @if($planPricing->histories->count() > 0)
                <div class="space-y-3 max-h-64 overflow-y-auto">
                    @foreach($planPricing->histories->take(5) as $history)
                        <div class="border-l-2 {{ $history->change_type === 'increase' ? 'border-red-500' : ($history->change_type === 'decrease' ? 'border-green-500' : 'border-gray-500') }} pl-3 py-2">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-sm font-medium {{ $history->change_type === 'increase' ? 'text-red-600' : ($history->change_type === 'decrease' ? 'text-green-600' : 'text-gray-600') }}">
                                    ₹{{ number_format($history->old_monthly_price) }} → ₹{{ number_format($history->new_monthly_price) }}
                                </span>
                                <span class="text-xs text-gray-400">{{ $history->created_at->format('M d') }}</span>
                            </div>
                            <p class="text-xs text-gray-500">{{ Str::limit($history->change_reason, 40) }}</p>
                            <p class="text-xs text-gray-400 mt-1">by {{ $history->changedBy->name ?? 'Unknown' }}</p>
                        </div>
                    @endforeach
                </div>
                @if($planPricing->histories->count() > 5)
                    <a href="{{ route('super_admin.settings.pricing.history', $planPricing) }}" class="text-sm text-blue-600 hover:text-blue-800 mt-3 inline-block">
                        View all {{ $planPricing->histories->count() }} changes →
                    </a>
                @endif
            @else
                <p class="text-sm text-gray-500 text-center py-4">No price changes yet</p>
            @endif
        </div>

        <!-- Danger Zone -->
        @if($schoolsUsingPlan === 0)
            <div class="bg-red-50 border border-red-200 rounded-xl p-6">
                <h4 class="font-semibold text-red-800 mb-2">
                    <i class="fas fa-exclamation-triangle mr-2"></i>Danger Zone
                </h4>
                <p class="text-sm text-red-600 mb-4">Delete this plan permanently. This action cannot be undone.</p>
                <form action="{{ route('super_admin.settings.pricing.destroy', $planPricing) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this plan?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="w-full py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
                        <i class="fas fa-trash mr-2"></i>Delete Plan
                    </button>
                </form>
            </div>
        @else
            <div class="bg-orange-50 border border-orange-200 rounded-xl p-6">
                <h4 class="font-semibold text-orange-800 mb-2">
                    <i class="fas fa-info-circle mr-2"></i>Cannot Delete
                </h4>
                <p class="text-sm text-orange-600">{{ $schoolsUsingPlan }} school(s) are currently subscribed to this plan. Deactivate it instead if needed.</p>
            </div>
        @endif
    </div>
</div>

@endsection

@push('scripts')
<script>
    const originalMonthly = {{ $planPricing->monthly_price }};
    const originalYearly = {{ $planPricing->yearly_price ?? 'null' }};

    function showPriceChangeWarning() {
        const monthly = parseFloat(document.getElementById('monthlyPrice').value);
        const yearly = parseFloat(document.getElementById('yearlyPrice').value) || null;
        const box = document.getElementById('priceChangeBox');
        
        const monthlyChanged = monthly !== originalMonthly;
        const yearlyChanged = yearly !== originalYearly;
        
        if (monthlyChanged || yearlyChanged) {
            box.classList.remove('hidden');
        } else {
            box.classList.add('hidden');
        }
    }

    function addFeature() {
        const container = document.getElementById('featuresContainer');
        const div = document.createElement('div');
        div.className = 'flex items-center gap-2 mb-2 feature-row';
        div.innerHTML = `
            <input type="text" name="features[]" 
                   class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                   placeholder="Enter feature">
            <button type="button" onclick="removeFeature(this)" class="p-2 text-red-600 hover:bg-red-50 rounded-lg">
                <i class="fas fa-trash"></i>
            </button>
        `;
        container.appendChild(div);
    }

    function removeFeature(btn) {
        const rows = document.querySelectorAll('.feature-row');
        if (rows.length > 1) {
            btn.closest('.feature-row').remove();
        } else {
            btn.closest('.feature-row').querySelector('input').value = '';
        }
    }
        function selectAllModules() {
        document.querySelectorAll('input[name="modules[]"]').forEach(cb => cb.checked = true);
    }
    
    function deselectAllModules() {
        document.querySelectorAll('input[name="modules[]"]').forEach(cb => cb.checked = false);
    }
</script>
@endpush