<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}
$general_tab_options = SftcyWordformBase::sc_wordform_get_settings_general_tab_info();
?>
<div class="sc-wordform-setting-page-general-tab-table-wrapper">
	<form enctype="multipart/form-data" method="post" id="scWordformSettingsGeneralTabForm">
		<div class="sc-wordform-general-toolbar">
			<div class="sc-wordform-general-toolbar-copy">
				<label for="scWordformSelectGeneralTabFor"><?php esc_html_e( 'Select Form', 'wordform-pro' ); ?></label>
				<p><?php esc_html_e( 'Apply one shared general style to all forms, or switch to a specific form and override only that form.', 'wordform-pro' ); ?></p>
			</div>
			<div class="sc-wordform-general-toolbar-control">
				<select id="scWordformSelectGeneralTabFor" name="sc-wordform-select-general-tab-settings-for-form-id">
					<option value="all_form"><?php esc_html_e( 'All Forms', 'wordform-pro' ); ?></option>
					<?php
					if ( isset( $all_created_forms ) && array_filter( $all_created_forms ) ) {
						foreach ( $all_created_forms as $data ) {
							echo '<option value="' . esc_attr( $data['form_id'] ) . '">' . esc_html( $data['form_name'] ) . '</option>';
						}
					}
					?>
				</select>
			</div>
		</div>

		<table class="sc-wordform-general-settings-table">
			<tbody>
				<tr class="sc-wordform-general-section-row">
					<td colspan="2">
						<div class="sc-wordform-general-section-head">
							<h4><?php esc_html_e( 'Form Layout', 'wordform-pro' ); ?></h4>
							<p><?php esc_html_e( 'Control how the form fits inside your theme or landing page layout.', 'wordform-pro' ); ?></p>
						</div>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-arrows-left-right-to-line"></i><?php esc_html_e( 'Form Width (%)', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<div class="wordform-general-input-element-wrapper-div">
							<input
								type="hidden"
								name="sc-wordform-form-width"
								class="sc-wordform-form-width"
								value="<?php echo esc_attr( $general_tab_options['wordform_form_width'] ?? '100' ); ?>"
								readonly
							/>
						</div>
						<p class="sc-wordform-form-width-slider"></p>
						<span class="slider-value-display"><?php echo esc_html( $general_tab_options['wordform_form_width'] ?? '100' ); ?>%</span>
						<small>
							<i class="fa-solid fa-circle-info setting-general-tab-page-info-icon"></i>
							<?php esc_html_e( '100% works best for most responsive layouts. Reduce it only when the theme layout needs a narrower form block.', 'wordform-pro' ); ?>
						</small>
					</td>
				</tr>

				<tr class="sc-wordform-general-section-row">
					<td colspan="2">
						<div class="sc-wordform-general-section-head">
							<h4><?php esc_html_e( 'Submission Behavior', 'wordform-pro' ); ?></h4>
							<p><?php esc_html_e( 'Choose what happens after a visitor submits the form successfully.', 'wordform-pro' ); ?></p>
						</div>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-paper-plane"></i><?php esc_html_e( 'On Form Submission', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<div class="sc-wordform-general-toggle-option">
							<input type="checkbox" id="scWordformFormSubmissionSendEmail" class="sc-wordform-form-submission-send-email" name="sc-wordform-form-submission-send-email" <?php checked( 'yes', $general_tab_options['send_email_on_form_submission'] ); ?>>
							<label for="scWordformFormSubmissionSendEmail"><?php esc_html_e( 'Send Email', 'wordform-pro' ); ?></label>
						</div>
						<small><?php esc_html_e( 'Send a notification email to your admin address on each successful submission.', 'wordform-pro' ); ?> <?php echo esc_html( sanitize_email( get_option( 'admin_email' ) ) ); ?></small>
						<?php $wordsmtp_install_link = '<a href="' . esc_url( admin_url( 'plugin-install.php?s=wordsmtp&tab=search&type=term' ) ) . '"><strong>' . __( 'WordSMTP', 'wordform-pro' ) . '</strong></a>'; ?>
						<small><?php echo wp_kses_post( wp_sprintf( '%s' . __( ' to get easier and faster solution to send emails from your own domain.', 'wordform-pro' ), $wordsmtp_install_link ) ); ?></small>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-eye-slash"></i><?php esc_html_e( 'On Form Submission', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<div class="sc-wordform-general-toggle-option">
							<input type="checkbox" id="scWordformFormSubmissionHideForm" class="sc-wordform-form-submission-hide-form" name="sc-wordform-form-submission-hide-form" <?php checked( 'yes', $general_tab_options['hide_form_on_form_submission'] ); ?>>
							<label for="scWordformFormSubmissionHideForm"><?php esc_html_e( 'Hide Form', 'wordform-pro' ); ?></label>
						</div>
						<small><?php esc_html_e( 'Hide the form after successful submission. Users will need a refresh to see it again on the page.', 'wordform-pro' ); ?></small>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-circle-check"></i><?php esc_html_e( 'Success Message', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<input type="text" value="<?php echo esc_attr( $general_tab_options['form_submission_success_message'] ); ?>" class="sc-wordform-form-submission-success-message" name="sc-wordform-form-submission-success-message">
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-spinner"></i><?php esc_html_e( 'Submit Loading Text', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<input type="text" value="<?php echo esc_attr( $general_tab_options['submit_button_loading_text'] ); ?>" class="sc-wordform-submit-button-loading-text" name="sc-wordform-submit-button-loading-text">
						<small><?php esc_html_e( 'Shown beside the spinner while the form is validating, uploading, or processing payment.', 'wordform-pro' ); ?></small>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-spinner"></i><?php esc_html_e( 'Submit Button Spinner', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<div class="sc-wordform-general-toggle-option">
							<input type="checkbox" id="scWordformSubmitButtonSpinner" class="sc-wordform-show-submit-button-spinner" name="sc-wordform-show-submit-button-spinner" <?php checked( 'yes', $general_tab_options['show_submit_button_spinner'] ); ?>>
							<label for="scWordformSubmitButtonSpinner"><?php esc_html_e( 'Show spinner inside submit button', 'wordform-pro' ); ?></label>
						</div>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-hourglass-half"></i><?php esc_html_e( 'Submitting Text Overlay', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<div class="sc-wordform-general-toggle-option">
							<input type="checkbox" id="scWordformSubmitProgressText" class="sc-wordform-show-submit-progress-text" name="sc-wordform-show-submit-progress-text" <?php checked( 'yes', $general_tab_options['show_submit_progress_text'] ); ?>>
							<label for="scWordformSubmitProgressText"><?php esc_html_e( 'Show centered submitting text while processing', 'wordform-pro' ); ?></label>
						</div>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-regular fa-credit-card"></i><?php esc_html_e( 'Success Message Card View', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<div class="sc-wordform-general-toggle-option">
							<input type="checkbox" id="scWordformSuccessMessageCardView" class="sc-wordform-show-success-message-as-card" name="sc-wordform-show-success-message-as-card" <?php checked( 'yes', $general_tab_options['show_success_message_as_card'] ); ?>>
							<label for="scWordformSuccessMessageCardView"><?php esc_html_e( 'Show success message in card view', 'wordform-pro' ); ?></label>
						</div>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-arrow-right"></i><?php esc_html_e( 'Redirect On Success', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<div class="sc-wordform-general-toggle-option">
							<input type="checkbox" id="scWordformRedirectOnSuccess" class="sc-wordform-redirect-on-form-submission" name="sc-wordform-redirect-on-form-submission" <?php checked( 'yes', $general_tab_options['redirect_on_form_submission'] ); ?>>
							<label for="scWordformRedirectOnSuccess"><?php esc_html_e( 'Redirect users after successful submission', 'wordform-pro' ); ?></label>
						</div>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-link"></i><?php esc_html_e( 'Redirect URL', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<input type="text" value="<?php echo esc_attr( $general_tab_options['redirect_url_on_form_submission'] ); ?>" class="sc-wordform-redirect-url-on-form-submission" name="sc-wordform-redirect-url-on-form-submission" placeholder="https://example.com/thank-you">
					</td>
				</tr>

				<tr class="sc-wordform-general-section-row">
					<td colspan="2">
						<div class="sc-wordform-general-section-head">
							<h4><?php esc_html_e( 'Submit Button Styling', 'wordform-pro' ); ?></h4>
							<p><?php esc_html_e( 'Tune the submit button look so it fits your brand and form layout.', 'wordform-pro' ); ?></p>
						</div>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-fill-drip"></i><?php esc_html_e( 'Submit Button Color', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<input type="text" value="<?php echo esc_attr( $general_tab_options['submit_button_background_color'] ); ?>" class="sc-wordform-form-submit-button-background-color" name="sc-wordform-form-submit-button-background-color">
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-fill-drip"></i><?php esc_html_e( 'Submit Button Color (Hover)', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<input type="text" value="<?php echo esc_attr( $general_tab_options['submit_button_background_hover_color'] ); ?>" class="sc-wordform-form-submit-button-background-hover-color" name="sc-wordform-form-submit-button-background-hover-color">
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-palette"></i><?php esc_html_e( 'Submit Button Font Color', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<input type="text" value="<?php echo esc_attr( $general_tab_options['submit_button_font_color'] ); ?>" class="sc-wordform-form-submit-button-font-color" name="sc-wordform-form-submit-button-font-color">
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-text-height"></i><?php esc_html_e( 'Submit Button Text Size', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<select class="sc-wordform-form-submit-button-text-size" name="sc-wordform-form-submit-button-text-size">
							<?php
							for ( $i = 12; $i <= 40; $i += 2 ) {
								if ( $i == $general_tab_options['submit_button_font_size'] ) {
									echo '<option value="' . esc_attr( $i ) . '" selected>' . esc_html( $i ) . 'px</option>';
								} else {
									echo '<option value="' . esc_attr( $i ) . '">' . esc_html( $i ) . 'px</option>';
								}
							}
							?>
						</select>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-up-down"></i><?php esc_html_e( 'Submit Button Padding (Top-Bottom)', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<select class="sc-wordform-form-submit-button-padding-top-bottom" name="sc-wordform-form-submit-button-padding-top-bottom">
							<?php
							for ( $i = 2; $i <= 30; $i++ ) {
								if ( $i == $general_tab_options['submit_button_padding_top_bottom'] ) {
									echo '<option value="' . esc_attr( $i ) . '" selected>' . esc_html( $i ) . 'px</option>';
								} else {
									echo '<option value="' . esc_attr( $i ) . '">' . esc_html( $i ) . 'px</option>';
								}
							}
							?>
						</select>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-left-right"></i><?php esc_html_e( 'Submit Button Padding (Left-Right)', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<select class="sc-wordform-form-submit-button-padding-left-right" name="sc-wordform-form-submit-button-padding-left-right">
							<?php
							for ( $i = 2; $i <= 30; $i++ ) {
								if ( $i == $general_tab_options['submit_button_padding_left_right'] ) {
									echo '<option value="' . esc_attr( $i ) . '" selected>' . esc_html( $i ) . 'px</option>';
								} else {
									echo '<option value="' . esc_attr( $i ) . '">' . esc_html( $i ) . 'px</option>';
								}
							}
							?>
						</select>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-bold"></i><?php esc_html_e( 'Submit Button Font Weight', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<?php
						$font_weight_normal = '';
						$font_weight_bold   = '';
						if ( $general_tab_options['submit_button_font_weight'] == 'normal' ) {
							$font_weight_normal = ' checked';
						} elseif ( $general_tab_options['submit_button_font_weight'] == 'bold' ) {
							$font_weight_bold = ' checked';
						}
						?>
						<div class="sc-wordform-general-radio-inline">
							<label><input type="radio" name="sc-wordform-form-submit-button-font-weight" value="normal" <?php echo esc_attr( $font_weight_normal ); ?> /> <?php esc_html_e( 'Normal', 'wordform-pro' ); ?></label>
							<label><input type="radio" name="sc-wordform-form-submit-button-font-weight" value="bold" <?php echo esc_attr( $font_weight_bold ); ?> /> <?php esc_html_e( 'Bold', 'wordform-pro' ); ?></label>
						</div>
					</td>
				</tr>

				<tr class="sc-wordform-general-section-row">
					<td colspan="2">
						<div class="sc-wordform-general-section-head">
							<h4><?php esc_html_e( 'Form Spacing And Container', 'wordform-pro' ); ?></h4>
							<p><?php esc_html_e( 'Adjust the breathing space around the form and between fields for the selected form.', 'wordform-pro' ); ?></p>
						</div>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-solid fa-grip-lines"></i><?php esc_html_e( 'Field Gap', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<select class="sc-wordform-form-field-gap" name="sc-wordform-form-field-gap">
							<?php
							for ( $i = 8; $i <= 48; $i += 2 ) {
								if ( $i == $general_tab_options['form_field_gap'] ) {
									echo '<option value="' . esc_attr( $i ) . '" selected>' . esc_html( $i ) . 'px</option>';
								} else {
									echo '<option value="' . esc_attr( $i ) . '">' . esc_html( $i ) . 'px</option>';
								}
							}
							?>
						</select>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-regular fa-square"></i><?php esc_html_e( 'Container Padding', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<select class="sc-wordform-form-container-padding" name="sc-wordform-form-container-padding">
							<?php
							for ( $i = 0; $i <= 48; $i += 2 ) {
								if ( $i == $general_tab_options['form_container_padding'] ) {
									echo '<option value="' . esc_attr( $i ) . '" selected>' . esc_html( $i ) . 'px</option>';
								} else {
									echo '<option value="' . esc_attr( $i ) . '">' . esc_html( $i ) . 'px</option>';
								}
							}
							?>
						</select>
					</td>
				</tr>

				<tr class="sc-wordform-general-setting-row">
					<td class="sc-wordform-settings-general-tab-label-td">
						<h4><i class="fa-regular fa-circle"></i><?php esc_html_e( 'Container Border Radius', 'wordform-pro' ); ?></h4>
					</td>
					<td>
						<select class="sc-wordform-form-container-border-radius" name="sc-wordform-form-container-border-radius">
							<?php
							for ( $i = 0; $i <= 36; $i += 2 ) {
								if ( $i == $general_tab_options['form_container_border_radius'] ) {
									echo '<option value="' . esc_attr( $i ) . '" selected>' . esc_html( $i ) . 'px</option>';
								} else {
									echo '<option value="' . esc_attr( $i ) . '">' . esc_html( $i ) . 'px</option>';
								}
							}
							?>
						</select>
					</td>
				</tr>
			</tbody>
		</table>

		<div class="sc-wordform-general-actions">
			<button type="submit" class="button button-primary button-large"><?php esc_html_e( 'Save', 'wordform-pro' ); ?></button>
			<button type="button" class="button button-secondary button-large sc-wordform-settings-general-tab-reset"><?php esc_html_e( 'Reset', 'wordform-pro' ); ?></button>
			<div class="sc-wordform-general-tab-update-info"></div>
		</div>
	</form>
</div>
