{% extends "custom_field.tpl.html" %}
<!-- $Id: custom_field_date_inter.tpl.html,v 1.1.2.2 2026/03/16 13:14:16 rtigero Exp $ -->

{% block field %}
<div id="div_{{ custom_field.NAME }}">
	{% for value in custom_field.VALUES %}
		<div id="{{ custom_field.NAME }}_{{ custom_field.ID }}_begin_{{ loop.counter0 }}">
			<label for="{{ custom_field.NAME }}[{{ loop.counter0 }}][date_begin]" class="pmb-label">{{ msg.custom_field_inter_start }}</label>
			<input type="date" name="{{ custom_field.NAME }}[{{ loop.counter0 }}][date_begin]" value="{{ value.date_begin }}">
			<input type="time" name="{{ custom_field.NAME }}[{{ loop.counter0 }}][time_begin]" value="{{ value.time_begin }}">
		</div>
		<div id="{{ custom_field.NAME }}_{{ custom_field.ID }}_end_{{ loop.counter0 }}">
			<label for="{{ custom_field.NAME }}[{{ loop.counter0 }}][date_begin]" class="pmb-label">{{ msg.custom_field_inter_end }}</label>
			<input type="date" name="{{ custom_field.NAME }}[{{ loop.counter0 }}][date_end]" value="{{ value.date_end }}">
			<input type="time" name="{{ custom_field.NAME }}[{{ loop.counter0 }}][time_end]" value="{{ value.time_end }}">
		</div>
		<button type="button" class="bouton" title="{{ msg.custom_field_date_inter_del_date }}" onclick="delete_date_{{ custom_field.NAME }}({{ loop.counter0 }})">
			<span aria-hidden="true">{{ msg.custom_fields_raz_button }}</span>
		</button>
	{% endfor %}
	<input id="customfield_date_interval_{{ custom_field.ID }}" type="hidden" name="customfield_date_interval_{{ custom_field.ID }}" value="{{ custom_field.VALUES | length }}" class="pmb-input" aria-describedby="pmb-input-{{ custom_field.NAME }}-desc-error">
	{% if custom_field.REPEATABLE == "1" %}
		<button type="button" id="button_add_{{ custom_field.NAME }}_{{ custom_field.ID }}" name="" class="bouton" onclick="add_custom_date_inter_('{{ custom_field.ID }}', '{{ custom_field.NAME }}')" aria-label="{{ msg.custom_fields_add_aria_label | printf custom_field.TITRE }}">{{ msg.custom_fields_add_button }}</button>
	{% endif %}
</div>

<script>
if(typeof use_dojo_calendar == "undefined") {
	var use_dojo_calendar = 0;
}

{% if custom_field.REPEATABLE != '1' and '1' == custom_field.VALUES | length %}
	window.addEventListener('load', function() {
		set_default_date_values("{{ custom_field.NAME }}", "{{ custom_field.ID }}", "0");
	});
{% endif %}

window["delete_date_{{ custom_field.NAME }}"] = function(index) {
    // Réinitialiser tous les champs pour ce field
    const fieldBase = "{{ custom_field.NAME }}";
    const fieldId = "{{ custom_field.ID }}";

    // Réinitialiser date et time begin
    const beginDate = document.getElementById(fieldBase + '_' + fieldId + '_begin_' + index).querySelector('input[type="date"]');
    const beginTime = document.getElementById(fieldBase + '_' + fieldId + '_begin_' + index).querySelector('input[type="time"]');
    if (beginDate) beginDate.value = "";
    if (beginTime) beginTime.value = "";

    // Réinitialiser date et time end
    const endDate = document.getElementById(fieldBase + '_' + fieldId + '_end_' + index).querySelector('input[type="date"]');
    const endTime = document.getElementById(fieldBase + '_' + fieldId + '_end_' + index).querySelector('input[type="time"]');
    if (endDate) endDate.value = "";
    if (endTime) endTime.value = "";
}

