<?php
/**
 * Today's Deal popup.
 *
 * @package shopbar
 */

defined( 'ABSPATH' ) || exit;

if ( ! get_theme_mod( 'shopbar_deal_enable', true ) ) {
	return;
}

$deal_shop_url = ( shopbar_is_active_woocommerce() && function_exists( 'wc_get_page_permalink' ) )
	? wc_get_page_permalink( 'shop' )
	: home_url( '/' );

$deal_badge      = get_theme_mod( 'shopbar_deal_badge', __( 'Limited Time Offer', 'shopbar' ) );
$deal_discount   = get_theme_mod( 'shopbar_deal_discount', __( '50%', 'shopbar' ) );
$deal_title      = get_theme_mod( 'shopbar_deal_title', __( 'Flash Sale — Up to 50% Off', 'shopbar' ) );
$deal_text       = get_theme_mod( 'shopbar_deal_text', __( 'Enjoy exclusive savings across our entire collection. Use the code below at checkout to claim your discount before it is gone.', 'shopbar' ) );
$deal_coupon     = get_theme_mod( 'shopbar_deal_coupon', 'SHOP50' );
$deal_btn_text   = get_theme_mod( 'shopbar_deal_button_text', __( 'Shop the Sale', 'shopbar' ) );
$deal_btn_url    = get_theme_mod( 'shopbar_deal_button_url', $deal_shop_url );
?>

<div class="deal-popup" id="todaysDealModal" role="dialog" aria-modal="true" aria-labelledby="dealPopupTitle" aria-hidden="true">
	<div class="deal-popup__backdrop" data-deal-close></div>

	<div class="deal-popup__dialog" role="document">
		<button type="button" class="deal-popup__close" data-deal-close aria-label="<?php esc_attr_e( 'Close deal popup', 'shopbar' ); ?>">
			<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<line x1="18" y1="6" x2="6" y2="18"></line>
				<line x1="6" y1="6" x2="18" y2="18"></line>
			</svg>
		</button>

		<div class="deal-popup__grid">

			<!-- Media panel -->
			<div class="deal-popup__media" aria-hidden="true">
				<span class="deal-popup__media-burst"><?php shopbar_icon( 'zap', 44 ); ?></span>
				<div class="deal-popup__media-discount">
					<span class="deal-popup__media-num"><?php echo esc_html( $deal_discount ); ?></span>
					<span class="deal-popup__media-label"><?php esc_html_e( 'OFF', 'shopbar' ); ?></span>
				</div>
				<span class="deal-popup__media-tag"><?php esc_html_e( 'Site Wide', 'shopbar' ); ?></span>
			</div>

			<!-- Body -->
			<div class="deal-popup__body">
				<span class="deal-popup__badge"><?php echo esc_html( $deal_badge ); ?></span>
				<h2 class="deal-popup__title" id="dealPopupTitle"><?php echo esc_html( $deal_title ); ?></h2>
				<p class="deal-popup__text"><?php echo esc_html( $deal_text ); ?></p>

				<div class="deal-popup__coupon">
					<div class="deal-popup__coupon-code">
						<span class="deal-popup__coupon-label"><?php esc_html_e( 'Coupon Code', 'shopbar' ); ?></span>
						<span class="deal-popup__coupon-value" id="dealCouponValue"><?php echo esc_html( $deal_coupon ); ?></span>
					</div>
					<button type="button" class="deal-popup__coupon-copy" id="dealCopyBtn" data-coupon="<?php echo esc_attr( $deal_coupon ); ?>" data-copied-text="<?php esc_attr_e( 'Copied!', 'shopbar' ); ?>">
						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
							<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
							<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
						</svg>
						<span class="deal-popup__coupon-copy-text"><?php esc_html_e( 'Copy', 'shopbar' ); ?></span>
					</button>
				</div>

				<a href="<?php echo esc_url( $deal_btn_url ); ?>" class="deal-popup__btn">
					<?php echo esc_html( $deal_btn_text ); ?>
					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
						<path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
					</svg>
				</a>
			</div>

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