@extends($layout)

@section('title', 'إنشاء نشاط جديد')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 px-2 sm:px-4 lg:px-8 py-4 sm:py-8">
    <div class="max-w-4xl mx-auto">
        
        <!-- Header -->
        <div class="mb-6 sm:mb-8">
            <div class="flex items-center gap-3 sm:gap-4 mb-4">
                <a href="{{ route('live-activities.manage') }}" class="p-2 hover:bg-white rounded-lg transition">
                    <svg class="w-5 h-5 sm:w-6 sm: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-2xl sm:text-3xl font-bold text-gray-900">إنشاء نشاط جديد</h1>
                    <p class="text-sm sm:text-base text-gray-600 mt-1">أضف نشاط إلى الجدول الأسبوعي</p>
                </div>
            </div>
        </div>

        <!-- Form Card -->
        <div class="bg-white rounded-2xl shadow-xl p-4 sm:p-6 lg:p-8 border border-gray-100">
            <form id="createActivityForm">
                @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-3 sm: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-4 sm:p-6 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl border-2 border-gray-200 peer-checked:border-blue-500 peer-checked:bg-gradient-to-br peer-checked:from-blue-50 peer-checked:to-blue-100 transition-all duration-300 hover:shadow-lg">
                                <div class="text-center">
                                    @if($type->icon === 'video')
                                    <svg class="w-8 h-8 sm:w-10 sm:h-10 mx-auto mb-2 sm: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-8 h-8 sm:w-10 sm:h-10 mx-auto mb-2 sm: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-8 h-8 sm:w-10 sm:h-10 mx-auto mb-2 sm: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-8 h-8 sm:w-10 sm:h-10 mx-auto mb-2 sm: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 text-sm sm:text-base">{{ $type->display_name }}</p>
                                </div>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm: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 min="{{ date('Y-m-d') }}"
                               class="w-full px-3 sm:px-4 py-2 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-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
                               class="w-full px-3 sm:px-4 py-2 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-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-3 sm:gap-4">
                        <div>
                            <label class="block text-xs text-gray-600 mb-2">الساعات</label>
                            <select name="duration_hours" required
                                    class="w-full px-3 sm:px-4 py-2 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-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-3 sm:px-4 py-2 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-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>

                <!-- Title -->
                <div class="mb-6">
                    <label class="block text-sm font-bold text-gray-900 mb-2">العنوان (اختياري)</label>
                    <input type="text" name="title" 
                           class="w-full px-3 sm:px-4 py-2 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-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-3 sm:px-4 py-2 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition resize-none"
                              placeholder="اكتب وصفاً للنشاط..."></textarea>
                </div>

                <!-- Participants -->
                <div class="mb-6 sm:mb-8">
                    <label class="block text-sm font-bold text-gray-900 mb-3">المشاركين *</label>
                    <div class="border border-gray-300 rounded-xl p-3 sm:p-4 max-h-80 sm:max-h-96 overflow-y-auto">
                        <div class="mb-3 sm:mb-4">
                            <input type="text" id="searchUsers" placeholder="ابحث عن مشارك..."
                                   class="w-full px-3 sm:px-4 py-2 text-sm sm:text-base border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div id="usersList" class="space-y-2">
                            @foreach($users as $user)
                            <label class="flex items-center gap-2 sm:gap-3 p-2 sm: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-4 h-4 sm:w-5 sm:h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500 flex-shrink-0">
                                <div class="flex-1 min-w-0">
                                    <p class="font-medium text-gray-900 text-sm sm:text-base truncate">{{ $user->name }}</p>
                                    <p class="text-xs text-gray-500 truncate">{{ $user->username }}</p>
                                </div>
                                @if($user->gender)
                                <span class="px-2 py-1 rounded-lg text-xs font-medium flex-shrink-0 {{ $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-xs sm:text-sm text-gray-500 mt-2">يجب اختيار مشارك واحد على الأقل</p>
                </div>

                <!-- Submit Buttons -->
                <div class="flex flex-col gap-3 sm:gap-4">
                    <button type="submit" 
                            class="w-full px-6 sm:px-8 py-3 sm:py-4 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white rounded-xl font-bold transition-all duration-300 shadow-lg hover:shadow-xl flex items-center justify-center gap-2 text-sm sm:text-base">
                        <svg class="w-5 h-5 sm:w-6 sm: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.manage') }}" 
                       class="w-full px-6 sm:px-8 py-3 sm: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 text-sm sm:text-base">
                        <svg class="w-5 h-5 sm:w-6 sm: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('createActivityForm').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.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.manage") }}';
        } else {
            alert(result.message || 'حدث خطأ');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        }
    } catch (error) {
        alert('حدث خطأ في الاتصال');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
    }
});
</script>
@endsection