<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistema de Venta de Boletos</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/index.css">
<style>
.app-title {
display: flex;
align-items: center;
gap: 15px;
}
.app-icon {
height: 40px;
width: auto;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container">
<div class="app-title">
<img src="images/icono.png" alt="TicketFlow Logo" class="app-icon">
<h1>TicketFlow</h1>
</div>
<div id="mensajeAlerta" class="alert alert-warning d-none" role="alert"></div>
<div class="main-content">
<div class="sala">
<h2>Selección de Asientos - Sala Principal</h2>
<div class="escenario">ESCENARIO</div>
<div class="filas" id="mapaAsientos">
<!-- El mapa de asientos se cargará dinámicamente con JavaScript -->
</div>
<div class="leyenda">
<div class="leyenda-item">
<div class="leyenda-color" style="background-color: #28a745;"></div>
<span>Disponible</span>
</div>
<div class="leyenda-item">
<div class="leyenda-color" style="background-color: #007bff;"></div>
<span>Seleccionado</span>
</div>
<div class="leyenda-item">
<div class="leyenda-color" style="background-color: #dc3545;"></div>
<span>Vendido</span>
</div>
</div>
</div>
<div class="sidebar">
<div class="concierto-detalles mb-4 p-3 bg-light border rounded">
<h3 class="mb-3"><i class="bi bi-music-note-beamed"></i> Detalles del Concierto</h3>
<ul class="list-unstyled">
<li class="mb-2"><i class="bi bi-person-circle"></i> <strong>Artista:</strong> Nombre del Artista</li>
<li class="mb-2"><i class="bi bi-calendar-event"></i> <strong>Fecha:</strong> 15 de abril, 2025</li>
<li class="mb-2"><i class="bi bi-clock"></i> <strong>Hora:</strong> 20:00 hrs</li>
<li class="mb-2"><i class="bi bi-geo-alt"></i> <strong>Lugar:</strong> Arena Principal</li>
<li class="mb-2"><i class="bi bi-hourglass-split"></i> <strong>Duración:</strong> 2 horas</li>
<li class="mb-2"><i class="bi bi-door-open"></i> <strong>Apertura:</strong> 18:30 hrs</li>
</ul>
</div>
<form id="formularioVenta">
<h3><i class="bi bi-cart"></i> Datos de Venta</h3>
<div class="form-group mb-3">
<label for="nombre_cliente"><i class="bi bi-person"></i> Nombre del Cliente:</label>
<input type="text" id="nombre_cliente" name="nombre_cliente" class="form-control" required>
</div>
<div class="resumen" id="resumen">
<h3><i class="bi bi-ticket-perforated"></i> Resumen de Selección</h3>
<p><i class="bi bi-seat"></i> Asientos seleccionados: <span id="asientosSeleccionados">Ninguno</span></p>
<p><i class="bi bi-cash"></i> Total: $<span id="totalVenta">0.00</span></p>
<button type="submit" id="btnVender" class="btn btn-primary"><i class="bi bi-check-circle"></i> Confirmar Venta</button>
</div>
<!-- Campo oculto para almacenar IDs de asientos seleccionados -->
<div id="asientosSeleccionadosInput"></div>
</form>
</div>
</div>
</div>
<br>
<h2>Graficos</h2>
<div class="row">
<div class="col-md-6">
<canvas id="graficoVendidos"></canvas>
</div>
<div class="col-md-6">
<canvas id="graficoLibres"></canvas>
</div>
</div>
<div class="row mt-4">
<div class="col-md-6">
<label for="fechaInicio">Fecha de Inicio:</label>
<input type="date" id="fechaInicio" class="form-control">
</div>
<div class="col-md-6">
<label for="fechaFin">Fecha de Fin:</label>
<input type="date" id="fechaFin" class="form-control">
</div>
</div>
<div class="row mt-2">
<div class="col-md-12">
<button id="btnFiltrar" class="btn btn-primary">Filtrar</button>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>