@php
    $locale = strtolower(app()->getLocale());
    $localeIsEs = str_starts_with($locale, 'es');
    $localeIsEn = str_starts_with($locale, 'en') || (!$localeIsEs && !str_starts_with($locale, 'tr'));
    $creditHintText = $localeIsEn ? 'Each request is deducted from your balance.' : ($localeIsEs ? 'Cada interpretación se deduce de su saldo.' : 'Her yorum bakiyenizden düşer');
    $months = $localeIsEn ? [
        'January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December',
    ] : ($localeIsEs ? [
        'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
        'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre',
    ] : [
        'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran',
        'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık',
    ]);

    $rectificationStepTitles = [
        'birth' => $localeIsEn ? 'Birth Details' : ($localeIsEs ? 'Datos de Nacimiento' : 'Doğum Bilgileri'),
        'questions' => $localeIsEn ? 'Questions' : ($localeIsEs ? 'Preguntas' : 'Sorular'),
        'result' => $localeIsEn ? 'Result' : ($localeIsEs ? 'Resultado' : 'Sonuç'),
    ];
    $rectificationLoadingSteps = $localeIsEn ? [
        'Processing life events...',
        'Matching SP/SA astrological indicators...',
        'Calculating Profections and Firdaria factors...',
        'Ranking candidate birth times...',
    ] : ($localeIsEs ? [
        'Procesando eventos de vida...',
        'Emparejando indicadores SP/SA...',
        'Calculando aportes de Profecciones y Firdaria...',
        'Clasificando horas candidatas...',
    ] : [
        'Yaşam olayları işleniyor.',
        'SP/SA göstergeleri eşleştiriliyor.',
        'Profection ve Firdaria katkıları hesaplanıyor.',
        'Aday saatler sıralanıyor.',
    ]);
@endphp

