@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-4xl 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>

        <!-- Form Card -->
        <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
            <form id="createRequestForm">
                @csrf

                <!-- 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 }}" 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>

                <!-- Recipient (المستقبل) -->
                <div class="mb-6">
                    <label class="block text-sm font-bold text-gray-900 mb-2">إرسال الطلب إلى *</label>
                    <select name="recipient_id" 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="">اختر المستقبل</option>
                        @foreach($recipients as $recipient)
                        <option value="{{ $recipient->id }}">{{ $recipient->name }} ({{ $recipient->email }})</option>
                        @endforeach
                    </select>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                    <!-- Requested Date -->
                    <div>
                        <label class="block text-sm font-bold text-gray-900 mb-2">التاريخ المطلوب *</label>
                        <input type="date" name="requested_date" required 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>

                    <!-- Requested Time -->
                    <div>
                        <label class="block text-sm font-bold text-gray-900 mb-2">الوقت المطلوب *</label>
                        <input type="time" name="requested_time" 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">
                    </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 }}" {{ $i == 1 ? '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" selected>0 دقيقة</option>
                                <option value="15">15 دقيقة</option>
                                <option value="30">30 دقيقة</option>
                                <option value="45">45 دقيقة</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Request Notes -->
                <div class="mb-6">
                    <label class="block text-sm font-bold text-gray-900 mb-2">ملاحظات الطلب (اختياري)</label>
                    <textarea name="request_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>

          <!-- Suggested Participants (اختياري) -->
<div class="mb-8">
    <label class="block text-sm font-bold text-gray-900 mb-3">المشاركين المقترحين (اختياري)</label>
    <p class="text-sm text-gray-500 mb-3">يمكنك اقتراح مشاركين للنشاط (سيتم مراجعتهم من قبل المشرف)</p>
    <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)
            <label class="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg cursor-pointer transition user-item" data-name="{{ strtolower($user->name) }}">
                <input type="checkbox" name="participants[]" value="{{ $user->id }}" 
                       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->email }}</p>
                </div>
            </label>
            @endforeach
        </div>
    </div>
</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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                        </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>
                        إلغاء
                    </button>
                </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('createRequestForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    
    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.store") }}', {
            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