kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: Implement complete event ticketing system with Stripe integration and email confirmations

Browse Source 
- Enhanced events index page with improved visual design and better information display
- Completely redesigned event show page with modern layout, ticket selection, and checkout functionality
- Implemented Stripe payment processing for ticket purchases
- Created ticket generation system with PDF tickets and QR codes
- Added email confirmation system with ticket attachments
- Updated database configuration to use SQLite for easier development setup
- Fixed gem dependencies and resolved conflicts
- Improved error handling throughout the checkout process
- Enhanced Stimulus controller for ticket cart management
- Added proper redirect handling for successful and cancelled payments
This commit is contained in:
kbe
2025-08-28 18:03:48 +02:00
parent 49ad935855
commit 4e2445198f
23 changed files with 1376 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
app/views/events/index.html.erb
View File

@@ -1,53 +1,91 @@
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
<h1 class="text-3xl font-bold text-gray-900 mb-8">Événements à venir</h1>
<div class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold text-gray-900">Événements à venir</h1>
<div class="text-sm text-gray-500">
<%= @events.total_count %> événements trouvés
</div>
</div>
<% if @events.any? %>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<% @events.each do |event| %>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<% if event.image.present? %>
<div class="h-48 overflow-hidden">
<%= image_tag event.image, class: "w-full h-full object-cover" %>
</div>
<% else %>
<div class="h-48 bg-gradient-to-r from-purple-500 to-indigo-600 flex items-center justify-center">
<svg class="w-16 h-16 text-white opacity-80" 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" />
</svg>
</div>
<% end %>
<div class="p-6">
<div class="flex justify-between items-start">
<div class="flex justify-between items-start mb-3">
<div>
<h2 class="text-xl font-bold text-gray-900"><%= event.name %></h2>
<p class="text-sm text-gray-500 mt-1"><%= event.user.email %></p>
<h2 class="text-xl font-bold text-gray-900 line-clamp-1"><%= event.name %></h2>
<p class="text-sm text-gray-500 mt-1 flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<%= event.user.email.split('@').first %>
</p>
</div>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
<%= event.start_time.strftime("%d/%m/%Y") %>
<%= event.start_time.strftime("%d/%m") %>
</span>
</div>
<div class="mt-4">
<div class="mb-4">
<p class="text-gray-600 text-sm line-clamp-2"><%= event.description.truncate(100) %></p>
</div>
<div class="mt-4 flex justify-between items-center">
<div class="flex justify-between items-center">
<div>
<% if event.ticket_types.any? %>
<p class="text-sm font-medium text-gray-900">
À partir de <%= format_price(event.ticket_types.minimum(:price_cents)) %>€
</p>
<p class="text-xs text-gray-500 flex items-center mt-1">
<svg class="w-4 h-4 mr-1" 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" />
</svg>
<%= event.venue_name.truncate(20) %>
</p>
<% else %>
<p class="text-sm text-gray-500">Pas de billets disponibles</p>
<% end %>
</div>
<%= link_to "Voir les détails", event_path(event.slug, event), class: "inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" %>
<%= link_to event_path(event.slug, event), class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all duration-200" do %>
Détails
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<% end %>
</div>
</div>
</div>
<% end %>
</div>
<div class="mt-8">
<%# paginate @events, theme: 'twitter_bootstrap' %>
<%= paginate @events %>
<div class="mt-8 flex justify-center">
<%= paginate @events, theme: "tailwind" %>
</div>
<% else %>
<div class="text-center py-12">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<h3 class="mt-2 text-sm font-medium text-gray-900">Aucun événement disponible</h3>
<p class="mt-1 text-sm text-gray-500">Il n'y a aucun événement à venir pour le moment.</p>
<div class="text-center py-16">
<div class="mx-auto max-w-md">
<div class="w-24 h-24 mx-auto bg-gradient-to-r from-purple-100 to-indigo-100 rounded-full flex items-center justify-center mb-6">
<svg class="w-12 h-12 text-purple-600" 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" />
</svg>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Aucun événement disponible</h3>
<p class="text-gray-500 mb-6">Il n'y a aucun événement à venir pour le moment.</p>
<%= link_to "Retour à l'accueil", root_path, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" %>
</div>
</div>
<% end %>
</div>

150
app/views/events/payment_success.html.erb Executable file
View File

