@extends('layouts.survey')

@section('title', $project->name . ' Survey')

@section('trail')
    <div class="trail-item done">
        <span class="num"><i class="fas fa-check" style="font-size:.55rem;"></i></span>
        <span>Respondent</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item done">
        <span class="num"><i class="fas fa-check" style="font-size:.55rem;"></i></span>
        <span>Language</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item active">
        <span class="num">3</span>
        <span>Questions</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item">
        <span class="num">4</span>
        <span>Your Info</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item">
        <span class="num">5</span>
        <span>Thank You</span>
    </div>
@endsection

@push('styles')
<style>
/* ── Progress Bar ──────────────────────────────────────────────── */
.progress-wrap {
    background: #fff; border: 1.5px solid var(--gray-200);
    border-radius: 18px; padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.progress-header {
    display: flex; justify-content: space-between;
    font-size: .82rem; color: var(--gray-500); margin-bottom: .75rem;
}
.progress-header strong { color: var(--gray-900); font-weight: 800; }
.progress-bar-bg {
    height: 8px; background: var(--gray-200); border-radius: 20px; overflow: hidden;
}
.progress-bar-fill {
    height: 100%; background: linear-gradient(90deg, var(--green), #34d399);
    border-radius: 20px; transition: width .4s ease;
}
.step-dots {
    display: flex; gap: .4rem; justify-content: center; margin-top: .75rem;
}
.step-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gray-200); transition: background .2s, transform .2s;
    cursor: pointer;
}
.step-dot.active { background: var(--green); transform: scale(1.3); }
.step-dot.done   { background: #34d399; }

/* ── Question Card ─────────────────────────────────────────────── */
.question-slide {
    display: none;
}
.question-slide.active {
    display: block;
    animation: slideIn .3s ease;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.q-card {
    background: #fff; border: 1.5px solid var(--gray-200);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    margin-bottom: 1.25rem;
}
.q-card-top {
    padding: 1.5rem 1.5rem 0;
    display: flex; align-items: flex-start; gap: 1rem;
}
.q-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--green-lt); color: var(--green);
    font-size: .82rem; font-weight: 800; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.q-type-badge {
    font-size: .68rem; font-weight: 700; padding: .18rem .55rem;
    border-radius: 20px; flex-shrink: 0; margin-top: .1rem;
}
.q-type-radio    { background: #eff6ff; color: #2563eb; }
.q-type-checkbox { background: #f5f3ff; color: #7c3aed; }
.q-type-text     { background: #fff7ed; color: #c2410c; }
.q-type-idea     { background: #f0fdf4; color: #15803d; }

.q-text {
    font-size: 1rem; font-weight: 700; color: var(--gray-900);
    line-height: 1.55; flex: 1;
}
.q-text-bn {
    font-size: .88rem; color: var(--gray-500);
    margin-top: .3rem; line-height: 1.6;
}

.q-options { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; }

/* Radio option */
.opt-item {
    display: flex; align-items: center; gap: .9rem;
    padding: .75rem 1rem; border-radius: 10px;
    border: 1.5px solid var(--gray-200);
    cursor: pointer; transition: border-color .15s, background .15s;
}
.opt-item:hover { border-color: var(--green); background: var(--green-lt); }
.opt-item input[type=radio],
.opt-item input[type=checkbox] { display: none; }
.opt-bullet {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--gray-300); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s;
}
.opt-check {
    width: 20px; height: 20px; border-radius: 5px;
    border: 2px solid var(--gray-300); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s;
}
.opt-item.selected .opt-bullet {
    border-color: var(--green); background: var(--green);
    box-shadow: 0 0 0 3px rgba(0,166,81,.15);
}
.opt-item.selected .opt-bullet::after {
    content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%;
}
.opt-item.selected .opt-check {
    border-color: var(--green); background: var(--green);
}
.opt-item.selected .opt-check::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free';
    font-weight: 900; color: #fff; font-size: .65rem;
}
.opt-item.selected { border-color: var(--green); background: var(--green-lt); }
.opt-label { font-size: .88rem; font-weight: 500; color: var(--gray-700); flex: 1; }

/* Text / Idea */
.q-textarea {
    padding: .85rem 1rem;
    border: 1.5px solid var(--gray-300);
    border-radius: 10px; width: 100%; resize: vertical; min-height: 110px;
    font-family: inherit; font-size: .88rem; color: var(--gray-900);
    background: var(--gray-50); outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.q-textarea:focus {
    border-color: var(--green); background: #fff;
    box-shadow: 0 0 0 3px rgba(0,166,81,.1);
}
.idea-hint {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #bbf7d0; border-radius: 10px;
    padding: .85rem 1rem; margin-bottom: .75rem;
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .8rem; color: #15803d; line-height: 1.6;
}
.idea-hint i { margin-top: 1px; flex-shrink: 0; }

/* ── Navigation ────────────────────────────────────────────────── */
.q-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 0;
}
.btn-prev, .btn-next, .btn-submit {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.4rem; border-radius: 10px;
    font-size: .88rem; font-weight: 700; font-family: inherit;
    cursor: pointer; border: none; transition: background .15s, transform .1s;
}
.btn-prev {
    background: var(--gray-100); color: var(--gray-700);
    border: 1.5px solid var(--gray-200);
}
.btn-prev:hover   { background: var(--gray-200); }
.btn-prev:disabled { opacity: .4; cursor: not-allowed; }
.btn-next {
    background: var(--green); color: #fff;
    box-shadow: 0 3px 12px rgba(0,166,81,.3);
}
.btn-next:hover   { background: var(--green-dark); }
.btn-next:disabled { opacity: .5; cursor: not-allowed; }
.btn-submit {
    background: var(--green); color: #fff;
    box-shadow: 0 3px 12px rgba(0,166,81,.3);
}
.btn-submit:hover { background: var(--green-dark); }

.q-nav-center { font-size: .78rem; color: var(--gray-400); font-weight: 600; }

/* ── Collector Form ────────────────────────────────────────────── */
.collector-slide { display: none; }
.collector-slide.active { display: block; animation: slideIn .3s ease; }

.section-divider {
    display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0;
}
.section-divider::before,
.section-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--gray-200);
}
.section-divider span {
    font-size: .72rem; font-weight: 700; color: var(--gray-400);
    letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: .8rem; font-weight: 700; color: var(--gray-700); margin-bottom: .35rem; }
.form-label .opt-tag { font-weight: 400; color: var(--gray-400); margin-left: .25rem; }
.form-input, .form-select {
    width: 100%; padding: .65rem .9rem;
    border: 1.5px solid var(--gray-300); border-radius: 9px;
    font-size: .88rem; font-family: inherit; color: var(--gray-900);
    background: var(--gray-50); outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.form-input:focus, .form-select:focus {
    border-color: var(--green); background: #fff;
    box-shadow: 0 0 0 3px rgba(0,166,81,.1);
}
.form-select { cursor: pointer; }

@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
</style>
@endpush

@section('content')
@php $totalQ = count($questions); @endphp

<form method="POST"
      action="{{ route('survey.store', [$project->slug, $respondentType->slug, $language]) }}"
      id="surveyForm">
@csrf

{{-- Progress Bar --}}
<div class="progress-wrap">
    <div class="progress-header">
        <span>Question <strong id="currentNum">1</strong> of <strong>{{ $totalQ }}</strong></span>
        <span id="progressPct">0% complete</span>
    </div>
    <div class="progress-bar-bg">
        <div class="progress-bar-fill" id="progressFill" style="width:0%;"></div>
    </div>
    <div class="step-dots">
        @for($i = 1; $i <= $totalQ; $i++)
            <div class="step-dot {{ $i === 1 ? 'active' : '' }}" id="dot-{{ $i }}"
                 onclick="goToQuestion({{ $i }})"></div>
        @endfor
        <div class="step-dot" id="dot-collector" onclick="goToCollector()" title="Your Info"></div>
    </div>
</div>

{{-- Questions --}}
@foreach($questions as $q)
<div class="question-slide {{ $loop->first ? 'active' : '' }}" id="slide-{{ $loop->iteration }}">
    <div class="q-card">
        <div class="q-card-top">
            <div class="q-num">{{ $q->order }}</div>
            <div style="flex:1">
                <div style="display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem;">
                    @php
                        $typeLabels = ['radio'=>'Single Choice','checkbox'=>'Multiple Choice','text'=>'Open Text','idea'=>'Your Idea'];
                        $typeClass  = ['radio'=>'q-type-radio','checkbox'=>'q-type-checkbox','text'=>'q-type-text','idea'=>'q-type-idea'];
                    @endphp
                    <span class="q-type-badge {{ $typeClass[$q->question_type] ?? 'q-type-text' }}">
                        {{ $typeLabels[$q->question_type] ?? 'Text' }}
                    </span>
                    @if($q->is_required)
                        <span style="font-size:.7rem;color:#dc2626;font-weight:700;">Required</span>
                    @endif
                </div>
                <div class="q-text">
                    {{ $language === 'bn' && $q->question_text_bn ? $q->question_text_bn : $q->question_text }}
                </div>
                @if($language === 'bn' && $q->question_text_bn)
                    <div class="q-text-bn">{{ $q->question_text }}</div>
                @endif
            </div>
        </div>

        <div class="q-options">
            @if($q->question_type === 'radio')
                @foreach($q->options ?? [] as $opt)
                <label class="opt-item" for="q{{ $q->id }}_{{ $loop->index }}">
                    <input type="radio"
                           id="q{{ $q->id }}_{{ $loop->index }}"
                           name="q_{{ $q->id }}"
                           value="{{ $opt['value'] }}"
                           onchange="onOptionChange(this)">
                    <span class="opt-bullet"></span>
                    <span class="opt-label">
                        {{ $language === 'bn' && !empty($opt['label_bn']) ? $opt['label_bn'] : $opt['label'] }}
                    </span>
                </label>
                @endforeach

            @elseif($q->question_type === 'checkbox')
                @foreach($q->options ?? [] as $opt)
                <label class="opt-item" for="q{{ $q->id }}_{{ $loop->index }}">
                    <input type="checkbox"
                           id="q{{ $q->id }}_{{ $loop->index }}"
                           name="q_{{ $q->id }}[]"
                           value="{{ $opt['value'] }}"
                           onchange="onCheckChange(this)">
                    <span class="opt-check"></span>
                    <span class="opt-label">
                        {{ $language === 'bn' && !empty($opt['label_bn']) ? $opt['label_bn'] : $opt['label'] }}
                    </span>
                </label>
                @endforeach

            @elseif($q->question_type === 'idea')
                <div class="idea-hint">
                    <i class="fas fa-lightbulb"></i>
                    <span>{{ $language === 'bn' ? 'আপনার সেরা ধারণা শেয়ার করুন — যত বিস্তারিত হবে তত ভালো!' : 'Share your best idea — the more detail, the better!' }}</span>
                </div>
                <textarea name="q_{{ $q->id }}"
                          class="q-textarea"
                          rows="4"
                          placeholder="{{ $language === 'bn' ? 'আপনার ধারণা এখানে লিখুন...' : 'Write your idea here...' }}"
                          oninput="onTextInput(this)"></textarea>

            @else {{-- text --}}
                <textarea name="q_{{ $q->id }}"
                          class="q-textarea"
                          rows="4"
                          placeholder="{{ $language === 'bn' ? 'আপনার উত্তর এখানে লিখুন...' : 'Write your answer here...' }}"
                          oninput="onTextInput(this)"></textarea>
            @endif
        </div>
    </div>

    {{-- Nav: Previous / Next --}}
    <div class="q-nav">
        <button type="button" class="btn-prev" onclick="prevQuestion()"
                {{ $loop->first ? 'disabled' : '' }}>
            <i class="fas fa-arrow-left"></i> Previous
        </button>
        <span class="q-nav-center">{{ $loop->iteration }} / {{ $totalQ }}</span>
        @if($loop->last)
            <button type="button" class="btn-next" onclick="nextQuestion()">
                Your Info <i class="fas fa-arrow-right"></i>
            </button>
        @else
            <button type="button" class="btn-next" onclick="nextQuestion()">
                Next <i class="fas fa-arrow-right"></i>
            </button>
        @endif
    </div>
</div>
@endforeach

{{-- Collector / Respondent Info Slide --}}
<div class="collector-slide" id="slide-collector">
    <div class="q-card">
        <div class="q-card-top" style="padding:1.5rem;">
            <div class="q-num" style="background:#fef9c3;color:#a16207;"><i class="fas fa-id-badge" style="font-size:.75rem;"></i></div>
            <div>
                <div class="q-text">
                    @auth
                        {{ $language === 'bn' ? 'তথ্য সংগ্রহকারীর বিবরণ' : 'Submission Details' }}
                    @else
                        {{ $language === 'bn' ? 'আপনার পরিচয়' : 'About You' }}
                    @endauth
                </div>
                <div class="q-text-bn" style="margin-top:.25rem;">
                    @auth
                        {{ $language === 'bn' ? 'জমা দেওয়ার আগে আপনার বিবরণ পূরণ করুন।' : 'Fill in your details before submitting.' }}
                    @else
                        {{ $language === 'bn' ? 'জমা দেওয়ার আগে আপনার নাম ও ফোন নম্বর দিন।' : 'Please provide your name and mobile number before submitting.' }}
                    @endauth
                </div>
            </div>
        </div>

        <div style="padding: 0 1.5rem 1.5rem;">

            @auth
            {{-- ── EMPLOYEE-COLLECTED FLOW ──────────────────────────── --}}
            <div class="section-divider"><span>{{ $language === 'bn' ? 'কর্মী (সংগ্রহকারী)' : 'Employee (Collector)' }}</span></div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">
                        {{ $language === 'bn' ? 'আপনার নাম' : 'Your Full Name' }}
                        <span style="color:#dc2626">*</span>
                    </label>
                    <input type="text" name="employee_name" class="form-input"
                           placeholder="e.g. Rahim Uddin"
                           value="{{ auth()->user()->name }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label">
                        {{ $language === 'bn' ? 'কর্মী আইডি' : 'Employee ID' }}
                    </label>
                    <input type="text" name="employee_id" class="form-input"
                           placeholder="e.g. CB-EMP-001"
                           value="{{ auth()->user()->employee_id ?? '' }}">
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">
                    {{ $language === 'bn' ? 'বিভাগ' : 'Department' }}
                </label>
                <input type="text" name="department" class="form-input"
                       placeholder="e.g. Sales, Marketing"
                       value="{{ auth()->user()->department ?? '' }}">
            </div>

            <div class="section-divider"><span>{{ $language === 'bn' ? 'উত্তরদাতার বিবরণ' : 'Respondent Details' }}</span></div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">
                        {{ $language === 'bn' ? 'উত্তরদাতার নাম' : "Respondent's Name" }}
                        <span class="opt-tag">({{ $language === 'bn' ? 'ঐচ্ছিক' : 'optional' }})</span>
                    </label>
                    <input type="text" name="respondent_name" class="form-input"
                           placeholder="{{ $language === 'bn' ? 'সাক্ষাৎকারকৃত ব্যক্তির নাম' : 'Name of the person interviewed' }}">
                </div>
                <div class="form-group">
                    <label class="form-label">
                        {{ $language === 'bn' ? 'মোবাইল নম্বর' : "Respondent's Phone" }}
                        <span class="opt-tag">({{ $language === 'bn' ? 'ঐচ্ছিক' : 'optional' }})</span>
                    </label>
                    <input type="text" name="respondent_phone" class="form-input"
                           placeholder="017XXXXXXXX">
                </div>
            </div>

            <div class="section-divider"><span>{{ $language === 'bn' ? 'সংগ্রহের তথ্য' : 'Collection Details' }}</span></div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">
                        {{ $language === 'bn' ? 'অবস্থান' : 'Location' }}
                        <span style="color:#dc2626">*</span>
                    </label>
                    <input type="text" name="location" class="form-input"
                           placeholder="{{ $language === 'bn' ? 'যেমন: ঢাকা, গুলশান' : 'e.g. Dhaka, Gulshan' }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label">
                        {{ $language === 'bn' ? 'পরিচয়ের সূত্র' : 'How do you know this person?' }}
                        <span style="color:#dc2626">*</span>
                    </label>
                    <select name="relationship_source" class="form-select" required>
                        <option value="">{{ $language === 'bn' ? 'সম্পর্ক বেছে নিন' : 'Select relationship' }}</option>
                        <option value="family">{{ $language === 'bn' ? 'পরিবার' : 'Family' }}</option>
                        <option value="friend">{{ $language === 'bn' ? 'বন্ধু' : 'Friend' }}</option>
                        <option value="school">{{ $language === 'bn' ? 'স্কুল' : 'School' }}</option>
                        <option value="merchant">{{ $language === 'bn' ? 'মার্চেন্ট' : 'Merchant' }}</option>
                        <option value="workplace">{{ $language === 'bn' ? 'কর্মক্ষেত্র' : 'Workplace' }}</option>
                        <option value="social_circle">{{ $language === 'bn' ? 'সামাজিক পরিচিত' : 'Social Circle' }}</option>
                        <option value="other">{{ $language === 'bn' ? 'অন্যান্য' : 'Other' }}</option>
                    </select>
                </div>
            </div>
            @else
            {{-- ── PUBLIC SELF-SUBMISSION FLOW ─────────────────────── --}}
            <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:.85rem 1rem;margin-bottom:1.25rem;display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:#166534;">
                <i class="fas fa-shield-halved" style="flex-shrink:0;margin-top:.1rem;"></i>
                <span>
                    {{ $language === 'bn'
                        ? 'আপনার তথ্য সম্পূর্ণ গোপনীয় থাকবে এবং শুধুমাত্র গবেষণার উদ্দেশ্যে ব্যবহৃত হবে।'
                        : 'Your information is kept private and used solely for research purposes.' }}
                </span>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">
                        {{ $language === 'bn' ? 'আপনার নাম' : 'Your Name' }}
                        <span style="color:#dc2626">*</span>
                    </label>
                    <input type="text" name="respondent_name" class="form-input"
                           placeholder="{{ $language === 'bn' ? 'আপনার পুরো নাম লিখুন' : 'Enter your full name' }}"
                           required maxlength="100">
                </div>
                <div class="form-group">
                    <label class="form-label">
                        {{ $language === 'bn' ? 'মোবাইল নম্বর' : 'Mobile Number' }}
                        <span style="color:#dc2626">*</span>
                    </label>
                    <input type="tel" name="respondent_phone" class="form-input"
                           placeholder="{{ $language === 'bn' ? 'যেমন: 017XXXXXXXX' : 'e.g. 017XXXXXXXX' }}"
                           required maxlength="20">
                </div>
            </div>
            @endauth

        </div>
    </div>

    <div class="q-nav">
        <button type="button" class="btn-prev" onclick="backToQuestions()">
            <i class="fas fa-arrow-left"></i>
            {{ $language === 'bn' ? 'প্রশ্নে ফিরুন' : 'Back to Questions' }}
        </button>
        <button type="submit" class="btn-submit" id="submitBtn" onclick="return confirmSubmit()">
            <i class="fas fa-paper-plane"></i>
            {{ $language === 'bn' ? 'জমা দিন' : 'Submit Feedback' }}
        </button>
    </div>
</div>

</form>
@endsection

@push('scripts')
<script>
const TOTAL   = {{ $totalQ }};
let current   = 1;        // 1-based, TOTAL+1 = collector slide
let answered  = {};       // track answered state

function goToQuestion(n) {
    // hide current
    hideAll();
    current = n;
    const slide = document.getElementById('slide-' + n);
    if (slide) { slide.classList.add('active'); updateProgress(); }
}

function goToCollector() {
    hideAll();
    current = TOTAL + 1;
    document.getElementById('slide-collector').classList.add('active');
    updateProgress();
}

function hideAll() {
    document.querySelectorAll('.question-slide, .collector-slide').forEach(s => s.classList.remove('active'));
}

function nextQuestion() {
    if (current <= TOTAL) {
        if (current === TOTAL) {
            goToCollector();
        } else {
            goToQuestion(current + 1);
        }
    }
}

function prevQuestion() {
    if (current > 1 && current <= TOTAL) {
        goToQuestion(current - 1);
    }
}

function backToQuestions() {
    goToQuestion(TOTAL);
}

function updateProgress() {
    const answeredCount = Object.values(answered).filter(Boolean).length;
    const totalSteps    = TOTAL + 1; // questions + collector
    let pct;

    if (current <= TOTAL) {
        pct = Math.round(((current - 1) / totalSteps) * 100);
    } else {
        pct = Math.round((TOTAL / totalSteps) * 100);
    }

    document.getElementById('progressFill').style.width = pct + '%';
    document.getElementById('progressPct').textContent  = pct + '% complete';

    if (current <= TOTAL) {
        document.getElementById('currentNum').textContent = current;
    } else {
        document.getElementById('currentNum').textContent = 'Your Info';
    }

    // Update dots
    for (let i = 1; i <= TOTAL; i++) {
        const dot = document.getElementById('dot-' + i);
        if (!dot) continue;
        dot.className = 'step-dot';
        if (answered[i])   dot.classList.add('done');
        if (i === current) dot.classList.add('active');
    }
    const cDot = document.getElementById('dot-collector');
    cDot.className = 'step-dot';
    if (current === TOTAL + 1) cDot.classList.add('active');
}

function onOptionChange(input) {
    const slide = input.closest('.question-slide');
    const idx   = parseInt(slide.id.replace('slide-', ''));
    answered[idx] = true;

    // Visual: mark selected
    slide.querySelectorAll('.opt-item').forEach(item => item.classList.remove('selected'));
    input.closest('.opt-item').classList.add('selected');

    updateProgress();

    // Auto-advance radio after short delay
    if (input.type === 'radio') {
        setTimeout(() => nextQuestion(), 350);
    }
}

function onCheckChange(input) {
    const slide = input.closest('.question-slide');
    const idx   = parseInt(slide.id.replace('slide-', ''));
    const label = input.closest('.opt-item');

    // Toggle selected class
    if (input.checked) {
        label.classList.add('selected');
    } else {
        label.classList.remove('selected');
    }

    // Mark answered if at least one checked
    const anyChecked = slide.querySelectorAll('input[type=checkbox]:checked').length > 0;
    answered[idx] = anyChecked;
    updateProgress();
}

function onTextInput(textarea) {
    const slide = textarea.closest('.question-slide');
    if (!slide) return;
    const idx = parseInt(slide.id.replace('slide-', ''));
    answered[idx] = textarea.value.trim().length > 0;
    updateProgress();
}

function confirmSubmit() {
    // Defer the UI update so the browser processes form submission first
    setTimeout(() => {
        const btn = document.getElementById('submitBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Submitting…';
    }, 10);
    return true;
}

// Init
updateProgress();
</script>
@endpush