@php
    $activeFlow = request('flow', session('auth_flow'));
    $activeReturnTo = request('return_to', session('auth_return_to'));
    $activeChatRef = request('chat_ref', session('chat_ref'));
    $activeRefCode = old('referral_code', request('ref', request('referral_code', session('referral_code'))));
    $hasSpecialInvite = !empty($activeChatRef) || !empty($activeRefCode);
@endphp
@extends('frontend.main_master')
@section('page-context', 'register')
@section('body-class', 'login-page register-page' . ($hasSpecialInvite ? ' has-invite-banner' : ''))
@section('no-header', 'true')
@section('no-footer', 'true')
@section('title', t('register') . ' - ' . t('site-title'))
@push('styles')
    <link rel="stylesheet" href="{{ asset('frontend/css/auth/login-page.css') }}?v={{ filemtime(public_path('frontend/css/auth/login-page.css')) }}">
    <link rel="stylesheet" href="{{ asset('frontend/css/auth/register-page.css') }}?v={{ filemtime(public_path('frontend/css/auth/register-page.css')) }}">
@endpush
@section('content')
    <div class="container-fluid p-0 login-auth-shell">
        <div class="row g-0 login-auth-row">
            <!-- Sol Masaüstü Animasyon / Grafik Bölümü -->
            <div
                class="col-lg-6 d-none d-lg-flex align-items-center justify-content-center login-graphic-section overflow-hidden">
                <div class="astrological-circle text-center">
                    <img src="{{ asset('assets/firstSlider.gif') }}" alt="Astrolojik Grafik" class="img-fluid w-75">
                </div>
            </div>

            <!-- Sağ Form Bölümü - Masaüstü Sağ / Mobil Tek Sütun -->
            <div
                class="col-12 col-lg-6 d-flex align-items-center justify-content-center login-form-section">
                <div class="login-wrapper w-100 p-2 p-sm-3 p-md-5 my-lg-auto">
                    {{-- Logo --}}
                    <div class="d-flex justify-content-center mb-4 mb-sm-3">
                        <img src="{{ site_setting('site_logo_gif', 'assets/processed.webp') }}"
                            alt="{{ t('site-title') }}" class="img-fluid object-fit-contain login-logo-img">
                    </div>
                    <div class="col-12 d-none mb-2 mb-sm-3 mb-md-4 justify-content-center">
                        <div class="astrological-circle text-center">
                            <img src="{{ asset('assets/firstSlider.gif') }}" alt="Astrolojik Grafik"
                                class="img-fluid login-mobile-gif">
                        </div>
                    </div>
                    <h2 class="h4 fs-5 mb-2 mb-sm-3 mb-md-4 fw-bold text-center login-heading-color">
                        Aramıza Katıl
                    </h2>
                    <form action="{{ route('register') }}" method="POST" class="login-form">
                        @csrf
                        @if($activeFlow)
                            <input type="hidden" name="flow" value="{{ $activeFlow }}">
                        @endif
                        @if($activeReturnTo)
                            <input type="hidden" name="return_to" value="{{ $activeReturnTo }}">
                        @endif
                        @if($activeChatRef)
                            <input type="hidden" name="chat_ref" value="{{ $activeChatRef }}">
                        @endif

                        <div id="specialInviteAlert" class="alert alert-success border-0 py-2 px-3 mb-2 align-items-center gap-2 rounded-3 text-dark register-invite-banner {{ $hasSpecialInvite ? 'd-flex' : 'd-none' }}" style="background: #e8f5e9; border-left: 4px solid #10b981 !important;">
                            <i class="bi bi-gift-fill fs-5 text-success flex-shrink-0"></i>
                            <div class="small">
                                <strong>Özel Davet:</strong> Telefon doğrulamanızı tamamlayıp panele giriş yaptığınızda hesabınıza <strong>1.000 Token</strong> tanımlanacaktır!
                            </div>
                        </div>

                        @if($activeFlow === 'site_builder')
                            <div class="alert alert-warning border-0 py-2 px-3 mb-3 d-flex align-items-center gap-2 rounded-3 text-dark" style="background: #fff8e6; border-left: 4px solid #f59e0b !important;">
                                <i class="bi bi-globe fs-5 text-warning"></i>
                                <div class="small">
                                    <strong>Web Sitenizi Oluşturun:</strong> Çatı hesabınızı açtıktan sonra otomatik olarak web sitesi kurma sihirbazına döneceksiniz.
                                </div>
                            </div>
                        @elseif($activeFlow === 'api_panel')
                            <div class="alert alert-primary border-0 py-2 px-3 mb-3 d-flex align-items-center gap-2 rounded-3 text-dark" style="background: #eff6ff; border-left: 4px solid #3b82f6 !important;">
                                <i class="bi bi-code-slash fs-5 text-primary"></i>
                                <div class="small">
                                    <strong>API Platformu:</strong> Çatı hesabınızı açtıktan sonra otomatik olarak API müşteri panelinize aktarılacaksınız.
                                </div>
                            </div>
                        @endif
                        @if(session('already_registered_hint'))
                            <div class="alert alert-info border-0 shadow-sm mb-3 d-flex align-items-start gap-2" role="alert">
                                <i class="bi bi-info-circle-fill mt-1 flex-shrink-0"></i>
                                <div>
                                    <strong>Zaten kayıtlısınız.</strong> Bu e-posta veya telefon daha önce kullanılmış. Giriş yapıp telefon doğrulamasını tamamlayabilirsiniz.
                                    <a href="{{ route('login') }}" class="alert-link fw-semibold ms-1">Giriş yap →</a>
                                </div>
                            </div>
                        @endif
                        <!-- Personal Information Section -->
                        <div class="form-section mb-2 mb-md-2">
                            <div class="row g-2 mb-1">
                                <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                                    <label for="name" class="form-label">{{ t('name') }}</label>
                                    <input type="text" class="form-control login-input" id="name" name="name"
                                        value="{{ old('name') }}" required autocomplete="given-name">
                                    @error('name')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                                    <label for="last_name" class="form-label">{{ t('lastname') }}</label>
                                    <input type="text" class="form-control login-input" id="last_name"
                                        name="last_name" value="{{ old('last_name') }}" required
                                        autocomplete="family-name">
                                    @error('last_name')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="row g-2 mb-1">
                                <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                                    <label for="email" class="form-label">{{ t('e-mail') }}</label>
                                    <input type="email" class="form-control login-input" id="email" name="email"
                                        value="{{ old('email') }}" required autocomplete="email">
                                    @error('email')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                                    <label for="phone" class="form-label">{{ t('phone') }}</label>
                                    <input type="tel" class="form-control login-input" id="phone" name="phone"
                                        value="{{ old('phone') }}" placeholder="05XX XXX XX XX" autocomplete="tel"
                                        pattern="^(0)?5[0-9]{2}\s?[0-9]{3}\s?[0-9]{2}\s?[0-9]{2}$|^(0)?5[0-9]{9}$"
                                        required>
                                    @error('phone')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="row g-2 mb-1">
                                <div class="col-12">
                                    <label for="referral_code" class="form-label">Referans Kodu <span class="text-muted small">(opsiyonel)</span></label>
                                    <input type="text" class="form-control login-input" id="referral_code"
                                        name="referral_code" value="{{ old('referral_code', $activeRefCode) }}"
                                        placeholder="Varsa referans kodunuzu girin" autocomplete="off">
                                    <div id="referralCodeFeedback" class="small mt-1"></div>
                                    @error('referral_code')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                        </div>

                        <!-- Birth Information Section -->
                        <div class="form-section mb-2 mb-md-2">
                            <div class="row g-2 mb-1">
                                <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                                    <label for="birth_date" class="form-label">{{ t('date-of-birth') }}</label>
                                    @php
                                        $oldBirthDate = old('birth_date');
                                        if ($oldBirthDate && preg_match('/^\d{4}-\d{2}-\d{2}$/', $oldBirthDate)) {
                                            $oldBirthDate = \Carbon\Carbon::parse($oldBirthDate)->format('d.m.Y');
                                        }
                                    @endphp
                                    <input type="text" class="form-control login-input birth-date-mask" id="birth_date"
                                        name="birth_date" value="{{ $oldBirthDate }}" placeholder="GG.AA.YYYY" 
                                        maxlength="10" required autocomplete="off">
                                    @error('birth_date')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                                    <label for="birth_time" class="form-label">{{ t('birth-time') }}</label>
                                    @php
                                        $oldBirthTime = old('birth_time');
                                        if ($oldBirthTime && preg_match('/^\d{2}:\d{2}:\d{2}$/', $oldBirthTime)) {
                                            $oldBirthTime = substr($oldBirthTime, 0, 5);
                                        }
                                    @endphp
                                    <input type="text" class="form-control login-input birth-time-mask" id="birth_time"
                                        name="birth_time" value="{{ $oldBirthTime }}" placeholder="SS:DD"
                                        maxlength="5" autocomplete="off">
                                    @error('birth_time')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                    <div class="mt-1">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="unknown_birth_time"
                                                name="unknown_birth_time" onchange="handleUnknownBirthTime(this)">
                                            <label class="form-check-label" for="unknown_birth_time">
                                                {{ t('unknown-birth-time') }}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row g-2 mb-1">
                                <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                                    <label for="birth_place" class="form-label">{{ t('birthplace') }}</label>
                                    <input type="hidden" id="birth_place_id" name="birth_place_id"
                                        value="{{ old('birth_place_id') }}">
                                    <div class="position-relative">
                                        <input type="text" class="form-control login-input" id="birth_place"
                                            name="birth_place" value="{{ old('birth_place') }}"
                                            placeholder="{{ t('birthplace') }}" autocomplete="off" required>
                                        <div id="birthPlaceResults"
                                            class="list-group position-absolute w-100 shadow birth-place-dropdown d-none overflow-auto">
                                        </div>
                                    </div>
                                    @error('birth_place_id')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                                    <label for="gender" class="form-label">{{ t('gender') }}</label>
                                    <select class="form-select login-input" id="gender" name="gender"
                                        required>
                                        <option value="" disabled selected>
                                            {{ t('select-gender') }}</option>
                                        <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>
                                            {{ t('male') }}
                                        </option>
                                        <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>
                                            {{ t('female') }}
                                        </option>
                                    </select>
                                    @error('gender')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                        </div>

                        <!-- Password Section -->
                        <div class="form-section mb-2 mb-md-2">
                            <div class="row g-2 mb-1">
                                <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                                    <label for="password" class="form-label">{{ t('password') }}</label>
                                    <div class="password-input-wrapper">
                                        <input type="password" class="form-control login-input" id="password"
                                            name="password" required autocomplete="new-password">
                                        <button type="button" class="btn-password-toggle"
                                            aria-label="Sifreyi goster" data-password-toggle="password"
                                            title="Sifreyi goster">
                                            <i class="bi bi-eye" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                    @error('password')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                    <small class="form-text text-muted d-block mt-1 password-hint-text">
                                        {{ __('validation.custom.password.min') }}
                                    </small>
                                </div>
                                <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                                    <label for="password_confirmation"
                                        class="form-label">{{ t('repeat-password') }}</label>
                                    <div class="password-input-wrapper">
                                        <input type="password" class="form-control login-input"
                                            id="password_confirmation" name="password_confirmation" required
                                            autocomplete="new-password">
                                        <button type="button" class="btn-password-toggle"
                                            aria-label="Sifreyi goster" data-password-toggle="password_confirmation"
                                            title="Sifreyi goster">
                                            <i class="bi bi-eye" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Terms Agreement Section -->
                        <div class="mb-2">
                            <div class="form-check terms-checkbox-wrapper">
                                <input class="form-check-input terms-checkbox-custom" type="checkbox" name="terms"
                                    id="terms" required>
                                <label class="form-check-label terms-label-custom" for="terms">
                                    <span class="terms-icon-wrapper">
                                        <i class="bi bi-shield-check-fill terms-icon"></i>
                                    </span>
                                    <span class="terms-text-wrapper">
                                        <a href="#" class="terms-link-custom" data-bs-toggle="modal"
                                            data-bs-target="#termsModal" data-modal-type="user-agreement">
                                            {{ t('privacy-policy') }}
                                        </a>
                                        <span class="terms-separator-custom">{{ t('and') }}</span>
                                        <a href="#" class="terms-link-custom" data-bs-toggle="modal"
                                            data-bs-target="#kvkkModal" data-modal-type="privacy-policy">
                                            {{ t('personal-data-processing-information') }}
                                        </a>
                                        <span class="terms-accept-custom">
                                            {{ t('i-read-and-accept') }}
                                        </span>
                                    </span>
                                </label>
                            </div>
                            @error('terms')
                                <span class="text-danger small d-block mt-2">{{ $message }}</span>
                            @enderror
                        </div>

                        <button type="submit" class="btn btn-register btn-lg w-100 mb-2 mb-sm-3 mb-md-4 shadow-sm"
                            id="register-submit-btn">
                            <span class="register-btn-text">{{ t('register') }}</span>
                            <span class="spinner-border spinner-border-sm ms-2 d-none" role="status"
                                aria-hidden="true"></span>
                        </button>

                        @if(($socialAuth['google'] ?? false) || ($socialAuth['facebook'] ?? false))
                        <div class="position-relative mb-2 mb-sm-3 mb-md-4 text-center">
                            <hr>
                            <span class="position-absolute top-50 start-50 translate-middle bg-white px-3 text-muted small">
                                {{ t('or') }}
                            </span>
                        </div>
                        <div class="row g-2 mb-2 mb-sm-3 mb-md-4">
                            @if($socialAuth['google'] ?? false)
                            <div class="col-12 col-sm-6">
                                <a href="{{ route('auth.google') }}"
                                    class="btn btn-outline-dark w-100 d-flex align-items-center justify-content-center py-2">
                                    <svg class="me-2" width="18" height="18" viewBox="0 0 18 18">
                                        <path fill="#4285F4"
                                            d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z" />
                                        <path fill="#34A853"
                                            d="M9 18c2.43 0 4.467-.806 5.96-2.184l-2.908-2.258c-.806.54-1.837.86-3.052.86-2.347 0-4.335-1.585-5.043-3.714H.957v2.332C2.438 15.983 5.482 18 9 18z" />
                                        <path fill="#FBBC05"
                                            d="M3.957 10.704c-.18-.54-.282-1.117-.282-1.704s.102-1.164.282-1.704V4.964H.957C.348 6.175 0 7.55 0 9s.348 2.825.957 4.036l3-2.332z" />
                                        <path fill="#EA4335"
                                            d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.964L3.957 7.296C4.665 5.167 6.653 3.58 9 3.58z" />
                                    </svg>
                                    <span class="small text-nowrap">Google</span>
                                </a>
                            </div>
                            @endif
                            @if($socialAuth['facebook'] ?? false)
                            <div class="col-12 col-sm-6">
                                <a href="{{ route('auth.facebook') }}"
                                    class="btn btn-primary w-100 d-flex align-items-center justify-content-center py-2"
                                    style="background-color: #1877F2;">
                                    <svg class="me-2" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path
                                            d="M18 9C18 4.03 13.97 0 9 0S0 4.03 0 9c0 4.5 3.3 8.22 7.61 8.9v-6.3H5.31V9h2.3V7.02c0-2.27 1.35-3.52 3.42-3.52.99 0 2.03.18 2.03.18v2.23h-1.14c-1.13 0-1.48.7-1.48 1.42V9h2.51l-.4 2.6h-2.11v6.3C14.7 17.22 18 13.5 18 9z"
                                            fill="#ffffff" />
                                    </svg>
                                    <span class="small text-nowrap">Facebook</span>
                                </a>
                            </div>
                            @endif
                        </div>
                        @endif

                        <div class="text-center">
                            <p class="signup-text mb-0">
                                {{ t('have-account') }}
                                <a href="{{ route('login') }}" class="signup-link fw-bold text-decoration-none login-heading-color">
                                    {{ t('login') }}
                                </a>
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Gizlilik Politikası: /privacy-policy ile aynı içerik --}}
    <x-terms-modal id="termsModal" title="{{ t('privacy-policy') }}"
        content-view="frontend.legal.privacy-policy-content" />

    {{-- KVKK: /kvkk sayfası ile aynı içerik (kvkk-content partial) --}}
    <x-terms-modal id="kvkkModal" title="{{ t('personal-data-processing-information') }}"
        content-view="frontend.legal.kvkk-content" />
