@extends('super_admin.layouts.master')

@section('title', 'Create School')
@section('page_title', 'Create New School')

@section('content')

<!-- Progress Steps -->
<div class="mb-8">
    <div class="flex items-center justify-center">
        <div class="flex items-center w-full max-w-3xl">
            <div class="flex-1 flex flex-col items-center step-active" id="step1-indicator">
                <div class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-lg">1</div>
                <span class="mt-2 text-sm font-medium text-blue-600">Basic Info</span>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-2" id="progress1"></div>
            <div class="flex-1 flex flex-col items-center" id="step2-indicator">
                <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center font-bold text-lg">2</div>
                <span class="mt-2 text-sm font-medium text-gray-500">Subscription</span>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-2" id="progress2"></div>
            <div class="flex-1 flex flex-col items-center" id="step3-indicator">
                <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center font-bold text-lg">3</div>
                <span class="mt-2 text-sm font-medium text-gray-500">Modules & AI</span>
            </div>
        </div>
    </div>
</div>

<!-- Validation Errors Summary -->
<div id="validationErrors" class="hidden 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 id="errorList" class="text-sm text-red-700 ml-6 space-y-1"></ul>
</div>

<form method="POST" action="{{ route('super_admin.schools.store') }}" enctype="multipart/form-data" class="max-w-5xl mx-auto" id="createSchoolForm">
@csrf
    
    <!-- Step 1: Basic Information -->
    <div id="step1" class="step-content">
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <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>School Information
                </h3>
                <p class="text-sm text-gray-500 mt-1">Fields marked with <span class="text-red-500">*</span> are required</p>
            </div>
            
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- School Name -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">School Name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" id="schoolName" value="{{ old('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('name') border-red-500 @enderror"
                           placeholder="Enter school name" required oninput="generateSlug()">
                    <p class="mt-1 text-xs text-red-500 hidden" id="error-name">School name is required</p>
                    @error('name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Logo Upload - FIXED with persistence -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">School Logo</label>
                    <div class="flex items-start space-x-4">
                        <div class="w-24 h-24 bg-gray-200 rounded-xl flex items-center justify-center text-gray-500 overflow-hidden flex-shrink-0" id="logoPreview">
                            @if(session('temp_logo_path'))
                                <!-- Show temporarily stored logo -->
                                <img src="{{ asset('storage/' . session('temp_logo_path')) }}?t={{ time() }}" 
                                    class="w-full h-full object-cover" 
                                    alt="Selected Logo">
                            @else
                                <!-- Default icon -->
                                <i class="fas fa-school text-3xl"></i>
                            @endif
                        </div>
                        <div class="flex-1">
                            <!-- Hidden input to track if we have a temp logo -->
                            @if(session('temp_logo_path'))
                                <input type="hidden" name="temp_logo_exists" value="1">
                                <div class="mb-2 p-2 bg-green-50 border border-green-200 rounded-lg">
                                    <p class="text-sm text-green-700">
                                        <i class="fas fa-check-circle mr-1"></i>
                                        Logo already selected: <strong>{{ session('temp_logo_name') }}</strong>
                                    </p>
                                    <p class="text-xs text-green-600 mt-1">You can choose a different file below or keep this one.</p>
                                </div>
                            @endif
                            
                            <input type="file" 
                                name="logo" 
                                id="logoInput" 
                                accept="image/*"
                                class="block w-full text-sm text-gray-500 file:mr-4 file:py-3 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 file:cursor-pointer cursor-pointer border border-gray-300 rounded-lg"
                                onchange="previewLogo(this)">
                            <p class="mt-2 text-xs text-gray-500">
                                <i class="fas fa-check-circle text-green-500 mr-1"></i>
                                Any image size accepted. Auto-optimized for best quality.
                            </p>
                            <p class="mt-1 text-xs text-red-500 hidden" id="logoError"></p>
                        </div>
                    </div>
                    @error('logo')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <!-- Slug -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Subdomain/Slug <span class="text-red-500">*</span></label>
                    <div class="flex items-center">
                        <input type="text" name="slug" id="schoolSlug" value="{{ old('slug') }}" 
                               class="flex-1 px-4 py-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('slug') border-red-500 @enderror"
                               placeholder="school-name" required>
                        <span class="px-4 py-3 bg-gray-100 border border-l-0 border-gray-300 rounded-r-lg text-gray-600">.schoolerp.com</span>
                    </div>
                    <p class="mt-1 text-xs text-red-500 hidden" id="error-slug">Subdomain is required</p>
                    @error('slug')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <!-- Email -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">School Email <span class="text-red-500">*</span></label>
                    <input type="email" name="email" id="schoolEmail" value="{{ old('email') }}" 
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('email') border-red-500 @enderror"
                           placeholder="school@example.com" required>
                    <p class="mt-1 text-xs text-red-500 hidden" id="error-email">Valid email is required</p>
                    @error('email')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <!-- Phone -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Phone Number <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
                            <i class="fas fa-phone"></i>
                        </span>
                        <input type="tel" 
                               name="phone" 
                               id="phoneNumber"
                               value="{{ old('phone') }}" 
                               class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('phone') border-red-500 @enderror"
                               placeholder="9876543210" 
                               required
                               minlength="10"
                               maxlength="15"
                               oninput="validatePhone(this)"
                               onkeypress="return onlyNumbers(event)">
                    </div>
                    <p class="mt-1 text-xs text-red-500 hidden" id="error-phone">10-15 digit phone number is required</p>
                    @error('phone')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <!-- Address -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Address <span class="text-red-500">*</span></label>
                    <textarea name="address" id="schoolAddress" 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 @error('address') border-red-500 @enderror"
                              placeholder="Full address" required>{{ old('address') }}</textarea>
                    <p class="mt-1 text-xs text-red-500 hidden" id="error-address">Address is required</p>
                    @error('address')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>
        
        <!-- Admin Account -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden mt-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-user-shield text-green-600 mr-2"></i>School Admin Account
                </h3>
                <p class="text-sm text-gray-500 mt-1">Fields marked with <span class="text-red-500">*</span> are required</p>
            </div>
            
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Admin Name <span class="text-red-500">*</span></label>
                    <input type="text" name="admin_name" id="adminName" value="{{ old('admin_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('admin_name') border-red-500 @enderror"
                           placeholder="Full name" required>
                    <p class="mt-1 text-xs text-red-500 hidden" id="error-admin_name">Admin name is required</p>
                    @error('admin_name')
                        <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">Admin User ID (Login) <span class="text-red-500">*</span></label>
                    <input type="text" name="admin_email" id="adminEmail" value="{{ old('admin_email') }}" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('admin_email') border-red-500 @enderror"
                        placeholder="e.g. admin123" required 
                        oninput="this.value = this.value.replace(/\s+/g, '').toLowerCase()">
                    <p class="mt-1 text-xs text-red-500 hidden" id="error-admin_email">Admin User ID is required</p>
                    @error('admin_email')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Admin Password <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <input type="password" name="admin_password" id="adminPassword"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('admin_password') border-red-500 @enderror"
                               placeholder="Minimum 8 characters" required minlength="8">
                        <button type="button" onclick="togglePassword('adminPassword')" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                    <p class="mt-1 text-xs text-red-500 hidden" id="error-admin_password">Password must be at least 8 characters</p>
                    @error('admin_password')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>
        
        <!-- Navigation -->
        <div class="flex justify-end mt-6">
            <button type="button" onclick="validateStep1()" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium">
                Next: Subscription <i class="fas fa-arrow-right ml-2"></i>
            </button>
        </div>
    </div>
    
        <!-- Step 2: Subscription -->
        <div id="step2" class="step-content hidden">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <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-calendar-alt text-purple-600 mr-2"></i>Subscription Details
                    </h3>
                    <p class="text-sm text-gray-500 mt-1">Select plan, duration and start date. Fields marked with <span class="text-red-500">*</span> are required</p>
                </div>
                
                <div class="p-6 space-y-6">
                    <!-- Dynamic Plan Selection from Database -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-4">Select Plan <span class="text-red-500">*</span></label>
                        <p class="mt-1 text-xs text-red-500 hidden mb-2" id="error-plan">Please select a plan</p>
                        
                        @if($planPricings->count() > 0)
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                @foreach($planPricings as $planPricing)
                                    @php
                                        $colorClass = match($planPricing->plan_key) {
                                            'basic' => 'gray',
                                            'standard' => 'blue',
                                            'premium' => 'purple',
                                            default => 'blue'
                                        };
                                        $iconClass = match($planPricing->plan_key) {
                                            'basic' => 'fa-seedling',
                                            'standard' => 'fa-rocket',
                                            'premium' => 'fa-crown',
                                            default => 'fa-rocket'
                                        };
                                    @endphp
                                    
                                    <label class="relative cursor-pointer plan-option">
                                        <input type="radio" name="plan" value="{{ $planPricing->plan_key }}" 
                                            class="peer sr-only" 
                                            data-monthly-price="{{ $planPricing->monthly_price }}"
                                            data-yearly-price="{{ $planPricing->yearly_price ?? ($planPricing->monthly_price * 12 * 0.85) }}"
                                            onchange="selectPlan('{{ $planPricing->plan_key }}', {{ $planPricing->monthly_price }})">
                                        
                                        <div class="p-6 border-2 border-gray-200 rounded-xl hover:border-{{ $colorClass }}-300 peer-checked:border-{{ $colorClass }}-600 peer-checked:bg-{{ $colorClass }}-50 transition-all h-full">
                                            <div class="text-center">
                                                <div class="w-12 h-12 mx-auto mb-3 rounded-full bg-{{ $colorClass }}-100 flex items-center justify-center">
                                                    <i class="fas {{ $iconClass }} text-xl text-{{ $colorClass }}-600"></i>
                                                </div>
                                                <h4 class="font-bold text-lg">{{ $planPricing->plan_name }}</h4>
                                                <p class="text-sm text-gray-500 mt-2 min-h-[40px]">{{ Str::limit($planPricing->description, 60) }}</p>
                                                <p class="text-2xl font-bold text-{{ $colorClass }}-600 mt-3">₹{{ number_format($planPricing->monthly_price) }}<span class="text-sm text-gray-500">/mo</span></p>
                                                @if($planPricing->yearly_price)
                                                    <p class="text-xs text-green-600 mt-1">₹{{ number_format($planPricing->yearly_price) }}/yr save ₹{{ number_format(($planPricing->monthly_price * 12) - $planPricing->yearly_price) }}</p>
                                                @endif
                                                
                                                @if($planPricing->ai_enabled)
                                                    <span class="inline-block mt-2 px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">
                                                        <i class="fas fa-robot mr-1"></i>AI Enabled
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </label>
                                @endforeach
                            </div>
                        @else
                            <div class="p-4 bg-red-50 border border-red-200 rounded-lg text-center">
                                <p class="text-red-700"><i class="fas fa-exclamation-circle mr-2"></i>No active pricing plans found.</p>
                                <a href="{{ route('super_admin.settings.pricing.index') }}" class="text-blue-600 hover:underline text-sm mt-2 inline-block">Configure plans in Settings</a>
                            </div>
                        @endif
                    </div>

                   {{-- ===== SUBSCRIPTION START DATE & DURATION ===== --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                        {{-- Subscription Start Date --}}
                        <div>
                            <label class="block text-xs font-medium uppercase tracking-widest text-gray-400 mb-2">
                                Subscription Start Date <span class="text-red-500">*</span>
                            </label>

                            {{--
                                FIX: onclick on the wrapper calls showPicker() on the input.
                                    The icon has pointer-events:none so ALL clicks pass through to the input.
                            --}}
                            <div class="relative cursor-pointer"
                                onclick="document.getElementById('subscription_start').showPicker()">

                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <rect x="3" y="4" width="18" height="18" rx="2"/>
                                        <line x1="16" y1="2" x2="16" y2="6"/>
                                        <line x1="8"  y1="2" x2="8"  y2="6"/>
                                        <line x1="3"  y1="10" x2="21" y2="10"/>
                                    </svg>
                                </span>

                                <input type="date"
                                    name="subscription_start"
                                    id="subscription_start"
                                    value="{{ old('subscription_start', now()->format('Y-m-d')) }}"
                                    min="{{ now()->subYears(1)->format('Y-m-d') }}"
                                    max="{{ now()->addYears(2)->format('Y-m-d') }}"
                                    class="w-full pl-10 pr-4 py-2.5 cursor-pointer
                                            border border-gray-200 rounded-xl text-sm text-gray-800
                                            focus:ring-2 focus:ring-blue-500 focus:border-transparent
                                            @error('subscription_start') border-red-400 @enderror"
                                    required
                                    onchange="calculateTotal()">
                            </div>

                            <p class="mt-1.5 text-xs text-gray-400">Click anywhere on the field to pick a date</p>

                            <p class="mt-1 text-xs text-red-500 hidden" id="error-subscription_start">
                                Start date is required
                            </p>

                            @error('subscription_start')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Duration Selection --}}
                        <div>
                            <label class="block text-xs font-medium uppercase tracking-widest text-gray-400 mb-2">
                                Subscription Duration <span class="text-red-500">*</span>
                            </label>

                            <div class="grid grid-cols-2 gap-3">

                                {{-- 1 Month --}}
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="duration" value="1"
                                        class="peer sr-only" checked onchange="calculateTotal()">
                                    <div class="p-3 border border-gray-200 rounded-xl text-center
                                                transition-all duration-150
                                                hover:border-blue-300 hover:bg-blue-50/50
                                                peer-checked:border-blue-500 peer-checked:bg-blue-50">
                                        <p class="text-sm font-semibold text-gray-800">1 Month</p>
                                        <p class="text-xs text-gray-400 mt-0.5">Monthly</p>
                                    </div>
                                </label>

                                {{-- 3 Months --}}
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="duration" value="3"
                                        class="peer sr-only" onchange="calculateTotal()">
                                    <div class="p-3 border border-gray-200 rounded-xl text-center
                                                transition-all duration-150
                                                hover:border-blue-300 hover:bg-blue-50/50
                                                peer-checked:border-blue-500 peer-checked:bg-blue-50">
                                        <p class="text-sm font-semibold text-gray-800">3 Months</p>
                                        <p class="text-xs text-green-500 mt-0.5 font-medium">5% off</p>
                                    </div>
                                </label>

                                {{-- 6 Months --}}
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="duration" value="6"
                                        class="peer sr-only" onchange="calculateTotal()">
                                    <div class="p-3 border border-gray-200 rounded-xl text-center
                                                transition-all duration-150
                                                hover:border-blue-300 hover:bg-blue-50/50
                                                peer-checked:border-blue-500 peer-checked:bg-blue-50">
                                        <p class="text-sm font-semibold text-gray-800">6 Months</p>
                                        <p class="text-xs text-green-500 mt-0.5 font-medium">10% off</p>
                                    </div>
                                </label>

                                {{-- 12 Months — premium/highlighted --}}
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="duration" value="12"
                                        class="peer sr-only" onchange="calculateTotal()">
                                    <div class="p-3 border border-gray-200 rounded-xl text-center
                                                transition-all duration-150
                                                hover:border-violet-300 hover:bg-violet-50/50
                                                peer-checked:border-violet-500 peer-checked:bg-violet-50">
                                        <p class="text-sm font-semibold text-gray-800">12 Months</p>
                                        <p class="text-xs text-violet-500 mt-0.5 font-medium">15% off</p>                                       
                                    </div>
                                </label>

                            </div>
                        </div>

                    </div>

                    <!-- Price Calculation Summary -->
                    <div class="bg-blue-50 rounded-lg p-4 border border-blue-200">
                        <h4 class="font-semibold text-blue-800 mb-3"><i class="fas fa-calculator mr-2"></i>Price Calculation</h4>
                        <div class="grid grid-cols-2 md:grid-cols-5 gap-4 text-sm">
                            <div>
                                <span class="text-gray-600">Plan Price:</span>
                                <p class="font-bold text-gray-800">₹<span id="calcPlanPrice">0</span>/mo</p>
                            </div>
                            <div>
                                <span class="text-gray-600">Duration:</span>
                                <p class="font-bold text-gray-800"><span id="calcDuration">1</span> month(s)</p>
                            </div>
                            <div>
                                <span class="text-gray-600">Discount:</span>
                                <p class="font-bold text-green-700">₹<span id="calcDiscount">0</span></p>
                            </div>
                            <div>
                                <span class="text-gray-600">Start Date:</span>
                                <p class="font-bold text-gray-800" id="calcStartDate">{{ now()->format('d M Y') }}</p>
                            </div>
                            <div>
                                <span class="text-gray-600">End Date:</span>
                                <p class="font-bold text-blue-700" id="calcEndDate">-</p>
                            </div>
                        </div>
                        <div class="mt-3 pt-3 border-t border-blue-200 flex justify-between items-center">
                            <span class="text-gray-700 font-medium">Total Amount:</span>
                            <span class="text-2xl font-bold text-blue-700">₹<span id="calcTotal">0</span></span>
                        </div>
                        <input type="hidden" name="calculated_amount" id="calculatedAmount" value="0">
                        <input type="hidden" name="subscription_end" id="subscription_end" value="">
                    </div>
                </div>
            </div>
            
            <!-- Navigation -->
            <div class="flex justify-between mt-6">
                <button type="button" onclick="prevStep(1)" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium">
                    <i class="fas fa-arrow-left mr-2"></i> Back
                </button>
                <button type="button" onclick="validateStep2()" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium">
                    Next: Modules & AI <i class="fas fa-arrow-right ml-2"></i>
                </button>
            </div>
        </div>
    
    <!-- Step 3: Modules & AI Features -->
    <div id="step3" class="step-content hidden">
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <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-purple-600 mr-2"></i>Select Modules & AI Features
                </h3>
                <p class="text-sm text-gray-500 mt-1">Select at least one module for the school</p>
                <p class="mt-1 text-xs text-red-500 hidden" id="error-modules">Please select at least one module</p>
            </div>
            
            <div class="p-6 space-y-6" id="modulesContainer">
                @foreach($modules as $module)
                    <div class="border border-gray-200 rounded-lg p-4 module-card" data-module-id="{{ $module->id }}">
                        <div class="flex items-center justify-between mb-4 cursor-pointer" onclick="toggleFeatures({{ $module->id }})">
                            <div class="flex items-center">
                                <input type="checkbox" name="modules[]" value="{{ $module->id }}" id="module_{{ $module->id }}"
                                       class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500 module-checkbox"
                                       {{ in_array($module->id, old('modules', [])) ? 'checked' : 'checked' }}
                                       onchange="toggleModule({{ $module->id }})">
                                <label for="module_{{ $module->id }}" class="ml-3 font-semibold text-gray-800 cursor-pointer flex items-center">
                                    <i class="fas {{ $module->icon }} text-blue-600 mr-2"></i>{{ $module->name }}                                    
                                </label>
                                <span class="ml-2 px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">{{ ucfirst($module->category) }}</span>
                            </div>
                            <span class="text-sm text-gray-500">{{ $module->features->count() }} features</span>
                            <i id="toggle_icon_{{ $module->id }}" class="fas fa-chevron-down ml-2 text-gray-500 text-xs"></i>
                        </div>
                        
                        <p class="text-sm text-gray-600 mb-4 ml-8">{{ $module->description }}</p>
                        
                        <!-- Features List -->
                        <div class="ml-8 space-y-2 features-list hidden" id="features_{{ $module->id }}">
                            @foreach($module->features as $feature)
                                <label class="flex items-center p-2 rounded-lg hover:bg-gray-50 cursor-pointer {{ $feature->type == 'ai' ? 'bg-purple-50 border border-purple-100' : '' }}">
                                    <input type="checkbox" name="module_{{ $module->id }}_features[]" value="{{ $feature->code }}"
                                           class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 feature-checkbox"
                                           data-module="{{ $module->id }}" 
                                           {{ in_array($feature->code, old("module_{$module->id}_features", [])) ? 'checked' : 'checked' }}>
                                    <div class="ml-3 flex-1">
                                        <div class="flex items-center">
                                            <span class="font-medium text-sm {{ $feature->type == 'ai' ? 'text-purple-700' : 'text-gray-700' }}">{{ $feature->name }}</span>
                                            @if($feature->type == 'ai')
                                                <span class="ml-2 px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded-full font-medium">
                                                    <i class="fas fa-robot mr-1"></i>AI
                                                </span>
                                            @endif
                                        </div>
                                        <p class="text-xs text-gray-500">{{ $feature->description }}</p>
                                    </div>
                                </label>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        
       <!-- Summary -->
        <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mt-6">
            <h4 class="font-semibold text-blue-800 mb-2"><i class="fas fa-info-circle mr-2"></i>Summary</h4>
            <div class="grid grid-cols-3 gap-4 text-sm">
                <div>
                    <span class="text-gray-600">Modules:</span>
                    <span class="font-bold text-blue-700 ml-1" id="summaryModules">0</span>
                </div>
                <div>
                    <span class="text-gray-600">AI Features:</span>
                    <span class="font-bold text-purple-700 ml-1" id="summaryAI">0</span>
                </div>
                <div>
                    <span class="text-gray-600">Total:</span>
                    <span class="font-bold text-green-700 ml-1" id="summaryTotal">0</span>
                </div>
            </div>
        </div>
        
        <!-- Navigation -->
        <div class="flex justify-between mt-6">
            <button type="button" onclick="prevStep(2)" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium">
                <i class="fas fa-arrow-left mr-2"></i> Back
            </button>
            <button type="submit" class="px-8 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all font-medium shadow-lg">
                <i class="fas fa-check-circle mr-2"></i>Create School
            </button>
        </div>
    </div>
</form>

@endsection

@push('scripts')
<script>
    async function validateStep1() {
        const errors = [];
        hideValidationErrors();

        // Clear all previous red borders
        document.querySelectorAll('.border-red-500').forEach(el => {
            el.classList.remove('border-red-500');
        });

        // --- Local validations ---
        const name = document.getElementById('schoolName').value.trim();
        if (!name) { errors.push('School name is required'); showError('name'); }
        else hideError('name');

        const slug = document.getElementById('schoolSlug').value.trim();
        if (!slug) { errors.push('Subdomain is required'); showError('slug'); }
        else hideError('slug');

        const email = document.getElementById('schoolEmail').value.trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!email || !emailRegex.test(email)) { errors.push('Valid school email is required'); showError('email'); }
        else hideError('email');

        const phone = document.getElementById('phoneNumber').value.trim();
        if (!phone || phone.length < 10) { errors.push('Valid phone number required'); showError('phone'); }
        else hideError('phone');

        const address = document.getElementById('schoolAddress').value.trim();
        if (!address) { errors.push('Address is required'); showError('address'); }
        else hideError('address');

        const adminName = document.getElementById('adminName').value.trim();
        if (!adminName) { errors.push('Admin name is required'); showError('admin_name'); }
        else hideError('admin_name');

        const adminEmail = document.getElementById('adminEmail').value.trim();
        // Removed emailRegex.test here because it's now a User ID
        if (!adminEmail) { 
            errors.push('Admin User ID is required'); 
            showError('admin_email'); 
        } else { 
            hideError('admin_email'); 
        }


        const adminPassword = document.getElementById('adminPassword').value;
        if (!adminPassword || adminPassword.length < 8) { errors.push('Password must be at least 8 characters'); showError('admin_password'); }
        else hideError('admin_password');

        // Agar local errors hain toh pehle inhe dikhao
        if (errors.length > 0) {
            showValidationErrors(errors);
            scrollToFirstError();
            return false;
        }

        // --- AJAX: Server-side unique check ---
        const nextBtn = document.querySelector('[onclick="validateStep1()"]');
        nextBtn.disabled = true;
        nextBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Checking...';

        try {
            const response = await fetch('{{ route('super_admin.schools.check-unique') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                },
                body: JSON.stringify({
                    slug:        slug,
                    email:       email,
                    admin_email: adminEmail,
                })
            });

            const data = await response.json();

            if (!data.valid) {
                const serverErrors = [];

                if (data.errors.slug) {
                    serverErrors.push(data.errors.slug);
                    hideError('slug');
                    showCustomError('schoolSlug', data.errors.slug);
                }
                if (data.errors.email) {
                    serverErrors.push(data.errors.email);
                    hideError('email');
                    showCustomError('schoolEmail', data.errors.email);
                }
                if (data.errors.admin_email) {
                    serverErrors.push(data.errors.admin_email);
                    hideError('admin_email');
                    showCustomError('adminEmail', data.errors.admin_email);
                }

                showValidationErrors(serverErrors);
                scrollToFirstError();  // ← Scroll to first red field
                return false;
            }

            // ✅ All clear — move to Step 2
            hideValidationErrors();
            nextStep(2);

        } catch (e) {
            console.error(e);
            // Network error hone pe bhi proceed karne do
            nextStep(2);
        } finally {
            nextBtn.disabled = false;
            nextBtn.innerHTML = 'Next: Subscription <i class="fas fa-arrow-right ml-2"></i>';
        }
    }

    // ✅ Scroll to first red border field
    function scrollToFirstError() {
        const firstError = document.querySelector('.border-red-500');
        if (firstError) {
            firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
            firstError.focus();
        } else {
            // Fallback: scroll to error box
            const errorBox = document.getElementById('validationErrors');
            if (errorBox) errorBox.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }
    
    function validateStep2() {
        const errors = [];
        
        // Plan
        const plan = document.querySelector('input[name="plan"]:checked');
        if (!plan) {
            errors.push('Please select a subscription plan');
            showError('plan');
        } else {
            hideError('plan');
        }
        
        // Start Date
        const startDate = document.getElementById('subscription_start').value;
        if (!startDate) {
            errors.push('Subscription start date is required');
            showError('subscription_start');
        } else {
            hideError('subscription_start');
        }
        
        // End Date
        const endDate = document.getElementById('subscription_end').value;
        if (!endDate) {
            errors.push('Subscription end date is required');
            showError('subscription_end');
        } else if (startDate && endDate && new Date(endDate) <= new Date(startDate)) {
            errors.push('End date must be after start date');
            showError('subscription_end');
        } else {
            hideError('subscription_end');
        }
        
        if (errors.length > 0) {
            showValidationErrors(errors);
            return false;
        }
        
        hideValidationErrors();
        nextStep(3);
        updateSummary();
        return true;
    }
    
    // Helper Functions
    function showError(field) {
        const errorEl = document.getElementById('error-' + field);
        if (errorEl) errorEl.classList.remove('hidden');
        
        const inputEl = document.querySelector('[name="' + field + '"]') || 
                    document.getElementById(field) ||
                    document.getElementById(field.replace('_', ''));
        if (inputEl) inputEl.classList.add('border-red-500');
    }

    function hideError(field) {
        const errorEl = document.getElementById('error-' + field);
        if (errorEl) errorEl.classList.add('hidden');
        
        const inputEl = document.querySelector('[name="' + field + '"]') || 
                    document.getElementById(field) ||
                    document.getElementById(field.replace('_', ''));
        if (inputEl) inputEl.classList.remove('border-red-500');
    }

    // ✅ Naye functions — server error ke liye
    function showCustomError(fieldId, message) {
        const input = document.getElementById(fieldId);
        if (input) input.classList.add('border-red-500');
        let errorEl = document.getElementById('error-custom-' + fieldId);
        if (!errorEl) {
            errorEl = document.createElement('p');
            errorEl.id = 'error-custom-' + fieldId;
            errorEl.className = 'mt-1 text-xs text-red-500';
            input?.closest('div')?.appendChild(errorEl);
        }
        errorEl.textContent = message;
    }

    function hideCustomError(fieldId) {
        const errorEl = document.getElementById('error-custom-' + fieldId);
        if (errorEl) errorEl.remove();
        document.getElementById(fieldId)?.classList.remove('border-red-500');
    }
    function showValidationErrors(errors) {
        const container = document.getElementById('validationErrors');
        const list = document.getElementById('errorList');
        list.innerHTML = errors.map(e => '<li>' + e + '</li>').join('');
        container.classList.remove('hidden');
        
        // Scroll to top
        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
    
    function hideValidationErrors() {
        document.getElementById('validationErrors').classList.add('hidden');
    }
    
    // Generate slug from name
    function generateSlug() {
        const name = document.getElementById('schoolName').value;
        const slug = name.toLowerCase()
                        .replace(/[^a-z0-9]+/g, '-')
                        .replace(/^-+|-+$/g, '');
        document.getElementById('schoolSlug').value = slug;
    }
    
    // Password toggle
    function togglePassword(id) {
        const input = document.getElementById(id);
        const icon = input.nextElementSibling.querySelector('i');
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }
    
    // Phone validation
    function onlyNumbers(event) {
        if (event.key === 'Backspace' || event.key === 'Delete' || 
            event.key === 'Tab' || event.key === 'Escape' || 
            event.key === 'Enter' || event.key === 'ArrowLeft' || 
            event.key === 'ArrowRight') {
            return true;
        }
        if ((event.ctrlKey || event.metaKey) && 
            (event.key === 'a' || event.key === 'c' || 
             event.key === 'v' || event.key === 'x')) {
            return true;
        }
        if (event.key >= '0' && event.key <= '9') {
            return true;
        }
        event.preventDefault();
        return false;
    }
    
    function validatePhone(input) {
        input.value = input.value.replace(/\D/g, '');
        if (input.value.length > 15) {
            input.value = input.value.slice(0, 15);
        }
    }
    
    // Step navigation
    function nextStep(step) {
        document.querySelectorAll('.step-content').forEach(el => el.classList.add('hidden'));
        document.getElementById('step' + step).classList.remove('hidden');
        updateIndicators(step);
        
        // ✅ When going to step 3, filter modules based on selected plan
        if (step === 3) {
            const selectedPlan = document.querySelector('input[name="plan"]:checked')?.value;
            if (selectedPlan) {
                filterModulesByPlan(selectedPlan);
            }
        }
    }
    
    function prevStep(step) {
        document.querySelectorAll('.step-content').forEach(el => el.classList.add('hidden'));
        document.getElementById('step' + step).classList.remove('hidden');
        updateIndicators(step);
        hideValidationErrors();
    }
    
    function updateIndicators(currentStep) {
        for (let i = 1; i <= 3; i++) {
            const indicator = document.getElementById('step' + i + '-indicator');
            const progress = document.getElementById('progress' + (i-1));
            
            if (i < currentStep) {
                indicator.querySelector('div').className = 'w-10 h-10 rounded-full bg-green-600 text-white flex items-center justify-center font-bold text-lg';
                indicator.querySelector('span').className = 'mt-2 text-sm font-medium text-green-600';
                if (progress) progress.className = 'flex-1 h-1 bg-green-600 mx-2';
            } else if (i === currentStep) {
                indicator.querySelector('div').className = 'w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-lg';
                indicator.querySelector('span').className = 'mt-2 text-sm font-medium text-blue-600';
            } else {
                indicator.querySelector('div').className = 'w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center font-bold text-lg';
                indicator.querySelector('span').className = 'mt-2 text-sm font-medium text-gray-500';
                if (progress) progress.className = 'flex-1 h-1 bg-gray-200 mx-2';
            }
        }
    }
    
    // Toggle module features
    function toggleModule(moduleId) {
        const checkbox = document.getElementById('module_' + moduleId);
        const featuresList = document.getElementById('features_' + moduleId);
        const featureCheckboxes = featuresList.querySelectorAll('.feature-checkbox');
        
        featuresList.style.opacity = checkbox.checked ? '1' : '0.5';
        featureCheckboxes.forEach(cb => {
            cb.disabled = !checkbox.checked;
            if (!checkbox.checked) cb.checked = false;
        });
        
        updateSummary();
    }
    
    // Update summary
    function updateSummary() {
        let modules = 0, ai = 0, total = 0;
        
        // Only count visible (not hidden) checked modules
        document.querySelectorAll('.module-card').forEach(card => {
            // Skip hidden modules (from other plans)
            if (card.style.display === 'none') return;
            
            const checkbox = card.querySelector('.module-checkbox');
            if (checkbox && checkbox.checked && !checkbox.disabled) {
                modules++;
                
                // Count ALL features as AI (no separate standard count)
                const moduleId = checkbox.value;
                document.querySelectorAll(`[data-module="${moduleId}"].feature-checkbox:checked:not(:disabled)`).forEach(fcb => {
                    ai++;  // Count everything as AI
                    total++;
                });
            }
        });
        
        document.getElementById('summaryModules').textContent = modules;
        document.getElementById('summaryAI').textContent = ai;
        document.getElementById('summaryTotal').textContent = total;
    }
    
    // Initialize
    updateSummary();
    document.querySelectorAll('input[type="checkbox"]').forEach(cb => {
        cb.addEventListener('change', updateSummary);
    });
    
    // Real-time validation - hide errors on input
    document.querySelectorAll('input, textarea').forEach(input => {
        input.addEventListener('input', function() {
            const field = this.name || this.id;
            hideError(field);
            hideCustomError(this.id); // ✅ custom error bhi clear
        });
    });

    function previewLogo(input) {
        const preview = document.getElementById('logoPreview');
        const error = document.getElementById('logoError');
        
        if (input.files && input.files[0]) {
            // Check file size (10MB = 10 * 1024 * 1024)
            if (input.files[0].size > 10 * 1024 * 1024) {
                if (error) {
                    error.textContent = 'File too large! Maximum 10MB allowed.';
                    error.classList.remove('hidden');
                }
                input.value = '';
                return;
            }
            
            // Check file type
            const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
            if (!allowedTypes.includes(input.files[0].type)) {
                if (error) {
                    error.textContent = 'Only JPG, PNG, GIF, WEBP images allowed.';
                    error.classList.remove('hidden');
                }
                input.value = '';
                return;
            }
            
            // Hide error
            if (error) error.classList.add('hidden');
            
            // Show preview
            var reader = new FileReader();
            reader.onload = function(e) {
                preview.innerHTML = '<img src="' + e.target.result + '" class="w-full h-full object-cover">';
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

        // Plan → allowed categories mapping
        const planModules = @json($planModules);

        function filterModulesByPlan(plan) {
        const allowedModuleIds = planModules[plan] || [];
        
        document.querySelectorAll('.module-card').forEach(card => {
            const moduleId = parseInt(card.dataset.moduleId);
            const checkbox = card.querySelector('.module-checkbox');
            
            if (allowedModuleIds.includes(moduleId)) {
                // Show this module
                card.style.display = '';
                card.style.opacity = '1';
                
                // Enable and auto-check
                if (checkbox) {
                    checkbox.disabled = false;
                    checkbox.checked = true;
                    toggleModule(moduleId);
                }
            } else {
                // Hide this module
                card.style.display = 'none';
                
                // Uncheck and disable
                if (checkbox) {
                    checkbox.checked = false;
                    checkbox.disabled = true;
                }
            }
        });

        updateSummary();

        // Update banner
        const banners = {
            basic:    '🌱 Basic Plan — Core modules only',
            standard: '🚀 Standard Plan — Standard modules',
            premium:  '👑 Premium Plan — All modules + AI Features'
        };
        
        let banner = document.getElementById('planBanner');
        if (!banner) {
            banner = document.createElement('div');
            banner.id = 'planBanner';
            document.getElementById('modulesContainer').before(banner);
        }
        banner.className = 'mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-700 font-medium';
        banner.textContent = banners[plan] || '';
    }
    // ✅ Server-side errors — auto show on Step 1
    @if($errors->any())
        (function() {
            const serverErrors = [
                @foreach($errors->all() as $error)
                    "{{ $error }}",
                @endforeach
            ];
            
            // Step 1 pe hi raho
            document.querySelectorAll('.step-content').forEach(el => el.classList.add('hidden'));
            document.getElementById('step1').classList.remove('hidden');
            updateIndicators(1);
            
            // Error box show karo
            showValidationErrors(serverErrors);
            
            // Red border specific fields pe
            @if($errors->has('name'))
                document.getElementById('schoolName')?.classList.add('border-red-500');
            @endif
            @if($errors->has('slug'))
                document.getElementById('schoolSlug')?.classList.add('border-red-500');
            @endif
            @if($errors->has('email'))
                document.getElementById('schoolEmail')?.classList.add('border-red-500');
            @endif
            @if($errors->has('admin_email'))
                document.getElementById('adminEmail')?.classList.add('border-red-500');
            @endif
        })();
    @endif
   // Plan selection and calculation
    let selectedPlanPrice = 0;
    let selectedPlanKey = '';

    function selectPlan(planKey, monthlyPrice) {
        selectedPlanKey = planKey;
        selectedPlanPrice = monthlyPrice;
        calculateTotal();
        filterModulesByPlan(planKey);
    }

    function calculateTotal() {
        if (!selectedPlanPrice) {
            document.getElementById('calcPlanPrice').textContent = '0';
            document.getElementById('calcTotal').textContent = '0';
            document.getElementById('calcEndDate').textContent = '-';
            return;
        }

        const duration = parseInt(document.querySelector('input[name="duration"]:checked')?.value || 1);
        const startDateInput = document.getElementById('subscription_start').value;
        
        // 🆕 Use selected start date or default to today
        const startDate = startDateInput ? new Date(startDateInput) : new Date();
        const baseAmount = selectedPlanPrice * duration;
        
        // Discount structure
        let discountPercent = 0;
        let discountAmount = 0;
        
        switch(duration) {
            case 3: discountPercent = 5; break;
            case 6: discountPercent = 10; break;
            case 12: discountPercent = 15; break;
            default: discountPercent = 0;
        }
        
        discountAmount = Math.round((baseAmount * discountPercent) / 100);
        const totalAmount = baseAmount - discountAmount;
        
        // 🆕 Calculate end date based on start date
        const endDate = new Date(startDate);
        endDate.setMonth(endDate.getMonth() + duration);
        
        // Update display
        document.getElementById('calcPlanPrice').textContent = selectedPlanPrice.toLocaleString('en-IN');
        document.getElementById('calcDuration').textContent = duration;
        document.getElementById('calcDiscount').textContent = discountAmount.toLocaleString('en-IN');
        document.getElementById('calcTotal').textContent = totalAmount.toLocaleString('en-IN');
        
        // 🆕 Update date displays
        document.getElementById('calcStartDate').textContent = startDate.toLocaleDateString('en-IN', {
            day: '2-digit', month: 'short', year: 'numeric'
        });
        document.getElementById('calcEndDate').textContent = endDate.toLocaleDateString('en-IN', {
            day: '2-digit', month: 'short', year: 'numeric'
        });
        
        // Update hidden fields
        document.getElementById('calculatedAmount').value = totalAmount;
        document.getElementById('subscription_end').value = endDate.toISOString().split('T')[0];
    }

    // Update validateStep2 function
    function validateStep2() {
        const errors = [];
        
        // Plan validation
        const plan = document.querySelector('input[name="plan"]:checked');
        if (!plan) {
            errors.push('Please select a subscription plan');
            document.getElementById('error-plan').classList.remove('hidden');
        } else {
            document.getElementById('error-plan').classList.add('hidden');
        }
        
        // 🆕 Start Date validation
        const startDate = document.getElementById('subscription_start').value;
        if (!startDate) {
            errors.push('Subscription start date is required');
            document.getElementById('error-subscription_start').classList.remove('hidden');
            document.getElementById('subscription_start').classList.add('border-red-500');
        } else {
            const selectedDate = new Date(startDate);
            const minDate = new Date();
            minDate.setFullYear(minDate.getFullYear() - 1);
            const maxDate = new Date();
            maxDate.setFullYear(maxDate.getFullYear() + 2);
            
            if (selectedDate < minDate || selectedDate > maxDate) {
                errors.push('Start date must be within 1 year past to 2 years future');
                document.getElementById('subscription_start').classList.add('border-red-500');
            } else {
                document.getElementById('error-subscription_start').classList.add('hidden');
                document.getElementById('subscription_start').classList.remove('border-red-500');
            }
        }
        
        // Duration validation
        const duration = document.querySelector('input[name="duration"]:checked');
        if (!duration) {
            errors.push('Please select subscription duration');
        }
        
        if (errors.length > 0) {
            showValidationErrors(errors);
            return false;
        }
        
        hideValidationErrors();
        nextStep(3);
        updateSummary();
        return true;
    }

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        // Check if plan is pre-selected
        const selectedPlan = document.querySelector('input[name="plan"]:checked');
        if (selectedPlan) {
            selectedPlanPrice = parseFloat(selectedPlan.dataset.monthlyPrice) || 0;
            calculateTotal();
        }
        
        // 🆕 Initialize date display
        const startDateInput = document.getElementById('subscription_start');
        if (startDateInput && startDateInput.value) {
            calculateTotal();
        }
    });

    function toggleFeatures(moduleId) {
    const el = document.getElementById('features_' + moduleId);
    const icon = document.getElementById('toggle_icon_' + moduleId);

    if (el.classList.contains('hidden')) {
        el.classList.remove('hidden');
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-up');
    } else {
        el.classList.add('hidden');
        icon.classList.remove('fa-chevron-up');
        icon.classList.add('fa-chevron-down');
    }
}
</script>
@endpush