spazio-solazzo/lib/spazio_solazzo_web/live/booking/asset_booking_live.html.heex

<Layouts.app flash={@flash} current_user={@current_user}>
  <section class="mx-auto max-w-[1200px] px-6 py-10">
    <div class="mb-4">
      <.back_to_link
        navigate={"/#{@space.slug}"}
        value={"Back to #{@space.name}"}
      />
    </div>

    <div class="text-center mb-12">
      <h1 class="text-4xl md:text-5xl lg:text-6xl font-black text-base-content tracking-tight mb-4">
        {@asset.name}
      </h1>
      <p class="text-lg text-neutral max-w-2xl mx-auto">
        {@space.name} - Flexible booking options available
      </p>
    </div>

    <div class="max-w-4xl mx-auto bg-base-100 rounded-3xl p-8 md:p-12 border border-base-200 shadow-xl">
      <h2 class="text-2xl font-bold text-base-content mb-8">
        Available Time Slots
      </h2>

      <div class="mb-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
        <.live_component
          module={SpazioSolazzoWeb.CalendarLiveComponent}
          id="booking-calendar"
          selected_date={@selected_date}
        />

        <div class="time-slots-wrapper">
          <p class="mb-4 text-neutral">
            Selected day:
            <span class="font-bold text-base-content">
              {SpazioSolazzo.CalendarExt.format_date(@selected_date)}
            </span>
          </p>

          <div class="max-h-80 overflow-y-auto pr-4 space-y-3">
            <%= if @time_slots == [] do %>
              <div class="text-center py-8 text-neutral">
                No time slots available for this date
              </div>
            <% else %>
              <%= for time_slot <- @time_slots do %>
                <% booked = slot_booked?(time_slot.id, @bookings) %>
                <.time_slot booked={booked} time_slot={time_slot} />
              <% end %>
            <% end %>
          </div>
        </div>
      </div>

      <div class="mt-8 pt-6 border-t border-base-200 text-center">
        <p class="text-base font-medium text-secondary flex items-center justify-center gap-2">
          <.icon name="hero-credit-card" class="w-5 h-5" /> Payment due upon arrival.
        </p>
      </div>
    </div>
  </section>

  <.live_component
    module={SpazioSolazzoWeb.BookingFormLiveComponent}
    id="booking-modal"
    show={@show_booking_modal}
    selected_time_slot={@selected_time_slot}
    asset={@asset}
    selected_date={@selected_date}
    current_user={@current_user}
    on_cancel={JS.push("cancel_booking")}
  />

  <.booking_confirmation_modal
    id="success-modal"
    show={@show_success_modal}
    on_close={JS.push("close_success_modal")}
  />
</Layouts.app>