@php
    $electionalCategories = \App\Services\ElectionalService::categoryDefinitions();
    $localeIsEn = str_starts_with(strtolower(app()->getLocale()), 'en');
    $localeIsEs = str_starts_with(strtolower(app()->getLocale()), 'es') || !str_starts_with(strtolower(app()->getLocale()), 'tr');
    $creditHintText = $localeIsEs ? 'Cada interpretación se deduce de su saldo.' : ($localeIsEn ? 'Each request is deducted from your balance.' : 'Her yorum bakiyenizden düşer');
@endphp

<style>
    #electionalModal {
        --electional-primary: #1f6f5e;
        --electional-primary-soft: rgba(31, 111, 94, 0.12);
        --electional-border: #d7e8e4;
        --electional-muted: #5f7385;
    }

    #electionalModal .modal-body {
        background: linear-gradient(180deg, #fbfdfd 0%, #f4faf8 100%);
    }

    #electionalModal .form-control-modern:focus,
    #electionalModal .form-select.form-control-modern:focus {
        box-shadow: 0 0 0 0.25rem rgba(31, 111, 94, 0.22);
        border-color: rgba(31, 111, 94, 0.55);
    }

    .electional-card {
        border: 1px solid var(--electional-border);
        border-radius: 12px;
        background: #fff;
        padding: 12px;
        box-shadow: 0 8px 20px rgba(31, 111, 94, 0.08);
    }

    .electional-title {
        font-size: 14px;
        font-weight: 800;
        color: #1f4a42;
        margin-bottom: 8px;
    }

    .electional-current-step {
        font-size: 12px;
        font-weight: 700;
        color: var(--electional-primary);
        margin-bottom: 10px;
    }

    .electional-stepper-progress {
        display: flex;
        gap: 10px;
        margin-bottom: 14px;
    }

    .electional-stepper-item {
        flex: 1;
        border: 1px solid #d6dde8;
        border-radius: 10px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        gap: 8px;
        background: #f8fafc;
        transition: all 0.25s ease;
    }

    .electional-stepper-item .step-number {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        background: #dbe6f4;
        color: #3a4f6b;
    }

    .electional-stepper-item .step-label {
        font-size: 12px;
        font-weight: 600;
        color: #51657f;
        flex: 1;
    }

    .electional-stepper-item .step-check {
        color: #fff;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        background: var(--electional-primary);
    }

    .electional-stepper-item.is-active {
        border-color: var(--electional-primary);
        background: rgba(31, 111, 94, 0.08);
    }

    .electional-stepper-item.is-active .step-number {
        background: var(--electional-primary);
        color: #fff;
    }

    .electional-stepper-item.is-complete {
        border-color: rgba(31, 111, 94, 0.45);
        background: rgba(190, 206, 138, 0.2);
    }

    .electional-stepper-item.is-complete .step-number {
        background: var(--electional-primary);
        color: #fff;
    }

    .electional-stepper-item.is-complete .step-check {
        display: inline-flex;
    }

    .electional-category-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        max-height: 320px;
        overflow: auto;
        padding-right: 4px;
    }

    .electional-category-item {
        border: 1px solid #d8e6e3;
        border-radius: 10px;
        background: #fff;
        padding: 8px;
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .electional-category-item input[type="checkbox"] {
        margin-top: 3px;
    }

    .electional-category-item label {
        font-size: 12px;
        line-height: 1.35;
        color: #2e4b62;
        cursor: pointer;
    }

    .electional-help {
        font-size: 12px;
        color: var(--electional-muted);
    }

    .electional-help strong {
        color: var(--electional-primary);
    }

    .electional-location-results {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        z-index: 24;
        max-height: 220px;
        overflow: auto;
        border: 1px solid #d8e6e3;
        border-radius: 10px;
        box-shadow: 0 14px 28px rgba(20, 48, 41, 0.16);
    }

    .electional-location-results .list-group-item {
        font-size: 13px;
        padding: 8px 10px;
    }

    .electional-status {
        font-size: 13px;
        font-weight: 600;
        color: #9e2a2b;
    }

    .electional-inline-status {
        font-size: 12px;
        font-weight: 600;
        color: #9e2a2b;
    }

    .electional-result-board {
        border: 1px solid #cfe3dc;
        border-radius: 16px;
        padding: 14px;
        background:
            radial-gradient(circle at 12% 8%, rgba(31, 111, 94, 0.14) 0%, rgba(31, 111, 94, 0) 42%),
            radial-gradient(circle at 90% 88%, rgba(214, 170, 104, 0.18) 0%, rgba(214, 170, 104, 0) 40%),
            linear-gradient(180deg, #f7fcfa 0%, #eef7f3 100%);
    }

    .electional-summary-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }

    .electional-summary-pill {
        border: 1px solid var(--electional-border);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(1px);
        padding: 10px 12px;
        box-shadow: 0 8px 18px rgba(20, 62, 53, 0.08);
    }

    .electional-summary-pill .label {
        display: block;
        font-size: 10px;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: #61798d;
    }

    .electional-summary-pill .value {
        display: block;
        font-size: 14px;
        font-weight: 700;
        color: #1a3f38;
        margin-top: 4px;
    }

    #electionalCategoryResults {
        display: flex;
        flex-direction: column;
        gap: 11px;
    }

    .electional-result-block {
        --category-bg: #f7fbf9;
        --category-border: #cfe3dc;
        --category-accent: #1f6f5e;
        --category-chip-bg: rgba(31, 111, 94, 0.12);
        border: 1px solid var(--category-border);
        border-radius: 14px;
        padding: 12px;
        background: linear-gradient(180deg, var(--category-bg) 0%, #ffffff 100%);
        box-shadow: 0 9px 20px rgba(16, 63, 53, 0.1);
        position: relative;
        overflow: hidden;
    }

    .electional-result-block::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: linear-gradient(180deg, var(--category-accent) 0%, color-mix(in srgb, var(--category-accent) 70%, #ffffff) 100%);
    }

    .electional-result-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .electional-result-block h6 {
        font-size: 15px;
        font-weight: 800;
        color: #173f39;
        margin: 0;
    }

    .electional-title-emoji {
        width: 31px;
        height: 31px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        background: var(--category-chip-bg);
        border: 1px solid color-mix(in srgb, var(--category-accent) 45%, #ffffff);
        flex-shrink: 0;
    }

    .electional-days-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.35px;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--category-accent) 80%, #2f4f65);
        margin-bottom: 7px;
    }

    .electional-days-title .score-right-label {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.25px;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--category-accent) 78%, #3f6078);
        min-width: 64px;
        text-align: center;
    }

    .electional-days {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .electional-day-pill {
        border: 1px solid color-mix(in srgb, var(--category-accent) 28%, #cfe3dc);
        border-radius: 10px;
        padding: 8px 10px;
        background: color-mix(in srgb, var(--category-bg) 82%, #ffffff);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: relative;
    }

    .electional-day-pill::before {
        content: attr(data-rank);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 800;
        color: #fff;
        background: color-mix(in srgb, var(--category-accent) 88%, #000000);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
        flex-shrink: 0;
    }

    .electional-day-pill .date {
        display: block;
        font-size: 14px;
        color: #1d3e45;
        font-weight: 800;
        letter-spacing: 0.2px;
        flex: 1;
    }

    .electional-day-pill .score {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 64px;
        font-size: 13px;
        font-weight: 800;
        padding: 3px 8px;
        border-radius: 999px;
        min-width: 60px;
        text-align: center;
    }

    .electional-day-pill .score.is-high {
        background: #e4f5ed;
        color: #1d6e4f;
    }

    .electional-day-pill .score.is-mid {
        background: #fbf3dc;
        color: #8c6a11;
    }

    .electional-day-pill .score.is-low {
        background: #fce8e8;
        color: #9f2a2a;
    }

    .electional-detail-drawer {
        border: 1px dashed var(--electional-border);
        border-radius: 10px;
        padding: 10px;
        background: #f9fbfb;
        margin-top: 8px;
        display: none;
    }

    .electional-detail-drawer.is-open {
        display: block;
    }

    .electional-hours-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 6px;
        margin-top: 8px;
    }

    .electional-hour-chip {
        border: 1px solid #d5e4e0;
        border-radius: 8px;
        padding: 4px 6px;
        font-size: 11px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
    }

    .electional-hour-chip.is-positive {
        border-color: #9fcfbe;
        background: #f0f8f5;
        color: #1c6248;
        font-weight: 600;
    }

    .electional-hour-chip.is-negative {
        border-color: #f0c3c3;
        background: #fdf2f2;
        color: #8c2424;
    }

    .electional-loading {
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.9);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        border-radius: 12px;
    }

    .electional-loading-card {
        text-align: center;
        padding: 20px;
    }

    .electional-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid var(--electional-primary);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 10px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

<div class="modal fade" id="electionalModal" tabindex="-1" aria-labelledby="electionalModalLabel"
    aria-hidden="true" data-run-url="{{ route('panel.electional.run') }}" data-csrf="{{ csrf_token() }}"
    data-geonames-search="{{ route('geonames.cities.search') }}">
    <div class="modal-dialog modal-dialog-centered modal-xl modal-fullscreen-sm-down modal-dialog-scrollable">
        <div class="modal-content modal-modern position-relative">
            <div class="electional-loading" id="electionalLoadingLayer" aria-hidden="true">
                <div class="electional-loading-card">
                    <div class="electional-spinner" aria-hidden="true"></div>
                    <div class="fw-semibold text-dark">{{ $localeIsEs ? 'Calculando astrología eleccional...' : ($localeIsEn ? 'Computing electional scores...' : 'Seçim astrolojisi hesaplanıyor...') }}</div>
                    <div class="small text-muted mt-1">{{ $localeIsEs ? 'Procesando fase lunar, aspectos y dignidades planetarias.' : ($localeIsEn ? 'Processing moon phase, aspects, and planetary dignities.' : 'Ay fazı, açılar ve gezegen güçleri işleniyor.') }}</div>
                </div>
            </div>

            <div class="modal-header">
                <div>
                    <h5 class="modal-title mb-0" id="electionalModalLabel">{{ $localeIsEs ? 'Astrología Eleccional' : ($localeIsEn ? 'Electional Astrology' : 'Seçim Astrolojisi') }}</h5>
                    <small class="text-muted">{{ $localeIsEs ? 'Seleccione el rango de fechas y categorías para ver los días puntuados.' : ($localeIsEn ? 'Select date range and categories, then get ranked days.' : 'Tarih aralığı ve kategorileri seçin, uygun günleri puanlı görün.') }}</small>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('close', 'Cerrar') }}"></button>
            </div>

            <div class="modal-body">
                <div class="comment-modal__token-bar mb-2">
                    <div class="comment-modal__token-info">
                        <div class="comment-modal__token-icon">
                            <i class="fa-solid fa-coins"></i>
                        </div>
                        <div>
                            <span class="comment-modal__token-label">{{ t('remaining-tokens', 'Tokens restantes') }}</span>
                            <span class="comment-modal__token-hint">{{ $creditHintText }}</span>
                        </div>
                    </div>
                    <div class="comment-modal__token-badge" id="electionalCreditsCount">
                        {{ number_format($chatWordsRemaining ?? 0) }}
                    </div>
                </div>

                <div class="electional-stepper-progress" id="electionalStepperProgress">
                    <div class="electional-stepper-item is-active" data-electional-step="info">
                        <span class="step-number">1</span>
                        <span class="step-label">{{ $localeIsEs ? 'Información' : ($localeIsEn ? 'Information' : 'Bilgiler') }}</span>
                        <span class="step-check"><i class="fa-solid fa-check"></i></span>
                    </div>
                    <div class="electional-stepper-item" data-electional-step="categories">
                        <span class="step-number">2</span>
                        <span class="step-label">{{ $localeIsEs ? 'Categorías' : ($localeIsEn ? 'Categories' : 'Kategoriler') }}</span>
                        <span class="step-check"><i class="fa-solid fa-check"></i></span>
                    </div>
                    <div class="electional-stepper-item" data-electional-step="result">
                        <span class="step-number">3</span>
                        <span class="step-label">{{ $localeIsEs ? 'Resultado' : ($localeIsEn ? 'Result' : 'Sonuç') }}</span>
                        <span class="step-check"><i class="fa-solid fa-check"></i></span>
                    </div>
                </div>

                <div id="electionalCurrentStep" class="electional-current-step">{{ $localeIsEs ? 'Paso 1/3 - Información' : ($localeIsEn ? 'Step 1/3 - Information' : 'Adım 1/3 - Bilgiler') }}</div>

                <form id="electionalForm" novalidate>
                    <div id="electionalInfoSection">
                        <div class="row g-3 mb-3">
                            <div class="col-12">
                                <div class="electional-card h-100">
                                    <div class="electional-title">{{ $localeIsEs ? 'Rango de Fechas' : ($localeIsEn ? 'Date Range' : 'Tarih Aralığı') }}</div>
                                    <div class="row g-2">
                                        <div class="col-12 col-md-6">
                                            <label class="form-label fw-semibold">{{ $localeIsEs ? 'Fecha de Inicio' : ($localeIsEn ? 'Start Date' : 'Başlangıç Tarihi') }}</label>
                                            <input type="date" class="form-control form-control-modern" id="electionalStartDate" required>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <label class="form-label fw-semibold">{{ $localeIsEs ? 'Fecha de Fin' : ($localeIsEn ? 'End Date' : 'Bitiş Tarihi') }}</label>
                                            <input type="date" class="form-control form-control-modern" id="electionalEndDate" required>
                                        </div>

                                        <div class="col-12 position-relative">
                                            <label class="form-label fw-semibold">{{ $localeIsEs ? 'Su Ciudad / Ubicación' : ($localeIsEn ? 'Your City / Location' : 'Bulunduğunuz İl / Konum') }}</label>
                                            <input type="text" class="form-control form-control-modern" id="electionalLocationQuery"
                                                placeholder="{{ $localeIsEs ? 'Escriba la ciudad (ej. Madrid)' : ($localeIsEn ? 'Type city name (e.g. London)' : 'İl adı yazın (örn. Ankara)') }}"
                                                autocomplete="off" required>
                                            <div id="electionalLocationResults" class="list-group electional-location-results d-none"></div>
                                        </div>

                                        <div class="col-12">
                                            <button type="button" class="btn btn-outline-dark btn-sm" id="electionalUseCurrentLocationBtn">
                                                <i class="fa-solid fa-crosshairs me-1"></i>
                                                <span>{{ $localeIsEs ? 'Usar mi ubicación actual' : ($localeIsEn ? 'Use my current location' : 'Anlık konumumu kullan') }}</span>
                                            </button>
                                            <div id="electionalLocationStatus" class="electional-inline-status d-none mt-2"></div>
                                        </div>
                                    </div>

                                    <div class="electional-help mt-2">
                                        {{ $localeIsEs ? 'El período máximo es de 120 días por cálculo.' : ($localeIsEn ? 'Maximum period is 120 days per calculation.' : 'Tek hesaplamada maksimum 120 gün aralığı kullanılabilir.') }}
                                    </div>
                                    <div class="electional-help mt-1" id="electionalLocationMeta"></div>
                                    <div class="electional-help mt-1">
                                        {{ $localeIsEs ? 'La hora de referencia se toma automáticamente como la hora actual.' : ($localeIsEn ? 'Reference time is set automatically to the current time.' : 'Referans saat hesaplama anındaki güncel saat olarak otomatik alınır.') }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="electionalInfoStatus" class="electional-status d-none mb-3"></div>

                        <div class="modal-footer px-0 pb-0 pt-0 border-0 d-flex align-items-center justify-content-between flex-wrap gap-2">
                            <div class="comment-modal__token-badge comment-modal__token-badge--compact" id="electionalRequiredCredits">
                                <i class="fa-solid fa-coins me-1"></i>
                                @if (!empty($showFeaturePriceInsteadOfTokens))
                                    {{ number_format((float) ($electionalPriceTl ?? 0), 0, ',', '.') }} €
                                @else
                                    {{ number_format((int) ($electionalChatWordsCost ?? 0)) }} {{ $localeIsEs ? 'Puntos' : ($localeIsEn ? 'Points' : 'Puan') }}
                                @endif
                            </div>
                            <button type="button" id="electionalNextToCategoriesBtn" class="btn btn-color-four text-white" style="min-width: 120px;">
                                {{ $localeIsEs ? 'Siguiente' : ($localeIsEn ? 'Next' : 'İleri') }}
                            </button>
                        </div>
                    </div>

                    <div id="electionalCategorySection" class="d-none">
                        <div class="electional-card mb-3">
                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
                                <div class="electional-title mb-0">{{ $localeIsEs ? 'Categorías' : ($localeIsEn ? 'Categories' : 'Kategoriler') }}</div>
                                <div class="electional-help">
                                    {{ $localeIsEs ? 'Seleccionadas:' : ($localeIsEn ? 'Selected:' : 'Seçilen:') }} <strong id="electionalCategoryCount">0</strong> / 10
                                </div>
                            </div>
                            <div class="electional-category-grid" id="electionalCategoryGrid">
                                @foreach ($electionalCategories as $key => $definition)
                                    @php
                                        $label = $localeIsEs ? ($definition['label_es'] ?? ($definition['label_en'] ?? $key)) : ($localeIsEn ? ($definition['label_en'] ?? $key) : ($definition['label_tr'] ?? $key));
                                    @endphp
                                    <div class="electional-category-item">
                                        <input type="checkbox" id="electionalCategory_{{ $key }}" name="categories[]" value="{{ $key }}">
                                        <label for="electionalCategory_{{ $key }}">{{ $label }}</label>
                                    </div>
                                @endforeach
                            </div>
                            <div class="electional-help mt-2">
                                {{ $localeIsEs ? 'En la puntuación tradicional se evalúan el flujo lunar, benefactores/maléficos, aspectos mayores, dignidades y el regente planetario del día.' : ($localeIsEn ? 'Traditional scoring includes Moon flow, benefic/malefic balance, major aspects, dignities, and planetary day ruler.' : 'Geleneksel skorlamada Ay akışı, benefik/malefik dengesi, majör açılar, dignities ve gezegen günü yöneticisi dikkate alınır.') }}
                            </div>
                        </div>

                        <div id="electionalCategoryStatus" class="electional-status d-none mb-3"></div>

                        <div class="modal-footer px-0 pb-0 pt-0 border-0">
                            <button type="button" id="electionalBackToInfoBtn" class="btn btn-outline-secondary">
                                {{ $localeIsEs ? 'Volver' : ($localeIsEn ? 'Back' : 'Geri') }}
                            </button>
                            <button type="button" id="electionalRunBtn" class="btn btn-color-four text-white" style="min-width: 170px;">
                                {{ $localeIsEs ? 'Calcular Puntuaciones Eleccionales' : ($localeIsEn ? 'Compute Electional Scores' : 'Seçim Puanlarını Hesapla') }}
                            </button>
                        </div>
                    </div>

                    <input type="hidden" id="electionalTimezone" value="">
                    <input type="hidden" id="electionalLat" value="">
                    <input type="hidden" id="electionalLon" value="">
                    <input type="hidden" id="electionalCity" value="">
                </form>

                <div id="electionalResultSection" class="d-none mt-2">
                    <div class="electional-result-board">
                        <div id="electionalResultWrap">
                            <div class="electional-summary-grid" id="electionalSummaryGrid"></div>
                            <div id="electionalCategoryResults"></div>
                        </div>
                    </div>

                    <div class="modal-footer px-0 pb-0 pt-3 border-0">
                        <button type="button" id="electionalBackToCategoriesBtn" class="btn btn-outline-secondary">
                            {{ $localeIsEs ? 'Volver' : ($localeIsEn ? 'Back' : 'Geri') }}
                        </button>
                        <button type="button" class="btn btn-color-four text-white" data-bs-dismiss="modal">
                            {{ $localeIsEs ? 'Cerrar' : ($localeIsEn ? 'Close' : 'Kapat') }}
                        </button>
                    </div>
                </div>

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

<script>
    (function () {
        const modalEl = document.getElementById('electionalModal');
        if (!modalEl) {
            return;
        }

        const formEl = document.getElementById('electionalForm');
        const runBtn = document.getElementById('electionalRunBtn');
        const nextToCategoriesBtn = document.getElementById('electionalNextToCategoriesBtn');
        const backToInfoBtn = document.getElementById('electionalBackToInfoBtn');
        const backToCategoriesBtn = document.getElementById('electionalBackToCategoriesBtn');

        const infoStatusEl = document.getElementById('electionalInfoStatus');
        const categoryStatusEl = document.getElementById('electionalCategoryStatus');
        const locationStatusEl = document.getElementById('electionalLocationStatus');

        const loadingEl = document.getElementById('electionalLoadingLayer');
        const currentStepEl = document.getElementById('electionalCurrentStep');
        const stepperItems = Array.from(document.querySelectorAll('#electionalStepperProgress [data-electional-step]'));

        const infoSection = document.getElementById('electionalInfoSection');
        const categorySection = document.getElementById('electionalCategorySection');
        const resultSection = document.getElementById('electionalResultSection');

        const resultWrap = document.getElementById('electionalResultWrap');
        const summaryGrid = document.getElementById('electionalSummaryGrid');
        const categoryResults = document.getElementById('electionalCategoryResults');
        const localeIsEn = @json($localeIsEn);

        const startDateEl = document.getElementById('electionalStartDate');
        const endDateEl = document.getElementById('electionalEndDate');

        const locationQueryEl = document.getElementById('electionalLocationQuery');
        const locationResultsEl = document.getElementById('electionalLocationResults');
        const locationMetaEl = document.getElementById('electionalLocationMeta');
        const useCurrentLocationBtn = document.getElementById('electionalUseCurrentLocationBtn');

        const timezoneEl = document.getElementById('electionalTimezone');
        const latEl = document.getElementById('electionalLat');
        const lonEl = document.getElementById('electionalLon');
        const cityEl = document.getElementById('electionalCity');

        const categoryGrid = document.getElementById('electionalCategoryGrid');
        const categoryCountEl = document.getElementById('electionalCategoryCount');
        const electionalCreditsCountEl = document.getElementById('electionalCreditsCount');

        let locationSearchTimeout = null;
        let currentStep = 'info';

        const STEP_ORDER = ['info', 'categories', 'result'];
        const STEP_TITLES = {
            info: localeIsEn ? 'Information' : 'Bilgiler',
            categories: localeIsEn ? 'Categories' : 'Kategoriler',
            result: localeIsEn ? 'Result' : 'Sonuç',
        };

        const TEXTS = {
            selectLocation: localeIsEn
                ? 'Select a city or use your current location.'
                : 'Bir il seçin veya anlık konumunuzu kullanın.',
            invalidLocation: localeIsEn
                ? 'Please choose a valid location from the list or current location button.'
                : 'Lütfen listeden geçerli bir konum seçin veya anlık konum butonunu kullanın.',
            locating: localeIsEn ? 'Getting location...' : 'Konum alınıyor...',
            useCurrentLocation: localeIsEn ? 'Use my current location' : 'Anlık konumumu kullan',
            geolocationNotSupported: localeIsEn
                ? 'Geolocation is not supported by your browser.'
                : 'Tarayıcınız konum servisini desteklemiyor.',
            geolocationFailed: localeIsEn
                ? 'Could not read current location.'
                : 'Anlık konum alınamadı.',
            locationMissing: localeIsEn
                ? 'Location info is missing. Select city or use current location.'
                : 'Konum bilgisi eksik. İl seçin veya anlık konumunuzu kullanın.',
            locationSelectedPrefix: localeIsEn ? 'Selected location' : 'Seçili konum',
            locationEmpty: localeIsEn ? 'No location selected yet.' : 'Henüz konum seçilmedi.',
            dateRequired: localeIsEn ? 'Date range is required.' : 'Tarih aralığı zorunludur.',
            endBeforeStart: localeIsEn
                ? 'End date cannot be earlier than start date.'
                : 'Bitiş tarihi başlangıçtan önce olamaz.',
            selectOneCategory: localeIsEn
                ? 'Select at least one category.'
                : 'En az bir kategori seçmelisiniz.',
            maxTenCategories: localeIsEn
                ? 'You can select up to 10 categories.'
                : 'En fazla 10 kategori seçebilirsiniz.',
            next: localeIsEn ? 'Next' : 'İleri',
            compute: localeIsEn ? 'Compute Electional Scores' : 'Seçim Puanlarını Hesapla',
            computing: localeIsEn ? 'Calculating...' : 'Hesaplanıyor...',
            formValidationError: localeIsEn ? 'Form validation failed.' : 'Form doğrulama hatası oluştu.',
            calcError: localeIsEn ? 'An error occurred during calculation.' : 'Hesaplama sırasında bir hata oluştu.',
            periodLabel: localeIsEn ? 'Period' : 'Dönem',
            averageLabel: localeIsEn ? 'Overall Average' : 'Genel Ortalama',
            daysLabel: localeIsEn ? 'Day Count' : 'Gün Sayısı',
            categoryResultMissing: localeIsEn ? 'No category result generated.' : 'Kategori sonucu üretilemedi.',
            categoryAveragePrefix: localeIsEn ? 'Average score' : 'Ortalama skor',
            idealDatesLabel: localeIsEn ? 'Ideal Dates' : 'İdeal Tarihler',
            noIdealDate: localeIsEn ? 'No ideal date found.' : 'Uygun gün bulunamadı.',
            scoreLabel: localeIsEn ? 'Score' : 'Puan',
        };

        function syncElectionalCredits(remaining) {
            if (!electionalCreditsCountEl) {
                return;
            }

            const value = Number.isFinite(Number(remaining)) ? Number(remaining) : 0;
            electionalCreditsCountEl.textContent = value.toLocaleString(document.documentElement.lang || 'en-US');
        }

        window.addEventListener('panel:credits-updated', function (event) {
            const remaining = event?.detail?.chat_words_remaining;
            if (remaining === undefined || remaining === null) {
                return;
            }

            syncElectionalCredits(remaining);
        });

        function pad2(value) {
            return String(value).padStart(2, '0');
        }

        function escapeHtml(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }

        function escapeAttr(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/"/g, '&quot;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;');
        }

        function currentTimeValue() {
            const now = new Date();
            return pad2(now.getHours()) + ':' + pad2(now.getMinutes()) + ':' + pad2(now.getSeconds());
        }

        function browserTimezone() {
            return Intl?.DateTimeFormat?.().resolvedOptions?.().timeZone || 'Europe/Istanbul';
        }

        function getChartValue(name, fallback = '') {
            const fromChart = document.querySelector('#chartForm [name="' + name + '"]');
            if (fromChart && fromChart.value !== '') {
                return fromChart.value;
            }

            const fromRequest = document.querySelector('[name="' + name + '"]');
            if (fromRequest && fromRequest.value !== '') {
                return fromRequest.value;
            }

            return fallback;
        }

        function setStepStatus(element, message) {
            if (!element) {
                return;
            }
            if (!message) {
                element.classList.add('d-none');
                element.textContent = '';
                return;
            }
            element.classList.remove('d-none');
            element.textContent = message;
        }

        function setInfoStatus(message) {
            setStepStatus(infoStatusEl, message);
        }

        function setCategoryStatus(message) {
            setStepStatus(categoryStatusEl, message);
        }

        function setLocationStatus(message) {
            setStepStatus(locationStatusEl, message);
        }

        function setLoading(isLoading) {
            if (!loadingEl) {
                return;
            }
            loadingEl.style.display = isLoading ? 'flex' : 'none';
            loadingEl.setAttribute('aria-hidden', isLoading ? 'false' : 'true');
        }

        function closeLocationResults() {
            if (!locationResultsEl) {
                return;
            }
            locationResultsEl.classList.add('d-none');
            locationResultsEl.innerHTML = '';
        }

        function updateStepper(step) {
            const activeIndex = STEP_ORDER.indexOf(step);
            stepperItems.forEach(function (item) {
                const itemStep = item.dataset.electionalStep || 'info';
                const itemIndex = STEP_ORDER.indexOf(itemStep);
                item.classList.toggle('is-active', itemStep === step);
                item.classList.toggle('is-complete', itemIndex > -1 && itemIndex < activeIndex);
            });

            if (currentStepEl) {
                const stepPosition = activeIndex + 1;
                const stepTitle = STEP_TITLES[step] || step;
                currentStepEl.textContent = localeIsEn
                    ? ('Step ' + stepPosition + '/3 - ' + stepTitle)
                    : ('Adım ' + stepPosition + '/3 - ' + stepTitle);
            }
        }

        function showStep(step) {
            currentStep = step;
            infoSection?.classList.toggle('d-none', step !== 'info');
            categorySection?.classList.toggle('d-none', step !== 'categories');
            resultSection?.classList.toggle('d-none', step !== 'result');
            updateStepper(step);
        }

        function setLocationMeta() {
            if (!locationMetaEl) {
                return;
            }

            const lat = Number(latEl?.value || NaN);
            const lon = Number(lonEl?.value || NaN);
            const timezone = timezoneEl?.value || browserTimezone();
            const city = cityEl?.value || '';

            if (!Number.isFinite(lat) || !Number.isFinite(lon)) {
                locationMetaEl.textContent = TEXTS.locationEmpty;
                return;
            }

            const label = city || locationQueryEl?.value || '-';
            locationMetaEl.textContent = TEXTS.locationSelectedPrefix + ': ' + label + ' • '
                + lat.toFixed(5) + ', ' + lon.toFixed(5) + ' • ' + timezone;
        }

        function applySelectedLocation(item) {
            if (!item) {
                return;
            }

            const parsedLat = Number(item.lat);
            const parsedLon = Number(item.lon);

            if (latEl) {
                latEl.value = Number.isFinite(parsedLat) ? String(parsedLat) : '';
            }
            if (lonEl) {
                lonEl.value = Number.isFinite(parsedLon) ? String(parsedLon) : '';
            }
            if (timezoneEl) {
                timezoneEl.value = item.timezone || browserTimezone();
            }
            if (cityEl) {
                cityEl.value = item.city || item.name || item.label || '';
            }
            if (locationQueryEl) {
                locationQueryEl.value = item.label || item.city || item.name || '';
            }

            setLocationMeta();
        }

        function setCurrentLocationBtnLoading(isLoading) {
            if (!useCurrentLocationBtn) {
                return;
            }

            useCurrentLocationBtn.disabled = isLoading;
            useCurrentLocationBtn.innerHTML = isLoading
                ? '<i class="fa-solid fa-spinner fa-spin me-1"></i><span>' + TEXTS.locating + '</span>'
                : '<i class="fa-solid fa-crosshairs me-1"></i><span>' + TEXTS.useCurrentLocation + '</span>';
        }

        function getSelectedCategories() {
            return Array.from(categoryGrid?.querySelectorAll('input[type="checkbox"]:checked') || [])
                .map(function (el) {
                    return el.value;
                });
        }

        function syncCategoryState() {
            const checkboxes = Array.from(categoryGrid?.querySelectorAll('input[type="checkbox"]') || []);
            const selected = checkboxes.filter(function (el) {
                return el.checked;
            });

            if (categoryCountEl) {
                categoryCountEl.textContent = String(selected.length);
            }

            const lockOthers = selected.length >= 10;
            checkboxes.forEach(function (el) {
                if (!el.checked) {
                    el.disabled = lockOthers;
                }
            });
        }

        function normalizeCategorySelection(event) {
            const selected = getSelectedCategories();
            if (selected.length <= 10) {
                return;
            }

            if (event?.target && event.target.checked) {
                event.target.checked = false;
            }
            setCategoryStatus(TEXTS.maxTenCategories);
        }

        function defaultDateRange() {
            const now = new Date();
            const plus = new Date();
            plus.setDate(now.getDate() + 30);

            if (startDateEl && !startDateEl.value) {
                startDateEl.value = now.getFullYear() + '-' + pad2(now.getMonth() + 1) + '-' + pad2(now.getDate());
            }
            if (endDateEl && !endDateEl.value) {
                endDateEl.value = plus.getFullYear() + '-' + pad2(plus.getMonth() + 1) + '-' + pad2(plus.getDate());
            }
        }

        function hydrateBaseInputs() {
            const chartCity = getChartValue('city', '');
            const chartCountry = getChartValue('country_code', '');
            const chartLabel = chartCity
                ? (chartCountry ? (chartCity + ' (' + chartCountry + ')') : chartCity)
                : '';

            applySelectedLocation({
                label: chartLabel,
                city: chartCity,
                lat: getChartValue('lat', ''),
                lon: getChartValue('lon', ''),
                timezone: getChartValue('timezone', browserTimezone()),
            });

            if (!chartLabel && locationQueryEl) {
                locationQueryEl.value = '';
            }

            defaultDateRange();
            setCurrentLocationBtnLoading(false);
            closeLocationResults();
            setLocationStatus('');
        }

        function buildPayload() {
            return {
                start_date: startDateEl?.value || '',
                end_date: endDateEl?.value || '',
                categories: getSelectedCategories(),
                time: currentTimeValue(),
                timezone: timezoneEl?.value || browserTimezone(),
                lat: Number(latEl?.value || 0),
                lon: Number(lonEl?.value || 0),
                house_system: getChartValue('house_system', 'P'),
            };
        }

        function validatePayload(payload) {
            if (!payload.start_date || !payload.end_date) {
                return TEXTS.dateRequired;
            }

            if (payload.end_date < payload.start_date) {
                return TEXTS.endBeforeStart;
            }

            if (!Array.isArray(payload.categories) || payload.categories.length < 1) {
                return TEXTS.selectOneCategory;
            }

            if (payload.categories.length > 10) {
                return TEXTS.maxTenCategories;
            }

            if (!locationQueryEl?.value.trim()) {
                return TEXTS.selectLocation;
            }

            if (!Number.isFinite(payload.lat) || !Number.isFinite(payload.lon) || !latEl?.value || !lonEl?.value) {
                return TEXTS.invalidLocation;
            }

            return null;
        }

        function renderSummary(result) {
            const periodText = escapeHtml(formatDisplayDate(result?.start_date || '-') + ' - ' + formatDisplayDate(result?.end_date || '-'));
            const count = escapeHtml(result?.calculation_count || 0);

            summaryGrid.innerHTML = ''
                + '<div class="electional-summary-pill"><span class="label">' + TEXTS.periodLabel + '</span><span class="value">' + periodText + '</span></div>'
                + '<div class="electional-summary-pill"><span class="label">' + TEXTS.daysLabel + '</span><span class="value">' + count + '</span></div>';
        }

        function topFiveDays(dailyScores) {
            return [...(dailyScores || [])]
                .sort(function (a, b) {
                    return Number(b.score || 0) - Number(a.score || 0);
                })
                .slice(0, 5);
        }

        function formatDisplayDate(dateValue) {
            const raw = String(dateValue || '').trim();
            const match = raw.match(/^(\d{4})-(\d{2})-(\d{2})$/);
            if (!match) {
                return raw || '-';
            }

            const year = match[1];
            const month = match[2];
            const day = match[3];
            return day + '.' + month + '.' + year;
        }

        const RESULT_CARD_COLORS = [
            { bg: '#fef7ef', border: '#f2d7b3', accent: '#d57a1f', chip: 'rgba(213, 122, 31, 0.15)' },
            { bg: '#eef9ff', border: '#c8e6fb', accent: '#1f7fc2', chip: 'rgba(31, 127, 194, 0.14)' },
            { bg: '#f2f8ee', border: '#d6e9c8', accent: '#4f8d39', chip: 'rgba(79, 141, 57, 0.14)' },
            { bg: '#fff2f6', border: '#f2cad8', accent: '#c94d7b', chip: 'rgba(201, 77, 123, 0.15)' },
            { bg: '#f4f2ff', border: '#d9d1f7', accent: '#6450ba', chip: 'rgba(100, 80, 186, 0.14)' },
            { bg: '#eefaf8', border: '#c7ebe3', accent: '#228a72', chip: 'rgba(34, 138, 114, 0.14)' },
            { bg: '#fff7ed', border: '#f0ddbf', accent: '#bf7a1b', chip: 'rgba(191, 122, 27, 0.14)' },
            { bg: '#f1f5ff', border: '#d2ddfb', accent: '#3c67c7', chip: 'rgba(60, 103, 199, 0.14)' },
        ];

        const CATEGORY_EMOJI = {
            athletic_performance: '🏃',
            business_success: '💼',
            drive_ambition_work: '🎯',
            good_luck_optimism: '🍀',
            mental_sharpness: '🧠',
            imagination_confusion: '🎨',
            vision_inspiration: '✨',
            emotional_sensitivity: '💗',
            romance_sexuality: '❤️',
            physical_sensitivity: '🩺',
            friendship_family: '👨‍👩‍👧',
            relaxation_fun_vacation: '🌴',
            solitude_withdrawal: '🧘',
            accident_proneness: '⚠️',
            djia_forecast: '📈',
            accident_proneness_midpoint: '🚧',
            djia_forecast_revised: '📊',
            bradley_long_term_financial: '🏦',
            gold_price: '🪙',
            modified_bradley_djia: '📉',
        };

        function renderCategoryResults(result) {
            const categories = Array.isArray(result?.categories)
                ? [...result.categories].sort(function (a, b) {
                    return Number(b?.average_score || 0) - Number(a?.average_score || 0);
                })
                : [];

            if (categories.length === 0) {
                categoryResults.innerHTML = '<div class="alert alert-light border">' + TEXTS.categoryResultMissing + '</div>';
                return;
            }

            categoryResults.innerHTML = categories.map(function (category, index) {
                const topDays = topFiveDays(category?.daily_scores || []);
                const categoryKey = String(category?.key || '');
                const palette = RESULT_CARD_COLORS[index % RESULT_CARD_COLORS.length];
                const emoji = CATEGORY_EMOJI[categoryKey] || '⭐';
                const safeLabel = escapeHtml(category.label_tr || category.label_en || categoryKey || '-');

                const dayHtml = topDays.map(function (row, rowIndex) {
                    return '<div class="electional-day-pill" data-rank="#' + String(rowIndex + 1) + '">'
                        + '<span class="date">' + escapeHtml(formatDisplayDate(row.date || '-')) + '</span>'
                        + '<span class="score">' + Number(row.score || 0).toFixed(2) + '</span>'
                        + '</div>';
                }).join('');

                return ''
                    + '<div class="electional-result-block" style="--category-bg:' + escapeAttr(palette.bg) + ';--category-border:' + escapeAttr(palette.border) + ';--category-accent:' + escapeAttr(palette.accent) + ';--category-chip-bg:' + escapeAttr(palette.chip) + ';">'
                    + '<div class="electional-result-head">'
                    + '<span class="electional-title-emoji">' + emoji + '</span>'
                    + '<h6>' + safeLabel + '</h6>'
                    + '</div>'
                    + '<div class="electional-days-title"><span>' + TEXTS.idealDatesLabel + '</span><span class="score-right-label">' + TEXTS.scoreLabel + '</span></div>'
                    + '<div class="electional-days">' + (dayHtml || '<div class="electional-empty-ideal-date">' + TEXTS.noIdealDate + '</div>') + '</div>'
                    + '</div>';
            }).join('');
        }

        function renderResult(result) {
            renderSummary(result || {});
            renderCategoryResults(result || {});
        }

        function resetResult() {
            if (summaryGrid) {
                summaryGrid.innerHTML = '';
            }
            if (categoryResults) {
                categoryResults.innerHTML = '';
            }
        }

        locationQueryEl?.addEventListener('input', function () {
            if (latEl) latEl.value = '';
            if (lonEl) lonEl.value = '';
            if (cityEl) cityEl.value = '';
            if (timezoneEl) timezoneEl.value = browserTimezone();
            setLocationStatus('');
            setLocationMeta();

            const query = (locationQueryEl.value || '').trim();
            if (query.length < 2) {
                closeLocationResults();
                return;
            }

            clearTimeout(locationSearchTimeout);
            locationSearchTimeout = setTimeout(async function () {
                try {
                    const url = (modalEl.dataset.geonamesSearch || '') + '?q=' + encodeURIComponent(query);
                    const response = await fetch(url, {
                        headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    });
                    const data = await response.json();

                    if (!Array.isArray(data) || data.length === 0 || !locationResultsEl) {
                        closeLocationResults();
                        return;
                    }

                    locationResultsEl.innerHTML = data.map(function (item) {
                        const lat = item.lat ?? item.latitude ?? item.y ?? '';
                        const lon = item.lon ?? item.lng ?? item.longitude ?? item.x ?? '';

                        return '<button type="button" class="list-group-item list-group-item-action"'
                            + ' data-id="' + escapeAttr(item.id || '') + '"'
                            + ' data-label="' + escapeAttr(item.label || item.city || item.name || '') + '"'
                            + ' data-lat="' + escapeAttr(lat) + '"'
                            + ' data-lon="' + escapeAttr(lon) + '"'
                            + ' data-city="' + escapeAttr(item.city || item.name || '') + '"'
                            + ' data-timezone="' + escapeAttr(item.timezone || '') + '">'
                            + escapeHtml(item.label || item.city || item.name || '-')
                            + '</button>';
                    }).join('');

                    locationResultsEl.classList.remove('d-none');
                } catch (error) {
                    closeLocationResults();
                }
            }, 250);
        });

        locationResultsEl?.addEventListener('click', function (event) {
            const target = event.target.closest('button[data-id]');
            if (!target) {
                return;
            }

            applySelectedLocation({
                label: target.dataset.label || '',
                city: target.dataset.city || '',
                lat: target.dataset.lat || '',
                lon: target.dataset.lon || '',
                timezone: target.dataset.timezone || browserTimezone(),
            });
            setLocationStatus('');
            closeLocationResults();
        });

        document.addEventListener('click', function (event) {
            if (!locationResultsEl || !locationQueryEl) {
                return;
            }
            if (!locationResultsEl.contains(event.target) && event.target !== locationQueryEl) {
                closeLocationResults();
            }
        });

        useCurrentLocationBtn?.addEventListener('click', function () {
            if (!navigator.geolocation) {
                setLocationStatus(TEXTS.geolocationNotSupported);
                return;
            }

            setLocationStatus('');
            setCurrentLocationBtnLoading(true);

            navigator.geolocation.getCurrentPosition(
                async function (position) {
                    const lat = Number(position.coords.latitude || 0);
                    const lon = Number(position.coords.longitude || 0);
                    let resolved = null;

                    try {
                        const reverseUrl = (modalEl.dataset.geonamesSearch || '') + '?lat=' + encodeURIComponent(String(lat)) + '&lon=' + encodeURIComponent(String(lon));
                        const reverseResponse = await fetch(reverseUrl, {
                            headers: { 'X-Requested-With': 'XMLHttpRequest' },
                        });
                        const reverseData = await reverseResponse.json();

                        if (Array.isArray(reverseData) && reverseData.length > 0) {
                            resolved = reverseData[0];
                        }
                    } catch (error) {
                        resolved = null;
                    }

                    if (resolved) {
                        applySelectedLocation({
                            label: resolved.label || resolved.city || '',
                            city: resolved.city || resolved.name || '',
                            lat: resolved.lat ?? lat,
                            lon: resolved.lon ?? lon,
                            timezone: resolved.timezone || browserTimezone(),
                        });
                    } else {
                        applySelectedLocation({
                            label: lat.toFixed(5) + ', ' + lon.toFixed(5),
                            city: '',
                            lat: lat,
                            lon: lon,
                            timezone: browserTimezone(),
                        });
                    }

                    closeLocationResults();
                    setCurrentLocationBtnLoading(false);
                },
                function () {
                    setLocationStatus(TEXTS.geolocationFailed);
                    setCurrentLocationBtnLoading(false);
                },
                { enableHighAccuracy: true, timeout: 10000 }
            );
        });

        async function runElectional() {
            setInfoStatus('');
            setCategoryStatus('');

            const payload = buildPayload();
            const validationError = validatePayload(payload);
            if (validationError) {
                if (currentStep === 'categories') {
                    setCategoryStatus(validationError);
                } else {
                    setInfoStatus(validationError);
                }
                return;
            }

            runBtn.disabled = true;
            runBtn.textContent = TEXTS.computing;
            setLoading(true);

            try {
                const response = await fetch(modalEl.dataset.runUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': modalEl.dataset.csrf || '',
                    },
                    body: JSON.stringify(payload),
                });

                const json = await response.json();
                if (!response.ok || !json.ok) {
                    if (response.status === 422 && json.errors) {
                        const firstKey = Object.keys(json.errors)[0];
                        const firstMessage = firstKey ? json.errors[firstKey][0] : null;
                        setCategoryStatus(firstMessage || TEXTS.formValidationError);
                    } else {
                        setCategoryStatus(json.message || TEXTS.calcError);
                    }
                    return;
                }

                renderResult(json.result || {});
                if (typeof json.chat_words_remaining !== 'undefined') {
                    window.CHAT_WORDS_REMAINING = json.chat_words_remaining;
                    syncElectionalCredits(json.chat_words_remaining);
                    window.dispatchEvent(new CustomEvent('panel:credits-updated', {
                        detail: {
                            chat_words_remaining: json.chat_words_remaining,
                        },
                    }));
                }
                showStep('result');
            } catch (error) {
                setCategoryStatus(TEXTS.calcError);
            } finally {
                setLoading(false);
                runBtn.disabled = false;
                runBtn.textContent = TEXTS.compute;
            }
        }

        formEl?.addEventListener('submit', function (event) {
            event.preventDefault();
        });

        nextToCategoriesBtn?.addEventListener('click', function () {
            setInfoStatus('');
            const payload = buildPayload();
            const validationError = validatePayload({
                ...payload,
                categories: ['_dummy_'],
            });

            if (validationError === TEXTS.selectOneCategory || validationError === TEXTS.maxTenCategories) {
                showStep('categories');
                return;
            }

            if (validationError) {
                setInfoStatus(validationError);
                return;
            }

            showStep('categories');
        });

        backToInfoBtn?.addEventListener('click', function () {
            setCategoryStatus('');
            showStep('info');
        });

        backToCategoriesBtn?.addEventListener('click', function () {
            showStep('categories');
        });

        runBtn?.addEventListener('click', function () {
            runElectional();
        });

        categoryGrid?.addEventListener('change', function (event) {
            normalizeCategorySelection(event);
            syncCategoryState();
        });

        modalEl.addEventListener('show.bs.modal', function () {
            hydrateBaseInputs();
            resetResult();
            setInfoStatus('');
            setCategoryStatus('');
            setLocationStatus('');
            syncElectionalCredits(window.CHAT_WORDS_REMAINING || 0);

            Array.from(categoryGrid?.querySelectorAll('input[type="checkbox"]') || []).forEach(function (el) {
                el.checked = false;
                el.disabled = false;
            });

            syncCategoryState();
            showStep('info');
        });

        modalEl.addEventListener('hidden.bs.modal', function () {
            setLoading(false);
            setInfoStatus('');
            setCategoryStatus('');
            setLocationStatus('');
            resetResult();
            closeLocationResults();
            setCurrentLocationBtnLoading(false);

            if (runBtn) {
                runBtn.disabled = false;
                runBtn.textContent = TEXTS.compute;
            }

            Array.from(categoryGrid?.querySelectorAll('input[type="checkbox"]') || []).forEach(function (el) {
                el.checked = false;
                el.disabled = false;
            });

            syncCategoryState();
            showStep('info');
        });

        syncCategoryState();
    })();
</script>