{% extends "base.html" %}
{% block title %}MT Scan Invullen — Groots in Vertellen{% endblock %}
{% block extra_head %}
<style>
.step-indicator{display:flex;align-items:center;justify-content:center;gap:8px;margin:24px 0 32px}
.step-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;background:#e0e0e0;color:#667085;transition:all .3s;cursor:pointer}
.step-dot.active{background:#84C2C0;color:white;transform:scale(1.1)}
.step-dot.done{background:#84C2C0;color:white}
.step-line{width:60px;height:3px;background:#e0e0e0;transition:background .3s}
.step-line.active{background:#84C2C0}
.scan-step{display:none}
.scan-step.active{display:block}
.context-text{font-size:13px;color:#667085;margin-bottom:8px;font-style:italic}
.comment-required{display:none;color:#dc2626;font-size:12px;margin-top:4px;font-weight:500}
.comment-required.show{display:block}
.step-nav{display:flex;justify-content:space-between;margin-top:24px}
.score-labels{display:flex;justify-content:space-between;font-size:11px;color:#667085;margin-top:4px;max-width:280px}
</style>
{% endblock %}
{% block content %}
<div class="scan-container">
    <h1>Management Team Scan</h1>
    <p class="subtitle">Vul alle drie de delen in voor een volledige analyse van uw MT.</p>

    <div class="step-indicator">
        <div class="step-dot active" data-step="1" onclick="goToStep(1)">1</div>
        <div class="step-line"></div>
        <div class="step-dot" data-step="2" onclick="goToStep(2)">2</div>
        <div class="step-line"></div>
        <div class="step-dot" data-step="3" onclick="goToStep(3)">3</div>
    </div>

    <form method="POST" id="scanForm" novalidate>

        <!-- STAP 1: Organisatie Context -->
        <div class="scan-step active" data-step="1">
            <div class="card">
                <div class="card-header"><h2>Organisatie Context</h2></div>
                <div style="padding:24px">
                    {% for f in org_fields %}
                    <div class="form-group">
                        <label>{{ f.label }} {% if f.required %}*{% endif %}</label>
                        {% if f.type == 'textarea' %}
                        <textarea name="{{ f.key }}" rows="3" class="form-control" {% if f.required %}required{% endif %}></textarea>
                        {% else %}
                        <input type="text" name="{{ f.key }}" class="form-control" {% if f.required %}required{% endif %}>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="step-nav">
                <span></span>
                <button type="button" class="btn btn-primary" onclick="goToStep(2)">Volgende &rarr;</button>
            </div>
        </div>

        <!-- STAP 2: Team Scan -->
        <div class="scan-step" data-step="2">
            {% for cat in categories %}
            <div class="card scan-category" data-category="{{ cat }}">
                <div class="card-header"><h2>{{ cat }}</h2></div>
                <div style="padding:16px 24px">
                    {% for q in questions %}
                    {% if q.category == cat %}
                    <div class="question-block" data-qid="{{ q.id }}" data-req-below="{{ q.require_comment_below }}" data-req-above="{{ q.require_comment_above }}">
                        <label class="question-text">{{ q.id }}. {{ q.text }}</label>
                        <div class="context-text">{{ q.context }}</div>
                        <div class="score-options">
                            {% for s in range(1, 6) %}
                            <label class="score-option">
                                <input type="radio" name="q_{{ q.id }}" value="{{ s }}" required>
                                <span class="score-btn">{{ s }}</span>
                            </label>
                            {% endfor %}
                        </div>
                        <div class="score-labels">
                            <span>Helemaal mee oneens</span><span>Helemaal mee eens</span>
                        </div>
                        <input type="text" name="c_{{ q.id }}" class="form-control comment-field" placeholder="Toelichting (optioneel, verplicht bij score 1-2 of 4-5)...">
                        <div class="comment-required">Toelichting is verplicht bij deze score.</div>
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
            <div class="step-nav">
                <button type="button" class="btn btn-outline" onclick="goToStep(1)">&larr; Vorige</button>
                <button type="button" class="btn btn-primary" onclick="goToStep(3)">Volgende &rarr;</button>
            </div>
        </div>

        <!-- STAP 3: Ambitie -->
        <div class="scan-step" data-step="3">
            <div class="card">
                <div class="card-header"><h2>Ambitie & Doelen</h2></div>
                <div style="padding:24px">
                    {% for f in ambition_fields %}
                    <div class="form-group">
                        <label>{{ f.label }}</label>
                        <textarea name="{{ f.key }}" rows="3" class="form-control"></textarea>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="step-nav">
                <button type="button" class="btn btn-outline" onclick="goToStep(2)">&larr; Vorige</button>
                <button type="submit" class="btn btn-primary btn-lg" onclick="return validateForm()">Verstuur Scan</button>
            </div>
        </div>

    </form>
</div>

<script>
let currentStep = 1;
const totalSteps = 3;

function goToStep(step) {
    // Validate current step before moving forward
    if (step > currentStep && !validateStep(currentStep)) return;
    currentStep = step;
    document.querySelectorAll('.scan-step').forEach(s => s.classList.remove('active'));
    document.querySelector('.scan-step[data-step="'+step+'"]').classList.add('active');
    document.querySelectorAll('.step-dot').forEach(d => {
        const s = parseInt(d.dataset.step);
        d.classList.remove('active','done');
        if (s === step) d.classList.add('active');
        else if (s < step) d.classList.add('done');
    });
    document.querySelectorAll('.step-line').forEach((l, i) => {
        l.classList.toggle('active', i + 1 < step);
    });
    window.scrollTo({top: 0, behavior: 'smooth'});
}

function validateStep(step) {
    const el = document.querySelector('.scan-step[data-step="'+step+'"]');
    const required = el.querySelectorAll('[required]');
    let valid = true;
    required.forEach(r => {
        if (!r.value.trim()) {
            r.style.borderColor = '#dc2626';
            valid = false;
        } else {
            r.style.borderColor = '';
        }
    });
    if (step === 2) {
        // Check all questions have a score
        document.querySelectorAll('.scan-step[data-step="2"] .question-block').forEach(qb => {
            const checked = qb.querySelector('input[type="radio"]:checked');
            if (!checked) {
                qb.style.background = '#fef2f2';
                valid = false;
            } else {
                qb.style.background = '';
            }
        });
    }
    if (!valid) alert('Vul alle verplichte velden in en geef bij elke vraag een score.');
    return valid;
}

function validateForm() {
    if (!validateStep(3)) return false;
    // Check comment requirements for step 2
    let issues = [];
    document.querySelectorAll('.scan-step[data-step="2"] .question-block').forEach(qb => {
        const checked = qb.querySelector('input[type="radio"]:checked');
        if (!checked) return;
        const score = parseInt(checked.value);
        const reqBelow = parseInt(qb.dataset.reqBelow);
        const reqAbove = parseInt(qb.dataset.reqAbove);
        const comment = qb.querySelector('.comment-field').value.trim();
        if ((score <= reqBelow || score >= reqAbove) && !comment) {
            issues.push('Vraag ' + qb.dataset.qid + ': toelichting is verplicht bij score ' + score);
        }
    });
    if (issues.length) {
        alert('Let op:\n\n' + issues.join('\n'));
        goToStep(2);
        return false;
    }
    return true;
}

// Show/hide comment required message
document.querySelectorAll('.scan-step[data-step="2"] input[type="radio"]').forEach(inp => {
    inp.addEventListener('change', function() {
        const qb = this.closest('.question-block');
        const score = parseInt(this.value);
        const reqBelow = parseInt(qb.dataset.reqBelow);
        const reqAbove = parseInt(qb.dataset.reqAbove);
        const req = qb.querySelector('.comment-required');
        if (score <= reqBelow || score >= reqAbove) {
            req.classList.add('show');
        } else {
            req.classList.remove('show');
        }
    });
});

// Score button visual
document.querySelectorAll('.score-option input').forEach(i => {
    i.addEventListener('change', () => {
        i.closest('.question-block').querySelectorAll('.score-btn').forEach(b => b.classList.remove('selected'));
        i.nextElementSibling.classList.add('selected');
    });
});
</script>
{% endblock %}