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

$airtable_info         = SftcyWordformConnectAirtable::get_airtable_configured_info();
$airtable_access_token = isset( $airtable_info['accessToken'] ) ? $airtable_info['accessToken'] : '';
$airtable_base_id      = isset( $airtable_info['baseId'] ) ? $airtable_info['baseId'] : '';
$airtable_table_name   = isset( $airtable_info['tableName'] ) ? $airtable_info['tableName'] : '';
?>
<!-- Start Airtable Configure Modal Form -->
<div id="AirtableAPIModal" title="Airtable Connection Configure" class="" style="display: none;">
	<div class="wordform-connect-modal-quickstart">
		<strong>Quick setup:</strong> Enter the access token and Base ID, load tables, select one, then save. Manual Table Name entry stays available if metadata access is unavailable.
	</div>
	<h5>How to configure Airtable connection</h5>
	<p>
		<a href="https://support.airtable.com/docs/creating-personal-access-tokens" target="_blank" rel="noopener">Airtable Access Token Help</a> |
		<a href="https://airtable.com/developers/web/api/introduction" target="_blank" rel="noopener">Airtable Web API Docs</a>
	</p>
	<div id="airtable-api-create-help" class="accordion">
		<h3>Step 1 - Create Airtable access token</h3>
		<div>
			<p>Create a Personal Access Token in Airtable with permission to create records in the target base and table.</p>
		</div>

		<h3>Step 2 - Find Base ID and Table Name</h3>
		<div>
			<p>Copy the Airtable <strong>Base ID</strong> and enter the exact <strong>Table Name</strong> where WordForm should create records.</p>
		</div>

		<h3>Step 3 - Match Airtable columns with form labels</h3>
		<div>
			<p>Create Airtable columns with the same names as your WordForm field labels. Airtable rejects record fields that do not match the table columns.</p>
		</div>

		<h3>Step 4 - Save and connect forms</h3>
		<div>
			<p>Save the token, Base ID, and Table Name here, then connect only the forms you want using <strong>Select Form + Select Application + Create Connection</strong>.</p>
		</div>
	</div>

	<div class="airtable-connection-input-elements-wrapper" style="display: flex; flex-direction:column;">
		<div class="wordform-airtable-app-feedback-msg"></div>
		<div>
			<label for="AirtableAccessToken">
				<span class="dashicons dashicons-lock" aria-hidden="true"></span>
				Airtable Access Token
				<a class="wordform-field-help-link" href="https://support.airtable.com/docs/creating-personal-access-tokens" target="_blank" rel="noopener" aria-label="How to create an Airtable access token">
					<span class="dashicons dashicons-editor-help" aria-hidden="true"></span>
				</a>
			</label><br/>
			<input type="text" id="AirtableAccessToken" name="airtable-access-token" class="airtable-access-token" value="<?php echo esc_attr( $airtable_access_token ); ?>" placeholder="patXXXXXXXXXXXXXX">
		</div>

		<div>
			<label for="AirtableBaseId">
				<span class="dashicons dashicons-database" aria-hidden="true"></span>
				Base ID
				<a class="wordform-field-help-link" href="https://support.airtable.com/finding-airtable-ids" target="_blank" rel="noopener" aria-label="How to find your Airtable Base ID">
					<span class="dashicons dashicons-editor-help" aria-hidden="true"></span>
				</a>
			</label><br/>
			<input type="text" id="AirtableBaseId" name="airtable-base-id" class="airtable-base-id" value="<?php echo esc_attr( $airtable_base_id ); ?>" placeholder="appXXXXXXXXXXXXXX">
		</div>

		<div>
			<label for="AirtableTableName">
				<span class="dashicons dashicons-table-row-after" aria-hidden="true"></span>
				Table Name
				<a class="wordform-field-help-link" href="https://airtable.com/developers/web/api/introduction" target="_blank" rel="noopener" aria-label="How Airtable table names are used in the API">
					<span class="dashicons dashicons-editor-help" aria-hidden="true"></span>
				</a>
			</label><br/>
			<input type="text" id="AirtableTableName" name="airtable-table-name" class="airtable-table-name" value="<?php echo esc_attr( $airtable_table_name ); ?>" placeholder="Submissions">
		</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_airtable_tables"
				data-feedback-selector=".wordform-airtable-app-feedback-msg"
				data-fields-config='[{"selector":".airtable-access-token","paramKey":"airtableAccessToken","validation":"text","invalidMessage":"Please enter Airtable access token first."},{"selector":".airtable-base-id","paramKey":"airtableBaseId","validation":"text","invalidMessage":"Please enter Airtable Base ID first."}]'
				data-target-select="#AirtableTableSelect"
				data-target-input="#AirtableTableName"
				data-empty-label="Select Table"
			><i class="fa-solid fa-rotate"></i> Verify & Load Tables</button>
		</div>

		<div class="wordform-connect-resource-select-wrap">
			<label for="AirtableTableSelect">
				<span class="dashicons dashicons-table-row-after" aria-hidden="true"></span>
				Loaded Tables
			</label><br/>
			<select id="AirtableTableSelect" class="wordform-connect-resource-select">
				<option value=""><?php esc_html_e( 'Select Table', 'wordform-pro' ); ?></option>
				<?php if ( ! empty( $airtable_table_name ) ) : ?>
					<option value="<?php echo esc_attr( $airtable_table_name ); ?>" selected><?php echo esc_html( $airtable_table_name ); ?></option>
				<?php endif; ?>
			</select>
		</div>

		<div class="wordform-connect-save-update-airtable-info-button-div-wrapper">
			<button
				class="button button-primary wordform-connect-save-update-app-fields-button"
				data-save-action="wordform_connect_save_airtable_data_as_wp_option_data"
				data-feedback-selector=".wordform-airtable-app-feedback-msg"
				data-fields-config='[{"selector":".airtable-access-token","paramKey":"airtableAccessToken","validation":"text","invalidMessage":"Please enter Airtable Access Token."},{"selector":".airtable-base-id","paramKey":"airtableBaseId","validation":"text","invalidMessage":"Please enter Airtable Base ID."},{"selector":".airtable-table-name","paramKey":"airtableTableName","validation":"text","invalidMessage":"Please enter Airtable Table Name."}]'
			><i class="fa-solid fa-gear"></i> Save / Update</button>
		</div>
	</div>
</div>
<!-- End Airtable Configure Modal Form -->
