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

$slack_info = SftcyWordformConnectSlack::get_slack_webhook_url();
$slack_webhook_url = isset( $slack_info['webhookPostUrl'] ) ? $slack_info['webhookPostUrl'] : '';
?>
<!-- Start Slack Configure Modal Form -->
<div id="SlackAPIModal" title="Slack Connection Configure" class="" style="display: none;">
	<h5>How to configure Slack connection</h5>
	<p>
		<a href="https://api.slack.com/messaging/webhooks" target="_blank" rel="noopener">Slack Incoming Webhooks Docs</a> |
		<a href="https://api.slack.com/apps" target="_blank" rel="noopener">Slack App Management</a>
	</p>
	<div id="slack-webhook-create-help" class="accordion">
		<h3>Step 1 - Create or open a Slack app</h3>
		<div>
			<p>Go to <a href="https://api.slack.com/apps" target="_blank" rel="noopener">Slack API Apps</a> and create a new app, or open an existing app for your workspace.</p>
		</div>

		<h3>Step 2 - Enable Incoming Webhooks</h3>
		<div>
			<p>Open <strong>Incoming Webhooks</strong>, turn it <strong>On</strong>, then create a webhook for the Slack channel where you want form submissions to arrive.</p>
		</div>

		<h3>Step 3 - Copy Webhook URL</h3>
		<div>
			<p>Copy the generated webhook URL and paste it below in WordForm. WordForm will post connected form submissions into that channel.</p>
		</div>

		<h3>Step 4 - Connect specific forms</h3>
		<div>
			<p>After saving the webhook URL, connect only the forms you want by using <strong>Select Form + Select Application + Create Connection</strong>.</p>
		</div>
	</div>

	<div class="slack-connection-input-elements-wrapper" style="display: flex; flex-direction:column;">
		<div class="wordform-slack-app-feedback-msg"></div>
		<div>
			<label for="SlackWebhookUrl" class="wordai-label-webhook">
				<span class="dashicons dashicons-format-chat" aria-hidden="true"></span>
				Slack Webhook URL
				<a class="wordform-field-help-link" href="https://api.slack.com/messaging/webhooks" target="_blank" rel="noopener" aria-label="How to get your Slack Incoming Webhook URL">
					<span class="dashicons dashicons-editor-help" aria-hidden="true"></span>
				</a>
			</label><br/>
			<input type="text" id="SlackWebhookUrl" name="slack-webhook-url" class="slack-webhook-url" value="<?php echo esc_url( $slack_webhook_url ); ?>" placeholder="https://hooks.slack.com/services/XXX/YYY/ZZZ">
		</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=".slack-webhook-url"
				data-feedback-selector=".wordform-slack-app-feedback-msg"
				data-application-slug="slack"
				data-invalid-msg="Please enter valid Slack 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_slack_data_as_wp_option_data"
				data-url-selector=".slack-webhook-url"
				data-feedback-selector=".wordform-slack-app-feedback-msg"
				data-url-param-key="slackWebhookUrl"
				data-invalid-msg="Please enter valid Slack Webhook URL."
			><i class="fa-solid fa-gear"></i> Save / Update</button>
		</div>
	</div>
</div>
<!-- End Slack Configure Modal Form -->
