292 lines
12 KiB
Plaintext
Executable File
292 lines
12 KiB
Plaintext
Executable File
<div
|
|
class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100"
|
|
>
|
|
<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>
|
|
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-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>
|
|
</div>
|
|
</div>
|
|
<% 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>
|
|
<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 bg-gray-50 rounded-xl p-6">
|
|
<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">
|
|
<% if @event.user.first_name.present? && @event.user.last_name.present? %>
|
|
<p class="font-medium text-gray-900"><%= @event.user.first_name %>
|
|
<%= @event.user.last_name %></p>
|
|
<% else %>
|
|
<p class="font-medium text-gray-900"><%= @event.user.email.split("@").first %></p>
|
|
<% end %>
|
|
<% if @event.user.company_name.present? %>
|
|
<p class="text-sm text-gray-500"><%= @event.user.company_name %></p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- Left Column: Event Details -->
|
|
|
|
<!-- Right Column: Ticket Selection -->
|
|
<div class="lg:col-span-1">
|
|
<%= form_with url: order_new_path, method: :get, id: "checkout_form", local: true, data: {
|
|
controller: "ticket-selection",
|
|
ticket_selection_target: "form",
|
|
ticket_selection_event_slug_value: @event.slug,
|
|
ticket_selection_event_id_value: @event.id
|
|
} do |form| %>
|
|
|
|
<div class="">
|
|
<div
|
|
class="
|
|
bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl border
|
|
border-purple-100 p-6 shadow-sm
|
|
"
|
|
>
|
|
<div class="flex justify-center sm:justify-start mb-6">
|
|
<h2 class="text-lg font-bold text-gray-900">Billets disponibles</h2>
|
|
</div>
|
|
|
|
<div class="">
|
|
<% 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">Quantité :</span>
|
|
<span class="font-medium" data-ticket-selection-target="totalQuantity">0</span>
|
|
</div>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<span class="text-gray-600">Montant total :</span>
|
|
<span class="text-xl font-bold text-purple-700" data-ticket-selection-target="totalAmount">€0.00</span>
|
|
</div>
|
|
<%= form.submit "Procéder au paiement",
|
|
data: { ticket_selection_target: "checkoutButton" },
|
|
class: "w-full bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-medium py-3 px-4 rounded-xl shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 flex items-center justify-center opacity-50 cursor-not-allowed",
|
|
disabled: true %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div><!-- Right Column: Ticket Selection -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|