@extends('frontend.main_master')
@section('page-context', 'complete-social-profile')
@push('styles')
    <link rel="stylesheet" href="{{ asset('frontend/css/auth/login-page.css') }}">
@endpush
@section('content')
    <div class="container-fluid p-0 overflow-hidden login-auth-shell">
        <div class="row g-0 login-auth-row">
            <div class="col-lg-6 col-md-12 d-flex align-items-center justify-content-center login-form-section overflow-hidden">
                <div class="login-wrapper w-100 p-2 p-sm-3 p-md-5">
                    <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>

                    <h2 class="h4 fs-5 mb-2 mb-sm-3 mb-md-4 fw-bold text-start login-heading-color">
                        <i class="fa-solid fa-user-pen me-2"></i>Profil Bilgilerinizi Tamamlayın
                    </h2>
                    <p class="mb-4 text-muted">
                        Google / Facebook ile giriş yaptınız. Astroloji haritalarınızın doğru hesaplanabilmesi ve
                        hesabınızın güvenliği için aşağıdaki bilgileri bir kez girip telefonunuzu doğrulamanız
                        gerekiyor — devam etmeden önce bu adım zorunludur.
                    </p>

                    <form id="completeSocialProfileForm">
                        @csrf

                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Telefon Numarası <span class="text-danger">*</span></label>
                                <input type="tel" name="phone" id="sp_phone" class="form-control login-input"
                                    placeholder="05XX XXX XX XX"
                                    value="{{ preg_match('/^0[0-9]{10}$/', (string) ($user->phone ?? '')) ? $user->phone : '' }}"
                                    required>
                                <div class="invalid-feedback" id="sp_phone_err"></div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Cinsiyet <span class="text-danger">*</span></label>
                                <select name="gender" id="sp_gender" class="form-select login-input" required>
                                    <option value="">Cinsiyet Seçin</option>
                                    <option value="male" {{ $user->gender === 'male' ? 'selected' : '' }}>Erkek</option>
                                    <option value="female" {{ $user->gender === 'female' ? 'selected' : '' }}>Kadın</option>
                                </select>
                                <div class="invalid-feedback" id="sp_gender_err"></div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Doğum Tarihi <span class="text-danger">*</span></label>
                                <input type="date" name="birth_date" id="sp_birth_date" class="form-control login-input"
                                    value="{{ $user->birth_date && $user->birth_date->format('Y-m-d') !== '2000-01-01' ? $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>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Doğum Saati <small class="text-muted fw-normal">(opsiyonel)</small></label>
                                <input type="time" name="birth_time" id="sp_birth_time" class="form-control login-input">
                                <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">Doğum saatimi bilmiyorum</label>
                                </div>
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">Doğum Yeri <span class="text-danger">*</span></label>
                                <input type="hidden" name="birth_place_id" id="sp_birth_place_id">
                                <div class="position-relative">
                                    <input type="text" id="sp_birth_place" class="form-control login-input"
                                        placeholder="Şehir adı yazın ve listeden seçin" autocomplete="off">
                                    <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">Listeden seçim yapmak zorunludur.</small>
                            </div>

                            @if (!$user->referral_code_id)
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Referans Kodu <small class="text-muted fw-normal">(opsiyonel)</small></label>
                                    <input type="text" name="referral_code" id="sp_referral_code" class="form-control login-input"
                                        placeholder="Varsa referans kodunuzu girin" 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>

                        <button type="submit" class="btn btn-login w-100 mt-4 mb-3" 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>Kaydet ve Devam Et
                        </button>

                        <div class="text-center">
                            <a href="{{ route('logout') }}"
                               onclick="event.preventDefault(); document.getElementById('sp-logout-form').submit();"
                               class="forgot-password-link">
                                <i class="fa-solid fa-arrow-right-from-bracket me-1"></i> Çıkış Yap
                            </a>
                            <form id="sp-logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                @csrf
                            </form>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<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 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 = '';
    });

    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();
                            document.getElementById('sp_birth_place_err')?.classList.add('d-none');
                        });
                        placeResults.appendChild(btn);
                    });
                    openPlaceResults();
                } catch (_) { closePlaceResults(); }
            }, 300);
        });

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

    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');

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

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

    function clearErrors() {
        ['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 = '');
    }

    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;
        }

        if (!placeHiddenId?.value) {
            showFieldError('sp_birth_place', 'sp_birth_place_err', 'Lütfen doğum yerini listeden seçin.');
            placeInput?.focus();
            return;
        }

        setLoading(true);
        const requestController = new AbortController();
        const requestTimeout = setTimeout(() => requestController.abort(), 20000);

        try {
            const body = new FormData(form);
            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 rawText = await res.text();
            let payload = null;
            try { payload = rawText ? JSON.parse(rawText) : null; } catch (_) { payload = null; }

            // ✅ Modal'dan farkı: basariyla kaydedilince modal acmak yerine
            // dogrudan gercek two-factor.verify SAYFASINA yonlendiriyoruz.
            if (res.ok && payload?.success) {
                window.location.href = payload.verification_url;
                return;
            }

            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] : 'Geçersiz değer.';
                    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 ?? 'Form doğrulanamadı. Lütfen alanları kontrol edin.');
                }
                return;
            }

            if (res.status === 419) {
                showGlobalError('Oturum süresi doldu. Sayfa yenileniyor...');
                setTimeout(() => window.location.reload(), 1200);
                return;
            }

            showGlobalError(payload?.message ?? 'Profil bilgileri kaydedilemedi. Lütfen tekrar deneyin.');
        } catch (error) {
            showGlobalError(error?.name === 'AbortError'
                ? 'İşlem zaman aşımına uğradı. Lütfen tekrar deneyin.'
                : 'Bağlantı hatası. Lütfen tekrar deneyin.');
        } finally {
            clearTimeout(requestTimeout);
            setLoading(false);
        }
    });
})();
</script>
@endpush