{% extends 'rgaa_profil.tpl.html' %}
<!-- $Id: rgaa_subscribe.tpl.html,v 1.13 2026/09/10 11:39:28 dgoron Exp $ -->

{% block intro %}
    {% if empr.id_empr %}
    {% else %}
    	<h1 class='subs_intro_services'>{{ msg.subs_intro_services_title }}</h1>
        <p>{{ msg.subs_intro_services }}</p>
        <h2 class='subs_intro_explication'>{{ msg.subs_intro_explication_title }}</h2>
        <p>{{ msg.subs_intro_explication | replace '!!nb_h_valid!!' empr.opac_websubscribe_valid_limit }}</p>
    {% endif %}
{% endblock %}

{% block profil_form %}
    <form name='empr_form' id="empr_form" method='POST' action='./subscribe.php?subsact=inscrire'>
        <div class="pmb-form">
            {% if empr.id_empr %}
                <h2 class="visually-hidden">{{ msg.empr_change_profil }}</h2>
            {% else %}
                <h2 class="visually-hidden">{{ msg.empr_add_account }}</h2>
            {% endif %}
{% endblock %}

{% block empr_nom %}
    {% if empr.renewal_form_fields.empr_nom.display %}
        <div id="pmb-input-group-nom" class="pmb-input-group pmb-empr-nom {% if !empr.renewal_form_fields.empr_nom.alterable %}pmb-input-disabled{% endif %}">
            <label for="empr_nom" class="pmb-label {% if empr.renewal_form_fields.empr_nom.mandatory %}pmb-input-mandatory{% endif %}">
                {{ msg.subs_f_nom }}
                {% if empr.renewal_form_fields.empr_nom.mandatory %} *{% endif %}
                {% if empr.renewal_form_fields.empr_nom.explanation %}
                    <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_nom.explanation }}</span>
                {% endif %}
            </label>
            <input autocomplete="family-name" class="pmb-input" id="empr_nom" name="{{ prefix_name }}nom{{ suffix_name }}" type="text" value="{{ empr.empr_nom }}" {% if empr.renewal_form_fields.empr_nom.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_nom.alterable %}readonly {% endif %} aria-describedby="pmb-input-nom-desc-error" />
            <p id="pmb-input-nom-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
        </div>
    {% endif %}
{% endblock %}

{% block empr_prenom %}
    {% if empr.renewal_form_fields.empr_prenom.display %}
        <div id="pmb-input-group-prenom" class="pmb-input-group pmb-empr-prenom {% if !empr.renewal_form_fields.empr_prenom.alterable %}pmb-input-disabled{% endif %}">
            <label for="empr_prenom" class="pmb-label {% if empr.renewal_form_fields.empr_prenom.mandatory %}pmb-input-mandatory{% endif %}">
                {{ msg.subs_f_prenom }}
                {% if empr.renewal_form_fields.empr_prenom.mandatory %} *{% endif %}
                {% if empr.renewal_form_fields.empr_prenom.explanation %}
                    <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_prenom.explanation }}</span>
                {% endif %}
            </label>
            <input autocomplete="given-name" class="pmb-input" id="empr_prenom" name="{{ prefix_name }}prenom{{ suffix_name }}" type="text" value="{{ empr.empr_prenom }}" {% if empr.renewal_form_fields.empr_prenom.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_prenom.alterable %}readonly {% endif %} aria-describedby="pmb-input-prenom-desc-error" />
            <p id="pmb-input-prenom-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
        </div>
    {% endif %}
{% endblock %}

