Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/AndresLopezCorrales/Boletilandia/llms.txt

Use this file to discover all available pages before exploring further.

Once you have found an event you want to attend, Boletilandia walks you through an interactive seat-selection experience before confirming your purchase. An SVG venue map lets you click individual seats, review the price and visibility rating, and submit your order — all without leaving the browser.
Seats are allocated on a first-come, first-served basis. There is no cancellation or refund flow in the current codebase. Once a seat is purchased (disponibilidad_asiento = 0) it cannot be released through the application.

​
Starting a Purchase

From the event detail page (/home-pagina_eventos/{evento}), click the Comprar button. This submits a hidden form via: 
POST /home-seleccionboleto_eventos/{evento}
The route is protected by the user middleware and is handled by BoletoController::mostrarPantallaBoletos(). The controller fetches all sections for the event together with their associated seats and passes both to the seat-selection view: 
$secciones = Seccion::where('evento_id', $evento->id)->with('asientos')->get();
return view('/home.seleccionboleto_eventos', compact('evento', 'secciones'));

​
The SVG Seat Map

The seat-selection page (home.seleccionboleto_eventos) renders an inline SVG diagram of the venue. The venue is divided into eight sections arranged in two zones relative to the stage at the bottom of the map:

​
Front Sections (A–D) — $1,000 per seat

SectionSeatsVisibility
A8Excelente
B8Muy Buena
C8Buena
D8Buena

​
Back Sections (E–H) — $500 per seat

SectionSeatsVisibility
E10buena
F10lejos
G10lejos
H10Muy lejos
Each seat in the SVG is an <a> element wrapping a <circle>. The element carries all necessary booking data as custom xlink: attributes: 
<a
  xlink:href=""
  class="asiento hover:fill-green-600"
  xlink:title="A1"
  xlink:data-seccion="A"
  xlink:data-asiento="1"
  xlink:data-precio="1000"
  xlink:data-visi="Excelente"
>
  <circle cx="20" cy="109" r="5" />
</a>

​
How Seat Data Reaches JavaScript

The Blade template injects the event record and all loaded sections into a global JavaScript object so that client-side scripts can cross-reference database state without additional HTTP requests: 
<script>
    window.eventoData = {
        evento: @json($evento),
        secciones: @json($secciones)
    };
</script>
get-attributes.js reads window.eventoData.secciones on DOMContentLoaded. For every asiento record found inside a section, the script locates the matching SVG <circle> element using the xlink:data-asiento and xlink:data-seccion attributes and adds the desactivado CSS class, visually marking already-purchased seats. Seats not found in the database carry no extra class.

​
Selecting a Seat and the Info Panel

When you click any seat circle, get-attributes.js reads the seat’s xlink:data-seccion, xlink:data-asiento, xlink:data-precio, and xlink:data-visi attributes, turns the selected seat green, and dynamically populates the info panel on the right side of the page (#mostrarInfoAsiento). The panel displays:
  • Asiento — combined section letter and seat number (e.g., A1)
  • Sección — the section letter
  • Precio — price in pesos (e.g., $1000)
  • Visibilidad — the human-readable visibility description from xlink:data-visi
  • A Comprar button (#comprarBtn) carrying the seat’s data as plain data-* attributes
Occupied seats are visually distinguished by the desactivado CSS class applied on page load, but clicking any seat — occupied or not — will still populate the info panel and show the Comprar button. The server-side duplicate check in comprarAsiento() is the authoritative guard against double-booking.

​
Submitting the Purchase

Clicking Comprar in the info panel triggers comprar-boleto.js, which reads the seat data from the button’s plain data-* attributes and dynamically builds and submits a hidden HTML form to: 
POST /comprar-asiento
The form is assembled entirely in JavaScript and includes a CSRF token read from the <meta name="csrf-token"> tag. The fields submitted are: 
inputAsiento.name  = 'numero_asiento'; // seat number integer
inputSeccion.name  = 'letra_seccion';  // section letter string
inputPrecio.name   = 'precio';         // numeric price
inputVisi.name     = 'info-visibilidad'; // visibility text
inputIdEvento.name = 'id_evento';      // event ID integer

​
Server-Side Validation

BoletoController::comprarAsiento() validates all five fields before proceeding: 
$validated = $request->validate([
    'numero_asiento'   => 'required|integer',
    'letra_seccion'    => 'required|string',
    'precio'           => 'required|numeric',
    'info-visibilidad' => 'required|string',
    'id_evento'        => 'required|integer'
]);

​
Duplicate Seat Check

After validation, the controller uses Seccion::firstOrCreate() to ensure the section row exists for the event, then checks whether a matching Asiento record with disponibilidad_asiento = 0 already exists: 
$asientoExistente = Asiento::where([
    'seccion_id'             => $seccion->id,
    'numero_asiento'         => $validated['numero_asiento'],
    'disponibilidad_asiento' => 0
])->exists();

if ($asientoExistente) {
    return redirect('/home');
}
If the seat is already taken, the request is silently redirected to /home with no error message. The user must select a different seat.

​
On Successful Purchase

When the seat is available, the controller creates an Asiento record with disponibilidad_asiento = 0 (occupied), stores three session keys, and redirects to /home with a flash message: 
session([
    'evento_id'      => $validated['id_evento'],
    'letra_seccion'  => $validated['letra_seccion'],
    'numero_asiento' => $validated['numero_asiento']
]);

return redirect('/home')->with('message', 'boleto comprado');

​
SweetAlert2 Confirmation Popup

On the /home redirect, the Blade template checks for both the message and evento_id session values. If both are present, a SweetAlert2 success dialog appears:
  • Title: Comprado!
  • Text: Boleto Comprado. Descarga tu boleto dando 'OK'
  • Icon: success (green checkmark)
Clicking OK creates a hidden GET form in JavaScript and submits it to /pdf-boleto/{evento_id} to generate and download your PDF ticket. See Downloading Tickets for what happens next.

Build docs developers (and LLMs) love

Get started for freeTalk to us