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

<Layouts.app flash={@flash} current_user={@current_user}>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-2xl mx-auto">
      <%= if @show_success do %>
        <div class="bg-white rounded-2xl shadow-xl p-8 text-center">
          <div class="mb-6">
            <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-4">
              <svg
                class="h-10 w-10 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>
            </div>
            <h1 class="text-3xl font-bold text-slate-900 mb-2">Booking Cancelled</h1>
            <p class="text-slate-600">
              Your booking has been successfully cancelled. The administrator has been notified.
            </p>
          </div>

          <.back_to_link
            navigate={~p"/"}
            value="Return to Home"
          />
        </div>
      <% else %>
        <div class="bg-white rounded-2xl shadow-xl p-8">
          <h1 class="text-3xl font-bold text-slate-900 mb-6">Cancel Booking</h1>

          <div class="mb-8 p-6 bg-slate-50 rounded-xl">
            <h2 class="text-lg font-semibold text-slate-900 mb-4">Booking Details</h2>
            <div class="space-y-2 text-slate-700">
              <p>
                <strong>Space:</strong>
                {@booking.space.name}
              </p>
              <p>
                <strong>Date:</strong>
                {Calendar.strftime(@booking.date, "%A, %B %d, %Y")}
              </p>
              <p>
                <strong>Time:</strong>
                {@booking.start_time} - {@booking.end_time}
              </p>
              <p>
                <strong>Customer:</strong>
                {@booking.customer_name}
              </p>
            </div>
          </div>

          <form phx-submit="cancel_booking" phx-change="validate">
            <div class="mb-6">
              <label for="reason" class="block text-sm font-semibold text-slate-900 mb-2">
                Cancellation Reason <span class="text-red-500">*</span>
              </label>
              <textarea
                id="reason"
                name="reason"
                rows="4"
                required
                value={@cancellation_reason}
                placeholder="Please let us know why you're cancelling..."
                class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
              ></textarea>
              <p class="mt-2 text-sm text-slate-500">
                This helps us improve our service and understand your needs better.
              </p>
            </div>

            <div class="flex flex-col sm:flex-row gap-4">
              <button
                type="submit"
                class="flex-1 bg-red-500 text-white px-6 py-3 rounded-xl font-semibold hover:bg-red-600 transition-colors"
              >
                Confirm Cancellation
              </button>
              <.link
                navigate="/"
                class="flex-1 bg-slate-200 text-slate-700 px-6 py-3 rounded-xl font-semibold hover:bg-slate-300 transition-colors text-center"
              >
                Keep Booking
              </.link>
            </div>
          </form>
        </div>
      <% end %>
    </div>
  </div>
</Layouts.app>