@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('guest-submissions.my-submissions') }}" 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="editSubmissionForm" enctype="multipart/form-data">
                @csrf
                @method('PUT')

     <!-- Guest Participants -->
<div class="mb-6">
    <label class="block text-sm font-bold text-gray-900 mb-3">
        الضيوف (Guest) *
        <span class="text-gray-500 font-normal text-xs">(الأشخاص الذين تم استضافتهم)</span>
    </label>
    <div class="border border-gray-300 rounded-xl p-4 max-h-80 overflow-y-auto">
        <div class="mb-3">
            <input type="text" id="searchGuests" 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="guestsList" class="space-y-2">
            @foreach($allMembers as $user)
            <label class="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg cursor-pointer transition guest-item" data-name="{{ strtolower($user->name) }}">
                <input type="checkbox" name="guest_participants[]" value="{{ $user->id }}" 
                       {{ in_array($user->id, $submission->guest_participants ?? []) ? '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-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">
                    <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>

<!-- Host Participants -->
<div class="mb-6">
    <label class="block text-sm font-bold text-gray-900 mb-3">
        المستضيف (Host) *
        <span class="text-gray-500 font-normal text-xs">(العضو الذي قام بالاستضافة - اختر واحد فقط)</span>
    </label>
    <div class="border border-gray-300 rounded-xl p-4 max-h-80 overflow-y-auto">
        <div class="mb-3">
            <input type="text" id="searchHosts" 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="hostsList" class="space-y-2">
            @foreach($allMembers as $user)
            <label class="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg cursor-pointer transition host-item" data-name="{{ strtolower($user->name) }}">
                <input type="radio" name="host_participant" value="{{ $user->id }}" 
                       {{ in_array($user->id, $submission->host_participants ?? []) ? 'checked' : '' }}
                       class="w-5 h-5 text-blue-600 border-gray-300 focus:ring-blue-500">
                <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-cyan-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>
            </label>
            @endforeach
        </div>
    </div>
</div>
                <!-- Guest Contact & Description -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-900 mb-2">معلومات تواصل الضيف (اختياري)</label>
                        <input type="text" name="guest_contact" value="{{ $submission->guest_contact }}"
                               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>
                    <div>
                        <label class="block text-sm font-bold text-gray-900 mb-2">وصف مختصر (اختياري)</label>
                        <input type="text" name="guest_description" value="{{ $submission->guest_description }}"
                               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>
                </div>

                <!-- Activity Date & Time -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-900 mb-2">تاريخ القيست *</label>
                        <input type="date" name="activity_date" required max="{{ date('Y-m-d') }}"
                               value="{{ $submission->activity_date->format('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">
                        <p class="text-xs text-gray-500 mt-1">يجب أن يكون التاريخ في الماضي</p>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-900 mb-2">وقت القيست *</label>
                        <input type="time" name="activity_time" required value="{{ $submission->activity_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>

                <!-- Actual Hours -->
                <div class="mb-6">
                    <label class="block text-sm font-bold text-gray-900 mb-2">عدد الساعات الفعلية *</label>
                    <input type="number" name="actual_hours" required min="0.5" max="24" step="0.5" 
                           value="{{ $submission->actual_hours }}"
                           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">
                    <p class="text-xs text-gray-500 mt-1">الحد الأدنى: 0.5 ساعة | الحد الأقصى: 24 ساعة</p>
                </div>

                <!-- Current Proof Image -->
                @if($submission->proof_image)
                <div class="mb-4">
                    <label class="block text-sm font-bold text-gray-900 mb-2">الصورة الحالية</label>
                    <img src="{{ $submission->proof_image_url }}" alt="Current proof" class="w-full h-48 object-cover rounded-xl border border-gray-200">
                </div>
                @endif

                <!-- New Proof Image -->
              <!-- New Proof Image -->
<div class="mb-6">
    <label class="block text-sm font-bold text-gray-900 mb-2">
        تغيير صورة الإثبات
        <span class="text-gray-500 font-normal text-xs">اترك فارغاً للاحتفاظ بالصورة الحالية</span>
    </label>
    <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-purple-500 transition">
        <input type="file" name="proof_image" id="proofImage" accept="image/jpeg,image/png,image/jpg" class="hidden">
        <label for="proofImage" class="cursor-pointer">
            <svg class="w-12 h-12 text-gray-400 mx-auto mb-3" 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"/>
            </svg>
            <p class="text-sm text-gray-600">انقر لرفع صورة جديدة</p>
            <p class="text-xs text-gray-400 mt-1">JPG, JPEG, PNG (الحد الأقصى: 5MB)</p>
        </label>
    </div>
    <div id="imagePreview" class="mt-3 hidden">
        <img src="" alt="Preview" class="w-full h-48 object-cover rounded-xl">
    </div>
</div>

                <!-- Activity Notes -->
                <div class="mb-6">
                    <label class="block text-sm font-bold text-gray-900 mb-2">ملاحظات إضافية (اختياري)</label>
                    <textarea name="activity_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="اكتب أي ملاحظات إضافية عن القيست...">{{ $submission->activity_notes }}</textarea>
                </div>

                <!-- Recipient -->
                <div class="mb-8">
                    <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 }}" {{ $submission->recipient_id == $recipient->id ? 'selected' : '' }}>
                            {{ $recipient->name }} ({{ $recipient->email }})
                        </option>
                        @endforeach
                    </select>
                </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('guest-submissions.my-submissions') }}" 
                       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 functionality
document.getElementById('searchGuests').addEventListener('input', (e) => {
    const search = e.target.value.toLowerCase();
    document.querySelectorAll('.guest-item').forEach(item => {
        item.style.display = item.dataset.name.includes(search) ? 'flex' : 'none';
    });
});

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

// Image Preview
document.getElementById('proofImage').addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
            const preview = document.getElementById('imagePreview');
            preview.querySelector('img').src = e.target.result;
            preview.classList.remove('hidden');
        };
        reader.readAsDataURL(file);
    }
});

// Form Submit
document.getElementById('editSubmissionForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    
    // Validation
    const guests = formData.getAll('guest_participants[]');
const host = formData.get('host_participant'); // تغيير هنا
    
    if (guests.length === 0) {
        alert('يجب اختيار ضيف واحد على الأقل');
        return;
    }
    
if (!host) { // تغيير هنا
    alert('يجب اختيار مستضيف واحد');
    return;
}

    // Convert arrays to JSON
    formData.set('guest_participants', JSON.stringify(guests));
formData.set('host_participants', JSON.stringify([host])); // تغيير هنا
    
    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("guest-submissions.update", $submission) }}', {
            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("guest-submissions.my-submissions") }}';
        } else {
            alert(result.message || 'حدث خطأ');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        }
    } catch (error) {
        console.error('Error:', error);
        alert('حدث خطأ في الاتصال');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
    }
});
</script>
@endsection