<?php
/**
 * Provide a admin area view for the plugin
 *
 * This file is used to markup the admin-facing aspects of the plugin.
 *
 * @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.
}

$ulpc = new ULPC();
?>

<form method="post" action="options.php" novalidate>
	<?php settings_fields( 'ulpc-settings-group' ); ?>

	<div class="ulpc-settings">

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

			<div class="ulpc-settings-content">
				<div class="ulpc-settings-header">
					<?php wp_nonce_field( 'ulpc-nonce', 'ulpc_nonce' ); ?>

					<div class="ulpc-header">
						<div class="ulpc-header-wrap">
							<div class="ulpc-header-icon">
								<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#fff"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
							</div>
							<span class="ulpc-header-title"><?php echo esc_html( get_admin_page_title() ); ?></span>
						</div>
					</div>

					<div class="ulpc-getting-started">
						<div class="ulpc-getting-started-step">
							<span class="ulpc-getting-started-number">1</span>
							<span><?php esc_html_e( 'Configure your calculator settings and styling below.', 'ultimate-pregnancy-ovulation-calculator' ); ?></span>
						</div>
						<div class="ulpc-getting-started-step">
							<span class="ulpc-getting-started-number">2</span>
							<span><?php esc_html_e( 'Copy the shortcode and paste it on any page, post, or widget.', 'ultimate-pregnancy-ovulation-calculator' ); ?></span>
						</div>
					</div>
					<div class="ulpc-shortcode-mob"></div>

				</div>

				<div class="ulpc-settings-tabs">

					<?php require 'navigation.php'; ?>

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

						<?php
						require 'main-settings.php';
						require 'style-settings.php';
						require 'pro-integrations-mock.php';
						require 'pro-labels-mock.php';
						require 'pro-templates-mock.php';
						?>

					</div>

				</div>
			</div>

			<div class="ulpc-settings-sidebar">

				<div class="ulpc-banner ulpc-banner--pro">
					<div class="ulpc-banner-pro-badge"><?php esc_html_e( 'PRO', 'ultimate-pregnancy-ovulation-calculator' ); ?></div>
					<div class="ulpc-banner-title"><?php esc_html_e( 'Unlock Full Power', 'ultimate-pregnancy-ovulation-calculator' ); ?></div>
					<div class="ulpc-banner-description"><?php esc_html_e( 'Get access to all premium features and take your calculator to the next level.', 'ultimate-pregnancy-ovulation-calculator' ); ?></div>
					<ul class="ulpc-banner-features">
						<li><?php esc_html_e( 'Unlimited calculators', 'ultimate-pregnancy-ovulation-calculator' ); ?></li>
						<li><?php esc_html_e( 'PDF results & email templates', 'ultimate-pregnancy-ovulation-calculator' ); ?></li>
						<li><?php esc_html_e( 'Custom labels & translations', 'ultimate-pregnancy-ovulation-calculator' ); ?></li>
						<li><?php esc_html_e( 'Mailchimp, HubSpot, Kit', 'ultimate-pregnancy-ovulation-calculator' ); ?></li>
						<li><?php esc_html_e( 'Zapier, Make, reCAPTCHA', 'ultimate-pregnancy-ovulation-calculator' ); ?></li>
						<li><?php esc_html_e( 'Advanced styling & layouts', 'ultimate-pregnancy-ovulation-calculator' ); ?></li>
					</ul>
					<a class="ulpc-banner-cta" href="https://wp-pregnancy.com" target="_blank"><?php esc_html_e( 'Upgrade to PRO', 'ultimate-pregnancy-ovulation-calculator' ); ?> &rarr;</a>
				</div>

				<div class="ulpc-banner ulpc-banner--review">
					<img src="<?php echo esc_url( ULPC_PLUGIN_URL . 'admin/images/review-stars.svg' ); ?>" alt="" class="ulpc-banner-stars">
					<div class="ulpc-banner-description">
						<p>
							<?php
							$trustpilot_url = 'https://www.trustpilot.com/evaluate/wp-pregnancy.com';
							$text           = sprintf(
								__(
									'We hope you love it, and we would really appreciate it if you would give us a <a href="%1$s" target="_blank">5 stars rating</a>.',
									'ultimate-pregnancy-ovulation-calculator'
								),
								esc_url( $trustpilot_url )
							);
							echo wp_kses(
								$text,
								array(
									'a' => array(
										'href'   => array(),
										'target' => array(),
									),
								)
							);
							?>
						</p>
					</div>
					<a href="https://www.trustpilot.com/evaluate/wp-pregnancy.com" class="ulpc-banner-button" target="_blank"><?php esc_html_e( 'Rate the Plugin', 'ultimate-pregnancy-ovulation-calculator' ); ?></a>
				</div>

			</div>
		</div>
	</div>
</form>
