{% extends "global/Page.html" %}
{{ block title }}
<p class="d-none">Codice personale</p>
{{ endblock }}

{% block content %}
{{ include C.form_css }}
<style>
    .code-box {
        font-size: 3rem;
        font-weight: 700;
        letter-spacing: .35em;
        font-family: "Consolas", "Menlo", monospace;
        text-align: center;
        padding: 1rem .5rem 1rem 1rem;   /* letter-spacing adds space on the right */
        border: 2px dashed var(--accent);
        border-radius: .75rem;
        background: #fff;
        max-width: 22rem;
        margin: 0 auto 1rem auto;
    }
    .code-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
    .code-actions .btn { min-width: 12rem; }
    #pdf-hint { display: none; }
</style>

<div class="container">
    <h2>Il suo codice personale</h2>

    <div class="card mb-4 bg-light">
        <div class="card-body">
            <p class="fs-5">
                Per collegare in forma anonima le risposte di questo questionario con quelle del questionario finale,
                il sistema le ha assegnato un <strong>codice personale</strong>.
            </p>

            <div class="code-box" id="code-box">{{ player.codice }}</div>

            <div class="code-actions mb-3">
                <button type="button" class="btn btn-outline-primary" id="btn-copy">
                    Copia il codice
                </button>
                <button type="button" class="btn btn-primary" id="btn-pdf">
                    Scarica il codice in PDF
                </button>
            </div>
            <p class="text-center text-success mb-0" id="copy-ok" style="display:none;">Codice copiato.</p>
            <p class="text-center text-muted small" id="pdf-hint">
                Se il download non parte, annoti il codice su un foglio o lo copi in un documento.
            </p>
        </div>
    </div>

    <div class="alert alert-info" role="note">
        <strong>Conservi il codice con cura.</strong>
        Le chiediamo gentilmente di salvare il PDF (o di annotare il codice) in una cartella sicura del suo computer:
        il codice le sarà richiesto per compilare il <strong>questionario finale</strong>, al termine del corso.
        Il codice non contiene alcuna informazione personale e serve unicamente a collegare le sue risposte;
        non lo comunichi ad altre persone, compreso il team di ricerca.
    </div>

    <div class="card mb-4 bg-light">
        <div class="card-body">
            {{ formfield 'codice_salvato' }}
        </div>
    </div>
</div>

{{ include C.next_progress }}
{{ include C.pdf_js }}

<script>
document.addEventListener('DOMContentLoaded', function () {
    const code = {{ player.codice|json }};
    const logoUrl = "{% static 'images/logo.jpg' %}";

    document.getElementById('btn-copy').addEventListener('click', function () {
        const done = function () { document.getElementById('copy-ok').style.display = 'block'; };
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(code).then(done, function () {});
        } else {
            const ta = document.createElement('textarea');
            ta.value = code; document.body.appendChild(ta); ta.select();
            try { document.execCommand('copy'); done(); } catch (e) {}
            ta.remove();
        }
    });

    document.getElementById('btn-pdf').addEventListener('click', async function () {
        if (!window.jspdf) { document.getElementById('pdf-hint').style.display = 'block'; return; }
        const P = window.capirePdf;
        const doc = P.newDoc('CAPIRE - Codice personale');
        let y = P.addLogo(doc, await P.loadLogo(logoUrl), 20);

        y = P.para(doc, 'Progetto CAPIRE', y, 13, 'bold');
        y = P.para(doc, 'Il suo codice personale', y + 2, 18, 'bold');

        doc.setDrawColor(37, 99, 235); doc.setLineWidth(0.6);
        doc.setLineDashPattern([2, 1.5], 0);
        doc.roundedRect(60, y, 90, 26, 3, 3);
        doc.setLineDashPattern([], 0);
        doc.setFont('courier', 'bold'); doc.setFontSize(36);
        doc.text(code.split('').join(' '), 105, y + 17.5, { align: 'center' });
        y += 40;

        y = P.para(doc,
            'Conservi questo documento in una cartella sicura del suo computer: il codice le sarà ' +
            'richiesto per compilare il questionario finale, al termine del corso.', y, 12);
        y = P.para(doc,
            'Il codice non contiene alcuna informazione personale e serve unicamente a collegare in forma ' +
            'anonima le risposte dei due questionari. La preghiamo di non comunicarlo ad altre persone, compreso il team di ricerca.', y + 2, 12);

        doc.save('CAPIRE_codice_personale.pdf');
    });
});
</script>
{% endblock %}