@extends('admin.layout')

@section('title', 'إدارة المدارس')
@section('header', 'المدارس المشتركة')

@section('content')
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <!-- Filters -->
        <div class="flex justify-between items-center mb-4 px-6 pt-6">
            <h3 class="text-lg font-bold text-gray-700">قائمة المدارس</h3>
            <a href="{{ route('admin.tenants.create') }}" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 flex items-center gap-2 transition">
                <span>+</span> إضافة مدرسة جديدة
            </a>
        </div>
        <div class="p-6 border-b border-gray-200 bg-gray-50">
            <form method="GET" action="{{ route('admin.tenants.index') }}" class="flex flex-col md:flex-row gap-4">
                <div class="flex-1">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="بحث باسم المدرسة، البريد، أو المعرف..." 
                           class="w-full rounded border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200">
                </div>
                <div class="w-full md:w-48">
                    <select name="status" class="w-full rounded border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200">
                        <option value="">كل الحالات</option>
                        <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>نشط</option>
                        <option value="suspended" {{ request('status') === 'suspended' ? 'selected' : '' }}>متوقف</option>
                    </select>
                </div>
                <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition">
                    تصفية
                </button>
            </form>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-right">
                <thead class="bg-gray-100 text-gray-600">
                    <tr>
                        <th class="px-6 py-3">المدرسة</th>
                        <th class="px-6 py-3">النطاق (Domain)</th>
                        <th class="px-6 py-3">الخطة</th>
                        <th class="px-6 py-3">الحالة</th>
                        <th class="px-6 py-3">تاريخ التسجيل</th>
                        <th class="px-6 py-3 text-center">إجراءات</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($tenants as $tenant)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4">
                            <div class="font-bold text-gray-800">{{ $tenant->name }}</div>
                            <div class="text-xs text-gray-500">{{ $tenant->email }}</div>
                        </td>
                        <td class="px-6 py-4" dir="ltr">
                            @foreach($tenant->domains as $domain)
                                <a href="http://{{ $domain->domain }}:8081" target="_blank" class="text-blue-600 hover:underline block">
                                    {{ $domain->domain }}
                                </a>
                            @endforeach
                        </td>
                        <td class="px-6 py-4">
                            @php
                                $planSlug = $tenant->plan?->slug ?? 'none';
                                $planName = $tenant->plan?->name ?? '—';
                            @endphp
                            <span class="px-2 py-1 rounded text-xs font-semibold
                                @if($planSlug === 'premium') bg-purple-100 text-purple-800
                                @elseif($planSlug === 'standard') bg-blue-100 text-blue-800
                                @elseif($planSlug === 'trial') bg-yellow-100 text-yellow-800
                                @else bg-gray-100 text-gray-500
                                @endif">
                                {{ $planName }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            @if($tenant->is_active)
                                <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-bold">نشط</span>
                            @else
                                <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-bold">متوقف</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-gray-500" dir="ltr">
                            {{ $tenant->created_at->format('Y-m-d') }}
                        </td>
                        <td class="px-6 py-4 flex justify-center gap-2">
                            <a href="{{ route('admin.tenants.backups.index', $tenant->id) }}" class="text-gray-600 hover:text-gray-800 p-2 bg-gray-50 rounded" title="النسخ الاحتياطي">
                                💾
                            </a>
                            <form action="{{ route('admin.tenants.toggle', $tenant->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="text-blue-600 hover:text-blue-800 p-2 bg-blue-50 rounded" title="{{ $tenant->is_active ? 'تعطيل' : 'تفعيل' }}">
                                    {{ $tenant->is_active ? '⏸️' : '▶️' }}
                                </button>
                            </form>
                            <!-- Delete -->
                            <form method="POST" action="{{ route('admin.tenants.destroy', $tenant->id) }}" onsubmit="return confirm('هل أنت متأكد من حذف هذه المدرسة نهائياً؟ لا يمكن التراجع عن هذا الإجراء.');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-2 rounded hover:bg-red-100 text-red-600" title="حذف نهائي">
                                    🗑️
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-8 text-center text-gray-500">
                            لا توجد نتائج مطابقة للبحث.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="p-4 border-t border-gray-200 bg-gray-50">
            {{ $tenants->withQueryString()->links() }}
        </div>
    </div>
@endsection