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

$mailerlite_info        = SftcyWordformConnectMailerlite::get_mailerlite_configured_info();
$mailerlite_api_token   = isset( $mailerlite_info['apiToken'] ) ? $mailerlite_info['apiToken'] : '';
$mailerlite_group_id    = isset( $mailerlite_info['groupId'] ) ? $mailerlite_info['groupId'] : '';
$mailerlite_group_label = isset( $mailerlite_info['groupLabel'] ) ? $mailerlite_info['groupLabel'] : '';
?>
<!-- Start MailerLite Configure Modal Form -->
<div id="MailerLiteAPIModal" title="MailerLite Connection Configure" class="" style="display: none;">
	<div class="wordform-connect-modal-quickstart">
		<strong>Quick setup:</strong> Enter the API token, load groups, select one, then save. Manual Group ID entry still works as fallback.
	</div>
	<h5>How to configure MailerLite connection</h5>
	<p>
		<a href="https://developers.mailerlite.com/docs/" target="_blank" rel="noopener">MailerLite API Docs</a> |
		<a href="https://developers.mailerlite.com/docs/groups" target="_blank" rel="noopener">MailerLite Groups API Docs</a>
	</p>
	<div id="mailerlite-api-create-help" class="accordion">
		<h3>Step 1 - Create MailerLite API token</h3>
		<div>
			<p>Open MailerLite, create or copy an API token with subscriber and group access.</p>
		</div>

		<h3>Step 2 - Choose target group</h3>
		<div>
			<p>Use <strong>Verify &amp; Load Groups</strong> to fetch your available groups, then select the one you want to add subscribers into.</p>
		</div>

		<h3>Step 3 - Save credentials here</h3>
		<div>
			<p>Paste the API token and Group 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>. MailerLite needs at least one valid email field in the form submission.</p>
		</div>
	</div>

	<div class="mailerlite-connection-input-elements-wrapper" style="display: flex; flex-direction:column;">
		<div class="wordform-mailerlite-app-feedback-msg"></div>
		<div>
			<label for="MailerLiteApiToken">
				<span class="dashicons dashicons-admin-network" aria-hidden="true"></span>
				MailerLite API Token
				<a class="wordform-field-help-link" href="https://developers.mailerlite.com/docs/" target="_blank" rel="noopener" aria-label="How to get your MailerLite API token">
					<span class="dashicons dashicons-editor-help" aria-hidden="true"></span>
				</a>
			</label><br/>
			<input type="text" id="MailerLiteApiToken" name="mailerlite-api-token" class="mailerlite-api-token" value="<?php echo esc_attr( $mailerlite_api_token ); ?>" placeholder="ml_xxxxxxxxxxxxxxxxxxxxxxxx">
		</div>

		<div>
			<label for="MailerLiteGroupId">
				<span class="dashicons dashicons-groups" aria-hidden="true"></span>
				Group ID
				<a class="wordform-field-help-link" href="https://developers.mailerlite.com/docs/groups" target="_blank" rel="noopener" aria-label="How MailerLite groups and group IDs are retrieved">
					<span class="dashicons dashicons-editor-help" aria-hidden="true"></span>
				</a>
			</label><br/>
			<input type="text" id="MailerLiteGroupId" name="mailerlite-group-id" class="mailerlite-group-id" value="<?php echo esc_attr( $mailerlite_group_id ); ?>" placeholder="12345678901234567">
			<input type="hidden" id="MailerLiteGroupLabel" class="mailerlite-group-label" value="<?php echo esc_attr( $mailerlite_group_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_mailerlite_groups"
				data-feedback-selector=".wordform-mailerlite-app-feedback-msg"
				data-fields-config='[{"selector":".mailerlite-api-token","paramKey":"mailerliteApiToken","validation":"text","invalidMessage":"Please enter MailerLite API token first."}]'
				data-target-select="#MailerLiteGroupSelect"
				data-target-input="#MailerLiteGroupId"
				data-target-label-input="#MailerLiteGroupLabel"
				data-empty-label="Select Group"
			><i class="fa-solid fa-rotate"></i> Verify & Load Groups</button>
		</div>

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

		<div class="wordform-connect-save-update-mailerlite-info-button-div-wrapper">
			<button
				class="button button-primary wordform-connect-save-update-app-fields-button"
				data-save-action="wordform_connect_save_mailerlite_data_as_wp_option_data"
				data-feedback-selector=".wordform-mailerlite-app-feedback-msg"
				data-fields-config='[{"selector":".mailerlite-api-token","paramKey":"mailerliteApiToken","validation":"text","invalidMessage":"Please enter MailerLite API token."},{"selector":".mailerlite-group-id","paramKey":"mailerliteGroupId","validation":"text","invalidMessage":"Please enter MailerLite Group ID."},{"selector":".mailerlite-group-label","paramKey":"mailerliteGroupLabel","validation":"optional"}]'
			><i class="fa-solid fa-gear"></i> Save / Update</button>
		</div>
	</div>
</div>
<!-- End MailerLite Configure Modal Form -->
