{%- 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}) }}
{% endif %}
{%- endmacro -%}
{% for page in layout %}
<div class="page-break invoice-page">
	<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 {
			padding-top: 12px !important;
			padding-bottom: 12px !important;
		}
		.invoice-page {
			font-family: Inter, sans-serif;
			color: #171717;
		}

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

		.title {
			color: #7c7c7c !important;
		}
		.text-muted {
			color: #7c7c7c !important;
		}
		.text-dark {
			color: #171717 !important;
		}
		.small-text {
			font-size: 11px;
			color: #666;
		}

		.text-left {
			text-align: left;
		}
		.text-center {
			text-align: center;
		}
		.text-right {
			text-align: right;
		}
		.text-bold {
			font-weight: 700;
		}

		.mt-15 {
			margin-top: 15px;
		}
		.mt-16 {
			margin-top: 16px;
		}
		.mt-40 {
			margin-top: 40px;
		}
		.mw-400 {
			max-width: 400px;
		}

		.items-table,
		.tax-table {
			width: 100%;
			border-collapse: separate;
			border-spacing: 0;
			border-radius: 10px;
			overflow: hidden;
		}

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

		.items-table thead td,
		.tax-table thead td {
			color: #7c7c7c !important;
		}
		.items-table thead tr:first-of-type td,
		.tax-table thead tr:first-of-type td {
			border-bottom: none;
		}

		.items-table thead tr:first-child td:first-child,
		.tax-table thead tr:first-child td:first-child {
			border-top-left-radius: 10px;
			border-bottom-left-radius: 10px;
		}
		.items-table thead tr:first-child td:last-child,
		.tax-table thead tr:first-child td:last-child {
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;
		}

		.in-words {
			color: #171717 !important;
			max-width: 400px;
			word-wrap: break-word;
			line-height: 1.5;
			font-size: 12px;
		}

		.row-divider {
			border-bottom: 1px solid #e9e9e9;
		}

		.highlight-bg {
			background: #f8f8f8;
		}

		.info-card {
			margin-top: 40px;
			color: #7c7c7c;
		}

		.info-text {
			margin-bottom: 12px;
		}

		.print-format {
			color: #171717;
			font-size: 14px;
			font-style: normal;
			font-weight: 420;
			line-height: 21px;
			padding: 0px !important;
			margin-left: 0mm !important;
			margin-right: 0mm !important;
		}

		.letter-head-footer {
			margin-top: 0px !important;
		}

		.print-format-body td {
			padding: 8px 8px !important;
		}

		.tax-table td,
		.items-table td {
			height: auto !important;
		}

		.tax-table thead td,
		.items-table thead td {
			height: 32px;
		}

		.item-img td {
			border: none !important;
			padding: 0px !important;
		}
	</style>

	<div class="print-format-body">
		<table class="info-table col-xs-12" style="width: 100%; margin-left: 12px">
			<tr>
				<td class="col-xs-7" style="padding: 0 !important">
					<div class="title col-xs-5 p-0">
						<div class="info-text">Customer Name:</div>
						<div class="info-text">Bill to:</div>
					</div>
					<div class="col-xs-7">
						<div class="info-text">{{ doc.customer_name }}</div>
						<div class="info-text">{{ doc.address_display or "" }}</div>
					</div>
				</td>

				<td class="col-xs-5" style="padding: 0 !important">
					<div class="title col-xs-6 p-0">
						<div class="info-text">Invoice Number:</div>
						<div class="info-text">Invoice Date:</div>
						<div class="info-text">Payment Due Date:</div>
					</div>
					<div class="col-xs-6">
						<div class="info-text">{{ doc.name }}</div>
						<div class="info-text">{{ frappe.utils.format_date(doc.posting_date) }}</div>
						<div class="info-text">{{ frappe.utils.format_date(doc.due_date) }}</div>
					</div>
				</td>
			</tr>
		</table>

		<!-- Items Table -->
		<table class="items-table mt-15">
			<colgroup>
				<col style="width: 5%" />
				<col style="width: 35%" />
				<col style="width: 10%" />
				<col style="width: 20%" />
				<col style="width: 15%" />
			</colgroup>
			<thead class="highlight-bg">
				<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">{{ loop.index }}</td>
					<td class="text-left">
						<table class="item-img" style="border-collapse: collapse">
							<tr>
								{% if item.image %}
								<td class="no-style" style="border-radius: 6px; vertical-align: middle">
									<img
										src="{{ item.image }}"
										alt="{{ item.item_name }}"
										style="
											border-radius: 6px;
											max-height: 24px;
											min-height: 24px;
											max-width: 24px;
											min-width: 24px;
											margin-right: 8px;
                                            vertical-align: middle;
										"
									/>
								</td>
								{% endif %}
								<td
									class="no-style"
									style="vertical-align: middle !important; padding: 0 !important"
								>
									{{ item.item_name }}
								</td>
							</tr>
						</table>
					</td>

					<td class="text-right">{{ item.get_formatted("qty", 0) }} {{ item.uom }}</td>
					<td class="text-right">{{ item.get_formatted("net_rate", doc) }}</td>
					<td class="text-right">{{ item.get_formatted("net_amount", doc) }}</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>

		<table class="totals mt-16" style="width: 100%">
			<tr>
				<td style="width: 65%">&nbsp;</td>

				<td
					style="
						width: 35%;
						vertical-align: top;
						text-align: right;
						padding: 0px 0px 6px 0px !important;
					"
				>
					<table style="width: 100%; border-collapse: collapse">
						<tr class="row-divider">
							<td class="text-right title">{{ _("Sub Total:") }}</td>
							<td class="text-right">{{ doc.get_formatted("total", doc) }}</td>
						</tr>
						<tr class="row-divider">
							<td class="text-right title">
								{{ _("Discount") }} ({{ doc.additional_discount_percentage or 0 }}%):
							</td>
							<td class="text-right">{{ doc.get_formatted("discount_amount", doc) }}</td>
						</tr>
						{% set tax_rate = doc.taxes | selectattr("tax_amount") | sum(attribute="rate") %} {%
						if tax_rate > 0 %}
						<tr class="row-divider">
							<td class="text-right title">{{ _("Tax") }} ({{ tax_rate }}%):</td>
							<td class="text-right">
								{{ doc.get_formatted("total_taxes_and_charges", doc) }}
							</td>
						</tr>
						{% endif %}
					</table>
				</td>
			</tr>

			<tr style="border-bottom: 1px solid #ededed">
				<td colspan="2" style="padding: 0 0 6px 0 !important">
					<div class="highlight-bg" style="border-radius: 12px">
						<table style="width: 100%; border-collapse: collapse">
							<tr>
								<td class="text-left mw-400">
									<div class="text-capitalize">
										<span class="title"> {{ _("In Words: ") }}</span>{{ doc.in_words }}
									</div>
								</td>
								<td class="text-right"><b>{{ _("Grand Total:") }}</b></td>
								<td class="text-right">
									<span style="font-weight: 700">
										{{ doc.get_formatted("grand_total", doc) }}
									</span>
								</td>
							</tr>
						</table>
					</div>
				</td>
			</tr>
		</table>

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