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

<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-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-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>
        <%= link_to @event.name, event_path(@event.slug, @event), class: "text-gray-500 hover:text-purple-600 transition-colors" do %>
          <%= @event.name %>
        <% 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" aria-current="page">
          Nouvelle commande
        </li>
      </ol>
    </nav>

    <!-- Page Header -->
    <div class="mb-8">
      <h1 class="text-3xl font-bold text-gray-900 mb-2">Nouvelle Commande</h1>
      <p class="text-gray-600">Vérifiez vos billets et indiquez les noms des participants</p>
    </div>

    <!-- Order Summary -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
      <h2 class="text-xl font-semibold text-gray-900 mb-4">Résumé de votre commande</h2>
      
      <% if @event %>
        <div class="mb-6">
          <h3 class="text-lg font-medium text-gray-800"><%= @event.name %></h3>
          <p class="text-gray-600"><%= @event.venue_name %></p>
          <% if @event.start_time %>
            <p class="text-sm text-gray-500">
              <%= @event.start_time.strftime("%d/%m/%Y à %H:%M") %>
            </p>
          <% end %>
        </div>

        <!-- Cart Items -->
        <div class="space-y-4 mb-6">
          <% @cart_data.each do |ticket_type_id, item| %>
            <% ticket_type = @event.ticket_types.find_by(id: ticket_type_id) %>
            <% if ticket_type && item["quantity"].to_i > 0 %>
              <div class="flex justify-between items-center py-3 border-b border-gray-100">
                <div>
                  <h4 class="font-medium text-gray-900"><%= ticket_type.name %></h4>
                  <p class="text-sm text-gray-600"><%= ticket_type.description if ticket_type.description.present? %></p>
                </div>
                <div class="text-right">
                  <p class="font-medium">Quantité: <%= item["quantity"] %></p>
                  <p class="text-lg font-semibold text-purple-700">
                    <%= number_to_currency(ticket_type.price_cents * item["quantity"].to_i / 100.0, unit: "€", separator: ",", delimiter: " ") %>
                  </p>
                </div>
              </div>
            <% end %>
          <% end %>
        </div>

      <% end %>
    </div>

    <!-- Name Collection Form -->
    <% if @tickets_needing_names.any? %>
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 mt-6">
        <div class="p-6 md:p-8">
          <div class="text-center mb-8">
            <div class="mx-auto bg-purple-100 rounded-full p-3 w-16 h-16 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
              </svg>
            </div>
            <h2 class="text-2xl font-bold text-gray-900 mb-2">Informations des participants</h2>
            <p class="text-gray-600 max-w-md mx-auto">Veuillez fournir les prénoms et noms des personnes qui utiliseront les billets.</p>
          </div>

          <%= form_with url: event_order_create_path(@event.slug, @event.id), method: :post, local: true, class: "space-y-8" do |form| %>
            <div class="space-y-6">
              <div class="flex items-center justify-center mb-2">
                <div class="bg-purple-600 rounded-full p-2 mr-3">
                  <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                  </svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-900">Billets nécessitant une identification</h3>
              </div>
              <p class="text-gray-600 mb-6 text-center">Les billets suivants nécessitent que vous indiquiez le prénom et le nom de chaque participant.</p>

              <% @tickets_needing_names.each_with_index do |ticket, index| %>
                <div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl p-6 border border-purple-100">
                  <div class="flex items-center mb-4">
                    <div class="bg-purple-500 rounded-lg p-2 mr-3">
                      <svg class="w-5 h-5 text-white" 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>
                    </div>
                    <h4 class="text-lg font-semibold text-gray-900"><%= ticket[:ticket_type_name] %> #<%= index + 1 %></h4>
                  </div>

                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div>
                      <%= form.label "tickets_attributes[#{index}][first_name]", "Prénom", class: "block text-sm font-medium text-gray-700 mb-1" %>
                      <%= form.text_field "tickets_attributes[#{index}][first_name]", required: true, class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 shadow-sm", placeholder: "Entrez le prénom" %>
                      <%= form.hidden_field "tickets_attributes[#{index}][ticket_type_id]", value: ticket[:ticket_type_id] %>
                    </div>

                    <div>
                      <%= form.label "tickets_attributes[#{index}][last_name]", "Nom", class: "block text-sm font-medium text-gray-700 mb-1" %>
                      <%= form.text_field "tickets_attributes[#{index}][last_name]", required: true, class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 shadow-sm", placeholder: "Entrez le nom" %>
                    </div>
                  </div>
                </div>
              <% end %>
            </div>

            <div class="flex flex-col sm:flex-row gap-4 pt-6">
              <%= link_to "Retour", event_path(@event.slug, @event), class: "px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 text-center font-medium transition-colors duration-200" %>
              <%= form.submit "Procéder au paiement", class: "flex-1 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-medium py-3 px-6 rounded-xl shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transform hover:-translate-y-0.5" %>
            </div>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>
</div>