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

<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Breadcrumb -->
    <nav class="mb-8" aria-label="Breadcrumb">
      <ol class="flex items-center space-x-2 text-sm">
        <%= link_to root_path, class: "text-slate-500 hover:text-purple-600 transition-colors duration-200" do %>
          <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" 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-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
        </svg>
        <%= link_to dashboard_path, class: "text-slate-500 hover:text-purple-600 transition-colors duration-200" do %>
          Tableau de bord
        <% end %>
        <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
        </svg>
        <li class="font-medium text-slate-900" aria-current="page">Billet #<%= @ticket.id %></li>
      </ol>
    </nav>

    <div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-200">
      <!-- Ticket Header -->
      <div class="bg-gradient-to-r from-purple-600 to-violet-600 px-8 py-6">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-2xl md:text-3xl font-bold text-white mb-2">Billet Électronique</h1>
            <p class="text-purple-100">ID: #<%= @ticket.id %></p>
          </div>
          <div class="text-right">
            <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium <%=
              case @ticket.status
              when 'active' then 'bg-emerald-100 text-emerald-800'
              when 'draft' then 'bg-amber-100 text-amber-800'
              when 'used' then 'bg-slate-100 text-slate-800'
              when 'expired' then 'bg-red-100 text-red-800'
              when 'refunded' then 'bg-sky-100 text-sky-800'
              else 'bg-slate-100 text-slate-800'
              end %>">
              <%=
              case @ticket.status
              when 'active' then 'Valide'
              when 'draft' then 'En attente'
              when 'used' then 'Utilisé'
              when 'expired' then 'Expiré'
              when 'refunded' then 'Remboursé'
              else @ticket.status.humanize
              end %>
            </div>
          </div>
        </div>
      </div>

      <div class="p-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <!-- Event Details -->
          <div>
            <h2 class="text-xl font-semibold text-slate-900 mb-6">Détails de l'événement</h2>

            <div class="space-y-6">
              <div>
                <label class="block text-sm font-medium text-slate-500 mb-2">Événement</label>
                <p class="text-lg font-semibold text-slate-900"><%= @event.name %></p>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-slate-500 mb-2">Date et heure</label>
                  <div class="flex items-start text-slate-900">
                    <svg class="w-4 h-4 mr-2 mt-0.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" 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>
                      <div class="font-medium"><%= @event.start_time.strftime("%d %B %Y") %></div>
                      <div class="text-sm text-slate-600"><%= @event.start_time.strftime("%H:%M") %></div>
                    </div>
                  </div>
                </div>

                <div>
                  <label class="block text-sm font-medium text-slate-500 mb-2">Lieu</label>
                  <div class="flex items-center text-slate-900">
                    <svg class="w-4 h-4 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" 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 stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    <span class="font-medium"><%= @event.venue_name %></span>
                  </div>
                </div>
              </div>

              <div>
                <label class="block text-sm font-medium text-slate-500 mb-2">Type de billet</label>
                <p class="text-slate-900 font-medium mb-1"><%= @ticket.ticket_type.name %></p>
                <p class="text-sm text-slate-600"><%= @ticket.ticket_type.description %></p>
              </div>

              <div>
                <label class="block text-sm font-medium text-slate-500 mb-2">Prix</label>
                <p class="text-2xl font-bold text-slate-900">
                  <%= number_to_currency(@ticket.price_euros, unit: "€", separator: ",", delimiter: " ", format: "%n %u") %>
                </p>
              </div>
            </div>
          </div>

          <!-- Ticket Details -->
          <div>
            <h2 class="text-xl font-semibold text-slate-900 mb-6">Informations du billet</h2>

            <div class="space-y-6">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-slate-500 mb-2">Prénom</label>
                  <p class="text-slate-900 font-medium"><%= @ticket.first_name %></p>
                </div>

                <div>
                  <label class="block text-sm font-medium text-slate-500 mb-2">Nom</label>
                  <p class="text-slate-900 font-medium"><%= @ticket.last_name %></p>
                </div>
              </div>

              <div>
                <label class="block text-sm font-medium text-slate-500 mb-2">Date d'achat</label>
                <p class="text-slate-900 font-medium"><%= @ticket.created_at.strftime("%d %B %Y à %H:%M") %></p>
              </div>

              <div>
                <label class="block text-sm font-medium text-slate-500 mb-2">QR Code</label>
                <div class="bg-slate-50 rounded-xl p-6 text-center border border-slate-200">
                  <div class="inline-block bg-white p-4 rounded-xl shadow-sm border border-slate-200">
                    <div class="w-64 h-64 flex items-center justify-center">
                      <%= raw @ticket.generate_qr_svg %>
                    </div>
                  </div>
                  <p class="text-xs text-slate-500 mt-3 font-mono tracking-wider"><%= @ticket.qr_code[0..7]... %></p>
                  <p class="text-xs text-slate-400 mt-1">Scannez ce code à l'entrée</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Actions -->
        <div class="mt-8 pt-6 border-t border-slate-200">
          <div class="flex flex-col sm:flex-row gap-4">
            <%= link_to dashboard_path,
                        class: "flex items-center justify-center px-6 py-3 border border-slate-300 text-slate-700 rounded-xl hover:bg-slate-50 hover:border-slate-400 font-medium transition-all duration-200" do %>
              <svg class="w-4 h-4 mr-2" 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 %>

            <% if @ticket.status == 'active' %>
              <%= link_to download_ticket_path(@ticket.id),
                          class: "flex-1 flex items-center justify-center bg-gradient-to-r from-purple-600 to-violet-600 hover:from-purple-700 hover:to-violet-700 text-white font-medium py-3 px-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transform hover:-translate-y-0.5" do %>
                <svg class="w-4 h-4 mr-2" 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>
                Télécharger le PDF
              <% end %>
            <% end %>
          </div>
        </div>

        <!-- Important Notice -->
        <div class="mt-6 bg-sky-50 border border-sky-200 rounded-xl p-6">
          <div class="flex items-start">
            <svg class="w-5 h-5 text-sky-600 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div class="flex-1">
              <h3 class="text-sky-800 font-semibold mb-2">Informations importantes</h3>
              <ul class="text-sky-700 text-sm space-y-2">
                <li class="flex items-start">
                  <span class="w-1.5 h-1.5 bg-sky-600 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                  Présentez ce billet (ou son code QR) à l'entrée de l'événement
                </li>
                <li class="flex items-start">
                  <span class="w-1.5 h-1.5 bg-sky-600 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                  Arrivez en avance pour éviter les files d'attente
                </li>
                <li class="flex items-start">
                  <span class="w-1.5 h-1.5 bg-sky-600 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                  En cas de problème, contactez l'organisateur
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>