{{--
    Social Giriş Profil Tamamlama Modal'ı / Social Login Profile Completion Modal
    Multi-language support for TR, EN, ES.
    Trigger: session('social_profile_incomplete') === true
--}}
@php
    $locale = strtolower(app()->getLocale());
    $localeIsEs = str_starts_with($locale, 'es');
    $localeIsEn = str_starts_with($locale, 'en') || (!$localeIsEs && !str_starts_with($locale, 'tr'));

    $txt = [
        'title' => $localeIsEn ? 'Complete Your Profile' : ($localeIsEs ? 'Completa Tu Perfil' : 'Profil Bilgilerinizi Tamamlayın'),
        'subtitle' => $localeIsEn ? 'The following details are required for chart calculations.' : ($localeIsEs ? 'Los siguientes datos son obligatorios para los cálculos astrológicos.' : 'Harita hesaplamaları için aşağıdaki bilgiler zorunludur.'),
        'info' => $localeIsEn ? 'You signed in with Google / Facebook. You only need to enter your birth details once for accurate astrological calculations.' : ($localeIsEs ? 'Has iniciado sesión con Google / Facebook. Solo necesitas introducir tus datos de nacimiento una vez para cálculos astrológicos precisos.' : 'Google / Facebook ile giriş yaptınız. Astroloji haritalarınızın doğru hesaplanabilmesi için doğum bilgilerinizi bir kez girmeniz yeterlidir.'),
        'phone' => $localeIsEn ? 'Phone Number' : ($localeIsEs ? 'Número de Teléfono' : 'Telefon Numarası'),
        'phone_ph' => $localeIsEn ? '+1 (555) 000-0000' : ($localeIsEs ? '+34 600 000 000' : '05XX XXX XX XX'),
        'gender' => $localeIsEn ? 'Gender' : ($localeIsEs ? 'Género' : 'Cinsiyet'),
        'gender_select' => $localeIsEn ? 'Select Gender' : ($localeIsEs ? 'Selecciona Género' : 'Cinsiyet Seçin'),
        'gender_male' => $localeIsEn ? 'Male' : ($localeIsEs ? 'Masculino' : 'Erkek'),
        'gender_female' => $localeIsEn ? 'Female' : ($localeIsEs ? 'Femenino' : 'Kadın'),
        'birth_date' => $localeIsEn ? 'Date of Birth' : ($localeIsEs ? 'Fecha de Nacimiento' : 'Doğum Tarihi'),
        'birth_time' => $localeIsEn ? 'Birth Time' : ($localeIsEs ? 'Hora de Nacimiento' : 'Doğum Saati'),
        'optional' => $localeIsEn ? '(optional)' : ($localeIsEs ? '(opcional)' : '(opsiyonel)'),
        'unknown_time' => $localeIsEn ? "I don't know my birth time" : ($localeIsEs ? 'No sé mi hora de nacimiento' : 'Doğum saatimi bilmiyorum'),
        'birth_place' => $localeIsEn ? 'Birth Place' : ($localeIsEs ? 'Lugar de Nacimiento' : 'Doğum Yeri'),
        'birth_place_ph' => $localeIsEn ? 'Type city name and select from list' : ($localeIsEs ? 'Escribe la ciudad y selecciona de la lista' : 'Şehir adı yazın ve listeden seçin'),
        'birth_place_hint' => $localeIsEn ? 'Selecting from the list is required.' : ($localeIsEs ? 'Es obligatorio seleccionar de la lista.' : 'Listeden seçim yapmak zorunludur.'),
        'referral' => $localeIsEn ? 'Referral Code' : ($localeIsEs ? 'Código de Referencia' : 'Referans Kodu'),
        'referral_ph' => $localeIsEn ? 'Enter referral code if applicable' : ($localeIsEs ? 'Introduce código si lo tienes' : 'Varsa referans kodunuzu girin'),
        'save_btn' => $localeIsEn ? 'Save My Details' : ($localeIsEs ? 'Guardar Mis Datos' : 'Bilgilerimi Kaydet'),
        'verify_title' => $localeIsEn ? 'Phone Verification' : ($localeIsEs ? 'Verificación Telefónica' : 'Telefon Doğrulaması'),
        'verify_sub' => $localeIsEn ? 'Enter the 6-digit code sent to your phone.' : ($localeIsEs ? 'Introduce el código de 6 dígitos enviado a tu teléfono.' : 'Telefonunuza gönderilen 6 haneli kodu girin.'),
        'code_lbl' => $localeIsEn ? 'Verification Code' : ($localeIsEs ? 'Código de Verificación' : 'Doğrulama Kodu'),
        'code_ph' => $localeIsEn ? '6-digit code' : ($localeIsEs ? 'Código de 6 dígitos' : '6 haneli kod'),
        'resend_btn' => $localeIsEn ? 'Resend Code' : ($localeIsEs ? 'Reenviar Código' : 'Kodu Tekrar Gönder'),
        'verify_btn' => $localeIsEn ? 'Verify' : ($localeIsEs ? 'Verificar' : 'Doğrula'),
        'resend_cooldown_suffix' => $localeIsEn ? 's resend code' : ($localeIsEs ? 's reenviar código' : 's sonra tekrar gönder'),
    ];
