@extends('super_admin.layouts.master')

@section('title', 'Create New Plan')
@section('page_title', 'Create Subscription Plan')

@section('content')
<!-- Add this at top of form -->
@if($errors->any())
    <div class="mb-6 bg-red-50 border border-red-200 rounded-xl p-4">
        <div class="flex items-center mb-2">
            <i class="fas fa-exclamation-circle text-red-600 mr-2"></i>
            <h4 class="font-semibold text-red-800">Please fix the following errors:</h4>
        </div>
        <ul class="text-sm text-red-700 ml-6 space-y-1">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<!-- 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">Create New Plan</h2>
            <p class="text-sm text-gray-500">Add a new subscription plan with pricing</p>
        </div>
    </div>
    <button type="submit" form="createPlanForm" 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>Create Plan
    </button>
</div>

<div class="max-w-4xl mx-auto">
    <form id="createPlanForm" method="POST" action="{{ route('super_admin.settings.pricing.store') }}">
        @csrf

        <!-- 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 Key & Name -->
                <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">Plan Key <span class="text-red-500">*</span></label>
                        <input type="text" name="plan_key" value="{{ old('plan_key') }}" 
                               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_key') border-red-500 @enderror"
                               placeholder="e.g., basic, standard, premium" required
                               pattern="[a-z0-9_]+" title="Only lowercase letters, numbers, and underscores">
                        <p class="text-xs text-gray-500 mt-1">Unique identifier (e.g., basic, standard, premium)</p>
                        @error('plan_key')
                            <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">Plan Name <span class="text-red-500">*</span></label>
                        <input type="text" name="plan_name" value="{{ old('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"
                               placeholder="e.g., Basic Plan" required>
                        @error('plan_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Description -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                    <textarea name="description" rows="3" 
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                              placeholder="Describe what this plan offers...">{{ old('description') }}</textarea>
                </div>
            </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') }}" 
                                   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 oninput="suggestYearly()">
                        </div>
                        @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') }}" 
                                   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">
                        </div>
                        <p class="text-xs text-green-600 mt-1" id="yearlySuggestion"></p>
                    </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') }}" 
                               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">
                        <p class="text-xs text-gray-500 mt-1">Leave empty for unlimited</p>
                    </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') }}" 
                               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">
                        <p class="text-xs text-gray-500 mt-1">Leave empty for unlimited</p>
                    </div>
                </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'))
                        @foreach(old('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 (e.g., Student Management)">
                            <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">
                    <label class="flex items-center cursor-pointer">
                        <input type="checkbox" name="ai_enabled" value="1" 
                               {{ old('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', true) ? '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> -->

                <!-- 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">
                            <input type="checkbox" name="modules[]" value="{{ $module->id }}" 
                                   {{ in_array($module->id, old('modules', [])) ? '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 }} text-gray-500"></i>
                                    <span class="font-medium text-gray-800">{{ $module->name }}</span>
                                </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. Please create modules first.</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>

        <!-- Submit -->
        <div class="flex gap-3">
            <a href="{{ route('super_admin.settings.pricing.index') }}" 
               class="flex-1 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-center font-medium transition-colors">
                Cancel
            </a>
            <button type="submit" class="flex-1 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium transition-colors">
                <i class="fas fa-save mr-2"></i>Create Plan
            </button>
        </div>
    </form>
</div>

@endsection

@push('scripts')
<script>
    function suggestYearly() {
        const monthly = parseFloat(document.getElementById('monthlyPrice').value) || 0;
        const yearlyInput = document.getElementById('yearlyPrice');
        const suggestion = document.getElementById('yearlySuggestion');
        
        if (!yearlyInput.value && monthly > 0) {
            const suggested = Math.round(monthly * 12 * 0.85); // 15% discount
            suggestion.innerHTML = `<span class="text-blue-600"><i class="fas fa-lightbulb mr-1"></i>Suggested: ₹${suggested.toLocaleString('en-IN')} (15% off)</span>`;
        }
    }

    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