@php
    $isRelCommentFlow = request('comment_checkout') === 'relationship';
    $relFlowDate = request('date');
    if ($relFlowDate && preg_match('/^\d{4}-\d{2}-\d{2}$/', $relFlowDate)) {
        $dParts = explode('-', $relFlowDate);
        $relFlowDate = $dParts[2] . '.' . $dParts[1] . '.' . $dParts[0];
    }
    $relFlowTime = request('time') ?: '12:00';
    $relFlowCity = request('city') ?: '';
    $relFlowTitle = request('title') ?: 'Kişi 1';
    $relFlowPlaceId = request('place_id') ?: (request('a_place_id') ?: request('a_birth_place_id'));
@endphp
<div class="modal fade" id="relationshipModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl modal-fullscreen-sm-down">
        <div class="modal-content modal-modern">
            <div class="modal-header">
                <div class="d-flex flex-column">
                    <h5 class="modal-title mb-0">{{ t('relationship-analysis') }}</h5>
                    <small class="text-muted">{{ t('multiple-maps-desc') }}</small>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('close') }}"></button>
            </div>
            <form id="relationshipForm">
                @csrf
                <div class="modal-body">
                    @if($isRelCommentFlow)
                        <div class="alert alert-info py-2 px-3 mb-3 d-flex align-items-center gap-2">
                            <i class="fa-solid fa-heart-circle-check fs-5 text-primary"></i>
                            <div>
                                <strong>İlişki Yorumu ve PDF Raporu</strong><br>
                                <small>Lütfen 2. kişinin doğum bilgilerini giriniz. Bilgileri girdikten sonra doğrudan ödeme sayfasına yönlendirileceksiniz.</small>
                            </div>
                        </div>
                        <input type="hidden" name="comment_checkout" value="relationship">
                    @endif
                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">{{ t('relationship-title') }}</label>
                            <input type="text" name="title" class="form-control form-control-modern"
                                placeholder="{{ t('multiple-map-title-placeholder') }}"
                                value="{{ $isRelCommentFlow ? 'İlişki Analizi: ' . $relFlowTitle : '' }}">
                        </div>
                        {{-- ✅ Harita tipi: Natal (klasik sinastri bi-wheel) | Uranyen (dial,
                             iki kişinin gezegenleri aynı dial üzerinde) --}}
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-semibold">Harita Tipi</label>
                            <div class="btn-group w-100" role="group" aria-label="Harita tipi">
                                <input type="radio" class="btn-check" name="chart_layout" id="relLayoutNatal"
                                    value="natal" autocomplete="off" checked>
                                <label class="btn btn-outline-secondary" for="relLayoutNatal">
                                    <i class="fa-solid fa-star me-1"></i>Natal
                                </label>
                                <input type="radio" class="btn-check" name="chart_layout" id="relLayoutUranian"
                                    value="uranian" autocomplete="off">
                                <label class="btn btn-outline-secondary" for="relLayoutUranian">
                                    <i class="fa-solid fa-compass me-1"></i>Uranyen
                                </label>
                            </div>
                        </div>
                        {{-- ✅ Dial derecesi — sadece Uranyen seçiliyken görünür (drawer'daki
                             "Dial Derecesi" grubunun karşılığı); haritalar bu dereceyle üretilir. --}}
                        <div class="col-12 d-none" id="relDialDegreeRow">
                            <label class="form-label fw-semibold">Dial Derecesi</label>
                            <div class="btn-group w-100" role="group" aria-label="Dial derecesi">
                                @foreach ([30, 45, 60, 90] as $relDeg)
                                    <input type="radio" class="btn-check" name="rel_dial_degree"
                                        id="relDialDeg{{ $relDeg }}" value="{{ $relDeg }}" autocomplete="off"
                                        {{ $relDeg === 90 ? 'checked' : '' }}>
                                    <label class="btn btn-outline-secondary" for="relDialDeg{{ $relDeg }}">{{ $relDeg }}°</label>
                                @endforeach
                            </div>
                        </div>
                        <select name="house_system" class="form-select form-select-modern" hidden>
                            <option value="P" selected>Placidus (P)</option>
                        </select>
                    </div>
                    <hr class="my-3">
                    <div class="row g-3">
                        {{-- KİŞİ A --}}
                        <div class="col-12 col-lg-6">
                            <div class="p-3 border rounded-3 bg-white">
                                <div class="fw-bold mb-2 d-flex align-items-center gap-2">
                                    <span style="color:#1e88e5;"><i class="fa-solid fa-mars"></i></span>
                                    {{ t('person') }} #1 <span class="text-muted fw-normal"
                                        style="font-size:.82em;">({{ t('male') }})</span>
                                </div>
                                <div class="row g-3">
                                    <div class="col-12">
                                        <label class="form-label fw-semibold">{{ t('title') }}</label>
                                        <input type="text" name="a_title" class="form-control form-control-modern"
                                            placeholder="{{ t('enter-title') }}" value="{{ $isRelCommentFlow ? $relFlowTitle : '' }}" required>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label fw-semibold">{{ t('date-of-birth') }}</label>
                                        <input type="text" name="a_birth_date" id="rel_a_birth_date"
                                            class="form-control form-control-modern birth-date-mask"
                                            placeholder="GG.AA.YYYY" maxlength="10" autocomplete="off"
                                            value="{{ $isRelCommentFlow ? $relFlowDate : '' }}" required>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label fw-semibold">{{ t('birth-time') }}</label>
                                        <input type="text" name="a_birth_time"
                                            class="form-control form-control-modern birth-time-mask" id="a_birth_time"
                                            placeholder="SS:DD" maxlength="5" autocomplete="off"
                                            value="{{ $isRelCommentFlow ? $relFlowTime : '' }}">
                                        <div class="form-check mt-2">
                                            <input class="form-check-input" type="checkbox" id="a_unknown_time"
                                                name="a_unknown_time" value="1">
                                            <label class="form-check-label"
                                                for="a_unknown_time">{{ t('unknown-birth-time') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label fw-semibold">{{ t('birthplace') }}</label>
                                        <input type="hidden" name="a_birth_place_id" id="a_birth_place_id" value="{{ $isRelCommentFlow ? $relFlowPlaceId : '' }}">
                                        <div class="position-relative">
                                            <div class="input-group input-group-modern">
                                                <span class="input-group-text"><i
                                                        class="fa-solid fa-map-pin green-color"></i></span>
                                                <input type="text" id="a_birth_place"
                                                    class="form-control form-control-modern"
                                                    placeholder="{{ t('enter-city-name') }}" autocomplete="off"
                                                    value="{{ $isRelCommentFlow ? $relFlowCity : '' }}"
                                                    required>
                                            </div>
                                            <div id="a_birth_place_results"
                                                class="list-group position-absolute w-100 shadow-sm results-modern"
                                                style="z-index: 1050; display:none; max-height: 260px; overflow:auto;">
                                            </div>
                                        </div>
                                        <div class="form-text text-muted mt-1">{{ t('select-from-list-to-save') }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- KİŞİ B --}}
                        <div class="col-12 col-lg-6">
                            <div class="p-3 border rounded-3 bg-white">
                                <div class="fw-bold mb-2 d-flex align-items-center gap-2">
                                    <span style="color:#e91e63;"><i class="fa-solid fa-venus"></i></span>
                                    {{ t('person') }} #2 <span class="text-muted fw-normal"
                                        style="font-size:.82em;">({{ t('female') }})</span>
                                </div>
                                <div class="row g-3">
                                    <div class="col-12">
                                        <label class="form-label fw-semibold">{{ t('title') }}</label>
                                        <input type="text" name="b_title" class="form-control form-control-modern"
                                            placeholder="Örn: Partner" required>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label fw-semibold">{{ t('date-of-birth') }}</label>
                                        <input type="text" name="b_birth_date" id="rel_b_birth_date"
                                            class="form-control form-control-modern birth-date-mask"
                                            placeholder="GG.AA.YYYY" maxlength="10" autocomplete="off" required>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label fw-semibold">{{ t('birth-time') }}</label>
                                        <input type="text" name="b_birth_time"
                                            class="form-control form-control-modern birth-time-mask" id="b_birth_time"
                                            placeholder="SS:DD" maxlength="5" autocomplete="off">
                                        <div class="form-check mt-2">
                                            <input class="form-check-input" type="checkbox" id="b_unknown_time"
                                                name="b_unknown_time" value="1">
                                            <label class="form-check-label" for="b_unknown_time">
                                                {{ t('unknown-birth-time') }}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label fw-semibold">{{ t('birthplace') }}</label>
                                        <input type="hidden" name="b_birth_place_id" id="b_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 green-color"></i></span>
                                                <input type="text" id="b_birth_place"
                                                    class="form-control form-control-modern"
                                                    placeholder="{{ t('enter-city-name') }}" autocomplete="off"
                                                    required>
                                            </div>
                                            <div id="b_birth_place_results"
                                                class="list-group position-absolute w-100 shadow-sm results-modern"
                                                style="z-index: 1050; display:none; max-height: 260px; overflow:auto;">
                                            </div>
                                        </div>
                                        <div class="form-text text-muted mt-1">{{ t('select-from-list-to-save') }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-danger mt-3 d-none" id="relationshipError"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-color-two" data-bs-dismiss="modal">{{ t('close') }}</button>

                    {{--  Önizleme (kayıt etmez) --}}
                    <button type="submit" class="btn btn-color-four text-white" data-mode="preview"
                        id="relationshipSubmitBtn">
                        <span class="spinner-border spinner-border-sm me-2 d-none" role="status" aria-hidden="true"></span>
                        <span class="btn-label">{{ $isRelCommentFlow ? 'Devam Et ve Ödeme Yap (' . number_format($commentTokenProducts['relationship']['price'] ?? 493, 0, ',', '.') . ' ₺)' : t('calculate') }}</span>
                    </button>

                    {{--  Kaydet --}}
                    {{-- <button type="submit" class="btn btn-success text-white" data-mode="save">
                        Kaydet
                    </button> --}}
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', () => {

        // Register ile aynı manuel maske deneyimi (GG.AA.YYYY / SS:DD)
        function maskDateInput(el) {
            if (!el) return;
            el.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, 8);
                        }
                    }
                }
                e.target.value = formatted;
            });
        }

        function maskTimeInput(el) {
            if (!el) return;
            el.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;
            });
        }

        function isValidRealDateDMY(s) {
            if (!/^\d{2}\.\d{2}\.\d{4}$/.test(s)) return false;
            const [dd, mm, yyyy] = s.split('.').map(n => parseInt(n, 10));
            if (!yyyy || yyyy < 1000 || yyyy > 9999) return false;
            if (!mm || mm < 1 || mm > 12) return false;
            if (!dd || dd < 1 || dd > 31) return false;
            const dt = new Date(Date.UTC(yyyy, mm - 1, dd));
            return dt.getUTCFullYear() === yyyy && (dt.getUTCMonth() + 1) === mm && dt.getUTCDate() === dd;
        }

        function isValidRealTimeHM(s) {
            if (!/^\d{2}:\d{2}$/.test(s)) return false;
            const [hh, mi] = s.split(':').map(n => parseInt(n, 10));
            if (hh < 0 || hh > 23) return false;
            if (mi < 0 || mi > 59) return false;
            return true;
        }

        function dmyToIso(dmy) {
            const [dd, mm, yyyy] = dmy.split('.');
            return `${yyyy}-${mm}-${dd}`;
        }

        maskDateInput(document.getElementById('rel_a_birth_date'));
        maskDateInput(document.getElementById('rel_b_birth_date'));
        maskTimeInput(document.getElementById('a_birth_time'));
        maskTimeInput(document.getElementById('b_birth_time'));

        function bindUnknownTime(chkId, timeId) {
            const chk = document.getElementById(chkId);
            const time = document.getElementById(timeId);
            chk?.addEventListener('change', () => {
                if (!time) return;
                time.disabled = chk.checked;
                if (chk.checked) time.value = '';
            });
        }

        bindUnknownTime('a_unknown_time', 'a_birth_time');
        bindUnknownTime('b_unknown_time', 'b_birth_time');

        // ✅ Dial derecesi satırı sadece "Uranyen" harita tipi seçiliyken görünür.
        const relDialDegreeRow = document.getElementById('relDialDegreeRow');
        function syncRelDialDegreeRow() {
            const layout = document.querySelector('#relationshipForm input[name="chart_layout"]:checked')?.value;
            relDialDegreeRow?.classList.toggle('d-none', layout !== 'uranian');
        }
        document.querySelectorAll('#relationshipForm input[name="chart_layout"]').forEach((radio) => {
            radio.addEventListener('change', syncRelDialDegreeRow);
        });
        syncRelDialDegreeRow();

        function bindCityAutocomplete(inputId, hiddenId, boxId) {
            const input = document.getElementById(inputId);
            const hidden = document.getElementById(hiddenId);
            const box = document.getElementById(boxId);
            if (!input || !hidden || !box) return;

            let t = null;

            const closeBox = () => {
                box.style.display = 'none';
                box.innerHTML = '';
            };

            input.addEventListener('input', () => {
                hidden.value = '';
                const q = input.value.trim();
                if (q.length < 2) return closeBox();

                clearTimeout(t);
                t = setTimeout(async () => {
                    const url = @json(route('geonames.cities.search')) + '?q=' + encodeURIComponent(
                        q);
                    const res = await fetch(url, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    const data = await res.json().catch(() => []);
                    if (!Array.isArray(data) || !data.length) return closeBox();

                    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('');
                    box.style.display = 'block';
                }, 250);
            });

            box.addEventListener('click', (e) => {
                const btn = e.target.closest('button[data-id]');
                if (!btn) return;
                hidden.value = btn.dataset.id;
                input.value = btn.dataset.label;
                closeBox();
            });

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

        bindCityAutocomplete('a_birth_place', 'a_birth_place_id', 'a_birth_place_results');
        bindCityAutocomplete('b_birth_place', 'b_birth_place_id', 'b_birth_place_results');

        //  Submit
        const form = document.getElementById('relationshipForm');
        const err = document.getElementById('relationshipError');
        const relationshipModalEl = document.getElementById('relationshipModal');
        const panelForm = document.getElementById('chartForm');

        const submitBtn = document.getElementById('relationshipSubmitBtn');
        const submitSpinner = submitBtn?.querySelector('.spinner-border');

        function setSubmitting(isSubmitting) {
            if (!submitBtn) return;
            submitBtn.disabled = isSubmitting;
            if (submitSpinner) {
                submitSpinner.classList.toggle('d-none', !isSubmitting);
            }
        }

        function getModalInstance(el) {
            if (!el || !window.bootstrap || !bootstrap.Modal) return null;
            return bootstrap.Modal.getInstance(el) || new bootstrap.Modal(el);
        }

        function showCalculatingModal() {
            const modal = getModalInstance(document.getElementById('newChartCalculatingModal'));
            if (modal) modal.show();
        }

        function hideCalculatingModal() {
            const modal = getModalInstance(document.getElementById('newChartCalculatingModal'));
            if (modal) modal.hide();
        }

        function setPanelChartShimmer(active) {
            const mainDropzone = document.getElementById('mainDropzone');
            const thumbCards = Array.from(document.querySelectorAll('#leftList .thumb-item, #rightList .thumb-item'));
            if (mainDropzone) mainDropzone.classList.toggle('chart-refresh-shimmer', active);
            thumbCards.forEach((el) => el.classList.toggle('chart-refresh-shimmer', active));
        }

        function upsertHiddenInput(targetForm, name, value) {
            if (!targetForm) return;
            let input = targetForm.querySelector('[name="' + name + '"]');
            if (!input) {
                input = document.createElement('input');
                input.type = 'hidden';
                input.name = name;
                targetForm.appendChild(input);
            }
            input.value = value == null ? '' : String(value);
        }

        function revealSaveActions() {
            window.__cancelSaveHideTimer?.();
            const saveBtn = document.getElementById('btnToolbarSave');
            if (saveBtn) {
                saveBtn.classList.remove('d-none', 'disabled');
                saveBtn.removeAttribute('aria-hidden');
                saveBtn.disabled = false;
                const label = saveBtn.getAttribute('data-default-label') || 'Kaydet';
                saveBtn.innerHTML = '<i class="fa-solid fa-floppy-disk me-1"></i><span>' + label + '</span>';
            }
            document.querySelectorAll('[data-save-trigger-col]').forEach((col) => {
                col.classList.remove('d-none');
                col.removeAttribute('aria-hidden');
            });
            document.querySelectorAll('[data-panel-trigger="btnToolbarSave"]').forEach((trigger) => {
                trigger.classList.remove('d-none', 'disabled');
                trigger.removeAttribute('aria-hidden');
                trigger.setAttribute('aria-disabled', 'false');
                trigger.style.pointerEvents = '';
                const defaultLabel = trigger.getAttribute('data-default-label') || 'Kaydet';
                const textEl = trigger.querySelector('span');
                if (textEl) textEl.textContent = defaultLabel;
            });
        }

        function syncRelSaveForm(redirectParams) {
            const saveForm = document.getElementById('chartSaveFormRel');
            if (!saveForm) return;

            upsertHiddenInput(saveForm, 'title', redirectParams.get('relationship_title') || '');
            upsertHiddenInput(saveForm, 'house_system', redirectParams.get('house_system') || 'P');

            upsertHiddenInput(saveForm, 'a_title', redirectParams.get('title') || '');
            upsertHiddenInput(saveForm, 'a_birth_date', redirectParams.get('date') || '');
            upsertHiddenInput(saveForm, 'a_birth_time', redirectParams.get('time') || '');
            upsertHiddenInput(saveForm, 'a_birth_place_id', redirectParams.get('a_birth_place_id') || redirectParams.get('a_place_id') || '');

            upsertHiddenInput(saveForm, 'b_title', redirectParams.get('rel_title') || '');
            upsertHiddenInput(saveForm, 'b_birth_date', redirectParams.get('rel_date') || '');
            upsertHiddenInput(saveForm, 'b_birth_time', redirectParams.get('rel_time') || '');
            upsertHiddenInput(saveForm, 'b_birth_place_id', redirectParams.get('b_birth_place_id') || redirectParams.get('b_place_id') || '');

            // ✅ Uranyen ilişki dial'ı: layout + dial derecesi kayda taşınır —
            // aksi halde kayıtlı uranyen ilişki haritası natal sinastri olarak açılır.
            upsertHiddenInput(saveForm, 'chart_layout', redirectParams.get('rel_chart_layout') === 'uranian' ? 'uranian' : 'natal');
            upsertHiddenInput(saveForm, 'rel_dial_degree', redirectParams.get('rel_dial_degree') || '90');

            upsertHiddenInput(saveForm, 'return_to', window.location.href);
        }

        // Panel çalışma zamanı (chartForm, mainSvg, endpoint URL) mevcutsa AJAX dener —
        // mevcut görünüm tekli, ilişki veya çoklu harita olsun fark etmez:
        // switchPanelToPairView() her durumda (mod geçişi dahil) paneli sıfırdan doğru
        // şekilde ilişki görünümüne kurar. Panel çalışma zamanı hiç yoksa (örn. bu modal
        // panel dışında bir yerde kullanılıyorsa) güvenli eski davranışa (tam sayfa
        // yönlendirme) düşer.
        function canAttemptPairAjax() {
            return !!(panelForm && document.getElementById('mainSvg') && window.RELATIONSHIP_CHART_LAZY_URL && typeof window.switchPanelToPairView === 'function');
        }

        async function refreshPairChartsInPlace(redirectParams) {
            // ✅ Önce eski ilişki/çoklu harita alanlarını (özellikle rel2_*/rel3_*/dual_* —
            // bir önceki çoklu haritadan kalmış olabilir) temizle, sonra sadece yeni çiftin
            // gönderdiği alanları set et. Aksi halde 4 kişilik haritadan 2 kişilik ilişkiye
            // geçilince C/D eski veriyle kalır.
            window.clearPanelFormPairFields?.(panelForm);
            redirectParams.forEach((value, key) => upsertHiddenInput(panelForm, key, value));

            const formData = new FormData(panelForm);
            const response = await fetch(window.RELATIONSHIP_CHART_LAZY_URL, {
                method: 'POST',
                body: formData,
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
            });
            const data = await response.json().catch(() => null);
            if (!response.ok || !data || !data.ok || !data.charts) {
                throw new Error((data && data.message) || 'İlişki haritası hesaplanamadı.');
            }

            const switched = window.switchPanelToPairView(data.charts, {
                relationshipA: data.relationshipA,
                relationshipB: data.relationshipB,
                relationshipC: data.relationshipC,
                relationshipD: data.relationshipD,
                houseSystemCode: redirectParams.get('house_system') || 'P',
                // ✅ Uranyen seçildiyse ana harita dial olarak açılır (backend
                // default_key'i rel_chart_layout parametresine göre belirler).
                defaultKey: data.default_key,
            });
            if (!switched) {
                throw new Error('__FALLBACK_TO_RELOAD__');
            }

            window.history.replaceState(null, '', @json(route('panel')) + '?' + redirectParams.toString());
            syncRelSaveForm(redirectParams);
            revealSaveActions();

            if (typeof window.showToast === 'function') {
                window.showToast('Yeni ilişki haritası hazırlandı.', 'success');
            }
        }

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

            err.classList.add('d-none');
            err.textContent = '';

            const aId = document.getElementById('a_birth_place_id')?.value;
            const bId = document.getElementById('b_birth_place_id')?.value;

            if (!aId || !bId) {
                err.textContent =
                    (window.I18N && window.I18N.REL_BIRTHPLACE_REQUIRED)
                    || '';
                err.classList.remove('d-none');
                setSubmitting(false);
                return;
            }
            setSubmitting(true);

            try {
                const fd = new FormData(form);
                const aUnknown = document.getElementById('a_unknown_time')?.checked;
                const bUnknown = document.getElementById('b_unknown_time')?.checked;

                const aBirthDate = (fd.get('a_birth_date') || '').toString();
                const bBirthDate = (fd.get('b_birth_date') || '').toString();
                if (!aBirthDate || !isValidRealDateDMY(aBirthDate) || !bBirthDate || !isValidRealDateDMY(bBirthDate)) {
                    err.textContent = 'Lütfen geçerli bir doğum tarihi girin (GG.AA.YYYY).';
                    err.classList.remove('d-none');
                    setSubmitting(false);
                    return;
                }

                const aBirthTimeRaw = (fd.get('a_birth_time') || '').toString();
                const bBirthTimeRaw = (fd.get('b_birth_time') || '').toString();
                if (!aUnknown && aBirthTimeRaw && !isValidRealTimeHM(aBirthTimeRaw)) {
                    err.textContent = 'Lütfen geçerli bir doğum saati girin (SS:DD).';
                    err.classList.remove('d-none');
                    setSubmitting(false);
                    return;
                }
                if (!bUnknown && bBirthTimeRaw && !isValidRealTimeHM(bBirthTimeRaw)) {
                    err.textContent = 'Lütfen geçerli bir doğum saati girin (SS:DD).';
                    err.classList.remove('d-none');
                    setSubmitting(false);
                    return;
                }

                // Backend'in beklediği format: YYYY-MM-DD (eski input type="date" davranışı)
                fd.set('a_birth_date', dmyToIso(aBirthDate));
                fd.set('b_birth_date', dmyToIso(bBirthDate));

                if (aUnknown && !fd.get('a_birth_time')) fd.set('a_birth_time', '12:00');
                if (bUnknown && !fd.get('b_birth_time')) fd.set('b_birth_time', '12:00');

                const res = await fetch(@json(route('relationship.preview')), {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    body: fd
                });

                const j = await res.json().catch(() => ({}));

                if (!res.ok) {
                    err.textContent =
                        j.message
                        || ((window.I18N && window.I18N.REL_GENERIC_ERROR) || '');
                    err.classList.remove('d-none');
                    setSubmitting(false);
                    return;
                }

                if (j.redirect) {
                    if (fd.get('comment_checkout') === 'relationship' || !canAttemptPairAjax()) {
                        window.location.href = j.redirect;
                        return;
                    }

                    const redirectParams = new URL(j.redirect, window.location.origin).searchParams;
                    const relationshipModal = getModalInstance(relationshipModalEl);
                    if (relationshipModal) relationshipModal.hide();

                    showCalculatingModal();
                    setPanelChartShimmer(true);
                    window.__suppressNextLayoutSavedToast = true;

                    try {
                        await refreshPairChartsInPlace(redirectParams);
                        setSubmitting(false);
                    } catch (error) {
                        if (error?.message === '__FALLBACK_TO_RELOAD__') {
                            window.location.href = j.redirect;
                            return;
                        }
                        err.textContent = error?.message || ((window.I18N && window.I18N.REL_GENERIC_ERROR) || 'Bir hata oluştu.');
                        err.classList.remove('d-none');
                        if (relationshipModal) relationshipModal.show();
                        setSubmitting(false);
                    } finally {
                        hideCalculatingModal();
                        setPanelChartShimmer(false);
                    }
                    return;
                }
                setSubmitting(false);
            } catch (_error) {
                err.textContent = (window.I18N && window.I18N.REL_GENERIC_ERROR) || 'Bir hata oluştu.';
                err.classList.remove('d-none');
                setSubmitting(false);
            }
        });

        @if($isRelCommentFlow || request('open_relationship_modal') === '1')
        setTimeout(function() {
            const rm = document.getElementById('relationshipModal');
            if (rm && window.bootstrap && bootstrap.Modal) {
                bootstrap.Modal.getOrCreateInstance(rm).show();
            }
        }, 500);
        @endif
    });
</script>