{{-- Harita Kombinasyonları Modal: İki haritayı Solar Arc konseptinde bi-wheel olarak gösterir (İlişki Haritası Seçimi ile aynı tasarım) --}}
<div class="modal fade modal-modern" id="chartComboModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-fullscreen-sm-down">
        <div class="modal-content">

            <div class="modal-header">
                <div>
                    <div class="modal-title d-flex align-items-center gap-2">
                        <i class="fa-solid fa-layer-group"></i>
                        {{ t('chart-combo-cta-title') }}
                    </div>
                    <div class="modal-subtitle">
                        {{ t('chart-combo-cta-subtitle-two') }}
                    </div>
                </div>
                <button class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('close') }}"></button>
            </div>

            <div class="modal-body">
                <div class="row g-3">

                    {{-- A: İç halka --}}
                    <div class="col-12 col-md-6">
                        <div class="picker-card">
                            <div class="picker-head">
                                <div class="picker-person">
                                    <span class="picker-dot" style="background:#1e88e5;"></span>
                                    <span>{{ t('inner-ring') }}</span>
                                </div>
                                <span class="picker-badge">
                                    <i class="fa-regular fa-circle-dot me-1"></i> A
                                </span>
                            </div>

                            <label class="form-label small mb-1">{{ t('inner-ring-type') }} (A)</label>
                            <select class="form-select modern" id="chartComboInner">
                                <option value="natal">{{ t('natal') }}</option>
                                <option value="draconic">{{ t('draconic') }}</option>
                                <option value="solar_return">{{ t('solar-return') }}</option>
                                <option value="solar_arc">{{ t('solar-arc') }}</option>
                                <option value="secondary_progression_361">{{ t('secondary-progression-361') }}</option>
                                <option value="secondary_progression_naibod">{{ t('secondary-progression-naibod') }}
                                </option>
                                <option value="traditional">{{ t('traditional') }}</option>
                                <option value="profection">{{ t('profection') }}</option>
                                <option value="horary">{{ t('horary') }}</option>
                                <option value="sidereal">{{ t('sidereal') }}</option>
                                <option value="heliocentric">{{ t('heliocentric') }}</option>
                                <option value="harmonic">Harmonic</option>
                                <option value="uranian_natal">Uranyen Doğum Haritası</option>
                                <option value="lunar_phases">Tutulmalar</option>
                                <option value="pre_natal">Pre Natal</option>
                            </select>

                            <label class="form-label small mt-3 mb-1">
                                {{ t('reference-date') }} <span class="text-muted">
                                    {{-- (Progression / SolarArc / SolarReturn) --}}
                                </span>
                            </label>
                            <input type="date" class="form-control modern" id="chartComboRefDate" value="">
                        </div>
                    </div>

                    {{-- B: Dış halka --}}
                    <div class="col-12 col-md-6">
                        <div class="picker-card">
                            <div class="picker-head">
                                <div class="picker-person">
                                    <span class="picker-dot" style="background:#e91e63;"></span>
                                    <span>{{ t('outer-ring') }}</span>
                                </div>
                                <span class="picker-badge">
                                    <i class="fa-regular fa-circle-dot me-1"></i> B
                                </span>
                            </div>

                            <label class="form-label small mb-1">{{ t('inner-ring-type') }} (B)</label>
                            <select class="form-select modern" id="chartComboOuter">
                                <option value="natal">{{ t('natal') }}</option>
                                <option value="draconic">{{ t('draconic') }}</option>
                                <option value="solar_return" selected>{{ t('solar-return') }}</option>
                               <option value="solar_arc">{{ t('solar-arc') }}</option>
                                <option value="secondary_progression_361">{{ t('secondary-progression-361') }}</option>
                                <option value="secondary_progression_naibod">{{ t('secondary-progression-naibod') }}
                                </option>
                                <option value="traditional">{{ t('traditional') }}</option>
                                <option value="profection">{{ t('profection') }}</option>
                                <option value="horary">{{ t('horary') }}</option>
                                <option value="sidereal">{{ t('sidereal') }}</option>
                                <option value="heliocentric">{{ t('heliocentric') }}</option>
                                <option value="harmonic">Harmonic</option>
                                <option value="uranian_natal">Uranyen Doğum Haritası</option>
                                <option value="lunar_phases">Tutulmalar</option>
                                <option value="pre_natal">Pre Natal</option>
                            </select>

                            <label class="form-label small mt-3 mb-1">
                                {{ t('reference-date') }}
                                {{-- <span class="text-muted">(Progression / SolarArc / SolarReturn)</span> --}}
                            </label>
                            <input type="date" class="form-control modern" id="chartComboRefDateB" value="">
                        </div>
                    </div>


                    {{-- İpucu (görseldeki gibi kesik çerçeve) --}}
                    <div class="col-12">
                        <div class="picker-help d-flex align-items-start gap-2">
                            <i class="fa-solid fa-circle-info mt-1"></i>
                            <div>
                                <div class="fw-semibold">{{ t('clue') }}</div>
                                <div>
                                    {{ t('chart-combo-clue') }}
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-light btn-soft" data-bs-dismiss="modal">
                    <i class="fa-solid fa-xmark me-1"></i> {{ t('close') }}
                </button>
                <button type="button" class="btn btn-primary btn-apply" id="btnChartComboApply">
                    <i class="fa-solid fa-check me-1"></i> {{ t('calculate') }}
                </button>
            </div>

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