<style type="text/css">
    body, html {
        margin-top: 10px;
        padding: 0;
        width: 100%;
        height: auto;
        font-family: Inter, sans-serif;
        font-size: 14px;
        line-height: 21px;
        color: #171717;
    }

    .title-letter-spacing {
		font-size: 15px;
		font-weight: 600;
		color: #171717;
    }

    .report-table table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .report-table thead th {
        background: #f8f8f8;
        text-align: center;
		font-size: 14px;
        font-weight: 500;
        color: #7c7c7c;
        border-top: 1px solid #ededed;
        border-bottom: 1px solid #ededed;
        padding: 6px 8px;
    }

    .report-table tbody td {
        padding: 6px 8px;
        border-top: 1px solid #ededed;
        border-bottom: 1px solid #ededed;
        vertical-align: top;
        word-wrap: break-word;
        font-size: 14px;
    }

    .report-table thead th:first-child {
        border-left: 1px solid #ededed;
    }

    .report-table thead th:last-child {
        border-right: 1px solid #ededed;
    }

    .report-table tbody tr:last-child td {
        border-bottom: none;
    }

    .date-col {
        white-space: nowrap;
    }

    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-right { text-align: right; font-variant-numeric: tabular-nums; }

    .text-bold { font-weight: 700; }

    .report-meta {
        margin: 10px 0 14px;
        padding: 8px 10px;
        color: #171717;
		font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }

    .report-meta .left,
    .report-meta .right {
        display: flex;
        flex-direction: column;
    }

    .report-meta .filter-row {
        margin-bottom: 4px;
        line-height: 1.5;
    }

    .report-meta strong {
        color: #7c7c7c;
        font-weight: 500;
    }

    .report-subtitle {
        margin: 10px 0 14px;
    }

    @media print {
        @page {
            size: A4;
            margin-top: 10mm;
        }
        thead {
            display: table-header-group;
        }
        tfoot {
            display: table-footer-group;
        }
        tr {
            page-break-inside: avoid;
        }
        .no-print {
            display: none !important;
        }
    }
</style>

<br>

<div>

    <div class="text-center" style="margin-bottom: 12px;">
        <div class="title-letter-spacing">
            {%= __("Statement Of Accounts") %}
        </div>
    </div>

    {% if (subtitle && subtitle.trim()) { %}
        <div class="report-subtitle">
            {{ subtitle }}
        </div>
    {% } else { %}
       <div class="report-meta">
			<div class="left">
				<div class="filter-row">
					<strong>{%= __("Customer") %}:</strong>
					{%=
						(filters.party.length && filters.party.join(", ")) || filters.party_name || "All Parties"
					%}
				</div>
			</div>

			<div class="right text-right">
				<div class="filter-row">
					<strong>{%= __("Statement Period") %}:</strong>
					{%= __("{0} to {1}", [
						frappe.datetime.str_to_user(filters.from_date),
						frappe.datetime.str_to_user(filters.to_date)
					]) %}
				</div>
			</div>
		</div>
    {% } %}

    <div class="report-table">
        <table>
            <thead>
                <tr>
                    <th style="width: 8em; text-align: left;">{%= __("Date") %}</th>
                    <th style="text-align: left;">{%= __("Voucher Details") %}</th>

                    {% if(filters.show_remarks) { %}
                        <th style="text-align: left;">{%= __("Remarks") %}</th>
                    {% } %}

                    <th style="width: 10em; text-align: right;">{%= __("Debit") %}</th>
                    <th style="width: 10em; text-align: right;">{%= __("Credit") %}</th>
                    <th style="width: 10em; text-align: right;">{%= __("Balance") %}</th>
                </tr>
            </thead>

            <tbody>
				{% for(var i=0, l=data.length; i<l; i++) { %}
					{% var row = data[i]; %}
					{% var is_entry = row.posting_date; %}
					{% var is_last = i == l-1; %}
					{% var is_second_last = i == l-2; %}

					<tr>

						<td class="text-left date-col">
							{% if(is_entry) { %}
								{%= frappe.datetime.str_to_user(row.posting_date) %}
							{% } else if(i == 0) { %}
								{%= frappe.datetime.str_to_user(filters.from_date) %}
							{% } %}
						</td>

						<td class="{% if(!is_entry) { %}text-left text-bold{% } %}">
							{% if(is_entry) { %}

								{%= row.voucher_type %} {%= row.voucher_no %}

								{% if(!(filters.party || filters.account)) { %}
									<div style="margin-top: 2px;">
										{%= row.party || row.account %}
									</div>
								{% } %}

								{% if(row.bill_no) { %}
									<div style="margin-top: 2px;">
										{%= __("Supplier Invoice No") %}: {%= row.bill_no %}
									</div>
								{% } %}

							{% } else { %}

								{% if(is_second_last) { %}
									{%= __("Total") %}
								{% } else if(is_last) { %}
									{%= __("Closing [Opening + Total] ") %}
								{% } else { %}
									{%= frappe.format(row.account, {fieldtype: "Link"}) || "&nbsp;" %}
								{% } %}

							{% } %}
						</td>

						{% if(filters.show_remarks) { %}
						<td class="text-left">
							{% if(is_entry && row.remarks && row.remarks != "No Remarks") { %}
								{%= row.remarks %}
							{% } %}
						</td>
						{% } %}

						<td class="text-right">
							{% if(is_entry) { %}
								{% if(row.debit != 0) { %}
									{%= format_currency(row.debit, filters.presentation_currency) %}
								{% } %}
							{% } else if(i != 0 && !is_last) { %}
								{%= row.account && format_currency(row.debit, filters.presentation_currency) %}
							{% } %}
						</td>

						<td class="text-right">
							{% if(is_entry) { %}
								{% if(row.credit != 0) { %}
									{%= format_currency(row.credit, filters.presentation_currency) %}
								{% } %}
							{% } else if(i != 0 && !is_last) { %}
								{%= row.account && format_currency(row.credit, filters.presentation_currency) %}
							{% } %}
						</td>

						<td class="text-right {% if(is_last) { %}text-bold{% } %}">
							{% if(is_last) { %}
								{%= format_currency(row.balance, filters.presentation_currency) %}
								{% if(row.balance < 0) { %} Cr{% } %}
								{% if(row.balance > 0) { %} Dr{% } %}
							{% } else { %}
								{%= format_currency(row.balance, filters.presentation_currency) %}
							{% } %}
						</td>

					</tr>
				{% } %}
			</tbody>
        </table>
    </div>

    <p class="text-right">
        {%= __("Printed on {0}", [
            frappe.datetime.str_to_user(frappe.datetime.get_datetime_as_string())
        ]) %}
    </p>

</div>