@extends('layouts.moderator')
@section('title', 'إدارة المخالفات والإنذارات - المشرف')

@section('content')
<div class="container mx-auto px-4 py-6 rtl">
    @if(session('success'))
        <div class="mb-4 alert alert-success text-green-800 bg-green-100 border border-green-200 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>
            {{ session('success') }}
        </div>
    @endif

    <!-- Header -->
    <div class="mb-6">
        <div class="flex flex-col gap-4">
            <!-- العنوان -->
            <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">
                    إدارة المخالفات والإنذارات للأعضاء 
                    @if(auth()->user()->gender === 'male')
                        <span class="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 rounded-full text-sm font-medium">
                            الذكور
                        </span>
                    @else
                        <span class="inline-flex items-center px-2 py-1 bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200 rounded-full text-sm font-medium">
                            الإناث
                        </span>
                    @endif
                </p>
            </div>
            
            <!-- أزرار التحكم -->
            <div class="flex flex-col sm:flex-row gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                <a href="{{ route('moderator.violations.create') }}" 
                   class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 flex-1 sm:flex-none justify-center">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    إنشاء مخالفة/إنذار جديد
                </a>
                <button onclick="printReport()" class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition duration-200 flex-1 sm:flex-none justify-center">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                    </svg>
                    طباعة التقرير
                </button>
            </div>
        </div>
    </div>

<!-- Statistics Cards -->
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 mb-6">
    <!-- إجمالي الأحداث -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-blue-400">
        <div class="text-center">
            <div class="flex justify-center mb-2">
                <div class="p-3 bg-blue-100 dark:bg-blue-900 rounded-full">
                    <svg class="w-6 h-6 text-blue-600 dark:text-blue-300" 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>
                </div>
            </div>
            <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['total'] }}</div>
            <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">إجمالي الأحداث</div>
        </div>
    </div>

    <!-- الإنذارات -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-yellow-400">
        <div class="text-center">
            <div class="flex justify-center mb-2">
                <div class="p-3 bg-yellow-100 dark:bg-yellow-900 rounded-full">
                    <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.962-.833-2.732 0L3.268 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                    </svg>
                </div>
            </div>
            <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{{ $stats['warnings'] }}</div>
            <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">الإنذارات</div>
        </div>
    </div>

    <!-- المخالفات -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-red-400">
        <div class="text-center">
            <div class="flex justify-center mb-2">
                <div class="p-3 bg-red-100 dark:bg-red-900 rounded-full">
                    <svg class="w-6 h-6 text-red-600 dark:text-red-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
            <div class="text-2xl font-bold text-red-600 dark:text-red-400">{{ $stats['violations'] }}</div>
            <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">المخالفات</div>
        </div>
    </div>

    <!-- النشطة -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-orange-400">
        <div class="text-center">
            <div class="flex justify-center mb-2">
                <div class="p-3 bg-orange-100 dark:bg-orange-900 rounded-full">
                    <svg class="w-6 h-6 text-orange-600 dark:text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                    </svg>
                </div>
            </div>
            <div class="text-2xl font-bold text-orange-600 dark:text-orange-400">{{ $stats['active'] }}</div>
            <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">النشطة</div>
        </div>
    </div>

    <!-- المؤكدة -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-green-400">
        <div class="text-center">
            <div class="flex justify-center mb-2">
                <div class="p-3 bg-green-100 dark:bg-green-900 rounded-full">
                    <svg class="w-6 h-6 text-green-600 dark:text-green-300" 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 class="text-2xl font-bold text-green-600 dark:text-green-400">{{ $stats['resolved'] }}</div>
            <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">المؤكدة</div>
        </div>
    </div>

    <!-- التلقائية -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-purple-400">
        <div class="text-center">
            <div class="flex justify-center mb-2">
                <div class="p-3 bg-purple-100 dark:bg-purple-900 rounded-full">
                    <svg class="w-6 h-6 text-purple-600 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </div>
            </div>
            <div class="text-2xl font-bold text-purple-600 dark:text-purple-400">{{ $stats['automatic'] }}</div>
            <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">التلقائية</div>
        </div>
    </div>
