<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comprobante de Venta</title>
<link rel="stylesheet" href="css/comprobante.css">
</head>
<body>
<div class="container">
<h1>Comprobante de Venta</h1>
<div class="comprobante" id="comprobante-imprimible">
<div class="header">
<h2>Boletos para Concierto - Sala Principal</h2>
</div>
<div class="info-venta">
<div>
<div class="info-item">
<span class="info-label">Nº de Venta:</span>
<span id="id-venta"></span>
</div>
<div class="info-item">
<span class="info-label">Fecha:</span>
<span id="fecha-venta"></span>
</div>
</div>
<div>
<div class="info-item">
<span class="info-label">Cliente:</span>
<span id="cliente-venta"></span>
</div>
</div>
</div>
<h3>Detalle de Boletos</h3>
<table>
<thead>
<tr>
<th>#</th>
<th>Ubicación</th>
<th>Precio</th>
</tr>
</thead>
<tbody id="detalle-boletos">
<!-- El contenido de la tabla se generará dinámicamente con JavaScript -->
</tbody>
</table>
<div class="total">
Total: $<span id="total-venta"></span>
</div>
<div class="qr-container">
<div id="qr-code"></div>
<p class="qr-info">Este QR contiene el número de venta para verificación</p>
</div>
<div class="mensaje">
<p>¡Gracias por su compra!</p>
<p>Este comprobante es su entrada oficial para el evento.</p>
<p>Por favor, preséntelo en la entrada del concierto.</p>
</div>
</div>
<div class="acciones">
<a href="index.html" class="btn">Volver a Ventas</a>
<button class="btn btn-print" onclick="imprimirComprobante()">Imprimir Comprobante</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="js/comprobante.js"></script>
</body>
</html>