{% extends "base.html" %}

{% block title %}إنشاء حساب{% endblock %}

{% block content %}
<div class="auth-container">
    <h2>إنشاء حساب جديد</h2>
    <form id="registerForm" method="POST" action="{{ url_for('register') }}">
        <div class="form-group">
            <label for="username">اسم المستخدم</label>
            <input type="text" id="username" name="username" required>
            <small class="form-text">سيتم إضافة @moltka.eg تلقائياً</small>
            <span id="username-validation-message"></span>
        </div>

        <div class="form-group">
            <label for="password">كلمة المرور</label>
            <input type="password" id="password" name="password" required>
            <div id="password-strength" class="strength-meter"></div>
        </div>

        <div class="form-group">
            <label for="confirm_password">تأكيد كلمة المرور</label>
            <input type="password" id="confirm_password" name="confirm_password" required>
            <span id="password-match-message"></span>
        </div>

        <div class="form-group">
            <label for="profession">المجال المهني</label>
            <select id="profession" name="profession" required>
                <option value="">اختر المجال المهني</option>
                <option value="مطور ويب">مطور ويب</option>
                <option value="مطور واجهة خلفية">مطور واجهة خلفية</option>
                <option value="برمجة">برمجة</option>
                <option value="مطور ألعاب">مطور ألعاب</option>
                <option value="مطور أندرويد">مطور أندرويد</option>
                <option value="مطور iOS">مطور iOS</option>
                <option value="مهندس">مهندس</option>
                <option value="طبيب">طبيب</option>
                <option value="علوم اجتماعية">علوم اجتماعية</option>
                <option value="معلم">معلم</option>
                <option value="محاسب">محاسب</option>
                <option value="صحفي">صحفي</option>
                <option value="محامي">محامي</option>
                <option value="مصمم جرافيكي">مصمم جرافيكي</option>
                <option value="مصور">مصور</option>
                <option value="كاتب">كاتب</option>
                <option value="مدرب رياضي">مدرب رياضي</option>
                <option value="طاهي">طاهي</option>
                <option value="ديني">ديني</option>
                <option value="شاعر">شاعر</option>
                <option value="رسام">رسام</option>
                <option value="محلل مالي">محلل مالي</option>
                <option value="فني صيانة">فني صيانة</option>
                <option value="باحث">باحث</option>
                <option value="IT">IT</option>
            </select>
        </div>

        <div class="form-group">
            <label>المهارات</label>
            <div id="skills-container">
                <div class="skill-input">
                    <input type="text" name="skill" class="skill-field">
                    <button type="button" class="add-skill">+</button>
                </div>
            </div>
            <input type="hidden" id="skills" name="skills">
        </div>

        <div class="form-group">
            <label for="security_question">سؤال الأمان</label>
            <select id="security_question" name="security_question" required>
                <option value="">اختر سؤال الأمان</option>
                <option value="ما اسم مدرستك الأولى؟">ما اسم مدرستك الأولى؟</option>
                <option value="ما اسم حيوانك الأليف الأول؟">ما اسم حيوانك الأليف الأول؟</option>
                <option value="ما هي مدينتك المفضلة؟">ما هي مدينتك المفضلة؟</option>
                <option value="ما اسم أفضل صديق في طفولتك؟">ما اسم أفضل صديق في طفولتك؟</option>
            </select>
        </div>

        <div class="form-group">
            <label for="security_answer">إجابة سؤال الأمان</label>
            <input type="text" id="security_answer" name="security_answer" required>
        </div>

        <button type="submit" class="submit-btn">إنشاء الحساب</button>
    </form>
    <div class="auth-links">
        <p>لديك حساب بالفعل؟ <a href="{{ url_for('login') }}">تسجيل الدخول</a></p>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // Username validation
    $('#username').on('input', function() {
        const username = $(this).val();
        if (username) {
            $.get('/validate-username', { username: username }, function(data) {
                if (data.exists) {
                    $('#username-validation-message').text('اسم المستخدم مستخدم بالفعل').addClass('error').removeClass('success');
                } else {
                    $('#username-validation-message').text('اسم المستخدم متاح').addClass('success').removeClass('error');
                }
            });
        }
    });

    // Password matching validation
    $('#confirm_password').on('input', function() {
        const password = $('#password').val();
        const confirmPassword = $(this).val();
        
        if (password === confirmPassword) {
            $('#password-match-message').text('كلمات المرور متطابقة').addClass('success').removeClass('error');
        } else {
            $('#password-match-message').text('كلمات المرور غير متطابقة').addClass('error').removeClass('success');
        }
    });

    // Password strength
    $('#password').on('input', function() {
        const password = $(this).val();
        let strength = 0;
        
        if (password.length >= 8) strength++;
        if (/[A-Z]/.test(password)) strength++;
        if (/[a-z]/.test(password)) strength++;
        if (/[0-9]/.test(password)) strength++;
        if (/[^A-Za-z0-9]/.test(password)) strength++;

        const strengthMeter = $('#password-strength');
        strengthMeter.removeClass('weak medium strong');
        
        if (strength <= 2) {
            strengthMeter.text('ضعيف').addClass('weak');
        } else if (strength <= 4) {
            strengthMeter.text('متوسط').addClass('medium');
        } else {
            strengthMeter.text('قوي').addClass('strong');
        }
    });

    // Skills management
    $('.add-skill').click(function() {
        const skillValue = $(this).siblings('.skill-field').val(); // Get the current skill value
        if (skillValue.trim() !== "") {
            const skillInput = `
                <div class="skill-input">
                    <input type="text" name="skill" class="skill-field" value="${skillValue}">
                    <button type="button" class="remove-skill">-</button>
                </div>
            `;
            $('#skills-container').append(skillInput);
            $(this).siblings('.skill-field').val(""); // Clear the input field
        }
    });

    $(document).on('click', '.remove-skill', function() {
        $(this).parent().remove();
    });

    // Form submission
    $('#registerForm').on('submit', function(e) {
        const skills = [];
        $('.skill-field').each(function() {
            const skill = $(this).val().trim();
            if (skill) {
                skills.push(skill);
            }
        });
        $('#skills').val(JSON.stringify(skills));

        const password = $('#password').val();
        const confirmPassword = $('#confirm_password').val();
        
        if (password !== confirmPassword) {
            e.preventDefault();
            alert('كلمات المرور غير متطابقة');
            return;
        }

        const username = $('#username').val().trim();
        if (!username) {
            e.preventDefault();
            alert('الرجاء إدخال اسم المستخدم');
            return;
        }
    });
});
</script>
{% endblock %}