@endsection

@push('scripts')
    <script>
        function handleUnknownBirthTime(checkbox) {
            const birthTimeInput = document.getElementById('birth_time');
            if (birthTimeInput) {
                birthTimeInput.disabled = checkbox.checked;
                if (checkbox.checked) {
                    birthTimeInput.value = '';
                }
            }
        }

        // HTML5 Validation mesajlarını Türkçeleştirme
        document.addEventListener('DOMContentLoaded', function() {
            function clearInlineFieldError(input) {
                if (!input) return;
                input.classList.remove('is-invalid');
                const next = input.nextElementSibling;
                if (next && next.classList.contains('client-invalid-feedback')) {
                    next.remove();
                }
            }

            function setInlineFieldError(input, message) {
                if (!input || !message) return;
                clearInlineFieldError(input);
                input.classList.add('is-invalid');
                const feedback = document.createElement('div');
                feedback.className = 'invalid-feedback d-block client-invalid-feedback';
                feedback.textContent = message;
                input.insertAdjacentElement('afterend', feedback);
            }

            function isValidRealDateDMY(value) {
                if (!/^\d{2}\.\d{2}\.\d{4}$/.test(value || '')) return false;
                const [dStr, mStr, yStr] = value.split('.');
                const day = Number(dStr);
                const month = Number(mStr);
                const year = Number(yStr);
                if (year < 1900 || year > 2100) return false;
                if (month < 1 || month > 12) return false;
                const date = new Date(year, month - 1, day);
                return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
            }

            function isValidRealTimeHM(value) {
                if (!/^\d{2}:\d{2}$/.test(value || '')) return false;
                const [hStr, mStr] = value.split(':');
                const hour = Number(hStr);
                const minute = Number(mStr);
                return Number.isInteger(hour) &&
                    Number.isInteger(minute) &&
                    hour >= 0 && hour <= 23 &&
                    minute >= 0 && minute <= 59;
            }

            const form = document.querySelector('.login-form');
            if (!form) return;
            const inputs = form.querySelectorAll('input[required]');
            const birthTimeOptionalInput = document.getElementById('birth_time');

            // Her input için Türkçe validation mesajları
            inputs.forEach(input => {
                input.addEventListener('invalid', function(e) {
                    e.preventDefault();

                    let message = '';
                    const fieldName = input.getAttribute('name');
                    const label = form.querySelector(`label[for="${input.id}"]`)?.textContent ||
                        fieldName;

                    if (input.validity.valueMissing) {
                        if (fieldName === 'email') {
                            message = (window.I18N && window.I18N.REG_REQUIRED_EMAIL) || '';
                        } else if (fieldName === 'password') {
                            message = (window.I18N && window.I18N.REG_REQUIRED_PASSWORD) || '';
                        } else if (fieldName === 'password_confirmation') {
                            message = (window.I18N && window.I18N.REG_REQUIRED_PASSWORD_CONFIRM) || '';
                        } else if (fieldName === 'name') {
                            message = (window.I18N && window.I18N.REG_REQUIRED_FIRST_NAME) || '';
                        } else if (fieldName === 'last_name') {
                            message = (window.I18N && window.I18N.REG_REQUIRED_LAST_NAME) || '';
                        } else if (fieldName === 'gender') {
                            message = (window.I18N && window.I18N.REG_REQUIRED_GENDER) || '';
                        } else if (fieldName === 'birth_date') {
                            message = (window.I18N && window.I18N.REG_REQUIRED_BIRTH_DATE) || 'Doğum tarihi gereklidir.';
                        } else if (fieldName === 'birth_time' && !document.getElementById('unknown_birth_time')?.checked) {
                            message = 'Doğum saati gereklidir.';
                        } else if (fieldName === 'birth_place') {
                            message = (window.I18N && window.I18N.REG_REQUIRED_BIRTH_PLACE) || '';
                        } else if (fieldName === 'phone') {
                            message = (window.I18N && window.I18N.REG_REQUIRED_PHONE) || '';
                        } else {
                            const suffix = (window.I18N && window.I18N.REG_FILL_FIELD_SUFFIX) || '';
                            message = `${label}${suffix}`;
                        }
                    } else if (input.id === 'birth_date' && input.value && !isValidRealDateDMY(input.value)) {
                        message = 'Lütfen geçerli bir doğum tarihi girin (GG.AA.YYYY).';
                    } else if (input.id === 'birth_time' && input.value && !isValidRealTimeHM(input.value)) {
                        message = 'Lütfen geçerli bir doğum saati girin (SS:DD).';
                    } else if (input.validity.typeMismatch) {
                        if (input.type === 'email') {
                            message = (window.I18N && window.I18N.REG_EMAIL_INVALID) || '';
                        } else if (input.type === 'tel') {
                            message = (window.I18N && window.I18N.REG_TEL_INVALID) || '';
                        } else {
                            message = (window.I18N && window.I18N.REG_VALUE_INVALID) || '';
                        }
                    } else if (input.validity.patternMismatch) {
                        if (fieldName === 'phone') {
                            message =
                                (window.I18N && window.I18N.REG_PHONE_PATTERN_INVALID) || '';
                        } else {
                            message = (window.I18N && window.I18N.REG_FORMAT_INVALID) || '';
                        }
                    }

                    input.setCustomValidity(message);

                    // Mesajı göster
                    if (message) {
                        if (input.id === 'birth_date' || input.id === 'birth_time') {
                            setInlineFieldError(input, message);
                        }
                        input.reportValidity();
                    }
                });

                // Input değeri değiştiğinde custom validity'yi temizle
                input.addEventListener('input', function() {
                    input.setCustomValidity('');
                    if (input.id === 'birth_date' || input.id === 'birth_time') {
                        clearInlineFieldError(input);
                    }
                });
            });

            // birth_time required olmadığı için ayrı temizleme bağla
            if (birthTimeOptionalInput) {
                birthTimeOptionalInput.addEventListener('input', function() {
                    birthTimeOptionalInput.setCustomValidity('');
                    clearInlineFieldError(birthTimeOptionalInput);
                });
            }

            const unknownBirthTimeInput = document.getElementById('unknown_birth_time');
            if (unknownBirthTimeInput) {
                unknownBirthTimeInput.addEventListener('change', function() {
                    if (this.checked) {
                        const birthTimeInput = document.getElementById('birth_time');
                        if (birthTimeInput) {
                            birthTimeInput.setCustomValidity('');
                            clearInlineFieldError(birthTimeInput);
                        }
                    }
                });
            }

            // Form submit edildiğinde kontrol et
            form.addEventListener('submit', function(e) {
                // CSRF token'ı kontrol et ve güncelle
                const csrfToken = document.querySelector('meta[name="csrf-token"]');
                if (csrfToken) {
                    const csrfInput = form.querySelector('input[name="_token"]');
                    if (csrfInput) {
                        csrfInput.value = csrfToken.getAttribute('content');
                    }
                }

                let isValid = true;
                const birthDateInput = document.getElementById('birth_date');
                if (birthDateInput) {
                    birthDateInput.setCustomValidity('');
                    clearInlineFieldError(birthDateInput);
                }
                if (birthDateInput && birthDateInput.value && !isValidRealDateDMY(birthDateInput.value)) {
                    isValid = false;
                    const message = 'Lütfen geçerli bir doğum tarihi girin (GG.AA.YYYY).';
                    birthDateInput.setCustomValidity(message);
                    setInlineFieldError(birthDateInput, message);
                    birthDateInput.reportValidity();
                }
                const birthTimeInput = document.getElementById('birth_time');
                const unknownBirthTimeInput = document.getElementById('unknown_birth_time');
                const isUnknownBirthTime = !!(unknownBirthTimeInput && unknownBirthTimeInput.checked);
                if (birthTimeInput) {
                    birthTimeInput.setCustomValidity('');
                    clearInlineFieldError(birthTimeInput);
                }
                if (birthTimeInput && birthTimeInput.value && !isUnknownBirthTime && !isValidRealTimeHM(birthTimeInput.value)) {
                    isValid = false;
                    const message = 'Lütfen geçerli bir doğum saati girin (SS:DD).';
                    birthTimeInput.setCustomValidity(message);
                    setInlineFieldError(birthTimeInput, message);
                    birthTimeInput.reportValidity();
                }

                inputs.forEach(input => {
                    if (!input.validity.valid) {
                        isValid = false;
                        input.reportValidity();
                    }
                });
                if (!isValid) {
                    e.preventDefault();
                    return;
                }

                const submitBtn = form.querySelector('#register-submit-btn');
                if (submitBtn) {
                    const spinner = submitBtn.querySelector('.spinner-border');
                    if (spinner) {
                        spinner.classList.remove('d-none');
                    }
                }
            });
        });
    </script>

    {{-- Terms Modal Control Script --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const termsCheckbox = document.getElementById('terms');
            const termsWrapper = document.querySelector('.terms-checkbox-wrapper');
            const termsModalEl = document.getElementById('termsModal');
            const kvkkModalEl = document.getElementById('kvkkModal');
            if (!termsCheckbox || !termsModalEl || !kvkkModalEl) return;

            const termsModal = new bootstrap.Modal(termsModalEl);
            const kvkkModal = new bootstrap.Modal(kvkkModalEl);

            const readModals = {
                'user-agreement': false,
                'privacy-policy': false
            };
            let chainedFromCheckbox = false;

            function clearShakeAnimation() {
                if (termsWrapper) {
                    termsWrapper.classList.remove('shake-error');
                }
            }

            function markLinkAsRead(modalType) {
                var link = document.querySelector(
                    '.terms-link-custom[data-modal-type="' + modalType + '"]'
                );
                if (link) link.classList.add('terms-link-read');
            }

            function checkAndEnableCheckbox() {
                if (readModals['user-agreement'] && readModals['privacy-policy']) {
                    termsCheckbox.checked = true;
                    clearShakeAnimation();
                }
            }

            document.querySelectorAll('.terms-accept-btn').forEach(function(button) {
                button.addEventListener('click', function() {
                    var modalId = this.getAttribute('data-modal-id');
                    var modalType = modalId === 'termsModal' ? 'user-agreement' : 'privacy-policy';

                    readModals[modalType] = true;
                    markLinkAsRead(modalType);

                    if (chainedFromCheckbox && modalType === 'user-agreement' && !readModals[
                            'privacy-policy']) {
                        termsModalEl.addEventListener('hidden.bs.modal', function openKvkk() {
                            termsModalEl.removeEventListener('hidden.bs.modal', openKvkk);
                            kvkkModal.show();
                        });
                    } else if (chainedFromCheckbox && modalType === 'privacy-policy') {
                        chainedFromCheckbox = false;
                    }

                    checkAndEnableCheckbox();
                });
            });

            termsCheckbox.addEventListener('click', function(e) {
                if (!readModals['user-agreement'] || !readModals['privacy-policy']) {
                    e.preventDefault();
                    this.checked = false;
                    chainedFromCheckbox = true;

                    if (!readModals['user-agreement']) {
                        termsModal.show();
                    } else if (!readModals['privacy-policy']) {
                        kvkkModal.show();
                    }
                    return;
                }

                if (this.checked) {
                    clearShakeAnimation();
                }
            });

            // Form submit kontrolü - detaylı validasyon mesajları
            const loginForm = document.querySelector('.login-form');
            const birthPlaceListMsg = (window.I18N && window.I18N.REG_BIRTH_PLACE_LIST_REQUIRED) ||
                'Lütfen doğum yerinizi listeden seçin.';

            window.registerBirthPlaceClearInline = function() {
                const inp = document.getElementById('birth_place');
                if (!inp) {
                    return;
                }
                inp.classList.remove('is-invalid');
                let n = inp.nextElementSibling;
                while (n && n.classList && n.classList.contains('register-birthplace-feedback')) {
                    const rm = n;
                    n = n.nextElementSibling;
                    rm.remove();
                }
            };

            window.registerBirthPlaceSetInline = function(msg) {
                const inp = document.getElementById('birth_place');
                if (!inp || !msg) {
                    return;
                }
                window.registerBirthPlaceClearInline();
                inp.classList.add('is-invalid');
                const fb = document.createElement('div');
                fb.className = 'invalid-feedback d-block register-birthplace-feedback';
                fb.textContent = msg;
                inp.insertAdjacentElement('afterend', fb);
            };

            if (loginForm) {
                loginForm.addEventListener('submit', function(e) {
                    let hasError = false;
                    let errorMessage = '';

                    // Önce shake animasyonunu temizle
                    clearShakeAnimation();

                    // 1. Terms kontrolü
                    if (!readModals['user-agreement'] || !readModals['privacy-policy']) {
                        e.preventDefault();
                        e.stopPropagation();
                        hasError = true;

                        const missing = [];
                        if (!readModals['user-agreement']) {
                            missing.push(
                                (window.I18N && window.I18N.REG_TERMS_MISSING_USER_AGREEMENT) || ''
                            );
                        }
                        if (!readModals['privacy-policy']) {
                            missing.push(
                                (window.I18N && window.I18N.REG_TERMS_MISSING_PRIVACY_POLICY) || ''
                            );
                        }

                        const prefix = (window.I18N && window.I18N.REG_TERMS_MESSAGE_PREFIX) || '';
                        const suffix = (window.I18N && window.I18N.REG_TERMS_MESSAGE_SUFFIX) || '';
                        errorMessage = prefix + missing.join(' ve ') + suffix;
                        termsCheckbox.setCustomValidity(errorMessage);
                        termsCheckbox.reportValidity();
                        termsCheckbox.setCustomValidity('');
                        termsCheckbox.focus();

                        // Shake animasyonu ekle
                        if (termsWrapper) {
                            termsWrapper.classList.add('shake-error');
                            setTimeout(() => {
                                termsWrapper.classList.remove('shake-error');
                            }, 600);
                        }

                        return false;
                    }

                    if (!termsCheckbox.checked) {
                        e.preventDefault();
                        e.stopPropagation();
                        hasError = true;
                        errorMessage =
                            (window.I18N && window.I18N.REG_TERMS_CHECKBOX_REQUIRED) || '';
                        termsCheckbox.setCustomValidity(errorMessage);
                        termsCheckbox.reportValidity();
                        termsCheckbox.setCustomValidity('');
                        termsCheckbox.focus();

                        // Shake animasyonu ekle
                        if (termsWrapper) {
                            termsWrapper.classList.add('shake-error');
                            setTimeout(() => {
                                termsWrapper.classList.remove('shake-error');
                            }, 600);
                        }

                        return false;
                    }

                    // 2. E-posta kontrolü
                    const emailInput = document.getElementById('email');
                    if (emailInput && emailInput.value) {
                        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                        if (!emailRegex.test(emailInput.value)) {
                            e.preventDefault();
                            e.stopPropagation();
                            hasError = true;
                            errorMessage =
                                (window.I18N && window.I18N.REG_EMAIL_INVALID_SIMPLE) || '';
                            emailInput.setCustomValidity(errorMessage);
                            emailInput.reportValidity();
                            emailInput.setCustomValidity('');
                            emailInput.focus();
                            return false;
                        }
                    }

                    // 3. Telefon kontrolü
                    const phoneInput = document.getElementById('phone');
                    if (phoneInput && phoneInput.value) {
                        const phoneRegex = /^(0)?5[0-9]{9}$/;
                        const cleanPhone = phoneInput.value.replace(/\s/g, '');
                        if (!phoneRegex.test(cleanPhone)) {
                            e.preventDefault();
                            e.stopPropagation();
                            hasError = true;
                            errorMessage =
                                (window.I18N && window.I18N.REG_PHONE_INVALID_DETAILED) || '';
                            phoneInput.setCustomValidity(errorMessage);
                            phoneInput.reportValidity();
                            phoneInput.setCustomValidity('');
                            phoneInput.focus();
                            return false;
                        }
                    }

                    // 4. Şifre kontrolü
                    const passwordInput = document.getElementById('password');
                    const passwordConfirmationInput = document.getElementById('password_confirmation');
                    if (passwordInput && passwordInput.value) {
                        if (passwordInput.value.length < 8) {
                            e.preventDefault();
                            e.stopPropagation();
                            hasError = true;
                            errorMessage =
                                (window.I18N && window.I18N.REG_PASSWORD_MIN_LENGTH) || '';
                            passwordInput.setCustomValidity(errorMessage);
                            passwordInput.reportValidity();
                            passwordInput.setCustomValidity('');
                            passwordInput.focus();
                            return false;
                        }

                        if (passwordConfirmationInput && passwordInput.value !== passwordConfirmationInput.value) {
                            e.preventDefault();
                            e.stopPropagation();
                            hasError = true;
                            errorMessage =
                                (window.I18N && window.I18N.REG_PASSWORD_MISMATCH) || '';
                            passwordConfirmationInput.setCustomValidity(errorMessage);
                            passwordConfirmationInput.reportValidity();
                            passwordConfirmationInput.setCustomValidity('');
                            passwordConfirmationInput.focus();
                            return false;
                        }
                    }

                    // 5. Doğum yeri kontrolü (yazmak yetmez; listeden seçim şart)
                    const birthPlaceInput = document.getElementById('birth_place');
                    const birthPlaceIdInput = document.getElementById('birth_place_id');
                    window.registerBirthPlaceClearInline();
                    if (birthPlaceInput && birthPlaceInput.value.trim() !== '' && birthPlaceIdInput &&
                        birthPlaceIdInput.value.trim() === '') {
                        e.preventDefault();
                        e.stopPropagation();
                        hasError = true;
                        birthPlaceInput.setCustomValidity(birthPlaceListMsg);
                        window.registerBirthPlaceSetInline(birthPlaceListMsg);
                        birthPlaceInput.reportValidity();
                        birthPlaceInput.setCustomValidity('');
                        birthPlaceInput.focus();
                        return false;
                    }

                }, true);
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const birthDateInput = document.getElementById('birth_date');
            if (birthDateInput) {
                birthDateInput.addEventListener('input', function(e) {
                    let value = e.target.value.replace(/\D/g, '');
                    if (value.length > 8) value = value.slice(0, 8);
                    
                    let formatted = '';
                    if (value.length > 0) {
                        formatted = value.slice(0, 2);
                        if (value.length > 2) {
                            formatted += '.' + value.slice(2, 4);
                            if (value.length > 4) {
                                formatted += '.' + value.slice(4, 9);
                            }
                        }
                    }
                    e.target.value = formatted;
                });

                const birthTimeInput = document.getElementById('birth_time');
                if (birthTimeInput) {
                    birthTimeInput.addEventListener('input', function(e) {
                        let value = e.target.value.replace(/\D/g, '');
                        if (value.length > 4) value = value.slice(0, 4);
                        
                        let formatted = '';
                        if (value.length > 0) {
                            formatted = value.slice(0, 2);
                            if (value.length > 2) {
                                formatted += ':' + value.slice(2, 4);
                            }
                        }
                        e.target.value = formatted;
                    });
                }
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const input = document.getElementById('birth_place');
            const hiddenId = document.getElementById('birth_place_id');
            const box = document.getElementById('birthPlaceResults');

            if (!input || !hiddenId || !box) {
                return;
            }

            let t = null;

            function closeBox() {
                if (box) {
                    box.classList.add('d-none');
                    box.innerHTML = '';
                }
            }

            function openBox() {
                if (box) {
                    box.classList.remove('d-none');
                }
            }

            input.addEventListener('input', () => {
                hiddenId.value = '';
                if (typeof window.registerBirthPlaceClearInline === 'function') {
                    window.registerBirthPlaceClearInline();
                }

                const q = input.value.trim();
                if (q.length < 2) {
                    closeBox();
                    return;
                }

                clearTimeout(t);
                t = setTimeout(async () => {
                    try {
                        const url = "{{ route('geonames.cities.search') }}" + '?q=' +
                            encodeURIComponent(q);
                        const res = await fetch(url, {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        });

                        if (!res.ok) {
                            closeBox();
                            return;
                        }

                        const data = await res.json();

                        if (!Array.isArray(data) || data.length === 0) {
                            closeBox();
                            return;
                        }

                        box.innerHTML = data.map(item => `
                            <button type="button"
                                    class="list-group-item list-group-item-action"
                                    data-id="${item.id}"
                                    data-label="${item.label}">
                                ${item.label}
                            </button>
                        `).join('');

                        openBox();
                    } catch (error) {
                        closeBox();
                    }
                }, 250);
            });

            box.addEventListener('click', (e) => {
                const btn = e.target.closest('button[data-id]');
                if (!btn) return;

                hiddenId.value = btn.dataset.id;
                input.value = btn.dataset.label;
                if (typeof window.registerBirthPlaceClearInline === 'function') {
                    window.registerBirthPlaceClearInline();
                }
                closeBox();
            });

            document.addEventListener('click', (e) => {
                if (!box.contains(e.target) && e.target !== input) closeBox();
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const input = document.getElementById('referral_code');
            const feedback = document.getElementById('referralCodeFeedback');
            const inviteAlert = document.getElementById('specialInviteAlert');
            const hasInitialServerInvite = {{ $hasSpecialInvite ? 'true' : 'false' }};
            if (!input || !feedback) return;

            let t = null;

            input.addEventListener('input', () => {
                const code = input.value.trim();
                clearTimeout(t);

                if (code.length < 3) {
                    feedback.textContent = '';
                    feedback.className = 'small mt-1';
                    if (!hasInitialServerInvite) {
                        document.body.classList.remove('has-invite-banner');
                        if (inviteAlert) {
                            inviteAlert.classList.add('d-none');
                            inviteAlert.classList.remove('d-flex');
                        }
                    }
                    return;
                }

                t = setTimeout(async () => {
                    try {
                        const url = "{{ route('referral-code.check') }}" + '?code=' + encodeURIComponent(code);
                        const res = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                        const data = await res.json();

                        if (data.valid === true) {
                            feedback.textContent = 'Referans kodu geçerli ✓';
                            feedback.className = 'small mt-1 text-success';
                            document.body.classList.add('has-invite-banner');
                            if (inviteAlert) {
                                inviteAlert.classList.remove('d-none');
                                inviteAlert.classList.add('d-flex');
                            }
                        } else if (data.valid === false) {
                            feedback.textContent = data.message || 'Geçersiz referans kodu.';
                            feedback.className = 'small mt-1 text-danger';
                            if (!hasInitialServerInvite) {
                                document.body.classList.remove('has-invite-banner');
                                if (inviteAlert) {
                                    inviteAlert.classList.add('d-none');
                                    inviteAlert.classList.remove('d-flex');
                                }
                            }
                        } else {
                            feedback.textContent = '';
                            feedback.className = 'small mt-1';
                        }
                    } catch (error) {
                        feedback.textContent = '';
                        feedback.className = 'small mt-1';
                    }
                }, 350);
            });
        });
    </script>

    <script>
        function fixMobileLayout() {
            var vm = document.querySelector('meta[name="viewport"]');
            if (vm) {
                vm.setAttribute('content', 'width=device-width, initial-scale=1.0, viewport-fit=cover');
            }
            document.documentElement.scrollLeft = 0;
            document.body.scrollLeft = 0;
        }
        document.addEventListener('DOMContentLoaded', fixMobileLayout);
    </script>
@endpush