phoenix_kit_billing

  <div class="container mx-auto px-4 py-6">
    <%!-- Header --%>
    <.admin_page_header back={PhoenixKit.Utils.Routes.path("/admin/billing")}>
      <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-base-content">
        Billing Profiles
      </h1>
      <p class="text-sm text-base-content/60 mt-0.5">{@total_count} total profiles</p>
      <:actions>
        <button phx-click="refresh" class="btn btn-ghost btn-sm">
          <.icon name="hero-arrow-path" class="w-4 h-4" /> Refresh
        </button>
        <.link
          navigate={PhoenixKit.Utils.Routes.path("/admin/billing/profiles/new")}
          class="btn btn-primary btn-sm"
        >
          <.icon name="hero-plus" class="w-4 h-4" /> New Profile
        </.link>
      </:actions>
    </.admin_page_header>

    <%!-- Filters --%>
    <div class="card bg-base-100 shadow mb-6">
      <div class="card-body py-4">
        <form phx-change="filter" phx-submit="filter" class="flex flex-wrap gap-4 items-end">
          <div class="form-control flex-1 min-w-[200px]">
            <label class="label">
              <span class="label-text">Search</span>
            </label>
            <input
              type="text"
              name="search"
              value={@search}
              placeholder="Name, email, company..."
              class="input input-bordered input-sm"
              phx-debounce="300"
            />
          </div>

          <div class="form-control">
            <label class="label">
              <span class="label-text">Type</span>
            </label>
            <select name="type" class="select select-bordered select-sm">
              <option value="all" selected={@type_filter == "all"}>All Types</option>
              <option value="individual" selected={@type_filter == "individual"}>
                Individual
              </option>
              <option value="company" selected={@type_filter == "company"}>Company</option>
            </select>
          </div>

          <button type="button" phx-click="clear_filters" class="btn btn-ghost btn-sm">
            Clear Filters
          </button>
        </form>
      </div>
    </div>

    <%!-- Profiles Table --%>
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body p-0">
        <%= if @loading do %>
          <div class="flex justify-center items-center py-12">
            <span class="loading loading-spinner loading-lg"></span>
          </div>
        <% else %>
          <%= if Enum.empty?(@profiles) do %>
            <div class="text-center py-12">
              <.icon name="hero-user-circle" class="w-16 h-16 mx-auto mb-4 text-base-content/30" />
              <h3 class="text-xl font-semibold mb-2">No billing profiles found</h3>
              <p class="text-base-content/60">
                <%= if @search != "" or @type_filter != "all" do %>
                  Try adjusting your filters or search terms
                <% else %>
                  Billing profiles are created by users
                <% end %>
              </p>
            </div>
          <% else %>
            <.table_default
              id="billing-profiles-table"
              variant="zebra"
              class="w-full"
              toggleable={true}
              items={@profiles}
              card_fields={
                fn profile ->
                  [
                    %{
                      label: "User",
                      value: if(profile.user, do: profile.user.email, else: "-")
                    },
                    %{
                      label: "Location",
                      value:
                        if(profile.city,
                          do: "#{profile.city}, #{profile.country}",
                          else: profile.country || "-"
                        )
                    },
                    %{
                      label: "Default",
                      value: if(profile.is_default, do: "Yes", else: "No")
                    }
                  ]
                end
              }
            >
              <:card_header :let={profile}>
                <div class="flex items-center justify-between">
                  <span class="font-medium">
                    <%= if profile.type == "company" do %>
                      {profile.company_name}
                    <% else %>
                      {profile.first_name} {profile.last_name}
                    <% end %>
                  </span>
                  <span class={"badge badge-sm #{if profile.type == "company", do: "badge-primary", else: "badge-secondary"}"}>
                    {String.capitalize(profile.type)}
                  </span>
                </div>
              </:card_header>
              <:card_actions :let={profile}>
                <.table_row_menu id={"card-menu-#{profile.uuid}"}>
                  <.table_row_menu_link
                    navigate={PhoenixKit.Utils.Routes.path("/admin/billing/profiles/#{profile.uuid}/edit")}
                    icon="hero-pencil"
                    label={gettext("Edit")}
                  />
                </.table_row_menu>
              </:card_actions>
              <.table_default_header>
                <.table_default_row>
                  <.table_default_header_cell>User</.table_default_header_cell>
                  <.table_default_header_cell>Type</.table_default_header_cell>
                  <.table_default_header_cell>Name / Company</.table_default_header_cell>
                  <.table_default_header_cell>Location</.table_default_header_cell>
                  <.table_default_header_cell>Default</.table_default_header_cell>
                  <.table_default_header_cell>Created</.table_default_header_cell>
                  <.table_default_header_cell></.table_default_header_cell>
                </.table_default_row>
              </.table_default_header>
              <.table_default_body>
                <%= for profile <- @profiles do %>
                  <.table_default_row class="hover cursor-pointer" phx-click="edit_profile" phx-value-uuid={profile.uuid}>
                    <.table_default_cell>
                      <%= if profile.user do %>
                        <div class="flex items-center gap-2">
                          <.user_avatar user={profile.user} size="sm" />
                          <div class="text-sm">{profile.user.email}</div>
                        </div>
                      <% else %>
                        <span class="text-base-content/50">-</span>
                      <% end %>
                    </.table_default_cell>
                    <.table_default_cell>
                      <span class={"badge badge-sm #{if profile.type == "company", do: "badge-primary", else: "badge-secondary"}"}>
                        {String.capitalize(profile.type)}
                      </span>
                    </.table_default_cell>
                    <.table_default_cell>
                      <%= if profile.type == "company" do %>
                        <div class="font-medium">{profile.company_name}</div>
                        <%= if profile.company_vat_number do %>
                          <div class="text-xs text-base-content/60">
                            VAT: {profile.company_vat_number}
                          </div>
                        <% end %>
                      <% else %>
                        <div class="font-medium">
                          {profile.first_name} {profile.last_name}
                        </div>
                        <%= if profile.email do %>
                          <div class="text-xs text-base-content/60">{profile.email}</div>
                        <% end %>
                      <% end %>
                    </.table_default_cell>
                    <.table_default_cell class="text-sm text-base-content/60">
                      <%= if profile.city do %>
                        {profile.city}, {profile.country}
                      <% else %>
                        {profile.country || "-"}
                      <% end %>
                    </.table_default_cell>
                    <.table_default_cell>
                      <%= if profile.is_default do %>
                        <span class="badge badge-success badge-sm h-auto">Default</span>
                      <% end %>
                    </.table_default_cell>
                    <.table_default_cell class="text-sm text-base-content/60">
                      <.time_ago datetime={profile.inserted_at} />
                    </.table_default_cell>
                    <.table_default_cell>
                      <.table_row_menu id={"menu-#{profile.uuid}"}>
                        <.table_row_menu_link
                          navigate={PhoenixKit.Utils.Routes.path("/admin/billing/profiles/#{profile.uuid}/edit")}
                          icon="hero-pencil"
                          label={gettext("Edit")}
                        />
                      </.table_row_menu>
                    </.table_default_cell>
                  </.table_default_row>
                <% end %>
              </.table_default_body>
            </.table_default>

            <%!-- Pagination --%>
            <%= if @total_pages > 1 do %>
              <div class="flex justify-center py-4">
                <.pagination
                  current_page={@page}
                  total_pages={@total_pages}
                  base_path={PhoenixKit.Utils.Routes.path("/admin/billing/profiles")}
                  params={%{"search" => @search, "type" => @type_filter}}
                />
              </div>
            <% end %>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>