/**
 * Widget admin scripts for Pawwell theme.
 *
 * @package pawwell
 */

jQuery(document).ready(function($) {

	function pawwellReindexAnnouncements(container) {
		container.find('.pawwell-announcement-item-field').each(function(idx) {
			$(this).find('input, select').each(function() {
				var name = $(this).attr('name');
				if (name) {
					name = name.replace(/\[announcements\]\[\d+\]/, '[announcements][' + idx + ']');
					$(this).attr('name', name);
				}
			});
		});
	}

	// Add new announcement.
	$(document).on('click', '.pawwell-announcement-add-btn', function(e) {
		e.preventDefault();
		var widgetForm = $(this).closest('.pawwell-announcement-widget-form');
		var itemsContainer = widgetForm.find('.pawwell-announcement-items');
		var fieldIndex = itemsContainer.find('.pawwell-announcement-item-field').length;

		var namePrefix = widgetForm.find('.pawwell-announcement-text-input').first().attr('name');
		if (namePrefix) {
			var baseNameMatch = namePrefix.match(/^(.*\[announcements\])\[\d+\]/);
			if (baseNameMatch) {
				var baseName = baseNameMatch[1];
			}
		}

		if (typeof baseName === 'undefined') {
			return;
		}

		// Build the icon select options.
		var iconOptions = ['none','truck','stethoscope','return','shield','zap','paw','gift','heart','clock','mail','phone','pin','star','check'];
		var iconSelectHtml = '<select name="' + baseName + '[' + fieldIndex + '][icon]" class="widefat pawwell-announcement-icon-select">';
		$.each(iconOptions, function(i, key) {
			var label = key.charAt(0).toUpperCase() + key.slice(1);
			iconSelectHtml += '<option value="' + key + '">' + label + '</option>';
		});
		iconSelectHtml += '</select>';

		var html = '<div class="pawwell-announcement-item-field">' +
			'<p><label>Icon:</label>' + iconSelectHtml + '</p>' +
			'<p><label>Text:</label>' +
			'<input type="text" name="' + baseName + '[' + fieldIndex + '][text]" class="widefat pawwell-announcement-text-input" placeholder="e.g. Free shipping on orders over $200"></p>' +
			'<button type="button" class="button pawwell-announcement-remove-btn" style="margin-bottom:10px;color:#d63639;">✕ Remove</button>' +
			'<hr style="margin:10px 0;border-top:1px solid #eee">' +
			'</div>';

		itemsContainer.append(html);
	});

	// Remove announcement.
	$(document).on('click', '.pawwell-announcement-remove-btn', function(e) {
		e.preventDefault();
		var widgetForm = $(this).closest('.pawwell-announcement-widget-form');
		$(this).closest('.pawwell-announcement-item-field').fadeOut(200, function() {
			$(this).remove();
			pawwellReindexAnnouncements(widgetForm);
		});
	});

	// ── Footer About Widget ──

	// Logo upload.
	$(document).on('click', '.pawwell-logo-upload', function(e) {
		e.preventDefault();
		var button = $(this);
		var frame = wp.media({
			title: 'Select Footer Logo',
			button: { text: 'Use as Logo' },
			multiple: false
		});
		frame.on('select', function() {
			var attachment = frame.state().get('selection').first().toJSON();
			button.siblings('.pawwell-logo-id').val(attachment.id);
			button.siblings('.pawwell-logo-preview').html('<img src="' + attachment.url + '" style="max-width:100%;height:auto;border:1px solid #ddd;border-radius:4px;padding:4px;">').show();
			button.siblings('.pawwell-logo-remove').show();
		});
		frame.open();
	});

	// Logo remove.
	$(document).on('click', '.pawwell-logo-remove', function(e) {
		e.preventDefault();
		var button = $(this);
		button.siblings('.pawwell-logo-id').val('');
		button.siblings('.pawwell-logo-preview').hide();
		button.hide();
	});

	// ── Footer Contact Widget ──

	function pawwellReindexContactItems(container) {
		container.find('.pawwell-footer-contact-item-field').each(function(idx) {
			$(this).find('input, select').each(function() {
				var name = $(this).attr('name');
				if (name) {
					name = name.replace(/\[items\]\[\d+\]/, '[items][' + idx + ']');
					$(this).attr('name', name);
				}
			});
		});
	}

	// Add new contact item.
	$(document).on('click', '.pawwell-footer-contact-add-btn', function(e) {
		e.preventDefault();
		var widgetForm = $(this).closest('.pawwell-footer-contact-widget-form');
		var itemsContainer = widgetForm.find('.pawwell-footer-contact-items');
		var fieldIndex = itemsContainer.find('.pawwell-footer-contact-item-field').length;

		var namePrefix = widgetForm.find('.pawwell-footer-contact-text-input').first().attr('name');
		var baseName;
		if (namePrefix) {
			var baseNameMatch = namePrefix.match(/^(.*\[items\])\[\d+\]/);
			if (baseNameMatch) {
				baseName = baseNameMatch[1];
			}
		}

		if (typeof baseName === 'undefined') {
			return;
		}

		var iconOptions = ['none','pin','phone','mail','clock','user','globe'];
		var iconSelectHtml = '<select name="' + baseName + '[' + fieldIndex + '][icon]" class="widefat pawwell-footer-contact-icon-select">';
		$.each(iconOptions, function(i, key) {
			var label = key.charAt(0).toUpperCase() + key.slice(1);
			iconSelectHtml += '<option value="' + key + '">' + label + '</option>';
		});
		iconSelectHtml += '</select>';

		var html = '<div class="pawwell-footer-contact-item-field">' +
			'<p><label>Icon:</label>' + iconSelectHtml + '</p>' +
			'<p><label>Text:</label>' +
			'<input type="text" name="' + baseName + '[' + fieldIndex + '][text]" class="widefat pawwell-footer-contact-text-input" placeholder="e.g. 123 Pet Care Ave, San Francisco"></p>' +
			'<button type="button" class="button pawwell-footer-contact-remove-btn" style="margin-bottom:10px;color:#d63639;">✕ Remove</button>' +
			'<hr style="margin:10px 0;border-top:1px solid #eee">' +
			'</div>';

		itemsContainer.append(html);
	});

	// Remove contact item.
	$(document).on('click', '.pawwell-footer-contact-remove-btn', function(e) {
		e.preventDefault();
		var widgetForm = $(this).closest('.pawwell-footer-contact-widget-form');
		$(this).closest('.pawwell-footer-contact-item-field').fadeOut(200, function() {
			$(this).remove();
			pawwellReindexContactItems(widgetForm);
		});
	});
});
