@extends($layout)

@section('title', 'مراجعة طلب النشاط')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-purple-50 via-white to-pink-50 px-4 sm:px-6 lg:px-8 py-8">
    <div class="max-w-5xl mx-auto">
        
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center gap-4 mb-4">
                <a href="{{ route('live-activities.requests.index') }}" 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>

        <!-- Request Details Card -->
        <div class="bg-white rounded-2xl shadow-xl p-6 lg:p-8 mb-6 border border-gray-100">
            <div class="flex items-start gap-4 mb-6">
                <!-- Activity Type Icon -->
                <div class="p-4 bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl flex-shrink-0">
                    @if($activityRequest->activityType->icon === 'video')
                    <svg class="w-10 h-10 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($activityRequest->activityType->icon === 'users')
                    <svg class="w-10 h-10 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($activityRequest->activityType->icon === 'map')
                    <svg class="w-10 h-10 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 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
                </div>

                <div class="flex-1 min-w-0">
                    <h2 class="text-2xl font-bold text-gray-900 mb-2">{{ $activityRequest->activityType->display_name }}</h2>
                    <div class="flex flex-wrap gap-4 text-sm text-gray-600">
                        <div class="flex items-center gap-2">
                            <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                            <span>{{ $activityRequest->user->name }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                            <span>{{ $activityRequest->requested_date->format('Y-m-d') }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <span>{{ date('h:i A', strtotime($activityRequest->requested_time)) }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <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="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                            <span>{{ $activityRequest->duration_hours }}س {{ $activityRequest->duration_minutes }}د</span>
                        </div>
                    </div>
                </div>
            </div>

            @if($activityRequest->request_notes)
            <div class="p-4 bg-gray-50 rounded-xl border border-gray-200">
                <p class="text-sm font-medium text-gray-700 mb-2">ملاحظات الطلب:</p>
                <p class="text-gray-800">{{ $activityRequest->request_notes }}</p>
            </div>
            @endif
        </div>

        <!-- Suggested Participants Card -->
        @if(count($suggestedParticipants) > 0)
        <div class="bg-white rounded-2xl shadow-xl p-6 lg:p-8 mb-6 border border-gray-100">
            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                <svg class="w-6 h-6 text-purple-600" 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.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"/>
                </svg>
                المشاركين المقترحين من قبل مقدم الطلب
            </h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                @foreach($users->whereIn('id', $suggestedParticipants) as $user)
                <div class="flex items-center gap-3 p-3 bg-purple-50 rounded-xl border border-purple-200">
                    <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0">
                        {{ substr($user->name, 0, 1) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-medium text-gray-900 truncate">{{ $user->name }}</p>
                        <p class="text-xs text-gray-600 truncate">{{ $user->email }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <!-- Review Form Card -->
        <div class="bg-white rounded-2xl shadow-xl p-6 lg:p-8 border border-gray-100">
            <h3 class="text-xl font-bold text-gray-900 mb-6">قرار المراجعة</h3>

            <form id="reviewForm">
                @csrf

                <!-- Action Selection -->
                <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 gap-4">
                        <label class="relative cursor-pointer">
                            <input type="radio" name="action" value="approve" class="peer sr-only" required>
                            <div class="p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl border-2 border-green-200 peer-checked:border-green-500 peer-checked:bg-gradient-to-br peer-checked:from-green-100 peer-checked:to-emerald-100 transition-all duration-300 hover:shadow-lg">
                                <div class="flex items-center gap-3">
                                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <div>
                                        <p class="font-bold text-gray-900">قبول الطلب</p>
                                        <p class="text-sm text-gray-600">سيتم إنشاء النشاط</p>
                                    </div>
                                </div>
                            </div>
                        </label>

                        <label class="relative cursor-pointer">
                            <input type="radio" name="action" value="reject" class="peer sr-only" required>
                            <div class="p-6 bg-gradient-to-br from-red-50 to-orange-50 rounded-xl border-2 border-red-200 peer-checked:border-red-500 peer-checked:bg-gradient-to-br peer-checked:from-red-100 peer-checked:to-orange-100 transition-all duration-300 hover:shadow-lg">
                                <div class="flex items-center gap-3">
                                    <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <div>
                                        <p class="font-bold text-gray-900">رفض الطلب</p>
                                        <p class="text-sm text-gray-600">سيتم إلغاء الطلب</p>
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Participants Selection (shown when approve is selected) -->
                <div id="participantsSection" class="mb-6 hidden">
                    <label class="block text-sm font-bold text-gray-900 mb-3">
                        اختيار المشاركين *
                        <span class="text-gray-500 font-normal text-xs">(يجب اختيار مشارك واحد على الأقل)</span>
                    </label>
                    
                    <div class="mb-4">
                        <input type="text" id="searchParticipants" placeholder="ابحث عن مشارك..."
                               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                    </div>

                    <div class="border border-gray-300 rounded-xl p-4 max-h-96 overflow-y-auto">
                        <div id="participantsList" class="space-y-2">
                            @foreach($users as $user)
                            <label class="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg cursor-pointer transition participant-item" 
                                   data-name="{{ strtolower($user->name) }}"
                                   data-suggested="{{ in_array($user->id, $suggestedParticipants) ? '1' : '0' }}">
                                <input type="checkbox" name="participants[]" value="{{ $user->id }}" 
                                       {{ in_array($user->id, $suggestedParticipants) ? 'checked' : '' }}
                                       class="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                                <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0">
                                    {{ substr($user->name, 0, 1) }}
                                </div>
                                <div class="flex-1">
                                    <p class="font-medium text-gray-900">{{ $user->name }}</p>
                                    <p class="text-xs text-gray-500">{{ $user->email }}</p>
                                </div>
                                @if(in_array($user->id, $suggestedParticipants))
                                <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full font-medium">
                                    مقترح
                                </span>
                                @endif
                            </label>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Response Notes -->
                <div class="mb-6">
                    <label class="block text-sm font-bold text-gray-900 mb-2">
                        ملاحظات المراجعة (اختياري)
                    </label>
                    <textarea name="response_notes" 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="اكتب أي ملاحظات للمستخدم حول قرارك..."></textarea>
                </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-pink-600 hover:from-purple-700 hover:to-pink-700 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.requests.index') }}" 
                       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>
// Show/Hide Participants Section based on action
document.querySelectorAll('input[name="action"]').forEach(radio => {
    radio.addEventListener('change', (e) => {
        const participantsSection = document.getElementById('participantsSection');
        if (e.target.value === 'approve') {
            participantsSection.classList.remove('hidden');
        } else {
            participantsSection.classList.add('hidden');
        }
    });
});

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

// Form Submit
document.getElementById('reviewForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    const action = formData.get('action');
    
    // Validate participants if approving
    if (action === 'approve') {
        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.requests.review", $activityRequest) }}', {
            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.requests.index") }}';
        } else {
            alert(result.message || 'حدث خطأ');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        }
    } catch (error) {
        alert('حدث خطأ في الاتصال');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
    }
});
</script>
@endsection