{{-- Haritalar Offcanvas (Soldan Açılır Panel) --}}
@php
    $ayanamshaMethods = [
        0 => 'Fagan/Bradley',
        1 => 'Lahiri',
        2 => 'De Luce',
        3 => 'Raman',
        4 => 'Usha/Shashi',
        5 => 'Krishnamurti',
        6 => 'Djwhal Khul',
        7 => 'Yukteshwar',
        8 => 'J.N. Bhasin',
        9 => 'Babylonian/Kugler 1',
        10 => 'Babylonian/Kugler 2',
        11 => 'Babylonian/Kugler 3',
        12 => 'Babylonian/Huber',
        13 => 'Babylonian/Eta Piscium',
        14 => 'Babylonian/Aldebaran = 15 Tau',
        15 => 'Hipparchos',
        16 => 'Sassanian',
        17 => 'Galact. Center = 0 Sag',
        18 => 'J2000',
        19 => 'J1900',
        20 => 'B1950',
        21 => 'Suryasiddhanta',
        22 => 'Suryasiddhanta, mean Sun',
        23 => 'Aryabhata',
        24 => 'Aryabhata, mean Sun',
        25 => 'SS Revati',
        26 => 'SS Citra',
        27 => 'True Citra',
        28 => 'True Revati',
        29 => 'True Pushya (PVRN Rao)',
        30 => 'Galactic (Gil Brand)',
        31 => 'Galactic Equator (IAU1958)',
        32 => 'Galactic Equator',
        33 => 'Galactic Equator mid-Mula',
        34 => 'Skydram (Mardyks)',
        35 => 'True Mula (Chandra Hari)',
        36 => 'Dhruva/Gal.Center/Mula (Wilhelm)',
        37 => 'Aryabhata 522',
        38 => 'Babylonian/Britton',
        39 => 'Vedic/Sheoran',
        40 => 'Cochrane (Gal.Center = 0 Cap)',
        41 => 'Galactic Equator (Fiorenza)',
        42 => 'Vettius Valens',
        43 => 'Lahiri 1940',
        44 => 'Lahiri VP285 (1980)',
        45 => 'Krishnamurti VP291',
        46 => 'Lahiri ICRC',
    ];

    $siderealDChartMethods = [];
    for ($i = 1; $i <= 60; $i++) {
        $siderealDChartMethods[$i] = 'D' . $i;
    }
    $siderealDChartMethods[1] = 'D1 (Rasi)';
    $siderealDChartMethods[2] = 'D2 (Hora)';
    $siderealDChartMethods[3] = 'D3 (Drekkana)';
    $siderealDChartMethods[4] = 'D4 (Chaturthamsa)';
    $siderealDChartMethods[7] = 'D7 (Saptamsa)';
    $siderealDChartMethods[9] = 'D9 (Navamsa)';
    $siderealDChartMethods[10] = 'D10 (Dashamsa)';
    $siderealDChartMethods[12] = 'D12 (Dwadashamsa)';
    $siderealDChartMethods[16] = 'D16 (Shodashamsa)';
    $siderealDChartMethods[20] = 'D20 (Vimsamsa)';
    $siderealDChartMethods[24] = 'D24 (Chaturvimshamsa)';
    $siderealDChartMethods[27] = 'D27 (Saptavimshamsa)';
    $siderealDChartMethods[30] = 'D30 (Trimsamsa)';
    $siderealDChartMethods[40] = 'D40 (Khavedamsa)';
    $siderealDChartMethods[45] = 'D45 (Akshavedamsa)';
    $siderealDChartMethods[60] = 'D60 (Shashtiamsa)';

    $selectedAyanamsha = (int) request('ayanamsa', 0);
    $selectedSiderealDChart = (int) request('sidereal_dasha', 1);
    if ($selectedSiderealDChart < 1 || $selectedSiderealDChart > 60) {
        $selectedSiderealDChart = 1;
    }

    $harmonicFactors = [];
    for ($i = 1; $i <= 360; $i++) {
        $harmonicFactors[$i] = 'H' . $i;
    }

    $selectedHarmonicFactor = (int) request('harmonic', 9);
    if ($selectedHarmonicFactor < 1 || $selectedHarmonicFactor > 360) {
        $selectedHarmonicFactor = 9;
    }
