Current section
Files
Jump to
Current section
Files
lib/phoenix_kit/modules/billing/web/invoice_detail.html.heex
<div class="container mx-auto px-4 py-6">
<%!-- Header --%>
<.admin_page_header back={PhoenixKit.Utils.Routes.path("/admin/billing/invoices")}>
<div class="flex items-center gap-3">
<h1 class="text-xl sm:text-2xl lg:text-3xl font-bold font-mono text-base-content">
{@invoice.invoice_number}
</h1>
<.invoice_status_badge status={@invoice.status} size={:md} />
</div>
<p class="text-sm text-base-content/60 mt-0.5">
Created <.time_ago datetime={@invoice.inserted_at} />
</p>
<:actions>
<%!-- Send/Resend Invoice - available for all except void --%>
<%= if @invoice.status != "void" do %>
<button phx-click="open_send_modal" class="btn btn-info btn-sm">
<.icon name="hero-paper-airplane" class="w-4 h-4" />
{if @invoice.status == "draft", do: "Send Invoice", else: "Resend Invoice"}
</button>
<% end %>
<%!-- Mark as Paid - available for sent/overdue --%>
<%= if @invoice.status in ["sent", "overdue"] do %>
<button phx-click="open_payment_modal" class="btn btn-success btn-sm">
<.icon name="hero-banknotes" class="w-4 h-4" /> Record Payment
</button>
<% end %>
<%!-- Online Payment Providers - available for sent/overdue with remaining balance --%>
<%= if @invoice.status in ["sent", "overdue"] && Decimal.positive?(PhoenixKit.Modules.Billing.Invoice.remaining_amount(@invoice)) do %>
<%= for provider <- @available_providers do %>
<button
phx-click="pay_with_provider"
phx-value-provider={provider}
class={[
"btn btn-sm",
provider == :stripe && "btn-primary",
provider == :paypal && "btn-info",
provider == :razorpay && "btn-secondary"
]}
disabled={@checkout_loading != nil}
>
<%= if @checkout_loading == provider do %>
<span class="loading loading-spinner loading-xs"></span>
<% else %>
<%= case provider do %>
<% :stripe -> %>
<.icon name="hero-credit-card" class="w-4 h-4" />
<% :paypal -> %>
<.icon name="hero-currency-dollar" class="w-4 h-4" />
<% :razorpay -> %>
<.icon name="hero-banknotes" class="w-4 h-4" />
<% _ -> %>
<.icon name="hero-credit-card" class="w-4 h-4" />
<% end %>
<% end %>
Pay with {provider |> Atom.to_string() |> String.capitalize()}
</button>
<% end %>
<% end %>
<%!-- Issue Refund - available if has payments --%>
<%= if PhoenixKit.Modules.Billing.Invoice.has_payments?(@invoice) do %>
<button phx-click="open_refund_modal" class="btn btn-warning btn-sm">
<.icon name="hero-arrow-uturn-left" class="w-4 h-4" /> Issue Refund
</button>
<% end %>
<%!-- Generate Receipt - available when paid_amount > 0 and no receipt yet --%>
<%= if is_nil(@invoice.receipt_number) && @invoice.paid_amount && Decimal.gt?(@invoice.paid_amount, Decimal.new(0)) do %>
<button phx-click="generate_receipt" class="btn btn-outline btn-sm">
<.icon name="hero-document-check" class="w-4 h-4" />
<%= if @invoice.status == "paid" do %>
Generate Receipt
<% else %>
Generate Partial Receipt
<% end %>
</button>
<% end %>
<%!-- Void - available for draft/sent/overdue --%>
<%= if @invoice.status in ["draft", "sent", "overdue"] do %>
<button
phx-click="void_invoice"
class="btn btn-error btn-outline btn-sm"
data-confirm="Are you sure you want to void this invoice?"
>
<.icon name="hero-x-mark" class="w-4 h-4" /> Void
</button>
<% end %>
<.link
navigate={
PhoenixKit.Utils.Routes.path("/admin/billing/invoices/#{@invoice.uuid}/print")
}
class="btn btn-outline btn-sm"
target="_blank"
>
<.icon name="hero-printer" class="w-4 h-4" /> Print / PDF
</.link>
<%!-- View Receipt - available when receipt is generated --%>
<%= if @invoice.receipt_number do %>
<.link
navigate={
PhoenixKit.Utils.Routes.path("/admin/billing/invoices/#{@invoice.uuid}/receipt")
}
class="btn btn-success btn-sm"
target="_blank"
>
<.icon name="hero-document-check" class="w-4 h-4" /> View Receipt
</.link>
<button phx-click="open_send_receipt_modal" class="btn btn-success btn-outline btn-sm">
<.icon name="hero-paper-airplane" class="w-4 h-4" /> Send Receipt
</button>
<% end %>
</:actions>
</.admin_page_header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<%!-- Main Content --%>
<div class="lg:col-span-2 space-y-6">
<%!-- Invoice Details --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Invoice Details</h2>
<%!-- Line Items --%>
<div class="overflow-x-auto mt-4">
<table class="table">
<thead>
<tr>
<th>Item</th>
<th class="text-right">Qty</th>
<th class="text-right">Unit Price</th>
<th class="text-right">Total</th>
</tr>
</thead>
<tbody>
<%= for item <- @invoice.line_items || [] do %>
<tr>
<td>
<div class="font-medium">{item["name"]}</div>
<%= if item["description"] do %>
<div class="text-sm text-base-content/60">{item["description"]}</div>
<% end %>
</td>
<td class="text-right">{item["quantity"]}</td>
<td class="text-right">
<.currency_compact
amount={item["unit_price"]}
currency={@invoice.currency}
/>
</td>
<td class="text-right">
<.currency_compact amount={item["total"]} currency={@invoice.currency} />
</td>
</tr>
<% end %>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-right font-medium">Subtotal</td>
<td class="text-right">
<.currency_compact amount={@invoice.subtotal} currency={@invoice.currency} />
</td>
</tr>
<%= if Decimal.gt?(@invoice.tax_amount || Decimal.new(0), Decimal.new(0)) do %>
<tr>
<td colspan="3" class="text-right">
Tax ({Decimal.round(
Decimal.mult(@invoice.tax_rate || Decimal.new(0), 100),
2
)
|> Decimal.normalize()
|> Decimal.to_string()}%)
</td>
<td class="text-right">
<.currency_compact
amount={@invoice.tax_amount}
currency={@invoice.currency}
/>
</td>
</tr>
<% end %>
<tr class="text-lg font-bold">
<td colspan="3" class="text-right">Total</td>
<td class="text-right">
<.currency_amount amount={@invoice.total} currency={@invoice.currency} />
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<%!-- Payments & Transactions --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<div class="flex justify-between items-center">
<h2 class="card-title">Payments & Transactions</h2>
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/billing/transactions")}
class="btn btn-ghost btn-xs"
>
View All <.icon name="hero-arrow-right" class="w-3 h-3" />
</.link>
</div>
<%!-- Payment Summary --%>
<div class="grid grid-cols-3 gap-4 mt-4">
<div class="bg-base-200 rounded-lg p-4 text-center">
<div class="text-sm text-base-content/60">Total</div>
<div class="text-lg font-bold">
<.currency_compact amount={@invoice.total} currency={@invoice.currency} />
</div>
</div>
<div class="bg-success/10 rounded-lg p-4 text-center">
<div class="text-sm text-success">Paid</div>
<div class="text-lg font-bold text-success">
<.currency_compact amount={@invoice.paid_amount} currency={@invoice.currency} />
</div>
</div>
<div class={[
"rounded-lg p-4 text-center",
if(
Decimal.positive?(
PhoenixKit.Modules.Billing.Invoice.remaining_amount(@invoice)
),
do: "bg-warning/10",
else: "bg-base-200"
)
]}>
<div class={[
"text-sm",
if(
Decimal.positive?(
PhoenixKit.Modules.Billing.Invoice.remaining_amount(@invoice)
),
do: "text-warning",
else: "text-base-content/60"
)
]}>
Remaining
</div>
<div class={[
"text-lg font-bold",
if(
Decimal.positive?(
PhoenixKit.Modules.Billing.Invoice.remaining_amount(@invoice)
),
do: "text-warning",
else: "text-base-content/60"
)
]}>
<.currency_compact
amount={PhoenixKit.Modules.Billing.Invoice.remaining_amount(@invoice)}
currency={@invoice.currency}
/>
</div>
</div>
</div>
<%!-- Transactions Table --%>
<%= if Enum.empty?(@transactions) do %>
<div class="text-center py-6 text-base-content/50">
<.icon name="hero-banknotes" class="w-8 h-8 mx-auto mb-2 opacity-50" />
<p>No transactions recorded yet</p>
</div>
<% else %>
<div class="overflow-x-auto mt-4">
<table class="table table-sm">
<thead>
<tr>
<th>Date</th>
<th>Number</th>
<th>Type</th>
<th class="text-right">Amount</th>
<th>Description</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<%= for transaction <- @transactions do %>
<tr>
<td class="text-sm text-base-content/60">
<.time_ago datetime={transaction.inserted_at} />
</td>
<td class="font-mono text-xs">{transaction.transaction_number}</td>
<td>
<.transaction_type_badge type={
PhoenixKit.Modules.Billing.Transaction.type(transaction)
} />
</td>
<td class="text-right">
<span class={[
"font-mono font-medium",
if(Decimal.positive?(transaction.amount),
do: "text-success",
else: "text-error"
)
]}>
<%= if Decimal.positive?(transaction.amount) do %>
+<.currency_compact
amount={transaction.amount}
currency={transaction.currency}
/>
<% else %>
<.currency_compact
amount={transaction.amount}
currency={transaction.currency}
/>
<% end %>
</span>
</td>
<td class="max-w-[200px] truncate text-sm text-base-content/70">
{transaction.description || "-"}
</td>
<td class="text-right">
<div class="flex gap-1 justify-end">
<%= if Decimal.negative?(transaction.amount) do %>
<%!-- Refund: Credit Note buttons --%>
<.link
navigate={
PhoenixKit.Utils.Routes.path(
"/admin/billing/invoices/#{@invoice.uuid}/credit-note/#{transaction.uuid}"
)
}
class="btn btn-warning btn-xs tooltip tooltip-bottom"
target="_blank"
data-tip={gettext("Print Credit Note")}
>
<.icon name="hero-printer" class="w-3 h-3 hidden sm:inline" />
<span class="sm:hidden whitespace-nowrap">
{gettext("Print Credit Note")}
</span>
</.link>
<button
phx-click="open_send_credit_note_modal"
phx-value-transaction-uuid={transaction.uuid}
class="btn btn-warning btn-outline btn-xs tooltip tooltip-bottom"
data-tip={gettext("Send Credit Note")}
>
<.icon
name="hero-paper-airplane"
class="w-3 h-3 hidden sm:inline"
/>
<span class="sm:hidden whitespace-nowrap">
{gettext("Send Credit Note")}
</span>
</button>
<% else %>
<%!-- Payment: Payment Confirmation buttons --%>
<.link
navigate={
PhoenixKit.Utils.Routes.path(
"/admin/billing/invoices/#{@invoice.uuid}/payment/#{transaction.uuid}"
)
}
class="btn btn-success btn-xs tooltip tooltip-bottom"
target="_blank"
data-tip={gettext("Print Payment Confirmation")}
>
<.icon name="hero-printer" class="w-3 h-3 hidden sm:inline" />
<span class="sm:hidden whitespace-nowrap">
{gettext("Print Payment Confirmation")}
</span>
</.link>
<button
phx-click="open_send_payment_confirmation_modal"
phx-value-transaction-uuid={transaction.uuid}
class="btn btn-success btn-outline btn-xs tooltip tooltip-bottom"
data-tip={gettext("Send Payment Confirmation")}
>
<.icon
name="hero-paper-airplane"
class="w-3 h-3 hidden sm:inline"
/>
<span class="sm:hidden whitespace-nowrap">
{gettext("Send Payment Confirmation")}
</span>
</button>
<% end %>
</div>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
<% end %>
</div>
</div>
<%!-- Payment Terms & Notes --%>
<%= if @invoice.payment_terms || @invoice.notes do %>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Payment Information</h2>
<%= if @invoice.payment_terms do %>
<div class="mt-2">
<h4 class="font-medium text-sm text-base-content/60">Payment Terms</h4>
<p class="mt-1">{@invoice.payment_terms}</p>
</div>
<% end %>
<%= if @invoice.bank_details && map_size(@invoice.bank_details) > 0 do %>
<div class="mt-4">
<h4 class="font-medium text-sm text-base-content/60">Bank Details</h4>
<div class="mt-2 bg-base-200 p-4 rounded-lg font-mono text-sm">
<%= if @invoice.bank_details["bank_name"] do %>
<div>Bank: {@invoice.bank_details["bank_name"]}</div>
<% end %>
<%= if @invoice.bank_details["account_name"] do %>
<div>Account: {@invoice.bank_details["account_name"]}</div>
<% end %>
<%= if @invoice.bank_details["iban"] do %>
<div>IBAN: {@invoice.bank_details["iban"]}</div>
<% end %>
<%= if @invoice.bank_details["swift"] do %>
<div>SWIFT/BIC: {@invoice.bank_details["swift"]}</div>
<% end %>
</div>
</div>
<% end %>
<%= if @invoice.notes do %>
<div class="mt-4">
<h4 class="font-medium text-sm text-base-content/60">Notes</h4>
<p class="mt-1">{@invoice.notes}</p>
</div>
<% end %>
</div>
</div>
<% end %>
<%!-- Receipt --%>
<%= if @invoice.receipt_number do %>
<div class="card bg-success/10 border border-success shadow-xl">
<div class="card-body">
<div class="flex items-center gap-3">
<.icon name="hero-document-check" class="w-8 h-8 text-success" />
<div>
<h2 class="card-title text-success">Receipt Generated</h2>
<p class="font-mono">{@invoice.receipt_number}</p>
<p class="text-sm text-base-content/60 mt-1">
Generated <.time_ago datetime={@invoice.receipt_generated_at} />
</p>
</div>
</div>
</div>
</div>
<% end %>
</div>
<%!-- Sidebar --%>
<div class="space-y-6">
<%!-- Related Order --%>
<%= if @invoice.order do %>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Related Order</h2>
<div class="mt-2">
<.link
navigate={
PhoenixKit.Utils.Routes.path("/admin/billing/orders/#{@invoice.order.uuid}")
}
class="flex items-center gap-3 p-3 bg-base-200 rounded-lg hover:bg-base-300 transition-colors"
>
<.icon name="hero-clipboard-document-list" class="w-6 h-6 text-primary" />
<div>
<div class="font-mono font-medium">{@invoice.order.order_number}</div>
<div class="text-sm text-base-content/60">
<.order_status_badge status={@invoice.order.status} size={:xs} />
</div>
</div>
</.link>
</div>
</div>
</div>
<% end %>
<%!-- Customer Info --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Customer</h2>
<%= if @invoice.user do %>
<div class="flex items-center gap-3 mt-2">
<.user_avatar user={@invoice.user} size="lg" />
<div>
<div class="font-medium">{@invoice.user.email}</div>
<.link
navigate={
PhoenixKit.Utils.Routes.path("/admin/users/edit/#{@invoice.user.uuid}")
}
class="text-sm text-primary hover:underline"
>
View Profile
</.link>
</div>
</div>
<% else %>
<p class="text-base-content/50 mt-2">No customer linked</p>
<% end %>
</div>
</div>
<%!-- Billing Details --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Billing Details</h2>
<%= if @invoice.billing_details && map_size(@invoice.billing_details) > 0 do %>
<div class="mt-2 space-y-2 text-sm">
<%= if @invoice.billing_details["type"] == "company" do %>
<div class="font-medium">{@invoice.billing_details["company_name"]}</div>
<%= if @invoice.billing_details["company_vat_number"] do %>
<div class="text-base-content/60">
VAT: {@invoice.billing_details["company_vat_number"]}
</div>
<% end %>
<% else %>
<div class="font-medium">
{@invoice.billing_details["first_name"]} {@invoice.billing_details[
"last_name"
]}
</div>
<% end %>
<%= if @invoice.billing_details["address_line1"] do %>
<div class="text-base-content/60">
{@invoice.billing_details["address_line1"]}<br />
<%= if @invoice.billing_details["address_line2"] do %>
{@invoice.billing_details["address_line2"]}<br />
<% end %>
{@invoice.billing_details["city"]}, {@invoice.billing_details["postal_code"]}<br />
{@invoice.billing_details["country"]}
</div>
<% end %>
</div>
<% else %>
<p class="text-base-content/50 mt-2">No billing details</p>
<% end %>
</div>
</div>
<%!-- Timeline (sorted by datetime) --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Timeline</h2>
<% timeline_events = build_timeline_events(@invoice, @transactions) %>
<ul class="timeline timeline-vertical mt-2">
<%= for {event, index} <- Enum.with_index(timeline_events) do %>
<li>
<%= if index > 0 do %>
<hr />
<% end %>
<%= case event.type do %>
<% :created -> %>
<div class="timeline-start text-sm text-base-content/60">
<.time_ago datetime={event.datetime} />
</div>
<div class="timeline-middle">
<.icon name="hero-document-plus" class="w-4 h-4" />
</div>
<div class="timeline-end timeline-box">Created</div>
<% :invoice_sent -> %>
<div class="timeline-start text-sm text-base-content/60">
<.time_ago datetime={event.datetime} />
</div>
<div class="timeline-middle text-info">
<.icon name="hero-paper-airplane" class="w-4 h-4" />
</div>
<div class="timeline-end timeline-box">
<div>Invoice Sent</div>
<div class="text-xs text-base-content/60">{event.data["email"]}</div>
</div>
<% :invoice_sent_legacy -> %>
<div class="timeline-start text-sm text-base-content/60">
<.time_ago datetime={event.datetime} />
</div>
<div class="timeline-middle text-info">
<.icon name="hero-paper-airplane" class="w-4 h-4" />
</div>
<div class="timeline-end timeline-box">Invoice Sent</div>
<% :payment -> %>
<div class="timeline-start text-sm text-base-content/60">
<.time_ago datetime={event.datetime} />
</div>
<div class="timeline-middle text-success">
<.icon name="hero-banknotes" class="w-4 h-4" />
</div>
<div class="timeline-end timeline-box bg-success/10 border-success">
<div>Payment</div>
<div class="text-xs font-mono">
+<.currency_compact
amount={event.data.amount}
currency={event.data.currency}
/>
</div>
<%= if event.data.description do %>
<div class="text-xs text-base-content/60">{event.data.description}</div>
<% end %>
</div>
<% :paid -> %>
<div class="timeline-start text-sm text-base-content/60">
<.time_ago datetime={event.datetime} />
</div>
<div class="timeline-middle text-success">
<.icon name="hero-check-circle" class="w-4 h-4" />
</div>
<div class="timeline-end timeline-box bg-success/10 border-success">
Fully Paid
</div>
<% :receipt_generated -> %>
<div class="timeline-start text-sm text-base-content/60">
<.time_ago datetime={event.datetime} />
</div>
<div class="timeline-middle text-success">
<.icon name="hero-document-check" class="w-4 h-4" />
</div>
<div class="timeline-end timeline-box">
<div>Receipt Generated</div>
<div class="text-xs text-base-content/60 font-mono">{event.data}</div>
</div>
<% :receipt_sent -> %>
<div class="timeline-start text-sm text-base-content/60">
<.time_ago datetime={event.datetime} />
</div>
<div class="timeline-middle text-success">
<.icon name="hero-paper-airplane" class="w-4 h-4" />
</div>
<div class="timeline-end timeline-box">
<div>Receipt Sent</div>
<div class="text-xs text-base-content/60">{event.data["email"]}</div>
</div>
<% :refund -> %>
<div class="timeline-start text-sm text-base-content/60">
<.time_ago datetime={event.datetime} />
</div>
<div class="timeline-middle text-warning">
<.icon name="hero-arrow-uturn-left" class="w-4 h-4" />
</div>
<div class="timeline-end timeline-box bg-warning/10 border-warning">
<div>Refund</div>
<div class="text-xs font-mono">
<.currency_compact
amount={Decimal.abs(event.data.amount)}
currency={event.data.currency}
/>
</div>
<%= if event.data.description do %>
<div class="text-xs text-base-content/60">{event.data.description}</div>
<% end %>
</div>
<% :credit_note_sent -> %>
<div class="timeline-start text-sm text-base-content/60">
<.time_ago datetime={event.datetime} />
</div>
<div class="timeline-middle text-warning">
<.icon name="hero-paper-airplane" class="w-4 h-4" />
</div>
<div class="timeline-end timeline-box">
<div>Credit Note Sent</div>
<div class="text-xs text-base-content/60">{event.data["email"]}</div>
<div class="text-xs text-base-content/60 font-mono">
{event.data["credit_note_number"]}
</div>
</div>
<% :voided -> %>
<div class="timeline-start text-sm text-base-content/60">
<.time_ago datetime={event.datetime} />
</div>
<div class="timeline-middle text-error">
<.icon name="hero-x-circle" class="w-4 h-4" />
</div>
<div class="timeline-end timeline-box bg-error/10 border-error">Voided</div>
<% _ -> %>
<div class="timeline-start text-sm text-base-content/60">
<.time_ago datetime={event.datetime} />
</div>
<div class="timeline-middle">
<.icon name="hero-question-mark-circle" class="w-4 h-4" />
</div>
<div class="timeline-end timeline-box">Unknown Event</div>
<% end %>
<%= if index < length(timeline_events) - 1 do %>
<hr />
<% end %>
</li>
<% end %>
<%!-- Full refund indicator (always at the end if applicable) --%>
<%= if fully_refunded?(@invoice, @transactions) do %>
<li>
<hr />
<div class="timeline-start text-sm text-base-content/60"></div>
<div class="timeline-middle text-error">
<.icon name="hero-x-circle" class="w-4 h-4" />
</div>
<div class="timeline-end timeline-box bg-error/10 border-error">
<div>Fully Refunded</div>
</div>
</li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
</div>
<%!-- Payment Modal --%>
<%= if @show_payment_modal do %>
<div class="modal modal-open">
<div class="modal-box">
<h3 class="font-bold text-lg">Record Payment</h3>
<p class="py-2 text-base-content/60">
Recording payment for invoice {@invoice.invoice_number}
</p>
<form phx-change="update_payment_form" phx-submit="record_payment">
<div class="form-control mt-4">
<label class="label">
<span class="label-text">Amount ({@invoice.currency})</span>
<span class="label-text-alt">
Remaining:
<.currency_compact
amount={PhoenixKit.Modules.Billing.Invoice.remaining_amount(@invoice)}
currency={@invoice.currency}
/>
</span>
</label>
<input
type="number"
name="amount"
step="0.01"
min="0.01"
max={
Decimal.to_string(PhoenixKit.Modules.Billing.Invoice.remaining_amount(@invoice))
}
value={@payment_amount}
class="input input-bordered"
required
/>
</div>
<div class="form-control mt-4">
<label class="label">
<span class="label-text">Payment Method</span>
</label>
<select name="payment_method" class="select select-bordered">
<%= for method <- @available_payment_methods do %>
<option value={method} selected={method == @selected_payment_method}>
{format_payment_method_name(method)}
</option>
<% end %>
</select>
</div>
<div class="form-control mt-4">
<label class="label">
<span class="label-text">Description (optional)</span>
</label>
<input
type="text"
name="description"
value={@payment_description}
placeholder="Payment reference, notes..."
class="input input-bordered"
/>
</div>
<div class="modal-action">
<button type="button" phx-click="close_payment_modal" class="btn">Cancel</button>
<button type="submit" class="btn btn-success">
<.icon name="hero-banknotes" class="w-4 h-4" /> Record Payment
</button>
</div>
</form>
</div>
<div class="modal-backdrop" phx-click="close_payment_modal"></div>
</div>
<% end %>
<%!-- Refund Modal --%>
<%= if @show_refund_modal do %>
<div class="modal modal-open">
<div class="modal-box">
<h3 class="font-bold text-lg">Issue Refund</h3>
<p class="py-2 text-base-content/60">
Issue refund for invoice {@invoice.invoice_number}
</p>
<form phx-change="update_refund_form" phx-submit="record_refund">
<div class="form-control mt-4">
<label class="label">
<span class="label-text">Refund Amount ({@invoice.currency})</span>
<span class="label-text-alt">
Max:
<.currency_compact
amount={@invoice.paid_amount}
currency={@invoice.currency}
/>
</span>
</label>
<input
type="number"
name="amount"
step="0.01"
min="0.01"
max={Decimal.to_string(@invoice.paid_amount)}
value={@refund_amount}
class="input input-bordered"
placeholder="Enter refund amount"
required
/>
</div>
<div class="form-control mt-4">
<label class="label">
<span class="label-text">Reason <span class="text-error">*</span></span>
</label>
<input
type="text"
name="description"
value={@refund_description}
placeholder="Reason for refund (required)"
class="input input-bordered"
required
/>
</div>
<div class="form-control mt-4">
<label class="label">
<span class="label-text">Refund Method</span>
</label>
<select name="payment_method" class="select select-bordered">
<%= for method <- @available_payment_methods do %>
<option value={method} selected={method == @selected_refund_payment_method}>
{format_payment_method_name(method)}
</option>
<% end %>
</select>
</div>
<div class="modal-action">
<button type="button" phx-click="close_refund_modal" class="btn">Cancel</button>
<button type="submit" class="btn btn-warning">
<.icon name="hero-arrow-uturn-left" class="w-4 h-4" /> Issue Refund
</button>
</div>
</form>
</div>
<div class="modal-backdrop" phx-click="close_refund_modal"></div>
</div>
<% end %>
<%!-- Send Invoice Modal --%>
<%= if @show_send_modal do %>
<div class="modal modal-open">
<div class="modal-box">
<h3 class="font-bold text-lg">
{if @invoice.status == "draft", do: "Send Invoice", else: "Resend Invoice"}
</h3>
<p class="py-2 text-base-content/60">
{if @invoice.status == "draft",
do: "Send invoice to customer's email address",
else: "Resend invoice to customer's email address"}
</p>
<form phx-change="update_send_form" phx-submit="send_invoice">
<div class="form-control mt-4">
<label class="label">
<span class="label-text">Email Address</span>
</label>
<input
type="email"
name="email"
value={@send_email}
placeholder="customer@example.com"
class="input input-bordered"
required
/>
</div>
<div class="modal-action">
<button type="button" phx-click="close_send_modal" class="btn">Cancel</button>
<button type="submit" class="btn btn-info">
<.icon name="hero-paper-airplane" class="w-4 h-4" />
{if @invoice.status == "draft", do: "Send Invoice", else: "Resend Invoice"}
</button>
</div>
</form>
</div>
<div class="modal-backdrop" phx-click="close_send_modal"></div>
</div>
<% end %>
<%!-- Send Receipt Modal --%>
<%= if @show_send_receipt_modal do %>
<div class="modal modal-open">
<div class="modal-box">
<h3 class="font-bold text-lg">Send Receipt</h3>
<p class="py-2 text-base-content/60">
Send payment receipt to customer's email address
</p>
<form phx-change="update_send_receipt_form" phx-submit="send_receipt">
<div class="form-control mt-4">
<label class="label">
<span class="label-text">Email Address</span>
</label>
<input
type="email"
name="email"
value={@send_receipt_email}
placeholder="customer@example.com"
class="input input-bordered"
required
/>
</div>
<div class="modal-action">
<button type="button" phx-click="close_send_receipt_modal" class="btn">Cancel</button>
<button type="submit" class="btn btn-success">
<.icon name="hero-paper-airplane" class="w-4 h-4" /> Send Receipt
</button>
</div>
</form>
</div>
<div class="modal-backdrop" phx-click="close_send_receipt_modal"></div>
</div>
<% end %>
<%!-- Send Credit Note Modal --%>
<%= if @show_send_credit_note_modal do %>
<div class="modal modal-open">
<div class="modal-box">
<h3 class="font-bold text-lg">Send Credit Note</h3>
<p class="py-2 text-base-content/60">
Send credit note (refund document) to customer's email address
</p>
<form phx-change="update_send_credit_note_form" phx-submit="send_credit_note">
<div class="form-control mt-4">
<label class="label">
<span class="label-text">Email Address</span>
</label>
<input
type="email"
name="email"
value={@send_credit_note_email}
placeholder="customer@example.com"
class="input input-bordered"
required
/>
</div>
<div class="modal-action">
<button type="button" phx-click="close_send_credit_note_modal" class="btn">
Cancel
</button>
<button type="submit" class="btn btn-warning">
<.icon name="hero-paper-airplane" class="w-4 h-4" /> Send Credit Note
</button>
</div>
</form>
</div>
<div class="modal-backdrop" phx-click="close_send_credit_note_modal"></div>
</div>
<% end %>
<%!-- Send Payment Confirmation Modal --%>
<%= if @show_send_payment_confirmation_modal do %>
<div class="modal modal-open">
<div class="modal-box">
<h3 class="font-bold text-lg">Send Payment Confirmation</h3>
<p class="py-2 text-base-content/60">
Send payment confirmation to customer's email address
</p>
<form
phx-change="update_send_payment_confirmation_form"
phx-submit="send_payment_confirmation"
>
<div class="form-control mt-4">
<label class="label">
<span class="label-text">Email Address</span>
</label>
<input
type="email"
name="email"
value={@send_payment_confirmation_email}
placeholder="customer@example.com"
class="input input-bordered"
required
/>
</div>
<div class="modal-action">
<button type="button" phx-click="close_send_payment_confirmation_modal" class="btn">
Cancel
</button>
<button type="submit" class="btn btn-success">
<.icon name="hero-paper-airplane" class="w-4 h-4" /> Send Confirmation
</button>
</div>
</form>
</div>
<div class="modal-backdrop" phx-click="close_send_payment_confirmation_modal"></div>
</div>
<% end %>