150 lines
7.8 KiB
Plaintext
150 lines
7.8 KiB
Plaintext
<div class="min-h-screen bg-neutral-50" data-controller="ticket-cart" data-ticket-cart-event-id-value="<%= params[:id] %>">
|
|
<div class="max-w-7xl mx-auto md:px-4">
|
|
|
|
<nav class="mb-3 text-sm" aria-label="Breadcrumb">
|
|
<nav class="mb-3 text-sm" aria-label="Breadcrumb" role="navigation">
|
|
<span class="flex items-center text-slate-700" role="list">
|
|
<a href="/" class="hover:text-primary-600 transition-colors duration-200 flex items-center" role="listitem">
|
|
<svg class="w-4 h-4 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
|
</svg>
|
|
<span class="sr-only">Home</span>
|
|
</a>
|
|
|
|
<svg class="w-4 h-4 mx-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
|
|
<a href="/events" class="hover:text-primary-600 transition-colors duration-200 mx-2" role="listitem">
|
|
Events
|
|
</a>
|
|
|
|
<svg class="w-4 h-4 mx-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
|
|
<span class="mx-2 font-medium truncate max-w-[150px] sm:max-w-[250px]" role="listitem" aria-current="page">
|
|
<%= @event.name %>
|
|
</span>
|
|
</span>
|
|
</nav>
|
|
</nav>
|
|
|
|
<div class="bg-white rounded-2xl shadow-lg p-4 sm:p-6 md:p-8 mb-6 sm:mb-8">
|
|
<div class="flex flex-col lg:flex-row gap-6 md:gap-8">
|
|
<!-- Left Column: Event Info & Image -->
|
|
<div class="w-full md:w-1/2">
|
|
<h1 class="text-4xl font-bold text-primary mb-4"><%= @event.name %></h1>
|
|
|
|
<% if @event.image.present? %>
|
|
<div class="relative rounded-2xl overflow-hidden mb-6">
|
|
<%= image_tag @event.image, class: "w-full h-96 object-cover" %>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50"></div>
|
|
<div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black">
|
|
<h2 class="text-2xl font-semibold text-white mb-2">Event Details</h2>
|
|
<div class="flex flex-wrap gap-4 text-white">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 mr-2 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
|
</svg>
|
|
<span><%= @event.venue_name %></span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 mr-2 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<span><%= @event.start_time.strftime("%B %d, %Y at %I:%M %p") %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<h2 class="text-xl font-semibold text-primary mb-2">Description</h2>
|
|
<p class="text-lg text-slate-600 leading-relaxed"><%= @event.description %></p>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<div class="flex items-center space-x-4">
|
|
<svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
<span class="font-medium text-slate-800">Location:</span>
|
|
<span class="text-slate-600"><%= @event.venue_address %></span>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
|
</svg>
|
|
<span class="font-medium text-slate-800">Date:</span>
|
|
<span class="text-slate-600"><%= @event.start_time.strftime("%B %d, %Y") %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Ticket Selection -->
|
|
<div class="w-full md:w-1/2">
|
|
<div class="space-y-6">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-6">Available Tickets</h2>
|
|
|
|
<div class="space-y-4">
|
|
<% @event.ticket_types.each do |ticket_type| %>
|
|
<% sold_out = ticket_type.quantity <= ticket_type.tickets.count %>
|
|
<% remaining = ticket_type.quantity - ticket_type.tickets.count %>
|
|
|
|
<%= render 'components/ticket_card', {
|
|
id: ticket_type.id,
|
|
name: ticket_type.name,
|
|
description: ticket_type.description,
|
|
price_cents: ticket_type.price_cents,
|
|
quantity: ticket_type.quantity,
|
|
sold_out: sold_out,
|
|
remaining: remaining
|
|
} %>
|
|
<% end %>
|
|
|
|
<!-- Example of a sold out ticket type for demo purposes -->
|
|
<%= render 'components/ticket_card', {
|
|
name: "Early Bird Special",
|
|
description: "Limited time offer - discounted price for early purchasers",
|
|
price_cents: 1999,
|
|
quantity: 100,
|
|
sold_out: true,
|
|
remaining: 0
|
|
} %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sticky Checkout Bar -->
|
|
<div class="sticky bottom-0 bg-white border-t border-slate-200 p-6">
|
|
<div class="max-w-md mx-auto">
|
|
<div class="flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
<div class="text-center sm:text-left">
|
|
<p class="text-sm text-slate-600">Total: <span id="cart-count" class="font-semibold">0</span> tickets</p>
|
|
<p class="text-xl font-bold text-primary">€<span id="cart-total">0.00</span></p>
|
|
</div>
|
|
<button id="checkout-btn"
|
|
class="btn-primary w-full sm:w-auto px-8 py-3 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
|
|
disabled
|
|
onclick="proceedToCheckout()">
|
|
<span class="flex items-center justify-center">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
Continue to Checkout
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|