<?php
/**
 * Provide a public-facing view for the plugin
 *
 * This file is used to markup the public-facing aspects of the plugin.
 *
 * @link       https://belovdigital.agency
 * @since      1.0.0
 *
 * @package    ultimate-pregnancy-ovulation-calculator
 * @subpackage ultimate-pregnancy-ovulation-calculator/public/partials
 *
 * @global array $atts (input data)
 */

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

// Shortcode input data.
$ulpc_id     = uniqid( 'ulpc_' );
$ulpc        = new ULPC();
$style_theme = $ulpc->get_option( 'style_theme' );

$font_size      = $ulpc->get_option( 'font_size' );
$primary_color  = $ulpc->get_option( 'primary_color' );
$default_colors = $ulpc->get_default_colors( $primary_color );

foreach ( $default_colors['minimal'] as $name => $color ) {
	$colors_for_css_variables[ str_replace( '_', '-', $name ) ] = $color['default_color'];
}

$calculator_type = $ulpc->get_option( 'calculator_type' );
$default_method  = $ulpc->get_option( 'calculator_method' );
$date_format     = $ulpc->get_option( 'date_format' );
?>

<div 
	id="<?php echo esc_attr( $ulpc_id ); ?>"
	class="ultimate-pregnancy-ovulation-calculator ulpc-style-theme-<?php echo esc_attr( $style_theme ); ?>" 
	data-colors="<?php echo esc_attr( wp_json_encode( $colors_for_css_variables, JSON_UNESCAPED_UNICODE ) ); ?>"
	data-font-size="<?php echo esc_attr( $font_size ); ?>"
	data-calculator-type="<?php echo esc_attr( $calculator_type ); ?>"
	data-date-format="<?php echo esc_attr( $date_format ); ?>"
	>
	<?php wp_nonce_field( 'ulpc-nonce', 'ulpc_nonce_' . $ulpc_id ); ?>

	<?php
	$title_show = $ulpc->get_option( 'title_show' );
	$title_text = $ulpc->get_option( 'title_text' );
	?>
	<h2 class="ulpc-main-title" style="<?php echo 'show' === $title_show ? '' : 'display: none'; ?>">
		<?php echo esc_html( $title_text ); ?>
	</h2>

	<div class="ulpc-wrapper">
		<form class="ulpc-settings">

			<div class="ulpc-settings__wrapper">

				<?php
				if ( 'pregnancy' === $calculator_type ) :
					?>

					<div class="ulpc-settings__calculation-method">
					<?php
					$calculator_methods = $ulpc->get_calculator_methods();
					?>
					<p class="ulpc-input__label"><?php esc_html_e( 'Calculation Method', 'ultimate-pregnancy-ovulation-calculator' ); ?></p>
					<div class="ulpc-input">
						<select class="ulpc-select custom-select ulpc_calculator_method" name="ulpc_calculator_method">
							<?php
							foreach ( $calculator_methods as $key => $value ) :
								if ( 'ultrasound' === $key || 'ivf_transfer' === $key || 'conception_date' === $key ) {
									continue;
								}
								?>
								<option value="<?php echo esc_attr( $key ); ?>" <?php selected( $default_method, $key, true ); ?>><?php echo esc_html( $value ); ?></option>
							<?php endforeach; ?>
						</select>
					</div>
					</div>

					<div class="ulpc-settings__section" id="ulpc_due_date_settings_<?php echo esc_attr( $ulpc_id ); ?>" style="<?php echo 'due_date' === $default_method ? '' : 'display: none'; ?>">
						<div class="ulpc-settings__field">
							<div class="ulpc-input">
								<div class="ulpc-input__label-wrapper">
									<label for="ulpc_due_date_<?php echo esc_attr( $ulpc_id ); ?>" class="ulpc-input__label"><?php esc_html_e( 'Due Date', 'ultimate-pregnancy-ovulation-calculator' ); ?></label>
								</div>
								<input id="ulpc_due_date_<?php echo esc_attr( $ulpc_id ); ?>" class="ulpc-input__text ulpc-input__date ulpc_due_date" type="text" value="">
							</div>
						</div>
					</div>

					<div class="ulpc-settings__section" id="ulpc_last_period_settings_<?php echo esc_attr( $ulpc_id ); ?>" style="<?php echo 'last_period' === $default_method ? '' : 'display: none'; ?>">
						<div class="ulpc-settings__field">
							<div class="ulpc-input">
								<div class="ulpc-input__label-wrapper">
									<label for="ulpc_last_period_<?php echo esc_attr( $ulpc_id ); ?>" class="ulpc-input__label"><?php esc_html_e( 'The first day of your last period', 'ultimate-pregnancy-ovulation-calculator' ); ?></label>
								</div>
								<input id="ulpc_last_period_<?php echo esc_attr( $ulpc_id ); ?>" class="ulpc-input__text ulpc-input__date ulpc_last_period" type="text" value="">
							</div>
						</div>

						<div class="ulpc-settings__field">
							<?php $default_cycle_length = 28; ?>
							<p class="ulpc-input__label"><?php esc_html_e( 'Average cycle length', 'ultimate-pregnancy-ovulation-calculator' ); ?></p>
							<div class="ulpc-input ulpc-metric ulpc-input__term">
								<input id="ulpc_cycle_length_<?php echo esc_attr( $ulpc_id ); ?>" class="ulpc-validate ulpc_cycle_length" name="ulpc-cycle-length" type="number" step="1" min="20" max="42" required placeholder="0" value="<?php echo esc_attr( $default_cycle_length ); ?>">
								<label for="ulpc_cycle_length_<?php echo esc_attr( $ulpc_id ); ?>" class="ulpc-input__placeholder"><?php esc_html_e( 'days', 'ultimate-pregnancy-ovulation-calculator' ); ?></label>
							</div>
						</div>
					</div>

				<?php elseif ( 'ovulation' === $calculator_type ) : ?>
					<div class="ulpc-settings__section">
						<div class="ulpc-settings__field">
							<div class="ulpc-input">
								<div class="ulpc-input__label-wrapper">
									<label for="ulpc_last_period_<?php echo esc_attr( $ulpc_id ); ?>" class="ulpc-input__label"><?php esc_html_e( 'The first day of your last period', 'ultimate-pregnancy-ovulation-calculator' ); ?></label>
								</div>
								<input id="ulpc_last_period_<?php echo esc_attr( $ulpc_id ); ?>" class="ulpc-input__text ulpc-input__date ulpc_last_period" type="text" value="">
							</div>
						</div>

						<div class="ulpc-settings__field">
							<?php $default_cycle_length = 28; ?>
							<p class="ulpc-input__label"><?php esc_html_e( 'Average cycle length', 'ultimate-pregnancy-ovulation-calculator' ); ?></p>
							<div class="ulpc-input ulpc-metric ulpc-input__term">
								<input id="ulpc_cycle_length_<?php echo esc_attr( $ulpc_id ); ?>" class="ulpc-validate ulpc_cycle_length" name="ulpc-cycle-length" type="number" step="1" min="20" max="42" required placeholder="0" value="<?php echo esc_attr( $default_cycle_length ); ?>">
								<label for="ulpc_cycle_length_<?php echo esc_attr( $ulpc_id ); ?>" class="ulpc-input__placeholder"><?php esc_html_e( 'days', 'ultimate-pregnancy-ovulation-calculator' ); ?></label>
							</div>
						</div>
					</div>
				<?php endif; ?>

			</div>

		</form>

		<div class="ulpc-result">

			<div class="ulpc-result__data">
				<div class="ulpc-result__data-group">
					<div class="ulpc-result__data-result"></div>
				</div>
			</div>

		</div>
		<?php
		if ( current_user_can( 'administrator' ) ) :
			?>
			<div class="ulpc-settings__edit-link-wrapper">
				<a class="ulpc-settings__edit-link" target="_blank" href="<?php echo esc_url( admin_url( 'admin.php?page=ultimate-pregnancy-ovulation-calculator' ) ); ?>"><?php esc_html_e( 'Edit Calculator', 'ultimate-pregnancy-ovulation-calculator' ); ?></a>
			<?php
			$ulpc->display_tooltip(
				array(
					'text' => __( 'You can see it because you\'re logged in as an administrator.', 'ultimate-pregnancy-ovulation-calculator' ),
				)
			);
			?>
			</div>
				<?php
		endif;
		?>
	</div>


</div>
