{% extends "global/Page.html" %}
{{ block title }}
{{ endblock }}

{{ block content }}
<style>
    .cert-card { border: 2px solid #2563eb; }
    #cert-name { max-width: 28rem; }
</style>

<div class="container">
    <img src="{% static 'images/logo.jpg' %}" alt="Logo" style="max-width: 200px; height: auto; margin-bottom: 20px;">

    <p class="h2">La ringraziamo molto per il tempo che ci ha dedicato!</p>

    <p class="fs-5 mt-3">
        Le sue risposte sono state registrate correttamente e il questionario è concluso.
    </p>

    <div class="card cert-card mb-4 mt-4">
        <div class="card-body">
            <h4 class="card-title">Attestato di compilazione</h4>
            <p>
                Per ottenere l'attestato di partecipazione al corso è necessario presentare, alla fine del corso, l'attestato di
                compilazione del questionario. Scarichi ora il PDF e lo conservi: <strong>dopo aver chiuso questa
                pagina non sarà più possibile scaricarlo</strong>.
            </p>
            <p class="small text-muted">
                Il nome che inserisce qui sotto viene usato solo per creare il PDF sul suo dispositivo: non viene
                inviato né salvato. L'attestato non contiene alcuna informazione sulle sue risposte e il codice di
                verifica presente nell'attestato non è collegabile alle sue risposte.
            </p>

            <label for="cert-name" class="form-label fw-medium">Nome e cognome</label>
            <input type="text" class="form-control mb-2" id="cert-name" maxlength="80" autocomplete="off">
            <div class="text-danger small mb-2" id="cert-name-error" style="display:none;">
                Inserisca nome e cognome per scaricare l'attestato.
            </div>
            <button type="button" class="btn btn-primary" id="btn-cert">Scarica l'attestato (PDF)</button>
            <p class="text-muted small mt-2 mb-0" id="cert-hint" style="display:none;">
                Se il download non parte, provi a ricaricare la pagina o a usare un altro browser.
            </p>
        </div>
    </div>

    <p>Dopo aver scaricato l'attestato può chiudere questa pagina.</p>

    <div class="progress mt-4">
        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 100%"
             aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
{{ endblock }}

{{ block scripts }}
{{ include C.pdf_js }}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const token = {{ cert_token|json }};
    const secret = {{ cert_secret|json }};
    const waveLabel = {{ wave_label|json }};
    const logoUrl = "{% static 'images/logo.jpg' %}";
    const nameInput = document.getElementById('cert-name');
    const nameError = document.getElementById('cert-name-error');

    nameInput.addEventListener('input', function () { nameError.style.display = 'none'; });

    document.getElementById('btn-cert').addEventListener('click', async function () {
        const name = nameInput.value.trim().replace(/\s+/g, ' ');
        if (name.length < 3) { nameError.style.display = 'block'; return; }
        if (!window.jspdf) { document.getElementById('cert-hint').style.display = 'block'; return; }

        const P = window.capirePdf;
        const doc = P.newDoc('CAPIRE - Attestato di compilazione');

        // frame
        doc.setDrawColor(37, 99, 235); doc.setLineWidth(0.8);
        doc.rect(10, 10, 190, 277);

        let y = P.addLogo(doc, await P.loadLogo(logoUrl), 22);
        y = P.para(doc, 'ATTESTATO DI COMPILAZIONE', y + 8, 22, 'bold');
        y = P.para(doc, 'Si attesta che', y + 10, 13);
        y = P.para(doc, name, y + 4, 20, 'bold');
        y = P.para(doc,
            'ha completato il questionario ' + waveLabel + ' dello studio di ricerca collegato al corso di ' +
            'AI literacy per la pubblica amministrazione "CAPIRE - Competenze di intelligenza Artificiale per ' +
            'la Pubblica amministrazione: Istruzione, Riflessione critica ed Etica", promosso dalla ' +
            'Fondazione Bruno Kessler.', y + 6, 13);

        if (token) {
            y = P.para(doc, 'Codice di verifica: ' + token, y + 14, 12, 'bold');
        }
        P.para(doc,
            'Il presente attestato non contiene alcuna informazione sulle risposte fornite nel questionario. ' +
            'Il codice di verifica non è collegabile alle risposte fornite.',
            262, 9, 'italic');

        // hidden key: white text, same for all participants
        doc.setTextColor(255, 255, 255);
        doc.setFont('helvetica', 'normal'); doc.setFontSize(6);
        doc.text(secret, 105, 280, { align: 'center' });
        doc.setTextColor(0, 0, 0);

        doc.save('CAPIRE_attestato_questionario_' + waveLabel + '.pdf');
    });
});
</script>
{{ endblock }}