@extends($layout)

@section('title', 'تفاصيل الإرسال')

@push('meta')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- Breadcrumb & Back Button -->
        <div class="mb-6">
            <div class="flex items-center gap-4 mb-4">
                <a href="{{ route('general.competitions.show', $submission->competition) }}" 
                   class="inline-flex items-center text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200">
                    <svg class="w-5 h-5 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    العودة للمسابقة
                </a>
            </div>
            
            <div class="mb-4">
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">تفاصيل الإرسال</h1>
                <p class="text-gray-600 dark:text-gray-400">{{ $submission->competition->title }}</p>
            </div>
        </div>

        <!-- Submission Header -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-8">
            <div class="p-6">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center gap-3">
                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
                            إرسال مشاركة
                        </h2>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ $submission->status_badge_class }}">
                            {{ $submission->status_text }}
                        </span>
                    </div>
                    
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                        {{ $submission->time_from_submission }}
                    </div>
                </div>

                <!-- Submission Info Grid -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                    <div>
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">تاريخ الإرسال:</span>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ $submission->formatted_submitted_at }}</p>
                    </div>
                    
                    @if($submission->reviewed_at)
                        <div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">تاريخ المراجعة:</span>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ $submission->formatted_reviewed_at }}</p>
                        </div>
                        
                        @if($submission->reviewer)
                            <div>
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">المراجع:</span>
                                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ $submission->reviewer->name }}</p>
                            </div>
                        @endif
                    @else
                        <div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">حالة المراجعة:</span>
                            <p class="text-sm text-yellow-600 dark:text-yellow-400 mt-1">في انتظار المراجعة</p>
                        </div>
                    @endif
                </div>

                <!-- Status Timeline -->
                <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">مراحل الإرسال</h3>
                    
                    <div class="flex items-center space-x-4 rtl:space-x-reverse">
                        <!-- Submitted -->
                        <div class="flex items-center">
                            <div class="flex items-center justify-center w-8 h-8 bg-green-100 dark:bg-green-900/20 rounded-full">
                                <svg class="w-4 h-4 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <span class="text-sm text-gray-700 dark:text-gray-300 mr-2">تم الإرسال</span>
                        </div>

                        <!-- Arrow -->
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>

                        <!-- Under Review -->
                        <div class="flex items-center">
                            <div class="flex items-center justify-center w-8 h-8 {{ $submission->status === 'pending' ? 'bg-yellow-100 dark:bg-yellow-900/20' : 'bg-green-100 dark:bg-green-900/20' }} rounded-full">
                                @if($submission->status === 'pending')
                                    <div class="w-3 h-3 bg-yellow-600 rounded-full animate-pulse"></div>
                                @else
                                    <svg class="w-4 h-4 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                @endif
                            </div>
                            <span class="text-sm text-gray-700 dark:text-gray-300 mr-2">
                                {{ $submission->status === 'pending' ? 'قيد المراجعة' : 'تمت المراجعة' }}
                            </span>
                        </div>

                        @if($submission->status !== 'pending')
                            <!-- Arrow -->
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                            </svg>

                            <!-- Final Status -->
                            <div class="flex items-center">
                                <div class="flex items-center justify-center w-8 h-8 {{ $submission->status === 'approved' ? 'bg-green-100 dark:bg-green-900/20' : 'bg-red-100 dark:bg-red-900/20' }} rounded-full">
                                    @if($submission->status === 'approved')
                                        <svg class="w-4 h-4 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                        </svg>
                                    @else
                                        <svg class="w-4 h-4 text-red-600 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                        </svg>
                                    @endif
                                </div>
                                <span class="text-sm text-gray-700 dark:text-gray-300 mr-2">{{ $submission->status_text }}</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Submission Content -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Description -->
                @if($submission->description)
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">وصف المشاركة</h3>
                        <div class="prose dark:prose-invert max-w-none">
                            <p class="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{{ $submission->description }}</p>
                        </div>
                    </div>
                @endif

                <!-- Attachments -->
                @if($submission->has_attachments)
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                            المرفقات ({{ $submission->attachment_count }})
                        </h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="attachments-grid">
                            <!-- Attachments will be loaded via JavaScript -->
                        </div>
                    </div>
                @endif

                <!-- Admin Feedback -->
                @if($submission->admin_feedback)
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">تعليق المراجع</h3>
                        <div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border-r-4 border-blue-400">
                            <p class="text-blue-900 dark:text-blue-200">{{ $submission->admin_feedback }}</p>
                            @if($submission->reviewer)
                                <p class="text-sm text-blue-700 dark:text-blue-300 mt-2">
                                    - {{ $submission->reviewer->name }}
                                </p>
                            @endif
                        </div>
                    </div>
                @endif
            </div>

            <!-- Sidebar -->
            <div class="space-y-6">
                <!-- Competition Info -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">معلومات المسابقة</h3>
                    
                    <div class="space-y-4">
                        <div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">العنوان:</span>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ $submission->competition->title }}</p>
                        </div>

                        <div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">الحالة:</span>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $submission->competition->status === 'active' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' }} mt-1 mr-2">
                                {{ $submission->competition->status_text }}
                            </span>
                        </div>

                        <div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">المنشئ:</span>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ $submission->competition->creator->name }}</p>
                        </div>
                    </div>
                </div>

                <!-- Submission Stats -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">إحصائيات الإرسال</h3>
                    
                    <div class="space-y-4">
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-700 dark:text-gray-300">رقم الإرسال:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">#{{ $submission->id }}</span>
                        </div>
                        
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-700 dark:text-gray-300">عدد المرفقات:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $submission->attachment_count }}</span>
                        </div>
                        
                        <div class="flex justify-between">
                            <span class="text-sm text-gray-700 dark:text-gray-300">وقت الإرسال:</span>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $submission->submitted_at->format('H:i') }}</span>
                        </div>

                        @if($submission->competition->has_end_date && $submission->competition->end_date)
                            <div class="flex justify-between">
                                <span class="text-sm text-gray-700 dark:text-gray-300">الإرسال:</span>
                                <span class="text-sm font-medium {{ $submission->isLate() ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400' }}">
                                    {{ $submission->isLate() ? 'متأخر' : 'في الوقت' }}
                                </span>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">إجراءات سريعة</h3>
                    
                    <div class="space-y-3">
                        <a href="{{ route('general.competitions.show', $submission->competition) }}" 
                           class="block w-full text-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200">
                            <svg class="w-4 h-4 inline ml-2" 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($submission->competition->can_submit && $submission->competition->participants()->where('user_id', auth()->id())->first()?->status !== 'disqualified')
                            <a href="{{ route('general.competitions.submit.form', $submission->competition) }}" 
                               class="block w-full text-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 font-medium rounded-lg transition duration-200">
                                <svg class="w-4 h-4 inline ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                </svg>
                                إرسال مشاركة جديدة
                            </a>
                        @endif

                        <a href="{{ route('general.competitions.index') }}" 
                           class="block w-full text-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 font-medium rounded-lg transition duration-200">
                            <svg class="w-4 h-4 inline ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                            </svg>
                            جميع المسابقات
                        </a>
                    </div>
                </div>

                <!-- Status Info -->
                @if($submission->status === 'pending')
                    <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
                        <div class="flex">
                            <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                            </svg>
                            <div class="mr-3">
                                <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">قيد المراجعة</h3>
                                <p class="text-sm text-yellow-700 dark:text-yellow-300 mt-1">إرسالك قيد المراجعة من قبل الإدارة</p>
                            </div>
                        </div>
                    </div>
                @elseif($submission->status === 'approved')
                    <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
                        <div class="flex">
                            <svg class="w-5 h-5 text-green-400 dark:text-green-300" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <div class="mr-3">
                                <h3 class="text-sm font-medium text-green-800 dark:text-green-200">تم الاعتماد</h3>
                                <p class="text-sm text-green-700 dark:text-green-300 mt-1">تم اعتماد مشاركتك بنجاح</p>
                            </div>
                        </div>
                    </div>
                @elseif($submission->status === 'rejected')
                    <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                        <div class="flex">
                            <svg class="w-5 h-5 text-red-400 dark:text-red-300" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                            <div class="mr-3">
                                <h3 class="text-sm font-medium text-red-800 dark:text-red-200">تم الرفض</h3>
                                <p class="text-sm text-red-700 dark:text-red-300 mt-1">تم رفض مشاركتك، راجع التعليقات</p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Image Preview Modal -->
