@extends('frontend.main_master')

@php
    $title = 'Doğum Saati Rektifikasyonu - Soru Ekranı';
@endphp

@section('title', $title . ' | ' . t('site-title'))

@push('styles')
<style>
    .rectification-wizard-page {
        padding: 30px 0 40px;
        min-height: 80vh;
        background: linear-gradient(180deg, #f7f9fc 0%, #edf2f9 100%);
    }

    .rectification-shell {
        max-width: 980px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid #d9e2ef;
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(35, 57, 89, 0.08);
        padding: 18px;
        position: relative;
        overflow: hidden;
    }

    .rectification-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: #1f314b;
        margin-bottom: 4px;
    }

    .rectification-subtitle {
        font-size: 0.86rem;
        color: #607389;
    }

    .rect-table-modern thead th {
        background: #f1f6fb;
        font-size: 0.8rem;
        color: #445a73;
        white-space: nowrap;
    }

    .rect-table-modern td {
        vertical-align: middle;
        font-size: 0.86rem;
    }

    .rect-event-row {
        border: 1px solid #ebf0f5;
        border-radius: 9px;
        background: #fafcff;
        padding: 7px 5px;
    }

    .result-board {
        border: 1px solid #d8e3f0;
        border-radius: 12px;
        background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
        padding: 12px;
    }

    .result-board table {
        margin-bottom: 0;
    }

    .result-board thead th {
        background: #eef4fb;
        color: #4a607a;
        font-size: 0.8rem;
    }

    .rectification-loading-overlay {
        position: absolute;
        inset: 0;
        z-index: 15;
        background: rgba(246, 250, 255, 0.92);
        backdrop-filter: blur(2px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
    }

    .rectification-loading-card {
        width: min(420px, 100%);
        background: #fff;
        border: 1px solid #d9e3f0;
        border-radius: 12px;
        box-shadow: 0 14px 32px rgba(32, 58, 88, 0.16);
        padding: 16px;
        text-align: center;
    }

    .rectification-loading-spinner {
        width: 50px;
        height: 50px;
        margin: 0 auto 10px;
        border-radius: 50%;
        border: 4px solid rgba(70, 107, 152, 0.18);
        border-top-color: #356ca9;
        animation: rectWizardSpin 0.9s linear infinite;
    }

    .rectification-loading-title {
        font-size: 0.98rem;
        font-weight: 700;
        color: #243d59;
    }

    .rectification-loading-subtitle {
        font-size: 0.82rem;
        color: #607389;
        margin-top: 4px;
        min-height: 20px;
    }

    .rectification-loading-progress {
        margin-top: 12px;
        height: 9px;
        border-radius: 999px;
        background: #e6eef8;
        overflow: hidden;
    }

    .rectification-loading-progress-bar {
        height: 100%;
        width: 0;
        border-radius: inherit;
        background: linear-gradient(90deg, #356ca9 0%, #4f85bd 55%, #7db5ea 100%);
        transition: width 0.28s ease;
    }

    .rectification-loading-percent {
        margin-top: 7px;
        font-size: 0.8rem;
        font-weight: 700;
        color: #315b87;
    }

    @keyframes rectWizardSpin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @media (max-width: 767px) {
        .rectification-shell {
            padding: 14px;
        }
    }
</style>
@endpush

@section('content')
<section class="rectification-wizard-page">
    <div class="container">
        <div class="rectification-shell">
            <div class="rectification-title">{{ $title }}</div>
            <div class="rectification-subtitle mb-3">
                {{ ($payload['date'] ?? '-') }}
                | {{ ($payload['birthplace_city'] ?? '-') . ', ' . ($payload['birthplace_country'] ?? '-') }}
            </div>

            @if (session('error'))
                <div class="alert alert-danger py-2">{{ session('error') }}</div>
            @endif

            <form method="POST" action="{{ route('panel.rectification.wizard.complete', ['token' => $token]) }}">
                @csrf
                @include('frontend.panel.partials.rectification.wizard-questions', [
                    'predispositions' => $predispositions,
                    'lifeEvents' => $lifeEvents,
                    'answers' => $answers ?? [],
                    'lifeEventAnswers' => $lifeEventAnswers ?? [],
                ])

                <div class="d-flex justify-content-between align-items-center mt-3 gap-2 flex-wrap">
                    <a href="{{ route('panel') }}" class="btn btn-outline-secondary">Panele Dön</a>
                    <button type="submit" id="rectificationWizardSubmitButton" class="btn btn-color-four text-white">Sonucu Hesapla</button>
                </div>
            </form>

            <div id="rectificationWizardLoadingOverlay" class="rectification-loading-overlay d-none" aria-hidden="true">
                <div class="rectification-loading-card" role="status" aria-live="polite" aria-atomic="true">
                    <div class="rectification-loading-spinner" aria-hidden="true"></div>
                    <div id="rectificationWizardLoadingTitle" class="rectification-loading-title">Sonuç hesaplanıyor...</div>
                    <div id="rectificationWizardLoadingSubtitle" class="rectification-loading-subtitle">Yaşam olayları ve sorular formüle işleniyor.</div>
                    <div class="rectification-loading-progress" aria-hidden="true">
                        <div id="rectificationWizardLoadingProgressBar" class="rectification-loading-progress-bar"></div>
                    </div>
                    <div id="rectificationWizardLoadingPercent" class="rectification-loading-percent">%8</div>
                </div>
            </div>

            @if (!empty($result))
                <div class="result-board">
                    <h6 class="mb-2 fw-semibold">Hesaplanan Sonuçlar</h6>
                    <div class="small mb-2">
                        <strong>En güçlü saat:</strong> {{ $result['best_time_local'] ?? '-' }} |
                        <strong>Güven:</strong> {{ $result['confidence'] ?? '-' }} |
                        <strong>Skor farkı:</strong> {{ $result['score_gap'] ?? '-' }}
                    </div>

                    <div class="table-responsive">
                    <table class="table table-sm align-middle rect-table-modern">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Skor</th>
                                <th>Yerel Saat</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (($result['top_candidates'] ?? []) as $index => $candidate)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $candidate['score_display'] ?? $candidate['score'] ?? '-' }}</td>
                                    <td>{{ $candidate['time_local'] ?? '-' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    </div>
                </div>
            @endif
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    (function () {
        const wizardForm = document.querySelector('.rectification-shell form[action*="/rectification/wizard/"]');
        const overlay = document.getElementById('rectificationWizardLoadingOverlay');
        const titleEl = document.getElementById('rectificationWizardLoadingTitle');
        const subtitleEl = document.getElementById('rectificationWizardLoadingSubtitle');
        const barEl = document.getElementById('rectificationWizardLoadingProgressBar');
        const percentEl = document.getElementById('rectificationWizardLoadingPercent');
        const submitButton = document.getElementById('rectificationWizardSubmitButton');

        if (!wizardForm || !overlay) {
            return;
        }

        const loadingState = {
            progress: 8,
            tick: 0,
            timer: null,
            steps: [
                'Yaşam olayları doğrulanıyor.',
                'Sinyal ağırlıkları hesaplanıyor.',
                'Aday saatler sıralanıyor.',
                'En güçlü zaman aralığı seçiliyor.',
            ],
        };

        function updateOverlay() {
            if (barEl) {
                barEl.style.width = loadingState.progress + '%';
            }
            if (percentEl) {
                percentEl.textContent = '%' + Math.round(loadingState.progress);
            }
            if (subtitleEl) {
                subtitleEl.textContent = loadingState.steps[loadingState.tick % loadingState.steps.length] || loadingState.steps[0];
            }
        }

        function startOverlay() {
            if (loadingState.timer) {
                window.clearInterval(loadingState.timer);
            }

            loadingState.progress = 8;
            loadingState.tick = 0;
            overlay.classList.remove('d-none');
            overlay.setAttribute('aria-hidden', 'false');

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

            updateOverlay();

            loadingState.timer = window.setInterval(function () {
                loadingState.tick += 1;
                const increment = loadingState.progress < 48
                    ? 4
                    : (loadingState.progress < 72 ? 2.3 : 1.1);
                loadingState.progress = Math.min(94, loadingState.progress + increment);
                updateOverlay();
            }, 260);
        }

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

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

        wizardForm.addEventListener('submit', function () {
            if (submitButton) {
                submitButton.disabled = true;
                submitButton.textContent = 'Hesaplanıyor...';
            }
            startOverlay();
        });

        window.addEventListener('pageshow', function () {
            stopOverlay();
            if (submitButton) {
                submitButton.disabled = false;
                submitButton.textContent = 'Sonucu Hesapla';
            }
        });
    })();
</script>
@endpush