@extends('super_admin.layouts.master')

@section('title', 'Schools')
@section('page_title', 'Manage Schools')

@section('content')

<!-- Stats Row -->
<div class="grid grid-cols-1 sm: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 Schools</p>
                <p class="text-2xl font-bold text-gray-800">{{ $schools->total() }}</p>
            </div>
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-school 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">Active</p>
                <p class="text-2xl font-bold text-gray-800">{{ $schools->where('status', 'active')->count() }}</p>
            </div>
            <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-check-circle text-green-600"></i>
            </div>
        </div>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm p-4 border-l-4 border-yellow-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase">Expiring Soon</p>
                <p class="text-2xl font-bold text-gray-800">{{ \App\Models\School::expiringSoon(7)->count() }}</p>
            </div>
            <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-exclamation-triangle text-yellow-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">This Month</p>
                <p class="text-2xl font-bold text-gray-800">{{ \App\Models\School::whereMonth('created_at', now()->month)->count() }}</p>
            </div>
            <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-calendar-plus text-purple-600"></i>
            </div>
        </div>
    </div>
</div>

<!-- Actions Bar -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-6">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        
        <!-- Search -->
        <div class="relative flex-1 max-w-md">
            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
                <i class="fas fa-search"></i>
            </span>
            <input type="text" 
                   id="searchInput"
                   placeholder="Search schools by name, email, or slug..." 
                   class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
        </div>
        
        <!-- Filters -->
        <div class="flex flex-wrap items-center gap-3">
            <select id="statusFilter" class="px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
                <option value="">All Status</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
                <option value="suspended">Suspended</option>
            </select>
            
            <select id="planFilter" class="px-6 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
                <option value="">All Plans</option>
                <option value="basic">Basic</option>
                <option value="standard">Standard</option>
                <option value="premium">Premium</option>
            </select>
            
            <a href="{{ route('super_admin.schools.create') }}" 
               class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">
                <i class="fas fa-plus mr-2"></i>
                <span class="hidden sm:inline">New School</span>
                <span class="sm:hidden">Add</span>
            </a>
        </div>
    </div>
</div>

<!-- Filter Tabs -->
<div class="bg-white rounded-t-xl border-b border-gray-200 px-6 py-4 mb-0">
    <div class="flex flex-wrap items-center gap-4">
        <a href="{{ route('super_admin.schools.index') }}" class="px-4 py-2 rounded-lg text-sm font-medium {{ !request('filter') ? 'bg-blue-100 text-blue-700' : 'text-gray-600 hover:bg-gray-100' }}">
            <i class="fas fa-list mr-2"></i>All Schools
        </a>
        <a href="{{ route('super_admin.schools.index', ['filter' => 'active']) }}" class="px-4 py-2 rounded-lg text-sm font-medium {{ request('filter') == 'active' ? 'bg-green-100 text-green-700' : 'text-gray-600 hover:bg-gray-100' }}">
            <i class="fas fa-check-circle mr-2"></i>Active
        </a>
        <a href="{{ route('super_admin.schools.index', ['filter' => 'deleted']) }}" class="px-4 py-2 rounded-lg text-sm font-medium {{ request('filter') == 'deleted' ? 'bg-red-100 text-red-700' : 'text-gray-600 hover:bg-gray-100' }}">
            <i class="fas fa-trash mr-2"></i>Trash ({{ \App\Models\School::onlyTrashed()->count() }})
        </a>
    </div>
</div>

<!-- Schools Table/Cards -->
<div class="bg-white rounded-b-xl shadow-sm overflow-hidden">

