<?php
/**
 * Design settings panel for Coming Soon & Maintenance admin.
 *
 * @package ComingSoonMaintenance
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use ComingSoonMaintenance\AdminHelpers;

?>
<div class="wpps-csm-design-sections">
	<div class="wp-powersuite-settings__card">
		<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Layout & Typography', 'wp-powersuite' ); ?></h2>
		<p class="description"><?php esc_html_e( 'Fine-tune colors and layout. Templates prefill these — adjust anything here without losing your logo or enabled status.', 'wp-powersuite' ); ?></p>
		<table class="form-table">
			<tbody>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_content_align"><?php esc_html_e( 'Content Alignment', 'wp-powersuite' ); ?></label></th>
					<td>
						<select id="<?php echo esc_attr( $module_id ); ?>_content_align" name="content_align" class="wp-powersuite-advanced-setting" data-setting-key="content_align">
							<option value="left" <?php selected( $content_align, 'left' ); ?>><?php esc_html_e( 'Left', 'wp-powersuite' ); ?></option>
							<option value="center" <?php selected( $content_align, 'center' ); ?>><?php esc_html_e( 'Center', 'wp-powersuite' ); ?></option>
							<option value="right" <?php selected( $content_align, 'right' ); ?>><?php esc_html_e( 'Right', 'wp-powersuite' ); ?></option>
						</select>
					</td>
				</tr>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_container_max_width"><?php esc_html_e( 'Content Max Width', 'wp-powersuite' ); ?></label></th>
					<td>
						<input type="number" id="<?php echo esc_attr( $module_id ); ?>_container_max_width" name="container_max_width" class="wp-powersuite-advanced-setting small-text" data-setting-key="container_max_width" value="<?php echo esc_attr( (string) $container_max_width ); ?>" min="320" max="1400" step="10" /> px
					</td>
				</tr>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_text_color"><?php esc_html_e( 'Body Text Color', 'wp-powersuite' ); ?></label></th>
					<td><?php AdminHelpers::optionalColorField( $module_id, 'text_color', (string) ( $settings['text_color'] ?? '' ), '#ffffff' ); ?></td>
				</tr>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_heading_color"><?php esc_html_e( 'Heading Color', 'wp-powersuite' ); ?></label></th>
					<td><?php AdminHelpers::optionalColorField( $module_id, 'heading_color', (string) ( $settings['heading_color'] ?? '' ), '#ffffff' ); ?></td>
				</tr>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_description_color"><?php esc_html_e( 'Description Color', 'wp-powersuite' ); ?></label></th>
					<td><?php AdminHelpers::optionalColorField( $module_id, 'description_color', (string) ( $settings['description_color'] ?? '' ), '#ffffff' ); ?></td>
				</tr>
			</tbody>
		</table>
	</div>

	<div class="wp-powersuite-settings__card">
		<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Logo Styling', 'wp-powersuite' ); ?></h2>
		<table class="form-table">
			<tbody>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_logo_align"><?php esc_html_e( 'Logo Alignment', 'wp-powersuite' ); ?></label></th>
					<td>
						<select id="<?php echo esc_attr( $module_id ); ?>_logo_align" name="logo_align" class="wp-powersuite-advanced-setting" data-setting-key="logo_align">
							<option value="left" <?php selected( $logo_align, 'left' ); ?>><?php esc_html_e( 'Left', 'wp-powersuite' ); ?></option>
							<option value="center" <?php selected( $logo_align, 'center' ); ?>><?php esc_html_e( 'Center', 'wp-powersuite' ); ?></option>
							<option value="right" <?php selected( $logo_align, 'right' ); ?>><?php esc_html_e( 'Right', 'wp-powersuite' ); ?></option>
						</select>
					</td>
				</tr>
				<tr>
					<th scope="row"><?php esc_html_e( 'Logo Background', 'wp-powersuite' ); ?></th>
					<td>
						<label>
							<input type="hidden" name="logo_bg_enabled" class="wp-powersuite-advanced-setting" data-setting-key="logo_bg_enabled" value="0">
							<input type="checkbox" name="logo_bg_enabled" class="wp-powersuite-advanced-setting" data-setting-key="logo_bg_enabled" value="1" id="<?php echo esc_attr( $module_id ); ?>_logo_bg_enabled" <?php checked( ! empty( $settings['logo_bg_enabled'] ) ); ?>>
							<?php esc_html_e( 'Show background behind logo', 'wp-powersuite' ); ?>
						</label>
					</td>
				</tr>
				<tr class="wpps-csm-logo-bg-row">
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_logo_bg_color"><?php esc_html_e( 'Logo Background Color', 'wp-powersuite' ); ?></label></th>
					<td><?php AdminHelpers::colorField( $module_id, 'logo_bg_color', (string) ( $settings['logo_bg_color'] ?? '#ffffff' ), '#ffffff' ); ?></td>
				</tr>
				<tr class="wpps-csm-logo-bg-row">
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_logo_bg_padding"><?php esc_html_e( 'Logo Background Padding', 'wp-powersuite' ); ?></label></th>
					<td>
						<input type="number" id="<?php echo esc_attr( $module_id ); ?>_logo_bg_padding" name="logo_bg_padding" class="wp-powersuite-advanced-setting small-text" data-setting-key="logo_bg_padding" value="<?php echo esc_attr( (string) $logo_bg_padding ); ?>" min="0" max="80" step="1" /> px
					</td>
				</tr>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_logo_border_radius"><?php esc_html_e( 'Logo Corner Radius', 'wp-powersuite' ); ?></label></th>
					<td>
						<input type="number" id="<?php echo esc_attr( $module_id ); ?>_logo_border_radius" name="logo_border_radius" class="wp-powersuite-advanced-setting small-text" data-setting-key="logo_border_radius" value="<?php echo esc_attr( (string) $logo_border_radius ); ?>" min="0" max="100" step="1" /> px
					</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div class="wp-powersuite-settings__card wpps-csm-coming-soon-only">
		<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Countdown & Subscribe', 'wp-powersuite' ); ?></h2>
		<table class="form-table">
			<tbody>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_countdown_bg_color"><?php esc_html_e( 'Countdown Background', 'wp-powersuite' ); ?></label></th>
					<td><?php AdminHelpers::optionalColorField( $module_id, 'countdown_bg_color', (string) ( $settings['countdown_bg_color'] ?? '' ), 'rgba(255,255,255,0.15)' ); ?></td>
				</tr>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_countdown_text_color"><?php esc_html_e( 'Countdown Text', 'wp-powersuite' ); ?></label></th>
					<td><?php AdminHelpers::optionalColorField( $module_id, 'countdown_text_color', (string) ( $settings['countdown_text_color'] ?? '' ), '#ffffff' ); ?></td>
				</tr>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_countdown_border_radius"><?php esc_html_e( 'Countdown Corner Radius', 'wp-powersuite' ); ?></label></th>
					<td>
						<input type="number" id="<?php echo esc_attr( $module_id ); ?>_countdown_border_radius" name="countdown_border_radius" class="wp-powersuite-advanced-setting small-text" data-setting-key="countdown_border_radius" value="<?php echo esc_attr( (string) $countdown_radius ); ?>" min="0" max="100" step="1" /> px
					</td>
				</tr>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_subscribe_btn_bg"><?php esc_html_e( 'Button Background', 'wp-powersuite' ); ?></label></th>
					<td><?php AdminHelpers::optionalColorField( $module_id, 'subscribe_btn_bg', (string) ( $settings['subscribe_btn_bg'] ?? '' ), '#ffffff' ); ?></td>
				</tr>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_subscribe_btn_text"><?php esc_html_e( 'Button Text', 'wp-powersuite' ); ?></label></th>
					<td><?php AdminHelpers::optionalColorField( $module_id, 'subscribe_btn_text', (string) ( $settings['subscribe_btn_text'] ?? '' ), '#1e293b' ); ?></td>
				</tr>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_subscribe_input_bg"><?php esc_html_e( 'Email Field Background', 'wp-powersuite' ); ?></label></th>
					<td><?php AdminHelpers::optionalColorField( $module_id, 'subscribe_input_bg', (string) ( $settings['subscribe_input_bg'] ?? '' ), 'rgba(255,255,255,0.1)' ); ?></td>
				</tr>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_subscribe_input_text"><?php esc_html_e( 'Email Field Text', 'wp-powersuite' ); ?></label></th>
					<td><?php AdminHelpers::optionalColorField( $module_id, 'subscribe_input_text', (string) ( $settings['subscribe_input_text'] ?? '' ), '#ffffff' ); ?></td>
				</tr>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_subscribe_input_border"><?php esc_html_e( 'Email Field Border', 'wp-powersuite' ); ?></label></th>
					<td><?php AdminHelpers::optionalColorField( $module_id, 'subscribe_input_border', (string) ( $settings['subscribe_input_border'] ?? '' ), 'rgba(255,255,255,0.3)' ); ?></td>
				</tr>
			</tbody>
		</table>
	</div>

	<div class="wp-powersuite-settings__card">
		<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Social Icons', 'wp-powersuite' ); ?></h2>
		<table class="form-table">
			<tbody>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_social_icon_bg"><?php esc_html_e( 'Icon Background', 'wp-powersuite' ); ?></label></th>
					<td><?php AdminHelpers::optionalColorField( $module_id, 'social_icon_bg', (string) ( $settings['social_icon_bg'] ?? '' ), 'rgba(255,255,255,0.15)' ); ?></td>
				</tr>
				<tr>
					<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_social_icon_color"><?php esc_html_e( 'Icon Color', 'wp-powersuite' ); ?></label></th>
					<td><?php AdminHelpers::optionalColorField( $module_id, 'social_icon_color', (string) ( $settings['social_icon_color'] ?? '' ), '#ffffff' ); ?></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