{% block empr_mail %}
    <div id="pmb-input-group-mail" class="pmb-input-group pmb-empr-mail {% if !empr.renewal_form_fields.empr_mail.alterable %}pmb-input-disabled{% endif %}">
        <label for="empr_mail" class="pmb-label {% if empr.renewal_form_fields.empr_mail.mandatory %}pmb-input-mandatory{% endif %}">
            {{ msg.subs_f_email }}
            {% if empr.renewal_form_fields.empr_mail.mandatory %} *{% endif %}
            {% if empr.renewal_form_fields.empr_mail.explanation %}
                <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_mail.explanation }}</span>
            {% endif %}
        </label>
        <input autocomplete="email" class="pmb-input" id="empr_mail" name="{{ prefix_name }}mail{{ suffix_name }}" type="email" value="{{ empr.empr_mail.0 }}" {% if empr.renewal_form_fields.empr_mail.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_mail.alterable %}readonly {% endif %} aria-describedby="pmb-input-mail-desc-error" />
        <p id="pmb-input-mail-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
    </div>
{% endblock %}

{% block empr_login %}
    <div id="pmb-input-group-login" class="pmb-input-group pmb-empr-login">
        <label for="empr_login" class="pmb-label pmb-input-mandatory">
            {{ msg.subs_f_login }} *
            {% if empr.renewal_form_fields.empr_login.explanation %}
                <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_login.explanation }}</span>
            {% endif %}
        </label>
        <input class="pmb-input" id="empr_login" name="{{ prefix_name }}login{{ suffix_name }}" type="text" value="{{ empr.empr_login }}" autocomplete="username" required aria-describedby="pmb-input-login-desc-error" />
        <p id="pmb-input-login-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
    </div>

    <div id="pmb-input-group-password" class="pmb-input-group pmb-empr-password">
        <label for="empr_password" class="pmb-label pmb-input-mandatory">
            {{ msg.subs_f_password }} *
            {% if empr.renewal_form_fields.empr_password.explanation %}
                <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_password.explanation }}</span>
            {% endif %}
        </label>
        <div class="pmb-input-container">
            <input class="pmb-input" id="empr_password" name="{{ prefix_name }}password{{ suffix_name }}" type="password" value="" autocomplete="new-password" required aria-describedby="pmb-input-password-desc-error" />
            <button title='{{ msg.show_password }}' class="btn-icon" type="button" onclick='toggle_password(this.children[0], "empr_password");' role="switch" aria-checked="false">
                <i class='fa fa-eye' aria-hidden="true"></i>
            </button>
        </div>
        <p id="pmb-input-password-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
        <div id="pmb-input-password-conditions-announcer" class="visually-hidden" aria-live="polite"></div>
    </div>

    <div id="pmb-input-group-passwordv" class="pmb-input-group pmb-empr-passwordv">
        <label for="empr_passwordv" class="pmb-label pmb-input-mandatory">
            {{ msg.subs_f_passwordv }} *
            {% if empr.renewal_form_fields.empr_passwordv.explanation %}
                <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_passwordv.explanation }}</span>
            {% endif %}
        </label>
        <div class="pmb-input-container">
            <input class="pmb-input" id="empr_passwordv" name="{{ prefix_name }}passwordv{{ suffix_name }}" type="password" value="" autocomplete="new-password" required aria-describedby="pmb-input-passwordv-desc-error" />
            <button title="{{ msg.show_password }}" class="btn-icon" type="button" onclick='toggle_password(this.children[0], "empr_passwordv");' role="switch" aria-checked="false">
                <i class='fa fa-eye' aria-hidden="true"></i>
            </button>
        </div>
        <p id="pmb-input-passwordv-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
    </div>
{% endblock %}

{% block profil_buttons %}
            <div class='clear'></div>
            <div class="pmb-form-actions">
                <div class="pmb-input-group pmb-consent-group">
                    <input type='checkbox' required id='empr_consent_message' name='{{ prefix_name }}consent_message{{ suffix_name }}' value='1' class="pmb-checkbox" />
                    <label for='empr_consent_message' class="pmb-label pmb-checkbox-label">{{ msg.subs_f_consent_message }}</label>
                </div>
                <input type='submit' class='bouton pmb-submit-button' value="{{ msg.subs_bouton_form }}" />
            </div>
        </div>
    </form>
{% endblock %}

{% block profil_script %}
{% endblock %}

