@extends('user.layouts.app')

@section('title', 'إنشاء حساب جديد')

@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            <x-lucide-user-plus width="24" height="24" />
            <div class="page-header--title">
                <h1>إنشاء حساب جديد</h1>
            </div>
        </div>

        <div class="container" style="max-width: 580px;">
            <div class="form-container">
                <div class="form-header">
                    <h2>انضم إلينا</h2>
                    <p style="color: var(--color-gray-500); margin: 0;">استمتع بجميع الخدمات المميزة</p>
                </div>

                @if ($errors->any())
                    <div class="alert alert-danger"
                        style="background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); color: #dc3545; padding: 1rem; border-radius: 0.5rem;">
                        <ul style="list-style: none; padding: 0; margin: 0;">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('register') }}" method="POST">
                    @csrf

                    <div class="form-row dynamic-cols-2">
                        <div class="input-group">
                            <label for="name">الاسم الكامل</label>
                            <div class="input-wrapper">
                                <input type="text" id="name" name="name" placeholder="أدخل اسمك الكامل" required
                                    autocomplete="name" value="{{ old('name') }}">
                            </div>
                            @error('name')
                                <span class="error-text">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="input-group">
                            <label for="mobile">رقم الهاتف</label>
                            <div class="input-wrapper">
                                <input type="tel" id="mobile" name="mobile" placeholder="أدخل رقم هاتفك" required
                                    autocomplete="tel" value="{{ old('mobile') }}">
                            </div>
                            @error('mobile')
                                <span class="error-text">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="input-group">
                        <label for="email">البريد الإلكتروني</label>
                        <div class="input-wrapper">
                            <input type="email" id="email" name="email" placeholder="أدخل بريدك الإلكتروني" required
                                autocomplete="email" value="{{ old('email') }}">
                        </div>
                        @error('email')
                            <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="input-group">
                        <label for="country_id">الدولة</label>
                        <div class="input-wrapper">
                            <select id="country_id" name="country_id"
                                style="flex: 1; border: none; padding: 0.75rem 1rem; font-size: 1rem; background: transparent; color: inherit; width: 100%;">
                                <option value="" {{ old('country_id') ? '' : 'selected' }}>— اختر دولتك (اختياري) —
                                </option>
                                @foreach (\App\Models\Country::registrationEnabled()->orderBy('name_ar')->get() as $country)
                                    <option value="{{ $country->id }}"
                                        {{ old('country_id') == $country->id ? 'selected' : '' }}>
                                        {{ $country->emoji }} {{ $country->name_ar }} ({{ $country->phone_code }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @error('country_id')
                            <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>


                    <div class="input-group">
                        <label for="password">كلمة المرور</label>
                        <div class="input-wrapper">
                            <input type="password" id="password" name="password" placeholder="أدخل كلمة المرور" required
                                autocomplete="new-password">
                        </div>
                        @error('password')
                            <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="input-group">
                        <label for="password_confirmation">تأكيد كلمة المرور</label>
                        <div class="input-wrapper">
                            <input type="password" id="password_confirmation" name="password_confirmation"
                                placeholder="أعد إدخال كلمة المرور" required autocomplete="new-password">
                        </div>
                        @error('password_confirmation')
                            <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>
            </div>

            <div class="input-group">
                <label for="currency_id">العملة المفضلة</label>
                @if (!empty($vendorReferralInfo['is_vendor_referral']) && $vendorReferralInfo['currency_id'])
                    {{-- Vendor referral: currency is fixed to vendor's currency --}}
                    <input type="hidden" name="currency_id" value="{{ $vendorReferralInfo['currency_id'] }}">
                    <div class="input-wrapper">
                        <div style="flex: 1; padding: 0.75rem 1rem; font-size: 1rem; color: var(--color-gray-500);">
                            @php
                                $vendorCurrency = \App\Models\Currency::find($vendorReferralInfo['currency_id']);
                            @endphp
                            {{ $vendorCurrency?->name ?? 'العملة محددة تلقائياً' }}
                            <small style="display: block; margin-top: 0.25rem; font-size: 0.8rem;">
                                (محددة من قبل التاجر {{ $vendorReferralInfo['vendor_name'] ?? '' }})
                            </small>
                        </div>
                    </div>
                @else
                    {{-- Normal registration: user can choose currency --}}
                    <div class="input-wrapper">
                        <select id="currency_id" name="currency_id" required
                            style="flex: 1; border: none; padding: 0.75rem 1rem; font-size: 1rem; background: transparent; color: inherit; width: 100%;">
                            <option value="" disabled selected>اختر العملة</option>
                            @foreach (\App\Models\Currency::all() as $currency)
                                <option value="{{ $currency->id }}"
                                    {{ old('currency_id') == $currency->id ? 'selected' : '' }}>
                                    {{ $currency->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                @endif
                @error('currency_id')
                    <span class="error-text">{{ $message }}</span>
                @enderror
            </div>

            @if (isset($imj))
                <div class="input-group">
                    <label>حل اللغز التالي</label>
                    <div style="display: flex; gap: 1rem; align-items: center;">
                        <div class="input-wrapper" style="flex: 1;">
                            <input type="number" id="answer" name="answer" placeholder="أدخل الإجابة" required>
                        </div>
                        <img src="{{ $imj }}"
                            style="width: 80px; height: 80px; object-fit: cover; border-radius: 0.5rem;"
                            alt="Puzzle Captcha">
                    </div>
                    @error('answer')
                        <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>
            @endif

            <div class="input-group" style="flex-direction: row; align-items: flex-start; gap: 0.5rem;">
                <input type="checkbox" id="accept_terms" name="accept_terms" value="1" required
                    {{ old('accept_terms') ? 'checked' : '' }}
                    style="width: 1.25rem; height: 1.25rem; cursor: pointer; margin-top: 0.25rem; appearance: auto; -webkit-appearance: checkbox; -moz-appearance: checkbox;">
                <label for="accept_terms" style="cursor: pointer; margin: 0; line-height: 1.5;">
                    أقر أنني قرأت ووافقت على
                    <a href="{{ route('static.terms') }}" target="_blank"
                        style="color: var(--color-primary-500);">الشروط والأحكام</a>
                </label>
                @error('accept_terms')
                    <span class="error-text">{{ $message }}</span>
                @enderror
            </div>

            <button type="submit" class="submit-btn">
                <x-lucide-user-plus class="me-2" width="18" height="18" />
                إنشاء حساب
            </button>
            </form>

            <div style="text-align: center; margin-top: 1rem; color: var(--color-gray-500);">
                لديك حساب بالفعل؟
                <a href="{{ route('login') }}" style="color: var(--color-primary-500); font-weight: 600;">تسجيل
                    الدخول</a>
            </div>
        </div>
    </div>
    </div>
@endsection