@extends('layouts.app')

@section('title', 'إنشاء حساب - منصة ابدأ')

@section('content')
<div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8 bg-ebda-light animate-fade-in">
    <div class="max-w-6xl mx-auto">
        <div class="bg-white rounded-3xl shadow-sm border border-gray-50 overflow-hidden flex flex-col md:flex-row">

            <!-- الجانب الترحيبي -->
            <div class="md:w-1/3 bg-ebda-blue p-12 text-white flex flex-col justify-center relative overflow-hidden">
                <div class="relative z-10">
                    <h2 class="text-3xl font-black mb-6 leading-tight">انضم إلى <br> مجتمع المبدعين</h2>
                    <p class="text-blue-100 font-medium mb-10 text-sm leading-relaxed">خطوة واحدة تفصلك عن امتلاك المهارة التي تفتح لك أبواب المستقبل في سوريا.</p>
                    <div class="space-y-4">
                        <div class="flex items-center space-x-3 space-x-reverse">
                            <span class="bg-white/10 p-2 rounded-lg">✓</span>
                            <span class="text-sm font-bold">تدريب ميداني حقيقي</span>
                        </div>
                        <div class="flex items-center space-x-3 space-x-reverse">
                            <span class="bg-white/10 p-2 rounded-lg">✓</span>
                            <span class="text-sm font-bold">تقييم خبراء معتمد</span>
                        </div>
                    </div>
                </div>
                <div class="absolute -bottom-20 -left-20 w-64 h-64 bg-white/5 rounded-full blur-3xl"></div>
            </div>

            <!-- الاستمارة -->
            <div class="md:w-2/3 p-10 md:p-16">
                <h1 class="text-2xl font-black text-ebda-blue mb-8">إنشاء حساب جديد</h1>

                <form method="POST" action="{{ route('register.post') }}" class="space-y-8" id="register-form" novalidate>
                    @csrf

                    <!-- البيانات الأساسية -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="text-xs font-black text-gray-400 uppercase mr-2">الاسم الكامل <span class="text-red-500">*</span></label>
                            <input type="text" name="name" class="input-field" placeholder="الاسم الثلاثي" required value="{{ old('name') }}">
                            <div class="error-message hidden">
                                <div class="flex items-center gap-1 text-red-600 text-[11px] font-bold mt-1">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span>هذا الحقل مطلوب</span>
                                </div>
                            </div>
                            @error('name') <p class="text-red-500 text-xs font-bold">{{ $message }}</p> @enderror
                        </div>
                        <div class="space-y-2">
                            <label class="text-xs font-black text-gray-400 uppercase mr-2">رقم الهاتف <span class="text-red-500">*</span></label>
                            <input type="tel" name="phone" class="input-field" placeholder="09xxxxxxxx" required value="{{ old('phone') }}">
                            <div class="error-message hidden">
                                <div class="flex items-center gap-1 text-red-600 text-[11px] font-bold mt-1">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span>رقم الهاتف مطلوب</span>
                                </div>
                            </div>
                            @error('phone') <p class="text-red-500 text-xs font-bold">{{ $message }}</p> @enderror
                        </div>
                        <div class="md:col-span-2 space-y-2">
                            <label class="text-xs font-black text-gray-400 uppercase mr-2">البريد الإلكتروني <span class="text-red-500">*</span></label>
                            <input type="email" name="email" class="input-field" placeholder="email@example.com" required value="{{ old('email') }}">
                            <div class="error-message hidden">
                                <div class="flex items-center gap-1 text-red-600 text-[11px] font-bold mt-1">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span>يرجى إدخال بريد إلكتروني صحيح</span>
                                </div>
                            </div>
                            @error('email') <p class="text-red-500 text-xs font-bold">{{ $message }}</p> @enderror
                        </div>
                        <div class="space-y-2">
                            <label class="text-xs font-black text-gray-400 uppercase mr-2">كلمة المرور <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <input type="password" name="password" id="password" class="input-field" placeholder="••••••••" required maxlength="8" minlength="8" value="{{ old('password') }}">
                                <button type="button" onclick="togglePassword('password', 'eye-icon-password')"
                                        class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors">
                                    <svg id="eye-icon-password" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                    </svg>
                                </button>
                            </div>
                            <div class="error-message hidden">
                                <div class="flex items-center gap-1 text-red-600 text-[11px] font-bold mt-1">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span>كلمة المرور يجب أن تكون 8 محارف</span>
                                </div>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <label class="text-xs font-black text-gray-400 uppercase mr-2">تأكيد كلمة المرور <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <input type="password" name="password_confirmation" id="password_confirmation" class="input-field" placeholder="••••••••" required maxlength="8" minlength="8" value="{{ old('password_confirmation') }}">
                                <button type="button" onclick="togglePassword('password_confirmation', 'eye-icon-confirm')"
                                        class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors">
                                    <svg id="eye-icon-confirm" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                    </svg>
                                </button>
                            </div>
                            <div class="error-message hidden">
                                <div class="flex items-center gap-1 text-red-600 text-[11px] font-bold mt-1">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span>كلمة المرور غير متطابقة</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- اختيار الهدف -->
                    <div class="pt-6">
                        <h3 class="font-black text-gray-700 mb-6 flex items-center">
                            <span class="w-1.5 h-6 bg-ebda-blue ml-3 rounded-full"></span>
                            ما هو هدفك من المنصة؟ <span class="text-red-500 ml-2">*</span>
                        </h3>
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4" x-data="{ selected: '{{ old('goal') }}' }">
                            <label class="selection-card group cursor-pointer" :class="selected === 'job_seeker' ? 'border-ebda-blue bg-blue-50/30 shadow-lg' : ''">
                                <input type="radio" name="goal" value="job_seeker" class="hidden" x-model="selected">
                                <div class="text-2xl mb-2">🔍</div>
                                <h4 class="font-bold text-sm">باحث عن عمل</h4>
                            </label>
                            <label class="selection-card group cursor-pointer" :class="selected === 'skill_developer' ? 'border-ebda-blue bg-blue-50/30 shadow-lg' : ''">
                                <input type="radio" name="goal" value="skill_developer" class="hidden" x-model="selected">
                                <div class="text-2xl mb-2">🚀</div>
                                <h4 class="font-bold text-sm">تطوير مهاراتي</h4>
                            </label>
                            <label class="selection-card group cursor-pointer" :class="selected === 'employer' ? 'border-ebda-blue bg-blue-50/30 shadow-lg' : ''">
                                <input type="radio" name="goal" value="employer" class="hidden" x-model="selected">
                                <div class="text-2xl mb-2">🏢</div>
                                <h4 class="font-bold text-sm">صاحب شركة</h4>
                            </label>
                        </div>
                    </div>

                    <!-- الاهتمامات -->
                    <div id="interests-box" class="pt-6" x-data="{ showAddInterest: false, newInterestName: '', newCategories: [] }">
                        <h3 class="font-black text-gray-700 mb-6 flex items-center">
                            <span class="w-1.5 h-6 bg-blue-300 ml-3 rounded-full"></span>
                            ما هي المجالات التي تهمك؟ <span class="text-red-500 ml-2">*</span>
                        </h3>
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                            @foreach($categories as $category)
                            <label class="cursor-pointer group">
                                <input type="checkbox" name="interests[]" value="{{ $category->id }}" class="peer hidden" {{ in_array($category->id, old('interests', [])) ? 'checked' : '' }}>
                                <div class="px-4 py-3 border-2 border-gray-50 rounded-2xl text-center text-xs font-black text-gray-400 peer-checked:bg-ebda-blue peer-checked:text-white peer-checked:border-ebda-blue transition-all">
                                    {{ $category->name }}
                                </div>
                            </label>
                            @endforeach
                        </div>

                        <!-- زر إضافة اهتمام جديد -->
                        <button type="button" @click="showAddInterest = !showAddInterest" class="mt-4 w-full py-3 border-2 border-dashed border-gray-300 rounded-2xl text-sm font-bold text-gray-500 hover:border-blue-300 hover:text-blue-600 transition-all flex items-center justify-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 4v16m8-8H4"/>
                            </svg>
                            إضافة مجال جديد
                        </button>

                        <!-- نموذج إضافة اهتمام جديد -->
                        <div x-show="showAddInterest" x-transition class="mt-4 p-4 bg-gray-50 rounded-2xl">
                            <div class="flex gap-2">
                                <input type="text" x-model="newInterestName" placeholder="اسم المجال الجديد" class="flex-1 px-4 py-3 border-2 border-gray-200 rounded-xl text-sm focus:border-blue-300 focus:outline-none">
                                <button type="button" @click="addNewInterest()" class="px-6 py-3 bg-blue-600 text-white rounded-xl text-sm font-bold hover:bg-blue-700 transition-all">
                                    إضافة
                                </button>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="w-full btn-primary !py-4 text-lg font-black shadow-xl shadow-blue-900/20 flex items-center justify-center gap-2">ابدأ رحلتي الآن <span class="text-xl transform rotate-180">➔</span></button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- SweetAlert2 CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
