{{-- resources/views/general/received-tips/index.blade.php --}}
@extends($layout)

@section('title', 'النصائح المقدمة لي')
@section('page-title', 'النصائح المقدمة لي')

@push('styles')
<style>
    /* Socrates/Soft Enterprise */
    @keyframes pulseScale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
    .animate-pulse-scale{ animation:pulseScale 1.15s ease-in-out infinite; }

    .sc-scroll::-webkit-scrollbar{ width:10px; height:10px; }
    .sc-scroll::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius:999px; }
    .sc-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius:999px; }
    .sc-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }

    .sc-card{
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.12);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
    .sc-soft{
        background: rgba(0,0,0,.20);
        border: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    
    /* Dark Mode Overrides for Tip Cards */
    :is(.dark *) .tip-card-unread {
        background: rgba(56, 189, 248, 0.08) !important;
        border-color: rgba(56, 189, 248, 0.2) !important;
    }
    
    :is(.dark *) .tip-card-read {
        background: rgba(0, 0, 0, 0.18) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    :is(.dark *) .tip-title {
        color: rgb(255, 255, 255) !important;
    }
    
    :is(.dark *) .tip-meta {
        color: rgba(255, 255, 255, 0.55) !important;
    }
    
    :is(.dark *) .tip-meta-name {
        color: rgba(255, 255, 255, 0.85) !important;
    }
    
    :is(.dark *) .tip-content {
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    :is(.dark *) .tip-attachment {
        color: rgba(255, 255, 255, 0.6) !important;
    }
    
    :is(.dark *) .tip-button {
        background: linear-gradient(to right, rgba(56, 189, 248, 0.2), rgba(99, 102, 241, 0.2)) !important;
        border-color: rgba(56, 189, 248, 0.25) !important;
        color: rgb(255, 255, 255) !important;
    }
    
    :is(.dark *) .tip-button:hover {
        background: linear-gradient(to right, rgba(56, 189, 248, 0.28), rgba(99, 102, 241, 0.28)) !important;
    }
</style>
@endpush

@section('content')
<div class="min-h-screen rtl bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-950 dark:to-slate-900" dir="rtl">

    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 py-6 sm:py-8 space-y-6 text-slate-900 dark:text-white">

        {{-- HERO --}}
        <section class="relative overflow-hidden rounded-3xl shadow-2xl
                        bg-white dark:bg-gradient-to-br dark:from-slate-950 dark:via-slate-900 dark:to-slate-950
                        border border-slate-200 dark:border-sky-500/25">
            <div class="pointer-events-none absolute -top-24 -right-12 w-80 h-80 rounded-full bg-sky-500/16 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-28 -left-16 w-96 h-96 rounded-full bg-emerald-500/12 blur-3xl"></div>

            <div class="relative p-5 sm:p-7 lg:p-8 space-y-3">
                <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
                    <div class="space-y-2 max-w-3xl">
                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100 dark:bg-black/40 border border-slate-300 dark:border-sky-400/20 text-[11px] text-slate-700 dark:text-white/85">
                            <span class="inline-flex w-6 h-6 rounded-full bg-gradient-to-br from-sky-500 to-indigo-500 text-white items-center justify-center">
                                <i class="fa-solid fa-lightbulb text-[11px]"></i>
                            </span>
                            مركز النصائح — لوحة متابعة شخصية
                        </div>

                        <h1 class="text-xl sm:text-2xl lg:text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">
                            النصائح المقدمة لي
                        </h1>

                        <p class="text-[12px] sm:text-[14px] text-slate-600 dark:text-white/70 leading-relaxed">
                            هنا ستجد كل النصائح التي وصلت لك من المستشارين — مع تتبع المقروء/غير المقروء، والمرفقات، وسهولة الوصول للتفاصيل.
                        </p>

                        <div class="flex flex-wrap gap-2 pt-1">
                            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100 dark:bg-white/5 border border-slate-300 dark:border-white/10 text-[11px] text-slate-700 dark:text-white/80">
                                <span class="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
                                عرض مريح وهادئ
                            </span>
                            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100 dark:bg-white/5 border border-slate-300 dark:border-white/10 text-[11px] text-slate-700 dark:text-white/80">
                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                                تنظيم Enterprise
                            </span>
                        </div>
                    </div>

                    <div class="w-full lg:w-[420px] bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-3xl p-4">
                        <div class="text-[11px] text-slate-600 dark:text-white/60 font-extrabold mb-2">ملخص سريع</div>
                        <div class="grid grid-cols-2 gap-2 text-[12px]">
                            <div class="rounded-2xl bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 p-3">
                                <div class="text-slate-500 dark:text-white/55 text-[11px]">إجمالي</div>
                                <div class="text-2xl font-extrabold text-slate-900 dark:text-white">{{ $stats['total'] }}</div>
                            </div>
                            <div class="rounded-2xl bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 p-3">
                                <div class="text-slate-500 dark:text-white/55 text-[11px]">غير مقروءة</div>
                                <div class="text-2xl font-extrabold text-rose-600 dark:text-rose-200">{{ $stats['unread'] }}</div>
                            </div>
                            <div class="rounded-2xl bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 p-3">
                                <div class="text-slate-500 dark:text-white/55 text-[11px]">مقروءة</div>
                                <div class="text-2xl font-extrabold text-emerald-600 dark:text-emerald-200">{{ $stats['read'] }}</div>
                            </div>
                            <div class="rounded-2xl bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 p-3">
                                <div class="text-slate-500 dark:text-white/55 text-[11px]">تم الرد</div>
                                <div class="text-2xl font-extrabold text-fuchsia-600 dark:text-fuchsia-200">{{ $stats['replied'] }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- الإحصائيات (نفس أرقامك، ستايل سقراط) --}}
        <section class="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl shadow-xl p-5 sm:p-6">
            <div class="flex items-center justify-between gap-3 mb-4">
                <div>
                    <h2 class="text-base sm:text-lg font-extrabold text-slate-900 dark:text-white">📊 الإحصائيات</h2>
                    <p class="text-[11px] sm:text-xs text-slate-600 dark:text-white/55">تجميعة سريعة لحالة النصائح.</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                {{-- إجمالي --}}
                <div class="bg-white dark:bg-black/20 rounded-2xl p-4 border border-slate-200 dark:border-sky-400/20 shadow-lg transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-600 dark:text-white/65 text-sm font-bold">إجمالي النصائح</p>
                            <p class="text-3xl font-extrabold text-slate-900 dark:text-white mt-2">{{ $stats['total'] }}</p>
                        </div>
                        <div class="p-3 bg-sky-100 dark:bg-sky-500/15 border border-sky-300 dark:border-sky-400/20 rounded-2xl">
                            <svg class="w-8 h-8 text-sky-600 dark:text-sky-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                            </svg>
                        </div>
                    </div>
                </div>

                {{-- غير مقروء --}}
                <div class="bg-white dark:bg-black/20 rounded-2xl p-4 border border-slate-200 dark:border-amber-400/20 shadow-lg transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-600 dark:text-white/65 text-sm font-bold">غير مقروءة</p>
                            <p class="text-3xl font-extrabold text-amber-600 dark:text-white mt-2">{{ $stats['unread'] }}</p>
                        </div>
                        <div class="p-3 bg-amber-100 dark:bg-amber-500/15 border border-amber-300 dark:border-amber-400/20 rounded-2xl">
                            <svg class="w-8 h-8 text-amber-600 dark:text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5zM11 4H4v14h7V4z"/>
                            </svg>
                        </div>
                    </div>
                </div>

                {{-- مقروء --}}
                <div class="bg-white dark:bg-black/20 rounded-2xl p-4 border border-slate-200 dark:border-emerald-400/20 shadow-lg transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-600 dark:text-white/65 text-sm font-bold">مقروءة</p>
                            <p class="text-3xl font-extrabold text-emerald-600 dark:text-white mt-2">{{ $stats['read'] }}</p>
                        </div>
                        <div class="p-3 bg-emerald-100 dark:bg-emerald-500/15 border border-emerald-300 dark:border-emerald-400/20 rounded-2xl">
                            <svg class="w-8 h-8 text-emerald-600 dark:text-emerald-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                    </div>
                </div>

                {{-- تم الرد --}}
                <div class="bg-white dark:bg-black/20 rounded-2xl p-4 border border-slate-200 dark:border-fuchsia-400/20 shadow-lg transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-slate-600 dark:text-white/65 text-sm font-bold">تم الرد عليها</p>
                            <p class="text-3xl font-extrabold text-fuchsia-600 dark:text-white mt-2">{{ $stats['replied'] }}</p>
                        </div>
                        <div class="p-3 bg-fuchsia-100 dark:bg-fuchsia-500/15 border border-fuchsia-300 dark:border-fuchsia-400/20 rounded-2xl">
                            <svg class="w-8 h-8 text-fuchsia-600 dark:text-fuchsia-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- قائمة النصائح --}}
        <section class="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl shadow-2xl p-5 sm:p-6">
            <div class="flex items-center justify-between gap-3 mb-6">
                <div>
                    <h3 class="text-lg sm:text-xl font-extrabold text-slate-900 dark:text-white">النصائح المستلمة</h3>
                    <p class="text-[11px] sm:text-xs text-slate-600 dark:text-white/55">اضغط "عرض" لمشاهدة التفاصيل والرد.</p>
                </div>

                <div class="inline-flex items-center gap-2 text-[11px] text-slate-600 dark:text-white/55">
                    <span class="w-2 h-2 rounded-full bg-rose-400 animate-pulse"></span>
                    الجديد يظهر بتمييز خاص
                </div>
            </div>

            <div class="space-y-4">
                @forelse($tips as $tip)
                    <div class="rounded-3xl p-5 border transition-all hover:shadow-2xl {{ !$tip->is_read ? 'tip-card-unread' : 'tip-card-read' }}
                                @if(!$tip->is_read)
                                    bg-sky-50 border-sky-200 shadow-lg
                                @else
                                    bg-slate-50 border-slate-200
                                @endif">
                        <div class="flex items-start justify-between gap-4">
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-3 mb-3">
                                    <img src="{{ $tip->advisor->avatar_url }}"
                                         alt="{{ $tip->advisor->name }}"
                                         class="w-12 h-12 rounded-2xl object-cover border border-white/15 ring-2 ring-sky-400/40">

                                    <div class="flex-1 min-w-0">
                                        <h4 class="tip-title text-lg font-extrabold text-slate-900 truncate">
                                            {{ $tip->title }}
                                            @if(!$tip->is_read)
                                                <span class="inline-flex items-center gap-1 px-2 py-0.5
                                                             bg-rose-500/20 border border-rose-400/25 text-rose-100 text-[11px]
                                                             rounded-full mr-2">
                                                    <span class="w-1.5 h-1.5 rounded-full bg-rose-300 animate-pulse"></span>
                                                    جديد
                                                </span>
                                            @endif
                                        </h4>
                                        <p class="tip-meta text-[12px] text-slate-600">
                                            من: <span class="tip-meta-name font-extrabold text-slate-900">{{ $tip->advisor->name }}</span>
                                            • {{ $tip->formatted_created_at }}
                                        </p>
                                    </div>
                                </div>

                                <p class="tip-content text-slate-700 line-clamp-2 mb-3 leading-relaxed">
                                    {{ $tip->content }}
                                </p>

                                @if($tip->attachment)
                                    <div class="tip-attachment flex items-center gap-2 text-[12px] text-slate-600">
                                        <svg class="w-5 h-5 text-white/40" 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 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                                        </svg>
                                        <span>يحتوي على مرفق</span>
                                    </div>
                                @endif
                            </div>

                            <div class="flex flex-col gap-2">
                                <a href="{{ route('received-tips.show', $tip) }}"
                                   class="tip-button px-4 py-2.5 rounded-2xl text-center flex items-center justify-center gap-2
                                          bg-sky-100 hover:bg-sky-200
                                          border border-sky-300 text-sky-700 font-extrabold transition shadow-lg">
                                    <i class="fa-regular fa-eye"></i>
                                    عرض
                                </a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-12">
                        <div class="w-16 h-16 mx-auto rounded-3xl bg-white/10 border border-white/15 grid place-items-center mb-4 text-white/50">
                            <i class="fa-regular fa-face-smile-beam text-2xl"></i>
                        </div>
                        <p class="text-xl font-extrabold text-slate-700 dark:text-white/75">لا توجد نصائح</p>
                        <p class="text-slate-600 dark:text-white/45 mt-2">لم تستلم أي نصائح بعد</p>
                    </div>
                @endforelse
            </div>

            {{-- Pagination --}}
            @if($tips->hasPages())
                <div class="mt-6 sc-soft rounded-3xl p-4 border border-white/10">
                    {{ $tips->links() }}
                </div>
            @endif
        </section>

    </div>
</div>
@endsection