jQuery(document).ready(function($) {
	let index = $('#preis-felder-wrapper .preis-felder').length;
	let isAdding = false; // Status, ob gerade ein neuer Preis hinzugefügt wird

	/**
	 * Schaltet das Akkordeon um.
	 */
	function toggleAccordion() {
		$('.preis-felder-header').off('click').on('click', function() {
			const content = $(this).next('.preis-felder-content');
			content.slideToggle();
			const icon = $(this).find('.icon');
			icon.text(icon.text() === '+' ? '-' : '+');
		});
	}

	// Akkordeon initialisieren.
	toggleAccordion();

	/**
	 * Schaltet den Zustand des "Preis hinzufügen" Buttons.
	 * @param {boolean} state true = deaktivieren, false = aktivieren.
	 */
	function toggleAddButtonState(state) {
		if (state) {
			$('#add-preis-btn').prop('disabled', true)
				.text('Bitte zuerst den aktuell hinzugefügten Preis anlegen und speichern!')
				.css({
					'background-color': 'red',
					'color': 'white',
					'cursor': 'not-allowed'
				});
		} else {
			$('#add-preis-btn').prop('disabled', false)
				.text('Weiteren Preis anlegen')
				.css({
					'background-color': 'green',
					'color': 'white',
					'cursor': 'pointer'
				});
		}
	}

	// Neuen Preis hinzufügen
	$('#add-preis-btn').click(function() {
		if (isAdding) {
			return;
		}
		isAdding = true;
		toggleAddButtonState(true);

		const neuerPreis = `
<div class="preis-felder">
	<div class="preis-felder-header" style="background-color: #e2fb64; color: white;">
		<span>Hier weiteren Preis anlegen</span>
		<span class="icon">+</span>
	</div>
	<div class="preis-felder-content" style="display:none;">
		<label>Preis:</label><br>
		<input type="text" name="boxyfy_weitere_preise[\${index}][preis]" /><br>

		<label>Shop:</label><br>
		<input type="text" name="boxyfy_weitere_preise[\${index}][shop]" /><br>

		<label>Link:</label><br>
		<input type="text" name="boxyfy_weitere_preise[\${index}][link]" /><br>

		<label>Logo hochladen:</label><br>
<input type="hidden"
       name="boxyfy_weitere_preise[${index}][logo]"
       class="logo-field" />
<button type="button" class="button upload-logo-button">Logo auswählen</button><br>
<img src=""
     class="logo-preview hidden"
     style="max-width:100px;margin-top:6px;" />
<br>


		<label>Rabatt:</label><br>
		<input type="text" name="boxyfy_weitere_preise[\${index}][rabatt]" placeholder="z. B. 10% Rabatt" /><br>

		<label>Versandkosten (inkl.):</label><br>
		<input type="text" name="boxyfy_weitere_preise[\${index}][inkl_versandkosten]" placeholder="z. B. 4,99" /><br>

		<label>Versandkosten (zzgl.):</label><br>
		<input type="text" name="boxyfy_weitere_preise[\${index}][zzgl_versandkosten]" placeholder="z. B. 4,99" /><br>

		<input type="checkbox" name="boxyfy_weitere_preise[\${index}][versandkosten_kostenfrei]" value="1" />
		<label>Kostenfreie Lieferung</label><br>

		<button type="button" class="save-preis-btn">Preis speichern</button>
		<button type="button" class="remove-preis-btn">Preis entfernen</button>
	</div>
</div>
`;

		const html = neuerPreis.replace(/\${index}/g, index);
		$('#preis-felder-wrapper').append(html);
		index++;
		toggleAccordion();
	});

	// Preis-Felder entfernen
	$('#preis-felder-wrapper').on('click', '.remove-preis-btn', function() {
		$(this).closest('.preis-felder').remove();
		isAdding = false;
		toggleAddButtonState(false);
	});

	// Preis speichern (Formular absenden) und Status zurücksetzen
	$('#preis-felder-wrapper').on('click', '.save-preis-btn', function() {
		$('#post').submit();
		isAdding = false;
		toggleAddButtonState(false);
	});

	// Klick auf "Logo auswählen"
	$('#preis-felder-wrapper').on('click', '.upload-logo-button', function (e) {
	e.preventDefault();

	const $container = $(this).closest('.preis-felder');
	const $field     = $container.find('.logo-field');
	const $preview   = $container.find('.logo-preview');

	// eigenen Frame pro Klick erstellen, so wird immer die richtige Box aktualisiert
	const frame = wp.media({
		title: 'Wähle ein Logo',
		button: { text: 'Auswählen' },
		multiple: false
	});

	frame.on('select', function () {
		const attachment = frame.state().get('selection').first().toJSON();
		$field.val(attachment.url);
		$preview.attr('src', attachment.url).removeClass('hidden').show();
	});

	frame.open();
});

});