@endphp
<div class="offcanvas offcanvas-start charts-drawer" tabindex="-1" id="chartsDrawer" aria-labelledby="chartsDrawerLabel"
    data-current-city="{{ $cityName ?? '' }}" data-current-owner-name="{{ $ownerName ?? '' }}">
    <div class="offcanvas-header charts-drawer-header">
        <h6 class="offcanvas-title fw-bold" id="chartsDrawerLabel">
            <i class="fa-solid fa-layer-group me-2 text-success"></i>{{ t('other-maps') }}
        </h6>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Kapat"></button>
    </div>
    <div class="offcanvas-body p-0">

        <div class="charts-drawer-mobile-moment px-3 pt-3 pb-2 d-md-none">
            <button type="button"
                class="charts-drawer-mobile-action-card charts-drawer-mobile-action-card--moment w-100 text-start border-0 charts-drawer-close-trigger"
                data-bs-toggle="modal" data-bs-target="#momentSkyModal">
                <span class="charts-drawer-mobile-action-card__icon" aria-hidden="true">
                    <i class="fa-solid fa-earth-europe"></i>
                </span>
                <span class="charts-drawer-mobile-action-card__content">
                    <span class="charts-drawer-mobile-action-card__title">{{ t('day-transits') }}</span>
                    <span class="charts-drawer-mobile-action-card__subtitle">Anlık gökyüzü — tarih/saat ve isteğe bağlı konum</span>
                </span>
                <span class="charts-drawer-mobile-action-card__arrow" aria-hidden="true">
                    <i class="fa-solid fa-chevron-right"></i>
                </span>
            </button>
        </div>

        {{-- Yükleniyor göstergesi --}}
        <div class="charts-drawer-loading d-none" id="drawerLoading">
            <div class="spinner-border spinner-border-sm text-success" role="status">
                <span class="visually-hidden">{{ t('loading') }}</span>
            </div>
            <span class="ms-2 fw-bold small">{{ t('map-is-loading') }}</span>
        </div>

        {{-- Harita sahibi override (sadece bu sayfa, veritabanına kaydedilmez) — kompakt üst alan --}}
        <div class="px-3 pt-2 pb-2 border-bottom border-opacity-25">
            <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                <i class="fa-solid fa-user-pen text-muted small"></i>
                <small class="text-muted">{{ t('birth-info-only-for-this-page') }}</small>
            </div>
            <input type="hidden" id="chartComboOverrideLat" value="">
            <input type="hidden" id="chartComboOverrideLon" value="">
            <input type="hidden" id="chartComboOverrideCity" value="">
            <input type="hidden" id="chartComboOverrideCountryCode" value="">
            <input type="hidden" id="chartComboOverrideTimezone" value="">
            <div class="row g-2">
                <div class="col-6">
                    <input type="date" class="form-control form-control-sm" id="chartComboOverrideDate" lang="tr-TR"
                        placeholder="{{ t('date') }}" title="Doğum tarihi">
                </div>
                <div class="col-6">
                    <input type="time" class="form-control form-control-sm" id="chartComboOverrideTime"
                        title="{{ t('birth-time') }}">
                </div>
                <div class="col-12 col-md-8 position-relative">
                    <input type="text" class="form-control form-control-sm" id="chartComboOverridePlace"
                        placeholder="{{ t('place-content') }}" autocomplete="off" title="{{ t('place') }}">
                    <div id="chartComboPlaceResults" class="list-group position-absolute start-0 end-0 mt-1 shadow-sm"
                        style="z-index: 1060; display:none; max-height: 180px; overflow:auto;"></div>
                </div>
                <div class="col-12 col-md-4">
                    <button type="button" class="btn btn-479483 btn-sm w-100" id="btnDrawerApplyChart">
                        <i class="fa-solid fa-refresh me-1 btn-drawer-apply-icon" aria-hidden="true"></i>
                        <i class="fa-solid fa-spinner fa-spin me-1 btn-drawer-apply-spinner d-none"
                            aria-hidden="true"></i>
                        <span class="btn-drawer-apply-text">{{ t('update') }}</span>
                    </button>
                </div>
            </div>
        </div>

        {{-- Transit Stepper Bilgi Notu --}}
        <div class="charts-drawer-hint px-3 pt-3 pb-1 charts-drawer-advanced-block">
            <small class="text-muted">
                <i class="fa-solid fa-clock-rotate-left me-1"></i>{{ t('transit-information-note') }}
            </small>
        </div>
        {{-- Transit Stepper --}}
        <div class="px-3 mt-2 mb-2 pb-3 border-bottom border-opacity-25 charts-drawer-advanced-block">
            <div class="transit-stepper" id="transitStepper">
                <button type="button" class="ts-btn" id="tsPrev" title="{{ t('go-back') }}">
                    <i class="fa-solid fa-chevron-left"></i>
                </button>
                <div class="ts-mid">
                    <div class="ts-datetime">
                        <input type="date" class="form-control ts-date" id="tsDatePicker" lang="tr-TR"
                            value="{{ $target_date ?? date('Y-m-d') }}" title="{{ t('select-date') }}"
                            aria-label="{{ t('select-date') }}">
                        <input type="time" class="form-control ts-time" id="tsTimePicker"
                            value="{{ isset($target_time) ? substr($target_time, 0, 5) : date('H:i') }}"
                            title="{{ t('select-time') }}" aria-label="{{ t('select-time') }}" step="1">
                        <select class="form-select ts-select" id="tsUnit" title="{{ t('select-step') }}">
                            @foreach ($transitStepperUnits ?? [] as $groupLabel => $items)
                                <optgroup label="{{ $groupLabel }}">
                                    @foreach ($items as [$value, $label])
                                        <option value="{{ $value }}" @selected(($transitStepperSelected ?? 'm:1') === $value)>
                                            {{ $label }}</option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                    </div>
                </div>
                <button type="button" class="ts-btn" id="tsNext" title="İleri">
                    <i class="fa-solid fa-chevron-right"></i>
                </button>
            </div>
        </div>
        {{-- Harita Stili (Klasik / Custom) — SADECE natal haritayı etkiler --}}
        <div id="chartStyleControlsDrawer" aria-hidden="false">
            <div class="charts-drawer-hint px-3 pt-3 pb-1">
                <small class="text-muted">
                    <i class="fa-solid fa-palette me-1"></i> Harita Stili
                </small>
            </div>
            <div class="chart-style-wrap w-100 px-3 pb-2">
                <div class="chart-style-btn-group" id="chartStyleBtnGroupDrawer" role="group" aria-label="Harita Stili">
                    <button type="button" class="chart-style-btn{{ ($chart_style ?? 'classic') === 'classic' ? ' active' : '' }}"
                        data-style="classic">Klasik</button>
                    <button type="button" class="chart-style-btn{{ ($chart_style ?? 'classic') === 'custom_graphics' ? ' active' : '' }}"
                        data-style="custom_graphics">Custom</button>
                </div>
            </div>
        </div>
        {{-- Uranyen Görünüm (90° Dial / Midpoint Trees) — SADECE Uranyen Doğum
             Haritası aktifken görünür (bkz. panel.js syncChartStyleControlsVisibility) --}}
        <div id="uranianStyleControlsDrawer" class="d-none" aria-hidden="true">
            <div class="charts-drawer-hint px-3 pt-3 pb-1">
                <small class="text-muted">
                    <i class="fa-solid fa-compass me-1"></i> Uranyen Görünüm
                </small>
            </div>
            <div class="chart-style-wrap w-100 px-3 pb-2">
                <div class="chart-style-btn-group" id="uranianStyleBtnGroupDrawer" role="group" aria-label="Uranyen Görünüm">
                    <button type="button" class="chart-style-btn{{ request('uranian_style', 'dial') === 'dial' ? ' active' : '' }}"
                        data-style="dial">Dial</button>
                    <button type="button" class="chart-style-btn{{ request('uranian_style', 'dial') === 'midpoint_trees' ? ' active' : '' }}"
                        data-style="midpoint_trees">Midpoint Trees</button>
                </div>
            </div>
            {{-- Dial modülü: 90 (astro-seek klasiği) / 60 / 45 / 30 — faktör =
                 360/derece; hem Dial hem Midpoint Trees görünümüne uygulanır
                 (bkz. SwetestService::applyUranianDial + panel.js) --}}
            <div class="charts-drawer-hint px-3 pt-2 pb-1">
                <small class="text-muted">
                    <i class="fa-solid fa-rotate me-1"></i> Dial Derecesi
                </small>
            </div>
            <div class="chart-style-wrap w-100 px-3 pb-2">
                <div class="chart-style-btn-group" id="uranianDialDegreeBtnGroupDrawer" role="group" aria-label="Dial Derecesi">
                    @foreach (['90', '60', '45', '30'] as $__dialDeg)
                        <button type="button" class="chart-style-btn{{ request('dial_degree', '90') === $__dialDeg ? ' active' : '' }}"
                            data-degree="{{ $__dialDeg }}">{{ $__dialDeg }}°</button>
                    @endforeach
                </div>
            </div>
        </div>
        {{-- Bilgi notu --}}
        <div class="charts-drawer-hint pr-3 pt-3 pb-1">
            <small class="text-muted">
                <i class="fa-solid fa-house me-1"></i> {{ t('house-system-note') }}
            </small>
        </div>
        {{-- Ev Sistemi --}}
        <div class="house-system-wrap w-100 px-3">
            <select name="house_system" id="houseSystemSelectDrawer"
                class="form-select form-select-modern form-select-sm house-system-select w-100">
                @foreach ($houseSystems ?? [] as $code => $label)
                    <option value="{{ $code }}" @selected(($houseSystem ?? 'P') === $code)>
                        {{ $label }}</option>
                @endforeach
            </select>
        </div>

        <div id="siderealDrawerControls" class="d-none" aria-hidden="true">
            <div class="charts-drawer-hint px-3 pt-3 pb-1 charts-drawer-advanced-block">
                <small class="text-muted">
                    <i class="fa-solid fa-om me-1"></i> Ayanamsha
                </small>
            </div>
            <div class="w-100 px-3 pb-2 charts-drawer-advanced-block">
                <select id="siderealAyanamshaSelectDrawer" class="form-select form-select-modern form-select-sm w-100"
                    aria-label="Ayanamsha">
                    @foreach ($ayanamshaMethods as $code => $label)
                        <option value="{{ $code }}" @selected($selectedAyanamsha === (int) $code)>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="charts-drawer-hint px-3 pt-1 pb-1 charts-drawer-advanced-block">
                <small class="text-muted">
                    <i class="fa-solid fa-chart-pie me-1"></i> D-Chart
                </small>
            </div>
            <div class="w-100 px-3 pb-2 charts-drawer-advanced-block">
                <select id="siderealDashaSelectDrawer" class="form-select form-select-modern form-select-sm w-100"
                    aria-label="D-Chart">
                    @foreach ($siderealDChartMethods as $factor => $label)
                        <option value="{{ $factor }}" @selected($selectedSiderealDChart === (int) $factor)>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        <div id="harmonicDrawerControls" class="d-none" aria-hidden="true">
            <div class="charts-drawer-hint px-3 pt-3 pb-1 charts-drawer-advanced-block">
                <small class="text-muted">
                    <i class="fa-solid fa-wave-square me-1"></i> Harmonic
                </small>
            </div>
            <div class="w-100 px-3 pb-2 charts-drawer-advanced-block">
                <select id="harmonicFactorSelectDrawer" class="form-select form-select-modern form-select-sm w-100"
                    aria-label="Harmonic">
                    @foreach ($harmonicFactors as $factor => $label)
                        <option value="{{ $factor }}" @selected($selectedHarmonicFactor === (int) $factor)>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- ✅ Yıl seçimi — Solar Return, Solar Arc, Secondary Progression (361°/Naibod)
             ve Profection haritaları varsayılan olarak şimdiki yılı gösterir; bu dropdown
             ile başka bir yıla (ör. geçmiş bir doğum günü veya gelecek bir yıl) geçilebilir.
             Görünürlük: panel.js/all-chart-modal.js updateYearDrawerControlsVisibility(). --}}
        @php
            $progressionSubjectYear = null;
            if (!empty($date)) {
                try {
                    $progressionSubjectYear = (int) \Carbon\Carbon::parse($date)->format('Y');
                } catch (\Throwable $e) {
                    $progressionSubjectYear = null;
                }
            }
            $progressionYearStart = $progressionSubjectYear ?? ((int) date('Y') - 100);
            $progressionYearEnd = (int) date('Y') + 5;
            $selectedProgressionYear = (int) request('sr_year', date('Y'));
        @endphp
        <div id="yearDrawerControls" class="d-none" aria-hidden="true">
            <div class="charts-drawer-hint px-3 pt-3 pb-1 charts-drawer-advanced-block">
                <small class="text-muted">
                    <i class="fa-solid fa-calendar-days me-1"></i> Yıl
                </small>
            </div>
            <div class="w-100 px-3 pb-2 charts-drawer-advanced-block">
                <select id="progressionYearSelectDrawer" class="form-select form-select-modern form-select-sm w-100"
                    aria-label="Yıl">
                    @for ($y = $progressionYearEnd; $y >= $progressionYearStart; $y--)
                        <option value="{{ $y }}" @selected($selectedProgressionYear === $y)>{{ $y }}</option>
                    @endfor
                </select>
            </div>
        </div>

        <div class="charts-drawer-mobile-actions px-3 pt-2 pb-2 d-md-none">
            <button type="button"
                class="charts-drawer-mobile-action-card charts-drawer-mobile-action-card--transit w-100 text-start border-0"
                data-drawer-trigger="toggleTransitBtn">
                <span class="charts-drawer-mobile-action-card__icon" aria-hidden="true">
                    <i class="fa-solid fa-satellite"></i>
                </span>
                <span class="charts-drawer-mobile-action-card__content">
                    <span class="charts-drawer-mobile-action-card__title">Transit ekle</span>
                </span>
                <span class="charts-drawer-mobile-action-card__arrow" aria-hidden="true">
                    <i class="fa-solid fa-chevron-right"></i>
                </span>
            </button>

            <button type="button"
                class="charts-drawer-mobile-action-card charts-drawer-mobile-action-card--extra w-100 text-start border-0 charts-drawer-close-trigger"
                data-bs-toggle="modal" data-bs-target="#fixedStarsModal">
                <span class="charts-drawer-mobile-action-card__icon" aria-hidden="true">
                    <i class="fa-regular fa-star"></i>
                </span>
                <span class="charts-drawer-mobile-action-card__content">
                    <span class="charts-drawer-mobile-action-card__title">Ekstra Noktalar</span>
                </span>
                <span class="charts-drawer-mobile-action-card__arrow" aria-hidden="true">
                    <i class="fa-solid fa-chevron-right"></i>
                </span>
            </button>

            <button type="button"
                class="charts-drawer-mobile-action-card charts-drawer-mobile-action-card--combo w-100 text-start border-0"
                data-drawer-trigger="btnChartCombo">
                <span class="charts-drawer-mobile-action-card__icon" aria-hidden="true">
                    <i class="fa-solid fa-code-compare"></i>
                </span>
                <span class="charts-drawer-mobile-action-card__content">
                    <span class="charts-drawer-mobile-action-card__title">Harita Kombinasyonları</span>
                    <span class="charts-drawer-mobile-action-card__subtitle">İki haritayı birlikte görün</span>
                </span>
                <span class="charts-drawer-mobile-action-card__arrow" aria-hidden="true">
                    <i class="fa-solid fa-chevron-right"></i>
                </span>
            </button>
        </div>

        @php
            $drawerLocaleIsEn = str_starts_with(strtolower(app()->getLocale()), 'en');
            $drawerRectificationLabel = $drawerLocaleIsEn ? 'Rectification' : 'Rektifikasyon';
            $drawerElectionalLabel = $drawerLocaleIsEn ? 'Electional' : 'Seçim Astrolojisi';
        @endphp

        <div class="charts-drawer-mobile-actions px-3 pt-1 pb-2 d-md-none">
            <button type="button"
                class="charts-drawer-mobile-action-card charts-drawer-mobile-action-card--report w-100 text-start border-0"
                data-drawer-trigger="btnReportPdf">
                <span class="charts-drawer-mobile-action-card__icon" aria-hidden="true">
                    <i class="fa-solid fa-file-pdf"></i>
                </span>
                <span class="charts-drawer-mobile-action-card__content">
                    <span class="charts-drawer-mobile-action-card__title">{{ t('report') }}</span>
                </span>
                <span class="charts-drawer-mobile-action-card__arrow" aria-hidden="true">
                    <i class="fa-solid fa-chevron-right"></i>
                </span>
            </button>

            <button type="button"
                class="charts-drawer-mobile-action-card charts-drawer-mobile-action-card--question w-100 text-start border-0"
                data-drawer-trigger="btnHoraryModal">
                <span class="charts-drawer-mobile-action-card__icon" aria-hidden="true">
                    <i class="fa-solid fa-question"></i>
                </span>
                <span class="charts-drawer-mobile-action-card__content">
                    <span class="charts-drawer-mobile-action-card__title">{{ t('ask-a-question') }}</span>
                </span>
                <span class="charts-drawer-mobile-action-card__arrow" aria-hidden="true">
                    <i class="fa-solid fa-chevron-right"></i>
                </span>
            </button>

            <button type="button"
                class="charts-drawer-mobile-action-card charts-drawer-mobile-action-card--rectification w-100 text-start border-0"
                data-drawer-trigger="btnRectificationModal">
                <span class="charts-drawer-mobile-action-card__icon" aria-hidden="true">
                    <i class="fa-solid fa-clock-rotate-left"></i>
                </span>
                <span class="charts-drawer-mobile-action-card__content">
                    <span class="charts-drawer-mobile-action-card__title">{{ $drawerRectificationLabel }}</span>
                </span>
                <span class="charts-drawer-mobile-action-card__arrow" aria-hidden="true">
                    <i class="fa-solid fa-chevron-right"></i>
                </span>
            </button>

            <button type="button"
                class="charts-drawer-mobile-action-card charts-drawer-mobile-action-card--electional w-100 text-start border-0"
                data-drawer-trigger="btnElectionalModal">
                <span class="charts-drawer-mobile-action-card__icon" aria-hidden="true">
                    <i class="fa-solid fa-calendar-check"></i>
                </span>
                <span class="charts-drawer-mobile-action-card__content">
                    <span class="charts-drawer-mobile-action-card__title">{{ $drawerElectionalLabel }}</span>
                </span>
                <span class="charts-drawer-mobile-action-card__arrow" aria-hidden="true">
                    <i class="fa-solid fa-chevron-right"></i>
                </span>
            </button>
        </div>

        {{-- Harita Kombinasyonları (bi-wheel modal) — şık CTA kartı --}}
        <div class="px-3 pt-3 pb-2 d-none d-md-block">
            <button type="button" class="chart-combo-cta w-100 text-start border-0 rounded-3 p-3" id="btnChartCombo"
                data-bs-toggle="modal" data-bs-target="#chartComboModal">
                <div class="d-flex align-items-center gap-3">
                    <span class="chart-combo-cta__icon rounded-2 d-flex align-items-center justify-content-center">
                        <i class="fa-solid fa-circle-half-stroke"></i>
                    </span>
                    <div class="flex-grow-1 min-w-0">
                        <span
                            class="chart-combo-cta__title d-block fw-bold text-dark">{{ t('chart-combo-cta-title') }}</span>
                        <span
                            class="chart-combo-cta__subtitle small text-muted">{{ t('chart-combo-cta-subtitle') }}</span>
                    </div>
                    <i class="fa-solid fa-chevron-right chart-combo-cta__arrow text-success"></i>
                </div>
            </button>
        </div>

        {{-- Bilgi notu - Yüklü Haritalar --}}
        <div class="charts-drawer-hint px-3 pt-3 pb-1" id="loadedChartsHint">
            <small class="text-muted">
                <i class="fa-solid fa-hand-pointer me-1"></i> {{ t('click-map-to-preview') }}
            </small>
        </div>

        {{-- Sayfada görünmeyen ama yüklü harita önizlemeleri (JS: drawerLoadedCharts) --}}
        <div class="charts-drawer-list px-3 pb-2 pt-2 d-none" id="drawerLoadedCharts"></div>

        {{-- Yüklenebilir haritalar: Günün Transitleri + diğer lazy türler --}}
        <div class="border-top border-opacity-25" id="drawerLoadableBlock">
            <div class="px-3 pt-3 pb-1">
                <small class="text-muted fw-semibold d-block">
                    <i class="fa-solid fa-download me-1"></i><span id="drawerLoadableTitleText">
                        {{ t('loadable-charts') }}
                    </span>
                </small>
            </div>
            <div class="charts-drawer-list px-3 pb-3 pt-0" id="drawerChartsList">
                {{-- JS: placeholder kartları (Günün Transitleri ilk sırada) --}}
            </div>
        </div>

        {{-- Boş durum --}}
        <div class="charts-drawer-empty d-none px-3 py-5 text-center" id="drawerEmpty">
            <i class="fa-solid fa-check-circle text-success mb-2" style="font-size: 2rem;"></i>
            <div class="text-muted small">{{ t('all-charts-visible') }}</div>
        </div>

        {{-- Derin Araştırma & Efemeris Açı Ara Bölümü (Eğitim & Dersler'in Hemen Üstünde) --}}
        <div class="charts-drawer-research-wrap px-3 pt-3 pb-2 border-top border-opacity-25 d-flex flex-column gap-2">
            <button type="button"
                class="charts-drawer-action-btn w-100 text-start border rounded-3 p-2 d-flex align-items-center justify-content-between charts-drawer-close-trigger"
                data-bs-toggle="modal" data-bs-target="#deepResearchModal"
                id="btnOpenDeepResearchModal"
                style="background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%); border-color: #99f6e4 !important;">
                <span class="d-flex align-items-center gap-2">
                    <i class="fa-solid fa-microscope" style="color: #0d9488; font-size: .95rem;"></i>
                    <span class="fw-semibold text-dark" style="font-size: .88rem;">Derin Araştırma Modu</span>
                </span>
                <i class="fa-solid fa-chevron-right text-muted small"></i>
            </button>

            <button type="button"
                class="charts-drawer-action-btn w-100 text-start border rounded-3 p-2 d-flex align-items-center justify-content-between charts-drawer-close-trigger"
                data-bs-toggle="modal" data-bs-target="#aspectSearchModal"
                id="btnOpenAspectSearchModal"
                style="background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%); border-color: #99f6e4 !important;">
                <span class="d-flex align-items-center gap-2">
                    <i class="fa-solid fa-compass-drafting" style="color: #479483; font-size: .95rem;"></i>
                    <span class="fw-semibold text-dark" style="font-size: .88rem;">Açı Ara</span>
                </span>
                <i class="fa-solid fa-chevron-right text-muted small"></i>
            </button>

            <button type="button"
                class="charts-drawer-action-btn w-100 text-start border rounded-3 p-2 d-flex align-items-center justify-content-between charts-drawer-close-trigger"
                data-bs-toggle="modal" data-bs-target="#asteroidSearchModal"
                id="btnOpenAsteroidSearchModal"
                style="background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%); border-color: #99f6e4 !important;">
                <span class="d-flex align-items-center gap-2">
                    <i class="fa-solid fa-meteor" style="color: #0d9488; font-size: .95rem;"></i>
                    <span class="fw-semibold text-dark" style="font-size: .88rem;">Asteroid Ara</span>
                </span>
                <i class="fa-solid fa-chevron-right text-muted small"></i>
            </button>
        </div>

        @auth
            {{-- Eğitim ve Dersler Bölümü --}}
            <div class="charts-drawer-education-wrap px-3 pt-3 pb-2 border-top border-opacity-25">
                <div class="small text-muted fw-semibold mb-2 d-flex align-items-center gap-2" style="font-size: .8rem;">
                    <i class="fa-solid fa-graduation-cap text-success"></i>
                    <span>Eğitim & Dersler</span>
                </div>

                @if(Auth::user()->isTeacher())
                    <form method="POST" action="{{ route('panel.live.store') }}" class="mb-2" id="drawerLiveStartForm">
                        <input type="hidden" name="_token" value="">
                        <button type="submit" class="charts-drawer-action-btn charts-drawer-action-btn--live w-100 text-start border rounded-3 p-2 d-flex align-items-center justify-content-between">
                            <span class="d-flex align-items-center gap-2">
                                <span class="badge bg-danger rounded-circle p-1" style="width: 8px; height: 8px;"></span>
                                <span class="fw-semibold text-danger" style="font-size: .88rem;">Canlı Ders Başlat</span>
                            </span>
                            <i class="fa-solid fa-chevron-right text-muted small"></i>
                        </button>
                    </form>
                    <a href="{{ route('panel.teacher') }}" class="charts-drawer-action-btn w-100 text-start border rounded-3 p-2 mb-2 d-flex align-items-center justify-content-between text-decoration-none text-dark">
                        <span class="d-flex align-items-center gap-2">
                            <i class="fa-solid fa-chalkboard-user text-primary" style="font-size: .95rem;"></i>
                            <span class="fw-semibold" style="font-size: .88rem;">Öğretmen Paneli</span>
                        </span>
                        <i class="fa-solid fa-chevron-right text-muted small"></i>
                    </a>
                @endif

                <a href="{{ route('panel.recordings.index') }}" class="charts-drawer-action-btn w-100 text-start border rounded-3 p-2 d-flex align-items-center justify-content-between text-decoration-none text-dark">
                    <span class="d-flex align-items-center gap-2">
                        <i class="fa-solid fa-video text-success" style="font-size: .95rem;"></i>
                        <span class="fw-semibold" style="font-size: .88rem;">Ders Kayıtlarım</span>
                    </span>
                    <i class="fa-solid fa-chevron-right text-muted small"></i>
                </a>
            </div>
        @endauth
    </div>
</div>

@include('frontend.panel.partials.deep-research-modal')

<div class="modal fade" id="siderealAyanamshaModal" tabindex="-1" aria-labelledby="siderealAyanamshaModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold" id="siderealAyanamshaModalLabel">Ayanamsha Seçiniz</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="{{ t('close') }}"></button>
            </div>
            <div class="modal-body pt-3">
                <label class="form-label small fw-semibold mb-1" for="siderealAyanamshaSelectModal">Ayanamsha</label>
                <select id="siderealAyanamshaSelectModal" class="form-select">
                    @foreach ($ayanamshaMethods as $code => $label)
                        <option value="{{ $code }}" @selected($selectedAyanamsha === (int) $code)>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>

                <label class="form-label small fw-semibold mt-3 mb-1" for="siderealDashaSelectModal">D-Chart</label>
                <select id="siderealDashaSelectModal" class="form-select">
                    @foreach ($siderealDChartMethods as $factor => $label)
                        <option value="{{ $factor }}" @selected($selectedSiderealDChart === (int) $factor)>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ t('close') }}</button>
                <button type="button" class="btn btn-479483" id="btnSiderealAyanamshaApply">{{ t('calculate') }}</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="harmonicFactorModal" tabindex="-1" aria-labelledby="harmonicFactorModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold" id="harmonicFactorModalLabel">Harmonic Seçiniz</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="{{ t('close') }}"></button>
            </div>
            <div class="modal-body pt-3">
                <label class="form-label small fw-semibold mb-1" for="harmonicFactorSelectModal">Harmonic</label>
                <select id="harmonicFactorSelectModal" class="form-select">
                    @foreach ($harmonicFactors as $factor => $label)
                        <option value="{{ $factor }}" @selected($selectedHarmonicFactor === (int) $factor)>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ t('close') }}</button>
                <button type="button" class="btn btn-479483" id="btnHarmonicFactorApply">{{ t('calculate') }}</button>
            </div>
        </div>
    </div>