@endphp

<div class="modal fade" id="completeSocialProfileModal" tabindex="-1" aria-hidden="true"
     data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-fullscreen-sm-down">
        <div class="modal-content modal-modern">

            <div class="modal-header" style="background: linear-gradient(135deg, #136F63 0%, #2f8f7a 100%);">
                <div class="d-flex flex-column">
                    <h5 class="modal-title text-white fw-bold mb-0">
                        <i class="fa-solid fa-user-pen me-2"></i>{{ $txt['title'] }}
                    </h5>
                    <small class="text-white-50">
                        {{ $txt['subtitle'] }}
                    </small>
                </div>
            </div>

            <div class="alert alert-success d-none m-3 mb-0" id="sp_success_box"></div>

            <form id="completeSocialProfileForm">
                @csrf

                <div class="modal-body">

                    @php
                        $socialPhone = (string) (Auth::user()?->phone ?? '');
                        $displayPhone = preg_match('/^0[0-9]{10}$/', $socialPhone) ? $socialPhone : '';
                    @endphp

                    <div class="alert alert-info border-0 mb-4" style="background: rgba(19,111,99,0.08);">
                        <i class="fa-solid fa-circle-info me-2" style="color:#136F63;"></i>
                        {{ $txt['info'] }}
                    </div>

                    <div class="row g-3">

                        {{-- Telefon --}}
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-semibold">{{ $txt['phone'] }} <span class="text-danger">*</span></label>
                            <input type="tel" name="phone" id="sp_phone"
                                   class="form-control form-control-modern"
                                   placeholder="{{ $txt['phone_ph'] }}"
                                   value="{{ $displayPhone }}"
                                   required>
                            <div class="invalid-feedback" id="sp_phone_err"></div>
                        </div>

                        {{-- Cinsiyet --}}
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-semibold">{{ $txt['gender'] }} <span class="text-danger">*</span></label>
                            <select name="gender" id="sp_gender" class="form-select form-control-modern" required>
                                <option value="">{{ $txt['gender_select'] }}</option>
                                <option value="male" {{ Auth::user()?->gender === 'male' ? 'selected' : '' }}>{{ $txt['gender_male'] }}</option>
                                <option value="female" {{ Auth::user()?->gender === 'female' ? 'selected' : '' }}>{{ $txt['gender_female'] }}</option>
                            </select>
                            <div class="invalid-feedback" id="sp_gender_err"></div>
                        </div>

                        {{-- Doğum Tarihi --}}
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-semibold">{{ $txt['birth_date'] }} <span class="text-danger">*</span></label>
                            <input type="date" name="birth_date" id="sp_birth_date"
                                   class="form-control form-control-modern"
                                   value="{{ Auth::user()?->birth_date ? \Carbon\Carbon::parse(Auth::user()->birth_date)->format('Y-m-d') : '' }}"
                                   max="{{ now()->subDay()->format('Y-m-d') }}"
                                   required>
                            <div class="invalid-feedback" id="sp_birth_date_err"></div>
                        </div>

                        {{-- Doğum Saati --}}
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-semibold">{{ $txt['birth_time'] }} <small class="text-muted fw-normal">{{ $txt['optional'] }}</small></label>
                            <input type="time" name="birth_time" id="sp_birth_time"
                                   class="form-control form-control-modern"
                                   value="{{ Auth::user()?->birth_time }}">
                            <div class="invalid-feedback" id="sp_birth_time_err"></div>
                            <div class="form-check mt-2">
                                <input class="form-check-input" type="checkbox" id="sp_unknown_time">
                                <label class="form-check-label" for="sp_unknown_time">{{ $txt['unknown_time'] }}</label>
                            </div>
                        </div>

                        {{-- Doğum Yeri --}}
                        <div class="col-12">
                            <label class="form-label fw-semibold">{{ $txt['birth_place'] }} <span class="text-danger">*</span></label>
                            <input type="hidden" name="birth_place_id" id="sp_birth_place_id">
                            <div class="position-relative">
                                <div class="input-group input-group-modern">
                                    <span class="input-group-text"><i class="fa-solid fa-map-pin" style="color:#136F63;"></i></span>
                                    <input type="text" id="sp_birth_place"
                                           class="form-control form-control-modern"
                                           placeholder="{{ $txt['birth_place_ph'] }}"
                                           autocomplete="off">
                                </div>
                                <div id="sp_birth_place_results"
                                     class="list-group position-absolute w-100 shadow-sm"
                                     style="z-index:1060; display:none; max-height:240px; overflow:auto;"></div>
                            </div>
                            <div class="invalid-feedback d-block d-none" id="sp_birth_place_err"></div>
                            <small class="text-muted">{{ $txt['birth_place_hint'] }}</small>
                        </div>

                        {{-- Referans Kodu --}}
                        @if (!Auth::user()?->referral_code_id)
                            <div class="col-12">
                                <label class="form-label fw-semibold">{{ $txt['referral'] }} <small class="text-muted fw-normal">{{ $txt['optional'] }}</small></label>
                                <input type="text" name="referral_code" id="sp_referral_code"
                                       class="form-control form-control-modern"
                                       placeholder="{{ $txt['referral_ph'] }}" autocomplete="off">
                                <div class="invalid-feedback" id="sp_referral_code_err"></div>
                            </div>
                        @endif

                    </div>

                    <div class="alert alert-danger mt-3 d-none" id="sp_global_error"></div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-success w-100 py-2 fw-semibold" id="sp_submit_btn">
                        <span class="spinner-border spinner-border-sm me-2 d-none" id="sp_spinner" role="status"></span>
                        <i class="fa-solid fa-check me-1" id="sp_check_icon"></i>{{ $txt['save_btn'] }}
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>

