<?php
/**
 * Calculator style settings.
 *
 * @link       https://belovdigital.agency
 * @since      1.0.0
 *
 * @package    ultimate-pregnancy-ovulation-calculator
 * @subpackage ULPC/admin/partials
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

?>

<section id="styling-settings" class="ulpc-settings-section">
	<h2 class="ulpc-settings-section-title"><?php esc_html_e( 'Styling', 'ultimate-pregnancy-ovulation-calculator' ); ?></h2>

	<div id="color_settings" class="ulpc-settings-group">
		<?php $primary_color = $ulpc->get_option( 'primary_color' ); ?>

		<div class="ulpc-settings-group-title">
			<h3><?php esc_html_e( 'Color settings', 'ultimate-pregnancy-ovulation-calculator' ); ?></h3>
		</div>

		<div class="ulpc-settings-group-content">

			<div class="ulpc-settings-color-schema" >								
				<table class="ulpc-settings-color-table">
					<tbody>
						<tr>
							<td><label for="ulpc_schema_color_custom"><?php esc_html_e( 'Choose color scheme', 'ultimate-pregnancy-ovulation-calculator' ); ?></label></td>
							<td><input type="text" class="ulpc-color-custom" name="ulpc_options[primary_color]" id="ulpc_schema_color_custom" value="<?php echo esc_attr( $primary_color ); ?>" data-default-color="#325878" /></td>
						</tr>
					</tbody>
				</table>
			</div>							
		</div>

	</div>

	<div id="font_size_settings" class="ulpc-settings-group">
		<?php
		$default_font_sizes = $ulpc->get_font_sizes();
		$font_size          = $ulpc->get_option( 'font_size' );
		?>
		<div class="ulpc-settings-group-title">
			<h3><?php esc_html_e( 'Base font size', 'ultimate-pregnancy-ovulation-calculator' ); ?></h3>
		</div>
		<div class="ulpc-settings-group-content">
			<select id="ulpc_font_size" name="ulpc_options[font_size]">
				<?php
				foreach ( $default_font_sizes as $font ) :
					?>
					<option value="<?php echo esc_attr( $font['value'] ); ?>" <?php selected( $font['value'], $font_size, true ); ?>><?php echo esc_html( $font['name'] ); ?></option>
				<?php endforeach; ?>
			</select>

			<div class="ulpc-settings-group">
				<?php $disable_custom_font = $ulpc->get_option( 'disable_custom_font' ); ?>
				<label class="ulpc-checkbox">
					<input type="checkbox" name="ulpc_options[disable_custom_font]" value="disable" <?php checked( 'disable', $disable_custom_font ); ?>>
					<span><?php esc_html_e( 'Disable custom font', 'ultimate-pregnancy-ovulation-calculator' ); ?></span>
				</label>
			</div>
		</div>
	</div>

	<div class="ulpc-settings-submit">
		<?php echo esc_html( submit_button( null, 'ulpc-submit', 'publish', true, array( 'id' => 'publish' ) ) ); ?>
	</div>

</section>
