{% extends "custom_field.tpl.html" %}
<!-- $Id: custom_field_date_flot.tpl.html,v 1.1 2026/03/16 13:05:15 rtigero Exp $ -->

{% block field %}
<select id="{{ custom_field.NAME }}_0_date_type" name="{{ custom_field.NAME }}[0][date_type]" onchange="date_flottante_type_onchange('{{ custom_field.NAME }}_0');" class="pmb-input" aria-describedby="pmb-input-{{ custom_field.NAME }}-desc-error">
    {% for interval_type in custom_field.INTERVAL_TYPES %}
        <option value="{{ interval_type.value }}" {% if interval_type.value == custom_field.VALUES.0.date_type %}selected{% endif %}>{{ interval_type.lib }}</option>
    {% endfor %}
</select>

<span id="{{ custom_field.NAME }}_0_date_begin_zone">
    <label id="{{ custom_field.NAME }}_0_date_begin_zone_label" style="{% if custom_field.VALUES.0.date_type == 4 %}display: block;{% else %} display: none;{% endif %}">{{ msg.parperso_option_duration_entre }}</label>
    <input type="text" id="{{ custom_field.NAME }}_0_date_begin" name="{{ custom_field.NAME }}[0][date_begin]" value="{{ custom_field.VALUES.0.date_begin }}" placeholder="{{ msg.format_date_input_placeholder }}" maxlength="11" size="11" class="pmb-input" aria-describedby="pmb-input-{{ custom_field.NAME }}-desc-error">
</span>
<span id="{{ custom_field.NAME }}_0_date_end_zone" style="{% if custom_field.VALUES.0.date_type == 4 %}display: block;{% else %} display: none;{% endif %}">
    <label id="{{ custom_field.NAME }}_0_date_end_zone_label">{{ msg.parperso_option_duration_et }}</label>
    <input type="text" id="{{ custom_field.NAME }}_0_date_end" name="{{ custom_field.NAME }}[0][date_end]" value="{{ custom_field.VALUES.0.date_end }}" placeholder="{{ msg.format_date_input_placeholder }}" maxlength="11" size="11" class="pmb-input" aria-describedby="pmb-input-{{ custom_field.NAME }}-desc-error">
</span>
<label>{{ msg.parperso_option_duration_comment }}</label>
<input type="text" id="{{ custom_field.NAME }}_0_comment" name="{{ custom_field.NAME }}[0][comment]" value="{{ custom_field.VALUES.0.comment }}" class="saisie-30em pmb-input" aria-describedby="pmb-input-{{ custom_field.NAME }}-desc-error">
<button class="bouton pmb-input" type="button" onclick="date_flottante_reset_fields('{{ custom_field.NAME }}_0');" aria-describedby="pmb-input-{{ custom_field.NAME }}-desc-error">{{ msg.custom_fields_raz_button }}</button>

<script>
    function date_flottante_type_onchange(field_name) {
        var type = document.getElementById(field_name + '_date_type').value;
        switch(type) {
            case '4' : // interval date
                document.getElementById(field_name + '_date_begin_zone_label').style.display = '';
                document.getElementById(field_name + '_date_end_zone').style.display = '';
                break;
            case '0' : // vers
            case '1' : // avant
            case '2' : // après
            case '3' : // date précise
            default :
                document.getElementById(field_name + '_date_begin_zone_label').style.display = 'none';
                document.getElementById(field_name + '_date_end_zone').style.display = 'none';
                break;
        }
    }

    function date_flottante_reset_fields(field_name) {
        document.getElementById(field_name + '_date_begin').value = '';
        document.getElementById(field_name + '_date_end').value = '';
        document.getElementById(field_name + '_comment').value = '';
    }
</script>
{% endblock %}