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

{% block content %}
<style>
    .code-input {
        font-size: 1.6rem;
        font-weight: 600;
        letter-spacing: .25em;
        text-align: center;
        text-transform: uppercase;
        max-width: 7rem;
    }
    /* labels of different length: push the inputs to the same baseline */
    .code-part { margin-bottom: 1rem; display: flex; flex-direction: column; }
    .code-part label { font-weight: 500; flex-grow: 1; display: flex; align-items: flex-end; }
    .code-part .form-control.is-invalid { border-color: #dc3545; }
</style>

<div class="container">
    <h2>Codice personale</h2>

    <div class="card mb-4 bg-light">
        <div class="card-body">
            <p class="fs-5">
                Come prima cosa le chiediamo di comporre il suo <strong>codice personale</strong>. Il codice serve
                esclusivamente a collegare le risposte che darà in questo questionario con quelle del questionario
                successivo.
            </p>
            <p>Istruzioni per crearlo:</p>
            <ol>
                <li>le <strong>ultime due lettere</strong> del cognome da nubile di sua madre;</li>
                <li>il suo <strong>giorno di nascita</strong> in due cifre (per giorni con una sola cifra metta uno
                    zero davanti, es. 06);</li>
                <li>le <strong>prime due lettere</strong> del nome di suo padre.</li>
            </ol>
            <p class="mb-1"><strong>Esempio:</strong></p>
            <ul class="mb-2">
                <li>se il cognome da nubile di sua madre è Ros<u>si</u>, scriva <strong>SI</strong>;</li>
                <li>se è nato/a il <u>12</u>/06/1992, scriva <strong>12</strong> (se è nato/a il 6 dicembre, scriva
                    <strong>06</strong>);</li>
                <li>se il nome di suo padre è <u>Ma</u>rio, scriva <strong>MA</strong>.</li>
            </ul>
            <p>Il codice dell'esempio risulta essere <strong>SI12MA</strong>.</p>
        </div>
    </div>

    <div class="alert alert-info d-flex align-items-start" role="note">
        <div>
            <strong>Il codice non viene memorizzato.</strong>
            Per garantire la massima tutela della sua privacy, le informazioni inserite in questa pagina non vengono
            salvate: il sistema le converte istantaneamente in una chiave alfanumerica cifrata.
            Viene conservata unicamente questa chiave, con il solo scopo di collegare i due questionari.
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 code-part">
                    <label for="id_cod_madre" class="form-label">Ultime due lettere del cognome da nubile di sua madre</label>
                    <input type="text" class="form-control code-input {{ if form.cod_madre.errors }}is-invalid{{ endif }}"
                           id="id_cod_madre" name="cod_madre" maxlength="2" autocomplete="off"
                           autocapitalize="characters" spellcheck="false" data-kind="letters" required pattern="[A-Za-z]{2}"
                           title="Inserisca esattamente due lettere (le ultime due del cognome da nubile di sua madre).">
                    {{ formfield_errors 'cod_madre' }}
                </div>
                <div class="col-md-4 code-part">
                    <label for="id_cod_giorno" class="form-label">Giorno di nascita (due cifre, da 01 a 31)</label>
                    <input type="text" class="form-control code-input {{ if form.cod_giorno.errors }}is-invalid{{ endif }}"
                           id="id_cod_giorno" name="cod_giorno" maxlength="2" autocomplete="off"
                           inputmode="numeric" spellcheck="false" data-kind="digits" required pattern="0[1-9]|[12][0-9]|3[01]"
                           title="Inserisca il giorno di nascita con due cifre, da 01 a 31 (es. 06).">
                    {{ formfield_errors 'cod_giorno' }}
                </div>
                <div class="col-md-4 code-part">
                    <label for="id_cod_padre" class="form-label">Prime due lettere del nome di suo padre</label>
                    <input type="text" class="form-control code-input {{ if form.cod_padre.errors }}is-invalid{{ endif }}"
                           id="id_cod_padre" name="cod_padre" maxlength="2" autocomplete="off"
                           autocapitalize="characters" spellcheck="false" data-kind="letters" required pattern="[A-Za-z]{2}"
                           title="Inserisca esattamente due lettere (le prime due del nome di suo padre).">
                    {{ formfield_errors 'cod_padre' }}
                </div>
            </div>
            <p class="mb-0 mt-2">Il suo codice: <strong id="code-preview" class="fs-5" style="letter-spacing:.15em">______</strong></p>
        </div>
    </div>
</div>

{{ include C.next_progress }}

<script>
document.addEventListener('DOMContentLoaded', function () {
    const inputs = document.querySelectorAll('.code-input');
    const preview = document.getElementById('code-preview');

    function clean(input) {
        let v = input.value.normalize('NFD').replace(/\p{M}/gu, '');
        v = input.dataset.kind === 'digits' ? v.replace(/\D/g, '') : v.replace(/[^A-Za-z]/g, '').toUpperCase();
        input.value = v.slice(0, 2);
    }

    function updatePreview() {
        preview.textContent = Array.from(inputs)
            .map(i => (i.value + '__').slice(0, 2)).join('');
    }

    inputs.forEach(function (input) {
        input.addEventListener('input', function () {
            clean(input);
            input.classList.remove('is-invalid');
            updatePreview();
        });
        // day: pad a single digit on leaving the field (5 -> 05)
        if (input.dataset.kind === 'digits') {
            input.addEventListener('blur', function () {
                if (/^[1-9]$/.test(input.value)) input.value = '0' + input.value;
                updatePreview();
            });
        }
    });
    updatePreview();
});
</script>
{% endblock %}