aperonight/app/views/orders/payment_success.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 -->
    <nav class="flex mb-6" aria-label="Breadcrumb">
      <ol class="inline-flex items-center space-x-1 md:space-x-2 rounded-lg bg-white px-4 py-2 shadow-sm">
        <li class="inline-flex items-center">
          <%= link_to "Accueil", root_path, class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-purple-600" %>
        </li>
        <li>
          <div class="flex items-center">
            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
            </svg>
            <%= link_to "Tableau de bord", dashboard_path, class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
          </div>
        </li>
        <li>
          <div class="flex items-center">
            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-1 text-sm font-medium text-purple-600 md:ml-2">Commande #<%= @order.id %></span>
          </div>
        </li>
      </ol>
    </nav>

    <!-- 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">
        <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
      </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">Détails de Votre Commande</h2>
          <div class="flex items-center text-sm text-gray-600 space-x-4">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
              <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">
              <svg class="w-4 h-4 mr-1 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              <span class="text-green-600 font-medium">
                Payée
              </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">
                  <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                  </svg>
                  <%= @order.event.start_time.strftime("%d %B %Y à %H:%M") %>
                </div>
              <% end %>
              <% if @order.event.venue_name.present? %>
                <div class="flex items-center">
                  <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="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" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                  </svg>
                  <%= @order.event.venue_name %>
                </div>
              <% end %>
              <% if @order.event.venue_address.present? %>
                <div class="flex items-center">
                  <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="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
                  </svg>
                  <%= @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>

          <% @order.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">
                  <svg class="w-3 h-3 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>
                  <%= ticket.first_name %> <%= ticket.last_name %>
                </div>
                <div class="flex items-center text-xs text-green-600 mt-1">
                  <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                  </svg>
                  Actif
                </div>
              </div>
              <div class="text-right">
                <div class="text-lg font-semibold text-gray-900"><%= ticket.price_euros %>€</div>
              </div>
            </div>
          <% end %>
        </div>

        <!-- Promotion Codes Applied -->
        <% if @order.promotion_codes.any? %>
          <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
            <h3 class="text-lg font-semibold text-green-900 mb-3 flex items-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="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>
              Codes promotionnels appliqués
            </h3>
            <% @order.promotion_codes.each do |promo_code| %>
              <div class="flex items-center justify-between py-2 px-3 bg-white rounded-lg border border-green-200 mb-2 last:mb-0">
                <div class="flex items-center">
                  <span class="text-sm font-medium text-green-800">
                    <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <%= promo_code.code %>
                  </span>
                </div>
                <span class="text-sm font-semibold text-green-700">-<%= promo_code.discount_amount_euros %>€</span>
              </div>
            <% end %>
          </div>
        <% end %>

        <!-- Price Breakdown -->
        <div class="mt-6 p-4 bg-gray-50 border border-gray-200 rounded-lg">
          <h3 class="text-lg font-semibold text-gray-900 mb-3">Détail du paiement</h3>
          <div class="space-y-2">
            <!-- Subtotal -->
            <div class="flex items-center justify-between text-sm">
              <span class="text-gray-600">Sous-total</span>
              <span class="font-medium text-gray-700"><%= @order.subtotal_amount_euros %>€</span>
            </div>

            <!-- Discount -->
            <% if @order.discount_amount_cents > 0 %>
              <div class="flex items-center justify-between text-sm">
                <span class="text-green-600">Réduction</span>
                <span class="font-semibold text-green-600">-<%= @order.discount_amount_euros %>€</span>
              </div>
            <% end %>

            <!-- Total -->
            <div class="flex items-center justify-between pt-2 border-t border-gray-300">
              <span class="font-medium text-gray-900">Total payé</span>
              <span class="font-bold text-xl text-green-600">
                <% if @order.total_amount_cents == 0 %>
                  GRATUIT
                <% else %>
                  <%= @order.total_amount_euros %>€
                <% end %>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- Actions & Ticket Access -->
      <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 h-fit">
        <!-- 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">
              <svg class="w-4 h-4 text-purple-600" 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"/>
              </svg>
            </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">
                <% @order.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 %>
                      <svg class="w-4 h-4" 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"/>
                      </svg>
                    <% 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">
              <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </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>

        <!-- 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">
                <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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                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">
                <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="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>
                Voir la fiche de l'événement
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>