@extends('layouts.superadmin')

@section('title','NotifyHub — السجل')

@section('content')
@php
    $from = $from ?? now()->subDays(14)->toDateString();
    $to   = $to   ?? now()->toDateString();

    $badge = [
        'sent'      => ['label'=>'تم الإرسال','cls'=>'bg-emerald-500/15 border-emerald-400/25 text-emerald-200'],
        'failed'    => ['label'=>'فشل','cls'=>'bg-rose-500/15 border-rose-400/25 text-rose-200'],
        'scheduled' => ['label'=>'مجدول','cls'=>'bg-amber-500/15 border-amber-400/25 text-amber-200'],
        'draft'     => ['label'=>'مسودة','cls'=>'bg-slate-500/15 border-white/10 text-slate-200'],
        'cancelled' => ['label'=>'ملغي','cls'=>'bg-slate-500/10 border-white/10 text-slate-300'],
    ];

    $typeLbl = [
        'decision'      => 'قرار',
        'live'          => 'لايف',
        'weekly_test'   => 'اختبار',
        'daily_reading' => 'اقرأني',
        'reminder'      => 'تذكير',
        'custom'        => 'مخصص',
    ];
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8">
    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-5 rtl">

        {{-- HERO --}}
        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-cyan-400/25 shadow-2xl shadow-cyan-500/10">
            <div class="pointer-events-none absolute -top-20 -right-12 w-72 h-72 rounded-full bg-cyan-400/15 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -left-16 w-80 h-80 rounded-full bg-fuchsia-500/10 blur-3xl"></div>

            <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                <div class="space-y-2">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-white/15 text-[11px] text-white/85">
                        <i class="fa-solid fa-clock-rotate-left text-xs"></i>
                        <span>NotifyHub — Logs</span>
                    </div>
                    <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                        سجل الإشعارات <span class="text-cyan-300">Logs</span>
                    </h1>
                    <p class="text-[12px] sm:text-[14px] text-slate-200/85">
                        يعرض محاولات الإرسال (Push/Internal) مع الحالة والخطأ إن وُجد.
                    </p>
                </div>

                <div class="flex flex-wrap gap-2">
                    <a href="{{ route('superadmin.notifyhub.notifications.index') }}"
                       class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                        <i class="fa-solid fa-bell ms-2 text-[11px]"></i>
                        الإشعارات
                    </a>
                    <a href="{{ route('superadmin.notifyhub.dashboard') }}"
                       class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                        <i class="fa-solid fa-gauge-high ms-2 text-[11px]"></i>
                        الداشبورد
                    </a>
                </div>
            </div>
        </div>

        {{-- Flash --}}
        @if(session('success'))
            <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
                {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 text-rose-200 px-4 py-3 text-sm">
                {{ session('error') }}
            </div>
        @endif

        {{-- Filters --}}
        <form method="get" class="rounded-3xl bg-black/35 border border-white/10 p-4 sm:p-5">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div>
                    <label class="text-[10px] text-slate-300/80">من</label>
                    <input type="date" name="from" value="{{ request('from',$from) }}"
                           class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
                </div>
                <div>
                    <label class="text-[10px] text-slate-300/80">إلى</label>
                    <input type="date" name="to" value="{{ request('to',$to) }}"
                           class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
                </div>
                <div class="flex items-end gap-2">
                    <button class="w-full inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                        bg-gradient-to-r from-cyan-200 via-cyan-100 to-fuchsia-200 shadow-lg shadow-cyan-500/20 hover:scale-[1.01] active:scale-100 transition">
                        <i class="fa-solid fa-filter ms-2 text-[11px]"></i>
                        فلترة
                    </button>
                </div>
            </div>
        </form>

        {{-- Table --}}
        <div class="rounded-3xl bg-gradient-to-br from-slate-900/90 via-slate-950/95 to-black/95 border border-white/10 shadow-xl overflow-hidden">
            <div class="p-4 sm:p-5 border-b border-white/10 flex items-center justify-between">
                <div class="text-sm font-extrabold text-white">السجل</div>
                <div class="text-[11px] text-slate-300/80">
                    مجموع: {{ method_exists($rows,'total') ? number_format($rows->total()) : number_format(count($rows)) }}
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-xs text-slate-100">
                    <thead class="bg-white/5 text-[11px] text-slate-200/80">
                        <tr>
                            <th class="px-4 py-3 text-right">#</th>
                            <th class="px-4 py-3 text-right">الوقت</th>
                            <th class="px-4 py-3 text-right">القناة</th>
                            <th class="px-4 py-3 text-right">الحالة</th>
                            <th class="px-4 py-3 text-right">الإشعار</th>
                            <th class="px-4 py-3 text-right">النوع</th>
                            <th class="px-4 py-3 text-right">خطأ</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5">
                        @forelse($rows as $r)
                            @php
                                $b = $badge[$r->status] ?? ['label'=>$r->status,'cls'=>'bg-white/5 border-white/10 text-white/80'];
                            @endphp
                            <tr class="hover:bg-white/5 transition">
                                <td class="px-4 py-3 text-slate-200/90">{{ $r->id }}</td>
                                <td class="px-4 py-3 text-slate-200/90 whitespace-nowrap">
                                    {{ \Illuminate\Support\Carbon::parse($r->created_at)->format('Y-m-d H:i') }}
                                </td>
                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center px-2 py-1 rounded-xl bg-black/40 border border-white/10 text-white/80">
                                        {{ strtoupper($r->channel) }}
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center px-2 py-1 rounded-xl border {{ $b['cls'] }}">
                                        {{ $b['label'] }}
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="font-bold text-white/90 truncate max-w-[320px]">
                                        {{ $r->notif_title ?? '—' }}
                                    </div>
                                    <div class="text-[11px] text-slate-300/70">
                                        HubID: {{ $r->notification_id }}
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-slate-200/90">
                                    {{ $typeLbl[$r->notif_type ?? 'custom'] ?? ($r->notif_type ?? '—') }}
                                    <span class="text-slate-400/60">•</span>
                                    <span class="text-slate-300/70">{{ $r->notif_status ?? '—' }}</span>
                                </td>
                                <td class="px-4 py-3 text-rose-200/90">
                                    <div class="max-w-[420px] break-words">
                                        {{ $r->error ?: '—' }}
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-4 py-10 text-center text-slate-300/80">
                                    لا يوجد سجلات ضمن هذه الفترة.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if(method_exists($rows,'links'))
                <div class="p-4 sm:p-5 border-t border-white/10">
                    {{ $rows->links() }}
                </div>
            @endif
        </div>

    </div>
</div>
@endsection