{% block empr_location %}
    {% if empr.renewal_form_fields.empr_location.display %}
        <div id="pmb-input-group-location" class="pmb-input-group pmb-empr-location {% if !empr.renewal_form_fields.empr_location.alterable %}pmb-input-disabled{% endif %}">
            <label for="empr_location" class="pmb-label {% if empr.renewal_form_fields.empr_location.mandatory %}pmb-input-mandatory{% endif %}">
                {{ msg.profil_empr_location }}
                {% if empr.renewal_form_fields.empr_location.mandatory %} *{% endif %}
                {% if empr.renewal_form_fields.empr_location.explanation %}
                    <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_location.explanation }}</span>
                {% endif %}
            </label>
            {% sqlvalue locations %}
                select idlocation as id, location_libelle as libelle from docs_location where location_visible_opac=1 order by location_libelle
            {% endsqlvalue %}
            <select class="pmb-input" id="empr_location" name="{{ prefix_name }}location{{ suffix_name }}" {% if empr.renewal_form_fields.empr_location.mandatory %}required{% endif %} {% if !empr.renewal_form_fields.empr_location.alterable %}disabled onclick="return false;"{% endif %} aria-describedby="pmb-input-location-desc-error">
                {% for location in locations %}
                    <option value="{{ location.id }}"{% if empr.empr_location == location.id %}selected="selected"{% else %}{%if global.opac_websubscribe_empr_location ==  location.id %}selected="selected"{% endif %}{% endif %}>{{ location.libelle }}</option>
                {% endfor %}
            </select>
            <p id="pmb-input-location-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
        </div>
    {% endif %}
{% endblock %}

{% block mail_script %}
{% endblock %}

{% block username_with_mail_script %}
	<script>
		document.addEventListener('DOMContentLoaded', () => {
			const REPLACE_WITH_MAIL = '{{ global.empr_username_with_mail }}';

			const empr_login = document.getElementById('empr_login');
			const empr_mail = document.getElementById('empr_mail');

			if (empr_login && empr_mail && REPLACE_WITH_MAIL == 1) {
				empr_login.readOnly = true;
				empr_mail.addEventListener('input', () => empr_login.value = empr_mail.value);
			}
		});
	</script>
{% endblock %}

{% block check_subscribe_script %}
    <script>
        function check_empr_password(empr_password) {
            //let empr_password = document.getElementById('empr_password').value;
            let error = false;
            //let helper = document.getElementById('empr_password_helper');
            let helper_msg = '';

            let r = new RegExp("{{ global.opac_websubscribe_password_regexp }}");
            if(false == r.test(empr_password)) {
                helper_msg = '{{ msg.empr_password_bad_security | escape }}';
                error = true;
            }
            if(!error) {
                let empr_passwordv =  document.getElementById('empr_passwordv').value;
                if(empr_password != empr_passwordv) {
                    helper_msg = '{{ msg.subs_form_bad_passwords | escape }}';
                    error = true;
                }
            }
            //helper.innerHTML = helper_msg;

            // Integrate with universal validation system
            setFieldState('empr_password', !error, helper_msg);
            setFieldState('empr_passwordv', !error, helper_msg);

            return !error;
        }

        function check_empr_mail() {
            let empr_mail = document.getElementById('empr_mail').value;
            let error = false;
            let helper = document.getElementById('empr_mail_helper');
            let helper_msg = '';

            if(!is_valid_mail(empr_mail)) {
                helper_msg = '{{ msg.subs_mail_error | escape }}';
                error = true;
            }
            if(!error) {
                let xhr = new http_request();
                let url = "./ajax.php?module=ajax&categ=empr&sub=check_mail_uniqueness&query_id_empr={{ id_empr }}&query_empr_mail="+empr_mail;
                url = encodeURI(url);
                xhr.request(url, );

                if(1 != xhr.get_text()) {
                    helper_msg = '{{ msg.subs_mail_allready_used_error | escape }}';
                    error = true;
                }
            }
            helper.innerHTML = helper_msg;

            // Integrate with universal validation system
            setFieldState('empr_mail', !error);

            return !error;
        }

    </script>
{% endblock %}