<!-- Schools Table/Cards -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
    
    <!-- Desktop Table -->
    <div class="hidden md:block overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">School</th>
                    <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Plan</th>
                    <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Users</th>
                    <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Expiry</th>
                    <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200" id="schoolsTableBody">
                @forelse($schools as $school)
                <tr class="hover:bg-gray-50 transition-colors school-row {{ $school->deleted_at ? 'bg-red-50' : '' }}" 
                    data-name="{{ strtolower($school->name) }}" 
                    data-status="{{ $school->status }}"
                    data-plan="{{ $school->plan }}"
                    data-deleted="{{ $school->deleted_at ? 'true' : 'false' }}">
                    
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="w-10 h-10 {{ $school->deleted_at ? 'bg-gray-400' : 'bg-gradient-to-br from-blue-500 to-blue-600' }} rounded-lg flex items-center justify-center text-white font-bold text-lg mr-3 shadow-sm {{ $school->deleted_at ? 'line-through' : '' }}">
                                @if($school->logo && !$school->deleted_at)
                                    <img src="{{ asset('storage/' . $school->logo) }}" class="w-full h-full object-cover rounded-lg">
                                @else
                                    {{ substr($school->name, 0, 1) }}
                                @endif
                            </div>
                            <div>
                                <p class="font-medium {{ $school->deleted_at ? 'text-gray-500 line-through' : 'text-blue-600 hover:text-blue-800 cursor-pointer underline-offset-2' }}">
                                    <a href="javascript:void(0)" 
                                    onclick="showCredentials('{{ $school->name }}', '{{ $school->users->first()->email ?? 'Not Assigned' }}', '{{ url('/school/' . $school->slug . '/login') }}', '{{ $school->id }}')" 
                                    class="{{ $school->deleted_at ? 'pointer-events-none' : 'hover:underline' }}">
                                    {{ $school->name }}
                                    </a>
                                    @if($school->deleted_at)
                                        <span class="ml-2 px-2 py-0.5 bg-red-100 text-red-700 text-xs rounded-full">DELETED</span>
                                    @endif
                                </p>

                                <p class="text-sm {{ $school->deleted_at ? 'text-gray-400 line-through' : 'text-gray-500' }}">
                                    {{ $school->slug }}.schoolerp.com
                                </p>
                            </div>
                        </div>
                    </td>
                    
                    <td class="px-6 py-4">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium 
                            {{ $school->deleted_at ? 'bg-gray-100 text-gray-500' : ($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>
                    </td>
                    
                    <td class="px-6 py-4">
                        @if($school->deleted_at)
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-700">
                                <span class="w-1.5 h-1.5 rounded-full mr-1.5 bg-red-500"></span>
                                Deleted
                            </span>
                        @else
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs 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-1.5 h-1.5 rounded-full mr-1.5 
                                    {{ $school->status === 'active' ? 'bg-green-500' : ($school->status === 'suspended' ? 'bg-red-500' : 'bg-gray-500') }}"></span>
                                {{ ucfirst($school->status) }}
                            </span>
                        @endif
                    </td>
                    
                    <td class="px-6 py-4">
                        <div class="flex items-center text-sm {{ $school->deleted_at ? 'text-gray-400' : 'text-gray-600' }}">
                            <i class="fas fa-users mr-2 {{ $school->deleted_at ? 'text-gray-300' : 'text-gray-400' }}"></i>
                            {{ $school->users_count ?? 0 }}
                        </div>
                    </td>
                    
                    <td class="px-6 py-4">
                        <div class="text-sm">
                            @if($school->deleted_at)
                                <p class="text-red-600 font-medium">Deleted {{ $school->deleted_at->diffForHumans() }}</p>
                            @else
                                <p class="{{ $school->daysUntilExpiry() <= 7 ? 'text-red-600 font-medium' : 'text-gray-600' }}">
                                    {{ $school->subscription_end->format('M d, Y') }}
                                </p>
                            @endif
                        </div>
                    </td>
                    
                    <td class="px-6 py-4 text-right">
                        <div class="flex items-center justify-end space-x-2">
                            @if($school->deleted_at)
                                <!-- Restore Button -->
                                <button onclick="confirmRestore('{{ $school->name }}', '{{ route('super_admin.schools.restore', $school->id) }}')"
                                        class="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors" title="Restore">
                                    <i class="fas fa-undo"></i>
                                </button>
                                
                                <!-- Permanent Delete 
                                <button onclick="confirmForceDelete('{{ $school->name }}', '{{ route('super_admin.schools.force-delete', $school->id) }}')" 
                                        class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="Delete Permanently">
                                    <i class="fas fa-trash-alt"></i>
                                </button>-->
                            @else
                                <!-- Normal Actions -->
                                <a href="{{ route('super_admin.schools.show', $school) }}" 
                                class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="View">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('super_admin.schools.edit', $school) }}" class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a href="{{ route('super_admin.schools.renew', $school) }}" class="p-2 text-green-600 hover:bg-green-50 rounded-lg" title="Renew Plan">
                                    <i class="fas fa-sync-alt"></i>
                                </a>
                                <button onclick="confirmDelete('{{ $school->name }}', '{{ route('super_admin.schools.destroy', $school) }}')" class="p-2 text-red-600 hover:bg-red-50 rounded-lg">
                                    <i class="fas fa-trash"></i>
                                </button>

                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center">
                            <div class="flex flex-col items-center justify-center text-gray-500">
                                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
                                    <i class="fas fa-school text-2xl text-gray-400"></i>
                                </div>
                                <p class="text-lg font-medium mb-2">No schools found</p>
                                <p class="text-sm mb-4">Get started by creating your first school</p>
                                <a href="{{ route('super_admin.schools.create') }}" 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-plus mr-2"></i> Create School
                                </a>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    <!-- Mobile Cards -->
    <div class="md:hidden divide-y divide-gray-200" id="schoolsMobileList">
        @forelse($schools as $school)
            <div class="p-4 school-card" 
                 data-name="{{ strtolower($school->name) }}" 
                 data-status="{{ $school->status }}"
                 data-plan="{{ $school->plan }}">
                
                <!-- Header -->
                <div class="flex items-start justify-between mb-3">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-xl mr-3 shadow-sm">
                            {{ substr($school->name, 0, 1) }}
                        </div>
                        <div>
                            <h3 class="font-semibold text-blue-600 hover:text-blue-800 cursor-pointer">
                                <a href="javascript:void(0)" 
                                onclick="showCredentials('{{ $school->name }}', '{{ $school->users->first()->email ?? 'Not Assigned' }}', '{{ url('/school/' . $school->slug . '/login') }}', '{{ $school->id }}')">
                                {{ $school->name }}
                                </a>
                            </h3>

                            <p class="text-xs text-gray-500">{{ $school->slug }}.schoolerp.com</p>
                        </div>
                    </div>
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs 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') }}">
                        {{ ucfirst($school->status) }}
                    </span>
                </div>
                
                <!-- Details Grid -->
                <div class="grid grid-cols-2 gap-3 mb-3 text-sm">
                    <div>
                        <p class="text-gray-400 text-xs uppercase">Plan</p>
                        <p class="font-medium {{ $school->plan === 'premium' ? 'text-purple-600' : 'text-gray-700' }}">
                            <i class="fas fa-crown mr-1 {{ $school->plan === 'premium' ? 'text-yellow-500' : '' }}"></i>
                            {{ ucfirst($school->plan) }}
                        </p>
                    </div>
                    <div>
                        <p class="text-gray-400 text-xs uppercase">Users</p>
                        <p class="font-medium text-gray-700">
                            <i class="fas fa-users mr-1 text-gray-400"></i>
                            {{ $school->users_count ?? 0 }}
                        </p>
                    </div>
                    <div class="col-span-2">
                        <p class="text-gray-400 text-xs uppercase">Expires</p>
                        <p class="font-medium {{ $school->daysUntilExpiry() <= 7 ? 'text-red-600' : 'text-gray-700' }}">
                            {{ $school->subscription_end->format('M d, Y') }}
                            @if($school->daysUntilExpiry() <= 7)
                                <span class="text-xs text-red-500 ml-1">(Soon)</span>
                            @endif
                        </p>
                    </div>
                </div>
                
                <!-- Actions -->
                <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                    <a href="{{ route('super_admin.schools.show', $school) }}" class="text-blue-600 text-sm font-medium">
                        View Details <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                    <div class="flex items-center space-x-1">
                        <a href="{{ route('super_admin.schools.modules', $school) }}" class="p-2 text-purple-600 hover:bg-purple-50 rounded-lg">
                            <i class="fas fa-cubes"></i>
                        </a>
                        <a href="{{ route('super_admin.schools.edit', $school) }}" 
                        class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors" title="Edit">
                            <i class="fas fa-edit"></i>
                        </a>
                        <a href="{{ route('super_admin.schools.renew', $school) }}" 
                        class="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors" title="Renew Plan">
                            <i class="fas fa-sync-alt"></i>
                        </a>
                        <button onclick="confirmDelete('{{ $school->name }}', '{{ route('super_admin.schools.destroy', $school) }}')" 
                                class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="Move to Trash">
                            <i class="fas fa-trash"></i>
                        </button>

                    </div>
                </div>
            </div>
        @empty
            <div class="p-8 text-center text-gray-500">
                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-school text-2xl text-gray-400"></i>
                </div>
                <p class="text-lg font-medium mb-2">No schools found</p>
                <a href="{{ route('super_admin.schools.create') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg">
                    <i class="fas fa-plus mr-2"></i> Create School
                </a>
            </div>
        @endforelse
    </div>
    
    <!-- Pagination -->
    <div class="px-6 py-4 border-t border-gray-200">
        {{ $schools->links() }}
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <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" aria-hidden="true">&#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" id="modal-title">Delete School</h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-500">Are you sure you want to delete <strong id="deleteSchoolName"></strong>? This action cannot be undone and all data will be permanently removed.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <form id="deleteForm" method="POST">
                    @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
                    </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>

{{-- Restore Confirmation Modal --}}
<div id="restoreModal" 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="closeRestoreModal()"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-md mx-auto z-10">
            
            {{-- Header --}}
            <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-t-2xl px-6 py-5">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
                        <i class="fas fa-undo text-white text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-white">Restore School?</h3>
                        <p class="text-green-100 text-sm">This school will become active again</p>
                    </div>
                </div>
            </div>

            {{-- Body --}}
            <div class="p-6">
                <div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-4">
                    <p class="text-sm text-green-800">
                        <i class="fas fa-info-circle mr-2"></i>
                        You are about to restore:
                    </p>
                    <p class="text-lg font-bold text-green-900 mt-1" id="restoreSchoolName"></p>
                </div>

                <ul class="text-sm text-gray-600 space-y-2 mb-4">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>School data will be fully restored</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>All users will regain access</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Modules & subscriptions restored</li>
                    <li><i class="fas fa-exclamation-triangle text-orange-500 mr-2"></i>Check subscription expiry after restore</li>
                </ul>

                <div class="flex gap-3">
                    <button onclick="closeRestoreModal()"
                            class="flex-1 py-2.5 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 font-medium text-sm transition-colors">
                        Cancel
                    </button>
                    <form id="restoreForm" method="POST" class="flex-1">
                        @csrf
                        @method('PUT')
                        <button type="submit"
                                class="w-full py-2.5 bg-green-600 text-white rounded-xl hover:bg-green-700 font-medium text-sm transition-colors">
                            <i class="fas fa-undo mr-2"></i>Yes, Restore
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ✅ School Created Success Modal --}}
@if(session('school_created'))
@php $sc = session('school_created'); @endphp
<div id="successModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden">
        
        {{-- Header --}}
        <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-5 text-white">
            <div class="flex items-center">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-check-circle text-2xl"></i>
                </div>
                <div>
                    <h3 class="text-xl font-bold">School Created Successfully!</h3>
                    <p class="text-green-100 text-sm">{{ $sc['name'] }} is now live</p>
                </div>
            </div>
        </div>
        
        {{-- Body --}}
        <div class="p-6 space-y-4">
            
            {{-- School Login URL --}}
            <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
                <p class="text-xs font-semibold text-blue-600 uppercase mb-2">
                    <i class="fas fa-link mr-1"></i>School Login URL
                </p>
                <div class="flex items-center gap-2">
                    <code class="flex-1 text-sm bg-white border border-blue-200 rounded-lg px-3 py-2 text-blue-800 break-all" id="loginUrl">
                        {{ $sc['login_url'] }}
                    </code>
                    <button onclick="copyText('loginUrl', this)" 
                            class="flex-shrink-0 px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium transition-colors">
                        <i class="fas fa-copy mr-1"></i>Copy
                    </button>
                </div>
            </div>
            
            {{-- Admin Credentials --}}
            <div class="bg-gray-50 border border-gray-200 rounded-xl p-4 space-y-3">
                <p class="text-xs font-semibold text-gray-600 uppercase">
                    <i class="fas fa-user-shield mr-1"></i>Admin Login Credentials
                </p>
                
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-500">Email</span>
                    <div class="flex items-center gap-2">
                        <code class="text-sm font-medium text-gray-800" id="adminEmail">{{ $sc['admin_email'] }}</code>
                        <button onclick="copyText('adminEmail', this)" class="text-blue-600 hover:text-blue-800 text-xs">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-500">Password</span>
                    <div class="flex items-center gap-2">
                        <code class="text-sm font-medium text-gray-800" id="adminPass">{{ $sc['admin_password'] }}</code>
                        <button onclick="copyText('adminPass', this)" class="text-blue-600 hover:text-blue-800 text-xs">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>

                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-500">Plan</span>
                    <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-semibold rounded-full">
                        {{ $sc['plan'] }}
                    </span>
                </div>

                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-500">Slug</span>
                    <code class="text-sm font-medium text-gray-800">{{ $sc['slug'] }}.schoolerp.com</code>
                </div>
            </div>

            {{-- Copy All Button --}}
            <button onclick="copyAll()" 
                    class="w-full py-3 bg-green-600 text-white rounded-xl hover:bg-green-700 font-medium transition-colors">
                <i class="fas fa-clipboard-list mr-2"></i>Copy All Details
            </button>
        </div>
        
        {{-- Footer --}}
        <div class="px-6 pb-6">
            <button onclick="document.getElementById('successModal').remove()" 
                    class="w-full py-2 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 text-sm font-medium transition-colors">
                Close
            </button>
        </div>
    </div>
