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

$hubspot_info       = SftcyWordformConnectHubspot::get_hubspot_configured_info();
$hubspot_app_token  = isset( $hubspot_info['privateAppToken'] ) ? $hubspot_info['privateAppToken'] : '';
?>
<!-- Start HubSpot Configure Modal Form -->
<div id="HubspotAPIModal" title="HubSpot Connection Configure" class="" style="display: none;">
	<div class="wordform-connect-modal-quickstart">
		<strong>Quick setup:</strong> Enter the private app token, verify it, then save and connect it to a form.
	</div>
	<h5>How to configure HubSpot contact connection</h5>
	<p>
		<a href="https://developers.hubspot.com/docs/api/private-apps" target="_blank" rel="noopener">HubSpot Private Apps Docs</a> |
		<a href="https://developers.hubspot.com/docs/api-reference/crm-contacts-v3/guide" target="_blank" rel="noopener">HubSpot Contacts API Guide</a>
	</p>
	<div id="hubspot-api-create-help" class="accordion">
		<h3>Step 1 - Create a private app in HubSpot</h3>
		<div>
			<p>Open your HubSpot account, go to <strong>Settings</strong> -> <strong>Integrations</strong> -> <strong>Private Apps</strong>, then create a private app for WordForm.</p>
		</div>

		<h3>Step 2 - Enable contact scopes</h3>
		<div>
			<p>Give the private app permission to read and write contacts. WordForm uses this token to create or update HubSpot contacts from connected forms.</p>
		</div>

		<h3>Step 3 - Copy the private app token</h3>
		<div>
			<p>Copy the generated <strong>Private App Token</strong> and paste it below, then click <strong>Save / Update</strong>.</p>
		</div>

		<h3>Step 4 - Connect forms</h3>
		<div>
			<p>After saving, use <strong>Select Form + Select Application + Create Connection</strong> to connect specific forms only. HubSpot needs at least one valid email field. If labels include first name, last name, phone, or company, WordForm will sync those too.</p>
		</div>
	</div>

	<div class="hubspot-connection-input-elements-wrapper" style="display: flex; flex-direction:column;">
		<div class="wordform-hubspot-app-feedback-msg"></div>
		<div>
			<label for="HubspotPrivateAppToken">
				<span class="dashicons dashicons-admin-network" aria-hidden="true"></span>
				HubSpot Private App Token
				<a class="wordform-field-help-link" href="https://developers.hubspot.com/docs/api/private-apps" target="_blank" rel="noopener" aria-label="How to create a HubSpot private app token">
					<span class="dashicons dashicons-editor-help" aria-hidden="true"></span>
				</a>
			</label><br/>
			<input type="text" id="HubspotPrivateAppToken" name="hubspot-private-app-token" class="hubspot-private-app-token" value="<?php echo esc_attr( $hubspot_app_token ); ?>" placeholder="pat-na1-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">
		</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_verify_hubspot_token"
				data-feedback-selector=".wordform-hubspot-app-feedback-msg"
				data-fields-config='[{"selector":".hubspot-private-app-token","paramKey":"hubspotPrivateAppToken","validation":"text","invalidMessage":"Please enter HubSpot Private App Token first."}]'
			><i class="fa-solid fa-shield-check"></i> Verify Token</button>
		</div>

		<div class="wordform-connect-save-update-hubspot-info-button-div-wrapper">
			<button
				class="button button-primary wordform-connect-save-update-app-fields-button"
				data-save-action="wordform_connect_save_hubspot_data_as_wp_option_data"
				data-feedback-selector=".wordform-hubspot-app-feedback-msg"
				data-fields-config='[{"selector":".hubspot-private-app-token","paramKey":"hubspotPrivateAppToken","validation":"text","invalidMessage":"Please enter HubSpot Private App Token."}]'
			><i class="fa-solid fa-gear"></i> Save / Update</button>
		</div>
	</div>
</div>
<!-- End HubSpot Configure Modal Form -->
