@extends('layouts.superadmin')

@section('title', 'سجل ملاحظات اللايفات (DLL)')
@section('page-title', 'سجل ملاحظات اللايفات (Detailed Live Log)')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
    <div class="max-w-6xl mx-auto px-4 rtl text-white">

        {{-- Header --}}
        <div class="mb-6">
            <div class="flex items-center gap-3 mb-3">
                <div class="h-11 w-11 rounded-2xl bg-slate-800 flex items-center justify-center
                            ring-2 ring-emerald-500/60 shadow-lg shadow-emerald-500/30">
                    <i class="fa-solid fa-database text-emerald-400 text-xl"></i>
                </div>
                <div class="text-center sm:text-right">
                    <h1 class="text-xl sm:text-2xl font-bold">سجل ملاحظات اللايفات (DLL)</h1>
                    <p class="text-sm text-slate-300/80">
                        عرض تفصيلي لكل الملاحظات التي كتبت على اللايفات: العضو، اللايف، من كتب الملاحظة، ونص القوة/الضعف/التوصية.
                    </p>
                </div>
            </div>
        </div>

        {{-- Filters --}}
        <form method="GET" action="{{ route('superadmin.falcon-room.lives-insights.dll.index') }}"
              class="mb-6 rounded-2xl border border-slate-700/80 bg-slate-900/90 p-4 sm:p-5 shadow-xl">
            <div class="grid gap-4 md:grid-cols-4 grid-cols-1">

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">من تاريخ</label>
                    <input type="date" name="from" value="{{ $from }}"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">إلى تاريخ</label>
                    <input type="date" name="to" value="{{ $to }}"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">عضو اللايف</label>
                    <input type="text" name="member" value="{{ $qMember }}"
                           placeholder="اسم / يوزر / إيميل"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">من كتب الملاحظة (مستشار/مشرف)</label>
                    <input type="text" name="actor" value="{{ $qActor }}"
                           placeholder="اسم / يوزر / إيميل"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                </div>
            </div>

            <div class="grid gap-4 md:grid-cols-4 grid-cols-1 mt-3">
                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">حالة اللايف</label>
                    <select name="status"
                            class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        @foreach($statusOptions as $val => $label)
                            <option value="{{ $val }}" @selected($status === $val)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">نوع اللايف</label>
                    <select name="type"
                            class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        @foreach($typeOptions as $val => $label)
                            <option value="{{ $val }}" @selected($type === $val)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="md:col-span-2 flex items-end gap-2">
                    <button class="inline-flex items-center justify-center rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold
                                   text-slate-950 hover:bg-emerald-400 transition">
                        <i class="fa-solid fa-filter ml-2 text-xs"></i>
                        تطبيق الفلاتر
                    </button>
                    <a href="{{ route('superadmin.falcon-room.lives-insights.dll.index') }}"
                       class="inline-flex items-center justify-center rounded-xl border border-slate-600 px-4 py-2 text-sm
                              font-medium text-slate-200 hover:bg-slate-800/80 transition">
                        إعادة ضبط
                    </a>
                </div>
            </div>
        </form>

        {{-- Table --}}
        <div class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden">
            <div class="border-b border-slate-800 px-4 py-3 flex items-center justify-between">
                <div>
                    <h2 class="text-sm sm:text-base font-semibold">سجل ملاحظات اللايفات (DLL)</h2>
                    <p class="text-[11px] text-slate-400">
                        ترتيب تنازلي حسب أحدث ملاحظة. كل سطر يمثل ملاحظة واحدة على لايف محدد.
                    </p>
                </div>
                <span class="text-[11px] text-slate-400">
                    عدد السجلات: {{ $logs->total() }}
                </span>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-xs sm:text-sm text-slate-200">
                    <thead class="bg-slate-900/90 border-b border-slate-800 text-[11px] uppercase tracking-wide">
                        <tr>
                            <th class="px-3 py-2 text-right">الوقت</th>
                            <th class="px-3 py-2 text-right">العضو</th>
                            <th class="px-3 py-2 text-right">اللايف</th>
                            <th class="px-3 py-2 text-right">من كتب الملاحظة</th>
                            <th class="px-3 py-2 text-right">القوة</th>
                            <th class="px-3 py-2 text-right">الضعف</th>
                            <th class="px-3 py-2 text-right">التوصية</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800">
                        @forelse($logs as $log)
                            @php
                                $created = \Carbon\Carbon::parse($log->created_at)->format('Y-m-d H:i');
                                $memberName = $log->member_name ?? $log->member_username ?? ('#'.$log->member_id);
                                $actorName  = $log->actor_name  ?? $log->actor_username  ?? ('#'.$log->actor_id);
                            @endphp
                            <tr class="hover:bg-slate-800/50 align-top">
                                <td class="px-3 py-2 text-[11px] text-slate-300">
                                    {{ $created }}
                                </td>
                                <td class="px-3 py-2">
                                    <div class="flex flex-col">
                                        <span class="font-semibold text-slate-100">{{ $memberName }}</span>
                                        <span class="text-[11px] text-slate-400">{{ $log->member_username ?? '' }}</span>
                                    </div>
                                </td>
                                <td class="px-3 py-2 text-[11px]">
                                    <div class="flex flex-col gap-0.5">
                                        <span class="text-slate-200">
                                            #{{ $log->live_id }} — {{ $log->scheduled_date }} • {{ $log->scheduled_time }}
                                        </span>
                                        <span class="text-[10px] text-slate-400">
                                            حالة: {{ $log->live_status }} • نوع: {{ $log->live_type }}@if($log->is_sahra) • سهرة@endif
                                        </span>
                                    </div>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="flex flex-col">
                                        <span class="font-semibold text-slate-100">{{ $actorName }}</span>
                                        <span class="text-[11px] text-slate-400">{{ $log->actor_username ?? '' }}</span>
                                    </div>
                                </td>
                                <td class="px-3 py-2 text-[11px] text-emerald-200">
                                    {{ \Illuminate\Support\Str::limit($log->strengths ?? '—', 80) }}
                                </td>
                                <td class="px-3 py-2 text-[11px] text-amber-200">
                                    {{ \Illuminate\Support\Str::limit($log->weaknesses ?? '—', 80) }}
                                </td>
                                <td class="px-3 py-2 text-[11px] text-violet-200">
                                    {{ \Illuminate\Support\Str::limit($log->suggestions ?? '—', 80) }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-4 py-8 text-center text-slate-400">
                                    لا توجد ملاحظات في هذه الفترة حسب الفلاتر الحالية.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($logs->hasPages())
                <div class="px-4 py-3 border-t border-slate-800">
                    {{ $logs->links() }}
                </div>
            @endif
        </div>

    </div>
</div>
@endsection