@extends('layouts.superadmin')
@section('title', 'متابعة نصائح المستشارين')

@section('content')
<div class="container mx-auto px-4 py-6 rtl">

    {{-- فلاش نجاح / خطأ --}}
    @if(session('success'))
        <div class="mb-4 text-green-800 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded-lg p-4 flex items-center">
            <svg class="w-6 h-6 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 text-red-800 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 rounded-lg p-4 flex items-center">
            <svg class="w-6 h-6 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    {{-- الهيدر + السلايد تبع القائمتين --}}
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                متابعة نصائح المستشارين
            </h1>
            <p class="text-gray-600 dark:text-gray-400">
                مراقبة نصائح المستشارين، المستلمين، وحالات القراءة والردود مع إحصائيات مفصلة.
            </p>
        </div>

        {{-- سويش بين قائمتين (سلايد بسيط) --}}
        <div class="bg-gray-100 dark:bg-gray-800 rounded-full p-1 inline-flex">
            <button type="button"
                    data-tab="tips"
                    class="tab-btn px-4 py-1.5 text-sm font-medium rounded-full bg-white dark:bg-gray-900 shadow-sm text-blue-600 dark:text-blue-300">
                متابعة المستشارين
            </button>
            <button type="button"
                    data-tab="stats"
                    class="tab-btn px-4 py-1.5 text-sm font-medium rounded-full text-gray-600 dark:text-gray-300">
                إحصائيات المستشارين
            </button>
        </div>
    </div>

    {{-- كروت إحصائيات عامة --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6" id="topStatsBox">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm flex flex-col items-center border-t-4 border-blue-400">
            <span class="inline-flex items-center justify-center mb-2 rounded-full bg-blue-50 dark:bg-blue-900/20 text-blue-500 dark:text-blue-400 w-12 h-12">
                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </span>
            <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ $stats['total'] }}</span>
            <span class="mt-1 text-sm text-gray-700 dark:text-gray-300">إجمالي النصائح</span>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm flex flex-col items-center border-t-4 border-green-400">
            <span class="inline-flex items-center justify-center mb-2 rounded-full bg-green-50 dark:bg-green-900/20 text-green-500 dark:text-green-400 w-12 h-12">
                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
            </span>
            <span class="text-2xl font-bold text-green-600 dark:text-green-400">{{ $stats['read'] }}</span>
            <span class="mt-1 text-sm text-gray-700 dark:text-gray-300">نصائح مقروءة</span>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm flex flex-col items-center border-t-4 border-yellow-400">
            <span class="inline-flex items-center justify-center mb-2 rounded-full bg-yellow-50 dark:bg-yellow-900/20 text-yellow-500 dark:text-yellow-400 w-12 h-12">
                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </span>
            <span class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{{ $stats['unread'] }}</span>
            <span class="mt-1 text-sm text-gray-700 dark:text-gray-300">نصائح غير مقروءة</span>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm flex flex-col items-center border-t-4 border-purple-400">
            <span class="inline-flex items-center justify-center mb-2 rounded-full bg-purple-50 dark:bg-purple-900/20 text-purple-500 dark:text-purple-400 w-12 h-12">
                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M8 10h.01M12 10h.01M16 10h.01M9 16h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h6l6 6v10a2 2 0 01-2 2z"/>
                </svg>
            </span>
            <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">{{ $stats['with_reply'] }}</span>
            <span class="mt-1 text-sm text-gray-700 dark:text-gray-300">نصائح بها رد</span>
        </div>
    </div>

    {{-- ==== تبويب 1: متابعة المستشارين ==== --}}
    <div id="tab-tips" class="tab-panel space-y-6">

        {{-- نموذج الفلترة --}}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
            <form method="GET" action="{{ route('superadmin.advisor-tips.index') }}"
                  class="grid grid-cols-1 md:grid-cols-4 gap-4">

                <div>
                    <label class="block mb-2 font-medium text-gray-700 dark:text-gray-300">المستشار</label>
                    <select name="advisor_id"
                            class="w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="">الكل</option>
                        @foreach($advisors as $advisor)
                            <option value="{{ $advisor->id }}" {{ request('advisor_id') == $advisor->id ? 'selected' : '' }}>
                                {{ $advisor->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block mb-2 font-medium text-gray-700 dark:text-gray-300">المستلم</label>
                    <select name="recipient_id"
                            class="w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="">الكل</option>
                        @foreach($recipients as $recipient)
                            <option value="{{ $recipient->id }}" {{ request('recipient_id') == $recipient->id ? 'selected' : '' }}>
                                {{ $recipient->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block mb-2 font-medium text-gray-700 dark:text-gray-300">حالة القراءة</label>
                    <select name="is_read"
                            class="w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="">الكل</option>
                        <option value="1" {{ request('is_read') === '1' ? 'selected' : '' }}>مقروءة</option>
                        <option value="0" {{ request('is_read') === '0' ? 'selected' : '' }}>غير مقروءة</option>
                    </select>
                </div>

                <div>
                    <label class="block mb-2 font-medium text-gray-700 dark:text-gray-300">وجود رد</label>
                    <select name="has_reply"
                            class="w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="">الكل</option>
                        <option value="1" {{ request('has_reply') === '1' ? 'selected' : '' }}>بها رد</option>
                        <option value="0" {{ request('has_reply') === '0' ? 'selected' : '' }}>بدون رد</option>
                    </select>
                </div>

                <div class="md:col-span-2">
                    <label class="block mb-2 font-medium text-gray-700 dark:text-gray-300">من تاريخ</label>
                    <input type="date" name="date_from" value="{{ request('date_from') }}"
                           class="w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                </div>

                <div class="md:col-span-2">
                    <label class="block mb-2 font-medium text-gray-700 dark:text-gray-300">إلى تاريخ</label>
                    <input type="date" name="date_to" value="{{ request('date_to') }}"
                           class="w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                </div>

                <div class="md:col-span-3">
                    <label class="block mb-2 font-medium text-gray-700 dark:text-gray-300">بحث</label>
                    <input type="text" name="search" value="{{ request('search') }}"
                           placeholder="البحث في عنوان / نص النصيحة..."
                           class="w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                </div>

                <div class="flex items-end gap-2">
                    <button type="submit"
                            class="flex-1 bg-blue-600 hover:bg-blue-700 text-white rounded-md py-2 px-4 transition duration-200">
                        بحث
                    </button>
                    <a href="{{ route('superadmin.advisor-tips.index') }}"
                       class="bg-gray-500 hover:bg-gray-600 text-white rounded-md py-2 px-4 transition duration-200">
                        إعادة تعيين
                    </a>
                </div>
            </form>
        </div>

        {{-- كروت النصائح --}}
        @if($tips->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-6">
                @foreach($tips as $tip)
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
                        {{-- هيدر المستشار والمستلم --}}
                        <div class="p-5 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800">
                            <div class="flex items-center gap-4">
                                {{-- صورة المستشار --}}
                                <div class="flex-shrink-0">
                                    @php
                                        $advisor = $tip->advisor;
                                    @endphp
                                    @if($advisor && $advisor->avatar_url ?? false)
                                        <img src="{{ $advisor->avatar_url }}"
                                             alt="{{ $advisor->name }}"
                                             class="w-14 h-14 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
                                    @else
                                        <div class="w-14 h-14 rounded-full flex items-center justify-center border-4 border-white dark:border-gray-700 shadow-md bg-blue-100 dark:bg-blue-900">
                                            <svg class="w-7 h-7 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                                            </svg>
                                        </div>
                                    @endif
                                </div>

                                <div class="flex-1 min-w-0">
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">المستشار</p>
                                    <h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">
                                        {{ $advisor?->name ?? 'مستشار غير معروف' }}
                                    </h3>

                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                        إلى:
                                        <span class="font-medium text-gray-800 dark:text-gray-200">
                                            {{ $tip->recipient->name ?? 'مستخدم محذوف' }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>

                        {{-- محتوى النصيحة --}}
                        <div class="p-5 space-y-3">
                            <div>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">العنوان</p>
                                <p class="text-sm font-semibold text-gray-900 dark:text-white">
                                    {{ $tip->title }}
                                </p>
                            </div>

                            <div>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">النصيحة</p>
                                <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
                                    {{ \Illuminate\Support\Str::limit($tip->content, 120) }}
                                </p>
                            </div>

                            @if($tip->reply)
                                <div class="bg-green-50 dark:bg-green-900/20 border border-green-100 dark:border-green-800 rounded-lg p-3">
                                    <p class="text-xs text-green-700 dark:text-green-300 mb-1">
                                        رد المستلم / الإدارة:
                                    </p>
                                    <p class="text-xs text-green-800 dark:text-green-100">
                                        {{ \Illuminate\Support\Str::limit($tip->reply, 120) }}
                                    </p>
                                </div>
                            @endif

                            {{-- حالة النصيحة --}}
                            <div class="flex flex-wrap items-center justify-between gap-2 pt-2 border-t border-gray-100 dark:border-gray-700">
                                <div class="flex flex-wrap gap-2">
                                    {{-- حالة القراءة --}}
                                    @if($tip->is_read)
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-200">
                                            <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                            </svg>
                                            مقروءة
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-200">
                                            <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 10.586V7z" clip-rule="evenodd"/>
                                            </svg>
                                            غير مقروءة
                                        </span>
                                    @endif

                                    {{-- وجود رد --}}
                                    @if($tip->reply)
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/40 text-purple-800 dark:text-purple-200">
                                            <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2z"/>
                                            </svg>
                                            يوجد رد
                                        </span>
                                    @endif

                                    @if($tip->attachment)
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100">
                                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M15.172 7l-6.586 6.586a2 2 0 002.828 2.828L18 9.828a4 4 0 10-5.656-5.656L6.343 10.172"/>
                                            </svg>
                                            مرفق
                                        </span>
                                    @endif
                                </div>

                                <div class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ $tip->created_at->format('Y/m/d H:i') }}
                                </div>
                            </div>
                        </div>

                        {{-- أكشنات --}}
                        <div class="px-5 py-3 bg-gray-50 dark:bg-gray-700/60 border-t border-gray-200 dark:border-gray-700">
                            <div class="flex items-center justify-center gap-2">
                                <a href="{{ route('superadmin.advisor-tips.edit', $tip) }}"
                                   class="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-lg bg-yellow-500 hover:bg-yellow-600 text-white transition">
                                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                    </svg>
                                    تعديل
                                </a>

                                <form action="{{ route('superadmin.advisor-tips.destroy', $tip) }}"
                                      method="POST"
                                      onsubmit="return confirm('هل أنت متأكد من حذف هذه النصيحة؟');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-lg bg-red-600 hover:bg-red-700 text-white transition">
                                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M6 18L18 6M6 6l12 12"/>
                                        </svg>
                                        حذف
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- الباجينيشن --}}
            @if($tips->hasPages())
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                    <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                        <p class="text-sm text-gray-700 dark:text-gray-300">
                            عرض {{ $tips->firstItem() }} إلى {{ $tips->lastItem() }} من أصل {{ $tips->total() }} نصيحة
                        </p>
                        {{ $tips->withQueryString()->links() }}
                    </div>
                </div>
            @endif

        @else
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-12">
                <div class="text-center">
                    <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">لا توجد نصائح</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        لا توجد نصائح تطابق معايير البحث الحالية.
                    </p>
                </div>
            </div>
        @endif
    </div>

    {{-- ==== تبويب 2: إحصائيات المستشارين ==== --}}
    <div id="tab-stats" class="tab-panel hidden space-y-6">

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-3">
                <div>
                    <h2 class="text-xl font-bold text-gray-900 dark:text-white">إحصائيات حسب كل مستشار</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        عدد النصائح، المقروءة، غير المقروءة، والنصائح التي تحتوي على رد لكل مستشار.
                    </p>
                </div>
            </div>

            <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
                    <thead class="bg-gray-50 dark:bg-gray-800">
                        <tr class="text-center">
                            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">المستشار</th>
                            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">إجمالي النصائح</th>
                            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">المقروءة</th>
                            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">غير المقروءة</th>
                            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">بها رد</th>
                            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">آخر نصيحة</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-100 dark:divide-gray-800 text-center">
                        @forelse($advisorStats as $row)
                            <tr>
                                <td class="px-4 py-3 text-gray-900 dark:text-gray-100 font-medium">
                                    {{ $row->advisor_name }}
                                </td>
                                <td class="px-4 py-3 text-blue-600 dark:text-blue-400 font-semibold">
                                    {{ $row->total_tips }}
                                </td>
                                <td class="px-4 py-3 text-green-600 dark:text-green-400">
                                    {{ $row->read_count }}
                                </td>
                                <td class="px-4 py-3 text-yellow-600 dark:text-yellow-400">
                                    {{ $row->unread_count }}
                                </td>
                                <td class="px-4 py-3 text-purple-600 dark:text-purple-400">
                                    {{ $row->replied_count }}
                                </td>
                                <td class="px-4 py-3 text-gray-600 dark:text-gray-300 text-xs">
                                    {{ \Carbon\Carbon::parse($row->last_tip_at)->format('Y/m/d H:i') }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-4 py-6 text-gray-500 dark:text-gray-400">
                                    لا توجد بيانات إحصائية حالياً.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>

</div>

{{-- سويتش التبويبات --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const buttons = document.querySelectorAll('.tab-btn');
    const panels  = {
        tips: document.getElementById('tab-tips'),
        stats: document.getElementById('tab-stats'),
    };

    buttons.forEach(btn => {
        btn.addEventListener('click', () => {
            const target = btn.getAttribute('data-tab');

            // فعّل الزر المختار
            buttons.forEach(b => b.classList.remove('bg-white', 'dark:bg-gray-900', 'shadow-sm', 'text-blue-600', 'dark:text-blue-300'));
            btn.classList.add('bg-white', 'dark:bg-gray-900', 'shadow-sm', 'text-blue-600', 'dark:text-blue-300');

            // أظهر / اخفِ البانيلات
            Object.keys(panels).forEach(key => {
                if (key === target) {
                    panels[key].classList.remove('hidden');
                } else {
                    panels[key].classList.add('hidden');
                }
            });

            // لو ضغط على الإحصائيات، ننزل عليها شوي
            if (target === 'stats') {
                document.getElementById('tab-stats').scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });
    });
});
</script>
@endsection