@extends('layouts.member')
@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>
            <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>

    <!-- 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'] ?? 0 }}</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'] ?? 0 }}</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'] ?? 0 }}</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'] ?? 0 }}</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'] ?? 0 }}</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'] ?? 0 }}</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('member.violations.index') }}" class="space-y-4">
            <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>
                    <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('member.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() }} نتيجة
                    </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 Avatar -->
                            <div class="p-5 border-b border-gray-100 dark:border-gray-700">
                                <div class="flex items-center space-x-4 space-x-reverse">
                                    <!-- User Avatar -->
                                    <div class="relative">
                                        <img class="h-16 w-16 rounded-full object-cover border-3 border-white dark:border-gray-700 shadow-md" 
                                             src="{{ auth()->user()->avatar_url }}" 
                                             alt="{{ auth()->user()->name }}">
                                        
                                        @if(auth()->user()->is_online)
                                            <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></div>
                                        @else
                                            <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-gray-400 border-2 border-white dark:border-gray-800 rounded-full"></div>
                                        @endif
                                    </div>

                                    <!-- User Info -->
                                    <div class="flex-1 min-w-0">
                                        <h3 class="text-sm font-semibold text-gray-900 dark:text-white truncate">
                                            {{ auth()->user()->name }}
                                        </h3>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                                            @if(auth()->user()->username)
                                                {{ auth()->user()->username }}
                                            @else
                                                العضو
                                            @endif
                                        </p>
                                    </div>
                                </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('member.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>

                                </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');
}

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