/* تأثير انتقال سلس للحدود */
.input-field {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-field.border-red-500 {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.input-field.border-blue-500 {
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}
</style>

<script>
// إعداد عرض الأخطاء
window.onerror = function(message, source, lineno, colno, error) {
    console.error('Error:', message);
    console.error('Source:', source);
    console.error('Line:', lineno);
    console.error('Column:', colno);
    console.error('Error Object:', error);

    // عرض رسالة الخطأ في الصفحة
    const errorDiv = document.createElement('div');
    errorDiv.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; background: #fee; color: #c33; padding: 20px; z-index: 9999; font-family: Arial, sans-serif; font-size: 14px; border-bottom: 2px solid #c33;';
    errorDiv.innerHTML = `
        <strong>خطأ في JavaScript:</strong><br>
        ${message}<br>
        <small>السطر: ${lineno}، العمود: ${colno}</small>
        <button onclick="this.parentElement.remove()" style="float: left; background: #c33; color: white; border: none; padding: 5px 10px; cursor: pointer;">إغلاق</button>
    `;
    document.body.appendChild(errorDiv);

    return false;
};

function togglePassword(inputId, iconId) {
    const passwordInput = document.getElementById(inputId);
    const eyeIcon = document.getElementById(iconId);

    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        eyeIcon.innerHTML = `
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
        `;
    } else {
        passwordInput.type = 'password';
        eyeIcon.innerHTML = `
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
        `;
    }
}

// التحقق من تحميل الصفحة
document.addEventListener('DOMContentLoaded', function() {
    console.log('Page loaded successfully');
    console.log('Form element:', document.getElementById('register-form'));
    console.log('Submit button:', document.querySelector('button[type="submit"]'));

    // دالة إظهار رسالة الخطأ
    function showError(input, message) {
        const container = input.closest('.space-y-2');
        const errorDiv = container.querySelector('.error-message');

        // إضافة كلاس الخطأ للحقل
        input.classList.add('border-red-500');
        input.classList.remove('border-blue-500');

        // إظهار رسالة الخطأ
        if (errorDiv) {
            errorDiv.classList.remove('hidden');
        }
    }

    // دالة إخفاء رسالة الخطأ
    function hideError(input) {
        const container = input.closest('.space-y-2');
        const errorDiv = container.querySelector('.error-message');

        // إزالة كلاس الخطأ من الحقل
        input.classList.remove('border-red-500');
        input.classList.add('border-blue-500');

        // إخفاء رسالة الخطأ
        if (errorDiv) {
            errorDiv.classList.add('hidden');
        }
    }

    // التحقق من صحة الحقل
    function validateField(input) {
        const value = input.value.trim();
        const type = input.type;
        const name = input.name;

        // التحقق من الحقول المطلوبة
        if (input.required && !value) {
            showError(input);
            return false;
        }

        // التحقق من صحة البريد الإلكتروني
        if (type === 'email' && value) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(value)) {
                showError(input);
                return false;
            }
        }

        // التحقق من طول كلمة المرور
        if (name === 'password' && value) {
            if (value.length < 8) {
                showError(input);
                return false;
            }
        }

        // التحقق من تطابق كلمة المرور
        if (name === 'password_confirmation' && value) {
            const password = document.getElementById('password').value;
            if (value !== password) {
                showError(input);
                return false;
            }
        }

        // إذا كان الحقل صحيحاً
        hideError(input);
        return true;
    }

    // إضافة مستمعات الأحداث لجميع الحقول
    const inputs = document.querySelectorAll('.input-field');
    inputs.forEach(input => {
        // التحقق عند فقدان التركيز
        input.addEventListener('blur', function() {
            validateField(this);
        });

        // التحقق عند الكتابة
        input.addEventListener('input', function() {
            if (this.value.trim()) {
                validateField(this);
            }
        });
    });

    // إضافة مستمع للنموذج
    const form = document.getElementById('register-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            console.log('Form submitted');
            console.log('Form data:', new FormData(form));

            // التحقق من جميع الحقول
            let isValid = true;
            let firstErrorInput = null;

            inputs.forEach(input => {
                if (!validateField(input)) {
                    isValid = false;
                    if (!firstErrorInput) {
                        firstErrorInput = input;
                    }
                }
            });

            if (!isValid) {
                e.preventDefault();
                e.stopPropagation();
                // التركيز على أول حقل به خطأ
                if (firstErrorInput) {
                    firstErrorInput.focus();
                    firstErrorInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
                return false;
            }

            // التحقق من اختيار الهدف
            const goalSelected = document.querySelector('input[name="goal"]:checked');
            if (!goalSelected) {
                e.preventDefault();
                e.stopPropagation();
                Swal.fire({
                    title: 'تنبيه',
                    text: 'الرجاء اختيار هدفك من المنصة',
                    icon: 'warning',
                    confirmButtonText: 'حسناً',
                    confirmButtonColor: '#1e3a8a',
                    borderRadius: '20px',
                    direction: 'rtl'
                });
                return false;
            }

            // التحقق من اختيار الاهتمامات
            const interestsSelected = document.querySelectorAll('input[name="interests[]"]:checked');
            if (interestsSelected.length === 0) {
                e.preventDefault();
                e.stopPropagation();
                Swal.fire({
                    title: 'تنبيه',
                    text: 'الرجاء اختيار مجال واحد على الأقل',
                    icon: 'warning',
                    confirmButtonText: 'حسناً',
                    confirmButtonColor: '#1e3a8a',
                    borderRadius: '20px',
                    direction: 'rtl'
                });
                return false;
            }

            console.log('Validation passed');
        });
    }
});

