<?php
/**
 * LoginPress Presets Control Class.
 *
 * Class for Presets.
 *
 * @package LoginPress
 * @since  1.0.9
 * @version 1.5.12
 * @access public
 */

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

// Exit if WP_Customize_Control does not exist.
if ( ! class_exists( 'WP_Customize_Control' ) ) {
	return null;
}

/**
 * LoginPress Presets Control Class.
 *
 * Customizer control for LoginPress presets.
 *
 * @since  1.0.9
 * @version 1.5.12
 */
class LoginPress_Presets extends WP_Customize_Control {

	/**
	 * The type of customize control being rendered.
	 *
	 * @since  1.0.9
	 * @access public
	 * @var    string
	 */
	public $type = 'checkbox-multiple';

	/**
	 * Enqueue scripts/styles.
	 *
	 * @since  1.0.9
	 * @access public
	 * @return void
	 */
	public function enqueue() {
	}

	/**
	 * Displays the control content.
	 *
	 * @access public
	 *
	 * @since  1.0.9
	 * @version 3.0.8
	 * @return void
	 */
	public function render_content() {

		if ( empty( $this->choices ) ) {
			return;
		}

		$name = 'loginpress_preset-' . $this->id; ?>

		<span class="customize-control-title">
			<?php echo esc_attr( $this->label ); ?>
			<?php if ( ! empty( $this->description ) ) : ?>
				<span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
			<?php endif; ?>
		</span>
		<div id="input_<?php echo esc_attr( $this->id ); ?>" class="image">

			<?php foreach ( $this->choices as $val ) : ?>

				<?php $disabled = isset( $val['pro'] ) ? 'disabled' : ''; ?>
				<?php $disabled_link = isset( $val['link'] ) ? 'disabled' : ''; ?>
				<?php $disable_for_pro = 'disabled' === $disabled ? $disabled : $disabled_link; ?>
				<div class="loginpress_thumbnail">
					<input <?php echo esc_attr( $disable_for_pro ); ?> class="image-select" type="radio" value="<?php echo esc_attr( $val['id'] ); ?>" id="<?php echo esc_attr( $this->id . $val['id'] ); ?>" name="<?php echo esc_attr( $name ); ?>" <?php checked( $this->value(), $val['id'] ); ?> />
					<label for="<?php echo esc_attr( $this->id . $val['id'] ); ?>">
						<div class="loginpress_thumbnail_img">
							<img src="<?php echo esc_url( $val['thumbnail'] ); ?>" alt="<?php echo esc_attr( $val['id'] ); ?>" title="<?php echo esc_attr( $val['id'] ); ?>">
						</div> <!--  .img -->
						<h3><?php echo esc_html( $val['name'] ); ?></h3>
					</label>
					<?php if ( isset( $val['pro'] ) ) : ?>
						<?php $utm_content = str_replace( ' ', '+', str_replace( ' #2', '#2', is_array( $val['name'] ) ? (string) implode( ' ', $val['name'] ) : (string) $val['name'] ) ) . '+Template'; ?>
						<a href="https://loginpress.pro/pricing/?utm_source=loginpress-lite&utm_medium=customizer-themes&utm_campaign=pro-upgrade&utm_content=<?php echo esc_html( $utm_content ); ?>" target="_blank" class="no-available">
							<span><?php esc_html_e( 'Unlock Premium Feature', 'loginpress' ); ?></span>
						</a>
					<?php elseif ( isset( $val['link'] ) ) : ?>
						<a href="mailto:support@wpbrigade.com?subject=I want Custom Design for my login page." class="no-available">
							<span><?php esc_html_e( 'Contact us for Custom Design', 'loginpress' ); ?></span>
						</a>
					<?php endif; ?>
				</div> <!--  .loginpress_thumbnail -->

			<?php endforeach; ?>
		</div>

		<input name='presets_hidden' type="hidden" <?php $this->link(); ?> value="<?php echo esc_attr( $this->value() ); ?>" />
		<?php
	}
}
// phpcs:disable Universal.Files.SeparateFunctionsFromOO.Mixed -- Reason: local helper function used only in this file.
if ( ! function_exists( 'loginpress_presets_control_css' ) ) {

	/**
	 * Add Custom CSS for LoginPress Presets.
	 *
	 * @since 1.0.9
	 * @version 3.0.0
	 *
	 * @return void
	 */
	function loginpress_presets_control_css() {
		?>
	
		<style>
			#customize-theme-controls #accordion-section-customize_presets .accordion-section-title{
				background-color: #FFD700;
			}
			#customize-controls #accordion-section-customize_presets:hover>.accordion-section-title{
				background-color: #FFD700;
			}
			.customize-control-checkbox-multiple .image.ui-buttonset input[type=radio] {
				height: auto;
			}
			.yt_video_not_found {
				display: block;
				border-left: 4px solid #d63638;
				padding: 8px;
				margin-left: 0;
				margin-top: 10px;
				margin-bottom: 20px;
				background-color: #fff;
				box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
			}

			.loginpress_customizer_loader img{
				width: 15px;
				margin: 15px 15px -1px 20px;
			}
			.customize-control-checkbox-multiple .image.ui-buttonset label {
				display: inline-block;
				margin-right: 5px;
				margin-bottom: 5px;
			}
			.customize-control-checkbox-multiple .image.ui-buttonset label.ui-state-active {
				background: none;
			}
			.customize-control-checkbox-multiple .customize-control-radio-buttonset label {
				padding: 5px 10px;
				background: #f7f7f7;
				border-left: 1px solid #dedede;
				line-height: 35px;
			}
			.customize-control-checkbox-multiple label img {
				border: 1px solid #bbb;
				opacity: 0.5;
			}
			#customize-controls .customize-control-checkbox-multiple label img {
				max-width: 250px;
				height: auto;
				width: 100%;
				margin-bottom: 0;
				border: 0;
				display: block;
			}
			.customize-control-checkbox-multiple label.ui-state-active img {
				background: #dedede;
				border-color: #000;
				opacity: 1;
				margin-bottom: 0;
			}
			.customize-control-checkbox-multiple label.ui-state-hover img {
				opacity: 0.9;
				border-color: #999;
			}
			.customize-control-radio-buttonset label.ui-corner-left {
				border-radius: 3px 0 0 3px;
				border-left: 0;
			}
			.customize-control-radio-buttonset label.ui-corner-right {
				border-radius: 0 3px 3px 0;
			}
			#customize-control-customize_presets_settings input[type=radio]{
				display: none;
			}
			#customize-control-customize_presets_settings label{
				display: block;
				position: relative;
				width: 100%;
			}
			#customize-control-customize_presets_settings .loginpress_thumbnail{
				width: calc(50% - 10px);
				margin-bottom: 10px;
				position: relative;
				border: 5px solid transparent;
				-webkit-transition:all 0.2s ease-in-out;
				-moz-transition:all 0.2s ease-in-out;
				-ms-transition:all 0.2s ease-in-out;
				transition:all 0.2s ease-in-out;
			}
			#customize-control-customize_presets_settings .loginpress_thumbnail:nth-child(odd){
				float: left;
			}
			#customize-control-customize_presets_settings .loginpress_thumbnail:nth-child(even){
				float: right;
			}
			#customize-control-customize_presets_settings .image:after{
				content: '';
				display: table;
				clear: both;
			}
			#customize-control-customize_presets_settings h3{
				margin: 0;
				font: 400 14px 'Open Sans', Arial, Helvetica, sans-serif;
				line-height: 1.1;
				padding: 3px;
				text-align: center;
				background: #eee;
				color: #777777;
			}
			#customize-control-customize_presets_settings label .loginpress_thumbnail_img:after {
				content: '';
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: #2EB150;
				position: absolute;
				top: -5px;
				left: -5px;
				border-radius: 50%;
				visibility: hidden;
			}
			#customize-control-customize_presets_settings label .loginpress_thumbnail_img:before {
				height: 6px;
				width: 3px;
				-webkit-transform-origin: left top;
				-moz-transform-origin: left top;
				-ms-transform-origin: left top;
				-o-transform-origin: left top;
				transform-origin: left top;
				border-right: 3px solid white;
				border-top: 3px solid white;
				border-radius: 2.5px !important;
				content: '';
				position: absolute;
				z-index: 2;
				opacity: 0;
				margin-top: 0px;
				margin-left: -7px;
				top: 5px;
				left: 4px;
			}
			#customize-control-customize_presets_settings .loginpress_thumbnail_img{
				display: block;
				position: relative;
			}
			#customize-control-customize_presets_settings input[type="radio"]:checked + label .loginpress_thumbnail_img:before {
				-webkit-animation-delay: 100ms;
				-moz-animation-delay: 100ms;
				animation-delay: 100ms;
				-webkit-animation-duration: 1s;
				-moz-animation-duration: 1s;
				animation-duration: 1s;
				-webkit-animation-timing-function: ease;
				-moz-animation-timing-function: ease;
				animation-timing-function: ease;
				-webkit-animation-name: checkmark;
				-moz-animation-name: checkmark;
				animation-name: checkmark;
				-webkit-transform: scaleX(-1) rotate(135deg);
				-moz-transform: scaleX(-1) rotate(135deg);
				-ms-transform: scaleX(-1) rotate(135deg);
				-o-transform: scaleX(-1) rotate(135deg);
				transform: scaleX(-1) rotate(135deg);
				-webkit-animation-fill-mode: forwards;
				-moz-animation-fill-mode: forwards;
				animation-fill-mode: forwards;
				z-index: 2;
			}
			#customize-control-customize_presets_settings input[type="radio"]:checked + label .loginpress_thumbnail_img:after{
				visibility: visible;
			}
			#customize-control-customize_presets_settings img{
				margin-bottom: 0;
			}
			#customize-control-customize_presets_settings input[type="radio"]:checked + label img{
				opacity: 1;
			}
			.no-available{
				top: 0;
				left: 0;
				background: rgba(204, 204, 204, 0.8);
				content: '';
				position: absolute;
				bottom: 0;
				right: 0;
				z-index: 100;
				text-align: center;
				font-weight: bold;
				color: #000;
				-webkit-transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-ms-transition: all 0.2s ease-in-out;
				transition: all 0.2s ease-in-out;
				opacity: 0;
				visibility: hidden;
				-webkit-transform: scale(.5);
				-moz-transform: scale(.5);
				-ms-transform: scale(.5);
				transform: scale(.5);
				text-decoration: none !important;
				display: flex;
				align-items: center;
			}
			#customize-control-customize_presets_settings .loginpress_thumbnail:hover input[type="radio"]:disabled ~ .no-available{
				opacity: 1;
				visibility: visible;
				color: #000;
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
			}
			#customize-control-customize_presets_settings .loginpress_thumbnail:hover{
				border-color: #ccc;
			}

			@-webkit-keyframes checkmark {
				0% {
					height: 0;
					width: 0;
					opacity: 1;
				}
				20% {
					height: 0;
					width: 5px;
					opacity: 1;
				}
				40% {
					height: 10px;
					width: 5px;
					opacity: 1;
				}
				100% {
					height: 10px;
					width: 5px;
					opacity: 1;
				}
			}
			@-moz-keyframes checkmark {
				0% {
					height: 0;
					width: 0;
					opacity: 1;
				}
				20% {
					height: 0;
					width: 5px;
					opacity: 1;
				}
				40% {
					height: 10px;
					width: 5px;
					opacity: 1;
				}
				100% {
					height: 10px;
					width: 5px;
					opacity: 1;
				}
			}
			@keyframes checkmark {
				0% {
					height: 0;
					width: 0;
					opacity: 1;
				}
				20% {
					height: 0;
					width: 5px;
					opacity: 1;
				}
				40% {
					height: 10px;
					width: 5px;
					opacity: 1;
				}
				100% {
					height: 10px;
					width: 5px;
					opacity: 1;
				}
			}

		</style>
		<?php
	}
}
add_action( 'customize_controls_print_styles', 'loginpress_presets_control_css' );
// phpcs:enable Universal.Files.SeparateFunctionsFromOO.Mixed
?>
