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

<div class="min-h-screen bg-neutral-50" data-controller="ticket-cart" data-ticket-cart-party-id-value="<%= params[:id] %>">
  <div class="max-w-7xl mx-auto md:px-4">

    <nav class="mb-3 text-sm" aria-label="Breadcrumb">
      <nav class="mb-3 text-sm" aria-label="Breadcrumb" role="navigation">
        <span class="flex items-center text-slate-700" role="list">
          <a href="/" class="hover:text-primary-600 transition-colors duration-200 flex items-center" role="listitem">
            <svg class="w-4 h-4 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <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>
            <span class="sr-only">Home</span>
          </a>

          <svg class="w-4 h-4 mx-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>

          <a href="/parties" class="hover:text-primary-600 transition-colors duration-200 mx-2" role="listitem">
            Events
          </a>

          <svg class="w-4 h-4 mx-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>

          <span class="mx-2 font-medium truncate max-w-[150px] sm:max-w-[250px]" role="listitem" aria-current="page">
            <%= @party.name %>
          </span>
        </span>
      </nav>
    </nav>

    <div class="bg-white rounded-2xl shadow-lg p-4 sm:p-6 md:p-8 mb-6 sm:mb-8">
      <div class="flex flex-col lg:flex-row gap-6 md:gap-8">
        <!-- Left Column: Party Info & Image -->
        <div class="w-full md:w-1/2">
          <h1 class="text-4xl font-bold text-primary mb-4"><%= @party.name %></h1>

          <% if @party.image.present? %>
            <div class="relative rounded-2xl overflow-hidden mb-6">
              <%= image_tag @party.image, class: "w-full h-96 object-cover" %>
              <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50"></div>
              <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black">
                <h2 class="text-2xl font-semibold text-white mb-2">Event Details</h2>
                <div class="flex flex-wrap gap-4 text-white">
                  <div class="flex items-center">
                    <svg class="w-5 h-5 mr-2 text-purple-400" 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"></path>
                    </svg>
                    <span><%= @party.venue_name %></span>
                  </div>
                  <div class="flex items-center">
                    <svg class="w-5 h-5 mr-2 text-purple-400" 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"></path>
                    </svg>
                    <span><%= @party.start_time.strftime("%B %d, %Y at %I:%M %p") %></span>
                  </div>
                </div>
              </div>
            </div>
          <% end %>

          <div class="space-y-4">
            <div>
              <h2 class="text-xl font-semibold text-primary mb-2">Description</h2>
              <p class="text-lg text-slate-600 leading-relaxed"><%= @party.description %></p>
            </div>

            <div class="space-y-3">
              <div class="flex items-center space-x-4">
                <svg class="w-5 h-5 text-purple-400" 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>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
                <span class="font-medium text-slate-800">Location:</span>
                <span class="text-slate-600"><%= @party.venue_address %></span>
              </div>

              <div class="flex items-center space-x-4">
                <svg class="w-5 h-5 text-purple-400" 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"></path>
                </svg>
                <span class="font-medium text-slate-800">Date:</span>
                <span class="text-slate-600"><%= @party.start_time.strftime("%B %d, %Y") %></span>
              </div>
            </div>
          </div>
        </div>

        <!-- Right Column: Ticket Selection -->
        <div class="w-full md:w-1/2">
          <div class="space-y-6">
            <h2 class="text-2xl font-bold text-slate-800 mb-6">Available Tickets</h2>

            <div class="space-y-4">
              <% @party.ticket_types.each do |ticket_type| %>
                <% sold_out = ticket_type.quantity <= ticket_type.tickets.count %>
                <% remaining = ticket_type.quantity - ticket_type.tickets.count %>

                <%= render 'components/ticket_card', {
                  id: ticket_type.id,
                  name: ticket_type.name,
                  description: ticket_type.description,
                  price_cents: ticket_type.price_cents,
                  quantity: ticket_type.quantity,
                  sold_out: sold_out,
                  remaining: remaining
                } %>
              <% end %>

              <!-- Example of a sold out ticket type for demo purposes -->
              <%= render 'components/ticket_card', {
                name: "Early Bird Special",
                description: "Limited time offer - discounted price for early purchasers",
                price_cents: 1999,
                quantity: 100,
                sold_out: true,
                remaining: 0
              } %>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Sticky Checkout Bar -->
    <div class="sticky bottom-0 bg-white border-t border-slate-200 p-6">
      <div class="max-w-md mx-auto">
        <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
          <div class="text-center sm:text-left">
            <p class="text-sm text-slate-600">Total: <span id="cart-count" class="font-semibold">0</span> tickets</p>
            <p class="text-xl font-bold text-primary">€<span id="cart-total">0.00</span></p>
          </div>
          <button id="checkout-btn"
                  class="btn-primary w-full sm:w-auto px-8 py-3 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
                  disabled
                  onclick="proceedToCheckout()">
            <span class="flex items-center justify-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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
              Continue to Checkout
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>