</div>

@push('scripts')
<script>
function copyText(id, btn) {
    const text = document.getElementById(id).textContent.trim();
    navigator.clipboard.writeText(text).then(() => {
        const original = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
        btn.classList.add('bg-green-600');
        btn.classList.remove('bg-blue-600');
        setTimeout(() => { 
            btn.innerHTML = original; 
            btn.classList.remove('bg-green-600');
            btn.classList.add('bg-blue-600');
        }, 2000);
    });
}

function copyAll() {
    const text = `School: {{ $sc['name'] }}
Slug: {{ $sc['slug'] }}.schoolerp.com
Plan: {{ $sc['plan'] }}
Login URL: {{ $sc['login_url'] }}
Admin Email: {{ $sc['admin_email'] }}
Admin Password: {{ $sc['admin_password'] }}`;
    
    navigator.clipboard.writeText(text).then(() => {
        const btn = event.target.closest('button');
        btn.innerHTML = '<i class="fas fa-check mr-2"></i>Copied!';
        btn.classList.replace('bg-green-600', 'bg-gray-600');
        setTimeout(() => {
            btn.innerHTML = '<i class="fas fa-clipboard-list mr-2"></i>Copy All Details';
            btn.classList.replace('bg-gray-600', 'bg-green-600');
        }, 2000);
    });
}
</script>
@endpush
@endif