</div>

{{-- Günün Transitleri: konum seçimi veya konumsuz (ev çizgisiz) --}}
<div class="modal fade" id="momentSkyModal" tabindex="-1" aria-labelledby="momentSkyModalLabel" aria-hidden="true"
    data-geonames-search="{{ route('geonames.cities.search') }}">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-bold" id="momentSkyModalLabel">
                    <i class="fa-solid fa-cloud-sun me-2 text-success"></i>{{ t('day-transits') }}
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="{{ t('close') }}"></button>
            </div>
            <div class="modal-body pt-2">
                <div class="small text-secondary font-monospace mb-3 text-center" id="momentSkyClock"
                    aria-live="polite"></div>
                <p class="small text-muted mb-3">
                    {!! t('day-transits-note') !!}
                </p>

                <input type="hidden" id="momentSkyModalLat" value="">
                <input type="hidden" id="momentSkyModalLon" value="">
                <input type="hidden" id="momentSkyModalTz" value="">

                <label class="form-label small fw-semibold mb-1">{{ t('search') }}</label>
                <div class="position-relative mb-3">
                    <input type="text" class="form-control form-control-sm" id="momentSkyPlaceInput"
                        placeholder="{{ t('place-content') }}" autocomplete="off" aria-label="{{ t('place') }}">
                    <div id="momentSkyPlaceResults" class="list-group position-absolute start-0 end-0 mt-1 shadow-sm"
                        style="z-index: 1070; display:none; max-height: 200px; overflow:auto;"></div>
                </div>

                <div class="rounded-2 bg-light border px-2 py-2 small" id="momentSkySelectedSummary" role="status">
                    <span class="text-muted">{{ t('no-location-selected') }}</span>
                </div>
            </div>
            <hr>
            <div class="modal-footer flex-row flex-wrap justify-content-start align-items-center gap-2 border-0 pt-0">
                <button type="button" class="btn btn-outline-479483 m-0" id="btnMomentSkySkipLocation">
                    {{ t('continue-without-location') }}
                </button>
                <button type="button" class="btn btn-479483 m-0" id="btnMomentSkyWithLocation" disabled>
                    {{ t('load-with-selected-location') }}
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    (function() {
        var placeInput = document.getElementById('chartComboOverridePlace');
        var placeResults = document.getElementById('chartComboPlaceResults');
        var latEl = document.getElementById('chartComboOverrideLat');
        var lonEl = document.getElementById('chartComboOverrideLon');
        var cityEl = document.getElementById('chartComboOverrideCity');
        var ccEl = document.getElementById('chartComboOverrideCountryCode');
        var tzEl = document.getElementById('chartComboOverrideTimezone');

        if (placeInput && placeResults) {
            var searchUrl = @json(route('geonames.cities.search'));
            var debounceTimer;

            function closeResults() {
                placeResults.style.display = 'none';
                placeResults.innerHTML = '';
            }
            placeInput.addEventListener('input', function() {
                if (latEl) latEl.value = '';
                if (lonEl) lonEl.value = '';
                if (cityEl) cityEl.value = '';
                if (ccEl) ccEl.value = '';
                if (tzEl) tzEl.value = '';
                var q = placeInput.value.trim();
                if (q.length < 2) return closeResults();
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(function() {
                    fetch(searchUrl + '?q=' + encodeURIComponent(q), {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(function(r) {
                            return r.json();
                        })
                        .then(function(data) {
                            if (!Array.isArray(data) || !data.length) return closeResults();
                            placeResults.innerHTML = data.map(function(item) {
                                var lat = item.lat ?? item.latitude ?? '';
                                var lon = item.lon ?? item.longitude ?? '';
                                var label = item.label || (item.city + ', ' + (item
                                    .country_code || ''));
                                return '<button type="button" class="list-group-item list-group-item-action" data-lat="' +
                                    (lat || '') + '" data-lon="' + (lon || '') +
                                    '" data-city="' + (item.city || label || '')
                                    .replace(/"/g, '&quot;') + '" data-cc="' + (item
                                        .country_code || '') + '" data-tz="' + (item
                                        .timezone || '') + '">' + label + '</button>';
                            }).join('');
                            placeResults.style.display = 'block';
                        }).catch(closeResults);
                }, 250);
            });
            placeResults.addEventListener('click', function(e) {
                var btn = e.target.closest('button[data-lat]');
                if (!btn) return;
                if (latEl) latEl.value = btn.dataset.lat || '';
                if (lonEl) lonEl.value = btn.dataset.lon || '';
                if (cityEl) cityEl.value = btn.dataset.city || btn.textContent.trim() || '';
                if (ccEl) ccEl.value = btn.dataset.cc || '';
                if (tzEl) tzEl.value = btn.dataset.tz || '';
                placeInput.value = btn.textContent.trim();
                closeResults();
            });
            document.addEventListener('click', function(e) {
                if (placeResults && !placeResults.contains(e.target) && e.target !== placeInput)
                    closeResults();
            });
        }

        // Güncelle butonu: override bilgileriyle haritayı sayfa yenilemeden yeniden yükle
        var btnApply = document.getElementById('btnDrawerApplyChart');
        var drawerLoadingEl = document.getElementById('drawerLoading');
        var panelUrl = @json(route('panel'));
        var loadChartLazyUrl = '';
        var csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

        function setDrawerApplyLoadingState(isLoading) {
            var icon = btnApply ? btnApply.querySelector('.btn-drawer-apply-icon') : null;
            var spinner = btnApply ? btnApply.querySelector('.btn-drawer-apply-spinner') : null;

            if (icon) icon.classList.toggle('d-none', !!isLoading);
            if (spinner) spinner.classList.toggle('d-none', !isLoading);
            if (btnApply) btnApply.disabled = !!isLoading;
            if (drawerLoadingEl) drawerLoadingEl.classList.toggle('d-none', !isLoading);
        }

        function ensureHiddenInput(form, name) {
            var input = form.querySelector('input[name="' + name + '"]');
            if (input) return input;

            input = document.createElement('input');
            input.type = 'hidden';
            input.name = name;
            form.appendChild(input);
            return input;
        }

        function readCurrentValue(form, name, fallbackValue) {
            var input = form ? form.querySelector('input[name="' + name + '"]') : null;
            if (input && input.value !== '') return input.value;
            var qp = new URL(window.location.href).searchParams.get(name);
            if (qp != null && qp !== '') return qp;
            return fallbackValue || '';
        }

        function writeFormValue(form, name, value) {
            if (!form || value == null || value === '') return;
            ensureHiddenInput(form, name).value = value;
        }

        function normalizeTimeValue(value) {
            var raw = String(value || '').trim();
            if (!raw) return '';
            return raw.length === 5 ? raw + ':00' : raw;
        }

        function formatDateForMeta(value) {
            var raw = String(value || '').trim();
            var match = raw.match(/^(\d{4})-(\d{2})-(\d{2})$/);
            if (!match) return raw || '-';
            return match[3] + '-' + match[2] + '-' + match[1];
        }

        function formatTimeForMeta(value) {
            var raw = String(value || '').trim();
            if (!raw) return '-';
            var match = raw.match(/^(\d{2}:\d{2})/);
            return match ? match[1] : raw;
        }

        function updateSingleMetaCard(ownerName, date, time, city) {
            var chartMeta = document.getElementById('chartMeta');
            if (!chartMeta) return;

            var ownerNameEl = chartMeta.querySelector('[data-meta-owner-name]');
            var ownerDateEl = chartMeta.querySelector('[data-meta-owner-date]');
            var ownerTimeEl = chartMeta.querySelector('[data-meta-owner-time]');
            var ownerCityEl = chartMeta.querySelector('[data-meta-owner-city]');

            if (ownerNameEl && ownerName) ownerNameEl.textContent = ownerName;
            if (ownerDateEl) ownerDateEl.textContent = formatDateForMeta(date);
            if (ownerTimeEl) ownerTimeEl.textContent = formatTimeForMeta(time);
            if (ownerCityEl && city) ownerCityEl.textContent = city;
        }

        function getRefreshKeysForOverride() {
            var keys = [];
            var seen = new Set();

            function addKey(rawKey) {
                var key = String(rawKey || '').trim();
                if (!key) return;
                if (key.indexOf('pair_') === 0) return;
                if (key.indexOf('combo_') === 0) return;

                var base = key.replace(/_transit$/, '');
                if (!base) return;

                if (!seen.has(base)) {
                    seen.add(base);
                    keys.push(base);
                }
            }

            addKey(window.activeKey || '');
            document.querySelectorAll('#leftList .thumb-item, #rightList .thumb-item').forEach(function(el) {
                if (el && el.dataset && el.dataset.key) addKey(el.dataset.key);
            });

            // Drawer'da görünen yüklü kartlar da güncel kalsın diye CHARTS içindeki
            // desteklenen anahtarları da override refresh listesine ekliyoruz.
            Object.keys(window.CHARTS || {}).forEach(function(rawKey) {
                addKey(rawKey);
            });

            if (!keys.length) keys.push('natal');
            return keys;
        }

        function isRefreshKeySupported(chartType) {
            var loadables = window.PANEL_LOADABLE_TYPES || {};
            if (loadables[chartType]) {
                // Horary gibi modal/chart-input gerektiren tipleri bu akışta
                // otomatik refresh'e dahil etmiyoruz.
                if (loadables[chartType].modal) return false;
                return true;
            }

            return [
                'natal',
                'traditional',
                'profection',
                'secondary_progression_361',
                'solar_return',
                'solar_arc',
                'solar_arc_biwheel',
                'draconic',
                'secondary_progression_naibod',
                'sidereal',
                'heliocentric',
                'harmonic',
                'uranian_natal',
                'uranian_dial',
                'moment_sky',
                'lunar_phases',
                'pre_natal',
                'prenatal',
                'local_space',
                'travel_relocation'
            ].indexOf(chartType) !== -1;
        }

        function mergeCharts(incomingCharts) {
            if (!incomingCharts || typeof incomingCharts !== 'object') return;

            window.CHARTS = window.CHARTS || {};
            Object.keys(incomingCharts).forEach(function(chartKey) {
                var incoming = incomingCharts[chartKey] || {};
                var existing = window.CHARTS[chartKey] || {};
                var merged = Object.assign({}, existing, incoming);

                merged.tabs = Object.assign({}, existing.tabs || {}, incoming.tabs || {});
                merged.lazySvg = false;

                // Horary metadata alanlarını null da olsa payload'dan olduğu gibi taşı.
                ['horary_datetime', 'horary_date', 'horary_time', 'horary_location', 'horary_question',
                    'horary_question_type'
                ].forEach(function(field) {
                    if (Object.prototype.hasOwnProperty.call(incoming, field)) {
                        merged[field] = incoming[field];
                    }
                });

                window.CHARTS[chartKey] = merged;
            });
        }

        async function refreshChartTypeFromLazyEndpoint(form, chartType, lazyUrl, options) {
            options = options || {};
            var formData = new FormData(form);
            formData.set('chart_type', chartType);
            formData.set('_token', csrfToken);
            if (options.includeTransitCharts) {
                formData.set('include_transit_charts', '1');
            }

            if (typeof appendChartStyleToFormData === 'function') {
                appendChartStyleToFormData(formData);
            }

            if (chartType === 'sidereal') {
                var hsDrawer = document.getElementById('houseSystemSelectDrawer');
                var hsMain = document.getElementById('houseSystemSelect');
                var selectedHouseSystem = (hsDrawer && hsDrawer.value) || (hsMain && hsMain.value) || 'P';
                formData.set('house_system', selectedHouseSystem);

                var ayanamshaEl = document.getElementById('ayanamshaInput');
                var siderealDashaEl = document.getElementById('siderealDashaInput');
                if (ayanamshaEl && ayanamshaEl.value) formData.set('ayanamsa', ayanamshaEl.value);
                if (siderealDashaEl && siderealDashaEl.value) formData.set('sidereal_dasha', siderealDashaEl.value);
            }

            if (chartType === 'harmonic') {
                formData.set('house_system', 'W');
                var harmonicEl = document.getElementById('harmonicInput');
                if (harmonicEl && harmonicEl.value) formData.set('harmonic', harmonicEl.value);
            }

            if (chartType === 'moment_sky') {
                var formLat = readCurrentValue(form, 'lat', '');
                var formLon = readCurrentValue(form, 'lon', '');
                var formTz = readCurrentValue(form, 'timezone', 'Europe/Istanbul');
                if (formLat && formLon) {
                    formData.set('moment_sky_lat', formLat);
                    formData.set('moment_sky_lon', formLon);
                }
                if (formTz) {
                    formData.set('timezone', formTz);
                }
            }

            var response = await fetch(lazyUrl, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });

            var data = await response.json();
            if (!data || !data.ok || !data.charts) {
                throw new Error((data && data.message) || 'Harita verisi yenilenemedi.');
            }

            mergeCharts(data.charts);
        }

        function rerenderVisibleThumbnails() {
            document.querySelectorAll('#leftList .thumb-item, #rightList .thumb-item').forEach(function(thumb) {
                var key = thumb && thumb.dataset ? thumb.dataset.key : '';
                if (!key || !window.CHARTS || !window.CHARTS[key]) return;

                if (typeof renderThumb === 'function') {
                    renderThumb(thumb, key);
                    return;
                }

                var badge = thumb.querySelector('.chart-badge');
                if (badge) badge.textContent = window.CHARTS[key].title || key;
            });
        }

        function syncUrlWithoutReload(paramsMap) {
            var url = new URL(window.location.href);

            Object.keys(paramsMap).forEach(function(key) {
                var value = paramsMap[key];
                if (value == null || value === '') {
                    url.searchParams.delete(key);
                } else {
                    url.searchParams.set(key, value);
                }
            });

            window.history.replaceState(null, '', url.toString());
        }

        function navigateWithFullReload(paramsMap) {
            var params = new URLSearchParams();
            Object.keys(paramsMap).forEach(function(key) {
                var value = paramsMap[key];
                if (value != null && value !== '') params.set(key, value);
            });
            window.location.href = panelUrl + (params.toString() ? '?' + params.toString() : '');
        }

        if (btnApply) {
            btnApply.addEventListener('click', async function() {
                if (btnApply.dataset.loading === '1') return;
                btnApply.dataset.loading = '1';
                setDrawerApplyLoadingState(true);

                var form = document.getElementById('chartForm');
                var dateEl = document.getElementById('chartComboOverrideDate');
                var timeEl = document.getElementById('chartComboOverrideTime');
                var date = (dateEl && dateEl.value) ? dateEl.value : readCurrentValue(form, 'date', '');
                var time = normalizeTimeValue((timeEl && timeEl.value) ? timeEl.value : readCurrentValue(form, 'time', '12:00'));
                var lat = (latEl && latEl.value) ? latEl.value : readCurrentValue(form, 'lat', '');
                var lon = (lonEl && lonEl.value) ? lonEl.value : readCurrentValue(form, 'lon', '');
                var city = (cityEl && cityEl.value) ? cityEl.value : readCurrentValue(form, 'city', '');
                var countryCode = (ccEl && ccEl.value) ? ccEl.value : readCurrentValue(form, 'country_code', '');
                var timezone = (tzEl && tzEl.value) ? tzEl.value : readCurrentValue(form, 'timezone', '');

                var ayanamshaEl = document.getElementById('ayanamshaInput');
                var siderealDashaEl = document.getElementById('siderealDashaInput');
                var harmonicEl = document.getElementById('harmonicInput');

                var drawerEl = document.getElementById('chartsDrawer');
                var ownerName = drawerEl ? (drawerEl.getAttribute('data-current-owner-name') || '') : '';

                var nextParams = {
                    date: date,
                    time: time,
                    lat: lat,
                    lon: lon,
                    city: city,
                    country_code: countryCode,
                    timezone: timezone,
                    ayanamsa: ayanamshaEl && ayanamshaEl.value ? ayanamshaEl.value : '',
                    sidereal_dasha: siderealDashaEl && siderealDashaEl.value ? siderealDashaEl.value : '',
                    harmonic: harmonicEl && harmonicEl.value ? harmonicEl.value : '',
                    preview: ownerName ? '1' : '',
                    title: ownerName || readCurrentValue(form, 'title', '')
                };

                var lazyUrl = window.LOAD_CHART_LAZY_URL || loadChartLazyUrl;

                if (!form || !lazyUrl || typeof window.setActive !== 'function') {
                    navigateWithFullReload(nextParams);
                    return;
                }

                writeFormValue(form, 'date', date);
                writeFormValue(form, 'time', time);
                writeFormValue(form, 'lat', lat);
                writeFormValue(form, 'lon', lon);
                writeFormValue(form, 'city', city);
                writeFormValue(form, 'country_code', countryCode);
                writeFormValue(form, 'timezone', timezone);
                writeFormValue(form, 'title', nextParams.title);

                var activeBefore = (window.activeKey && String(window.activeKey).trim()) || 'natal';
                var baseActiveKey = activeBefore.replace(/_transit$/, '');
                var isTransitActive = /_transit$/.test(activeBefore);
                var transitMap = window.TRANSIT_MAP || {};
                var hasTransitCompanion = !!transitMap[baseActiveKey] || isTransitActive;

                if (!isRefreshKeySupported(baseActiveKey)) {
                    navigateWithFullReload(nextParams);
                    return;
                }
                window.__suppressPanelLayoutAutosave = true;

                try {
                    await refreshChartTypeFromLazyEndpoint(form, baseActiveKey, lazyUrl, {
                        includeTransitCharts: hasTransitCompanion
                    });

                    var activeAfter = activeBefore;
                    if (!window.CHARTS || !window.CHARTS[activeAfter]) {
                        if (isTransitActive && transitMap[baseActiveKey] && window.CHARTS && window.CHARTS[transitMap[baseActiveKey]]) {
                            activeAfter = transitMap[baseActiveKey];
                        } else {
                            activeAfter = baseActiveKey;
                        }
                    }

                    window.setActive(activeAfter);
                    rerenderVisibleThumbnails();
                    updateSingleMetaCard(nextParams.title, date, time, city);
                    if (drawerEl) {
                        drawerEl.setAttribute('data-current-city', city || '');
                    }
                    syncUrlWithoutReload(nextParams);
                } catch (error) {
                    console.error('Drawer override refresh error:', error);
                    var baseMsg = (window.I18N && window.I18N.ERROR_CHART_LOAD) || 'Harita yüklenemedi.';
                    alert(baseMsg);
                } finally {
                    window.__suppressPanelLayoutAutosave = false;
                }

                setDrawerApplyLoadingState(false);
                btnApply.dataset.loading = '0';
            });
        }

        var liveForm = document.getElementById('drawerLiveStartForm');
        if (liveForm) {
            var liveTokenReady = false;
            liveForm.addEventListener('submit', async function(e) {
                if (liveTokenReady) return;
                e.preventDefault();
                var btn = liveForm.querySelector('button');
                if (btn) btn.disabled = true;
                try {
                    var res = await fetch(@json(url('/panel/csrf-token')), { headers: { 'Accept': 'application/json' } });
                    var json = await res.json();
                    var tokenInput = liveForm.querySelector('input[name=_token]');
                    if (tokenInput) tokenInput.value = json.token;
                    liveTokenReady = true;
                    liveForm.submit();
                } catch (err) {
                    if (btn) btn.disabled = false;
                    console.error('[live-start] CSRF token alınamadı:', err);
                    alert('Canlı ders başlatılamadı — sayfayı yenileyip tekrar deneyin.');
                }
            });
        }
    })();
</script>

<style>
    .charts-drawer-action-btn {
        background: #f8fafc;
        border: 1px solid #e2e8f0 !important;
        transition: all .2s ease;
        cursor: pointer;
        display: flex;
    }
    .charts-drawer-action-btn:hover {
        background: #f1f5f9;
        border-color: #cbd5e1 !important;
        transform: translateX(2px);
    }
    .charts-drawer-action-btn--live {
        background: #fef2f2;
        border-color: #fecaca !important;
    }
    .charts-drawer-action-btn--live:hover {
        background: #fee2e2;
        border-color: #fca5a5 !important;
    }
</style>