{% block check_script %}
    <script>
        var enabled_password_rules = {{ password_rules }};

        function check_before_submit(e) {
            if (!check_empr_login()) {
                e.preventDefault();
                e.stopPropagation();
                return;
            };
            if(!check_empr_password()) {
                e.preventDefault();
                e.stopPropagation();
                return;
            }
            if(!check_empr_mail()) {
                e.preventDefault();
                e.stopPropagation();
                return;
            }
        }

        function check_new_password(new_password) {
            //let new_password = document.getElementById('empr_password').value;
            let nb_rules = enabled_password_rules.length;
            let error_msg = [];
            let password_enabled = true;

            if(0 == nb_rules) {
                return password_enabled;
            }

            for(let i = 0; i < nb_rules; i++) {
                let rule = enabled_password_rules[i];
                switch (rule.type) {
                    case 'class' :
                        if( '' != rule.value) {
                            if(rule.value == new_password) {
                                error_msg.push(rule.error_msg);
                                password_enabled = false;
                            }
                        }
                        break;
                    case 'regexp' :
                        if( '' != rule.regexp ) {
                            let regexp = new RegExp(rule.regexp);
                            if( !regexp.test(new_password) ) {
                                error_msg.push(rule.error_msg);
                                password_enabled = false;
                            }
                        }
                        break;
                }
            }

            /*if(true == password_enabled) {
                setFieldState('empr_password', true);
                return true;
            }*/

            let helper_msg = "";

            if(error_msg.length) {
                helper_msg = error_msg.join('<br />');
            }
            setFieldState('empr_password', error_msg.length == 0, helper_msg);
            announce_password_conditions(error_msg);
            return false;
        }

        // Annonce (aria-live) des conditions de mot de passe restant a valider,
        // separement du message d'erreur visible (qui reste affiche tant que
        // le mot de passe est invalide). La zone est videe 2 secondes apres la
        // derniere frappe, sauf si une nouvelle frappe la met a jour avant.
        let password_announce_timeout = null;
        function announce_password_conditions(remaining_conditions) {
            let announcer = document.getElementById('pmb-input-password-conditions-announcer');
            if (!announcer) {
                return;
            }
            clearTimeout(password_announce_timeout);
            if (remaining_conditions.length) {
                announcer.textContent = remaining_conditions.join('. ');
                password_announce_timeout = setTimeout(function() {
                    announcer.textContent = '';
                }, 2000);
            } else {
                announcer.textContent = '';
            }
        }

        // Universal validation system from rgaa_profil
        function setFieldState(fieldId, isValid, errorMessage = '') {
            let errorElementId;
            let inputGroupId;

            // Handle personal fields (those that don't start with empr_)
            if (fieldId.startsWith("pmb_")) {
                const fieldName = fieldId.replace("pmb_", "");
                errorElementId = "pmb-input-" + fieldName + "-desc-error";
                inputGroupId = "pmb-input-group-" + fieldName;
            } else {
                const fieldName = fieldId.replace("empr_", "");
                errorElementId = "pmb-input-" + fieldName + "-desc-error";
                inputGroupId = "pmb-input-group-" + fieldName;
            }

            const errorElement = document.getElementById(errorElementId);
            const inputGroup = document.getElementById(inputGroupId);

            if (!errorElement || !inputGroup) return;

            // Retirer les classes existantes
            inputGroup.classList.remove('pmb-input-error', 'pmb-input-success');
            if (isValid) {
                errorElement.textContent = "";
                inputGroup.classList.add('pmb-input-success');
                errorElement.classList.add('visually-hidden');
            } else {
                errorElement.textContent = errorMessage || getErrorMessage(fieldId);
                inputGroup.classList.add('pmb-input-error');
                errorElement.classList.remove('visually-hidden');
            }
        }

        function validate_empr_login(login) {
            return check_empr_login();
        }

        function validate_empr_password(password) {
            return check_new_password(password);
        }

        function validate_empr_passwordv(passwordv) {
            return check_empr_password(passwordv);
        }

        function getErrorMessage(fieldId) {
            let text = "";
            switch(fieldId) {
                case "empr_cp":
                    text = "{{ msg.profil_empr_cp_validation_failed }}";
                    break;
                case "empr_tel1":
                case "empr_tel2":
                    text = "{{ msg.profil_empr_tel_validation_failed }}";
                    break;
                case "empr_year":
                    text = "{{ msg.profil_empr_year_validation_failed }}";
                    break;
                default:
                    return "";
            }
            //On html_entity_decode comme on peut
            let textarea = document.createElement('textarea');
            textarea.innerHTML = text;
            return textarea.value;
        }

        // Fonctions de validation pour chaque type de champ

        function validate_empr_tel1(phone) {
            const phoneRegex = new RegExp("^[\\d\\s\\.\\+\\(\\)-]+$");
            return phoneRegex.test(phone) && phone.replace(/\D/g, '').length >= 10;
        }

        function validate_empr_tel2(phone) {
            return validate_empr_tel1(phone);
        }

        function validate_empr_year(year) {
            const currentYear = new Date().getFullYear();
            const yearNum = parseInt(year);
            return yearNum >= 1900 && yearNum <= currentYear && yearNum.toString() === year;
        }

        function validate_empr_cp(cp) {
            const cpRegex = new RegExp("^\\d{5}$");
            return cpRegex.test(cp);
        }

        // Validation en temps reel pour les champs principaux
        function setupFieldValidation() {
            //const fields = ['empr_nom', 'empr_prenom', 'empr_mail', 'empr_tel1', 'empr_tel2', 'empr_year', 'empr_cp', 'empr_ville'];
            const fields = ['empr_tel1', 'empr_tel2', 'empr_year', 'empr_cp', 'empr_mail', 'empr_login', 'empr_password', 'empr_passwordv'];
            for(let field of fields) {
                let element = document.getElementById(field);
                //Pas besoin de valider les champs en readonly
                if(element && ! element.hasAttribute("readonly")) {
                    //On vérifie a chaque input
                    element.addEventListener('input', function() {
                        validateField(field, this.value);
                    });
                    //Et au chargement
                    validateField(field, element.value);
                }
            }
        }

        function validateField(field, value) {
            let isValid = true;
            //On cherche la fonction de verification spécifique
            if(typeof window["validate_" + field] == "function") {
                isValid = isValid && window["validate_" + field](value);
            }
            setFieldState(field, isValid);
        }

        window.addEventListener('DOMContentLoaded', function() {
            setupFieldValidation();
        });

        let check_timeout = null;
        try {
            /*document.getElementById('empr_login').addEventListener('input',   function(e) {
                clearTimeout(check_timeout);
                check_timeout = setTimeout(function() {
                    check_empr_login();
                    const isValid = check_empr_login();
                    setFieldState('empr_login', isValid, isValid ? '' : document.getElementById('empr_login_helper').textContent);
                }, 1000);
            });
            document.getElementById('empr_password').addEventListener('input', function(e) {
                clearTimeout(check_timeout);
                check_timeout = setTimeout(function() {
                    check_new_password();
                }, 1000);
            });
            document.getElementById('empr_passwordv').addEventListener('input', function(e) {
                clearTimeout(check_timeout);
                check_timeout = setTimeout(function() {
                    check_empr_password();
                }, 1000);
            });
            document.getElementById('empr_mail').addEventListener('input', function(e) {
                clearTimeout(check_timeout);
                check_timeout = setTimeout(function() {
                    check_empr_mail();
                }, 1000);
            });*/
            document.getElementById('empr_form').addEventListener('submit', check_before_submit);
        } catch(err) {}

    </script>
{% endblock %}