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

<div class="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-50 py-8">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Breadcrumb -->
    <%= render 'components/breadcrumb', crumbs: [
      { name: 'Accueil', path: root_path },
      { name: 'Tableau de bord', path: dashboard_path },
      { name: "Commande ##{@order.id}", path: nil }
    ] %>

    <!-- Header -->
    <div class="text-center mb-8">
      <div class="mx-auto w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
        <i data-lucide="file-text" class="w-8 h-8 text-purple-600"></i>
      </div>
      <h1 class="text-3xl font-bold text-gray-900 mb-2">Détails de la Commande</h1>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- Event & Order Details -->
      <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
        <div class="border-b border-gray-200 pb-6 mb-6">
          <h2 class="text-2xl font-bold text-gray-900 mb-2">Informations</h2>
          <div class="flex items-center text-sm text-gray-600 space-x-4">
            <div class="flex items-center">
              <i data-lucide="file-text" class="w-4 h-4 mr-2 flex-shrink-0"></i>
              <div class="flex flex-col">
                <span class="font-medium">Commande n°<%= @order.id %></span>
                <span class="text-xs text-gray-500"><%= @order.created_at.strftime("%d %B %Y") %></span>
              </div>
            </div>
            <div class="flex items-center">
              <i data-lucide="<%= @order.status == 'paid' || @order.status == 'completed' ? 'check-circle' : 'clock' %>" class="w-4 h-4 mr-1 <%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-yellow-600' %>"></i>
              <span class="<%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-yellow-600' %> font-medium">
                <%= case @order.status
                    when 'paid' then 'Payé'
                    when 'completed' then 'Terminé'
                    else @order.status.humanize
                    end %>
              </span>
            </div>
          </div>
        </div>

        <!-- Event Information -->
        <div class="mb-6">
          <h3 class="text-lg font-semibold text-gray-900 mb-3">Événement</h3>
          <div class="bg-purple-50 rounded-lg p-4 border border-purple-200">
            <h4 class="font-semibold text-purple-900 text-lg"><%= @order.event.name %></h4>
            <div class="mt-2 space-y-1 text-sm text-purple-700">
              <% if @order.event.start_time %>
                <div class="flex items-center">
                  <i data-lucide="clock" class="w-4 h-4 mr-2"></i>
                  <%= @order.event.start_time.strftime("%d %B %Y à %H:%M") %>
                </div>
              <% end %>
              <% if @order.event.venue_name.present? %>
                <div class="flex items-center">
                  <i data-lucide="map-pin" class="w-4 h-4 mr-2"></i>
                  <%= @order.event.venue_name %>
                </div>
              <% end %>
              <% if @order.event.venue_address.present? %>
                <div class="flex items-center">
                  <i data-lucide="navigation" class="w-4 h-4 mr-2"></i>
                  <%= @order.event.venue_address %>
                </div>
              <% end %>
            </div>
          </div>
        </div>

        <!-- Summary -->
        <div class="space-y-4">
          <h3 class="text-lg font-semibold text-gray-900 mb-4">Récapitulatif</h3>

          <% @tickets.each do |ticket| %>
            <div class="flex items-center justify-between py-3 border-b border-gray-100 last:border-b-0">
              <div class="flex-1 min-w-0">
                <h4 class="text-sm font-medium text-gray-900 truncate"><%= ticket.ticket_type.name %></h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <i data-lucide="user" class="w-3 h-3 mr-1"></i>
                  <%= ticket.first_name %> <%= ticket.last_name %>
                </div>
                <% if @order.status == 'paid' || @order.status == 'completed' %>
                  <div class="flex items-center text-xs text-green-600 mt-1">
                    <i data-lucide="check-circle" class="w-3 h-3 mr-1"></i>
                    Actif
                  </div>
                <% end %>
              </div>
              <div class="text-right">
                <div class="text-lg font-semibold text-gray-900"><%= ticket.price_euros %>€</div>
              </div>
            </div>
          <% end %>
        </div>

        <!-- Total -->
        <div class="border-t border-gray-200 pt-6 mt-6">
          <div class="space-y-2">
            <div class="flex items-center justify-between">
              <span class="text-gray-600">Sous-total</span>
              <span class="text-gray-900"><%= @order.total_amount_euros - 1.0 %>€</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-600">Frais de service</span>
              <span class="text-gray-900">1.00€</span>
            </div>
            <div class="flex items-center justify-between text-lg pt-2 border-t border-gray-200">
              <span class="font-medium text-gray-900">Total <%= @order.status == 'paid' || @order.status == 'completed' ? 'payé' : 'à payer' %></span>
              <span class="font-bold text-2xl <%= @order.status == 'paid' || @order.status == 'completed' ? 'text-green-600' : 'text-purple-600' %>">
                <%= @order.total_amount_euros %>€
              </span>
            </div>
          </div>
        </div>

        <!-- View Invoice -->
        <% if @order.status == 'paid' || @order.status == 'completed' %>
          <div class="border-t border-gray-200 pt-6 mt-6">
            <div class="flex items-start">
              <div class="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                <i data-lucide="file-text" class="w-4 h-4 text-blue-600"></i>
              </div>
              <div class="ml-4">
                <h3 class="font-semibold text-gray-900 mb-1">Consulter la Facture</h3>
                <p class="text-gray-600 text-sm mb-3">Téléchargez ou consultez la facture de votre commande.</p>
                <div class="mt-2">
                  <%= link_to invoice_order_path(@order), class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors" do %>
                    <i data-lucide="file-text" class="w-4 h-4 mr-2"></i>
                    Voir la facture
                  <% end %>
                </div>
              </div>
            </div>
          </div>
        <% end %>
      </div>

      <!-- Actions & Ticket Access -->
      <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 h-fit">
        <% if @order.status == 'paid' || @order.status == 'completed' %>
          <!-- Ticket Access -->
          <div class="border-b border-gray-200 pb-6 mb-6">
            <h2 class="text-xl font-bold text-gray-900 mb-2">Accédez à Vos Billets</h2>
            <p class="text-sm text-gray-600">Téléchargez ou consultez vos billets</p>
          </div>

          <div class="space-y-6">
            <!-- Download Tickets -->
            <div class="flex items-start">
              <div class="flex-shrink-0 w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
                <i data-lucide="download" class="w-4 h-4 text-purple-600"></i>
              </div>
              <div class="ml-4">
                <h3 class="font-semibold text-gray-900 mb-1">Télécharger Vos Billets</h3>
                <p class="text-gray-600 text-sm mb-3">Gardez vos billets sur votre téléphone ou imprimez-les.</p>
                <div class="space-y-2">
                  <% @tickets.each_with_index do |ticket, index| %>
                    <div class="flex items-center justify-between p-3 border border-purple-200 rounded-lg bg-purple-50 hover:bg-purple-100 transition-colors">
                      <%= link_to ticket_path(ticket.qr_code), class: "flex-1 flex items-center text-purple-700 hover:text-purple-800 font-medium" do %>
                        <div class="flex items-center justify-center w-6 h-6 bg-purple-200 text-purple-800 text-xs font-bold rounded-full mr-3">
                          <%= index + 1 %>
                        </div>
                        <%= ticket.first_name %> <%= ticket.last_name %>
                      <% end %>
                      <%= link_to ticket_download_path(ticket.qr_code), class: "ml-3 p-2 text-purple-600 hover:text-purple-800 hover:bg-purple-200 rounded-lg transition-colors", title: "Télécharger le billet PDF" do %>
                        <i data-lucide="download" class="w-4 h-4"></i>
                      <% end %>
                    </div>
                  <% end %>
                </div>
              </div>
            </div>

            <!-- Event Day -->
            <div class="flex items-start">
              <div class="flex-shrink-0 w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                <i data-lucide="check-circle" class="w-4 h-4 text-green-600"></i>
              </div>
              <div class="ml-4">
                <h3 class="font-semibold text-gray-900 mb-1">Le Jour de l'Événement</h3>
                <p class="text-gray-600 text-sm">Présentez votre billet (QR code) à l'entrée. Arrivez un peu en avance !</p>
              </div>
            </div>
          </div>
        <% else %>
          <!-- Payment Required -->
          <div class="border-b border-gray-200 pb-6 mb-6">
            <h2 class="text-xl font-bold text-gray-900 mb-2">Paiement Requis</h2>
            <p class="text-sm text-gray-600">Votre commande nécessite un paiement</p>
          </div>

          <% if @order.can_retry_payment? %>
            <div class="mb-6">
              <%= link_to checkout_order_path(@order), class: "block w-full text-center py-3 px-4 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg transition-colors" do %>
                <div class="flex items-center justify-center">
                  <i data-lucide="credit-card" class="w-4 h-4 mr-2"></i>
                  Procéder au Paiement
                </div>
              <% end %>
            </div>
          <% end %>
        <% end %>

        <!-- Navigation Actions -->
        <div class="border-t border-gray-200 pt-6 mt-6">
          <div class="space-y-3">
            <%= link_to dashboard_path, class: "block w-full text-center py-3 px-4 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors" do %>
              <div class="flex items-center justify-center">
                <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
                Retour au tableau de bord
              </div>
            <% end %>
            <%= link_to event_path(@order.event.slug, @order.event), class: "block w-full text-center py-3 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" do %>
              <div class="flex items-center justify-center">
                <i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
                Voir la page d'évenement
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>