<div id="image-modal" class="fixed inset-0 bg-gray-600 bg-opacity-75 overflow-y-auto h-full w-full z-50 hidden">
    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">معاينة المرفق</h3>
            <button onclick="closeImageModal()" 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"></path>
                </svg>
            </button>
        </div>
        <div class="text-center">
            <img id="modal-image" src="" alt="" class="max-w-full max-h-96 mx-auto rounded">
            <p id="modal-filename" class="text-sm text-gray-600 dark:text-gray-400 mt-2"></p>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    loadAttachments();
});

function loadAttachments() {
    fetch('{{ route("general.competitions.submission.attachments", $submission) }}')
        .then(response => response.json())
        .then(attachments => {
            const grid = document.getElementById('attachments-grid');
            if (!grid || attachments.length === 0) return;
            
            grid.innerHTML = '';
            
            attachments.forEach(attachment => {
                const attachmentDiv = document.createElement('div');
                attachmentDiv.className = 'border border-gray-200 dark:border-gray-600 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-200';
                
                const isImage = /\.(jpg|jpeg|png|gif|webp)$/i.test(attachment.filename);
                const isVideo = /\.(mp4|avi|mov|wmv)$/i.test(attachment.filename);
                const isAudio = /\.(mp3|wav|ogg|aac)$/i.test(attachment.filename);
                const isPdf = /\.pdf$/i.test(attachment.filename);
                const isDoc = /\.(doc|docx|txt)$/i.test(attachment.filename);
                
                let iconHtml = '';
                let previewAction = '';
                
                if (isImage) {
                    iconHtml = `
                        <svg class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                    `;
                    previewAction = `onclick="previewImage('${attachment.download_url}', '${attachment.filename}')"`;
                } else if (isVideo) {
                    iconHtml = `
                        <svg class="w-8 h-8 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                        </svg>
                    `;
                } else if (isAudio) {
                    iconHtml = `
                        <svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
                        </svg>
                    `;
                } else if (isPdf) {
                    iconHtml = `
                        <svg class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                        </svg>
                    `;
                } else if (isDoc) {
                    iconHtml = `
                        <svg class="w-8 h-8 text-blue-600 dark:text-blue-400" 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"></path>
                        </svg>
                    `;
                } else {
                    iconHtml = `
                        <svg class="w-8 h-8 text-gray-600 dark:text-gray-400" 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"></path>
                        </svg>
                    `;
                }
                
                attachmentDiv.innerHTML = `
                    <div class="flex items-center justify-between">
                        <div class="flex items-center flex-1 min-w-0" ${previewAction}>
                            <div class="flex-shrink-0 ${isImage ? 'cursor-pointer' : ''}">
                                ${iconHtml}
                            </div>
                            <div class="mr-3 min-w-0 flex-1">
                                <p class="text-sm font-medium text-gray-900 dark:text-white truncate ${isImage ? 'cursor-pointer' : ''}">
                                    ${attachment.filename}
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    ${formatFileSize(attachment.size)}
                                </p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2 rtl:space-x-reverse">
                            ${isImage ? `
                                <button onclick="previewImage('${attachment.download_url}', '${attachment.filename}')" 
                                        class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" 
                                        title="معاينة">
                                    <svg class="w-4 h-4" 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>
                                </button>
                            ` : ''}
                            <a href="${attachment.download_url}" 
                               class="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300" 
                               title="تحميل" download>
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                `;
                
                grid.appendChild(attachmentDiv);
            });
        })
        .catch(error => {
            console.error('Error loading attachments:', error);
        });
}

function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

function previewImage(url, filename) {
    const modal = document.getElementById('image-modal');
    const modalImage = document.getElementById('modal-image');
    const modalFilename = document.getElementById('modal-filename');
    
    modalImage.src = url;
    modalImage.alt = filename;
    modalFilename.textContent = filename;
    modal.classList.remove('hidden');
}

function closeImageModal() {
    const modal = document.getElementById('image-modal');
    modal.classList.add('hidden');
}

// Close modal on click outside
document.getElementById('image-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeImageModal();
    }
});

// Close modal on Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeImageModal();
    }
});
</script>

@endsection