@@ -0,0 +1,150 @@
<div class="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-50 py-12 px-4 sm:px-6">
<div class="max-w-3xl mx-auto">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
<!-- Header -->
<div class="bg-gradient-to-r from-purple-600 to-indigo-700 px-6 py-8 text-center">
<div class="flex justify-center mb-4">
<div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
</div>
<h1 class="text-3xl font-bold text-white mb-2">Paiement réussi !</h1>
<p class="text-purple-100">Félicitations pour votre achat</p>
</div>
<!-- Content -->
<div class="p-6 sm:p-8">
<div class="text-center mb-8">
<p class="text-xl text-gray-700">
Vos billets pour <span class="font-bold text-purple-700"><%= @event.name %></span> ont été achetés avec succès.
</p>
<p class="text-gray-500 mt-2">
Un email de confirmation avec vos billets a été envoyé à <span class="font-medium"><%= current_user.email %></span>
</p>
</div>
<!-- Event Details -->
<div class="bg-gray-50 rounded-xl p-6 mb-8">
<h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
<svg class="w-5 h-5 mr-2 text-purple-600" 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>
Détails de l'événement
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex items-center p-3 bg-white rounded-lg">
<svg class="w-5 h-5 text-purple-500 mr-3" 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>
<div>
<p class="text-xs text-gray-500">Lieu</p>
<p class="font-medium"><%= @event.venue_name %></p>
</div>
</div>
<div class="flex items-center p-3 bg-white rounded-lg">
<svg class="w-5 h-5 text-purple-500 mr-3" 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>
<div>
<p class="text-xs text-gray-500">Date & Heure</p>
<p class="font-medium"><%= @event.start_time.strftime("%d %B %Y à %H:%M") %></p>
</div>
</div>
</div>
</div>
<!-- Tickets -->
<div class="mb-8">
<h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
<svg class="w-5 h-5 mr-2 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"></path>
</svg>
Vos billets
</h2>
<div class="space-y-4">
<% @tickets.each do |ticket| %>
<div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl border border-purple-100 p-5">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div class="flex-1">
<div class="flex items-center">
<div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center mr-4">
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"></path>
</svg>
</div>
<div>
<h3 class="font-bold text-gray-900"><%= ticket.ticket_type.name %></h3>
<p class="text-sm text-gray-600">Prix: <span class="font-medium"><%= number_to_currency(ticket.price_cents / 100.0, unit: "€") %></span></p>
</div>
</div>
</div>
<div class="flex items-center space-x-2">
<%= link_to download_ticket_path(ticket, format: :pdf),
class: "inline-flex items-center px-4 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg hover:from-purple-700 hover:to-indigo-700 transition-all duration-200 text-sm font-medium shadow-sm" do %>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
Télécharger PDF
<% end %>
</div>
</div>
<div class="mt-4 pt-4 border-t border-purple-100 flex items-center justify-between">
<div class="flex items-center">
<svg class="w-4 h-4 text-gray-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
</svg>
<span class="text-xs text-gray-500">Code QR: <%= ticket.qr_code[0..7] %></span>
</div>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
Actif
</span>
</div>
</div>
<% end %>
</div>
</div>
<!-- Important Notice -->
<div class="bg-blue-50 border border-blue-100 rounded-xl p-5 mb-8">
<div class="flex">
<svg class="w-5 h-5 text-blue-500 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="font-bold text-blue-800 mb-1">Important</h3>
<p class="text-sm text-blue-700">
Veuillez télécharger et sauvegarder vos billets. Présentez-les à l'entrée du lieu pour accéder à l'événement.
Un email de confirmation avec vos billets a été envoyé à votre adresse email.
</p>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<%= link_to dashboard_path,
class: "inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl hover:from-purple-700 hover:to-indigo-700 transition-all duration-200 font-medium shadow-sm" do %>
<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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
Tableau de bord
<% end %>
<%= link_to events_path,
class: "inline-flex items-center justify-center px-6 py-3 bg-white text-gray-700 rounded-xl border border-gray-300 hover:bg-gray-50 transition-all duration-200 font-medium shadow-sm" do %>
<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="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>
Voir plus d'événements
<% end %>
</div>
</div>
</div>
</div>
</div>

308
app/views/events/show.html.erb
View File