{{-- ✅ Credentials Popup Modal --}}
<div id="credentialsModal" 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 transition-opacity" onclick="closeCredentialsModal()"></div>
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md mx-auto z-10 overflow-hidden">
            <!-- Header -->
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 px-6 py-4 text-white">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-bold"><i class="fas fa-key mr-2"></i>School Admin Access</h3>
                    <button onclick="closeCredentialsModal()" class="text-white hover:text-gray-200">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>

            <!-- Body -->
            <div class="p-6 space-y-5">
                <div>
                    <p class="text-sm text-gray-500 uppercase font-semibold mb-1">School Name</p>
                    <p class="text-lg font-medium text-gray-800" id="modalSchoolName"></p>
                </div>

                <div class="space-y-4">
                    <!-- User ID (Email) -->
                    <div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
                        <label class="text-xs text-gray-400 uppercase font-bold">User ID (Email)</label>
                        <div class="flex items-center justify-between mt-1">
                            <code class="text-sm font-medium text-gray-700" id="modalUserEmail"></code>
                            <button onclick="copyText('modalUserEmail', this)" class="text-blue-600 hover:text-blue-800 p-1">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Login URL -->
                    <div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
                        <label class="text-xs text-gray-400 uppercase font-bold">Login URL</label>
                        <div class="flex items-center justify-between mt-1">
                            <code class="text-sm font-medium text-gray-700 break-all" id="modalLoginUrl"></code>
                            <button onclick="copyText('modalLoginUrl', this)" class="text-blue-600 hover:text-blue-800 p-1">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Password Action -->
                <div class="bg-yellow-50 p-4 rounded-xl border border-yellow-200">
                    <p class="text-xs text-yellow-700 mb-2 font-medium">
                        <i class="fas fa-lock mr-1"></i> Passwords are encrypted for security.
                    </p>
                    <button onclick="openResetPassword()" class="w-full py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 text-sm font-bold transition-colors">
                        Reset Admin Password
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ✅ Reset Password Sub-Modal --}}
<div id="resetPassModal" class="fixed inset-0 z-[60] hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeResetPassModal()"></div>
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-auto z-10 p-6">
            <h3 class="text-lg font-bold mb-4 text-gray-800">Set New Password</h3>
            <div class="space-y-4">
                <input type="password" id="newPasswordInput" placeholder="Enter new password" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none">
                <div class="flex gap-2">
                    <button onclick="closeResetPassModal()" class="flex-1 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium">Cancel</button>
                    <button onclick="submitNewPassword()" class="flex-1 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">Update</button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    // Search functionality
    document.getElementById('searchInput').addEventListener('input', function(e) {
        const searchTerm = e.target.value.toLowerCase();
        filterSchools();
    });
    
    // Status filter
    document.getElementById('statusFilter').addEventListener('change', function() {
        filterSchools();
    });
    
    // Plan filter
    document.getElementById('planFilter').addEventListener('change', function() {
        filterSchools();
    });
    
    function filterSchools() {
        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
        const statusFilter = document.getElementById('statusFilter').value;
        const planFilter = document.getElementById('planFilter').value;
        
        // Filter desktop table rows
        document.querySelectorAll('.school-row').forEach(row => {
            const name = row.getAttribute('data-name');
            const status = row.getAttribute('data-status');
            const plan = row.getAttribute('data-plan');
            
            const matchesSearch = name.includes(searchTerm);
            const matchesStatus = !statusFilter || status === statusFilter;
            const matchesPlan = !planFilter || plan === planFilter;
            
            row.style.display = matchesSearch && matchesStatus && matchesPlan ? '' : 'none';
        });
        
        // Filter mobile cards
        document.querySelectorAll('.school-card').forEach(card => {
            const name = card.getAttribute('data-name');
            const status = card.getAttribute('data-status');
            const plan = card.getAttribute('data-plan');
            
            const matchesSearch = name.includes(searchTerm);
            const matchesStatus = !statusFilter || status === statusFilter;
            const matchesPlan = !planFilter || plan === planFilter;
            
            card.style.display = matchesSearch && matchesStatus && matchesPlan ? '' : 'none';
        });
    }
    
    // Delete modal
        function confirmDelete(schoolName, deleteUrl) {
            document.getElementById('deleteSchoolName').textContent = schoolName;
            document.getElementById('deleteForm').action = deleteUrl;
            document.getElementById('deleteModal').classList.remove('hidden');
        }
        
        function closeDeleteModal() {
            document.getElementById('deleteModal').classList.add('hidden');
        }
        function confirmRestore(schoolName, restoreUrl) {
        document.getElementById('restoreSchoolName').textContent = schoolName;
        document.getElementById('restoreForm').action = restoreUrl;
        document.getElementById('restoreModal').classList.remove('hidden');
    }

    function closeRestoreModal() {
        document.getElementById('restoreModal').classList.add('hidden');
    }