// دالة إضافة اهتمام جديد
function addNewInterest() {
    const interestsBox = document.getElementById('interests-box');
    const newInterestName = interestsBox.querySelector('input[x-model="newInterestName"]').value.trim();

    if (!newInterestName) {
        Swal.fire({
            title: 'تنبيه',
            text: 'الرجاء إدخال اسم المجال',
            icon: 'warning',
            confirmButtonText: 'حسناً',
            confirmButtonColor: '#1e3a8a',
            borderRadius: '20px',
            direction: 'rtl'
        });
        return;
    }

    // إرسال طلب إضافة التصنيف الجديد
    fetch('/categories/store', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            name: newInterestName
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // إضافة التصنيف الجديد إلى القائمة
            const categoriesGrid = interestsBox.querySelector('.grid');
            const newCategoryLabel = document.createElement('label');
            newCategoryLabel.className = 'cursor-pointer group';
            newCategoryLabel.innerHTML = `
                <input type="checkbox" name="interests[]" value="${data.category.id}" class="peer hidden" checked>
                <div class="px-4 py-3 border-2 border-gray-50 rounded-2xl text-center text-xs font-black text-gray-400 peer-checked:bg-ebda-blue peer-checked:text-white peer-checked:border-ebda-blue transition-all">
                    ${data.category.name}
                </div>
            `;

            // إضافة التصنيف إلى نهاية القائمة
            categoriesGrid.appendChild(newCategoryLabel);

            // مسح حقل الإدخال وإخفاء النموذج
            interestsBox.querySelector('input[x-model="newInterestName"]').value = '';
            interestsBox.querySelector('div[x-show="showAddInterest"]').style.display = 'none';

            // إظهار رسالة نجاح
            Swal.fire({
                title: 'تم بنجاح!',
                text: 'تم إضافة المجال بنجاح',
                icon: 'success',
                confirmButtonText: 'حسناً',
                confirmButtonColor: '#1e3a8a',
                borderRadius: '20px',
                direction: 'rtl'
            });
        } else {
            Swal.fire({
                title: 'خطأ',
                text: data.message || 'حدث خطأ أثناء إضافة المجال',
                icon: 'error',
                confirmButtonText: 'حسناً',
                confirmButtonColor: '#1e3a8a',
                borderRadius: '20px',
                direction: 'rtl'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            title: 'خطأ',
            text: 'حدث خطأ أثناء إضافة المجال',
            icon: 'error',
            confirmButtonText: 'حسناً',
            confirmButtonColor: '#1e3a8a',
            borderRadius: '20px',
            direction: 'rtl'
        });
    });
}
</script>
@endsection