<script>
(function () {
    'use strict';

    const SEARCH_URL = "{{ route('geonames.cities.search') }}";
    const SAVE_URL   = "{{ route('panel.complete-social-profile') }}";
    const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]')?.content ?? '';

    const i18nMsgs = {
        selectPlaceErr: @json($localeIsEn ? 'Please select birth place from the list.' : ($localeIsEs ? 'Por favor, selecciona el lugar de nacimiento de la lista.' : 'Lütfen doğum yerini listeden seçin.')),
        invalidVal: @json($localeIsEn ? 'Invalid value.' : ($localeIsEs ? 'Valor no válido.' : 'Geçersiz değer.')),
        formValErr: @json($localeIsEn ? 'Form could not be validated. Please check the fields.' : ($localeIsEs ? 'No se pudo validar el formulario. Comprueba los campos.' : 'Form doğrulanamadı. Lütfen alanları kontrol edin.')),
        sessionExpired: @json($localeIsEn ? 'Session expired. Refreshing page...' : ($localeIsEs ? 'Sesión caducada. Recargando página...' : 'Oturum süresi doldu. Sayfa yenileniyor...')),
        tooManyAttempts: @json($localeIsEn ? 'Too many attempts. Please try again shortly.' : ($localeIsEs ? 'Demasiados intentos. Inténtalo de nuevo en unos minutos.' : 'Çok fazla deneme yaptınız. Lütfen kısa süre sonra tekrar deneyin.')),
        sessionUpdated: @json($localeIsEn ? 'Session status updated. Refreshing page...' : ($localeIsEs ? 'Estado de sesión actualizado. Recargando página...' : 'Oturum doğrulama durumu güncellendi. Sayfa yenileniyor...')),
        saveFailed: @json($localeIsEn ? 'Could not save profile details. Please try again.' : ($localeIsEs ? 'No se pudieron guardar los datos de perfil. Inténtalo de nuevo.' : 'Profil bilgileri kaydedilemedi. Lütfen tekrar deneyin.')),
        timeout: @json($localeIsEn ? 'Operation timed out. Please try again.' : ($localeIsEs ? 'La operación superó el tiempo de espera. Inténtalo de nuevo.' : 'İşlem zaman aşımına uğradı. Lütfen tekrar deneyin.')),
        connErr: @json($localeIsEn ? 'Connection error. Please try again.' : ($localeIsEs ? 'Error de conexión. Inténtalo de nuevo.' : 'Bağlantı hatası. Lütfen tekrar deneyin.')),
        enter6Digits: @json($localeIsEn ? 'Please enter the 6-digit code.' : ($localeIsEs ? 'Por favor, introduce el código de 6 dígitos.' : 'Lütfen 6 haneli kodu girin.')),
        verifySuccess: @json($localeIsEn ? 'Verification completed.' : ($localeIsEs ? 'Verificación completada.' : 'Doğrulama tamamlandı.')),
        verifyFailed: @json($localeIsEn ? 'Code could not be verified.' : ($localeIsEs ? 'El código no pudo ser verificado.' : 'Kod doğrulanamadı.')),
        resentSuccess: @json($localeIsEn ? 'Code resent successfully.' : ($localeIsEs ? 'Código reenviado con éxito.' : 'Kod yeniden gönderildi.')),
        resendFailed: @json($localeIsEn ? 'Could not resend code.' : ($localeIsEs ? 'No se pudo reenviar el código.' : 'Kod yeniden gönderilemedi.')),
        resendTooFast: @json($localeIsEn ? 'Code requested too frequently. Please try again shortly.' : ($localeIsEs ? 'Código solicitado con demasiada frecuencia. Inténtalo de nuevo en breve.' : 'Çok sık kod istendi. Lütfen kısa süre sonra tekrar deneyin.')),
        resendBtnLabel: @json($txt['resend_btn']),
        resendCooldownSuffix: @json($txt['resend_cooldown_suffix']),
    };

    // --- Doğum saati bilinmiyor checkbox ---
    const unknownChk  = document.getElementById('sp_unknown_time');
    const birthTimeIn = document.getElementById('sp_birth_time');
    unknownChk?.addEventListener('change', () => {
        if (!birthTimeIn) return;
        birthTimeIn.disabled = unknownChk.checked;
        if (unknownChk.checked) birthTimeIn.value = '';
    });

    // --- Doğum yeri autocomplete ---
    const placeInput   = document.getElementById('sp_birth_place');
    const placeHiddenId= document.getElementById('sp_birth_place_id');
    const placeResults = document.getElementById('sp_birth_place_results');
    let searchTimer    = null;

    function closePlaceResults() {
        if (placeResults) { placeResults.style.display = 'none'; placeResults.innerHTML = ''; }
    }

    function openPlaceResults() {
        if (placeResults) placeResults.style.display = 'block';
    }

    if (placeInput) {
        placeInput.addEventListener('input', () => {
            placeHiddenId.value = '';
            const q = placeInput.value.trim();
            if (q.length < 2) { closePlaceResults(); return; }

            clearTimeout(searchTimer);
            searchTimer = setTimeout(async () => {
                try {
                    const res = await fetch(SEARCH_URL + '?q=' + encodeURIComponent(q), {
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    if (!res.ok) { closePlaceResults(); return; }
                    const data = await res.json();
                    if (!Array.isArray(data) || data.length === 0) { closePlaceResults(); return; }

                    placeResults.innerHTML = '';
                    data.forEach(city => {
                        const btn = document.createElement('button');
                        btn.type = 'button';
                        btn.className = 'list-group-item list-group-item-action py-2';
                        btn.textContent = [city.name, city.admin1_name, city.country_code].filter(Boolean).join(', ');
                        btn.addEventListener('click', () => {
                            placeInput.value   = btn.textContent;
                            placeHiddenId.value = city.id;
                            closePlaceResults();
                            const placeErrorEl = document.getElementById('sp_birth_place_err');
                            if (placeErrorEl) {
                                placeErrorEl.classList.add('d-none');
                                placeErrorEl.textContent = '';
                            }
                        });
                        placeResults.appendChild(btn);
                    });
                    openPlaceResults();
                } catch (_) { closePlaceResults(); }
            }, 300);
        });

        document.addEventListener('click', e => {
            if (!placeInput.contains(e.target) && !placeResults.contains(e.target)) {
                closePlaceResults();
            }
        });
    }

    // --- Form gönderimi ---
    const form      = document.getElementById('completeSocialProfileForm');
    const submitBtn = document.getElementById('sp_submit_btn');
    const spinner   = document.getElementById('sp_spinner');
    const checkIcon = document.getElementById('sp_check_icon');
    const globalErr = document.getElementById('sp_global_error');
    const successBox = document.getElementById('sp_success_box');

    function showGlobalError(message) {
        if (!globalErr) return;
        globalErr.textContent = message;
        globalErr.classList.remove('d-none');
    }

    async function parseResponseSafely(response) {
        const rawText = await response.text();
        let payload = null;

        if (rawText) {
            try {
                payload = JSON.parse(rawText);
            } catch (_) {
                payload = null;
            }
        }

        return { payload, rawText };
    }

    function setLoading(loading) {
        if (!submitBtn) return;
        submitBtn.disabled = loading;
        spinner?.classList.toggle('d-none', !loading);
        checkIcon?.classList.toggle('d-none', loading);
    }

    function clearErrors() {
        form?.classList.remove('d-none');
        ['sp_phone_err', 'sp_gender_err', 'sp_birth_date_err', 'sp_birth_time_err', 'sp_birth_place_err', 'sp_referral_code_err'].forEach(id => {
            const el = document.getElementById(id);
            if (el) {
                el.textContent = '';
                el.classList.add('d-none');
            }
        });
        ['sp_phone', 'sp_gender', 'sp_birth_date', 'sp_birth_time', 'sp_birth_place'].forEach(id => {
            document.getElementById(id)?.classList.remove('is-invalid');
        });
        globalErr?.classList.add('d-none');
        globalErr && (globalErr.textContent = '');
        successBox?.classList.add('d-none');
        successBox && (successBox.textContent = '');
    }

    function showFieldError(inputId, errorId, msg) {
        const input = document.getElementById(inputId);
        const el = document.getElementById(errorId);
        if (input) {
            input.classList.add('is-invalid');
        }
        if (el) {
            el.textContent = msg;
            el.classList.remove('d-none');
            el.style.display = 'block';
        }
    }

    form?.addEventListener('submit', async e => {
        e.preventDefault();
        clearErrors();

        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }

        // İstemci tarafı doğum yeri seçim kontrolü
        if (!placeHiddenId?.value) {
            showFieldError('sp_birth_place', 'sp_birth_place_err', i18nMsgs.selectPlaceErr);
            placeInput?.focus();
            return;
        }

        setLoading(true);
        const requestController = new AbortController();
        let requestTimeout = null;

        try {
            const body = new FormData(form);
            requestTimeout = setTimeout(() => requestController.abort(), 20000);

            const res = await fetch(SAVE_URL, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': CSRF_TOKEN,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                },
                credentials: 'same-origin',
                signal: requestController.signal,
                body,
            });
            clearTimeout(requestTimeout);

            const { payload, rawText } = await parseResponseSafely(res);

            if (res.ok && payload?.success) {
                if (payload.redirect_url) {
                    window.location.href = payload.redirect_url;
                    return;
                }
                const profileModalEl = document.getElementById('completeSocialProfileModal');
                const verifyModalEl = document.getElementById('socialPhoneVerifyModal');
                const openVerifyModal = () => {
                    if (!verifyModalEl) return;
                    const verifyModal = bootstrap.Modal.getOrCreateInstance(verifyModalEl, { backdrop: 'static', keyboard: false });
                    verifyModal.show();
                    verifyModalEl.querySelector('#spv_code')?.focus();
                };

                if (profileModalEl && profileModalEl.classList.contains('show')) {
                    profileModalEl.addEventListener('hidden.bs.modal', openVerifyModal, { once: true });
                    bootstrap.Modal.getOrCreateInstance(profileModalEl).hide();
                } else {
                    openVerifyModal();
                }
                return;
            }

            // Validasyon hataları (422)
            if (res.status === 422) {
                const map = {
                    phone:          ['sp_phone', 'sp_phone_err'],
                    gender:         ['sp_gender', 'sp_gender_err'],
                    birth_date:     ['sp_birth_date', 'sp_birth_date_err'],
                    birth_time:     ['sp_birth_time', 'sp_birth_time_err'],
                    birth_place_id: ['sp_birth_place', 'sp_birth_place_err'],
                    referral_code:  ['sp_referral_code', 'sp_referral_code_err'],
                };
                let firstFocusId = null;
                let unknownFieldError = '';
                const errors = payload?.errors ?? {};

                Object.entries(errors).forEach(([field, msgs]) => {
                    const fieldMap = map[field];
                    const firstMessage = Array.isArray(msgs) ? msgs[0] : i18nMsgs.invalidVal;

                    if (fieldMap) {
                        showFieldError(fieldMap[0], fieldMap[1], firstMessage);
                        if (!firstFocusId) {
                            firstFocusId = fieldMap[0];
                        }
                    } else if (!unknownFieldError) {
                        unknownFieldError = firstMessage;
                    }
                });

                if (firstFocusId) {
                    document.getElementById(firstFocusId)?.focus();
                }

                if (unknownFieldError) {
                    showGlobalError(unknownFieldError);
                } else if (!firstFocusId) {
                    showGlobalError(payload?.message ?? i18nMsgs.formValErr);
                }

                return;
            }

            if (res.status === 419) {
                showGlobalError(i18nMsgs.sessionExpired);
                setTimeout(() => window.location.reload(), 1200);
                return;
            }

            if (res.status === 429) {
                showGlobalError(payload?.message ?? i18nMsgs.tooManyAttempts);
                return;
            }

            if (res.redirected || (!payload && rawText && rawText.toLowerCase().includes('<!doctype html'))) {
                showGlobalError(i18nMsgs.sessionUpdated);
                setTimeout(() => window.location.reload(), 1200);
                return;
            }

            showGlobalError(payload?.message ?? i18nMsgs.saveFailed);
        } catch (error) {
            if (error?.name === 'AbortError') {
                showGlobalError(i18nMsgs.timeout);
            } else {
                showGlobalError(i18nMsgs.connErr);
            }
        } finally {
            if (requestTimeout) {
                clearTimeout(requestTimeout);
            }
            setLoading(false);
        }
    });

    // --- Modal otomatik aç (session bayrağı varsa) ---
    document.addEventListener('DOMContentLoaded', () => {
        @if(session('social_profile_incomplete'))
        const modalEl = document.getElementById('completeSocialProfileModal');
        if (modalEl) {
            const m = new bootstrap.Modal(modalEl, { backdrop: 'static', keyboard: false });
            m.show();
        }
        @endif
    });
})();
</script>