</script>

<script>
    let currentSchoolId = null;

    function showCredentials(name, email, url, id) {
        document.getElementById('modalSchoolName').textContent = name;
        document.getElementById('modalUserEmail').textContent = email;
        document.getElementById('modalLoginUrl').textContent = url;
        currentSchoolId = id;
        document.getElementById('credentialsModal').classList.remove('hidden');
    }

    function closeCredentialsModal() {
        document.getElementById('credentialsModal').classList.add('hidden');
        closeResetPassModal();
    }

    function openResetPassword() {
        document.getElementById('resetPassModal').classList.remove('hidden');
    }

    function closeResetPassModal() {
        document.getElementById('resetPassModal').classList.add('hidden');
        document.getElementById('newPasswordInput').value = '';
    }

    async function submitNewPassword() {
        const password = document.getElementById('newPasswordInput').value;
        if (password.length < 8) {
            alert('Password must be at least 8 characters');
            return;
        }

        const btn = event.target;
        btn.disabled = true;
        btn.innerHTML = 'Updating...';

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

            const result = await response.json();
            if (result.success) {
                alert('Password updated successfully!');
                closeResetPassModal();
            } else {
                alert('Error: ' + result.message);
            }
        } catch (error) {
            alert('An error occurred while updating password');
        } finally {
            btn.disabled = false;
            btn.innerHTML = 'Update';
        }
    }

    // Reuse existing copyText function or add this one:
    function copyText(id, btn) {
        const text = document.getElementById(id).textContent.trim();
        navigator.clipboard.writeText(text).then(() => {
            const original = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-check text-green-500"></i>';
            setTimeout(() => { btn.innerHTML = original; }, 2000);
        });
    }
</script>

@endpush