@extends('layouts.superadmin')

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

@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">
        <!-- Page Header -->
        <div class="mb-6">
            <div class="flex items-center gap-4 mb-4">
                <a href="{{ route('superadmin.notifications.index') }}" 
                   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>
            <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>

        <!-- Form Container -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">تعديل بيانات الإشعار</h2>
            </div>

            <form id="notification-edit-form" enctype="multipart/form-data" class="p-6">
                @csrf
                @method('PUT')
                
                <!-- Title -->
                <div class="mb-6">
                    <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        عنوان الإشعار <span class="text-red-500">*</span>
                    </label>
                    <input type="text" 
                           id="title" 
                           name="title" 
                           required
                           value="{{ old('title', $notification->title) }}"
                           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"
                           placeholder="أدخل عنوان الإشعار...">
                    <div id="title-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Content -->
                <div class="mb-6">
                    <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        محتوى الإشعار <span class="text-red-500">*</span>
                    </label>
                    <textarea id="content" 
                              name="content" 
                              rows="6"
                              required
                              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"
                              placeholder="أدخل محتوى الإشعار...">{{ old('content', $notification->content) }}</textarea>
                    <div id="content-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Recipient Type Selection -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">اختر نوع المستلمين</label>
                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
                        <button type="button" onclick="selectRecipientType('all')" 
                                class="recipient-type-btn flex flex-col items-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition duration-200"
                                data-type="all">
                            <svg class="w-6 h-6 text-gray-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                            </svg>
                            <span class="text-xs text-center">جميع المستخدمين</span>
                        </button>
                        
                        <button type="button" onclick="selectRecipientType('moderators')" 
                                class="recipient-type-btn flex flex-col items-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition duration-200"
                                data-type="moderators">
                            <svg class="w-6 h-6 text-purple-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                            </svg>
                            <span class="text-xs text-center">المشرفين</span>
                        </button>
                        
                        <button type="button" onclick="selectRecipientType('official_members')" 
                                class="recipient-type-btn flex flex-col items-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-indigo-500 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition duration-200"
                                data-type="official_members">
                            <svg class="w-6 h-6 text-indigo-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                            </svg>
                            <span class="text-xs text-center">الأعضاء الرسميين</span>
                        </button>
                        
                        <button type="button" onclick="selectRecipientType('beta_members')" 
                                class="recipient-type-btn flex flex-col items-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-orange-500 hover:bg-orange-50 dark:hover:bg-orange-900/20 transition duration-200"
                                data-type="beta_members">
                            <svg class="w-6 h-6 text-orange-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path>
                            </svg>
                            <span class="text-xs text-center">أعضاء بيتا</span>
                        </button>

                        <button type="button" onclick="selectRecipientType('specific_users')" 
                                class="recipient-type-btn flex flex-col items-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 transition duration-200"
                                data-type="specific_users">
                            <svg class="w-6 h-6 text-green-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"></path>
                            </svg>
                            <span class="text-xs text-center">أشخاص محددين</span>
                        </button>
                    </div>
                    <input type="hidden" id="selectedRecipientType" name="recipient_type" value="{{ $notification->recipient_type }}">
                    <div id="recipient_type-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- User Selection -->
                <div class="mb-6" id="userSelectionDiv" style="display: {{ $notification->recipient_type === 'specific_users' ? 'block' : 'none' }};">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        اختر المستلمين <span class="text-red-500">*</span>
                    </label>
                    
                    <!-- Search Input -->
                    <div class="mb-4">
                        <input type="text" 
                               id="user-search" 
                               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">
                    </div>

                    <!-- Users List -->
                    <div id="users-list" class="space-y-2 max-h-64 overflow-y-auto border border-gray-200 dark:border-gray-600 rounded-md p-4">
                        <div class="text-sm text-gray-500 dark:text-gray-400 text-center" id="no-users-available">
                            جارِ تحميل المستخدمين...
                        </div>
                    </div>

                    <!-- Selected Count -->
                    <div class="mt-3">
                        <span id="selected-count" class="text-sm text-gray-600 dark:text-gray-400">
                            عدد المحددين: 0
                        </span>
                    </div>
                    
                    <div id="users-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Attachment -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        المرفق (اختياري)
                    </label>
                    
                    @if($notification->attachment)
                        <!-- Current Attachment Display -->
                        <div id="current-attachment" class="mb-4 p-4 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 flex items-center justify-center bg-blue-100 dark:bg-blue-900 rounded-md ml-3">
                                        @if($notification->attachment_type === 'image')
                                            <svg class="w-6 h-6 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>
                                        @else
                                            <svg class="w-6 h-6 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>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-gray-900 dark:text-white">المرفق الحالي</div>
                                        <div class="text-sm text-gray-500 dark:text-gray-400">{{ $notification->attachment }}</div>
                                    </div>
                                </div>
                                <button type="button" id="remove-current-attachment" class="text-red-600 hover:text-red-800 dark:text-red-400">
                                    <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>
                            </div>
                            @if($notification->attachment_type === 'image')
                                <div class="mt-3">
                                    <img src="{{ asset('storage/notifications/' . $notification->attachment) }}" alt="معاينة الصورة" class="max-w-full h-auto max-h-64 rounded-md shadow-sm">
                                </div>
                            @endif
                            <input type="hidden" id="remove_attachment" name="remove_attachment" value="0">
                        </div>
                    @endif

                    <!-- New Attachment Upload -->
                    <div class="flex items-center justify-center w-full" id="upload-area">
                        <label for="attachment" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600">
                            <div class="flex flex-col items-center justify-center pt-5 pb-6" id="upload-placeholder">
                                <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                                </svg>
                                <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
                                    <span class="font-semibold">انقر لتحميل</span> أو اسحب الملف هنا
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">PNG, JPG, PDF, DOC أو DOCX (الحد الأقصى 10MB)</p>
                            </div>
                            <input id="attachment" name="attachment" type="file" class="hidden" accept="image/*,application/pdf,.doc,.docx,.txt" />
                        </label>
                    </div>
                    
                    <!-- File Preview -->
                    <div id="file-preview" class="hidden mt-4 p-4 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div id="file-icon" class="w-10 h-10 flex items-center justify-center bg-blue-100 dark:bg-blue-900 rounded-md ml-3">
                                    <!-- Icon will be inserted by JavaScript -->
                                </div>
                                <div>
                                    <div id="file-name" class="text-sm font-medium text-gray-900 dark:text-white"></div>
                                    <div id="file-size" class="text-sm text-gray-500 dark:text-gray-400"></div>
                                </div>
                            </div>
                            <button type="button" id="remove-file" class="text-red-600 hover:text-red-800 dark:text-red-400">
                                <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>
                        </div>
                        <!-- Image Preview -->
                        <div id="image-preview" class="hidden mt-3">
                            <img id="preview-image" src="" alt="معاينة الصورة" class="max-w-full h-auto max-h-64 rounded-md shadow-sm">
                        </div>
                    </div>
                    
                    <div id="attachment-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Status -->
                <div class="mb-6">
                    <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        حالة الإشعار <span class="text-red-500">*</span>
                    </label>
                    <select id="status" 
                            name="status" 
                            required
                            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">
                        <option value="draft" {{ $notification->status === 'draft' ? 'selected' : '' }}>مسودة (سيتم حفظه دون إرسال)</option>
                        <option value="sent" {{ $notification->status === 'sent' ? 'selected' : '' }}>إرسال فوري</option>
                    </select>
                    <div id="status-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Form Actions -->
                <div class="flex flex-col sm:flex-row justify-between items-center pt-6 border-t border-gray-200 dark:border-gray-700">
                    <div class="flex items-center space-x-4 space-x-reverse">
                        <button type="submit" 
                                id="submit-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="submit-text">حفظ التغييرات</span>
                        </button>
                        
                        <a href="{{ route('superadmin.notifications.index') }}" 
                           class="inline-flex items-center px-6 py-3 bg-gray-300 hover:bg-gray-400 text-gray-700 font-medium rounded-lg transition duration-200">
                            إلغاء
                        </a>
                    </div>
                    
                    <!-- Loading Indicator -->
                    <div id="loading-indicator" class="hidden flex items-center mt-4 sm:mt-0">
                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <span class="text-sm text-gray-600 dark:text-gray-400">جار المعالجة...</span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('notification-edit-form');
    const userSelectionDiv = document.getElementById('userSelectionDiv');
    const usersList = document.getElementById('users-list');
    const userSearch = document.getElementById('user-search');
    const selectedCountSpan = document.getElementById('selected-count');
    const attachmentInput = document.getElementById('attachment');
    const filePreview = document.getElementById('file-preview');
    const uploadPlaceholder = document.getElementById('upload-placeholder');
    const submitBtn = document.getElementById('submit-btn');
    const submitText = document.getElementById('submit-text');
    const loadingIndicator = document.getElementById('loading-indicator');

    let selectedUsers = [];
    @if($notification->recipient_type === 'specific_users' && $notification->recipient_data && $selectedUsers->isNotEmpty())
        selectedUsers = @json($selectedUsers->map(function($user) {
            return ['id' => $user->id, 'name' => $user->name, 'email' => $user->email];
        })->toArray());
        console.log('تم تحميل المستخدمين المحددين مسبقاً:', selectedUsers);
    @elseif($notification->recipient_type === 'specific_users' && $notification->recipient_data)
        try {
            const recipientData = @json($notification->recipient_data);
            if (Array.isArray(recipientData)) {
                selectedUsers = recipientData.map(id => ({ id: parseInt(id) }));
            }
        } catch (error) {
            console.error('خطأ في تحليل بيانات المستلمين:', error);
        }
    @endif

    let currentRecipientType = '{{ $notification->recipient_type }}';
    let allUsers = [];
    let searchTimeout;

    window.selectRecipientType = function(type) {
        console.log('تم اختيار نوع المستلمين:', type);

        document.querySelectorAll('.recipient-type-btn').forEach(btn => {
            btn.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20');
            btn.classList.add('border-gray-200', 'dark:border-gray-600');
        });

        const selectedBtn = document.querySelector(`[data-type="${type}"]`);
        if (selectedBtn) {
            selectedBtn.classList.remove('border-gray-200', 'dark:border-gray-600');
            selectedBtn.classList.add('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20');
        }

        document.getElementById('selectedRecipientType').value = type;
        currentRecipientType = type;

        if (type === 'specific_users') {
            userSelectionDiv.style.display = 'block';
            fetchUsers();
        } else {
            userSelectionDiv.style.display = 'none';
            selectedUsers = [];
            updateSelectedCount();
        }
    };

 async function fetchUsers() {
    try {
        const type = currentRecipientType === 'specific_users' ? 'all' : currentRecipientType;
        const response = await fetch(`/superadmin/notifications/users-by-type?type=${type}`);
        
        if (!response.ok) {
            throw new Error(`خطأ في الاستجابة: ${response.status}`);
        }

        const users = await response.json();
        allUsers = users;
        displayUsers(users);
        
        if (currentRecipientType === 'specific_users' && selectedUsers.length > 0) {
            setTimeout(() => {
                selectedUsers.forEach(selectedUser => {
                    const checkbox = document.getElementById(`user_${selectedUser.id}`);
                    if (checkbox) {
                        checkbox.checked = true;
                    }
                });
                updateSelectedCount();
            }, 100);
        }
    } catch (error) {
        console.error('خطأ في جلب المستخدمين:', error);
        usersList.innerHTML = `<div class="text-red-500 text-sm text-center">حدث خطأ في تحميل المستخدمين</div>`;
    }
}

    function displayUsers(users) {
        if (!users || users.length === 0) {
            usersList.innerHTML = '<div class="text-sm text-gray-500 dark:text-gray-400 text-center">لا يوجد مستخدمون للنوع المختار</div>';
            return;
        }

        const usersHtml = users.map(user => {
            const isSelected = selectedUsers.some(selected => selected.id === user.id);
            return `
                <div class="flex items-center p-3 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">
                    <input type="checkbox" 
                           id="user_${user.id}" 
                           name="recipient_data[]" 
                           value="${user.id}"
                           ${isSelected ? 'checked' : ''}
                           class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                           onchange="toggleUserSelection(${user.id}, '${user.name}', '${user.email}', this.checked)">
                    <label for="user_${user.id}" class="mr-3 text-sm font-medium text-gray-900 dark:text-gray-300 cursor-pointer flex-1">
                        <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">${user.name.charAt(0)}</span>
                            </div>
                            <div>
                                <div class="font-medium">${user.name}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">${user.email}</div>
                            </div>
                        </div>
                    </label>
                </div>
            `;
        }).join('');
        
        usersList.innerHTML = usersHtml;
        updateSelectedCount();
    }

    window.toggleUserSelection = function(userId, userName, userEmail, isChecked) {
        const user = { id: userId, name: userName, email: userEmail };
        
        if (isChecked) {
            if (!selectedUsers.some(selected => selected.id === userId)) {
                selectedUsers.push(user);
            }
        } else {
            selectedUsers = selectedUsers.filter(selected => selected.id !== userId);
        }
        
        updateSelectedCount();
    };

    function updateSelectedCount() {
        if (selectedCountSpan) {
            selectedCountSpan.textContent = `عدد المحددين: ${selectedUsers.length}`;
        }
    }

    if (userSearch) {
        userSearch.addEventListener('input', function() {
            const query = this.value.trim().toLowerCase();
            
            clearTimeout(searchTimeout);
            
            if (query.length === 0) {
                displayUsers(allUsers);
                return;
            }
            
            searchTimeout = setTimeout(() => {
                const filteredUsers = allUsers.filter(user => 
                    user.name.toLowerCase().includes(query) || 
                    user.email.toLowerCase().includes(query)
                );
                displayUsers(filteredUsers);
            }, 300);
        });
    }

    const removeCurrentAttachmentBtn = document.getElementById('remove-current-attachment');
    if (removeCurrentAttachmentBtn) {
        removeCurrentAttachmentBtn.addEventListener('click', function() {
            const currentAttachmentDiv = document.getElementById('current-attachment');
            const removeAttachmentInput = document.getElementById('remove_attachment');
            
            if (currentAttachmentDiv) {
                currentAttachmentDiv.style.display = 'none';
            }
            if (removeAttachmentInput) {
                removeAttachmentInput.value = '1';
            }
        });
    }

    if (attachmentInput) {
        attachmentInput.addEventListener('change', function() {
            const file = this.files[0];
            if (!file) {
                hideFilePreview();
                return;
            }
            
            if (file.size > 10 * 1024 * 1024) {
                showError('attachment', 'حجم الملف يجب أن يكون أقل من 10 ميجابايت');
                this.value = '';
                return;
            }
            
            showFilePreview(file);
        });
    }

    function showFilePreview(file) {
        const fileName = document.getElementById('file-name');
        const fileSize = document.getElementById('file-size');
        const fileIcon = document.getElementById('file-icon');
        const imagePreview = document.getElementById('image-preview');
        const previewImage = document.getElementById('preview-image');
        
        if (!fileName || !fileSize || !fileIcon) {
            console.error('عناصر معاينة الملف مفقودة');
            return;
        }
        
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);
        
        if (uploadPlaceholder) uploadPlaceholder.classList.add('hidden');
        if (filePreview) filePreview.classList.remove('hidden');
        
        const isImage = file.type.startsWith('image/');
        
        if (isImage) {
            fileIcon.innerHTML = `
                <svg class="w-6 h-6 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>
            `;
            
            if (imagePreview && previewImage) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImage.src = e.target.result;
                    imagePreview.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            }
        } else {
            fileIcon.innerHTML = `
                <svg class="w-6 h-6 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>
            `;
            if (imagePreview) imagePreview.classList.add('hidden');
        }
    }

    function hideFilePreview() {
        if (uploadPlaceholder) uploadPlaceholder.classList.remove('hidden');
        if (filePreview) filePreview.classList.add('hidden');
        const imagePreview = document.getElementById('image-preview');
        if (imagePreview) imagePreview.classList.add('hidden');
    }

    const removeFileBtn = document.getElementById('remove-file');
    if (removeFileBtn) {
        removeFileBtn.addEventListener('click', function() {
            if (attachmentInput) attachmentInput.value = '';
            hideFilePreview();
            hideError('attachment');
        });
    }

    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];
    }

    if (currentRecipientType) {
        selectRecipientType(currentRecipientType);
        if (currentRecipientType === 'specific_users') {
            fetchUsers();
        }
    }

    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            if (!validateForm()) {
                return;
            }
            
            submitForm();
        });
    }

    function validateForm() {
        let isValid = true;
        clearErrors();
        
        const title = document.getElementById('title').value.trim();
        if (!title) {
            showError('title', 'عنوان الإشعار مطلوب');
            isValid = false;
        }
        
        const content = document.getElementById('content').value.trim();
        if (!content) {
            showError('content', 'محتوى الإشعار مطلوب');
            isValid = false;
        }
        
        const recipientType = document.getElementById('selectedRecipientType').value;
        if (!recipientType) {
            showError('recipient_type', 'يجب اختيار نوع المستلمين');
            isValid = false;
        }
        
        if (recipientType === 'specific_users') {
            if (selectedUsers.length === 0) {
                showError('users', 'يجب اختيار مستخدم واحد على الأقل');
                isValid = false;
            }
        }
        
        return isValid;
    }

    function submitForm() {
        const formData = new FormData();
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        
        formData.append('_token', csrfToken || '');
        formData.append('_method', 'PUT');
        formData.append('title', document.getElementById('title').value.trim());
        formData.append('content', document.getElementById('content').value.trim());
        formData.append('recipient_type', document.getElementById('selectedRecipientType').value);
        formData.append('status', document.getElementById('status').value);
        
        const removeAttachment = document.getElementById('remove_attachment')?.value || '0';
        formData.append('remove_attachment', removeAttachment);
        
        if (currentRecipientType === 'specific_users' && selectedUsers.length > 0) {
            selectedUsers.forEach(user => {
                formData.append('recipient_data[]', user.id);
            });
        }
        
        if (attachmentInput && attachmentInput.files && attachmentInput.files[0]) {
            formData.append('attachment', attachmentInput.files[0]);
        }
        
        setLoading(true);
        
        fetch('{{ route("superadmin.notifications.update", $notification->id) }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                showAlert('نجح', data.message, 'success');
                setTimeout(() => {
                    if (data.redirect) {
                        window.location.href = data.redirect;
                    } else {
                        window.location.href = '{{ route("superadmin.notifications.index") }}';
                    }
                }, 1500);
            } else {
                if (data.errors) {
                    Object.keys(data.errors).forEach(field => {
                        showError(field, data.errors[field][0]);
                    });
                }
                showAlert('خطأ', data.message, 'error');
            }
        })
        .catch(error => {
            showAlert('خطأ', 'حدث خطأ أثناء إرسال البيانات: ' + error.message, 'error');
        })
        .finally(() => {
            setLoading(false);
        });
    }

    function setLoading(loading) {
        if (submitBtn && submitText && loadingIndicator) {
            if (loading) {
                submitBtn.disabled = true;
                submitText.textContent = 'جار المعالجة...';
                loadingIndicator.classList.remove('hidden');
            } else {
                submitBtn.disabled = false;
                submitText.textContent = 'حفظ التغييرات';
                loadingIndicator.classList.add('hidden');
            }
        }
    }

    function showError(field, message) {
        const errorDiv = document.getElementById(`${field}-error`);
        if (errorDiv) {
            errorDiv.textContent = message;
            errorDiv.classList.remove('hidden');
        }
        
        const input = document.getElementById(field) || document.querySelector(`[name="${field}"]`);
        if (input) {
            input.classList.add('border-red-500');
        }
    }

    function hideError(field) {
        const errorDiv = document.getElementById(`${field}-error`);
        if (errorDiv) {
            errorDiv.classList.add('hidden');
        }
        
        const input = document.getElementById(field) || document.querySelector(`[name="${field}"]`);
        if (input) {
            input.classList.remove('border-red-500');
        }
    }

    function clearErrors() {
        document.querySelectorAll('[id$="-error"]').forEach(errorDiv => {
            errorDiv.classList.add('hidden');
        });
        
        document.querySelectorAll('.border-red-500').forEach(input => {
            input.classList.remove('border-red-500');
        });
    }

    function showAlert(title, message, type) {
        document.querySelectorAll('.notification-alert').forEach(alert => {
            alert.remove();
        });

        const alertDiv = document.createElement('div');
        alertDiv.className = `notification-alert 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