@extends('layouts.superadmin')

@section('content')
<div class="p-4 sm:p-6" dir="rtl">
    <h1 class="text-xl font-extrabold text-slate-900 mb-2">سجلات السيرفرات</h1>
    <div class="text-sm text-slate-600 mb-4">متابعة التحويلات ومحاولات الدخول حسب السيرفر</div>

    <form class="mb-4 grid sm:grid-cols-4 gap-2">
        <input name="q" value="{{ $q }}" placeholder="بحث: بريد/آيبي/يوزر أجنت"
               class="px-4 py-2 rounded-xl border border-slate-200 bg-white/80 sm:col-span-2">

        <select name="status" class="px-4 py-2 rounded-xl border border-slate-200 bg-white/80">
            <option value="">كل الحالات</option>
            @foreach($statuses as $st)
                <option value="{{ $st }}" {{ $status===$st ? 'selected' : '' }}>{{ $st }}</option>
            @endforeach
        </select>

        <select name="server_key" class="px-4 py-2 rounded-xl border border-slate-200 bg-white/80">
            <option value="">كل السيرفرات</option>
            @foreach($keys as $k)
                <option value="{{ $k }}" {{ $serverKey===$k ? 'selected' : '' }}>{{ $k }}</option>
            @endforeach
        </select>

        <button class="px-4 py-2 rounded-xl bg-slate-900 text-white font-bold sm:col-span-4">تطبيق الفلاتر</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">Server Key</th>
                        <th class="p-3 text-right">Status</th>
                        <th class="p-3 text-right">IP</th>
                        <th class="p-3 text-right">Meta</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($logs as $l)
                        <tr class="border-t border-slate-100">
                            <td class="p-3 text-slate-600">{{ $l->created_at }}</td>
                            <td class="p-3 font-bold text-slate-900">{{ $l->email }}</td>
                            <td class="p-3 text-slate-700">{{ $l->server_key }}</td>
                            <td class="p-3 text-slate-700">{{ $l->status }}</td>
                            <td class="p-3 text-slate-700">{{ $l->ip }}</td>
                            <td class="p-3 text-slate-600 max-w-[380px] break-all">
                                {{ $l->meta }}
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="p-6 text-center text-slate-500">لا توجد سجلات</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

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