@@ -1,147 +1,185 @@
<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" />
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100" data-controller="ticket-cart" data-ticket-cart-event-id-value="<%= params[:id] %>">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Breadcrumb -->
<nav class="mb-6" aria-label="Breadcrumb">
<ol class="flex items-center space-x-2 text-sm">
<%= link_to root_path, class: "text-gray-500 hover:text-purple-600 transition-colors" do %>
<svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
<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>
Accueil
<% end %>
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<%= link_to events_path, class: "text-gray-500 hover:text-purple-600 transition-colors" do %>
Événements
<% end %>
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<li class="font-medium text-gray-900 truncate max-w-xs" aria-current="page">
<%= @event.name %>
</li>
</ol>
</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 class="bg-white rounded-2xl shadow-xl overflow-hidden">
<!-- Event Header with Image -->
<% if @event.image.present? %>
<div class="relative h-96">
<%= image_tag @event.image, class: "w-full h-full object-cover" %>
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-6 md:p-8">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl md:text-4xl font-bold text-white mb-2"><%= @event.name %></h1>
<div class="flex flex-wrap items-center gap-4 text-white/90">
<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.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><%= @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("%d %B %Y à %H:%M") %></span>
</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>
<% else %>
<div class="bg-gradient-to-r from-purple-600 to-indigo-700 p-8">
<h1 class="text-3xl md:text-4xl font-bold text-white mb-4"><%= @event.name %></h1>
<div class="flex flex-wrap items-center gap-4 text-white/90">
<div class="flex items-center">
<svg class="w-5 h-5 mr-2 text-purple-200" 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>
Continue to Checkout
</span>
</button>
<span><%= @event.venue_name %></span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 mr-2 text-purple-200" 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("%d %B %Y à %H:%M") %></span>
</div>
</div>
</div>
<% end %>
<!-- Event Content -->
<div class="p-6 md:p-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Column: Event Details -->
<div class="lg:col-span-2">
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Description</h2>
<div class="prose max-w-none text-gray-700">
<p class="text-lg leading-relaxed"><%= @event.description %></p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-gray-50 rounded-xl p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<svg class="w-5 h-5 mr-2 text-purple-600" 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>
Lieu
</h3>
<p class="text-gray-700 font-medium"><%= @event.venue_name %></p>
<p class="text-gray-600 mt-1"><%= @event.venue_address %></p>
</div>
<div class="bg-gray-50 rounded-xl p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<svg class="w-5 h-5 mr-2 text-purple-600" 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>
Date & Heure
</h3>
<p class="text-gray-700 font-medium"><%= @event.start_time.strftime("%A %d %B %Y") %></p>
<p class="text-gray-600 mt-1">À <%= @event.start_time.strftime("%H:%M") %></p>
</div>
</div>
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Organisateur</h3>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-indigo-600 flex items-center justify-center text-white font-bold">
<%= @event.user.email.first.upcase %>
</div>
<div class="ml-4">
<p class="font-medium text-gray-900"><%= @event.user.email.split('@').first %></p>
<p class="text-sm text-gray-500">Organisateur de l'événement</p>
</div>
</div>
</div>
</div>
<!-- Right Column: Ticket Selection -->
<div class="lg:col-span-1">
<div class="sticky top-6">
<div class="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl border border-purple-100 p-6 shadow-sm">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Billets disponibles</h2>
<% if @event.ticket_types.any? %>
<div class="space-y-4 mb-6">
<% @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 %>
</div>
<% else %>
<div class="text-center py-8">
<svg class="w-12 h-12 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
</svg>
<h3 class="mt-4 text-lg font-medium text-gray-900">Aucun billet disponible</h3>
<p class="mt-2 text-gray-500">Les billets pour cet événement ne sont pas encore disponibles ou sont épuisés.</p>
</div>
<% end %>
<!-- Cart Summary -->
<div class="border-t border-gray-200 pt-6 mt-6">
<div class="flex justify-between items-center mb-2">
<span class="text-gray-600">Total billets:</span>
<span id="cart-count" class="font-medium">0</span>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-gray-600">Montant total:</span>
<span id="cart-total" class="text-xl font-bold text-purple-700">€0.00</span>
</div>
<button
id="checkout-btn"
class="w-full bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-medium py-3 px-4 rounded-xl shadow-sm 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 flex items-center justify-center"
disabled
data-action="click->ticket-cart#proceedToCheckout">
<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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
</svg>
Procéder au paiement
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>