<div class="modal fade" id="socialPhoneVerifyModal" tabindex="-1" aria-hidden="true"
    data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-fullscreen-sm-down">
        <div class="modal-content modal-modern">
            <div class="modal-header" style="background: linear-gradient(135deg, #136F63 0%, #2f8f7a 100%);">
                <div class="d-flex flex-column">
                    <h5 class="modal-title text-white fw-bold mb-0">
                        <i class="fa-solid fa-shield-halved me-2"></i>{{ $txt['verify_title'] }}
                    </h5>
                    <small class="text-white-50">
                        {{ $txt['verify_sub'] }}
                    </small>
                </div>
            </div>

            @php
                $verifyPhone = preg_replace('/\D+/', '', (string) (Auth::user()?->phone ?? ''));
                $maskedVerifyPhone = strlen($verifyPhone) === 11
                    ? substr($verifyPhone, 0, 3) . ' *** ** ' . substr($verifyPhone, -2)
                    : '';
            @endphp

            <form id="socialPhoneVerifyForm" action="{{ route('two-factor.verify.post') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info border-0 mb-4" style="background: rgba(19,111,99,0.08);">
                        <i class="fa-solid fa-circle-info me-2" style="color:#136F63;"></i>
                        @if($maskedVerifyPhone !== '')
                            <span><strong>{{ $maskedVerifyPhone }}</strong> {{ $localeIsEn ? '— enter the code sent to your phone.' : ($localeIsEs ? '— introduce el código enviado a tu teléfono.' : 'numarasına gönderilen kodu girin.') }}</span>
                        @else
                            <span>{{ $localeIsEn ? 'Enter the code sent to your phone.' : ($localeIsEs ? 'Introduce el código enviado a tu teléfono.' : 'Telefonunuza gönderilen kodu girin.') }}</span>
                        @endif
                    </div>

                    <div class="mb-3">
                        <label for="spv_code" class="form-label fw-semibold">{{ $txt['code_lbl'] }}</label>
                        <input type="text" class="form-control form-control-modern text-center" id="spv_code" name="code"
                            maxlength="6" inputmode="numeric" autocomplete="one-time-code" placeholder="{{ $txt['code_ph'] }}" required>
                        <div class="invalid-feedback d-block d-none" id="spv_code_err"></div>
                    </div>

                    <div class="alert alert-danger d-none" id="spv_global_error"></div>
                    <div class="alert alert-success d-none" id="spv_success_box"></div>
                </div>

                <div class="modal-footer d-flex gap-2">
                    <button type="button" class="btn btn-outline-secondary" id="spv_resend_btn">
                        <i class="fa-solid fa-rotate-right me-1"></i>{{ $txt['resend_btn'] }}
                    </button>
                    <button type="submit" class="btn btn-success ms-auto" id="spv_submit_btn">
                        <span class="spinner-border spinner-border-sm me-2 d-none" id="spv_spinner" role="status"></span>
                        <i class="fa-solid fa-check me-1" id="spv_check_icon"></i>{{ $txt['verify_btn'] }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
(function () {
    'use strict';

    const verifyModalEl = document.getElementById('socialPhoneVerifyModal');
    const verifyForm = document.getElementById('socialPhoneVerifyForm');
    const verifyInput = document.getElementById('spv_code');
    const verifySubmit = document.getElementById('spv_submit_btn');
    const verifySpinner = document.getElementById('spv_spinner');
    const verifyCheck = document.getElementById('spv_check_icon');
    const verifyError = document.getElementById('spv_global_error');
    const verifySuccess = document.getElementById('spv_success_box');
    const resendBtn = document.getElementById('spv_resend_btn');
    let isVerifySubmitting = false;
    let resendCooldownTimer = null;
    let resendCooldownRemaining = 0;

    const vMsgs = {
        enter6Digits: @json($localeIsEn ? 'Please enter the 6-digit code.' : ($localeIsEs ? 'Por favor, introduce el código de 6 dígitos.' : 'Lütfen 6 haneli kodu girin.')),
        verifySuccess: @json($localeIsEn ? 'Verification completed.' : ($localeIsEs ? 'Verificación completada.' : 'Doğrulama tamamlandı.')),
        verifyFailed: @json($localeIsEn ? 'Code could not be verified.' : ($localeIsEs ? 'El código no pudo ser verificado.' : 'Kod doğrulanamadı.')),
        sessionExpired: @json($localeIsEn ? 'Session expired. Refreshing page...' : ($localeIsEs ? 'Sesión caducada. Recargando página...' : 'Oturum süresi doldu. Sayfa yenileniyor...')),
        tooManyAttempts: @json($localeIsEn ? 'Too many attempts. Please try again shortly.' : ($localeIsEs ? 'Demasiados intentos. Inténtalo de nuevo en unos minutos.' : 'Çok fazla deneme yaptınız. Lütfen kısa süre sonra tekrar deneyin.')),
        sessionUpdated: @json($localeIsEn ? 'Session status updated. Refreshing page...' : ($localeIsEs ? 'Estado de sesión actualizado. Recargando página...' : 'Oturum doğrulama ekranı yenilendi. Sayfa yenileniyor...')),
        genericError: @json($localeIsEn ? 'An error occurred.' : ($localeIsEs ? 'Ocurrió un error.' : 'Bir hata oluştu.')),
        connErr: @json($localeIsEn ? 'Connection error. Please try again.' : ($localeIsEs ? 'Error de conexión. Inténtalo de nuevo.' : 'Bağlantı hatası. Lütfen tekrar deneyin.')),
        resentSuccess: @json($localeIsEn ? 'Code resent successfully.' : ($localeIsEs ? 'Código reenviado con éxito.' : 'Kod yeniden gönderildi.')),
        resendFailed: @json($localeIsEn ? 'Could not resend code.' : ($localeIsEs ? 'No se pudo reenviar el código.' : 'Kod yeniden gönderilemedi.')),
        resendTooFast: @json($localeIsEn ? 'Code requested too frequently. Please try again shortly.' : ($localeIsEs ? 'Código solicitado con demasiada frecuencia. Inténtalo de nuevo en breve.' : 'Çok sık kod istendi. Lütfen kısa süre sonra tekrar deneyin.')),
        resendBtnLabel: @json($txt['resend_btn']),
        resendCooldownSuffix: @json($txt['resend_cooldown_suffix']),
    };

    function stopResendCooldown() {
        if (resendCooldownTimer) {
            clearInterval(resendCooldownTimer);
            resendCooldownTimer = null;
        }
        resendCooldownRemaining = 0;
    }

    function setResendButtonState() {
        if (!resendBtn) return;
        if (resendCooldownRemaining > 0) {
            resendBtn.disabled = true;
            resendBtn.innerHTML = `<i class="fa-solid fa-rotate-right me-1"></i>${resendCooldownRemaining}${vMsgs.resendCooldownSuffix}`;
            return;
        }

        resendBtn.disabled = false;
        resendBtn.innerHTML = `<i class="fa-solid fa-rotate-right me-1"></i>${vMsgs.resendBtnLabel}`;
    }

    function startResendCooldown(seconds = 60) {
        stopResendCooldown();
        resendCooldownRemaining = seconds;
        setResendButtonState();
        resendCooldownTimer = setInterval(() => {
            resendCooldownRemaining -= 1;
            if (resendCooldownRemaining <= 0) {
                stopResendCooldown();
                setResendButtonState();
                return;
            }
            setResendButtonState();
        }, 1000);
    }

    function setLoading(loading) {
        if (!verifySubmit) return;
        verifySubmit.disabled = loading;
        verifySpinner?.classList.toggle('d-none', !loading);
        verifyCheck?.classList.toggle('d-none', loading);
    }

    function clearMessages() {
        verifyError?.classList.add('d-none');
        verifyError && (verifyError.textContent = '');
        verifySuccess?.classList.add('d-none');
        verifySuccess && (verifySuccess.textContent = '');
        verifyInput?.classList.remove('is-invalid');
        document.getElementById('spv_code_err')?.classList.add('d-none');
        document.getElementById('spv_code_err')?.classList.remove('d-block');
    }

    function showCodeError(message) {
        const errorEl = document.getElementById('spv_code_err');
        if (verifyInput) {
            verifyInput.classList.add('is-invalid');
        }
        if (errorEl) {
            errorEl.textContent = message;
            errorEl.classList.remove('d-none');
            errorEl.classList.add('d-block');
        }
    }

    async function parseResponseSafely(response) {
        const rawText = await response.text();
        let payload = null;

        if (rawText) {
            try {
                payload = JSON.parse(rawText);
            } catch (_) {
                payload = null;
            }
        }

        return { payload, rawText };
    }

    verifyModalEl?.addEventListener('shown.bs.modal', () => {
        clearMessages();
        verifyInput?.focus();
        startResendCooldown(60);
    });

    verifyForm?.addEventListener('submit', async (event) => {
        event.preventDefault();
        clearMessages();

        const code = verifyInput?.value.trim() ?? '';
        if (!/^\d{6}$/.test(code)) {
            showCodeError(vMsgs.enter6Digits);
            verifyInput?.focus();
            return;
        }

        if (isVerifySubmitting) {
            return;
        }

        isVerifySubmitting = true;
        setLoading(true);

        try {
            const response = await fetch(verifyForm.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                },
                credentials: 'same-origin',
                body: new FormData(verifyForm),
            });

            const { payload, rawText } = await parseResponseSafely(response);

            if (response.ok && payload?.success) {
                if (verifySuccess) {
                    verifySuccess.textContent = payload.message ?? vMsgs.verifySuccess;
                    verifySuccess.classList.remove('d-none');
                }
                const modal = bootstrap.Modal.getOrCreateInstance(verifyModalEl);
                modal.hide();
                window.location.reload();
                return;
            }

            if (response.status === 422) {
                const codeMessage = payload?.errors?.code?.[0] ?? payload?.message ?? vMsgs.verifyFailed;
                showCodeError(codeMessage);
                return;
            }

            if (response.status === 419) {
                verifyError.textContent = vMsgs.sessionExpired;
                verifyError.classList.remove('d-none');
                setTimeout(() => window.location.reload(), 1200);
                return;
            }

            if (response.status === 429) {
                verifyError.textContent = (payload?.message ?? vMsgs.tooManyAttempts);
                verifyError.classList.remove('d-none');
                return;
            }

            if (response.redirected || (!payload && rawText && rawText.includes('<!doctype html'))) {
                verifyError.textContent = vMsgs.sessionUpdated;
                verifyError.classList.remove('d-none');
                setTimeout(() => window.location.reload(), 1200);
                return;
            }

            verifyError.textContent = payload?.message ?? vMsgs.genericError;
            verifyError.classList.remove('d-none');
        } catch (_) {
            verifyError.textContent = vMsgs.connErr;
            verifyError.classList.remove('d-none');
        } finally {
            setLoading(false);
            isVerifySubmitting = false;
        }
    });

    resendBtn?.addEventListener('click', async () => {
        clearMessages();
        resendBtn.disabled = true;
        try {
            const response = await fetch("{{ route('two-factor.resend') }}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                },
                credentials: 'same-origin',
            });

            const { payload, rawText } = await parseResponseSafely(response);

            if (response.status === 419) {
                verifyError.textContent = vMsgs.sessionExpired;
                verifyError.classList.remove('d-none');
                setTimeout(() => window.location.reload(), 1200);
                return;
            }

            if (response.status === 429) {
                verifyError.textContent = payload?.message ?? vMsgs.resendTooFast;
                verifyError.classList.remove('d-none');
                return;
            }

            if (response.redirected || (!payload && rawText && rawText.includes('<!doctype html'))) {
                verifyError.textContent = vMsgs.sessionUpdated;
                verifyError.classList.remove('d-none');
                setTimeout(() => window.location.reload(), 1200);
                return;
            }

            if (payload?.success) {
                verifySuccess.textContent = payload.message ?? vMsgs.resentSuccess;
                verifySuccess.classList.remove('d-none');
                verifyInput?.focus();
                startResendCooldown(60);
                return;
            }

            verifyError.textContent = payload?.message ?? vMsgs.resendFailed;
            verifyError.classList.remove('d-none');
        } catch (_) {
            verifyError.textContent = vMsgs.resendFailed;
            verifyError.classList.remove('d-none');
        } finally {
            setResendButtonState();
        }
    });
})();
</script>