{% extends "templates/web.html" %}
{% from "erpnext/templates/includes/macros.html" import product_image %}

{% block breadcrumbs %}
	{% include "templates/includes/breadcrumbs.html" %}
{% endblock %}

{% block title %}
	{{ doc.name }}
{% endblock %}

{% block header %}
	<h3 class="m-0">{{ doc.name }}</h3>
{% endblock %}

{% block header_actions %}
	<div class="row">
		<div class="dropdown">
			<button class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
				<span class="font-md">{{ _('Actions') }}</span>
				<b class="caret"></b>
			</button>
			<ul class="dropdown-menu dropdown-menu-right" role="menu">
				{% if doc.doctype == 'Purchase Order' and show_make_pi_button %}
					<a class="dropdown-item"
						href="/api/method/erpnext.buying.doctype.purchase_order.purchase_order.make_purchase_invoice_from_portal?purchase_order_name={{ doc.name }}"
						data-action="make_purchase_invoice">{{ _("Make Purchase Invoice") }}
					</a>
				{% endif %}
				<a class="dropdown-item"
					href='/printview?doctype={{ doc.doctype}}&name={{ doc.name }}&format={{ print_format }}' target="_blank"
					rel="noopener noreferrer">
					{{ _("Print") }}
				</a>
			</ul>
		</div>
	</div>
{% endblock %}

{% block page_content %}
	<div>
		<div class="row transaction-subheading  mt-1">
			<div class="col-6 text-muted small mt-1">
				{{ frappe.utils.format_date(doc.transaction_date, 'medium') }}
				{% if doc.valid_till %}
					<p>
						{{ _("Valid Till") }}: {{ frappe.utils.format_date(doc.valid_till, 'medium') }}
					</p>
				{% endif %}
			</div>
		</div>
		<div class="row indicator-container mt-2">
			<div class="col-10">
				<span class="indicator-pill {{ doc.indicator_color or (" blue" if doc.docstatus==1 else "darkgrey" ) }}">
					{% if doc.doctype == "Quotation" and not doc.docstatus %}
						{{ _("Pending") }}
					{% else %}
						{{ _(doc.get('indicator_title')) or _(doc.status) or _("Submitted") }}
					{% endif %}
				</span>
			</div>
			<div class="text-right col-2">
				{%- set party_name = doc.supplier_name if doc.doctype in ['Supplier Quotation', 'Purchase Invoice', 'Purchase
				Order'] else doc.customer_name %}
				<b>{{ party_name }}</b>

				{% if doc.contact_display and doc.contact_display != party_name %}
					<br>
					{{ doc.contact_display }}
				{% endif %}
			</div>
		</div>

		{% if doc._header %}
			{{ doc._header }}
		{% endif %}

		<div class="order-container mt-4">
			<!-- items -->
			<div class="w-100">
				<div class="order-items order-item-header mb-1 row text-muted">
					<span class="col-5">
						{{ _("Item") }}
					</span>
					<span class="d-s-n col-3">
						{{ _("Quantity") }}
					</span>
					<span class="col-2 pl-10">
						{{ _("Rate") }}
					</span>
					<span class="col-2 text-right">
						{{ _("Amount") }}
					</span>
				</div>
				{% for d in doc.items %}
				<div class="order-items row align-items-center">
					<span class="order-item-name col-5 pr-0">
						{{ item_name_and_description(d) }}
					</span>

					<span class="d-s-n col-3 pl-10">
						{{ d.get_formatted("qty") }}
					</span>
					<span class="order-rate pl-4 col-2">
						{{ d.get_formatted("rate") }}
					</span>
					<span class="col-2 text-right">
						{{ d.get_formatted("amount") }}
					</span>
				</div>
				{% endfor %}
			</div>

			<!-- taxes -->
			<div class="">
				{% include "erpnext/templates/includes/order/order_taxes.html" %}
			</div>
		</div>
	</div>

	{% if attachments %}
		<div class="order-item-table">
			<div class="row order-items order-item-header text-muted">
				<div class="col-sm-12 h6 text-uppercase">
					{{ _("Attachments") }}
				</div>
			</div>
			<div class="row order-items">
				<div class="col-sm-12">
					{% for attachment in attachments %}
					<p class="small">
						<a href="{{ attachment.file_url }}" target="blank"> {{ attachment.file_name }} </a>
					</p>
					{% endfor %}
				</div>
			</div>
		</div>
	{% endif %}

	{% if doc.terms %}
		<div class="terms-and-condition text-muted small">
			<hr>
			<p>{{ doc.terms }}</p>
		</div>
	{% endif %}
{% endblock %}

{% macro item_name_and_description(d) %}
	<div class="row item_name_and_description">
		<div class="col-xs-4 col-sm-2 order-image-col">
			<div class="order-image h-100">
				{% if d.thumbnail or d.image %}
					{{ product_image(d.thumbnail or d.image, no_border=True) }}
				{% else %}
					<div class="no-image-cart-item" style="min-height: 100px;">
						{{ frappe.utils.get_abbr(d.item_name) or "NA" }}
					</div>
				{% endif %}
			</div>
		</div>
		<div class="col-xs-8 col-sm-10">
			{{ d.item_code }}
			<div class="text-muted small item-description">
				{{ html2text(d.description) | truncate(140) }}
			</div>
			<span class="text-muted mt-2 d-l-n order-qty">
				{{ _("Qty ") }}({{ d.get_formatted("qty") }})
			</span>
		</div>
	</div>
{% endmacro %}