<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<section class="panel">
	<form method="post" action="<?php echo site_url('configuracion/descuentos'); ?>" autocomplete="off" style="display:grid; gap:14px;">
		<div class="actions" style="justify-content:flex-start; margin-top:0; margin-bottom:4px;">
			<a class="btn btn-outline" href="<?php echo site_url('configuracion'); ?>">Regresar</a>
		</div>

		<h2 style="margin-bottom:0;">Descuentos</h2>
		<p>Configura por separado el descuento del precio en divisa y el descuento del precio en bolivares.</p>

		<div style="display:grid; gap:14px;">
			<div class="field" style="margin-top:0;">
				<label for="discount_percent_divisa">Descuento divisa (%)</label>
				<input
					id="discount_percent_divisa"
					type="number"
					step="0.01"
					min="0"
					max="100"
					name="discount_percent_divisa"
					value="<?php echo htmlspecialchars(number_format((float)$discount_percent_divisa, 2, '.', ''), ENT_QUOTES, 'UTF-8'); ?>"
				/>
			</div>

			<div class="field" style="margin-top:0;">
				<label for="discount_percent_bs">Descuento bolivares (%)</label>
				<input
					id="discount_percent_bs"
					type="number"
					step="0.01"
					min="0"
					max="100"
					name="discount_percent_bs"
					value="<?php echo htmlspecialchars(number_format((float)$discount_percent_bs, 2, '.', ''), ENT_QUOTES, 'UTF-8'); ?>"
				/>
			</div>
		</div>

		<div style="padding:14px; border-radius:16px; background:var(--panel); box-shadow: inset 0 0 0 1px rgba(20,41,64,0.08);">
			<div style="font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#617386; margin-bottom:8px;">Vista previa</div>
			<div style="display:grid; gap:10px;">
				<div style="font-size:1rem; color:var(--ink);">Precio divisa normal: <strong>10,00</strong></div>
				<div id="discount-preview-divisa" style="font-size:1rem; color:var(--ink);">Con descuento divisa: <strong>10,00</strong></div>
				<div style="font-size:1rem; color:var(--ink);">Precio bolivares normal: <strong>1.000,00</strong></div>
				<div id="discount-preview-bs" style="font-size:1rem; color:var(--ink);">Con descuento bolivares: <strong>1.000,00</strong></div>
			</div>
		</div>

		<div class="actions" style="justify-content:flex-end;">
			<button class="btn" type="submit">Guardar</button>
		</div>
	</form>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
	var inputDivisa = document.getElementById('discount_percent_divisa');
	var inputBs = document.getElementById('discount_percent_bs');
	var previewDivisa = document.getElementById('discount-preview-divisa');
	var previewBs = document.getElementById('discount-preview-bs');
	var updatePreview = function () {
		if (!inputDivisa || !inputBs || !previewDivisa || !previewBs) {
			return;
		}
		var percentDivisa = parseFloat(inputDivisa.value || '0');
		var percentBs = parseFloat(inputBs.value || '0');
		if (isNaN(percentDivisa) || percentDivisa < 0) {
			percentDivisa = 0;
		}
		if (isNaN(percentBs) || percentBs < 0) {
			percentBs = 0;
		}
		var baseDivisa = 10;
		var baseBs = 1000;
		var discountedDivisa = baseDivisa - (baseDivisa * (percentDivisa / 100));
		var discountedBs = baseBs - (baseBs * (percentBs / 100));
		previewDivisa.innerHTML = 'Con descuento divisa: <strong>' + discountedDivisa.toFixed(2).replace('.', ',') + '</strong>';
		previewBs.innerHTML = 'Con descuento bolivares: <strong>' + discountedBs.toFixed(2).replace('.', ',') + '</strong>';
	};

	inputDivisa.addEventListener('input', updatePreview);
	inputDivisa.addEventListener('change', updatePreview);
	inputBs.addEventListener('input', updatePreview);
	inputBs.addEventListener('change', updatePreview);
	updatePreview();
});
</script>
