{%- macro add_header(page_num, max_pages, doc, letter_head, no_letterhead, footer, print_settings=None,
print_heading_template=None) -%}
{% if letter_head and not no_letterhead %}
<div class="letter-head">{{ letter_head }}</div>
{% endif %}
{% if print_heading_template %}
	{{ frappe.render_template(print_heading_template, {"doc":doc}) }}
{% else %}
{% endif %}
{%- if doc.meta.is_submittable and doc.docstatus==2-%}
<div class="text-center" document-status="cancelled">
	<h4 style="margin: 0px">{{ _("CANCELLED") }}</h4>
</div>
{%- endif -%}
{%- endmacro -%} {% for page in layout %}
<div class="page-break invoice-wrapper">
	<div {% if print_settings.repeat_header_footer %} id="header-html" class="hidden-pdf" {% endif %}>
		{{ add_header(loop.index, layout|len, doc, letter_head, no_letterhead, footer, print_settings) }}
	</div>

	<style>
		.letter-head {
			margin-top: 12px !important;
		}
		.invoice-wrapper {
			font-family: "Inter", sans-serif;
			color: var(--black-overlay-700);
		}

		.print-format-body {
			padding: 30px 12px 12px 12px !important;
		}

		body {
			margin-bottom: 0mm !important;
			padding: 0px !important;
		}

		table.info-table,
		table.items-table,
		table.tax-table {
			border-collapse: separate;
			border-spacing: 0;
			border: 1px solid #ededed;
			border-radius: 10px;
			overflow: hidden;
		}

		table.info-table td {
			border-bottom: 1px solid #ededed;
			padding: 8px 10px !important;
		}
		table.items-table td,
		table.tax-table td {
			border-bottom: 1px solid #ededed;
			padding: 8px;
		}

		table.info-table td:not(:first-of-type),
		table.items-table td:not(:first-of-type),
		table.tax-table td:not(:first-of-type) {
			border-left: 1px solid #ededed;
		}

		table.info-table tbody tr:last-of-type td,
		table.items-table tbody tr:last-of-type td,
		table.tax-table tbody tr:last-of-type td {
			border-bottom: none;
		}

		thead.table-header {
			background: #f8f8f8;
		}
		thead.table-header td {
			color: #7c7c7c;
		}

		.text-center {
			text-align: center;
		}
		.text-left {
			text-align: left;
		}
		.text-right {
			text-align: right;
		}
		.text-muted {
			color: #7c7c7c;
		}
		.text-dark {
			color: #525252;
		}
		.text-bold {
			font-weight: bold;
		}
		.small-text {
			color: #666;
		}

		.mt-10 {
			margin-top: 10px;
		}
		.mt-15 {
			margin-top: 15px;
		}
		.mt-20 {
			margin-top: 20px;
		}
		.mt-40 {
			margin-top: 40px;
		}
		.mt-80 {
			margin-top: 80px;
		}
		.mb-20 {
			margin-bottom: 20px;
		}
		.pb-8 {
			padding-bottom: 8px;
		}
		.amount-width {
			width: 110px;
		}

		.totals-table {
			border-radius: 5px;
			width: 100%;
		}
		.totals-table td {
			padding: 4px 8px;
		}
		.totals-table tr {
			border-bottom: 1px solid #ededed;
		}
		.totals-table tr:last-child {
			border-bottom: none;
		}
		.totals-table .grand-total td {
			padding: 6px 8px;
			font-weight: bold;
		}

		.words-box {
			background: #f8f8f8;
			border-radius: 8px;
			padding: 8px;
			line-height: 21px;
			letter-spacing: 0.21px;
			font-size: small;
		}

		.info-card {
			color: #7c7c7c;
		}

		.title {
			color: #7c7c7c !important;
		}

		.heading {
			color: #525252 !important;
			font-weight: 300;
		}

		.print-format {
			color: #171717;
			font-size: 14px;
			font-style: normal;
			font-weight: 420;
			line-height: 21px;
			padding: 0px;
			letter-spacing: 0.14px;
			margin-left: 0mm !important;
			margin-right: 0mm !important;
		}
		.letter-head-footer {
			margin-top: 0px !important;
		}
		.print-heading {
			margin-top: 0px !important;
			margin-bottom: 0px !important;
			padding-bottom: 0px !important;
		}
	</style>
	<div class="print-format-body">
		<table class="info-table mb-20" style="width: 100%">
			<tr>
				<td style="width: 50%">
					<span class="heading">{{ _("Customer Name") }}:</span> {{doc.customer_name }}
				</td>
				<td style="width: 50%">
					<span class="heading">{{ _("Payment Due Date") }}:</span> {{
					frappe.utils.format_date(doc.due_date) }}
				</td>
			</tr>
			<tr>
				<td><span class="heading">{{ _("Invoice Number") }}:</span> {{ doc.name }}</td>
				<td>
					<span class="heading">{{ _("Invoice Date") }}:</span> {{
					frappe.utils.format_date(doc.posting_date) }}
				</td>
			</tr>
			<tr>
				<td><span class="heading">{{ _("Bill From") }}:</span><br />
					{% if doc.customer_address %}
						{% set customer_address = frappe.get_doc("Address", doc.customer_address) %}
						{{ doc.customer_name }}<br>
						{{ customer_address.address_line1 or "" }}
						{% if customer_address.address_line2 %}{{ customer_address.address_line2 }}{% endif %}<br>
						{{ customer_address.city or "" }} {{ customer_address.state or "" }} {{ customer_address.pincode or "" }} {{ customer_address.country or "" }}<br>
					{% endif %}
				</td>
				<td><span class="heading">{{ _("Bill To") }}:</span><br />
					{% if doc.company_address %}
						{% set company_address_display = frappe.get_doc("Address", doc.company_address) %}
						{{ doc.company }}<br>
						{{ company_address_display.address_line1 or "" }}
						{% if company_address_display.address_line2 %}{{ company_address_display.address_line2 }}{% endif %}<br>
						{{ company_address_display.city or "" }} {{ company_address_display.state or "" }} {{ company_address_display.pincode or "" }} {{ company_address_display.country or "" }}<br>
					{% endif %}
				</td>
			</tr>
		</table>

		<!-- Items Table -->
		<table class="items-table mt-15" style="width: 100%">
			<colgroup>
				<col style="width: 5%" />
				<col style="width: 40%" />
				<col style="width: 15%" />
				<col style="width: 20%" />
				<col style="width: 20%" />
			</colgroup>
			<thead class="table-header">
				<tr>
					<td class="text-center">{{ _("No") }}</td>
					<td class="text-left">{{ _("Item") }}</td>
					<td class="text-right">{{ _("Quantity") }}</td>
					<td class="text-right">{{ _("Rate") }}</td>
					<td class="text-right">{{ _("Amount") }}</td>
				</tr>
			</thead>
			<tbody>
				{% for item in doc.items %}
				<tr>
					<td class="text-center text-dark">{{ loop.index }}</td>
					<td>{{ item.item_name }}</td>
					<td class="text-right text-dark">{{ item.get_formatted("qty", 0) }} {{ item.uom }}</td>
					<td class="text-right text-dark">{{ item.get_formatted("net_rate", doc) }}</td>
					<td class="text-right" style="color: #171717">
						{{ item.get_formatted("net_amount", doc) }}
					</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>

		<!-- Totals Section -->
		<table style="width:100%; margin-top: 15px">
			<td style="vertical-align: bottom !important;">
				<p class="title">{{ _("Total in words") }}</p>
				<div class="words-box text-uppercase">{{ doc.in_words }}</div>
			</td>
			<td>
				<table class="totals-table">
					<tr>
						<td class="text-right text-muted">{{ _("Sub Total:") }}</td>
						<td class="text-right amount-width">{{ doc.get_formatted("total", doc) }}</td>
					</tr>
					{%- if doc.apply_discount_on == "Net Total" -%}
						<tr>
							<td class="text-right text-muted">
								{{ _("Discount") }} ({{ doc.additional_discount_percentage }}%):
							</td>
							<td class="text-right amount-width">{{ doc.get_formatted("discount_amount", doc) }}</td>
						</tr>
					{%- endif -%}
					{%- for tax in doc.taxes -%}
						{%- if (tax.tax_amount or print_settings.print_taxes_with_zero_amount) and (not tax.included_in_print_rate or doc.flags.show_inclusive_tax_in_print) -%}
							<tr>
								<td class="text-right text-muted">{{ tax.get_formatted("description") }} ({{ tax.get_formatted("rate") }}%):</td>
								<td class="text-right amount-width">{{ tax.get_formatted("tax_amount") }}</td>
							</tr>
						{%- endif -%}
					{%- endfor -%}
					{%- if doc.apply_discount_on == "Grand Total" -%}
						<tr>
							<td class="text-right text-muted">
								{{ _("Discount") }} ({{ doc.additional_discount_percentage }}%):
							</td>
							<td class="text-right amount-width">{{ doc.get_formatted("discount_amount", doc) }}</td>
						</tr>
					{%- endif -%}
					<tr class="grand-total">
						<td class="text-right">{{ _("Grand Total:") }}</td>
						<td class="text-right amount-width">{{ doc.get_formatted("grand_total", doc) }}</td>
					</tr>
				</table>
			</td>
		</table>

		<!-- Terms -->
		<div class="terms-section">
			{% if doc.terms %}
			<div class="info-card mt-40">
				<div>{{ _("Terms and Conditions") }}</div>
				{{ doc.terms}}
			</div>
			{% endif %}
	</div>
</div>
{% endfor %}