@extends('layouts.superadmin')
@section('title', 'النشاطات الداخلية - الإدارة')

@section('content')
<div class="container mx-auto px-2 sm:px-4 lg:px-6 py-4 sm:py-6 rtl space-y-6">

    <!-- هيدر -->
    <div class="mb-1">
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-1">
            النشاطات الداخلية
        </h1>
        <p class="text-sm text-gray-600 dark:text-gray-400">
            كل ما يحدث داخل النظام من تقييمات، مخالفات، انضمام وخروج أعضاء، نصائح، متابعة، دعم، مسابقات، ولايفات في مكان واحد.
        </p>
    </div>

    <!-- Tabs كفلاتر -->
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-3 sm:p-4">
        @php
            $tabs = [
                'all'                => 'كل النشاطات',
                'evaluation'         => 'التقييمات',
                'user_joined'        => 'انضمام الأعضاء',
                'user_left'          => 'خروج الأعضاء',
                'violation'          => 'المخالفات',
                'violation_resolved' => 'مخالفات مُغلقة',
                'tip'                => 'نصائح المستشارين',
                'tip_reply'          => 'ردود الأعضاء على النصائح',
                'member_care'        => 'ملفات المتابعة',
                'proactive'          => 'ProActive',
                'competition'        => 'المسابقات',
                'support'            => 'الدعم الفني',
                'live'               => 'سجلات اللايفات',

                // ADD: سجل الأعذار
                'excuse'             => 'سجل الأعذار',
                // END ADD
            ];
            $currentType = $filterType ?? 'all';
        @endphp

        <div class="flex flex-wrap gap-2">
            @foreach($tabs as $type => $label)
                @php
                    $isActive = $currentType === $type || ($type === 'all' && ($currentType === 'all' || $currentType === null));
                    $query = $type === 'all' ? [] : ['type' => $type];
                @endphp

                <a href="{{ route('superadmin.internal-activities.index', $query) }}"
                   class="group inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium
                          {{ $isActive
                                ? 'bg-sky-600 text-white shadow-sm'
                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700' }}">
                    <div class="flex items-center gap-1">
                        @switch($type)
                            @case('all')
                                <i class="fa-solid fa-layer-group text-[11px]"></i>
                                @break
                            @case('evaluation')
                                <i class="fa-solid fa-clipboard-check text-[11px]"></i>
                                @break
                            @case('user_joined')
                                <i class="fa-solid fa-user-plus text-[11px]"></i>
                                @break
                            @case('user_left')
                                <i class="fa-solid fa-user-minus text-[11px]"></i>
                                @break
                            @case('violation')
                                <i class="fa-solid fa-triangle-exclamation text-[11px]"></i>
                                @break
                            @case('violation_resolved')
                                <i class="fa-solid fa-circle-check text-[11px]"></i>
                                @break
                            @case('tip')
                                <i class="fa-solid fa-lightbulb text-[11px]"></i>
                                @break
                            @case('tip_reply')
                                <i class="fa-solid fa-reply text-[11px]"></i>
                                @break
                            @case('member_care')
                                <i class="fa-solid fa-heart-pulse text-[11px]"></i>
                                @break
                            @case('proactive')
                                <i class="fa-solid fa-bullhorn text-[11px]"></i>
                                @break
                            @case('competition')
                                <i class="fa-solid fa-trophy text-[11px]"></i>
                                @break
                            @case('support')
                                <i class="fa-solid fa-headset text-[11px]"></i>
                                @break
                            @case('live')
                                <i class="fa-solid fa-tower-broadcast text-[11px]"></i>
                                @break

                            {{-- ADD: أيقونة سجل الأعذار --}}
                            @case('excuse')
                                <i class="fa-solid fa-file-circle-check text-[11px]"></i>
                                @break
                            {{-- END ADD --}}
                        @endswitch
                        <span>{{ $label }}</span>
                    </div>

                    @if($type === 'all')
                        <span class="hidden sm:inline text-[10px] text-white/80
                                     group-[&:not(.bg-sky-600)]:text-gray-500">
                            دمج كل أنواع النشاطات معًا
                        </span>
                    @endif

                    {{-- ADD: وصف صغير للأعذار --}}
                    @if($type === 'excuse')
                        <span class="hidden sm:inline text-[10px] text-white/80
                                     group-[&:not(.bg-sky-600)]:text-gray-500">
                            غيابات/أعذار معتمدة
                        </span>
                    @endif
                    {{-- END ADD --}}
                </a>
            @endforeach
        </div>
    </div>

    {{-- Flash messages --}}
    @if(session('success'))
        <div class="mb-4 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 px-4 py-2 rounded-xl text-xs sm:text-sm">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200 px-4 py-2 rounded-xl text-xs sm:text-sm">
            {{ session('error') }}
        </div>
    @endif

    {{-- زر إرسال تقرير واتساب --}}
    <form action="{{ route('superadmin.whatsapp.daily-report.send') }}" method="POST" class="inline-block mb-2">
        @csrf
        <button type="submit"
                class="inline-flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-lg shadow-sm transition">
            <i class="fa-solid fa-paper-plane ml-2"></i>
            إرسال تقرير اليوم للواتساب
        </button>
    </form>

    <!-- كارد النشاطات -->
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700">
        <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <h2 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                <i class="fa-solid fa-bolt text-yellow-500"></i>
                <span>
                    @switch($currentType)
                        @case('evaluation')          التقييمات الإدارية @break
                        @case('user_joined')         انضمام الأعضاء @break
                        @case('user_left')           خروج الأعضاء @break
                        @case('violation')           سجلات المخالفات @break
                        @case('violation_resolved')  مخالفات تم إغلاقها @break
                        @case('tip')                 نصائح المستشارين @break
                        @case('tip_reply')           ردود الأعضاء على النصائح @break
                        @case('member_care')         ملفات متابعة الأعضاء @break
                        @case('proactive')           نشاطات ProActive & Plus @break
                        @case('competition')         نشاطات المسابقات @break
                        @case('support')             تذاكر الدعم الفني @break
                        @case('live')                سجلات اللايفات (غرفة الصقر) @break

                        {{-- ADD: عنوان سجل الأعذار --}}
                        @case('excuse')              سجل الأعذار الرسمية @break
                        {{-- END ADD --}}

                        @default                     كل النشاطات الداخلية
                    @endswitch
                </span>
            </h2>
            <span class="text-xs text-gray-500 dark:text-gray-400">
                إجمالي: {{ $activities->total() }} سجل
            </span>
        </div>

        <div class="px-4 sm:px-6 py-4 sm:py-5">
            @if($activities->count() > 0)
                <div class="space-y-3 sm:space-y-4">
                    @foreach($activities as $activity)
                        @php
                            $type    = $activity['type'] ?? 'other';
                            $iconKey = $activity['icon'] ?? $type;
                        @endphp

                        <div class="flex items-start p-3 sm:p-4 bg-gray-50 dark:bg-gray-900/60 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors">
                            <!-- Icon -->
                            <div class="flex-shrink-0">
                                @switch($iconKey)
                                    @case('evaluation')
                                        <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/40 flex items-center justify-center">
                                            <i class="fa-solid fa-clipboard-check text-blue-600 dark:text-blue-400 text-sm"></i>
                                        </div>
                                        @break
                                    @case('user')
                                        <div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900/40 flex items-center justify-center">
                                            <i class="fa-solid fa-user-plus text-green-600 dark:text-green-400 text-sm"></i>
                                        </div>
                                        @break
                                    @case('user-left')
                                    @case('user_left')
                                        <div class="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                                            <i class="fa-solid fa-user-minus text-gray-700 dark:text-gray-200 text-sm"></i>
                                        </div>
                                        @break
                                    @case('warning')
                                        <div class="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/40 flex items-center justify-center">
                                            <i class="fa-solid fa-triangle-exclamation text-red-600 dark:text-red-400 text-sm"></i>
                                        </div>
                                        @break
                                    @case('check')
                                        <div class="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center">
                                            <i class="fa-solid fa-circle-check text-emerald-600 dark:text-emerald-400 text-sm"></i>
                                        </div>
                                        @break
                                    @case('tip')
                                        <div class="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/40 flex items-center justify-center">
                                            <i class="fa-solid fa-lightbulb text-amber-500 dark:text-amber-300 text-sm"></i>
                                        </div>
                                        @break
                                    @case('reply')
                                        <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center">
                                            <i class="fa-solid fa-reply text-indigo-600 dark:text-indigo-300 text-sm"></i>
                                        </div>
                                        @break
                                    @case('member-care')
                                    @case('member_care')
                                        <div class="w-10 h-10 rounded-full bg-pink-100 dark:bg-pink-900/40 flex items-center justify-center">
                                            <i class="fa-solid fa-heart-pulse text-pink-600 dark:text-pink-300 text-sm"></i>
                                        </div>
                                        @break
                                    @case('proactive')
                                    @case('proactive-plus')
                                        <div class="w-10 h-10 rounded-full bg-sky-100 dark:bg-sky-900/40 flex items-center justify-center">
                                            <i class="fa-solid fa-bullhorn text-sky-600 dark:text-sky-300 text-sm"></i>
                                        </div>
                                        @break
                                    @case('trophy')
                                        <div class="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900/40 flex items-center justify-center">
                                            <i class="fa-solid fa-trophy text-yellow-500 dark:text-yellow-300 text-sm"></i>
                                        </div>
                                        @break
                                    @case('support')
                                        <div class="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center">
                                            <i class="fa-solid fa-headset text-emerald-600 dark:text-emerald-300 text-sm"></i>
                                        </div>
                                        @break
                                    @case('live')
                                        <div class="w-10 h-10 rounded-full bg-sky-100 dark:bg-sky-900/40 flex items-center justify-center">
                                            <i class="fa-solid fa-tower-broadcast text-sky-600 dark:text-sky-300 text-sm"></i>
                                        </div>
                                        @break

                                    {{-- ADD: أيقونة الأعذار --}}
                                    @case('excuse')
                                        <div class="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/40 flex items-center justify-center">
                                            <i class="fa-solid fa-file-circle-check text-amber-600 dark:text-amber-300 text-sm"></i>
                                        </div>
                                        @break
                                    {{-- END ADD --}}

                                    @default
                                        <div class="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                                            <i class="fa-solid fa-circle-info text-gray-600 dark:text-gray-300 text-sm"></i>
                                        </div>
                                @endswitch
                            </div>

                            <!-- Content -->
                            <div class="mr-3 flex-grow min-w-0">
                                <div class="flex flex-wrap items-center justify-between gap-2 mb-1.5">
                                    <div class="flex items-center gap-2 min-w-0">
                                        <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">
                                            {{ $activity['title'] ?? 'نشاط إداري' }}
                                        </p>
                                        <span class="text-[10px] px-2 py-0.5 rounded-full
                                            @switch($type)
                                                @case('evaluation')          bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200 @break
                                                @case('user_joined')         bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-200 @break
                                                @case('user_left')           bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-100 @break
                                                @case('violation')           bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-200 @break
                                                @case('violation_resolved')  bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200 @break
                                                @case('tip')                 bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200 @break
                                                @case('tip_reply')           bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-200 @break
                                                @case('member_care')         bg-pink-100 text-pink-700 dark:bg-pink-900/40 dark:text-pink-200 @break
                                                @case('proactive')           bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-200 @break
                                                @case('competition')         bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-200 @break
                                                @case('support')             bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200 @break
                                                @case('live')                bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-200 @break

                                                {{-- ADD: لون بادج الأعذار --}}
                                                @case('excuse')              bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200 @break
                                                {{-- END ADD --}}

                                                @default                     bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200
                                            @endswitch">
                                            @switch($type)
                                                @case('evaluation')         تقييم @break
                                                @case('user_joined')        عضو جديد @break
                                                @case('user_left')          عضو خرج @break
                                                @case('violation')          مخالفة @break
                                                @case('violation_resolved') مخالفة مُغلقة @break
                                                @case('tip')                نصيحة @break
                                                @case('tip_reply')          رد على نصيحة @break
                                                @case('member_care')        ملف متابعة @break
                                                @case('proactive')          ProActive @break
                                                @case('competition')        مسابقة @break
                                                @case('support')            دعم فني @break
                                                @case('live')               سجل لايف @break

                                                {{-- ADD: نص بادج الأعذار --}}
                                                @case('excuse')             عذر رسمي @break
                                                {{-- END ADD --}}

                                                @default                    نشاط
                                            @endswitch
                                        </span>
                                    </div>
                                </div>

                                <p class="text-xs sm:text-sm text-gray-800 dark:text-gray-200 leading-relaxed break-words">
                                    {{ $activity['message'] }}
                                </p>

                                <p class="text-[11px] text-gray-500 dark:text-gray-400 mt-1 flex items-center">
                                    <svg class="w-3 h-3 ml-1" 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>
                                    {{ $activity['time'] }}
                                </p>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="mt-5 border-t border-gray-200 dark:border-gray-700 pt-3 sm:pt-4 flex flex-col sm:flex-row justify-between items-center gap-2 text-xs sm:text-sm">
                    <div class="text-gray-500 dark:text-gray-400">
                        عرض {{ $activities->firstItem() }} إلى {{ $activities->lastItem() }} من أصل {{ $activities->total() }} سجل
                    </div>
                    <div>
                        {{ $activities->withQueryString()->links() }}
                    </div>
                </div>
            @else
                <div class="text-center py-10">
                    <svg class="w-12 h-12 text-gray-400 dark:text-gray-500 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                    </svg>
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
                        لا توجد نشاطات تحت هذا الفلتر حالياً
                    </p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        جرّب العودة إلى "كل النشاطات" أو نفّذ نشاطات جديدة (تقييم، مخالفة، نصيحة، متابعة، لايفات...).
                    </p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection