@extends($layout)

@section('title', 'تعديل النشاط')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-purple-50 via-white to-indigo-50 px-4 sm:px-6 lg:px-8 py-8">
    <div class="max-w-4xl mx-auto">
        
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center gap-4 mb-4">
                <a href="{{ route('live-activities.show', $activity) }}" class="p-2 hover:bg-white rounded-lg transition">
                    <svg class="w-6 h-6 text-gray-600" 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"/>
                    </svg>
                </a>
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">تعديل النشاط</h1>
                    <p class="text-gray-600 mt-1">تحديث بيانات النشاط والمشاركين</p>
                </div>
            </div>
        </div>

        <!-- Form Card -->
        <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
            <form id="editActivityForm">
                @csrf
                @method('PUT')

                <!-- Activity Type -->
                <div class="mb-6">
                    <label class="block text-sm font-bold text-gray-900 mb-3">نوع النشاط *</label>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                        @foreach($activityTypes as $type)
                        <label class="relative cursor-pointer">
                            <input type="radio" name="activity_type_id" value="{{ $type->id }}" 
                                   {{ $activity->activity_type_id == $type->id ? 'checked' : '' }}
                                   class="peer sr-only" required>
                            <div class="p-6 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl border-2 border-gray-200 peer-checked:border-purple-500 peer-checked:bg-gradient-to-br peer-checked:from-purple-50 peer-checked:to-purple-100 transition-all duration-300 hover:shadow-lg">
                                <div class="text-center">
                                    @if($type->icon === 'video')
                                    <svg class="w-10 h-10 mx-auto mb-3 text-blue-600" 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"/>
                                    </svg>
                                    @elseif($type->icon === 'users')
                                    <svg class="w-10 h-10 mx-auto mb-3 text-purple-600" 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 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                                    </svg>
                                    @elseif($type->icon === 'map')
                                    <svg class="w-10 h-10 mx-auto mb-3 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
                                    </svg>
                                    @else
                                    <svg class="w-10 h-10 mx-auto mb-3 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"/>
                                    </svg>
                                    @endif
                                    <p class="font-bold text-gray-900">{{ $type->display_name }}</p>
                                </div>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                    <!-- Scheduled Date -->
                    <div>
                        <label class="block text-sm font-bold text-gray-900 mb-2">التاريخ *</label>
                        <input type="date" name="scheduled_date" required 
                               value="{{ $activity->scheduled_date->format('Y-m-d') }}"
                               min="{{ date('Y-m-d') }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition">
                    </div>

                    <!-- Scheduled Time -->
                    <div>
                        <label class="block text-sm font-bold text-gray-900 mb-2">الوقت *</label>
                        <input type="time" name="scheduled_time" required
                               value="{{ $activity->scheduled_time }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition">
                    </div>
                </div>

                <!-- Duration -->
                <div class="mb-6">
                    <label class="block text-sm font-bold text-gray-900 mb-3">المدة المتوقعة *</label>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs text-gray-600 mb-2">الساعات</label>
                            <select name="duration_hours" required
                                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition">
                                @for($i = 0; $i <= 12; $i++)
                                <option value="{{ $i }}" {{ $activity->duration_hours == $i ? 'selected' : '' }}>
                                    {{ $i }} ساعة
                                </option>
                                @endfor
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-2">الدقائق</label>
                            <select name="duration_minutes" required
                                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition">
                                <option value="0" {{ $activity->duration_minutes == 0 ? 'selected' : '' }}>0 دقيقة</option>
                                <option value="15" {{ $activity->duration_minutes == 15 ? 'selected' : '' }}>15 دقيقة</option>
                                <option value="30" {{ $activity->duration_minutes == 30 ? 'selected' : '' }}>30 دقيقة</option>
                                <option value="45" {{ $activity->duration_minutes == 45 ? 'selected' : '' }}>45 دقيقة</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Title -->
                <div class="mb-6">
                    <label class="block text-sm font-bold text-gray-900 mb-2">العنوان (اختياري)</label>
                    <input type="text" name="title" value="{{ $activity->title }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
                           placeholder="مثال: لايف مع الضيف...">
                </div>

                <!-- Description -->
                <div class="mb-6">
                    <label class="block text-sm font-bold text-gray-900 mb-2">الوصف (اختياري)</label>
                    <textarea name="description" rows="4"
                              class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
                              placeholder="اكتب وصفاً للنشاط...">{{ $activity->description }}</textarea>
                </div>

                <!-- Participants -->
                <div class="mb-8">
                    <label class="block text-sm font-bold text-gray-900 mb-3">المشاركين *</label>
                    
                    <!-- Current Participants Notice -->
                    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-4">
                        <div class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-blue-600 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <div>
                                <p class="font-medium text-blue-900">ملاحظة هامة:</p>
                                <p class="text-sm text-blue-800 mt-1">
                                    المشاركين الذين رفعوا إثبات لن يتم حذفهم. يمكنك فقط إضافة مشاركين جدد أو حذف من لم يرفعوا إثبات بعد.
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="border border-gray-300 rounded-xl p-4 max-h-96 overflow-y-auto">
                        <div class="mb-4">
                            <input type="text" id="searchUsers" placeholder="ابحث عن مشارك..."
                                   class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                        </div>
                        
                        <div id="usersList" class="space-y-2">
                            @foreach($users as $user)
                            @php
                                $isParticipant = $activity->participants->where('user_id', $user->id)->first();
                                $hasProof = $isParticipant && $isParticipant->proof_uploaded_at;
                            @endphp
                            <label class="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg cursor-pointer transition user-item {{ $hasProof ? 'opacity-50 cursor-not-allowed' : '' }}" 
                                   data-name="{{ strtolower($user->name) }}">
                                <input type="checkbox" name="participants[]" value="{{ $user->id }}" 
                                       {{ $isParticipant ? 'checked' : '' }}
                                       {{ $hasProof ? 'disabled' : '' }}
                                       class="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                                <div class="flex-1">
                                    <p class="font-medium text-gray-900">{{ $user->name }}</p>
                                    <p class="text-xs text-gray-500">{{ $user->username }}</p>
                                    @if($hasProof)
                                    <p class="text-xs text-blue-600 mt-1">✓ تم رفع الإثبات</p>
                                    @endif
                                </div>
                                @if($user->gender)
                                <span class="px-2 py-1 rounded-lg text-xs font-medium {{ $user->gender === 'male' ? 'bg-blue-100 text-blue-700' : 'bg-pink-100 text-pink-700' }}">
                                    {{ $user->gender === 'male' ? 'ذكر' : 'أنثى' }}
                                </span>
                                @endif
                            </label>
                            @endforeach
                        </div>
                    </div>
                    <p class="text-sm text-gray-500 mt-2">يجب اختيار مشارك واحد على الأقل</p>
                </div>

                <!-- Submit Buttons -->
                <div class="flex flex-col sm:flex-row gap-4">
                    <button type="submit" 
                            class="flex-1 px-8 py-4 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white rounded-xl font-bold transition-all duration-300 shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
                        <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="M5 13l4 4L19 7"/>
                        </svg>
                        حفظ التعديلات
                    </button>
                    <a href="{{ route('live-activities.show', $activity) }}" 
                       class="px-8 py-4 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-bold transition-all duration-300 flex items-center justify-center gap-2">
                        <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>
                        إلغاء
                    </a>
                </div>
            </form>
        </div>

    </div>
</div>

<script>
// Search Users
document.getElementById('searchUsers').addEventListener('input', (e) => {
    const search = e.target.value.toLowerCase();
    document.querySelectorAll('.user-item').forEach(item => {
        const name = item.dataset.name;
        item.style.display = name.includes(search) ? 'flex' : 'none';
    });
});

// Form Submit
document.getElementById('editActivityForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    const participants = formData.getAll('participants[]');
    
    if(participants.length === 0) {
        alert('يجب اختيار مشارك واحد على الأقل');
        return;
    }
    
    const submitBtn = e.target.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<svg class="animate-spin h-5 w-5 mx-auto" 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>';
    
    try {
        const response = await fetch('{{ route("live-activities.update", $activity) }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': formData.get('_token'),
                'Accept': 'application/json'
            },
            body: formData
        });
        
        const result = await response.json();
        
        if(result.success) {
            alert(result.message);
            window.location.href = '{{ route("live-activities.show", $activity) }}';
        } else {
            alert(result.message || 'حدث خطأ');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        }
    } catch (error) {
        alert('حدث خطأ في الاتصال');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
    }
});
</script>
@endsection