@extends('layouts.superadmin')

@section('content')
<div class="p-4 sm:p-6" dir="rtl">

    <div class="flex items-center justify-between gap-3 mb-4">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900">إدارة السيرفرات</h1>
            <div class="text-sm text-slate-600 mt-1">تفعيل/تعطيل • توجيه • ترتيب • صلاحيات</div>
        </div>

        <a href="{{ route('superadmin.servers.create') }}"
           class="px-4 py-2 rounded-xl bg-sky-600 hover:bg-sky-700 text-white font-extrabold">
            <i class="fa-solid fa-plus ml-1"></i>
            إضافة سيرفر
        </a>
    </div>

    @if(session('success'))
        <div class="mb-4 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 p-4 text-emerald-900 font-bold">
            ✅ {{ session('success') }}
        </div>
    @endif

    <form class="mb-4 flex gap-2">
        <input name="q" value="{{ $q }}" placeholder="ابحث بالاسم أو المفتاح…"
               class="w-full px-4 py-2 rounded-xl border border-slate-200 bg-white/80">
        <button class="px-4 py-2 rounded-xl bg-slate-900 text-white font-bold">بحث</button>
    </form>

    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50">
                    <tr class="text-slate-700">
                        <th class="p-3 text-right">#</th>
                        <th class="p-3 text-right">الاسم</th>
                        <th class="p-3 text-right">Key</th>
                        <th class="p-3 text-right">حالة</th>
                        <th class="p-3 text-right">Sort</th>
                        <th class="p-3 text-right">Route</th>
                        <th class="p-3 text-right">Redirect URL</th>
                        <th class="p-3 text-right">إجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($servers as $s)
                        <tr class="border-t border-slate-100">
                            <td class="p-3 text-slate-500">{{ $s->id }}</td>
                            <td class="p-3 font-bold text-slate-900">{{ $s->name }}</td>
                            <td class="p-3 text-slate-700">{{ $s->key }}</td>
                            <td class="p-3">
                                @if((int)$s->is_active === 1)
                                    <span class="px-2 py-1 rounded-lg bg-emerald-500/10 text-emerald-700 font-bold">مفعّل</span>
                                @else
                                    <span class="px-2 py-1 rounded-lg bg-rose-500/10 text-rose-700 font-bold">معطّل</span>
                                @endif
                            </td>
                            <td class="p-3 text-slate-700">{{ $s->sort_order }}</td>
                            <td class="p-3 text-slate-700">{{ $s->redirect_route }}</td>
                            <td class="p-3 text-slate-700 break-all max-w-[260px]">{{ $s->login_redirect_url }}</td>
                            <td class="p-3">
                                <div class="flex items-center gap-2">
                                    <a href="{{ route('superadmin.servers.edit', $s->id) }}"
                                       class="px-3 py-2 rounded-xl bg-slate-900/5 hover:bg-slate-900/10 border border-slate-200 font-bold">
                                        تعديل
                                    </a>

                                    <form method="POST" action="{{ route('superadmin.servers.toggle', $s->id) }}">
                                        @csrf
                                        <button class="px-3 py-2 rounded-xl font-bold
                                            {{ (int)$s->is_active===1 ? 'bg-amber-500/15 border border-amber-500/25 text-amber-900' : 'bg-emerald-500/15 border border-emerald-500/25 text-emerald-900' }}">
                                            {{ (int)$s->is_active===1 ? 'تعطيل' : 'تفعيل' }}
                                        </button>
                                    </form>

                                    <form method="POST" action="{{ route('superadmin.servers.destroy', $s->id) }}"
                                          onsubmit="return confirm('حذف السيرفر؟')">
                                        @csrf
                                        @method('DELETE')
                                        <button class="px-3 py-2 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-700 font-bold hover:bg-rose-500/15">
                                            حذف
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td class="p-6 text-center text-slate-500" colspan="8">لا يوجد سيرفرات</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-4">
        {{ $servers->links() }}
    </div>

</div>
@endsection