@extends('super_admin.layouts.master')

@section('title', 'Edit ' . $school->name)
@section('page_title', 'Edit School')

@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.schools.show', $school) }}" 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 School</h2>
            <p class="text-sm text-gray-500">{{ $school->name }}</p>
        </div>
    </div>
    
    <div class="flex items-center gap-3">
        <a href="{{ route('super_admin.schools.show', $school) }}" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
            <i class="fas fa-times mr-2"></i>Cancel
        </a>
        <button type="submit" form="editSchoolForm" 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>

<!-- Validation Errors -->
@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

<!-- Line 52 - ADD enctype="multipart/form-data" -->
<form method="POST" action="{{ route('super_admin.schools.update', $school) }}" enctype="multipart/form-data" id="editSchoolForm" class="max-w-5xl mx-auto">
    @csrf
    @method('PUT')
    
    {{-- REQUIRED: Hidden fields for validation --}}
    <input type="hidden" name="status" value="{{ old('status', $school->status) }}">
    <input type="hidden" name="plan" value="{{ old('plan', $school->plan) }}">

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            
            <!-- Basic Information -->
            <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>Basic Information
                    </h3>
                </div>
                
                <div class="p-6 space-y-6">
                    <!-- School Name -->
                    <div>
                        <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', $school->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()">
                        @error('name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Logo Upload -->
                    <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($school->logo && \Illuminate\Support\Facades\Storage::disk('public')->exists($school->logo))
                                    <img src="{{ asset('storage/' . $school->logo) }}?t={{ time() }}" alt="Current Logo" class="w-full h-full object-cover">
                                @else
                                    <i class="fas fa-school text-3xl"></i>
                                @endif
                            </div>
                            <div class="flex-1">
                                <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>
                                @if($school->logo)
                                    <p class="mt-1 text-xs text-blue-600">Current logo loaded. Choose new file to replace.</p>
                                @endif
                            </div>
                        </div>
                        @error('logo')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <!-- Slug -->
                    <div>
                        <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', $school->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-gray-500">This will change the school's URL</p>
                        @error('slug')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <!-- Email & Phone -->
                    <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">School Email <span class="text-red-500">*</span></label>
                            <input type="email" name="email" value="{{ old('email', $school->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>
                            @error('email')
                                <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">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', $school->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>
                            @error('phone')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- Address -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Address <span class="text-red-500">*</span></label>
                        <textarea name="address" 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', $school->address) }}</textarea>
                        @error('address')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
            
            <!-- Subscription Settings 
            <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 Settings
                    </h3>
                </div>
                
                <div class="p-6 space-y-6">
                    <div class="bg-blue-50 rounded-lg p-4 border border-blue-200">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                            <div>
                                <span class="text-gray-600">Current Plan:</span>
                                <span class="font-bold text-blue-700 ml-1">{{ $school->plan ? ucfirst($school->plan) : 'N/A' }}</span>
                            </div>
                            <div>
                                <span class="text-gray-600">Started:</span>
                                <span class="font-medium ml-1">{{ $school->subscription_start ? $school->subscription_start->format('M d, Y') : 'N/A' }}</span>
                            </div>
                            <div>
                                <span class="text-gray-600">Expires:</span>
                                <span class="font-medium {{ $school->daysUntilExpiry() <= 30 ? 'text-red-600' : 'text-green-600' }} ml-1">
                                    {{ $school->subscription_end ? $school->subscription_end->format('M d, Y') : 'N/A' }} 
                                    ({{ $school->daysUntilExpiry() }} days left)
                                </span>
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-4">Upgrade Plan <span class="text-red-500">*</span></label>
                        
                        @if($planPricings->count() > 0)
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                @foreach($planPricings as $planPricing)
                                    @php
                                        $isCurrent = $school->plan === $planPricing->plan_key;
                                        $currentPlanPricing = $planPricings->firstWhere('plan_key', $school->plan);
                                        $currentPrice = $currentPlanPricing ? $currentPlanPricing->monthly_price : 0;
                                        $isUpgrade = $planPricing->monthly_price > $currentPrice;
                                        $isDowngrade = $planPricing->monthly_price < $currentPrice;
                                        
                                        // Color scheme based on plan
                                        $colorClass = match($planPricing->plan_key) {
                                            'basic' => 'gray',
                                            'standard' => 'blue',
                                            'premium' => 'purple',
                                            default => 'blue'
                                        };
                                    @endphp
                                    
                                    <label class="relative {{ $isDowngrade ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer' }}">
                                        <input type="radio" name="plan" value="{{ $planPricing->plan_key }}" 
                                            class="peer sr-only" 
                                            {{ old('plan', $school->plan) == $planPricing->plan_key ? 'checked' : '' }}
                                            {{ $isDowngrade ? 'disabled' : '' }}>
                                        
                                        <div class="p-4 border-2 rounded-xl transition-all h-full
                                            {{ $isCurrent ? 'border-' . $colorClass . '-600 bg-' . $colorClass . '-50' : 'border-gray-200 hover:border-' . $colorClass . '-300' }}
                                            peer-checked:border-{{ $colorClass }}-600 peer-checked:bg-{{ $colorClass . '-50' }}">
                                            
                                            <div class="text-center">
                                                <div class="w-12 h-12 mx-auto mb-2 rounded-full flex items-center justify-center
                                                    {{ $isCurrent ? 'bg-' . $colorClass . '-200 text-' . $colorClass . '-600' : 'bg-gray-100 text-gray-400' }}">
                                                    <i class="fas {{ $planPricing->plan_key === 'basic' ? 'fa-seedling' : ($planPricing->plan_key === 'standard' ? 'fa-rocket' : 'fa-crown') }} text-lg"></i>
                                                </div>
                                                
                                                <h4 class="font-bold text-gray-800">{{ $planPricing->plan_name }}</h4>
                                                <p class="text-lg font-bold text-gray-800 mt-1">₹{{ number_format($planPricing->monthly_price) }}/mo</p>
                                                
                                                @if($planPricing->yearly_price)
                                                    <p class="text-xs text-green-600 mt-1">
                                                        ₹{{ number_format($planPricing->yearly_price) }}/yr
                                                    </p>
                                                @endif
                                                
                                                @if($isCurrent)
                                                    <span class="inline-block mt-2 px-2 py-0.5 bg-{{ $colorClass }}-200 text-{{ $colorClass }}-800 text-xs rounded-full font-medium">Current</span>
                                                @elseif($isUpgrade)
                                                    <span class="inline-block mt-2 px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded-full font-medium">Upgrade</span>
                                                @elseif($isDowngrade)
                                                    <span class="inline-block mt-2 px-2 py-0.5 bg-red-100 text-red-700 text-xs rounded-full font-medium">Downgrade</span>
                                                @endif
                                                
                                                @if($planPricing->ai_enabled)
                                                    <span class="inline-block mt-1 px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded-full">
                                                        <i class="fas fa-robot mr-1"></i>AI
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </label>
                                @endforeach
                            </div>
                            
                            <div id="upgradeCostBox" class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg hidden">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-sm text-yellow-800 font-medium">Upgrade Cost Calculation</p>
                                        <p class="text-xs text-yellow-600 mt-1">Remaining days: <span id="remainingDays">{{ $school->daysUntilExpiry() }}</span></p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-xs text-gray-600">Balance to pay:</p>
                                        <p class="text-xl font-bold text-green-700">₹<span id="upgradeAmount">0</span></p>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-2">* Calculated based on remaining days and price difference</p>
                            </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
                        
                        @error('plan')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-gray-200">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">School Status <span class="text-red-500">*</span></label>
                            <select name="status" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <option value="active" {{ old('status', $school->status) == 'active' ? 'selected' : '' }}>🟢 Active</option>
                                <option value="inactive" {{ old('status', $school->status) == 'inactive' ? 'selected' : '' }}>⚪ Inactive</option>
                                <option value="suspended" {{ old('status', $school->status) == 'suspended' ? 'selected' : '' }}>🔴 Suspended</option>
                            </select>
                            <p class="mt-1 text-xs text-gray-500">Use "Suspended" to temporarily disable access</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Manage Subscription</label>
                            <a href="{{ route('super_admin.schools.renew', $school) }}" 
                            class="w-full flex items-center justify-center px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                                <i class="fas fa-sync-alt mr-2"></i>Renew / Extend Subscription
                            </a>
                            <p class="mt-1 text-xs text-gray-500">To change end date, use Renew option</p>
                        </div>
                    </div>
                </div>
            </div> -->
            <!-- Quick Stats -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h4 class="font-semibold text-gray-800 mb-4">Current Stats</h4>
                <div class="space-y-3">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500">Total Users</span>
                        <span class="font-medium">{{ $school->users()->count() }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500">Active Modules</span>
                        <span class="font-medium">{{ $school->subscriptions()->where('status', 'active')->count() }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500">Created</span>
                        <span class="font-medium">{{ $school->created_at->format('M d, Y') }}</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Sidebar -->
        <div class="space-y-6">
            
           <!-- Combined School Info & Subscription Card -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <!-- Logo & Basic Info Section -->
                <div class="p-6 text-center border-b border-gray-100">
                    <div class="w-20 h-20 rounded-2xl flex items-center justify-center text-white text-3xl font-bold mx-auto mb-4 shadow-lg overflow-hidden {{ $school->logo ? '' : 'bg-gradient-to-br from-blue-500 to-blue-600' }}">
                        @if($school->logo && \Illuminate\Support\Facades\Storage::disk('public')->exists($school->logo))
                            <img src="{{ asset('storage/' . $school->logo) }}?t={{ time() }}" 
                                alt="{{ $school->name }} Logo" 
                                class="w-full h-full object-cover">
                        @else
                            {{ substr($school->name, 0, 1) }}
                        @endif
                    </div>
                    <h3 class="font-bold text-gray-800 text-lg">{{ $school->name }}</h3>
                    <p class="text-sm text-gray-500 mb-3">{{ $school->slug }}.schoolerp.com</p>
                    
                    <!-- Status Badge -->
                    <span class="px-3 py-1 rounded-full text-xs font-medium 
                        {{ $school->status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                        <i class="fas {{ $school->status === 'active' ? 'fa-check-circle' : 'fa-ban' }} mr-1"></i>
                        {{ ucfirst($school->status) }}
                    </span>
                </div>

                <!-- Subscription Details Section -->
                <div class="p-4 bg-gray-50">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="font-semibold text-gray-800 text-sm">
                            <i class="fas fa-crown text-purple-600 mr-1"></i>Subscription
                        </h4>
                        <button type="button" onclick="openHistory()" 
                                class="text-xs text-blue-600 hover:text-blue-800 font-medium">
                            <i class="fas fa-history mr-1"></i>History
                        </button>
                    </div>
                    
                    <div class="space-y-2 text-sm">
                        <!-- Plan Badge -->
                        <div class="flex justify-between items-center">
                            <span class="text-gray-500">Plan</span>
                            <span class="px-2 py-0.5 rounded-full text-xs font-medium
                                {{ $school->plan === 'basic' ? 'bg-gray-200 text-gray-700' : ($school->plan === 'standard' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700') }}">
                                {{ ucfirst($school->plan) }}
                            </span>
                        </div>
                        
                        <!-- Start Date -->
                        <div class="flex justify-between">
                            <span class="text-gray-500">Started</span>
                            <span class="font-medium">{{ $school->subscription_start->format('M d, Y') }}</span>
                        </div>
                        
                        <!-- Expiry Date -->
                        <div class="flex justify-between">
                            <span class="text-gray-500">Expires</span>
                            <span class="font-medium {{ $school->daysUntilExpiry() <= 30 ? 'text-red-600' : '' }}">
                                {{ $school->subscription_end->format('M d, Y') }}
                            </span>
                        </div>
                        
                        <!-- Days Left -->
                        <div class="flex justify-between">
                            <span class="text-gray-500">Days Left</span>
                            <span class="font-medium {{ $school->daysUntilExpiry() <= 30 ? 'text-red-600' : 'text-green-600' }}">
                                {{ max(0, $school->daysUntilExpiry()) }} days
                            </span>
                        </div>
                    </div>
                    
                    <!-- Expiry Warning -->
                    @if($school->daysUntilExpiry() <= 30)
                        <div class="mt-3 p-2 bg-red-50 border border-red-200 rounded-lg text-xs text-red-700 flex items-center">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            <span>Expiring soon! Renew now.</span>
                        </div>
                    @endif
                    
                    <!-- Progress Bar -->
                    @php
                        $totalDays = $school->subscription_start->diffInDays($school->subscription_end);
                        $usedDays = $school->subscription_start->diffInDays(now());
                        $progressPercent = $totalDays > 0 ? min(100, ($usedDays / $totalDays) * 100) : 0;
                    @endphp
                    <div class="mt-3">
                        <div class="flex justify-between text-xs text-gray-500 mb-1">
                            <span>Progress</span>
                            <span>{{ round($progressPercent) }}%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-gradient-to-r from-blue-500 to-purple-500 h-2 rounded-full transition-all" 
                                style="width: {{ $progressPercent }}%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="font-semibold text-gray-800 mb-4">Quick Actions</h3>
                <div class="space-y-3">
                    <a href="{{ route('super_admin.schools.edit', $school) }}" 
                    class="w-full flex items-center p-3 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('super_admin.schools.edit') ? 'bg-blue-50 border border-blue-200' : '' }}">
                        <i class="fas fa-edit text-blue-600 mr-3 w-5"></i>
                        <span class="text-sm font-medium">Edit School Info</span>
                    </a>
                     <!-- Manage Modules -->
                    <a href="{{ route('super_admin.schools.modules', $school) }}" 
                    class="w-full flex items-center p-3 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors {{ request()->routeIs('super_admin.schools.modules') ? 'bg-purple-50 border border-purple-200' : '' }}">
                        <i class="fas fa-cubes text-purple-600 mr-3 w-5"></i>
                        <span class="text-sm font-medium">Manage Modules</span>
                        <span class="ml-auto text-xs text-gray-400">
                            {{ $school->subscriptions()->where('status', 'active')->count() }} active
                        </span>
                    </a>
                    <a href="{{ route('super_admin.schools.renew', $school) }}" 
                    class="w-full flex items-center p-3 bg-green-50 hover:bg-green-100 rounded-lg transition-colors">
                        <i class="fas fa-sync-alt text-green-600 mr-3 w-5"></i>
                        <span class="text-sm font-medium text-green-700">Modify Subscription</span>
                    </a>
                   <button type="button" onclick="openResetPassword()" 
                            class="w-full flex items-center p-3 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors text-left">
                        <i class="fas fa-key text-orange-600 mr-3 w-5"></i>
                        <span class="text-sm font-medium">Reset Admin Password</span>
                    </button>
                    <button type="button" onclick="confirmSuspend()" 
                            class="w-full flex items-center p-3 {{ $school->status === 'active' ? 'bg-red-50 hover:bg-red-100' : 'bg-green-50 hover:bg-green-100' }} rounded-lg transition-colors text-left">
                        <i class="fas {{ $school->status === 'active' ? 'fa-pause-circle text-red-600' : 'fa-play-circle text-green-600' }} mr-3 w-5"></i>
                        <span class="text-sm font-medium {{ $school->status === 'active' ? 'text-red-700' : 'text-green-700' }}">
                            {{ $school->status === 'active' ? 'Suspend School' : 'Activate School' }}
                        </span>
                    </button>

                    
                    <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>
                        <button type="button" onclick="confirmDelete()" class="w-full px-4 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 School
                        </button>
                    </div>
                </div>
            </div>
                     
            
            
            
        </div>
    </div>
</form>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeDeleteModal()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                        <i class="fas fa-exclamation-triangle text-red-600"></i>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                        <h3 class="text-lg leading-6 font-medium text-gray-900">Delete School</h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-500">
                                Are you sure you want to delete <strong>{{ $school->name }}</strong>? This action cannot be undone and all data will be permanently removed.
                            </p>
                            <div class="mt-3 p-3 bg-red-50 rounded-lg">
                                <p class="text-xs text-red-700">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    This will delete: {{ $school->users()->count() }} users, all students, teachers, records, and history.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <form action="{{ route('super_admin.schools.destroy', $school) }}" method="POST" class="inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
                        Delete Permanently
                    </button>
                </form>
                <button type="button" onclick="closeDeleteModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Subscription History Modal --}}
<div id="historyModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-gray-900 bg-opacity-60" onclick="closeHistory()"></div>
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-2xl z-10 max-h-[85vh] flex flex-col">

            {{-- Header --}}
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-t-2xl px-6 py-5 flex-shrink-0">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-history text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-white">Subscription History</h3>
                            <p class="text-blue-100 text-xs">{{ $school->name }}</p>
                        </div>
                    </div>
                    <button onclick="closeHistory()" class="text-white hover:text-blue-200">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>

            {{-- Summary Bar --}}
            <div class="bg-blue-50 px-6 py-3 flex items-center gap-6 text-sm flex-shrink-0 border-b border-blue-100">
                <div>
                    <span class="text-gray-500">Total Records:</span>
                    <span class="font-bold text-blue-700 ml-1">{{ $subscriptionHistories->count() }}</span>
                </div>
                <div>
                    <span class="text-gray-500">Current Plan:</span>
                    <span class="font-bold text-blue-700 ml-1">{{ ucfirst($school->plan) }}</span>
                </div>
                <div>
                    <span class="text-gray-500">Total Paid:</span>
                    <span class="font-bold text-green-700 ml-1">
                        ₹{{ number_format($subscriptionHistories->sum('amount')) }}
                    </span>
                </div>
            </div>

            {{-- Timeline --}}
            <div class="overflow-y-auto flex-1 p-6">
                @forelse($subscriptionHistories as $index => $history)
                    <div class="relative flex gap-4 {{ !$loop->last ? 'pb-6' : '' }}">

                        {{-- Timeline line --}}
                        @if(!$loop->last)
                            <div class="absolute left-5 top-10 bottom-0 w-0.5 bg-gray-200"></div>
                        @endif

                        {{-- Icon --}}
                        <div class="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center z-10
                            {{ $history->action === 'created'  ? 'bg-green-100'  :
                               ($history->action === 'renewed'  ? 'bg-blue-100'   :
                               ($history->action === 'upgraded' ? 'bg-purple-100' : 'bg-orange-100')) }}">
                            <i class="fas
                                {{ $history->action === 'created'  ? 'fa-plus text-green-600'      :
                                   ($history->action === 'renewed'  ? 'fa-sync-alt text-blue-600'   :
                                   ($history->action === 'upgraded' ? 'fa-arrow-up text-purple-600' : 'fa-edit text-orange-600')) }}
                                text-sm"></i>
                        </div>

                        {{-- Content --}}
                        <div class="flex-1 bg-gray-50 rounded-xl p-4">
                            <div class="flex items-start justify-between mb-2">
                                <div>
                                    <div class="flex items-center gap-2">
                                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold
                                            {{ $history->action_badge['class'] }}">
                                            {{ $history->action_badge['label'] }}
                                        </span>
                                        <span class="px-2 py-0.5 rounded-full text-xs font-medium
                                            {{ $history->plan === 'basic' ? 'bg-gray-100 text-gray-700' :
                                               ($history->plan === 'standard' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700') }}">
                                            {{ ucfirst($history->plan) }}
                                        </span>
                                        @if($index === 0)
                                            <span class="px-2 py-0.5 bg-green-500 text-white rounded-full text-xs font-semibold">
                                                Current
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <span class="text-xs text-gray-400">
                                    {{ $history->created_at->format('M d, Y h:i A') }}
                                </span>
                            </div>

                            <div class="grid grid-cols-2 gap-3 text-sm mt-3">
                                <div class="bg-white rounded-lg p-2 border border-gray-100">
                                    <p class="text-xs text-gray-400 uppercase">Start Date</p>
                                    <p class="font-semibold text-gray-800">{{ $history->start_date->format('M d, Y') }}</p>
                                </div>
                                <div class="bg-white rounded-lg p-2 border border-gray-100">
                                    <p class="text-xs text-gray-400 uppercase">End Date</p>
                                    <p class="font-semibold text-gray-800">{{ $history->end_date->format('M d, Y') }}</p>
                                </div>
                                @if($history->duration_months)
                                <div class="bg-white rounded-lg p-2 border border-gray-100">
                                    <p class="text-xs text-gray-400 uppercase">Duration</p>
                                    <p class="font-semibold text-gray-800">{{ $history->duration_months }} Month(s)</p>
                                </div>
                                @endif
                                @if($history->amount)
                                <div class="bg-white rounded-lg p-2 border border-gray-100">
                                    <p class="text-xs text-gray-400 uppercase">Amount</p>
                                    <p class="font-semibold text-green-700">₹{{ number_format($history->amount) }}</p>
                                </div>
                                @endif
                            </div>

                            @if($history->notes)
                                <p class="mt-2 text-xs text-gray-500 italic">
                                    <i class="fas fa-sticky-note mr-1"></i>{{ $history->notes }}
                                </p>
                            @endif

                            @if($history->createdBy)
                                <p class="mt-1 text-xs text-gray-400">
                                    <i class="fas fa-user mr-1"></i>By {{ $history->createdBy->name }}
                                </p>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="text-center py-12 text-gray-400">
                        <i class="fas fa-history text-4xl mb-3"></i>
                        <p>No subscription history yet</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

{{-- Reset Password Modal --}}
<div id="resetPasswordModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75" onclick="closeResetPassword()"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-md z-10">
            
            {{-- Header --}}
            <div class="bg-gradient-to-r from-orange-500 to-orange-600 rounded-t-2xl px-6 py-5">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-key text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-white">Reset Admin Password</h3>
                            <p class="text-orange-100 text-xs">{{ $school->name }}</p>
                        </div>
                    </div>
                    <button onclick="closeResetPassword()" class="text-white hover:text-orange-200">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>

            {{-- Form --}}
            <form id="resetPasswordForm" method="POST" 
                  action="{{ route('super_admin.schools.reset-password', $school) }}"
                  onsubmit="submitResetPassword(event)">
                @csrf
                <div class="p-6 space-y-4">

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            New Password <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <input type="password" id="new_password" name="new_password"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                                   placeholder="Minimum 8 characters" minlength="8" required>
                            <button type="button" onclick="togglePass('new_password')"
                                    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 id="new_password_error" class="mt-1 text-xs text-red-500 hidden"></p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Confirm Password <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <input type="password" id="confirm_password" name="confirm_password"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                                   placeholder="Re-enter password" required>
                            <button type="button" onclick="togglePass('confirm_password')"
                                    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 id="confirm_password_error" class="mt-1 text-xs text-red-500 hidden"></p>
                    </div>

                    {{-- Success message --}}
                    <div id="resetSuccess" class="hidden p-3 bg-green-50 border border-green-200 rounded-lg">
                        <p class="text-sm text-green-700">
                            <i class="fas fa-check-circle mr-2"></i>
                            Password reset successfully!
                        </p>
                    </div>

                    <div class="flex gap-3 pt-2">
                        <button type="button" onclick="closeResetPassword()"
                                class="flex-1 py-2.5 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 font-medium text-sm">
                            Cancel
                        </button>
                        <button type="submit" id="resetBtn"
                                class="flex-1 py-2.5 bg-orange-600 text-white rounded-xl hover:bg-orange-700 font-medium text-sm transition-colors">
                            <i class="fas fa-key mr-2"></i>Reset Password
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Suspend/Activate Modal --}}
<div id="suspendModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeSuspendModal()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full {{ $school->status === 'active' ? 'bg-red-100' : 'bg-green-100' }} sm:mx-0 sm:h-10 sm:w-10">
                        <i class="fas {{ $school->status === 'active' ? 'fa-pause text-red-600' : 'fa-play text-green-600' }}"></i>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                        <h3 class="text-lg leading-6 font-medium text-gray-900">
                            {{ $school->status === 'active' ? 'Suspend School' : 'Activate School' }}
                        </h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-500">
                                Are you sure you want to {{ $school->status === 'active' ? 'suspend' : 'activate' }} <strong>{{ $school->name }}</strong>?
                                {{ $school->status === 'active' ? 'All users will lose access immediately.' : 'Users will regain access to the system.' }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <form action="{{ route('super_admin.schools.update', $school) }}" method="POST" class="inline">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="slug"             value="{{ $school->slug }}">
                    <input type="hidden" name="status"           value="{{ $school->status === 'active' ? 'suspended' : 'active' }}">
                    <input type="hidden" name="name"             value="{{ $school->name }}">
                    <input type="hidden" name="email"            value="{{ $school->email }}">
                    <input type="hidden" name="phone"            value="{{ $school->phone }}">
                    <input type="hidden" name="address"          value="{{ $school->address }}">
                    <input type="hidden" name="plan"             value="{{ $school->plan }}">
                    <input type="hidden" name="subscription_end" value="{{ $school->subscription_end->format('Y-m-d') }}">
                    <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 {{ $school->status === 'active' ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700' }} text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm">
                        {{ $school->status === 'active' ? 'Suspend' : 'Activate' }}
                    </button>
                </form>
                <button type="button" onclick="closeSuspendModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // ==================== PLAN PRICING (Existing) ====================
    const planPrices = {
        @foreach($planPricings as $plan)
            '{{ $plan->plan_key }}': {{ $plan->monthly_price }},
        @endforeach
    };
    
    const currentPlan = '{{ $school->plan }}';
    const currentPrice = planPrices[currentPlan] || 0;
    const remainingDays = {{ $school->daysUntilExpiry() }};

    document.querySelectorAll('input[name="plan"]').forEach(radio => {
        radio.addEventListener('change', function() {
            calculateUpgradeCost(this.value);
        });
    });

    function calculateUpgradeCost(selectedPlan) {
        const costBox = document.getElementById('upgradeCostBox');
        const amountSpan = document.getElementById('upgradeAmount');
        
        if (selectedPlan === currentPlan) {
            costBox.classList.add('hidden');
            return;
        }
        
        const newPrice = planPrices[selectedPlan] || 0;
        const priceDiff = newPrice - currentPrice;
        
        if (priceDiff <= 0) {
            costBox.classList.add('hidden');
            return;
        }
        
        const dailyRate = priceDiff / 30;
        const totalAmount = Math.ceil(dailyRate * remainingDays);
        
        amountSpan.textContent = totalAmount.toLocaleString('en-IN');
        costBox.classList.remove('hidden');
    }

    document.addEventListener('DOMContentLoaded', function() {
        const selectedPlan = document.querySelector('input[name="plan"]:checked');
        if (selectedPlan) {
            calculateUpgradeCost(selectedPlan.value);
        }
    });

    // ==================== UTILITY FUNCTIONS (Existing) ====================
    function generateSlug() {
        const name = document.getElementById('schoolName').value;
        const slug = name.toLowerCase()
                        .replace(/[^a-z0-9]+/g, '-')
                        .replace(/^-+|-+$/g, '');
        document.getElementById('schoolSlug').value = slug;
    }
    
    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);
        }
    }

    function previewLogo(input) {
        const preview = document.getElementById('logoPreview');
        const error = document.getElementById('logoError');
        
        if (input.files && input.files[0]) {
            if (input.files[0].size > 10 * 1024 * 1024) {
                error.textContent = 'File too large! Maximum 10MB allowed.';
                error.classList.remove('hidden');
                input.value = '';
                return;
            }
            
            const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
            if (!allowedTypes.includes(input.files[0].type)) {
                error.textContent = 'Invalid file type! Only JPG, PNG, GIF, WEBP allowed.';
                error.classList.remove('hidden');
                input.value = '';
                return;
            }
            
            error.classList.add('hidden');
            
            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]);
        }
    }

    // ==================== DELETE MODAL (Existing) ====================
    function confirmDelete() {
        document.getElementById('deleteModal').classList.remove('hidden');
    }
    
    function closeDeleteModal() {
        document.getElementById('deleteModal').classList.add('hidden');
    }

    // ==================== HISTORY MODAL (Existing) ====================
    function openHistory() {
        document.getElementById('historyModal').classList.remove('hidden');
    }

    function closeHistory() {
        document.getElementById('historyModal').classList.add('hidden');
    }

    // ==================== RESET PASSWORD MODAL (MISSING - ADD THIS) ====================
    function openResetPassword() {
        document.getElementById('resetPasswordModal').classList.remove('hidden');
        document.getElementById('new_password').value = '';
        document.getElementById('confirm_password').value = '';
        document.getElementById('resetSuccess').classList.add('hidden');
        document.getElementById('new_password_error').classList.add('hidden');
        document.getElementById('confirm_password_error').classList.add('hidden');
    }
    
    function closeResetPassword() {
        document.getElementById('resetPasswordModal').classList.add('hidden');
    }
    
    function togglePass(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');
        }
    }

    async function submitResetPassword(e) {
        e.preventDefault();

        const newPass = document.getElementById('new_password').value;
        const confirmPass = document.getElementById('confirm_password').value;
        const errNew = document.getElementById('new_password_error');
        const errConfirm = document.getElementById('confirm_password_error');
        const btn = document.getElementById('resetBtn');

        // Reset errors
        errNew.classList.add('hidden');
        errConfirm.classList.add('hidden');

        // Validate
        if (newPass.length < 8) {
            errNew.textContent = 'Password must be at least 8 characters';
            errNew.classList.remove('hidden');
            return;
        }
        if (newPass !== confirmPass) {
            errConfirm.textContent = 'Passwords do not match';
            errConfirm.classList.remove('hidden');
            return;
        }

        // Submit
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Resetting...';

        try {
            const response = await fetch('{{ route('super_admin.schools.reset-password', $school) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ new_password: newPass })
            });

            const data = await response.json();

            if (data.success) {
                document.getElementById('resetSuccess').classList.remove('hidden');
                document.getElementById('new_password').value = '';
                document.getElementById('confirm_password').value = '';
                setTimeout(() => closeResetPassword(), 2000);
            } else {
                errNew.textContent = data.message || 'Failed to reset password';
                errNew.classList.remove('hidden');
            }
        } catch(err) {
            console.error(err);
            errNew.textContent = 'Network error. Please try again.';
            errNew.classList.remove('hidden');
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-key mr-2"></i>Reset Password';
        }
    }

    // ==================== SUSPEND/ACTIVATE MODAL (MISSING - ADD THIS) ====================
    function confirmSuspend() {
        document.getElementById('suspendModal').classList.remove('hidden');
    }
    
    function closeSuspendModal() {
        document.getElementById('suspendModal').classList.add('hidden');
    }

    // ==================== GLOBAL ESCAPE KEY (Enhanced) ====================
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeDeleteModal();
            closeResetPassword();
            closeSuspendModal();
            closeHistory();
        }
    });
</script>
@endpush