jQuery(document).ready(function ($) {
    // Zähler für Vorteil- und Nachteil-Indizes
    let vorteilIndex = $('#vorteil-felder-wrapper .vor-nachteil-felder').length;
    let nachteilIndex = $('#nachteil-felder-wrapper .vor-nachteil-felder').length;

    // Funktion für Akkordeon-Effekt
    function toggleAccordion() {
        $('.vor-nachteil-felder-header').off('click').on('click', function () {
            let content = $(this).next('.vor-nachteil-felder-content');
            content.slideToggle();
            let icon = $(this).find('.icon');
            icon.text(icon.text() === '+' ? '-' : '+');
        });
    }
    toggleAccordion();

    // Vorteil hinzufügen
    $('#add-vorteil-btn').click(function () {
        let neuerVorteil = $(`
			<div class="vor-nachteil-felder">
				<div class="vor-nachteil-felder-header">
					<span class="feld-title">Vorteil ${vorteilIndex + 1}</span>
					<span class="icon">+</span>
				</div>
				<div class="vor-nachteil-felder-content" style="display: none;">
					<label for="boxyfy_produkt_vorteil_${vorteilIndex}">Vorteil:</label><br>
					<input type="text"
						   id="boxyfy_produkt_vorteil_${vorteilIndex}"
						   name="boxyfy_produkt_vorteile[${vorteilIndex}]" />
					<br>
					<button type="button" class="remove-feld-btn">Vorteil entfernen</button>
				</div>
			</div>
		`);
        $('#vorteil-felder-wrapper').append(neuerVorteil);
        vorteilIndex++;
        toggleAccordion();
        reindexVorteile();
    });

    // Nachteil hinzufügen
    $('#add-nachteil-btn').click(function () {
        let neuerNachteil = $(`
			<div class="vor-nachteil-felder">
				<div class="vor-nachteil-felder-header">
					<span class="feld-title">Nachteil ${nachteilIndex + 1}</span>
					<span class="icon">+</span>
				</div>
				<div class="vor-nachteil-felder-content" style="display: none;">
					<label for="boxyfy_produkt_nachteil_${nachteilIndex}">Nachteil:</label><br>
					<input type="text"
						   id="boxyfy_produkt_nachteil_${nachteilIndex}"
						   name="boxyfy_produkt_nachteile[${nachteilIndex}]" />
					<br>
					<button type="button" class="remove-feld-btn">Nachteil entfernen</button>
				</div>
			</div>
		`);
        $('#nachteil-felder-wrapper').append(neuerNachteil);
        nachteilIndex++;
        toggleAccordion();
        reindexNachteile();
    });

    // Feld entfernen
    $('#vorteil-felder-wrapper, #nachteil-felder-wrapper').on('click', '.remove-feld-btn', function (e) {
        e.preventDefault();
        $(this).closest('.vor-nachteil-felder').remove();
        reindexVorteile();
        reindexNachteile();
    });

    // Neu-Indexierung der Vorteile
    function reindexVorteile() {
        vorteilIndex = 0;
        $('#vorteil-felder-wrapper .vor-nachteil-felder').each(function () {
            vorteilIndex++;
            $(this).find('.feld-title').text('Vorteil ' + vorteilIndex);
            $(this).find('input').attr('id', 'boxyfy_produkt_vorteil_' + (vorteilIndex - 1));
            $(this).find('input').attr('name', 'boxyfy_produkt_vorteile[' + (vorteilIndex - 1) + ']');
        });
    }

    // Neu-Indexierung der Nachteile
    function reindexNachteile() {
        nachteilIndex = 0;
        $('#nachteil-felder-wrapper .vor-nachteil-felder').each(function () {
            nachteilIndex++;
            $(this).find('.feld-title').text('Nachteil ' + nachteilIndex);
            $(this).find('input').attr('id', 'boxyfy_produkt_nachteil_' + (nachteilIndex - 1));
            $(this).find('input').attr('name', 'boxyfy_produkt_nachteile[' + (nachteilIndex - 1) + ']');
        });
    }
});