@extends("layouts.{$layout}")

@section('title', 'تفاصيل الإشعار اليدوي')

@section('page-title', 'تفاصيل الإشعار اليدوي')

@section('content')
<div class="container mx-auto px-4 py-6 rtl">
    <!-- Page Header -->
    <div class="mb-6">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <div class="flex items-center gap-2 mb-2">
                    <a href="{{ route('manual-notifications.index') }}" 
                       class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200">
                        <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 19l-7-7 7-7"></path>
                        </svg>
                    </a>
                    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">تفاصيل الإشعار اليدوي</h1>
                    @if(!$recipient->read)
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                            جديد
                        </span>
                    @endif
                </div>
                <p class="text-gray-600 dark:text-gray-400">عرض تفاصيل الإشعار اليدوي المرسل إليك</p>
            </div>
            
            <div class="flex flex-col sm:flex-row gap-2">
                @if(!$recipient->read)
                    <button type="button" 
                            onclick="markAsRead({{ $notification->id }})"
                            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">
                        <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="M5 13l4 4L19 7"></path>
                        </svg>
                        تعليم كمقروء
                    </button>
                @endif
            </div>
        </div>
    </div>

    <!-- Notification Content Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <div class="flex justify-between items-center">
                <h2 class="text-xl font-bold text-gray-900 dark:text-white">{{ $notification->title }}</h2>
                <div class="flex items-center space-x-2 space-x-reverse">
                    @if($recipient->read)
                        <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200">
                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            مقروء
                        </span>
                    @else
                        <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200">
                            <svg class="w-4 h-4 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"></path>
                            </svg>
                            غير مقروء
                        </span>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="p-6">
            <!-- Content -->
            <div class="mb-6">
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                    <p class="text-gray-900 dark:text-white leading-relaxed whitespace-pre-wrap">{{ $notification->content }}</p>
                </div>
            </div>

            <!-- Attachment Section -->
            @if($notification->attachment)
                <div class="mb-6 p-4 border border-gray-200 dark:border-gray-600 rounded-lg">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">المرفق</h3>
                        <span class="text-sm text-gray-500 dark:text-gray-400">{{ $notification->attachment }}</span>
                    </div>
                    
                    <div class="flex items-center space-x-3 space-x-reverse">
                        @if($notification->isAttachmentImage())
                            <button onclick="viewAttachment({{ $notification->id }})" 
                                    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">
                                <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 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>
                                عرض الصورة
                            </button>
                        @endif
                        
                        <a href="{{ route('manual-notifications.attachment.download', $notification) }}" 
                           class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                            <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 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>
            @endif

            <!-- Meta Information -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">مرسل من</label>
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center ml-3">
                            <span class="text-xs font-medium text-blue-600 dark:text-blue-400">
                                {{ substr($notification->creator->name, 0, 1) }}
                            </span>
                        </div>
                        <p class="text-gray-900 dark:text-white font-medium">{{ $notification->creator->name }}</p>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">تاريخ الإرسال</label>
                    <p class="text-gray-900 dark:text-white">
                        {{ $notification->sent_at ? $notification->sent_at->format('Y/m/d H:i') : $notification->created_at->format('Y/m/d H:i') }}
                    </p>
                </div>
                
                @if($recipient->read)
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">تاريخ القراءة</label>
                        <p class="text-green-600 dark:text-green-400">{{ $recipient->read_at->format('Y/m/d H:i') }}</p>
                    </div>
                @endif
                
                @if($recipient->last_interaction_at)
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">آخر تفاعل</label>
                        <p class="text-gray-900 dark:text-white">{{ $recipient->last_interaction_at->format('Y/m/d H:i') }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Notes Section -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">ملاحظاتي على الإشعار</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">يمكنك إضافة ملاحظاتك الخاصة بشأن هذا الإشعار</p>
        </div>
        
        <div class="p-6">
            <form id="notes-form">
                @csrf
                <div class="mb-4">
                    <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">الملاحظات</label>
                    <textarea id="notes" 
                              name="notes" 
                              rows="4"
                              placeholder="اكتب ملاحظاتك هنا... (اختياري)"
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">{{ $recipient->recipient_notes }}</textarea>
                    <div id="notes-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>
                
                <div class="flex items-center justify-between">
                    <button type="submit" 
                            id="save-notes-btn"
                            class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
                        <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="M5 13l4 4L19 7"></path>
                        </svg>
                        <span id="save-notes-text">حفظ الملاحظات</span>
                    </button>
                    
                    @if($recipient->recipient_notes)
                        <div class="text-sm text-gray-500 dark:text-gray-400">
                            آخر تحديث: {{ $recipient->updated_at->format('Y/m/d H:i') }}
                        </div>
                    @endif
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Attachment Preview Modal -->
<div id="attachment-preview-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-2xl max-w-4xl w-full max-h-[90vh] flex flex-col shadow-2xl">
        <!-- Header -->
        <div class="flex justify-between items-center px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
            <h3 id="preview-title" class="text-xl font-bold text-gray-900 dark:text-white">معاينة المرفق</h3>
            <button type="button" 
                    onclick="closePreviewModal()"
                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                <svg class="w-7 h-7" 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>
        
        <!-- Content -->
        <div id="preview-content" class="p-6 overflow-auto flex-1 flex items-center justify-center">
            <!-- المحتوى سيتم ملؤه بواسطة JavaScript -->
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Notes form handling
    const notesForm = document.getElementById('notes-form');
    const saveNotesBtn = document.getElementById('save-notes-btn');
    const saveNotesText = document.getElementById('save-notes-text');
    const notesError = document.getElementById('notes-error');

    if (notesForm) {
        notesForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const notes = document.getElementById('notes').value.trim();
            
            // Clear previous errors
            notesError.classList.add('hidden');
            notesError.textContent = '';
            
            if (!notes) {
                showError('notes', 'يرجى كتابة ملاحظاتك أولاً');
                return;
            }
            
            // Show loading state
            saveNotesBtn.disabled = true;
            saveNotesText.textContent = 'جار الحفظ...';
            
            fetch('{{ route("manual-notifications.update-notes", $notification) }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    notes: notes
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert('نجح', data.message, 'success');
                    // Update timestamp or refresh specific elements if needed
                } else {
                    if (data.errors) {
                        Object.keys(data.errors).forEach(field => {
                            showError(field, data.errors[field][0]);
                        });
                    }
                    showAlert('خطأ', data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('خطأ', 'حدث خطأ أثناء حفظ الملاحظات', 'error');
            })
            .finally(() => {
                saveNotesBtn.disabled = false;
                saveNotesText.textContent = 'حفظ الملاحظات';
            });
        });
    }
});

