phoenix_kit_billing

  <div class="container mx-auto px-4 py-6">
    <%!-- Header --%>
    <.admin_page_header
      back={PhoenixKit.Utils.Routes.path("/admin/billing")}
      title="Billing Settings"
      subtitle="Configure billing module options"
    />

    <%!-- Navigation Tabs --%>
    <div class="tabs tabs-boxed bg-base-200 p-1 mb-6">
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/settings/billing")}
        class="tab tab-active"
      >
        <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-2" /> General
      </.link>
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/settings/billing/providers")}
        class="tab"
      >
        <.icon name="hero-credit-card" class="w-4 h-4 mr-2" /> Payment Providers
      </.link>
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/billing/currencies")}
        class="tab"
      >
        <.icon name="hero-currency-dollar" class="w-4 h-4 mr-2" /> Currencies
      </.link>
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/billing/subscription-types")}
        class="tab"
      >
        <.icon name="hero-clipboard-document-list" class="w-4 h-4 mr-2" /> Subscription Types
      </.link>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <%!-- General Settings --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">General Settings</h2>
          <form phx-submit="save_general" class="space-y-4 mt-4">
            <div class="form-control">
              <label class="label">
                <span class="label-text">Default Currency</span>
              </label>
              <select name="default_currency" class="select select-bordered">
                <option value="EUR" selected={@default_currency == "EUR"}>EUR - Euro</option>
                <option value="USD" selected={@default_currency == "USD"}>USD - US Dollar</option>
                <option value="GBP" selected={@default_currency == "GBP"}>
                  GBP - British Pound
                </option>
              </select>
            </div>

            <div class="grid grid-cols-3 gap-4">
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Order Prefix</span>
                </label>
                <input
                  type="text"
                  name="order_prefix"
                  value={@order_prefix}
                  class="input input-bordered input-sm"
                  placeholder="ORD"
                />
              </div>
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Invoice Prefix</span>
                </label>
                <input
                  type="text"
                  name="invoice_prefix"
                  value={@invoice_prefix}
                  class="input input-bordered input-sm"
                  placeholder="INV"
                />
              </div>
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Receipt Prefix</span>
                </label>
                <input
                  type="text"
                  name="receipt_prefix"
                  value={@receipt_prefix}
                  class="input input-bordered input-sm"
                  placeholder="RCP"
                />
              </div>
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">Invoice Due Days</span>
              </label>
              <input
                type="number"
                name="invoice_due_days"
                value={@invoice_due_days}
                class="input input-bordered input-sm w-32"
                min="1"
                max="90"
              />
            </div>

            <div class="divider">Tax Settings</div>

            <div class="grid grid-cols-2 gap-4 items-end">
              <div class="form-control">
                <label class="label cursor-pointer justify-start gap-3">
                  <input
                    type="checkbox"
                    name="tax_enabled"
                    value="true"
                    checked={@tax_enabled}
                    class="checkbox checkbox-primary checkbox-sm"
                  />
                  <span class="label-text">Enable Tax</span>
                </label>
              </div>
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Default Tax Rate (%)</span>
                </label>
                <input
                  type="number"
                  name="tax_rate"
                  value={@tax_rate}
                  class="input input-bordered input-sm"
                  min="0"
                  max="100"
                  step="0.01"
                  phx-change="tax_rate_changed"
                />
              </div>
            </div>

            <%= if @suggested_tax_rate do %>
              <div class="alert alert-info py-2 mt-2">
                <div class="flex items-center gap-2">
                  <.icon name="hero-light-bulb" class="w-4 h-4" />
                  <span class="text-sm">
                    Suggested rate for selected country: <strong>{@suggested_tax_rate}%</strong>
                  </span>
                  <button
                    type="button"
                    class="btn btn-xs btn-primary"
                    phx-click="apply_suggested_tax"
                  >
                    Apply
                  </button>
                </div>
              </div>
            <% end %>

            <div class="card-actions justify-end mt-4">
              <button type="submit" class="btn btn-primary btn-sm">Save General Settings</button>
            </div>
          </form>
        </div>
      </div>

      <%!-- Company & Bank Information (Preview) --%>
      <div class="card bg-base-100 shadow-xl lg:col-span-2">
        <div class="card-body">
          <div class="flex items-center justify-between">
            <div>
              <h2 class="card-title">Company & Bank Information</h2>
              <p class="text-sm text-base-content/60">Shown on invoices and receipts</p>
            </div>
            <.link
              navigate={PhoenixKit.Utils.Routes.path("/admin/settings/organization")}
              class="btn btn-primary btn-sm"
            >
              <.icon name="hero-pencil-square" class="w-4 h-4" /> Edit in Organization
            </.link>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
            <%!-- Company Info Preview (same style as Legal Settings) --%>
            <div>
              <h3 class="font-semibold text-base-content/80 mb-3">Company</h3>
              <%= if @company_info["name"] && @company_info["name"] != "" do %>
                <div class="bg-base-200 rounded-lg p-4 space-y-3">
                  <div class="flex items-start gap-2">
                    <.icon
                      name="hero-building-office"
                      class="w-5 h-5 text-primary shrink-0 mt-0.5"
                    />
                    <div>
                      <p class="font-semibold">{@company_info["name"]}</p>
                      <%= if @company_info["registration_number"] && @company_info["registration_number"] != "" do %>
                        <p class="text-xs text-base-content/60">
                          Reg. No: {@company_info["registration_number"]}
                        </p>
                      <% end %>
                    </div>
                  </div>

                  <%= if @company_info["address_line1"] && @company_info["address_line1"] != "" do %>
                    <div class="flex items-start gap-2">
                      <.icon name="hero-map-pin" class="w-5 h-5 text-primary shrink-0 mt-0.5" />
                      <div class="text-sm">
                        <p>{@company_info["address_line1"]}</p>
                        <%= if @company_info["address_line2"] && @company_info["address_line2"] != "" do %>
                          <p>{@company_info["address_line2"]}</p>
                        <% end %>
                        <p>
                          {@company_info["city"]}
                          <%= if @company_info["state"] && @company_info["state"] != "" do %>
                            , {@company_info["state"]}
                          <% end %>
                          {@company_info["postal_code"]}
                        </p>
                        <%= if @company_country_name != "" do %>
                          <p>{@company_country_name}</p>
                        <% end %>
                      </div>
                    </div>
                  <% end %>

                  <%= if @company_info["vat_number"] && @company_info["vat_number"] != "" do %>
                    <div class="flex items-start gap-2">
                      <.icon
                        name="hero-document-text"
                        class="w-5 h-5 text-primary shrink-0 mt-0.5"
                      />
                      <div class="text-sm">
                        <span class="text-base-content/60">VAT:</span> {@company_info[
                          "vat_number"
                        ]}
                      </div>
                    </div>
                  <% end %>
                </div>
              <% else %>
                <div class="alert alert-warning">
                  <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
                  <span>Company information not configured</span>
                </div>
              <% end %>
            </div>

            <%!-- Bank Details Preview --%>
            <div>
              <h3 class="font-semibold text-base-content/80 mb-3">Bank Details</h3>
              <%= if @bank_details["bank_name"] && @bank_details["bank_name"] != "" do %>
                <div class="bg-base-200 rounded-lg p-4 space-y-3">
                  <div class="flex items-start gap-2">
                    <.icon
                      name="hero-building-library"
                      class="w-5 h-5 text-primary shrink-0 mt-0.5"
                    />
                    <p class="font-semibold">{@bank_details["bank_name"]}</p>
                  </div>
                  <%= if @bank_details["iban"] && @bank_details["iban"] != "" do %>
                    <div class="flex items-start gap-2">
                      <.icon
                        name="hero-credit-card"
                        class="w-5 h-5 text-primary shrink-0 mt-0.5"
                      />
                      <div class="text-sm">
                        <span class="text-base-content/60">IBAN:</span>
                        <span class="font-mono">{@bank_details["iban"]}</span>
                      </div>
                    </div>
                  <% end %>
                  <%= if @bank_details["swift"] && @bank_details["swift"] != "" do %>
                    <div class="flex items-start gap-2">
                      <.icon
                        name="hero-globe-americas"
                        class="w-5 h-5 text-primary shrink-0 mt-0.5"
                      />
                      <div class="text-sm">
                        <span class="text-base-content/60">SWIFT:</span>
                        <span class="font-mono">{@bank_details["swift"]}</span>
                      </div>
                    </div>
                  <% end %>
                </div>
              <% else %>
                <div class="alert alert-info">
                  <.icon name="hero-information-circle" class="w-5 h-5" />
                  <span>Bank details not configured (optional)</span>
                </div>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>

    <%!-- Quick Links --%>
    <div class="card bg-base-100 shadow-xl mt-6">
      <div class="card-body">
        <h2 class="card-title">Related Settings</h2>
        <div class="flex flex-wrap gap-4 mt-4">
          <.link
            navigate={PhoenixKit.Utils.Routes.path("/admin/settings/billing/providers")}
            class="btn btn-primary"
          >
            <.icon name="hero-credit-card" class="w-5 h-5" /> Payment Providers
          </.link>
          <.link
            navigate={PhoenixKit.Utils.Routes.path("/admin/billing/currencies")}
            class="btn btn-outline"
          >
            <.icon name="hero-currency-dollar" class="w-5 h-5" /> Manage Currencies
          </.link>
          <.link
            navigate={PhoenixKit.Utils.Routes.path("/admin/billing/subscription-types")}
            class="btn btn-outline"
          >
            <.icon name="hero-clipboard-document-list" class="w-5 h-5" /> Subscription Types
          </.link>
          <.link navigate={PhoenixKit.Utils.Routes.path("/admin/modules")} class="btn btn-outline">
            <.icon name="hero-squares-2x2" class="w-5 h-5" /> All Modules
          </.link>
        </div>
      </div>
    </div>
  </div>