@extends('layouts.app')

@section('content')
<div class="max-w-5xl mx-auto bg-white p-8 rounded-xl shadow-lg my-10 border border-brand-light-gray" dir="rtl">

    <h1 class="text-3xl font-extrabold text-blue-900 mb-6 border-b pb-3 text-center">تسجيل حساب جديد</h1>

    {{-- رسائل الخطأ --}}
    @if ($errors->any())
        <div class="mb-6 p-4 bg-red-100 text-red-800 border border-red-300 rounded-lg shadow-sm">
            <strong>حدثت بعض الأخطاء:</strong>
            <ul class="list-disc list-inside pr-4 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('register') }}" method="POST" enctype="multipart/form-data">
        @csrf

        {{-- ✅ استخدام Alpine.js لتصميم نموذج متعدد الخطوات --}}
        <div x-data="{ step: 1 }">

            <!-- أزرار التنقل بين الخطوات -->
            <div class="flex justify-center gap-4 mb-6 border-b pb-3">
                <button type="button" @click="step = 1" :class="step === 1 ? 'text-blue-600 font-bold border-b-2 border-blue-600 pb-2' : 'text-brand-text pb-2'">الخطوة 1</button>
                <button type="button" @click="step = 2" :class="step === 2 ? 'text-blue-600 font-bold border-b-2 border-blue-600 pb-2' : 'text-brand-text pb-2'">الخطوة 2</button>
            </div>

            {{-- الخطوة 1: بيانات الحساب الأساسية --}}
            <div x-show="step === 1" x-cloak>
                <h2 class="text-xl font-semibold text-blue-800 mb-4">بيانات الحساب الأساسية</h2>
                <div class="mb-4">
                    <label for="name" class="block text-sm font-medium">الاسم الكامل</label>
                    <input type="text" id="name" name="name" value="{{ old('name') }}" maxlength="255"
                            class="form-input w-full border border-brand-light-gray rounded-md p-2" required>
                </div>
                <div class="mb-4 relative">
                    <label for="username" class="text-sm font-medium flex items-center gap-1">
                        اسم المستخدم
                        <span class="info-icon cursor-pointer text-blue-500" data-tippy-content="3-20 حرفًا، يمكن أن يحتوي على أحرف وأرقام.">ℹ️</span>
                    </label>
                    <input type="text" id="username" name="username" value="{{ old('username') }}" maxlength="20"
                            class="form-input w-full border border-brand-light-gray rounded-md p-2" required>
                    <small id="username-feedback" class="text-sm mt-1"></small>
                </div>
                <div class="mb-4 relative">
                    <label for="email" class="text-sm font-medium flex items-center gap-1">
                        البريد الإلكتروني
                        <span class="info-icon cursor-pointer text-blue-500" data-tippy-content="يجب أن يكون بريدًا صالحًا وغير مستخدم مسبقًا.">ℹ️</span>
                    </label>
                    <input type="email" id="email" name="email" value="{{ old('email') }}" maxlength="255"
                            class="form-input w-full border border-brand-light-gray rounded-md p-2" required>
                    <small id="email-feedback" class="text-sm mt-1"></small>
                </div>
                <div class="mb-4 relative">
                    <label for="password" class="text-sm font-medium flex items-center gap-1">
                        كلمة المرور
                        <span class="info-icon cursor-pointer text-blue-500" data-tippy-content="8 أحرف على الأقل، مع حرف كبير، رقم، ورمز خاص.">ℹ️</span>
                    </label>
                    <div class="relative">
                        <input type="password" id="password" name="password" minlength="8"
                                class="form-input w-full border border-brand-light-gray rounded-md p-2 pr-10" required>
                        <button type="button" id="toggle-password"
                                class="absolute inset-y-0 left-2 flex items-center text-brand-text hover:text-brand-text">👁️</button>
                    </div>
                    <small id="password-strength" class="text-sm mt-1"></small>
                    <div class="w-full bg-brand-light-gray rounded h-2 mt-2">
                        <div id="password-progress" class="h-2 rounded transition-all duration-300" style="width: 0%"></div>
                    </div>
                </div>
                <div class="mb-4 relative">
                    <label for="password_confirmation" class="block text-sm font-medium">تأكيد كلمة المرور</label>
                    <div class="relative">
                        <input type="password" id="password_confirmation" name="password_confirmation" minlength="8"
                                class="form-input w-full border border-brand-light-gray rounded-md p-2 pr-10" required>
                        <button type="button" id="toggle-password-confirm"
                                class="absolute inset-y-0 left-2 flex items-center text-brand-text hover:text-brand-text">👁️</button>
                    </div>
                    <small id="password-match" class="text-sm mt-1"></small>
                </div>
                <div class="flex justify-end mt-6">
                    <button type="button" @click="step = 2" class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700">التالي</button>
                </div>
            </div>

            {{-- الخطوة 2: معلومات الموقع --}}
            <div x-show="step === 2" x-cloak>
                <h2 class="text-xl font-semibold text-blue-800 mb-4">معلومات الموقع والجنس</h2>
                <div class="mb-4">
                    <label for="country_id" class="block text-sm font-medium">الدولة</label>
                    <select id="country_id" name="country_id"
                            class="form-select w-full border border-brand-light-gray rounded-md p-2" required>
                        <option value="">اختر الدولة</option>
                        @foreach($countries as $country)
                            <option value="{{ $country->id }}" {{ old('country_id') == $country->id ? 'selected' : '' }}>
                                {{ $country->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-4">
                    <label for="city_id" class="block text-sm font-medium">المدينة</label>
                    <select id="city_id" name="city_id"
                            class="form-select w-full border border-brand-light-gray rounded-md p-2"
                            required disabled>
                        <option value="">اختر المدينة</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="gender" class="block text-sm font-medium">الجنس</label>
                    <select id="gender" name="gender"
                            class="form-select w-full border border-brand-light-gray rounded-md p-2" required>
                        <option value="">اختر الجنس</option>
                        <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>ذكر</option>
                        <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>أنثى</option>
                    </select>
                </div>
                <div class="flex justify-between mt-6">
                    <button type="button" @click="step = 1" class="bg-brand-muted text-white px-6 py-2 rounded-md hover:bg-brand-text/70">السابق</button>
                    <button id="register-btn" type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">تسجيل الحساب</button>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    // ✅ Tooltips
    tippy('.info-icon', { placement: 'top', theme: 'light-border' });

    // ✅ Live Validation Inputs
    const emailInput = document.getElementById('email');
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    const passwordConfirmInput = document.getElementById('password_confirmation');
    const registerBtn = document.getElementById('register-btn');

    const emailFeedback = document.getElementById('email-feedback');
    const usernameFeedback = document.getElementById('username-feedback');
    const passwordStrength = document.getElementById('password-strength');
    const passwordProgress = document.getElementById('password-progress');
    const passwordMatch = document.getElementById('password-match');

    let emailValid = false, usernameValid = false, passwordStrong = false, passwordMatched = false;

    // دالة التحقق المباشر
    function setupLiveCheck(input, feedback, url, fieldName, setValid) {
        let debounce;
        input.addEventListener('input', () => {
            clearTimeout(debounce);
            const value = input.value.trim();
            if (!value) {
                feedback.textContent = '';
                setValid(false);
                updateButton();
                return;
            }
            debounce = setTimeout(() => {
                fetch(url, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                    body: JSON.stringify({ [fieldName]: value })
                })
                .then(res => res.json())
                .then(data => {
                    feedback.textContent = data.message;
                    setValid(!data.exists);
                    feedback.className = `text-sm mt-1 ${!data.exists ? 'text-green-600' : 'text-red-600'}`;
                    updateButton();
                })
                .catch(() => {
                    feedback.textContent = 'خطأ في التحقق.';
                    feedback.className = 'text-sm mt-1 text-red-600';
                    setValid(false);
                    updateButton();
                });
            }, 500);
        });
    }

    setupLiveCheck(emailInput, emailFeedback, "{{ route('check.email') }}", 'email', valid => emailValid = valid);
    setupLiveCheck(usernameInput, usernameFeedback, "{{ route('check.username') }}", 'username', valid => usernameValid = valid);

    // التحقق من قوة كلمة المرور
    passwordInput.addEventListener('input', () => {
        const val = passwordInput.value;
        let strength = 0;
        if (val.length >= 8) strength++;
        if (/[A-Z]/.test(val)) strength++;
        if (/[0-9]/.test(val)) strength++;
        if (/[^A-Za-z0-9]/.test(val)) strength++;

        const messages = ['ضعيفة جدًا', 'ضعيفة', 'متوسطة', 'قوية', 'قوية جدًا'];
        const widths = ['10%', '25%', '50%', '75%', '100%'];
        const colors = ['bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-green-400', 'bg-green-600'];

        passwordStrength.textContent = messages[strength];
        passwordStrength.className = `text-sm mt-1 text-center ${colors[strength]}`;
        passwordProgress.style.width = widths[strength];
        passwordProgress.className = `h-2 rounded transition-all duration-300 ${colors[strength]}`;

        passwordStrong = strength >= 3;
        checkMatch();
        updateButton();
    });

    // التحقق من تطابق كلمتي المرور
    function checkMatch() {
        if (!passwordInput.value || !passwordConfirmInput.value) {
            passwordMatch.textContent = '';
            passwordMatched = false;
            return;
        }
        if (passwordInput.value === passwordConfirmInput.value) {
            passwordMatch.textContent = 'كلمة المرور متطابقة ✅';
            passwordMatch.className = 'text-sm mt-1 text-green-600';
            passwordMatched = true;
        } else {
            passwordMatch.textContent = 'كلمة المرور غير متطابقة ❌';
            passwordMatch.className = 'text-sm mt-1 text-red-600';
            passwordMatched = false;
        }
    }
    passwordConfirmInput.addEventListener('input', () => { checkMatch(); updateButton(); });

    // تفعيل/تعطيل زر التسجيل بناءً على التحقق
    function updateButton() {
        registerBtn.disabled = !(emailValid && usernameValid && passwordStrong && passwordMatched);
    }

    // إظهار/إخفاء كلمة المرور
    document.getElementById('toggle-password').addEventListener('click', () => {
        const isHidden = passwordInput.type === 'password';
        passwordInput.type = isHidden ? 'text' : 'password';
        document.getElementById('toggle-password').textContent = isHidden ? '🙈' : '👁️';
    });
    document.getElementById('toggle-password-confirm').addEventListener('click', () => {
        const isHidden = passwordConfirmInput.type === 'password';
        passwordConfirmInput.type = isHidden ? 'text' : 'password';
        document.getElementById('toggle-password-confirm').textContent = isHidden ? '🙈' : '👁️';
    });

    // منطق جلب المدن ديناميكيًا
    const countrySelect = document.getElementById('country_id');
    const citySelect = document.getElementById('city_id');
    const initialCountry = "{{ old('country_id') }}";
    const initialCity = "{{ old('city_id') }}";

    async function fetchCities(countryId, selectedCity = null) {
        citySelect.options.length = 0;
        citySelect.appendChild(new Option('جارٍ التحميل...', '', false, false));
        citySelect.disabled = true;
        try {
            const endpoint = `${window.location.origin}/api/cities/${countryId}`;
            const response = await fetch(endpoint, {
                headers: { 'X-CSRF-TOKEN': csrfToken }
            });
            const data = await response.json();

            citySelect.options.length = 0;
            citySelect.appendChild(new Option('اختر المدينة', '', false, false));

            if (Array.isArray(data)) {
                data.forEach(row => {
                    if (row && typeof row.id !== 'undefined' && row.name) {
                        const isSelected = String(selectedCity || '') === String(row.id);
                        citySelect.appendChild(new Option(row.name, row.id, isSelected, isSelected));
                    }
                });
            } else if (data && data.error) {
                // API returned an error object
                citySelect.appendChild(new Option('فشل تحميل المدن', '', false, false));
                console.error('Cities API error:', data.error);
            }

            citySelect.disabled = citySelect.options.length <= 1; // only placeholder exists
        } catch (error) {
            citySelect.options.length = 0;
            citySelect.appendChild(new Option('فشل تحميل المدن', '', false, false));
            console.error('Error fetching cities:', error);
        }
    }

    if (countrySelect) {
        countrySelect.addEventListener('change', function () {
            if (this.value) {
                fetchCities(this.value);
            } else {
                citySelect.options.length = 0;
                citySelect.appendChild(new Option('اختر المدينة', '', false, false));
                citySelect.disabled = true;
            }
        });
    }

    if (initialCountry) {
        fetchCities(initialCountry, initialCity);
    }
});
</script>
@endpush
@endsection