<.back_to_link navigate={~p"/admin/dashboard"} value="Back to Dashboard" /> <%!-- Title --%>

New Arcipelago Walk-in Booking

Create a walk-in booking for the Arcipelago space.

<%!-- Date & Time --%>

Select Date & Time

Check availability on the calendar and set your booking range.

<%!-- Calendar --%>

<.live_component module={SpazioSolazzoWeb.Admin.AdminCalendarComponent} id="walk-in-calendar" space_id={@space.id} booking_counts={@booking_counts} />

<%!-- Selected dates and time inputs --%>

<%!-- Selected interval --%>

Selected Interval

Start Date <%= if @start_date do %> {Calendar.strftime(@start_date, "%b %d, %Y")} <% else %> Not selected <% end %>

End Date <%= if @end_date do %> {Calendar.strftime(@end_date, "%b %d, %Y")} <% else %> Not selected <% end %>

<.icon name={ if @multi_day_mode && @end_date, do: "hero-calendar-days", else: "hero-calendar" } class="w-4 h-4" /> <%= if @multi_day_mode && @start_date && @end_date do %> {days_selected(@start_date, @end_date)} Days total <% else %> Single Day <% end %>

<%!-- Daily schedule --%>

Daily Schedule

<%= if @multi_day_mode do %> <%!-- Multi-day mode: Show info card --%>

<.icon name="hero-calendar-days" class="w-5 h-5" />

Full day booking applied for the selected range

Start and end time inputs are disabled for multiday selections.

<% else %> <%!-- Single-day mode: Show time inputs --%>

Start Time

<.icon name="hero-clock" class="w-4 h-4" />

End Time

<.icon name="hero-clock" class="w-4 h-4" />

<% end %>

<%!-- Customer Details --%>

Customer Details

Enter the customer's contact information to complete the booking.

<.form for={@customer_details_form} id="customer-details-form" phx-change="validate_customer_details" phx-submit="create_booking" class="space-y-4 max-w-2xl" >

<.icon name="hero-user" class="w-5 h-5" /> <.input field={@customer_details_form["customer_name"]} class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white text-sm rounded-xl pl-10 pr-4 py-3 focus:ring-2 focus:ring-primary focus:border-primary transition-all placeholder:text-slate-400" placeholder="Customer Name" type="text" required />

<.icon name="hero-envelope" class="w-5 h-5" /> <.input field={@customer_details_form["customer_email"]} class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white text-sm rounded-xl pl-10 pr-4 py-3 focus:ring-2 focus:ring-primary focus:border-primary transition-all placeholder:text-slate-400" placeholder="customer@example.com" type="email" required />

<.icon name="hero-phone" class="w-5 h-5" /> <.input field={@customer_details_form["customer_phone"]} class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white text-sm rounded-xl pl-10 pr-4 py-3 focus:ring-2 focus:ring-primary focus:border-primary transition-all placeholder:text-slate-400" placeholder="Customer Phone Number (Optional)" type="tel" />

<.button type="submit" form="customer-details-form" class="w-full sm:w-auto flex items-center justify-center gap-2 overflow-hidden rounded-xl h-12 px-10 bg-primary hover:bg-primary/90 transition-colors text-white text-base font-bold shadow-lg shadow-primary/30 cursor-pointer" > Create Booking