<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<section class="panel">
	<div class="actions" style="justify-content:flex-start; margin-top:0; margin-bottom:18px;">
		<a class="btn btn-outline" href="<?php echo site_url('inicio'); ?>">Regresar</a>
	</div>

	<h2 style="margin-bottom:8px;">Ventas</h2>

	<?php if (!empty($can_view_rank) && !empty($vendor_rank)) { ?>
		<div style="margin-bottom:16px; padding:18px; border-radius:20px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); text-align:center;">
			<div style="font-size:calc(1.45rem * var(--app-text-size)); color:var(--theme); font-weight:800;">
				Posicion #<?php echo (int)$vendor_rank['position']; ?>
			</div>
		</div>
	<?php } ?>

	<?php if (!empty($motivational_message)) { ?>
		<div style="margin-bottom:18px; padding:16px 18px; border-radius:20px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); font-size:calc(1rem * var(--app-text-size)); color:var(--ink); font-weight:700;">
			<?php echo htmlspecialchars($motivational_message, ENT_QUOTES, 'UTF-8'); ?>
		</div>
	<?php } ?>

	<?php if (empty($sales_today)) { ?>
		<div class="empty">No hay ventas registradas hoy para este vendedor.</div>
	<?php } else { ?>
		<div style="display:grid; gap:14px;">
			<?php foreach ($sales_today as $sale) { ?>
				<div class="sale-card" style="padding:16px; border-radius:20px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); display:grid; gap:8px; cursor:pointer;" tabindex="0" role="button" aria-expanded="false">
					<div style="display:flex; align-items:flex-start; justify-content:space-between; gap:12px;">
						<div style="font-size:calc(1rem * var(--app-text-size)); font-weight:700; color:var(--ink);">
							Venta #<?php echo (int)$sale['sale_id']; ?>
						</div>
						<div style="font-size:calc(0.9rem * var(--app-text-size)); color:var(--muted);">
							<?php echo htmlspecialchars(date('d/m/Y h:i:s A', strtotime($sale['sale_time'])), ENT_QUOTES, 'UTF-8'); ?>
						</div>
					</div>

					<div style="font-size:calc(0.98rem * var(--app-text-size)); color:var(--muted); font-weight:600;">
						Pasado por: <?php echo htmlspecialchars($sale['cashier_name'], ENT_QUOTES, 'UTF-8'); ?>
					</div>

					<div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
						<div style="font-size:calc(1.4rem * var(--app-text-size)); font-weight:700; color:var(--theme);">
							<?php echo number_format((float)$sale['total'], 2, ',', '.'); ?>
						</div>
						<div style="font-size:calc(0.92rem * var(--app-text-size)); color:var(--muted); font-weight:700;">
							Tocar para ver articulos
						</div>
					</div>

					<div class="sale-items" style="display:none; margin-top:6px; padding-top:10px;">
						<?php if (empty($sale['items'])) { ?>
							<div style="font-size:calc(0.95rem * var(--app-text-size)); color:var(--muted);">Sin articulos visibles.</div>
						<?php } else { ?>
							<div style="display:grid; gap:8px;">
								<?php foreach ($sale['items'] as $item) { ?>
									<div style="font-size:calc(0.96rem * var(--app-text-size)); color:var(--ink);">
										<span style="font-weight:700;"><?php echo number_format((float)$item['quantity'], 0, ',', '.'); ?> x</span>
										<?php echo htmlspecialchars($item['name'], ENT_QUOTES, 'UTF-8'); ?>
									</div>
								<?php } ?>
							</div>
						<?php } ?>
					</div>
				</div>
			<?php } ?>
		</div>
	<?php } ?>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
	Array.prototype.slice.call(document.querySelectorAll('.sale-card')).forEach(function (card) {
		var details = card.querySelector('.sale-items');
		if (!details) {
			return;
		}

		var toggle = function () {
			var isOpen = details.style.display === 'block';
			details.style.display = isOpen ? 'none' : 'block';
			card.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
		};

		card.addEventListener('click', function (event) {
			if (event.target.closest('a, button')) {
				return;
			}
			toggle();
		});

		card.addEventListener('keydown', function (event) {
			if (event.key === 'Enter' || event.key === ' ') {
				event.preventDefault();
				toggle();
			}
		});
	});
});
</script>