// Mark notification as read
function markAsRead(notificationId) {
    fetch(`/manual-notifications/${notificationId}/mark-read`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('نجح', data.message, 'success');
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('خطأ', data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('خطأ', 'حدث خطأ أثناء تعليم الإشعار كمقروء', 'error');
    });
}

// View attachment
function viewAttachment(notificationId) {
    fetch(`/manual-notifications/${notificationId}/attachment`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                const previewContent = document.getElementById('preview-content');
                document.getElementById('preview-title').textContent = `معاينة مرفق: ${data.data.title}`;
                
                if (data.data.is_image) {
                    previewContent.innerHTML = `
                        <div class="w-full h-full flex items-center justify-center">
                            <img src="${data.data.attachment_url}" 
                                 alt="مرفق الإشعار" 
                                 class="max-w-full max-h-[65vh] w-auto h-auto object-contain rounded-lg shadow-2xl">
                        </div>
                    `;
                } else {
                    previewContent.innerHTML = `
                        <div class="text-center py-12">
                            <svg class="mx-auto h-16 w-16 text-gray-400 dark:text-gray-500" 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>
                            <p class="mt-4 text-lg text-gray-600 dark:text-gray-400 font-medium">ملف غير قابل للمعاينة</p>
                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-500">${data.data.filename || 'ملف مرفق'}</p>
                            <a href="/manual-notifications/${notificationId}/attachment/download" 
                               target="_blank" 
                               class="mt-4 inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition duration-200">
                                <svg class="w-4 h-4 ml-2" 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>
                    `;
                }
                
                document.getElementById('attachment-preview-modal').classList.remove('hidden');
            } else {
                showAlert('خطأ', data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('خطأ', 'حدث خطأ أثناء عرض المرفق', 'error');
        });
}

// Close preview modal
function closePreviewModal() {
    document.getElementById('attachment-preview-modal').classList.add('hidden');
}

// Show error function
function showError(field, message) {
    const errorDiv = document.getElementById(`${field}-error`);
    if (errorDiv) {
        errorDiv.textContent = message;
        errorDiv.classList.remove('hidden');
    }
}

// Show alert function
function showAlert(title, message, type) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `fixed top-4 right-4 z-[10000] p-4 rounded-lg shadow-lg max-w-md transition-all duration-300 ${
        type === 'success' ? 'bg-green-100 text-green-800 border border-green-200' :
        type === 'error' ? 'bg-red-100 text-red-800 border border-red-200' :
        'bg-blue-100 text-blue-800 border border-blue-200'
    }`;
    alertDiv.innerHTML = `
        <div class="flex items-center">
            <div class="flex-1">
                <h4 class="font-semibold">${title}</h4>
                <p class="text-sm">${message}</p>
            </div>
            <button type="button" class="mr-2 text-gray-500 hover:text-gray-700" onclick="this.parentElement.parentElement.remove()">
                <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="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
    `;
    
    document.body.appendChild(alertDiv);
    
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.style.transform = 'translateX(100%)';
            alertDiv.style.opacity = '0';
            setTimeout(() => {
                alertDiv.remove();
            }, 300);
        }
    }, 5000);
}
</script>

@endsection