@extends('super_admin.layouts.master')

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

@section('content')

<!-- Header Actions -->
<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.index') }}" class="mr-4 p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div>
            <h2 class="text-2xl font-bold text-gray-800">{{ $school->name }}</h2>
            <p class="text-sm text-gray-500">{{ $school->slug }}.schoolerp.com</p>
        </div>
    </div>
    
    <!--<div class="flex flex-wrap items-center gap-3">
        <a href="{{ route('super_admin.schools.modules', $school) }}" class="inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
            <i class="fas fa-cubes mr-2"></i>
            <span class="hidden sm:inline">Manage Modules</span>
            <span class="sm:hidden">Modules</span>
        </a>
        <a href="{{ route('super_admin.schools.edit', $school) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
            <i class="fas fa-edit mr-2"></i>
            <span class="hidden sm:inline">Edit School</span>
            <span class="sm:hidden">Edit</span>
        </a>
    </div>-->
</div>

<!-- School Info Card -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
    <div class="p-6">
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- Logo/Icon -->
            <div class="flex-shrink-0">
                @if($school->logo && \Illuminate\Support\Facades\Storage::disk('public')->exists($school->logo))
                    <div class="w-24 h-24 lg:w-32 lg:h-32 rounded-2xl overflow-hidden shadow-lg bg-white flex items-center justify-center">
                        <img src="{{ asset('storage/' . $school->logo) }}?t={{ time() }}" 
                            alt="{{ $school->name }} Logo" 
                            class="w-full h-full object-cover">
                    </div>
                @else
                    <div class="w-24 h-24 lg:w-32 lg:h-32 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center text-white text-4xl lg:text-5xl font-bold shadow-lg">
                        {{ substr($school->name, 0, 1) }}
                    </div>
                @endif
            </div>
            
            <!-- Info Grid -->
            <div class="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wide">Email</p>
                    <p class="font-medium text-gray-800 flex items-center">
                        <i class="fas fa-envelope text-gray-400 mr-2 w-4"></i>
                        {{ $school->email }}
                    </p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wide">Phone</p>
                    <p class="font-medium text-gray-800 flex items-center">
                        <i class="fas fa-phone text-gray-400 mr-2 w-4"></i>
                        {{ $school->phone }}
                    </p>
                </div>
                <div class="md:col-span-2">
                    <p class="text-xs text-gray-500 uppercase tracking-wide">Address</p>
                    <p class="font-medium text-gray-800 flex items-start">
                        <i class="fas fa-map-marker-alt text-gray-400 mr-2 w-4 mt-1"></i>
                        {{ $school->address }}
                    </p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wide">Plan</p>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium 
                        {{ $school->plan === 'basic' ? 'bg-gray-100 text-gray-700' : ($school->plan === 'standard' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700') }}">
                        <i class="fas {{ $school->plan === 'premium' ? 'fa-crown text-yellow-500' : ($school->plan === 'standard' ? 'fa-rocket' : 'fa-seedling') }} mr-1"></i>
                        {{ ucfirst($school->plan) }}
                    </span>
                </div>
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wide">Status</p>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium 
                        {{ $school->status === 'active' ? 'bg-green-100 text-green-700' : ($school->status === 'suspended' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700') }}">
                        <span class="w-2 h-2 rounded-full mr-2 {{ $school->status === 'active' ? 'bg-green-500' : ($school->status === 'suspended' ? 'bg-red-500' : 'bg-gray-500') }}"></span>
                        {{ ucfirst($school->status) }}
                    </span>
                </div>
            </div>
            
            <!-- Subscription Info -->
            <div class="flex-shrink-0 lg:w-64 bg-gray-50 rounded-xl p-4">
                <div class="flex items-center justify-between mb-3">
                    <h4 class="font-semibold text-gray-800">Subscription</h4>
                    <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">
                    <div class="flex justify-between">
                        <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-100 text-gray-700' : ($school->plan === 'standard' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700') }}">
                            {{ ucfirst($school->plan) }}
                        </span>
                    </div>
                    <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>
                    <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>
                    <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>
                @if($school->daysUntilExpiry() <= 30)
                    <div class="mt-3 p-2 bg-red-50 border border-red-200 rounded-lg text-xs text-red-700">
                        <i class="fas fa-exclamation-triangle mr-1"></i>
                        Expiring soon!
                    </div>
                @endif
                <!--<a href="{{ route('super_admin.schools.renew', $school) }}"
                class="mt-3 w-full flex items-center justify-center py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-xs font-medium transition-colors">
                    <i class="fas fa-sync-alt mr-1"></i>Renew Now
                </a>-->
            </div>
        </div>
    </div>
</div>

<!-- Statistics Cards -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-xl shadow-sm p-4 border-l-4 border-blue-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase">Total Users</p>
                <p class="text-2xl font-bold text-gray-800">{{ $stats['total_users'] }}</p>
            </div>
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-users text-blue-600"></i>
            </div>
        </div>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm p-4 border-l-4 border-green-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase">Students</p>
                <p class="text-2xl font-bold text-gray-800">{{ $stats['students'] }}</p>
            </div>
            <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-user-graduate text-green-600"></i>
            </div>
        </div>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm p-4 border-l-4 border-orange-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase">Teachers</p>
                <p class="text-2xl font-bold text-gray-800">{{ $stats['teachers'] }}</p>
            </div>
            <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-chalkboard-teacher text-orange-600"></i>
            </div>
        </div>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm p-4 border-l-4 border-purple-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase">Active Modules</p>
                <p class="text-2xl font-bold text-gray-800">{{ $stats['active_modules'] }}</p>
            </div>
            <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-cubes text-purple-600"></i>
            </div>
        </div>
    </div>
</div>

<!-- Two Column Layout -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    
    <!-- Left: Active Modules -->
    <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-800">
                    <i class="fas fa-cubes text-purple-600 mr-2"></i>Active Modules & Features
                </h3>
                <a href="{{ route('super_admin.schools.modules', $school) }}" class="text-sm text-blue-600 hover:text-blue-700">
                    Manage <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            
            <div class="divide-y divide-gray-200">
                @forelse($school->subscriptionsWithFeatures as $subscription)
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-3 cursor-pointer" onclick="toggleFeatures({{ $subscription->module->id }})">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                                    <i class="fas {{ $subscription->module->icon }} text-blue-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-800 flex items-center">
                                        {{ $subscription->module->name }}
                                        <i id="toggle_icon_{{ $subscription->module->id }}" class="fas fa-chevron-down ml-2 text-gray-500 text-xs"></i>
                                    </h4>
                                    <p class="text-xs text-gray-500">{{ ucfirst($subscription->module->category) }}</p>
                                </div>
                            </div>
                            <span class="px-3 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">
                                {{ count($subscription->enabled_features ?? []) }} features
                            </span>
                        </div>
                        
                        <!-- Features List -->
                        <div id="features_{{ $subscription->module->id }}" class="ml-13 pl-13 grid grid-cols-1 md:grid-cols-2 gap-2 hidden">
                            @foreach($subscription->enabledFeaturesList() as $feature)
                                <div class="flex items-center text-sm {{ $feature->type == 'ai' ? 'text-purple-700 bg-purple-50' : 'text-gray-600' }} p-2 rounded-lg">
                                    @if($feature->type == 'ai')
                                        <i class="fas fa-robot text-purple-500 mr-2 w-4"></i>
                                    @else
                                        <i class="fas fa-check text-green-500 mr-2 w-4"></i>
                                    @endif
                                    <span class="truncate">{{ $feature->name }}</span>
                                    @if($feature->type == 'ai')
                                        <span class="ml-auto text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full">AI</span>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                @empty
                    <div class="p-8 text-center text-gray-500">
                        <i class="fas fa-cubes text-4xl mb-3"></i>
                        <p>No modules assigned</p>
                        <a href="{{ route('super_admin.schools.modules', $school) }}" class="text-blue-600 hover:underline text-sm mt-2 inline-block">
                            Assign modules now
                        </a>
                    </div>
                @endforelse
            </div>
        </div>
        
        <!-- Recent Users -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden mt-6">
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-800">
                    <i class="fas fa-users text-blue-600 mr-2"></i>Recent Users
                </h3>
                <span class="text-sm text-gray-500">Last 5 added</span>
            </div>
            
            <div class="divide-y divide-gray-200">
                @forelse($recent_users as $user)
                    <div class="p-4 flex items-center">
                        <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 font-bold mr-3">
                            {{ substr($user->name, 0, 1) }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-medium text-gray-800 truncate">{{ $user->name }}</p>
                            <p class="text-sm text-gray-500 truncate">{{ $user->email }}</p>
                        </div>
                        <div class="text-right">
                            <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
                                {{ ucfirst(str_replace('_', ' ', $user->user_type)) }}
                            </span>
                            <p class="text-xs text-gray-400 mt-1">{{ $user->created_at->diffForHumans() }}</p>
                        </div>
                    </div>
                @empty
                    <div class="p-8 text-center text-gray-500">
                        <p>No users yet</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
    
        <!-- Right: Quick Actions & Info -->
        <div class="space-y-6">
             <!-- 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>
        
              
        <!-- System Info -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-semibold text-gray-800 mb-4">System Info</h3>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-500">School ID</span>
                    <span class="font-mono">{{ $school->id }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Created</span>
                    <span>{{ $school->created_at->format('M d, Y') }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Last Updated</span>
                    <span>{{ $school->updated_at->diffForHumans() }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Database</span>
                    <span class="text-green-600"><i class="fas fa-check-circle mr-1"></i>Connected</span>
                </div>
            </div>
        </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>

{{-- 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>

{{-- 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>

{{-- Renewal Success Alert --}}
@if(session('renewal_success'))
@php $r = session('renewal_success'); @endphp
<div id="renewalAlert" class="fixed bottom-6 right-6 z-50 w-80 bg-white rounded-2xl shadow-2xl border border-green-200 overflow-hidden">
    <div class="bg-gradient-to-r from-green-500 to-green-600 px-4 py-3 flex items-center justify-between">
        <div class="flex items-center">
            <i class="fas fa-check-circle text-white text-lg mr-2"></i>
            <span class="text-white font-semibold text-sm">
                {{ $r['action'] === 'upgraded' ? 'Plan Upgraded!' : 'Renewed Successfully!' }}
            </span>
        </div>
        <button onclick="document.getElementById('renewalAlert').remove()" class="text-white hover:text-green-200">
            <i class="fas fa-times"></i>
        </button>
    </div>
    <div class="p-4 space-y-1 text-sm">
        <div class="flex justify-between">
            <span class="text-gray-500">School</span>
            <span class="font-medium">{{ $r['name'] }}</span>
        </div>
        <div class="flex justify-between">
            <span class="text-gray-500">Plan</span>
            <span class="font-medium text-purple-700">{{ $r['plan'] }}</span>
        </div>
        <div class="flex justify-between">
            <span class="text-gray-500">Extended by</span>
            <span class="font-medium">{{ $r['months'] }} month(s)</span>
        </div>
        <div class="flex justify-between">
            <span class="text-gray-500">New Expiry</span>
            <span class="font-medium text-green-700">{{ $r['end_date'] }}</span>
        </div>
    </div>
</div>
<script>
    setTimeout(() => {
        const el = document.getElementById('renewalAlert');
        if (el) el.remove();
    }, 6000);
</script>
@endif

{{-- 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>
@endsection

@push('scripts')
<script>
    // Suspend Modal
    function confirmSuspend() {
        document.getElementById('suspendModal').classList.remove('hidden');
    }
    function closeSuspendModal() {
        document.getElementById('suspendModal').classList.add('hidden');
    }

    // Reset Password Modal
    function openResetPassword() {
        document.getElementById('resetPasswordModal').classList.remove('hidden');
        document.getElementById('new_password').value = '';
        document.getElementById('confirm_password').value = '';
        document.getElementById('resetSuccess').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.replace('fa-eye', 'fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.replace('fa-eye-slash', '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');

        // 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
        const btn = document.getElementById('resetBtn');
        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);
            }
        } catch(err) {
            console.error(err);
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-key mr-2"></i>Reset Password';
        }
    }
    
    // History Modal
    function openHistory() {
        document.getElementById('historyModal').classList.remove('hidden');
    }
    function closeHistory() {
        document.getElementById('historyModal').classList.add('hidden');
    }

    // Delete Modal Functions
    function confirmDelete() {
        document.getElementById('deleteModal').classList.remove('hidden');
    }
    function closeDeleteModal() {
        document.getElementById('deleteModal').classList.add('hidden');
    }

    // ==================== ADD THIS AT THE END ====================
    // Close modals on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeDeleteModal();
            closeResetPassword();
            closeSuspendModal();
            closeHistory();
        }
    });
    
    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