</div>


    <!-- فلتر البحث -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-6 p-6 border border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">فلتر البحث والتصفية</h3>
        <form method="GET" action="{{ route('moderator.violations.index') }}" class="space-y-4">
            <!-- فلتر مصدر المخالفة -->
            <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border-2 border-gray-200 dark:border-gray-600">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                    <svg class="w-5 h-5 inline ml-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
                    </svg>
                    مصدر المخالفات والإنذارات
                </label>
                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
                    <label class="flex items-center p-3 bg-white dark:bg-gray-800 rounded-lg border-2 border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-200">
                        <input type="radio" name="violation_source" value="all" 
                               {{ ($violationSource ?? 'all') == 'all' ? 'checked' : '' }} 
                               class="mr-3 text-blue-600 border-gray-300 focus:ring-blue-500">
                        <div>
                            <div class="font-medium text-gray-900 dark:text-white">جميع المخالفات</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400">مخالفاتي + أعضاء فريقي + المستلمة</div>
                        </div>
                    </label>
                    <label class="flex items-center p-3 bg-white dark:bg-gray-800 rounded-lg border-2 border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-200">
                        <input type="radio" name="violation_source" value="my_violations" 
                               {{ ($violationSource ?? 'all') == 'my_violations' ? 'checked' : '' }} 
                               class="mr-3 text-blue-600 border-gray-300 focus:ring-blue-500">
                        <div>
                            <div class="font-medium text-gray-900 dark:text-white">مخالفاتي فقط</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400">المخالفات التي أنشأتها</div>
                        </div>
                    </label>
                    <label class="flex items-center p-3 bg-white dark:bg-gray-800 rounded-lg border-2 border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-200">
                        <input type="radio" name="violation_source" value="team_violations" 
                               {{ ($violationSource ?? 'all') == 'team_violations' ? 'checked' : '' }} 
                               class="mr-3 text-blue-600 border-gray-300 focus:ring-blue-500">
                        <div>
                            <div class="font-medium text-gray-900 dark:text-white">مخالفات أعضاء فريقي</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400">للأعضاء من نفس الجنس فقط</div>
                        </div>
                    </label>
                    <label class="flex items-center p-3 bg-white dark:bg-gray-800 rounded-lg border-2 border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-200">
                        <input type="radio" name="violation_source" value="my_received_violations" 
                               {{ ($violationSource ?? 'all') == 'my_received_violations' ? 'checked' : '' }} 
                               class="mr-3 text-red-600 border-gray-300 focus:ring-red-500">
                        <div>
                            <div class="font-medium text-gray-900 dark:text-white flex items-center">
                                <svg class="w-4 h-4 text-red-500 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.962-.833-2.732 0L3.268 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                                </svg>
                                مخالفاتي المستلمة
                            </div>
                            <div class="text-sm text-gray-600 dark:text-gray-400">من الإدارة العليا</div>
                        </div>
                    </label>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                <!-- نوع الحدث -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">نوع الحدث</label>
                    <select name="type" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-200">
                        <option value="">كل الأنواع</option>
                        <option value="warning" {{ request('type') == 'warning' ? 'selected' : '' }}>إنذارات</option>
                        <option value="violation" {{ request('type') == 'violation' ? 'selected' : '' }}>مخالفات</option>
                    </select>
                </div>

                <!-- الحالة -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">الحالة</label>
                    <select name="status" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-200">
                        <option value="">كل الحالات</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>نشط</option>
                        <option value="resolved" {{ request('status') == 'resolved' ? 'selected' : '' }}>مؤكد</option>
                    </select>
                </div>

                <!-- العضو -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">العضو</label>
                    <select name="user_id" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-200">
                        <option value="">كل الأعضاء</option>
                        @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                {{ $user->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- الفترة الزمنية -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">الفترة الزمنية</label>
                    <select name="period" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-200">
                        <option value="">كل الفترات</option>
                        <option value="today" {{ request('period') == 'today' ? 'selected' : '' }}>اليوم</option>
                        <option value="week" {{ request('period') == 'week' ? 'selected' : '' }}>هذا الأسبوع</option>
                        <option value="month" {{ request('period') == 'month' ? 'selected' : '' }}>هذا الشهر</option>
                    </select>
                </div>

                <!-- تاريخ من -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">من تاريخ</label>
                    <input type="date" name="date_from" value="{{ request('date_from') }}" 
                           class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-200">
                </div>

                <!-- تاريخ إلى -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">إلى تاريخ</label>
                    <input type="date" name="date_to" value="{{ request('date_to') }}" 
                           class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-200">
                </div>

                <!-- البحث النصي -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">البحث</label>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="البحث في العنوان أو الوصف" 
                           class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-200">
                </div>

                <!-- نوع الإنشاء -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">نوع الإنشاء</label>
                    <select name="is_automatic" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-200">
                        <option value="">كل الأنواع</option>
                        <option value="0" {{ request('is_automatic') === '0' ? 'selected' : '' }}>يدوي</option>
                        <option value="1" {{ request('is_automatic') === '1' ? 'selected' : '' }}>تلقائي</option>
                    </select>
                </div>
            </div>

            <!-- أزرار الإجراءات -->
            <div class="flex flex-wrap gap-3 pt-4">
                <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 shadow-sm hover:shadow-md">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    بحث وتصفية
                </button>
                <a href="{{ route('moderator.violations.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white font-medium rounded-lg transition duration-200 shadow-sm hover:shadow-md">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                    </svg>
                    إعادة تعيين
                </a>
            </div>
        </form>
    </div>

    <!-- عرض النتائج بنظام الكاردات -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">قائمة المخالفات والإنذارات</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        عدد النتائج: {{ $violations->total() }} نتيجة
                        @if(isset($violationSource) && $violationSource !== 'all')
                            - عرض: 
                            @if($violationSource == 'my_violations')
                                <span class="font-medium text-blue-600">مخالفاتي فقط</span>
                            @elseif($violationSource == 'team_violations')
                                <span class="font-medium text-green-600">مخالفات أعضاء فريقي</span>
                            @elseif($violationSource == 'my_received_violations')
                                <span class="font-medium text-red-600">مخالفاتي المستلمة من الإدارة العليا</span>
                            @endif
                        @endif
                    </p>
                </div>
            </div>
        </div>

        @if($violations->count() > 0)
            <!-- Cards Grid - 3 columns -->
            <div class="p-6 bg-gray-50 dark:bg-gray-900">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach ($violations as $violation)
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-all duration-300">
                            <!-- Card Header with Member Avatars -->
                            <div class="p-5 border-b border-gray-100 dark:border-gray-700">
                                <div class="flex items-center space-x-2 space-x-reverse mb-3">
                              @foreach($violation->members->take(3) as $index => $member)
    <div class="relative {{ $index > 0 ? '-mr-3' : '' }}" style="z-index: {{ 10 - $index }}">
        @if($member->user)
            <img class="h-12 w-12 rounded-full object-cover border-3 border-white dark:border-gray-700 shadow-md" 
                 src="{{ $member->user->avatar_url }}" 
                 alt="{{ $member->user->name }}">
            
            @if($member->user->is_online)
                <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></div>
            @else
                <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-gray-400 border-2 border-white dark:border-gray-800 rounded-full"></div>
            @endif
        @else
            <div class="h-12 w-12 rounded-full bg-gradient-to-br from-gray-400 to-gray-600 flex items-center justify-center shadow-md border-3 border-white dark:border-gray-700">
                <svg class="w-6 h-6 text-white" 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>
@endforeach

                                    @if($violation->members->count() > 3)
                                        <div class="h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-600 dark:text-blue-300 font-bold text-sm border-3 border-white dark:border-gray-700 shadow-md -mr-3">
                                            +{{ $violation->members->count() - 3 }}
                                        </div>
                                    @endif
                                </div>

                                <!-- Members Names -->
                                <div class="text-sm text-gray-600 dark:text-gray-400">
                                    @foreach($violation->members->take(2) as $member)
                                        <span class="inline-block">{{ $member->user->name ?? 'مستخدم محذوف' }}</span>{{ !$loop->last ? '، ' : '' }}
                                    @endforeach
                                    @if($violation->members->count() > 2)
                                        <span class="text-blue-600 dark:text-blue-400"> +{{ $violation->members->count() - 2 }} آخرون</span>
                                    @endif
                                </div>
                            </div>

                            <!-- Card Body -->
                            <div class="p-5 space-y-3 bg-white dark:bg-gray-800">
                                <!-- Title and Badges -->
                                <div>
                                    <div class="flex flex-wrap gap-2 mb-2">
                                        @if($violation->type === 'warning')
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
                                                <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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.962-.833-2.732 0L3.268 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                                                </svg>
                                                إنذار
                                            </span>
                                        @else
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                                                <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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                                </svg>
                                                مخالفة
                                            </span>
                                        @endif
                                        
                                        @if($violation->status === 'active')
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
                                                نشط
                                            </span>
                                        @else
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                                مؤكد
                                            </span>
                                        @endif

                                        @if($violation->is_automatic)
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
                                                تلقائي
                                            </span>
                                        @endif
                                    </div>

                                    <h4 class="text-base font-bold text-gray-900 dark:text-white line-clamp-2">
                                        {{ Str::limit($violation->title, 60) }}
                                    </h4>
                                </div>

                                <!-- Info Grid -->
                                <div class="grid grid-cols-2 gap-3 pt-2">
                                    <div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                        <div class="text-xs text-gray-600 dark:text-gray-400 mb-1">النقاط المخصومة</div>
                                        @if($violation->points_deducted > 0)
                                            <div class="text-lg font-bold text-red-600 dark:text-red-400">
                                                -{{ $violation->points_deducted }}
                                            </div>
                                        @else
                                            <div class="text-sm text-gray-500">لا يوجد</div>
                                        @endif
                                    </div>

                                    <div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                        <div class="text-xs text-gray-600 dark:text-gray-400 mb-1">التاريخ</div>
                                        <div class="text-sm font-bold text-gray-900 dark:text-white">
                                            {{ $violation->created_at->format('Y/m/d') }}
                                        </div>
                                    </div>
                                </div>

                                <!-- Creator -->
                                <div class="flex items-center justify-between text-sm pt-2">
                                    <span class="text-gray-600 dark:text-gray-400">المنشئ:</span>
                                    <span class="font-medium text-gray-900 dark:text-white">
                                        {{ $violation->creator_display_name }}
                                    </span>
                                </div>
                            </div>

                            <!-- Card Footer - Actions -->
                            <div class="px-5 py-3 bg-gray-50 dark:bg-gray-700/30 border-t border-gray-100 dark:border-gray-700 rounded-b-xl">
                                <div class="flex items-center justify-center space-x-3 space-x-reverse">
                                    <!-- View -->
                                    <a href="{{ route('moderator.violations.show', $violation) }}" 
                                       class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors p-1.5 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg"
                                       title="عرض التفاصيل">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                        </svg>
                                    </a>

                                    @if($violation->created_by === auth()->id() && $violation->status === 'active')
                                    <!-- Edit -->
                                    <a href="{{ route('moderator.violations.edit', $violation) }}" 
                                       class="text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 transition-colors p-1.5 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg"
                                       title="تعديل">
                                        <svg class="w-5 h-5" 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"></path>
                                        </svg>
                                    </a>

                                    <!-- Delete -->
                                    <button onclick="deleteViolation({{ $violation->id }})" 
                                            class="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors p-1.5 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg"
                                            title="حذف">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                        </svg>
                                    </button>
                                    @endif

                                    @if($violation->attachment)
                                    <!-- Attachment -->
                                    <button onclick="showAttachment('{{ $violation->id }}', '{{ asset('storage/' . $violation->attachment) }}')" 
                                            class="text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300 transition-colors p-1.5 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-lg"
                                            title="عرض المرفق">
                                        <svg class="w-5 h-5" 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>
                                    </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Pagination -->
            @if($violations->hasPages())
            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
                <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                    <div>
                        <p class="text-sm text-gray-700 dark:text-gray-300">
                            عرض {{ $violations->firstItem() }} إلى {{ $violations->lastItem() }} 
                            من أصل {{ $violations->total() }} نتيجة
                        </p>
                    </div>
                    <div>
                        {{ $violations->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
            @endif
        @else
            <div class="text-center py-12 bg-white dark:bg-gray-800">
                <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>
        @endif
    </div>
</div>

<!-- Modal لعرض المرفقات -->
<div id="attachmentModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-10 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-2/3 xl:w-1/2 shadow-lg rounded-lg bg-white dark:bg-gray-800 max-h-screen overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">عرض المرفق</h3>
            <button onclick="closeAttachmentModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                <svg class="w-6 h-6" 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>
        </div>
        
        <div id="attachmentContent" class="text-center">
            <!-- سيتم تحميل المحتوى ديناميكياً -->
        </div>
        
        <div class="flex justify-center gap-3 mt-4">
            <button onclick="closeAttachmentModal()" class="px-4 py-2 bg-gray-300 hover:bg-gray-400 text-gray-800 rounded-lg transition duration-200">
                إغلاق
            </button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// عرض المرفق
function showAttachment(violationId, attachmentUrl) {
    const modal = document.getElementById('attachmentModal');
    const content = document.getElementById('attachmentContent');
    
    const fileExtension = attachmentUrl.split('.').pop().toLowerCase();
    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
    const pdfExtensions = ['pdf'];
    
    let attachmentHtml = '';
    
    if (imageExtensions.includes(fileExtension)) {
        attachmentHtml = `
            <div class="max-w-full">
                <img src="${attachmentUrl}" alt="مرفق المخالفة" class="max-w-full h-auto rounded-lg shadow-lg mx-auto" style="max-height: 70vh;">
            </div>
        `;
    } else if (pdfExtensions.includes(fileExtension)) {
        attachmentHtml = `
            <div class="w-full h-96">
                <iframe src="${attachmentUrl}" class="w-full h-full border rounded-lg" frameborder="0">
                    <p>متصفحك لا يدعم عرض PDF. <a href="${attachmentUrl}" target="_blank" class="text-blue-600 hover:text-blue-800">اضغط هنا للتحميل</a></p>
                </iframe>
            </div>
        `;
    } else {
        attachmentHtml = `
            <div class="text-center py-8">
                <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" 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>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">ملف غير قابل للعرض</h3>
                <p class="text-gray-600 dark:text-gray-400 mb-4">هذا النوع من الملفات لا يمكن عرضه في المتصفح</p>
                <a href="${attachmentUrl}" target="_blank" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition duration-200">
                    تحميل الملف
                </a>
            </div>
        `;
    }
    
    content.innerHTML = attachmentHtml;
    modal.classList.remove('hidden');
}

function closeAttachmentModal() {
    document.getElementById('attachmentModal').classList.add('hidden');
}

async function deleteViolation(violationId) {
    if (!confirm('هل أنت متأكد من رغبتك في حذف هذه المخالفة/الإنذار?\n\nسيتم إرجاع النقاط المخصومة للأعضاء إن وجدت.')) {
        return;
    }
    
    try {
        const response = await fetch(`/moderator/violations/${violationId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('error', data.message || 'حدث خطأ أثناء حذف المخالفة');
        }
    } catch (error) {
        console.error('Error:', error);
        showAlert('error', 'حدث خطأ في الاتصال بالخادم');
    }
}

function printReport() {
    const currentUrl = new URL(window.location);
    const printUrl = '{{ route("moderator.violations.print") }}?' + currentUrl.searchParams.toString();
    window.open(printUrl, '_blank');
}

function showAlert(type, message) {
    const alertClass = {
        'success': 'bg-green-100 border-green-500 text-green-700',
        'error': 'bg-red-100 border-red-500 text-red-700',
        'warning': 'bg-yellow-100 border-yellow-500 text-yellow-700',
        'info': 'bg-blue-100 border-blue-500 text-blue-700'
    };
    
    const alert = document.createElement('div');
    alert.className = `fixed top-4 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded border-l-4 ${alertClass[type]} shadow-lg max-w-md w-full mx-4`;
    alert.innerHTML = `
        <div class="flex items-center justify-between">
            <span>${message}</span>
            <button onclick="this.parentElement.parentElement.remove()" class="mr-2 font-bold text-lg">&times;</button>
        </div>
    `;
    
    document.body.appendChild(alert);
    
    setTimeout(() => {
        if (alert.parentNode) {
            alert.parentNode.removeChild(alert);
        }
    }, 5000);
}

document.addEventListener('click', function(event) {
    const attachmentModal = document.getElementById('attachmentModal');
    
    if (event.target === attachmentModal) {
        closeAttachmentModal();
    }
});
</script>
@endpush