function set_default_date_values(field_name, field_id, index) {
    const defaultValue = get_date_default_value();

    // Appliquer la valeur par défaut aux champs date begin et end
    const beginDate = document.getElementById(field_name + '_' + field_id + '_begin_' + index).querySelector('input[type="date"]');
    const endDate = document.getElementById(field_name + '_' + field_id + '_end_' + index).querySelector('input[type="date"]');

    if (beginDate && defaultValue) beginDate.value = defaultValue;
    if (endDate && defaultValue) endDate.value = defaultValue;
}


function get_date_default_value() {
    let value = "";
    if("{{ custom_field.DEFAULT_TODAY }}" != "yes") {
        value = new Date().toISOString().split('T')[0];
    }
    return value;
}

{% if custom_field.REPEATABLE == "1" %}
	function add_custom_date_inter_(field_id, field_name) {
		const count = document.getElementById('customfield_date_interval_'+field_id).value;
		const nodeContainer = document.getElementById("div_" + field_name);
		const buttonAdd = document.getElementById('button_add_' + field_name + '_' + field_id);

		// Créer un nouveau conteneur pour cette instance
		const newFieldDiv = document.createElement('div');
		newFieldDiv.id = field_name + '_' + field_id + '_instance_' + count;

		// Créer les champs date/time begin
		const beginDiv = document.createElement('div');
		beginDiv.id = field_name + '_' + field_id + '_begin_' + count;

		// Créer le label pour "Debut"
		const beginLabel = document.createElement('label');
		beginLabel.setAttribute('for', field_name + '[' + count + '][date_begin]');
		beginLabel.className = 'pmb-label';
		beginLabel.textContent = 'Debut :';

		const beginDate = document.createElement('input');
		beginDate.type = 'date';
		beginDate.name = field_name + '[' + count + '][date_begin]';
		beginDate.value = get_date_default_value();
		beginDate.className = 'pmb-input';

		const beginTime = document.createElement('input');
		beginTime.type = 'time';
		beginTime.name = field_name + '[' + count + '][time_begin]';
		beginTime.value = '';
		beginTime.className = 'pmb-input';

		beginDiv.appendChild(beginLabel);
		beginDiv.appendChild(beginDate);
		beginDiv.appendChild(beginTime);

		// Créer les champs date/time end
		const endDiv = document.createElement('div');
		endDiv.id = field_name + '_' + field_id + '_end_' + count;

		// Créer le label pour "Fin"
		const endLabel = document.createElement('label');
		endLabel.setAttribute('for', field_name + '[' + count + '][date_end]');
		endLabel.className = 'pmb-label';
		endLabel.textContent = 'Fin :';

		const endDate = document.createElement('input');
		endDate.type = 'date';
		endDate.name = field_name + '[' + count + '][date_end]';
		endDate.value = get_date_default_value();
		endDate.className = 'pmb-input';

		const endTime = document.createElement('input');
		endTime.type = 'time';
		endTime.name = field_name + '[' + count + '][time_end]';
		endTime.value = '';
		endTime.className = 'pmb-input';

		endDiv.appendChild(endLabel);
		endDiv.appendChild(endDate);
		endDiv.appendChild(endTime);

		// Créer le bouton de suppression
		const delButton = document.createElement('button');
		delButton.type = 'button';
		delButton.className = 'bouton';
		delButton.innerHTML = '<span aria-hidden="true">{{ msg.custom_fields_raz_button }}</span>';
		delButton.title = 'Supprimer cette date';
		delButton.onclick = function() {
			newFieldDiv.remove();
		};

		// Assembler le tout
		newFieldDiv.appendChild(beginDiv);
		newFieldDiv.appendChild(endDiv);
		newFieldDiv.appendChild(delButton);

		// Ajouter au conteneur principal
		nodeContainer.appendChild(newFieldDiv);

		// Remettre le bouton add à la fin s'il existe
		if (buttonAdd) {
			nodeContainer.appendChild(buttonAdd);
		}

		// Ajouter un saut de ligne
		const br = document.createElement('br');
		nodeContainer.appendChild(br);

		// Incrémenter le compteur
		document.getElementById('customfield_date_interval_'+field_id).value = parseInt(count) + 1;
	}
{% endif %}
</script>
{% endblock %}