{{-- ============================================================ --}}
    {{-- 1. TEKLİ HARİTA KAYDETME ALANI (gizli form, toolbar butonu tetikler) --}}
    {{-- ============================================================ --}}
    <div id="saveFormSingle" style="display:none;" aria-hidden="true">
        <form id="chartSaveFormSingle" action="{{ route('mycharts.store') }}" method="POST" class="m-0">
            @csrf
            <input type="hidden" name="title" value="{{ request('title', '') }}">
            <input type="hidden" name="birth_date" value="{{ request('birth_date', request('date')) }}">
            <input type="hidden" name="birth_time" value="{{ request('birth_time', '') }}">
            <input type="hidden" name="unknown_time" value="{{ request('unknown_time', '') }}">
            <input type="hidden" name="gender" value="{{ request('gender', '') }}">
            <input type="hidden" name="birth_place_id" value="{{ request('birth_place_id') }}">
            <input type="hidden" name="house_system" value="{{ request('house_system', 'P') }}">
        </form>
    </div>

    {{-- ============================================================ --}}
    {{-- 2. İLİŞKİ HARİTASI KAYDETME ALANI (gizli form, toolbar butonu tetikler) --}}
    {{-- ============================================================ --}}
    @php
        $isRelationshipPreview =
            request()->filled('rel_date') &&
            request()->filled('rel_time') &&
            request()->filled('rel_lat') &&
            request()->filled('rel_lon');

        $hasRelPlaceIds = request()->filled('a_place_id') && request()->filled('b_place_id');
        $alreadySaved = request()->boolean('rel_saved');
    @endphp

    <div id="saveFormRel" style="display:none;" aria-hidden="true">
        <form id="chartSaveFormRel" action="{{ route('relationship.store') }}" method="POST" class="m-0">
            @csrf

            <input type="hidden" name="title" value="{{ request('relationship_title', '') }}">
            <input type="hidden" name="house_system" value="{{ request('house_system', 'P') }}">

            <input type="hidden" name="a_title" value="{{ request('title', t('person_a', 'Persona A')) }}">
            <input type="hidden" name="a_birth_date" value="{{ request('date') }}">
            <input type="hidden" name="a_birth_time" value="{{ request('time', '12:00') }}">
            <input type="hidden" name="a_gender" value="male">
            <input type="hidden" name="a_birth_place_id" value="{{ request('a_place_id') }}">

            <input type="hidden" name="b_title" value="{{ request('rel_title', t('person_b', 'Persona B')) }}">
            <input type="hidden" name="b_birth_date" value="{{ request('rel_date') }}">
            <input type="hidden" name="b_birth_time" value="{{ request('rel_time', '12:00') }}">
            <input type="hidden" name="b_gender" value="female">
            <input type="hidden" name="b_birth_place_id" value="{{ request('b_place_id') }}">

            {{-- ✅ Uranyen ilişki dial'ı: modaldaki Natal/Uranyen seçimi ve dial
                 derecesi kayda taşınır (kayıtlı harita tekrar açılınca dial açılsın) --}}
            <input type="hidden" name="chart_layout" value="{{ request('rel_chart_layout') === 'uranian' ? 'uranian' : 'natal' }}">
            <input type="hidden" name="rel_dial_degree" value="{{ (int) request('rel_dial_degree', 90) }}">

            <input type="hidden" name="return_to" value="{{ request()->fullUrl() }}">
        </form>
    </div>

    @php
        $isDualPreview =
            request()->boolean('dual_preview') && request()->filled('rel_date') && request()->filled('rel_lat');

        $hasDualPlaceIds = request()->filled('dual_a_place_id') && request()->filled('dual_b_place_id');
        $alreadySaved = request()->boolean('dual_saved');
    @endphp

    <div id="saveFormDual" style="display:none;" aria-hidden="true">
        <form id="chartSaveFormDual" action="{{ route('dual.store') }}" method="POST" class="m-0">
            @csrf

            <input type="hidden" name="title" value="{{ request('dual_chart_title', '') }}">
            <input type="hidden" name="house_system" value="{{ request('house_system', 'P') }}">

            <input type="hidden" name="a_title" value="{{ request('title', t('person_a', 'Persona A')) }}">
            <input type="hidden" name="a_birth_date" value="{{ request('date') }}">
            <input type="hidden" name="a_birth_time" value="{{ request('time', '12:00') }}">
            <input type="hidden" name="a_gender" value="male">
            <input type="hidden" name="a_birth_place_id" value="{{ request('dual_a_place_id') }}">

            <input type="hidden" name="b_title" value="{{ request('rel_title', t('person_b', 'Persona B')) }}">
            <input type="hidden" name="b_gender" value="female">
            <input type="hidden" name="b_birth_date" value="{{ request('rel_date') }}">
            <input type="hidden" name="b_birth_time" value="{{ request('rel_time', '12:00') }}">
            <input type="hidden" name="b_birth_place_id" value="{{ request('dual_b_place_id') }}">

            <input type="hidden" name="c_title" value="{{ request('rel2_title', t('person_c', 'Persona C')) }}">
            <input type="hidden" name="c_gender" value="male">
            <input type="hidden" name="c_birth_date" value="{{ request('rel2_date') }}">
            <input type="hidden" name="c_birth_time" value="{{ request('rel2_time', '12:00') }}">
            <input type="hidden" name="c_birth_place_id" value="{{ request('dual_c_place_id') }}">

            <input type="hidden" name="d_title" value="{{ request('rel3_title', t('person_d', 'Persona D')) }}">
            <input type="hidden" name="d_gender" value="male">
            <input type="hidden" name="d_birth_date" value="{{ request('rel3_date') }}">
            <input type="hidden" name="d_birth_time" value="{{ request('rel3_time', '12:00') }}">
            <input type="hidden" name="d_birth_place_id" value="{{ request('dual_d_place_id') }}">

            <input type="hidden" name="return_to" value="{{ request()->fullUrl() }}">
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var saveBtn = document.getElementById('btnToolbarSave');
            if (!saveBtn) return;

            var saveTriggers = Array.prototype.slice.call(document.querySelectorAll('[data-panel-trigger="btnToolbarSave"]'));
            var saveHideTimer = null;

            function getSavingLabel() {
                return (window.I18N && window.I18N.SAVING_LABEL) || 'Guardando...';
            }

            function getSavedLabel() {
                return (window.I18N && window.I18N.SAVED_LABEL) || 'Guardado';
            }

            function getSaveErrorLabel() {
                return (window.I18N && window.I18N.SAVE_ERROR_LABEL) || 'La operación de guardado ha fallado.';
            }

            function setSavingState(isSaving) {
                if (isSaving) {
                    saveBtn.disabled = true;
                    saveBtn.innerHTML =
                        '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>' +
                        getSavingLabel();
                    return;
                }

                saveBtn.disabled = false;
                var defaultLabel = saveBtn.getAttribute('data-default-label') || 'Kaydet';
                saveBtn.innerHTML = '<i class="fa-solid fa-floppy-disk me-1"></i><span>' + defaultLabel + '</span>';
            }

            function hasMeaningfulValue(form, fieldNames) {
                if (!form || !fieldNames || !fieldNames.length) return false;
                return fieldNames.every(function (name) {
                    var input = form.querySelector('[name="' + name + '"]');
                    return !!(input && String(input.value || '').trim());
                });
            }

            function pickActiveSaveForm() {
                var params = new URLSearchParams(window.location.search || '');
                var dualContext = (params.get('dual_preview') === '1')
                    || (params.get('dual_preview') === 'true')
                    || params.has('dual_a_place_id')
                    || params.has('dual_b_place_id');

                var relationshipContext = !dualContext && (
                    params.has('a_place_id')
                    || params.has('b_place_id')
                    || params.has('rel_date')
                    || params.has('rel_lat')
                );

                var relForm = document.getElementById('chartSaveFormRel');
                var dualForm = document.getElementById('chartSaveFormDual');

                if (dualContext && hasMeaningfulValue(dualForm, ['a_birth_place_id', 'b_birth_place_id', 'a_birth_date', 'b_birth_date'])) {
                    return dualForm;
                }

                if (relationshipContext && hasMeaningfulValue(relForm, ['a_birth_place_id', 'b_birth_place_id', 'a_birth_date', 'b_birth_date'])) {
                    return relForm;
                }

                var singleForm = document.getElementById('chartSaveFormSingle');
                if (hasMeaningfulValue(singleForm, ['birth_place_id', 'birth_date'])) {
                    return singleForm;
                }

                if (hasMeaningfulValue(dualForm, ['a_birth_place_id', 'b_birth_place_id', 'a_birth_date', 'b_birth_date'])) {
                    return dualForm;
                }

                if (hasMeaningfulValue(relForm, ['a_birth_place_id', 'b_birth_place_id', 'a_birth_date', 'b_birth_date'])) {
                    return relForm;
                }

                return null;
            }

            // Kayıttan hemen sonra (3 sn içinde) yeni bir önizleme üretilirse modallardaki
            // revealSaveActions() bunu çağırır; aksi halde bekleyen timer yeni önizlemenin
            // "Kaydet" butonunu tekrar gizler.
            window.__cancelSaveHideTimer = function () {
                if (saveHideTimer) {
                    window.clearTimeout(saveHideTimer);
                    saveHideTimer = null;
                }
            };

            function markSaved() {
                saveBtn.disabled = true;
                saveBtn.classList.add('disabled');
                saveBtn.innerHTML = '<i class="fa-solid fa-check me-1"></i><span>' + getSavedLabel() + '</span>';

                saveTriggers.forEach(function (el) {
                    el.classList.add('disabled');
                    el.setAttribute('aria-disabled', 'true');
                    el.style.pointerEvents = 'none';
                    var textEl = el.querySelector('span');
                    if (textEl) {
                        textEl.textContent = getSavedLabel();
                    }
                });

                if (saveHideTimer) {
                    window.clearTimeout(saveHideTimer);
                }

                saveHideTimer = window.setTimeout(function () {
                    saveBtn.classList.add('d-none');
                    saveBtn.setAttribute('aria-hidden', 'true');

                    saveTriggers.forEach(function (el) {
                        el.classList.add('d-none');
                        el.setAttribute('aria-hidden', 'true');
                    });
                }, 3000);
            }

            // ✅ Kayıt sonrası URL'yi "kaydedildi" durumuna çevir. AJAX kayıtta sayfa
            // yenilenmediği için URL'de önizleme işaretleri (a_place_id / b_place_id /
            // birth_place_id / dual_* ) kalıyordu; sayfa yenilenince (F5, ayar değişikliği
            // vb.) sunucu bu işaretlere bakıp "Kaydet" butonunu tekrar gösteriyordu.
            // panel.blade.php'deki $toolbarSaveIs* koşullarıyla birebir uyumludur.
            function markUrlAsSaved(form, result) {
                try {
                    var url = new URL(window.location.href);
                    var params = url.searchParams;
                    var panelForm = document.getElementById('chartForm');

                    function upsertPanelFormInput(name, value) {
                        if (!panelForm) return;
                        var input = panelForm.querySelector('[name="' + name + '"]');
                        if (!input) {
                            input = document.createElement('input');
                            input.type = 'hidden';
                            input.name = name;
                            panelForm.appendChild(input);
                        }
                        input.value = value;
                    }

                    if (form.id === 'chartSaveFormRel') {
                        params.set('rel_saved', '1');
                        upsertPanelFormInput('rel_saved', '1');
                    } else if (form.id === 'chartSaveFormDual') {
                        params.set('dual_saved', '1');
                        upsertPanelFormInput('dual_saved', '1');
                        if (result && result.dual_id) {
                            params.set('dual_id', String(result.dual_id));
                        }
                    } else if (form.id === 'chartSaveFormSingle') {
                        // Tekli kayıtta redirect URL'sinde chart_id gelir; chart_id yazılabildiyse
                        // önizleme işareti (birth_place_id) kaldırılır. chart_id gelmediyse
                        // birth_place_id korunur (cinsiyet/sahip çözümlemesi ona dayanır).
                        var chartId = null;
                        if (result && result.redirect) {
                            chartId = new URL(result.redirect, window.location.origin).searchParams.get('chart_id');
                        }
                        if (chartId) {
                            params.set('chart_id', chartId);
                            params.delete('birth_place_id');
                        }
                    }

                    window.history.replaceState(null, '', url.toString());
                } catch (error) {
                    console.warn('Panel save URL sync failed:', error);
                }
            }

            async function submitSaveFormAjax(form) {
                var csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
                var formData = new FormData(form);

                var response = await fetch(form.action, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrf,
                    },
                    body: formData,
                    credentials: 'same-origin',
                });

                var data = await response.json().catch(function () { return null; });

                if (!response.ok || !data) {
                    throw new Error(getSaveErrorLabel());
                }

                if (data.saved === false) {
                    throw new Error(data.message || getSaveErrorLabel());
                }

                return data;
            }

            // ✅ Tekil kayıtta o an panelde seçili olan ana harita tipini forma yaz
            // (örn. Uranyen seçiliyken kaydedilen harita tekrar açılınca uranyen açılsın).
            function syncSingleFormMainChart(form) {
                if (!form || form.id !== 'chartSaveFormSingle') return;

                var rawKey = String(window.activeKey || '').replace(/_transit$/, '');

                function upsert(name, value) {
                    var input = form.querySelector('[name="' + name + '"]');
                    if (!input) {
                        input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = name;
                        form.appendChild(input);
                    }
                    input.value = value;
                }

                upsert('main_chart', rawKey && rawKey !== 'natal' ? rawKey : '');

                var dialDegree = '';
                if (rawKey === 'uranian_dial') {
                    dialDegree = new URLSearchParams(window.location.search).get('dial_degree') || '90';
                }
                upsert('dial_degree', dialDegree);
            }

            saveBtn.addEventListener('click', async function () {
                if (saveBtn.disabled) return;

                // Sırayla aktif formu bul ve gönder
                var form = pickActiveSaveForm();

                if (!form) return;

                syncSingleFormMainChart(form);

                setSavingState(true);

                try {
                    var result = await submitSaveFormAjax(form);
                    markSaved();
                    markUrlAsSaved(form, result);

                    // ✅ "Haritalarım" modalı sayfa yenilemeden güncel listeyi göstersin.
                    if (typeof window.refreshMyChartsModal === 'function') {
                        window.refreshMyChartsModal();
                    }

                    if (typeof window.showToast === 'function') {
                        window.showToast(result.message || 'Harita basariyla kaydedildi.', 'success');
                    }
                } catch (error) {
                    setSavingState(false);
                    if (typeof window.showToast === 'function') {
                        window.showToast(error.message || getSaveErrorLabel(), 'error');
                    } else {
                        alert(error.message || getSaveErrorLabel());
                    }
                }
            });
        });
    </script>