aperonight/app/views/tickets/ticket_view.html.erb

<% content_for :title, "Billet ##{@ticket.id} - #{@ticket.event.name}" %>

<div class="min-h-screen bg-slate-100 py-8">
  <div class="max-w-md mx-auto px-4">
    <!-- Ticket Card -->
    <div class="max-w-md bg-white rounded-xl shadow-2xl overflow-hidden mx-auto border border-slate-200">
      <!-- Header -->
      <div class="bg-gradient-to-r from-purple-700 to-violet-600 text-center py-6 px-6">
        <h1 class="text-2xl font-bold text-white mb-2">ApéroNight</h1>
        <div class="w-16 h-0.5 bg-purple-200 mx-auto rounded-full"></div>
      </div>

      <!-- Event Name -->
      <div class="text-center py-4 px-6 bg-purple-50 border-b border-purple-100">
        <h2 class="text-xl font-bold text-slate-900 leading-tight"><%= @ticket.event.name %></h2>
      </div>

      <!-- Ticket Information -->
      <div class="p-6 space-y-4">
        <!-- Ticket Holder -->
        <div class="flex justify-between items-center py-2 border-b border-slate-100">
          <span class="text-sm font-medium text-slate-600">Porteur du billet:</span>
          <span class="text-sm font-semibold text-slate-900 text-right"><%= @ticket.first_name %> <%= @ticket.last_name %></span>
        </div>

        <!-- Ticket Type -->
        <div class="flex justify-between items-center py-2 border-b border-slate-100">
          <span class="text-sm font-medium text-slate-600">Type de billet:</span>
          <span class="text-sm font-semibold text-slate-900"><%= @ticket.ticket_type.name %></span>
        </div>

        <!-- Price -->
        <div class="flex justify-between items-center py-2 border-b border-slate-100">
          <span class="text-sm font-medium text-slate-600">Prix:</span>
          <span class="text-sm font-semibold text-slate-900">
            <%= number_to_currency(@ticket.price_euros, unit: "€", separator: ",", delimiter: " ", format: "%n %u") %>
          </span>
        </div>

        <!-- Date & Time -->
        <div class="flex justify-between items-center py-2 border-b border-slate-100">
          <span class="text-sm font-medium text-slate-600">Date & Heure:</span>
          <div class="text-right">
            <div class="text-sm font-semibold text-slate-900"><%= @ticket.event.start_time.strftime("%d %B %Y") %></div>
            <div class="text-xs text-slate-600"><%= @ticket.event.start_time.strftime("%H:%M") %></div>
          </div>
        </div>

        <!-- Venue -->
        <div class="py-2 border-b border-slate-100">
          <span class="text-sm font-medium text-slate-600 block mb-1">Lieu :</span>
          <div class="text-sm font-semibold text-slate-900"><%= @ticket.event.venue_name %></div>
          <% if @ticket.event.venue_address.present? %>
            <div class="text-xs text-slate-600 mt-1"><%= @ticket.event.venue_address %></div>
          <% end %>
        </div>
      </div>

      <!-- QR Code Section -->
      <div class="bg-slate-50 p-6 text-center border-t border-slate-200">
        <h3 class="text-sm font-semibold text-slate-900 mb-4">Code QR du billet</h3>
        <div class="inline-block bg-white p-6 rounded-xl shadow-sm border border-slate-200">
          <div class="w-52 h-52 flex items-center justify-center qr-code-container">
            <%= raw @ticket.generate_qr_svg %>
          </div>
        </div>
        <p class="text-xs text-slate-500 mt-3 font-mono tracking-wider">QR: <%= @ticket.qr_code[0..7] %>...</p>
      </div>

      <!-- Footer Notice -->
      <div class="bg-slate-100 px-6 py-4 text-center border-t border-slate-200">
        <div class="space-y-2">
          <p class="text-xs text-slate-600">Ce billet est valide pour une seule entrée.</p>
          <p class="text-xs text-slate-600">Présentez ce billet à l'entrée du lieu.</p>
          <div class="pt-2 border-t border-slate-200">
            <p class="text-xs text-slate-500">
              Généré le <%= Time.current.strftime('%d %B %Y à %H:%M') %>
            </p>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="p-4 bg-white border-t border-slate-200">
        <div class="flex space-x-2">
          <%= link_to ticket_path(@ticket),
                      class: "flex-1 flex items-center justify-center bg-slate-100 hover:bg-slate-200 text-slate-700 py-2.5 px-3 rounded-lg text-sm font-medium transition-colors duration-200" do %>
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
              <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
            </svg>
            Vue détaillée
          <% end %>

          <% if @ticket.status == 'active' %>
            <%= link_to download_ticket_path(@ticket.id),
                        class: "flex-1 flex items-center justify-center bg-purple-600 hover:bg-purple-700 text-white py-2.5 px-3 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm hover:shadow-md" do %>
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" 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"/>
              </svg>
              PDF
            <% end %>
          <% end %>
        </div>
      </div>
    </div>

    <!-- Navigation -->
    <div class="text-center mt-6">
      <%= link_to dashboard_path, class: "inline-flex items-center text-purple-600 hover:text-purple-800 text-sm font-medium transition-colors duration-200" do %>
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18"/>
        </svg>
        Retour au tableau de bord
      <% end %>
    </div>
  </div>
</div>