<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}
?>
<!-- Start Zapier Configure Modal Form -->
<div id="ZapierAPIModal" title="Zapier Connection Configure" class="" style="display: none;">

	<!-- Start Zapier Post Webhook URL Creation Steps -->
	<h5>How to configure Zapier connection</h5>
	<p>
		<a href="https://help.zapier.com/hc/en-us/articles/8496083355661-How-to-get-started-with-Webhooks-by-Zapier" target="_blank" rel="noopener">Zapier Webhooks Help</a> |
		<a href="https://help.zapier.com/hc/en-us/articles/8496288690317-Trigger-Zaps-from-webhooks" target="_blank" rel="noopener">Zapier Catch Hook Guide</a>
	</p>
	<div id="zapier-webhook-create-help" class="accordion">

		<h3>Step 1 - Log into Zapier</h3>
		<div>
			<p>Log into your <a href="https://zapier.com/app/zaps" target="_blank" rel="noopener">Zapier account</a> and create a new Zap.</p>
		</div>

		<h3>Step 2 - Choose Trigger App</h3>
		<div>
			<p>For the trigger app, choose <em>Webhooks by Zapier</em>, then select <em>Catch Hook</em>.</p>
			<p><a href="https://help.zapier.com/hc/en-us/articles/8496288690317-Trigger-Zaps-from-webhooks" target="_blank" rel="noopener">Learn more about Catch Hook</a></p>
		</div>

		<h3>Step 3 - Copy Webhook URL</h3>
		<div>
			<p>Zapier will show a unique <strong>Custom Webhook URL</strong>. Copy that URL and paste it below into the <strong>Zapier Webhook URL</strong> field in WordForm.</p>
		</div>

		<h3>Step 4 - Test the Webhook</h3>
		<div>
			<p>Save the webhook URL in WordForm, connect your form, then submit a test entry and use Zapier <em>Test Trigger</em> to confirm the data arrived.</p>
		</div>

		<h3>Step 5 - Finish & Activate</h3>
		<div>
			<p>Finish the remaining Zap steps, publish the Zap, and your connected WordForm submissions will start flowing into Zapier.</p>
			<p><a href="https://help.zapier.com/hc/en-us/articles/8496083355661-How-to-get-started-with-Webhooks-by-Zapier" target="_blank" rel="noopener">Full Zapier Webhooks guide</a></p>
		</div>

	</div>
	<!-- End Zapier Post Webhook URL Creation Steps -->

	<div class="zapier-connection-input-elements-wrapper" style="display: flex; flex-direction:column;">
		<div class="wordform-zapier-app-feedback-msg"></div>
		<div>
			<label for="ZapierWebhookUrl" class="wordai-label-webhook">
			<span class="dashicons dashicons-rest-api" aria-hidden="true"></span>
			Zapier Webhook URL
			<a class="wordform-field-help-link" href="https://help.zapier.com/hc/en-us/articles/8496288690317-Trigger-Zaps-from-webhooks" target="_blank" rel="noopener" aria-label="How to get your Zapier Catch Hook URL">
				<span class="dashicons dashicons-editor-help" aria-hidden="true"></span>
			</a>
			</label><br/>
			<input type="text" id="ZapierWebhookUrl" name="zapier-webhook-url" class="zapier-webhook-url" value="<?php echo $zapier_webhook_url; ?>" placeholder="https://hooks.zapier.com/hooks/catch/00000000/xxxxxxx/">
		</div>

		<div class="wordform-connect-inline-actions">
			<button
				type="button"
				class="button button-secondary wordform-connect-check-webhook-endpoint-button"
				data-check-action="wordform_connect_check_webhook_endpoint"
				data-url-selector=".zapier-webhook-url"
				data-feedback-selector=".wordform-zapier-app-feedback-msg"
				data-application-slug="zapier"
				data-invalid-msg="Please enter valid Zapier Webhook URL."
			><i class="fa-solid fa-signal"></i> Check URL</button>
			<button
				class="button button-primary wordform-connect-save-update-webhook-like-app-button"
				data-save-action="wordform_connect_save_zapier_data_as_wp_option_data"
				data-url-selector=".zapier-webhook-url"
				data-feedback-selector=".wordform-zapier-app-feedback-msg"
				data-url-param-key="zapierWebhookUrl"
				data-invalid-msg="Please enter valid Zapier Webhook URL."
			><i class="fa-solid fa-gear"></i> Save / Update</button>
		</div>

	</div>
</div>
<!-- End Zapier Configure Modal Form -->
