<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

$mailchimp_info       = SftcyWordformConnectMailchimp::get_mailchimp_configured_info();
$mailchimp_api_key    = isset( $mailchimp_info['apiKey'] ) ? $mailchimp_info['apiKey'] : '';
$mailchimp_audience_id = isset( $mailchimp_info['audienceId'] ) ? $mailchimp_info['audienceId'] : '';
$mailchimp_audience_label = isset( $mailchimp_info['audienceLabel'] ) ? $mailchimp_info['audienceLabel'] : '';
?>
<!-- Start Mailchimp Configure Modal Form -->
<div id="MailchimpAPIModal" title="Mailchimp Connection Configure" class="" style="display: none;">
	<div class="wordform-connect-modal-quickstart">
		<strong>Quick setup:</strong> Enter the API key, load audiences, select one, then save. Manual Audience ID entry still works if needed.
	</div>
	<h5>How to configure Mailchimp connection</h5>
	<p>
		<a href="https://mailchimp.com/help/about-api-keys/" target="_blank" rel="noopener">Mailchimp API Key Help</a> |
		<a href="https://mailchimp.com/developer/marketing/api/list-members/" target="_blank" rel="noopener">Mailchimp Audience API Docs</a>
	</p>
	<div id="mailchimp-api-create-help" class="accordion">
		<h3>Step 1 - Create Mailchimp API key</h3>
		<div>
			<p>Open Mailchimp, go to <strong>Account</strong> -> <strong>Extras</strong> -> <strong>API keys</strong>, then create or copy an API key.</p>
		</div>

		<h3>Step 2 - Find Audience ID</h3>
		<div>
			<p>Open the audience you want to use and copy its <strong>Audience ID</strong> from the audience settings page.</p>
		</div>

		<h3>Step 3 - Save credentials here</h3>
		<div>
			<p>Paste the API key and Audience ID below, then click <strong>Save / Update</strong> in WordForm.</p>
		</div>

		<h3>Step 4 - Connect forms</h3>
		<div>
			<p>After saving, connect only the forms you want by using <strong>Select Form + Select Application + Create Connection</strong>. Mailchimp needs at least one valid email field in the form submission.</p>
		</div>
	</div>

	<div class="mailchimp-connection-input-elements-wrapper" style="display: flex; flex-direction:column;">
		<div class="wordform-mailchimp-app-feedback-msg"></div>
		<div>
			<label for="MailchimpApiKey">
				<span class="dashicons dashicons-admin-network" aria-hidden="true"></span>
				Mailchimp API Key
				<a class="wordform-field-help-link" href="https://mailchimp.com/help/about-api-keys/" target="_blank" rel="noopener" aria-label="How to get your Mailchimp API key">
					<span class="dashicons dashicons-editor-help" aria-hidden="true"></span>
				</a>
			</label><br/>
			<input type="text" id="MailchimpApiKey" name="mailchimp-api-key" class="mailchimp-api-key" value="<?php echo esc_attr( $mailchimp_api_key ); ?>" placeholder="yourapikey-us21">
		</div>

		<div>
			<label for="MailchimpAudienceId">
				<span class="dashicons dashicons-groups" aria-hidden="true"></span>
				Audience ID
				<a class="wordform-field-help-link" href="https://mailchimp.com/help/find-audience-id/" target="_blank" rel="noopener" aria-label="How to find your Mailchimp Audience ID">
					<span class="dashicons dashicons-editor-help" aria-hidden="true"></span>
				</a>
			</label><br/>
			<input type="text" id="MailchimpAudienceId" name="mailchimp-audience-id" class="mailchimp-audience-id" value="<?php echo esc_attr( $mailchimp_audience_id ); ?>" placeholder="a1b2c3d4e5">
			<input type="hidden" id="MailchimpAudienceLabel" class="mailchimp-audience-label" value="<?php echo esc_attr( $mailchimp_audience_label ); ?>">
		</div>

		<div class="wordform-connect-resource-actions">
			<button
				type="button"
				class="button button-secondary wordform-connect-fetch-app-resource-button"
				data-fetch-action="wordform_connect_fetch_mailchimp_audiences"
				data-feedback-selector=".wordform-mailchimp-app-feedback-msg"
				data-fields-config='[{"selector":".mailchimp-api-key","paramKey":"mailchimpApiKey","validation":"text","invalidMessage":"Please enter Mailchimp API key first."}]'
				data-target-select="#MailchimpAudienceSelect"
				data-target-input="#MailchimpAudienceId"
				data-target-label-input="#MailchimpAudienceLabel"
				data-empty-label="Select Audience"
			><i class="fa-solid fa-rotate"></i> Verify & Load Audiences</button>
		</div>

		<div class="wordform-connect-resource-select-wrap">
			<label for="MailchimpAudienceSelect">
				<span class="dashicons dashicons-groups" aria-hidden="true"></span>
				Loaded Audiences
			</label><br/>
			<select id="MailchimpAudienceSelect" class="wordform-connect-resource-select">
				<option value=""><?php esc_html_e( 'Select Audience', 'wordform-pro' ); ?></option>
				<?php if ( ! empty( $mailchimp_audience_id ) ) : ?>
					<option value="<?php echo esc_attr( $mailchimp_audience_id ); ?>" selected><?php echo esc_html( ! empty( $mailchimp_audience_label ) ? $mailchimp_audience_label : $mailchimp_audience_id ); ?></option>
				<?php endif; ?>
			</select>
		</div>

		<div class="wordform-connect-save-update-mailchimp-info-button-div-wrapper">
			<button
				class="button button-primary wordform-connect-save-update-app-fields-button"
				data-save-action="wordform_connect_save_mailchimp_data_as_wp_option_data"
				data-feedback-selector=".wordform-mailchimp-app-feedback-msg"
				data-fields-config='[{"selector":".mailchimp-api-key","paramKey":"mailchimpApiKey","validation":"text","invalidMessage":"Please enter Mailchimp API key."},{"selector":".mailchimp-audience-id","paramKey":"mailchimpAudienceId","validation":"text","invalidMessage":"Please enter Mailchimp Audience ID."},{"selector":".mailchimp-audience-label","paramKey":"mailchimpAudienceLabel","validation":"optional"}]'
			><i class="fa-solid fa-gear"></i> Save / Update</button>
		</div>
	</div>
</div>
<!-- End Mailchimp Configure Modal Form -->
