<?php

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

?>

<div class="settings-section">
	<h3><?php esc_html_e( 'Discount Label Style', 'discountify' ); ?></h3>
	<p class="description"><?php esc_html_e( 'Customize the appearance of discount labels on product pages.', 'discountify' ); ?></p>

	<div class="single-block">
		<div class="form-label"><?php esc_html_e( 'Text Color', 'discountify' ); ?></div>
		<div class="inline-input-section">
			<input type="color" name="label_text_color" id="label_text_color" value="<?php echo esc_attr( $label_text_color ); ?>" />
			<input type="text" class="color-text-input" value="<?php echo esc_attr( $label_text_color ); ?>" data-target="label_text_color" />
			<span class="color-reset dashicons dashicons-image-rotate" data-target="label_text_color" data-default="#ffffff" title="<?php esc_attr_e( 'Reset to default', 'discountify' ); ?>"></span>
		</div>
	</div>

	<div class="single-block">
		<div class="form-label"><?php esc_html_e( 'Background Color', 'discountify' ); ?></div>
		<div class="inline-input-section">
			<input type="color" name="label_bg_color" id="label_bg_color" value="<?php echo esc_attr( $label_bg_color ); ?>" />
			<input type="text" class="color-text-input" value="<?php echo esc_attr( $label_bg_color ); ?>" data-target="label_bg_color" />
			<span class="color-reset dashicons dashicons-image-rotate" data-target="label_bg_color" data-default="#56c596" title="<?php esc_attr_e( 'Reset to default', 'discountify' ); ?>"></span>
		</div>
	</div>

	<div class="single-block">
		<div class="form-label"><?php esc_html_e( 'Box Shadow', 'discountify' ); ?></div>
		<div class="input-section">
			<input type="text" name="label_box_shadow" id="label_box_shadow" value="<?php echo esc_attr( $label_box_shadow ); ?>" placeholder="0 4px 4px rgba(0, 0, 0, 0.15)" style="width: 280px;" />
		</div>
	</div>

	<div class="single-block">
		<div class="form-label"><?php esc_html_e( 'Border Color', 'discountify' ); ?></div>
		<div class="inline-input-section">
			<input type="color" name="label_border_color" id="label_border_color" value="<?php echo esc_attr( $label_border_color ); ?>" />
			<input type="text" class="color-text-input" value="<?php echo esc_attr( $label_border_color ); ?>" data-target="label_border_color" />
			<span class="color-reset dashicons dashicons-image-rotate" data-target="label_border_color" data-default="#56c596" title="<?php esc_attr_e( 'Reset to default', 'discountify' ); ?>"></span>
		</div>
	</div>

	<div class="single-block">
		<div class="form-label"><?php esc_html_e( 'Border Width', 'discountify' ); ?></div>
		<div class="input-section">
			<div class="input-wrap-one">
				<input type="number" name="label_border_width" id="label_border_width" value="<?php echo esc_attr( $label_border_width ); ?>" min="0" max="10" step="1" />
				<span class="extra-label">px</span>
			</div>
		</div>
	</div>

	<div class="single-block">
		<div class="form-label"><?php esc_html_e( 'Border Radius', 'discountify' ); ?></div>
		<div class="input-section">
			<div class="input-wrap-one">
				<input type="number" name="label_border_radius" id="label_border_radius" value="<?php echo esc_attr( $label_border_radius ); ?>" min="0" max="50" step="1" />
				<span class="extra-label">px</span>
			</div>
		</div>
	</div>
</div>

<style>
.settings-section h3 {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
}
.settings-section .description {
	margin-bottom: 20px;
	color: #666;
}
.settings-section .input-section input[type="color"] {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	vertical-align: middle;
}
.settings-section .input-section .color-text-input {
	width: 90px;
	margin-left: 10px;
	vertical-align: middle;
}
.settings-section .color-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: 8px;
	vertical-align: middle;
	cursor: pointer;
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
}
</style>

<script>
jQuery(document).ready(function($) {
	$('.color-text-input').on('input', function() {
		var target = $(this).data('target');
		$('#' + target).val($(this).val());
	});
	$('input[type="color"]').on('input', function() {
		var id = $(this).attr('id');
		$('.color-text-input[data-target="' + id + '"]').val($(this).val());
	});
	$('.color-reset').on('click', function() {
		var target = $(this).data('target');
		var defaultColor = $(this).data('default');
		$('#' + target).val(defaultColor);
		$('.color-text-input[data-target="' + target + '"]').val(defaultColor);
	});
});
</script>
