<?php
/**
 * View: Widget Appearance metabox.
 *
 * @package Ilabs\Firevert\Modules\SpectatorViews
 *
 * @var WP_Post $post
 * @var string  $firevert_spectator_views_background
 * @var string  $firevert_spectator_views_accent_color
 * @var string  $firevert_spectator_views_primary_text
 * @var bool    $firevert_spectator_views_add_border
 * @var string  $firevert_spectator_views_border_color
 * @var bool    $firevert_spectator_views_add_shadow
 * @var int     $firevert_spectator_views_border_radius
 */

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

use Ilabs\Firevert\Modules\SpectatorViews\Services\Type\SectionType;

?>

<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" class="firevert-form">
	<?php wp_nonce_field( 'firevert_spectator_views_save', 'firevert_spectator_views_nonce' ); ?>
	<input type="hidden" name="action" value="firevert_save_spectator_views">
	<input type="hidden" name="section" value="<?php echo esc_attr( SectionType::APPEARANCE ); ?>">
	<input type="hidden" name="post_ID" value="<?php echo esc_attr( $post->ID ); ?>">

	<div class="metabox-holder woocommerce">
		<div class="postbox wc-metabox">
			<div class="postbox-header">
				<h2 class="hndle">
					<span><?php esc_html_e( 'Color Scheme', 'firevert' ); ?></span>
				</h2>
			</div>
			<div class="inside">
				<?php
				$colors = array(
					'background'   => __( 'Background', 'firevert' ),
					'accent_color' => __( 'Accent color', 'firevert' ),
					'primary_text' => __( 'Primary text color', 'firevert' ),
				);

				foreach ( $colors as $suffix => $label ) :
					$key   = 'firevert_spectator_views_' . $suffix;
					$value = isset( $$key ) ? $$key : '';
					?>
					<p>
						<label for="<?php echo esc_attr( $key ); ?>">
							<?php echo esc_html( $label ); ?>
						</label><br/>
						<input type="color" name="<?php echo esc_attr( $key ); ?>"
								id="<?php echo esc_attr( $key ); ?>"
								value="<?php echo esc_attr( $value ); ?>"/>
					</p>
				<?php endforeach; ?>

				<p>
					<label>
						<input type="checkbox" name="firevert_spectator_views_add_border"
								value="1" <?php checked( true, $firevert_spectator_views_add_border ?? false ); ?> />
						<?php esc_html_e( 'Add border', 'firevert' ); ?>
					</label>
				</p>

				<p class="border-color-field" style="<?php echo isset( $firevert_spectator_views_add_border ) && $firevert_spectator_views_add_border ? '' : 'display: none;'; ?>">
					<label for="firevert_spectator_views_border_color">
						<?php esc_html_e( 'Border color', 'firevert' ); ?>
					</label><br/>
					<input type="color" name="firevert_spectator_views_border_color"
							id="firevert_spectator_views_border_color"
							value="<?php echo esc_attr( $firevert_spectator_views_border_color ?? '' ); ?>"/>
				</p>

				<p>
					<label for='firevert_spectator_views_border_radius'>
						<?php esc_html_e( 'Border radius (px)', 'firevert' ); ?>
					</label><br/>
					<input type="number" name="firevert_spectator_views_border_radius"
							id="firevert_spectator_views_border_radius"
							value="<?php echo esc_attr( $firevert_spectator_views_border_radius ?? 20 ); ?>"
							min="0" step="1"/>
				</p>

				<p>
					<label>
						<input type="checkbox" name="firevert_spectator_views_add_shadow"
								value="1" <?php checked( true, $firevert_spectator_views_add_shadow ?? false ); ?> />
						<?php esc_html_e( 'Add shadow', 'firevert' ); ?>
					</label>
				</p>
			</div>
		</div>
	</div>

	<?php submit_button( __( 'Save', 'firevert' ) ); ?>
</form>