<style>
    #rectificationModal {
        --rect-theme-primary: #1f6f5e;
        --rect-theme-primary-weak: rgba(31, 111, 94, 0.14);
        --rect-theme-accent: #bece8a;
        --rect-theme-danger: #9e2a2b;
        --rect-theme-muted: #607389;
    }

    #rectificationModal .form-control-modern:focus,
    #rectificationModal .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);
    }

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

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

    .rect-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;
    }

    .rect-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;
    }

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

    .rect-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(--rect-theme-primary);
    }

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

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

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

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

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

    .rect-stepper-screens {
        position: relative;
    }

    .rect-step-screen {
        will-change: opacity, transform;
        transition: opacity 0.24s ease, transform 0.24s ease;
    }

    .rect-step-screen.rect-anim-in-right {
        animation: rectSlideInRight 0.24s ease both;
    }

    .rect-step-screen.rect-anim-in-left {
        animation: rectSlideInLeft 0.24s ease both;
    }

    @keyframes rectSlideInRight {
        from {
            opacity: 0;
            transform: translateX(16px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes rectSlideInLeft {
        from {
            opacity: 0;
            transform: translateX(-16px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }


    .rect-question-meta {
        border: 1px solid #d9e7e4;
        background: linear-gradient(180deg, #fcfefd 0%, #f4faf8 100%);
        border-radius: 10px;
        padding: 8px 10px;
        color: #36556d;
        font-weight: 600;
    }

    .rect-table-modern thead th {
        background: rgba(31, 111, 94, 0.08);
        border-bottom-color: #d7e2f0;
        color: #36556d;
        font-size: 12px;
    }

    .rect-table-modern td {
        vertical-align: middle;
        font-size: 13px;
    }

    .rect-question-stack {
        display: grid;
        gap: 10px;
    }

    .rect-question-card {
        border: 1px solid #deebea;
        border-radius: 12px;
        background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%);
        padding: 11px;
        box-shadow: 0 7px 18px rgba(31, 111, 94, 0.06);
    }

    .rect-question-text {
        font-size: 13px;
        font-weight: 700;
        color: #2f455a;
        margin-bottom: 8px;
    }

    .rect-choice-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .rect-choice-item {
        position: relative;
    }

    .rect-choice-input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .rect-choice-label {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d9e5e4;
        border-radius: 8px;
        min-height: 34px;
        background: #fff;
        font-size: 12px;
        font-weight: 700;
        color: #546b81;
        cursor: pointer;
        transition: all 0.18s ease;
    }

    .rect-choice-label:hover {
        border-color: var(--rect-theme-primary);
        color: var(--rect-theme-primary);
    }

    .rect-choice-input:checked + .rect-choice-label {
        border-color: var(--rect-theme-primary);
        background: var(--rect-theme-primary);
        color: #fff;
        box-shadow: 0 6px 14px rgba(31, 111, 94, 0.24);
    }

    .rect-life-events-panel {
        border: 1px solid #d9e7e4;
        border-radius: 12px;
        background: linear-gradient(180deg, #fdfefe 0%, #f6fbfa 100%);
        padding: 11px;
    }

    .rect-life-events-title {
        font-size: 13px;
        font-weight: 800;
        color: #274b44;
        margin-bottom: 9px;
    }

    .rect-life-events-list {
        display: grid;
        gap: 8px;
    }

    .rect-life-event-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 9px;
    }

    .rect-add-life-event {
        border: 1px solid #c9dfdb;
        background: #fff;
        color: #1f6f5e;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 700;
        padding: 5px 10px;
    }

    .rect-add-life-event:hover {
        background: rgba(31, 111, 94, 0.08);
    }

    .rect-event-row {
        padding: 9px;
        border-radius: 10px;
        border: 1px solid #e1eceb;
        background: #ffffff;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
    }

    .rect-event-main {
        display: grid;
        grid-template-columns: minmax(170px, 1fr) minmax(150px, 1fr) minmax(170px, 1fr);
        gap: 8px;
        align-items: center;
    }

    .rect-event-remove {
        border: 1px solid #f3d1d1;
        background: #fff7f7;
        color: #9e2a2b;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 700;
        padding: 6px 9px;
        white-space: nowrap;
    }

    .rect-event-remove:hover {
        background: #ffe8e8;
    }

    .rect-event-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .rect-event-label {
        font-size: 13px;
        font-weight: 700;
        color: #2f455a;
    }

    .rect-result-board {
        border: 1px solid #d7e8e4;
        border-radius: 12px;
        padding: 12px;
        background: linear-gradient(180deg, #f9fdfb 0%, #f2f8f6 100%);
    }

    .rect-result-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rect-result-pill {
        border: 1px solid #d7e8e4;
        border-radius: 10px;
        padding: 8px 10px;
        background: #fff;
    }

    .rect-result-pill .label {
        font-size: 11px;
        color: #6b7c93;
    }

    .rect-result-pill .value {
        font-size: 13px;
        color: #1f4a42;
        font-weight: 700;
    }

    .rect-loading-overlay {
        position: fixed;
        inset: 0;
        z-index: 1065;
        background: rgba(16, 33, 45, 0.32);
        backdrop-filter: blur(2px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
    }

    .rect-loading-card {
        width: min(420px, 100%);
        border: 1px solid #d7e8e4;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 16px 34px rgba(31, 111, 94, 0.16);
        padding: 18px;
        text-align: center;
    }

    .rect-loading-spinner {
        width: 52px;
        height: 52px;
        margin: 0 auto 10px;
        border-radius: 50%;
        border: 4px solid rgba(31, 111, 94, 0.18);
        border-top-color: var(--rect-theme-primary);
        animation: rectSpin 0.9s linear infinite;
    }

    .rect-loading-title {
        font-size: 15px;
        font-weight: 800;
        color: #1f4a42;
    }

    .rect-loading-subtitle {
        font-size: 12px;
        color: #587183;
        margin-top: 4px;
        min-height: 18px;
    }

    .rect-loading-progress {
        width: 100%;
        height: 6px;
        background: #e9f2ee;
        border-radius: 999px;
        overflow: hidden;
        margin-top: 10px;
    }

    .rect-loading-progress-bar {
        width: 12%;
        height: 100%;
        background: var(--rect-theme-primary);
        border-radius: 999px;
        transition: width 0.35s ease;
    }

    .rect-loading-percent {
        font-size: 11px;
        color: var(--rect-theme-primary);
        font-weight: 700;
        margin-top: 5px;
    }

    @keyframes rect-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @media (max-width: 767.98px) {
        .rect-stepper-progress {
            gap: 6px;
        }

        .rect-stepper-item {
            padding: 6px 8px;
            gap: 6px;
        }

        .rect-stepper-item .step-label {
            font-size: 11px;
        }

        .rect-event-main {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="modal fade" id="rectificationModal" tabindex="-1" aria-labelledby="rectificationModalLabel"
    aria-hidden="true" data-start-url="{{ route('panel.rectification.start') }}" data-csrf="{{ csrf_token() }}">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-fullscreen-sm-down modal-dialog-scrollable">
        <div class="modal-content modal-modern">
            <div class="modal-header">
                <div class="d-flex flex-column">
                    <h5 class="modal-title mb-0" id="rectificationModalLabel">{{ t('birth_time_rectification', 'Rectificación de Hora de Nacimiento') }}</h5>
                    <small class="text-muted">{{ t('rectification_modal_subtitle', 'Flujo de rectificación paso a paso compatible con el tema') }}</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="rectificationCreditsCount">
                        {{ number_format($chatWordsRemaining ?? 0) }}
                    </div>
                </div>

                <div id="rectificationLoadingOverlay" class="rect-loading-overlay d-none" aria-hidden="true">
                    <div class="rect-loading-card" role="status" aria-live="polite" aria-atomic="true">
                        <div class="rect-loading-spinner" aria-hidden="true"></div>
                        <div class="rect-loading-title" id="rectificationLoadingTitle">{{ t('calculating_result', 'Calculando resultado...') }}</div>
                        <div class="rect-loading-subtitle" id="rectificationLoadingSubtitle">{{ t('analyzing_sky_indicators', 'Analizando los indicadores celestes.') }}</div>
                        <div class="rect-loading-progress" aria-hidden="true">
                            <div id="rectificationLoadingProgressBar" class="rect-loading-progress-bar"></div>
                        </div>
                        <div id="rectificationLoadingPercent" class="rect-loading-percent">%8</div>
                    </div>
                </div>

                <div class="rect-stepper-progress" id="rectificationStepperProgress">
                    <div class="rect-stepper-item is-active" data-rect-step="birth">
                        <span class="step-number">1</span>
                        <span class="step-label">{{ t('birth_information', 'Datos de Nacimiento') }}</span>
                        <span class="step-check"><i class="fa-solid fa-check"></i></span>
                    </div>
                    <div class="rect-stepper-item" data-rect-step="questions">
                        <span class="step-number">2</span>
                        <span class="step-label">{{ t('questions', 'Preguntas') }}</span>
                        <span class="step-check"><i class="fa-solid fa-check"></i></span>
                    </div>
                    <div class="rect-stepper-item" data-rect-step="result">
                        <span class="step-number">3</span>
                        <span class="step-label">{{ t('result', 'Resultado') }}</span>
                        <span class="step-check"><i class="fa-solid fa-check"></i></span>
                    </div>
                </div>

                <div id="rectificationCurrentStep" class="rect-current-step">{{ t('step_1_3_birth_info', 'Paso 1/3 - Datos de Nacimiento') }}</div>

                <div class="rect-stepper-screens" id="rectificationScreens">
                    <section id="rectificationScreenBirth" class="rect-step-screen">
                        <form id="rectificationForm" novalidate>
                            <div class="row g-3">
                                <div class="col-12 col-md-8">
                                    <label class="form-label fw-semibold">{{ t('full-name', 'Nombre y Apellidos') }}</label>
                                    <input type="text" class="form-control form-control-modern" id="rectificationSubjectName" maxlength="120" placeholder="{{ t('full-name', 'Nombre y Apellidos') }}">
                                </div>

                                <div class="col-12 col-md-4">
                                    <label class="form-label fw-semibold">{{ t('gender', 'Género') }}</label>
                                    <select id="rectificationSubjectSex" class="form-select form-control-modern">
                                        <option value="m">{{ t('male', 'Masculino') }}</option>
                                        <option value="f">{{ t('female', 'Femenino') }}</option>
                                    </select>
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold">{{ t('date-of-birth', 'Fecha de Nacimiento') }}</label>
                                    <div class="row g-2">
                                        <div class="col-6 col-md-4">
                                            <select id="rectificationBirthMonth" class="form-select form-control-modern">
                                                @foreach ($months as $idx => $month)
                                                    <option value="{{ $idx + 1 }}">{{ $month }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-3 col-md-2">
                                            <select id="rectificationBirthDay" class="form-select form-control-modern">
                                                @for ($day = 1; $day <= 31; $day++)
                                                    <option value="{{ $day }}">{{ sprintf('%02d', $day) }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                        <div class="col-3 col-md-3">
                                            <select id="rectificationBirthYear" class="form-select form-control-modern">
                                                @for ($year = 1900; $year <= 2100; $year++)
                                                    <option value="{{ $year }}">{{ $year }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                        <div class="col-12 col-md-3">
                                            <input type="text" readonly class="form-control form-control-modern" id="rectificationWeekday" value="--">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold">{{ t('estimated_birth_time_range', 'Rango estimado de hora de nacimiento (24 horas)') }}</label>
                                    <div class="row g-2">
                                        <div class="col-3 col-md-2">
                                            <select id="rectificationStartHour" class="form-select form-control-modern">
                                                @for ($h = 0; $h <= 23; $h++)
                                                    <option value="{{ $h }}">{{ $h }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                        <div class="col-3 col-md-2">
                                            <select id="rectificationStartMinute" class="form-select form-control-modern">
                                                @for ($m = 0; $m <= 59; $m++)
                                                    <option value="{{ sprintf('%02d', $m) }}">{{ sprintf('%02d', $m) }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                        <div class="col-2 col-md-1 d-flex align-items-center justify-content-center text-muted fw-semibold">
                                            <span>{{ t('to', 'a') }}</span>
                                        </div>
                                        <div class="col-3 col-md-2">
                                            <select id="rectificationEndHour" class="form-select form-control-modern">
                                                @for ($h = 0; $h <= 23; $h++)
                                                    <option value="{{ $h }}">{{ $h }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                        <div class="col-3 col-md-2">
                                            <select id="rectificationEndMinute" class="form-select form-control-modern">
                                                @for ($m = 0; $m <= 59; $m++)
                                                    <option value="{{ sprintf('%02d', $m) }}">{{ sprintf('%02d', $m) }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                        <div class="col-12 col-md-3">
                                            <select id="rectificationScanStep" class="form-select form-control-modern">
                                                <option value="1" selected>1 min</option>
                                                <option value="2">2 min</option>
                                                <option value="3">3 min</option>
                                                <option value="5">5 min</option>
                                                <option value="10">10 min</option>
                                                <option value="15">15 min</option>
                                                <option value="20">20 min</option>
                                                <option value="30">30 min</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-text text-muted mt-1">{{ t('rectification_example_hint', 'Ejemplo: Si selecciona entre las 11:00 y las 19:00 y 1 min, el sistema escaneará cada 1 minuto en este rango.') }}</div>
                                    <div class="mt-2 p-2 rounded-3 border" style="background:#f7fbfa;border-color:#d7e8e4 !important;">
                                        <div class="small fw-semibold" style="color:#2f5d53;">{{ t('rectification_considered_factors_title', 'Factores considerados en la rectificación') }}</div>
                                        <div class="small text-muted mt-1" style="line-height:1.45;">
                                            {{ t('rectification_factors_desc', 'Para la hora de nacimiento candidata, se evalúan conjuntamente los ángulos natales (ASC/MC/DSC/IC), Progresión Secundaria, Arco Solar, Tránsitos, Profección y Firdaria. Los eventos de vida y las respuestas a las preguntas influyen de forma ponderada en el resultado.') }}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold">{{ t('birthplace', 'Lugar de Nacimiento') }}</label>
                                    <input type="hidden" id="rectificationBirthPlaceId">
                                    <input type="hidden" id="rectificationBirthPlaceLat">
                                    <input type="hidden" id="rectificationBirthPlaceLon">
                                    <input type="hidden" id="rectificationBirthPlaceCityName">
                                    <input type="hidden" id="rectificationBirthPlaceCountryCode">
                                    <input type="hidden" id="rectificationBirthPlaceTimezone">

                                    <div class="position-relative mb-2">
                                        <div class="input-group input-group-modern">
                                            <span class="input-group-text"><i class="fa-solid fa-location-dot green-color"></i></span>
                                            <input type="text" class="form-control form-control-modern" id="rectificationBirthPlaceSearch" placeholder="{{ t('enter-city-name', 'Escriba la ciudad y seleccione de la lista') }}" autocomplete="off">
                                        </div>
                                        <div id="rectificationBirthPlaceResults" class="list-group position-absolute w-100 shadow-sm results-modern" style="z-index: 1050; display:none; max-height: 260px; overflow:auto;"></div>
                                    </div>
                                    <div class="form-text text-muted mt-1">{{ t('birthplace_type_hint', 'El campo de lugar de nacimiento muestra sugerencias mientras escribe. Se recomienda seleccionar de la lista.') }}</div>
                                </div>

                                <div class="col-12">
                                    <div id="rectificationStatus" class="small text-danger d-none"></div>
                                </div>
                            </div>

                            <div class="modal-footer px-0 pb-0 pt-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
                                <div class="comment-modal__token-badge comment-modal__token-badge--compact" id="rectificationRequiredCredits">
                                    <i class="fa-solid fa-coins me-1"></i>
                                    @if (!empty($showFeaturePriceInsteadOfTokens))
                                        {{ number_format((float) ($rectificationPriceTl ?? 0), 0, ',', '.') }} €
                                    @else
                                        {{ number_format((int) ($rectificationChatWordsCost ?? 0)) }} {{ $localeIsEs ? 'Puntos' : ($localeIsEn ? 'Points' : 'Puan') }}
                                    @endif
                                </div>
                                <button type="submit" id="rectificationRunButton" class="btn btn-color-four text-white" style="min-width: 140px;">{{ t('continue', 'Continuar') }}</button>
                            </div>
                        </form>
                    </section>

                    <section id="rectificationScreenQuestions" class="rect-step-screen d-none">
                        <form id="rectificationQuestionForm" novalidate>
                            <div id="rectificationQuestionMeta" class="rect-question-meta mb-3"></div>
                            <div id="rectificationQuestionContent"></div>
                            <div id="rectificationQuestionStatus" class="small text-danger d-none mt-3"></div>

                            <div class="modal-footer px-0 pb-0 pt-3">
                                <button type="button" id="rectificationBackToBirth" class="btn btn-outline-secondary">{{ t('back', 'Volver') }}</button>
                                <button type="submit" id="rectificationShowResultButton" class="btn btn-color-four text-white" style="min-width: 140px;">{{ t('view_result', 'Ver Resultado') }}</button>
                            </div>
                        </form>
                    </section>

                    <section id="rectificationScreenResult" class="rect-step-screen d-none">
                        <div id="rectificationResultContent"></div>
                        <div class="modal-footer px-0 pb-0 pt-3">
                            <button type="button" id="rectificationBackToQuestions" class="btn btn-outline-secondary">{{ t('back', 'Volver') }}</button>
                            <button type="button" class="btn btn-color-four text-white" data-bs-dismiss="modal">{{ t('close', 'Cerrar') }}</button>
                        </div>
                    </section>
                </div>

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

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

        const runButton = document.getElementById('rectificationRunButton');
        const form = document.getElementById('rectificationForm');
        const statusBox = document.getElementById('rectificationStatus');
        const screensContainer = document.getElementById('rectificationScreens');

        const questionForm = document.getElementById('rectificationQuestionForm');
        const questionContent = document.getElementById('rectificationQuestionContent');
        const questionMeta = document.getElementById('rectificationQuestionMeta');
        const questionStatusBox = document.getElementById('rectificationQuestionStatus');
        const showResultButton = document.getElementById('rectificationShowResultButton');
        const backToBirthButton = document.getElementById('rectificationBackToBirth');
        const backToQuestionsButton = document.getElementById('rectificationBackToQuestions');
        const resultContent = document.getElementById('rectificationResultContent');
        const currentStepTextEl = document.getElementById('rectificationCurrentStep');
        const loadingOverlay = document.getElementById('rectificationLoadingOverlay');
        const loadingTitleEl = document.getElementById('rectificationLoadingTitle');
        const loadingSubtitleEl = document.getElementById('rectificationLoadingSubtitle');
        const loadingBarEl = document.getElementById('rectificationLoadingProgressBar');
        const loadingPercentEl = document.getElementById('rectificationLoadingPercent');
        const rectificationCreditsCountEl = document.getElementById('rectificationCreditsCount');

        const stepperItems = Array.from(document.querySelectorAll('#rectificationStepperProgress [data-rect-step]'));
        const stepScreens = {
            birth: document.getElementById('rectificationScreenBirth'),
            questions: document.getElementById('rectificationScreenQuestions'),
            result: document.getElementById('rectificationScreenResult'),
        };
        const stepOrder = ['birth', 'questions', 'result'];
        const stepTitles = {
            birth: @json($localeIsEn ? 'Birth Details' : ($localeIsEs ? 'Datos de Nacimiento' : 'Doğum Bilgileri')),
            questions: @json($localeIsEn ? 'Questions' : ($localeIsEs ? 'Preguntas' : 'Sorular')),
            result: @json($localeIsEn ? 'Result' : ($localeIsEs ? 'Resultado' : 'Sonuç')),
        };
        let currentStep = 'birth';
        let isStepTransitioning = false;

        const scanStepInput = document.getElementById('rectificationScanStep');
        const subjectNameInput = document.getElementById('rectificationSubjectName');
        const subjectSexInput = document.getElementById('rectificationSubjectSex');
        const birthMonthInput = document.getElementById('rectificationBirthMonth');
        const birthDayInput = document.getElementById('rectificationBirthDay');
        const birthYearInput = document.getElementById('rectificationBirthYear');
        const weekdayInput = document.getElementById('rectificationWeekday');
        const startHourInput = document.getElementById('rectificationStartHour');
        const startMinuteInput = document.getElementById('rectificationStartMinute');
        const endHourInput = document.getElementById('rectificationEndHour');
        const endMinuteInput = document.getElementById('rectificationEndMinute');

        const birthPlaceSearchInput = document.getElementById('rectificationBirthPlaceSearch');
        const birthPlaceResults = document.getElementById('rectificationBirthPlaceResults');
        const birthPlaceIdInput = document.getElementById('rectificationBirthPlaceId');
        const birthPlaceLatInput = document.getElementById('rectificationBirthPlaceLat');
        const birthPlaceLonInput = document.getElementById('rectificationBirthPlaceLon');
        const birthPlaceCityNameInput = document.getElementById('rectificationBirthPlaceCityName');
        const birthPlaceCountryCodeInput = document.getElementById('rectificationBirthPlaceCountryCode');
        const birthPlaceTimezoneInput = document.getElementById('rectificationBirthPlaceTimezone');

        let autocompleteTimer = null;
        const rectificationState = {
            token: null,
            wizardData: null,
            result: null,
        };
        const loadingState = {
            progress: 8,
            timer: null,
            tick: 0,
            startedAt: 0,
            minVisibleMs: 900,
            steps: @json($rectificationLoadingSteps),
        };

        function syncRectificationCredits(remaining) {
            if (!rectificationCreditsCountEl) {
                return;
            }

            const value = Number.isFinite(Number(remaining)) ? Number(remaining) : 0;
            rectificationCreditsCountEl.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;
            }

            syncRectificationCredits(remaining);
        });

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

        function getSelectedDateIso() {
            const year = Number(birthYearInput?.value || 2000);
            const month = Number(birthMonthInput?.value || 1);
            const day = Number(birthDayInput?.value || 1);
            return `${year}-${pad2(month)}-${pad2(day)}`;
        }

        function getSelectedRange24() {
            const startHour = Number(startHourInput?.value || 0);
            const startMinute = Number(startMinuteInput?.value || 0);
            const endHour = Number(endHourInput?.value || 0);
            const endMinute = Number(endMinuteInput?.value || 0);

            const startTotalMinutes = (startHour * 60) + startMinute;
            const endTotalMinutes = (endHour * 60) + endMinute;

            return {
                startTime: `${pad2(startHour)}:${pad2(startMinute)}:00`,
                endTime: `${pad2(endHour)}:${pad2(endMinute)}:00`,
                startTotalMinutes,
                endTotalMinutes,
            };
        }

        function getSelectedTime24() {
            const range = getSelectedRange24();
            const midpointMinutes = Math.round((range.startTotalMinutes + range.endTotalMinutes) / 2);
            const hour = Math.floor(midpointMinutes / 60);
            const minute = midpointMinutes % 60;
            return `${pad2(hour)}:${pad2(minute)}:00`;
        }

        function syncWeekday() {
            const iso = getSelectedDateIso();
            const date = new Date(iso + 'T12:00:00');
            const days = ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'];
            if (!Number.isNaN(date.getTime())) {
                weekdayInput.value = days[date.getDay()];
            }
        }

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

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

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

        function cleanMetaValue(value) {
            const text = String(value ?? '').trim();
            if (!text || text === '-') {
                return '';
            }
            return text;
        }

        function formatDateTr(dateValue) {
            const value = cleanMetaValue(dateValue);
            if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value)) {
                return value;
            }
            const parts = value.split('-');
            return parts[2] + '.' + parts[1] + '.' + parts[0];
        }

        function formatTimeTr(timeValue) {
            const value = cleanMetaValue(timeValue);
            if (!value) {
                return '';
            }
            if (/^\d{2}:\d{2}:\d{2}$/.test(value)) {
                return value.slice(0, 5);
            }
            if (/^\d{2}:\d{2}$/.test(value)) {
                return value;
            }
            return value;
        }

        function translateConfidence(value) {
            const key = String(value || '').toLowerCase();
            if (key === 'high') {
                return 'Yüksek';
            }
            if (key === 'medium') {
                return 'Orta';
            }
            if (key === 'low') {
                return 'Düşük';
            }
            return value || '-';
        }

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

            if (currentStepTextEl) {
                const stepPosition = stepOrder.indexOf(step) + 1;
                const stepTitle = stepTitles[step] || step;
                currentStepTextEl.textContent = 'Adım ' + stepPosition + '/3 - ' + stepTitle;
            }
        }

        function showStepInstant(step) {
            Object.entries(stepScreens).forEach(function ([key, element]) {
                if (!element) {
                    return;
                }
                if (key === step) {
                    element.classList.remove('d-none', 'rect-anim-in-right', 'rect-anim-in-left');
                } else {
                    element.classList.add('d-none');
                    element.classList.remove('rect-anim-in-right', 'rect-anim-in-left');
                }
            });

            isStepTransitioning = false;
            currentStep = step;
            updateStepper(step);
            if (screensContainer) {
                screensContainer.style.minHeight = '';
            }
        }

        function transitionToStep(step, direction) {
            if (!stepScreens[step] || step === currentStep || isStepTransitioning) {
                return;
            }

            const currentScreen = stepScreens[currentStep];
            const nextScreen = stepScreens[step];
            if (!currentScreen || !nextScreen) {
                showStepInstant(step);
                return;
            }

            const isBack = direction === 'back';
            const inClass = isBack ? 'rect-anim-in-left' : 'rect-anim-in-right';
            isStepTransitioning = true;

            currentScreen.classList.add('d-none');
            currentScreen.classList.remove('rect-anim-in-right', 'rect-anim-in-left');
            nextScreen.classList.remove('d-none', 'rect-anim-in-right', 'rect-anim-in-left');

            currentStep = step;
            updateStepper(step);

            window.requestAnimationFrame(function () {
                nextScreen.classList.add(inClass);
                window.setTimeout(function () {
                    nextScreen.classList.remove(inClass);
                    isStepTransitioning = false;
                }, 260);
            });
        }

        function setBirthRunningState(isRunning) {
            if (!runButton) {
                return;
            }
            runButton.disabled = isRunning;
            runButton.textContent = isRunning ? 'Yükleniyor...' : 'Devam Et';
        }

        function setQuestionRunningState(isRunning) {
            if (!showResultButton) {
                return;
            }
            showResultButton.disabled = isRunning;
            showResultButton.textContent = isRunning ? 'Sonuç hesaplanıyor...' : 'Sonucu Gör';
        }

        function hideLoadingOverlay() {
            if (!loadingOverlay) {
                return;
            }

            loadingOverlay.classList.add('d-none');
            loadingOverlay.setAttribute('aria-hidden', 'true');
        }

        function updateLoadingOverlay() {
            if (loadingBarEl) {
                loadingBarEl.style.width = loadingState.progress + '%';
            }

            if (loadingPercentEl) {
                loadingPercentEl.textContent = '%' + Math.round(loadingState.progress);
            }

            if (loadingSubtitleEl) {
                const subtitle = loadingState.steps[loadingState.tick % loadingState.steps.length] || loadingState.steps[0];
                loadingSubtitleEl.textContent = subtitle;
            }
        }

        function startLoadingOverlay() {
            if (!loadingOverlay) {
                return;
            }

            if (loadingState.timer) {
                window.clearInterval(loadingState.timer);
                loadingState.timer = null;
            }

            loadingState.progress = 8;
            loadingState.tick = 0;
            loadingState.startedAt = Date.now();

            if (loadingTitleEl) {
                loadingTitleEl.textContent = 'Sonuç hesaplanıyor...';
            }

            loadingOverlay.classList.remove('d-none');
            loadingOverlay.setAttribute('aria-hidden', 'false');
            updateLoadingOverlay();

            loadingState.timer = window.setInterval(function () {
                loadingState.tick += 1;

                const increment = loadingState.progress < 45
                    ? 4
                    : (loadingState.progress < 70 ? 2.2 : 1.1);
                loadingState.progress = Math.min(94, loadingState.progress + increment);

                updateLoadingOverlay();
            }, 260);
        }

        function stopLoadingOverlay(success) {
            if (loadingState.timer) {
                window.clearInterval(loadingState.timer);
                loadingState.timer = null;
            }

            if (!loadingOverlay) {
                return;
            }

            if (!success) {
                hideLoadingOverlay();
                return;
            }

            loadingState.progress = 100;
            if (loadingTitleEl) {
                loadingTitleEl.textContent = 'Sonuç hazır!';
            }
            if (loadingSubtitleEl) {
                loadingSubtitleEl.textContent = 'Rapor ekrana aktarılıyor.';
            }
            updateLoadingOverlay();

            const elapsed = Math.max(0, Date.now() - (loadingState.startedAt || 0));
            const remaining = Math.max(220, loadingState.minVisibleMs - elapsed);

            window.setTimeout(function () {
                hideLoadingOverlay();
            }, remaining);
        }

        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 getMetaCardValue(iconClass) {
            const icon = document.querySelector('#chartMeta .' + iconClass);
            if (!icon) {
                return '';
            }
            const row = icon.closest('.d-flex');
            if (!row) {
                return '';
            }
            return (row.textContent || '').replace(/\s+/g, ' ').replace(icon.textContent || '', '').trim();
        }

        function setDefaultBirthTime() {
            const chartTimeRaw = getChartValue('time', '12:00:00');
            const matched = /^([01]\d|2[0-3]):([0-5]\d)/.exec(chartTimeRaw);

            let baseMinutes = 12 * 60;
            if (matched) {
                baseMinutes = (Number(matched[1]) * 60) + Number(matched[2]);
            }

            const start = Math.max(0, baseMinutes - 10);
            const end = Math.min((23 * 60) + 59, baseMinutes + 10);

            if (startHourInput) startHourInput.value = String(Math.floor(start / 60));
            if (startMinuteInput) startMinuteInput.value = pad2(start % 60);
            if (endHourInput) endHourInput.value = String(Math.floor(end / 60));
            if (endMinuteInput) endMinuteInput.value = pad2(end % 60);

        }

        function clearPlaceResultBox() {
            if (!birthPlaceResults) {
                return;
            }
            birthPlaceResults.style.display = 'none';
            birthPlaceResults.innerHTML = '';
        }

        function countryNameFromCode(countryCode) {
            const code = String(countryCode || '').toUpperCase();
            if (!code) {
                return '';
            }
            if (code === 'TR') {
                return 'Türkiye';
            }

            try {
                if (typeof Intl !== 'undefined' && typeof Intl.DisplayNames !== 'undefined') {
                    const display = new Intl.DisplayNames(['tr'], { type: 'region' });
                    return display.of(code) || code;
                }
            } catch (error) {
                // DisplayNames desteklenmeyen tarayıcılarda kodu döndür.
            }

            return code;
        }

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

            if (birthPlaceIdInput) birthPlaceIdInput.value = item.id || '';
            if (birthPlaceLatInput) birthPlaceLatInput.value = item.lat || '';
            if (birthPlaceLonInput) birthPlaceLonInput.value = item.lon || '';
            if (birthPlaceCountryCodeInput) birthPlaceCountryCodeInput.value = item.country_code || '';
            if (birthPlaceTimezoneInput) birthPlaceTimezoneInput.value = item.timezone || '';
            if (birthPlaceCityNameInput) birthPlaceCityNameInput.value = item.city || item.name || '';

            if (birthPlaceSearchInput) {
                birthPlaceSearchInput.value = item.label || item.city || '';
            }
        }

        function bindAutocomplete() {
            if (!birthPlaceSearchInput || !birthPlaceResults) {
                return;
            }

            birthPlaceSearchInput.addEventListener('input', function () {
                if (birthPlaceIdInput) birthPlaceIdInput.value = '';
                if (birthPlaceLatInput) birthPlaceLatInput.value = '';
                if (birthPlaceLonInput) birthPlaceLonInput.value = '';
                if (birthPlaceCityNameInput) birthPlaceCityNameInput.value = '';
                if (birthPlaceCountryCodeInput) birthPlaceCountryCodeInput.value = '';
                if (birthPlaceTimezoneInput) birthPlaceTimezoneInput.value = '';

                const query = birthPlaceSearchInput.value.trim();
                if (query.length < 2) {
                    clearPlaceResultBox();
                    return;
                }

                if (autocompleteTimer) {
                    clearTimeout(autocompleteTimer);
                }

                autocompleteTimer = setTimeout(async function () {
                    try {
                        const url = @json(route('geonames.cities.search')) + '?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) {
                            clearPlaceResultBox();
                            return;
                        }

                        birthPlaceResults.innerHTML = data.map(function (item) {
                            const lat = item.lat ?? item.latitude ?? '';
                            const lon = item.lon ?? item.lng ?? item.longitude ?? '';
                            const city = item.city ?? item.name ?? '';
                            const label = item.label ?? city;

                            return '<button type="button" class="list-group-item list-group-item-action"'
                                + ' data-id="' + String(item.id || '').replace(/"/g, '&quot;') + '"'
                                + ' data-label="' + String(label || '').replace(/"/g, '&quot;') + '"'
                                + ' data-lat="' + String(lat || '').replace(/"/g, '&quot;') + '"'
                                + ' data-lon="' + String(lon || '').replace(/"/g, '&quot;') + '"'
                                + ' data-city="' + String(city || '').replace(/"/g, '&quot;') + '"'
                                + ' data-country-code="' + String(item.country_code || '').replace(/"/g, '&quot;') + '"'
                                + ' data-timezone="' + String(item.timezone || '').replace(/"/g, '&quot;') + '">' + label + '</button>';
                        }).join('');

                        birthPlaceResults.style.display = 'block';
                    } catch (error) {
                        clearPlaceResultBox();
                    }
                }, 250);
            });

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

                applySelectedPlace({
                    id: target.dataset.id || '',
                    label: target.dataset.label || '',
                    lat: target.dataset.lat || '',
                    lon: target.dataset.lon || '',
                    city: target.dataset.city || '',
                    country_code: target.dataset.countryCode || '',
                    timezone: target.dataset.timezone || '',
                });
                clearPlaceResultBox();
            });

            document.addEventListener('click', function (event) {
                if (!birthPlaceResults.contains(event.target) && event.target !== birthPlaceSearchInput) {
                    clearPlaceResultBox();
                }
            });
        }

        function syncReferenceStyleFields() {
            const hiddenDate = getChartValue('date');
            if (hiddenDate) {
                const [yy, mm, dd] = hiddenDate.split('-').map(Number);
                if (birthYearInput) birthYearInput.value = String(yy || 2000);
                if (birthMonthInput) birthMonthInput.value = String(mm || 1);
                if (birthDayInput) birthDayInput.value = String(dd || 1);
            }

            if (subjectNameInput && !subjectNameInput.value) {
                const ownerName = (document.querySelector('#chartMeta .fw-bold.text-dark')?.textContent || '').trim();
                subjectNameInput.value = ownerName || '';
            }

            if (birthPlaceSearchInput && !birthPlaceSearchInput.value) {
                const cityName = getMetaCardValue('fa-location-dot');
                birthPlaceSearchInput.value = cityName || '';
                if (birthPlaceCityNameInput && !birthPlaceCityNameInput.value) {
                    birthPlaceCityNameInput.value = cityName || '';
                }
            }

        }

        function renderQuestionRows(data) {
            const answerChoices = Object.entries(data.answer_choices || {});
            const predispositions = Array.isArray(data.predispositions) ? data.predispositions : [];
            const lifeEventCatalog = Array.isArray(data.life_event_catalog) ? data.life_event_catalog : [];
            const lifeEventCategories = data.life_event_categories && typeof data.life_event_categories === 'object'
                ? data.life_event_categories
                : {};
            const questionRows = predispositions.map(function (row, rowIndex) {
                const radios = answerChoices.map(function (entry, choiceIndex) {
                    const value = String(entry[0]);
                    const checked = value === 'unknown' ? ' checked' : '';
                    const inputId = 'rect-question-' + rowIndex + '-' + choiceIndex;
                    return '<div class="rect-choice-item">'
                        + '<input class="rect-choice-input" type="radio" id="' + inputId + '"'
                        + ' name="answers[' + escapeHtml(row.id) + ']"'
                        + ' value="' + escapeHtml(value) + '"' + checked + '>'
                        + '<label class="rect-choice-label" for="' + inputId + '">' + escapeHtml(entry[1]) + '</label>'
                        + '</div>';
                }).join('');

                return '<div class="rect-question-card">'
                    + '<div class="rect-question-text">' + escapeHtml(row.label) + '</div>'
                    + '<div class="rect-choice-grid">' + radios + '</div>'
                    + '</div>';
            }).join('');

            const categoryOptions = ['<option value="">Kategori seçin</option>'];
            Object.entries(lifeEventCategories).forEach(function (entry) {
                categoryOptions.push('<option value="' + escapeHtml(entry[0]) + '">' + escapeHtml(entry[1]) + '</option>');
            });

            const detailByCategory = {};
            lifeEventCatalog.forEach(function (item) {
                const category = String(item?.category || '').trim();
                const id = String(item?.id || '').trim();
                const label = String(item?.label || '').trim();
                if (!category || !id || !label) {
                    return;
                }

                if (!detailByCategory[category]) {
                    detailByCategory[category] = [];
                }
                detailByCategory[category].push({ id, label });
            });

            const detailMapJson = escapeHtml(JSON.stringify(detailByCategory));

            return '<div class="rect-life-events-panel mb-3">'
                + '<div class="rect-life-event-toolbar">'
                + '<div class="rect-life-events-title mb-0">Hayat Olayları</div>'
                + '<button type="button" class="rect-add-life-event" id="rectAddLifeEventBtn">+ Olay Ekle</button>'
                + '</div>'
                + '<div id="rectLifeEventsList" class="rect-life-events-list"'
                + ' data-category-options="' + escapeHtml(categoryOptions.join('')) + '"'
                + ' data-detail-map="' + detailMapJson + '"></div>'
                + '</div>'
                + '<div class="rect-question-stack mb-3">' + questionRows + '</div>'
                + '<div class="small text-muted">Hayat olaylarını üst bölümden ekleyip kaldırabilirsiniz.</div>'
                + '<div class="small text-muted">Soruların tümünü yanıtlamanız önerilir.</div>';
        }

        function buildLifeEventRowHtml(index, categoryOptions) {
            return '<div class="rect-event-row" data-life-row="' + index + '">'
                + '<div class="rect-event-main">'
                + '<select class="form-select form-select-sm form-control-modern" name="life_events[' + index + '][event_category]" data-life-category>'
                + categoryOptions + '</select>'
                + '<select class="form-select form-select-sm form-control-modern" name="life_events[' + index + '][event_detail]" data-life-detail>'
                + '<option value="">Önce kategori seçin</option></select>'
                + '<input type="date" class="form-control form-control-sm form-control-modern" name="life_events[' + index + '][event_date]">'
                + '</div>'
                + '<button type="button" class="rect-event-remove" data-life-remove>Sil</button>'
                + '</div>';
        }

        function bindDynamicLifeEvents() {
            const addButton = document.getElementById('rectAddLifeEventBtn');
            const list = document.getElementById('rectLifeEventsList');
            if (!addButton || !list) {
                return;
            }

            const categoryOptions = (list.dataset.categoryOptions || '').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/&#39;/g, "'").replace(/&quot;/g, '"');
            const detailMapRaw = (list.dataset.detailMap || '').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/&#39;/g, "'").replace(/&quot;/g, '"');
            const detailMap = detailMapRaw ? JSON.parse(detailMapRaw) : {};

            const syncDetailOptions = function (row) {
                const categorySelect = row.querySelector('[data-life-category]');
                const detailSelect = row.querySelector('[data-life-detail]');
                if (!categorySelect || !detailSelect) {
                    return;
                }

                const category = String(categorySelect.value || '');
                const items = Array.isArray(detailMap[category]) ? detailMap[category] : [];
                const options = ['<option value="">Detay seçin</option>'];
                items.forEach(function (item) {
                    options.push('<option value="' + escapeHtml(item.id) + '">' + escapeHtml(item.label) + '</option>');
                });
                detailSelect.innerHTML = options.join('');
            };

            let rowIndex = 0;
            const addRow = function () {
                if (rowIndex >= 25) {
                    setQuestionStatus('En fazla 25 hayat olayı ekleyebilirsiniz.');
                    return;
                }

                setQuestionStatus('');
                list.insertAdjacentHTML('beforeend', buildLifeEventRowHtml(rowIndex, categoryOptions));
                const added = list.querySelector('[data-life-row="' + rowIndex + '"]');
                if (added) {
                    syncDetailOptions(added);
                }
                rowIndex += 1;
            };

            addButton.addEventListener('click', function () {
                addRow();
            });

            list.addEventListener('click', function (event) {
                const removeButton = event.target.closest('[data-life-remove]');
                if (!removeButton) {
                    return;
                }

                const rows = list.querySelectorAll('[data-life-row]');
                if (rows.length <= 1) {
                    setQuestionStatus('En az bir satır bırakılmalıdır.');
                    return;
                }

                removeButton.closest('[data-life-row]')?.remove();
                setQuestionStatus('');
            });

            list.addEventListener('change', function (event) {
                const categorySelect = event.target.closest('[data-life-category]');
                if (!categorySelect) {
                    return;
                }

                const row = categorySelect.closest('[data-life-row]');
                if (!row) {
                    return;
                }

                syncDetailOptions(row);
            });

            addRow();
            addRow();
        }

        function renderResultHtml(result) {
            const topCandidates = Array.isArray(result?.top_candidates) ? result.top_candidates : [];
            const bestTime = result?.best_time_local || '-';
            const confidence = translateConfidence(result?.confidence || '-');
            const scoreGap = result?.score_gap ?? '-';

            const rows = topCandidates.map(function (candidate, index) {
                const scoreRaw = candidate?.score_display ?? candidate?.score ?? '-';
                const score = typeof scoreRaw === 'number' ? scoreRaw.toFixed(2) : String(scoreRaw);
                return '<tr>'
                    + '<td>' + (index + 1) + '</td>'
                    + '<td>' + escapeHtml(score) + '</td>'
                    + '<td>' + escapeHtml(candidate?.time_local || '-') + '</td>'
                    + '</tr>';
            }).join('');

            return '<div class="rect-result-board">'
                + '<h6 class="fw-semibold mb-3">Hesaplanan Sonuçlar</h6>'
                + '<div class="rect-result-grid mb-3">'
                + '<div class="rect-result-pill"><div class="label">En Güçlü Saat</div><div class="value">' + escapeHtml(bestTime) + '</div></div>'
                + '<div class="rect-result-pill"><div class="label">Güven</div><div class="value">' + escapeHtml(confidence) + '</div></div>'
                + '<div class="rect-result-pill"><div class="label">Skor Farkı</div><div class="value">' + escapeHtml(scoreGap) + '</div></div>'
                + '</div>'
                + '<div class="table-responsive">'
                + '<table class="table table-sm align-middle rect-table-modern mb-0">'
                + '<thead><tr><th>#</th><th>Skor</th><th>Yerel Saat</th></tr></thead>'
                + '<tbody>' + (rows || '<tr><td colspan="3" class="text-center text-muted">Aday sonuç bulunamadı.</td></tr>') + '</tbody>'
                + '</table>'
                + '</div>'
                + '</div>';
        }

        async function loadWizardQuestions(token, wizardUrl) {
            const response = await fetch(wizardUrl, {
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            const json = await response.json();
            if (!response.ok || !json.ok) {
                throw new Error(json.message || 'Soru ekranı yüklenemedi.');
            }

            rectificationState.token = token;
            rectificationState.wizardData = json;
            return json;
        }

        function hydrateQuestionScreen(data) {
            if (!questionContent || !questionMeta) {
                return;
            }

            const formattedDate = formatDateTr(data?.payload?.date);
            const city = cleanMetaValue(data?.payload?.birthplace_city);
            const country = cleanMetaValue(data?.payload?.birthplace_country);
            const metaParts = [];
            if (formattedDate) {
                metaParts.push(@json($localeIsEn ? 'Date of Birth ' : ($localeIsEs ? 'Fecha de Nacimiento ' : 'Doğum Tarihi ')) + formattedDate);
            }
            if (city) {
                metaParts.push(@json($localeIsEn ? 'City ' : ($localeIsEs ? 'Ciudad ' : 'İl ')) + city);
            }
            if (country) {
                metaParts.push(@json($localeIsEn ? 'Country ' : ($localeIsEs ? 'País ' : 'Ülke ')) + country);
            }
            const metaText = metaParts.join('  ');
            questionMeta.textContent = metaText || @json($localeIsEn ? 'Question flow ready' : ($localeIsEs ? 'Flujo de preguntas listo' : 'Soru akışı hazır'));
            questionContent.innerHTML = renderQuestionRows(data);
            bindDynamicLifeEvents();
        }

        function resetQuestionAndResultScreens() {
            rectificationState.token = null;
            rectificationState.wizardData = null;
            rectificationState.result = null;
            if (questionContent) questionContent.innerHTML = '';
            if (questionMeta) questionMeta.textContent = '';
            if (resultContent) resultContent.innerHTML = '';
            setQuestionStatus('');
        }

        function collectPayload() {
            const latRaw = birthPlaceLatInput?.value || getChartValue('lat');
            const lonRaw = birthPlaceLonInput?.value || getChartValue('lon');
            const timezoneRaw = birthPlaceTimezoneInput?.value || getChartValue('timezone', 'Europe/Istanbul');
            const cityRaw = birthPlaceCityNameInput?.value || birthPlaceSearchInput?.value || null;
            const countryRaw = countryNameFromCode(birthPlaceCountryCodeInput?.value || '') || null;
            const range = getSelectedRange24();
            const scanStepMinutes = Math.max(1, Math.min(30, Number(scanStepInput?.value || 1)));

            const searchWindowMinutes = Math.max(1, range.endTotalMinutes - range.startTotalMinutes);

            return {
                date: getSelectedDateIso(),
                time: getSelectedTime24(),
                search_start_time: range.startTime,
                search_end_time: range.endTime,
                search_step_minutes: scanStepMinutes,
                lat: Number(latRaw),
                lon: Number(lonRaw),
                timezone: timezoneRaw,
                house_system: getChartValue('house_system', 'P'),
                search_window_minutes: searchWindowMinutes,
                subject_name: subjectNameInput?.value || null,
                subject_sex: subjectSexInput?.value || null,
                birthplace_country: countryRaw,
                birthplace_region: null,
                birthplace_city: cityRaw,
            };
        }

        form.addEventListener('submit', async function (event) {
            event.preventDefault();
            setStatus('');
            setQuestionStatus('');

            const payload = collectPayload();
            if (!payload.date || !payload.time || Number.isNaN(payload.lat) || Number.isNaN(payload.lon)) {
                setStatus(@json($localeIsEn ? 'Birth data appears incomplete or invalid.' : ($localeIsEs ? 'Los datos de nacimiento parecen incompletos o no válidos.' : 'Doğum verisi eksik veya geçersiz görünüyor.')));
                return;
            }

            if (!payload.search_start_time || !payload.search_end_time || payload.search_start_time >= payload.search_end_time) {
                setStatus(@json($localeIsEn ? 'Invalid time range. End time must be after start time.' : ($localeIsEs ? 'Rango de horas no válido. La hora final debe ser posterior al inicio.' : 'Saat aralığı geçersiz. Bitiş saati başlangıçtan sonra olmalıdır.')));
                return;
            }

            setBirthRunningState(true);
            try {
                const response = await fetch(modalEl.dataset.startUrl, {
                    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 firstError = firstKey ? json.errors[firstKey][0] : 'Rektifikasyon isteği başarısız oldu.';
                        setStatus(firstError || 'Rektifikasyon isteği başarısız oldu.');
                    } else {
                        setStatus(json.message || 'Rektifikasyon isteği başarısız oldu.');
                    }
                    return;
                }

                const token = json.token || '';
                const wizardUrl = json.wizard_url || json.redirect_url || '';
                if (!token || !wizardUrl) {
                    setStatus('Soru akışı başlatılamadı.');
                    return;
                }

                const wizardData = await loadWizardQuestions(token, wizardUrl);
                hydrateQuestionScreen(wizardData);
                transitionToStep('questions', 'forward');
            } catch (error) {
                setStatus('Rektifikasyon isteği başarısız oldu.');
            } finally {
                setBirthRunningState(false);
            }
        });

        questionForm?.addEventListener('submit', async function (event) {
            event.preventDefault();
            setQuestionStatus('');

            const wizardData = rectificationState.wizardData;
            const completeUrl = wizardData?.complete_url || '';
            if (!completeUrl) {
                setQuestionStatus('Soru akışı bulunamadı. Lütfen yeniden deneyin.');
                return;
            }

            const formData = new FormData(questionForm);
            let isSuccessful = false;
            setQuestionRunningState(true);
            startLoadingOverlay();
            try {
                const response = await fetch(completeUrl, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': modalEl.dataset.csrf || '',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: formData,
                });

                const json = await response.json();
                if (!response.ok || !json.ok) {
                    if (response.status === 422 && json.errors) {
                        const firstKey = Object.keys(json.errors)[0];
                        const firstError = firstKey ? json.errors[firstKey][0] : 'Lütfen soru formunu kontrol edin.';
                        setQuestionStatus(firstError || 'Lütfen soru formunu kontrol edin.');
                    } else {
                        setQuestionStatus(json.message || 'Sonuç hesaplanırken bir sorun oluştu.');
                    }
                    return;
                }

                rectificationState.result = json.result || null;
                if (typeof json.chat_words_remaining !== 'undefined') {
                    window.CHAT_WORDS_REMAINING = json.chat_words_remaining;
                    syncRectificationCredits(json.chat_words_remaining);
                    window.dispatchEvent(new CustomEvent('panel:credits-updated', {
                        detail: {
                            chat_words_remaining: json.chat_words_remaining,
                        },
                    }));
                }
                if (resultContent) {
                    resultContent.innerHTML = renderResultHtml(rectificationState.result || {});
                }
                isSuccessful = true;
                transitionToStep('result', 'forward');
            } catch (error) {
                setQuestionStatus('Sonuç hesaplanırken bir sorun oluştu.');
            } finally {
                stopLoadingOverlay(isSuccessful);
                setQuestionRunningState(false);
            }
        });

        backToBirthButton?.addEventListener('click', function () {
            setStatus('');
            setQuestionStatus('');
            transitionToStep('birth', 'back');
        });

        backToQuestionsButton?.addEventListener('click', function () {
            transitionToStep('questions', 'back');
        });

        [birthMonthInput, birthDayInput, birthYearInput].forEach(function (el) {
            el?.addEventListener('change', syncWeekday);
        });

        bindAutocomplete();

        modalEl.addEventListener('show.bs.modal', function () {
            resetQuestionAndResultScreens();
            showStepInstant('birth');
            syncReferenceStyleFields();
            setDefaultBirthTime();
            syncWeekday();
            syncRectificationCredits(window.CHAT_WORDS_REMAINING || 0);
        });

        modalEl.addEventListener('hidden.bs.modal', function () {
            resetQuestionAndResultScreens();
            showStepInstant('birth');
            setBirthRunningState(false);
            setQuestionRunningState(false);
            stopLoadingOverlay(false);
            setStatus('');
            setQuestionStatus('');
        });
    })();
</script>