{% extends "templates/web.html" %}
{% from "erpnext/templates/includes/order/order_macros.html" import item_name_and_description %}

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

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

{% block header %}
	<h1>{{ doc.name }}</h1>
{% endblock %}

{% block header_actions %}
<a class='btn btn-xs btn-default' href='/printview?doctype={{ doc.doctype}}&name={{ doc.name }}&format={{ print_format }}' target="_blank" rel="noopener noreferrer">{{ _("Print") }}</a>
{% endblock %}

{% block page_content %}

<div class="row transaction-subheading">
	<div class="col-xs-6">

		<span class="indicator {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "darkgrey") }}">
			{{ _(doc.get('indicator_title')) or _(doc.status) or _("Submitted") }}
		</span>
	</div>
	<div class="col-xs-6 text-muted text-right small">
		{{ frappe.utils.formatdate(doc.transaction_date, 'medium') }}
		{% if doc.valid_till %}
		<p>
		{{ _("Valid Till") }}: {{ frappe.utils.formatdate(doc.valid_till, 'medium') }}
		</p>
		{% endif %}
	</div>
</div>

<p class='small' style='padding-top: 15px;'>
{% if doc.doctype == 'Supplier Quotation' %}
	<b>{{ doc.supplier_name}}</b>
{% else %}
	<b>{{ doc.customer_name}}</b>
{% endif %}
{% if doc.contact_display %}
	<br>
	{{ doc.contact_display }}
{% endif %}
</p>

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

<div class="order-container">

	<!-- items -->
	<div class="order-item-table">
		<div class="row order-items order-item-header text-muted">
			<div class="col-sm-6 col-xs-6 h6 text-uppercase">
				{{ _("Item") }}
			</div>
			<div class="col-sm-3 col-xs-3 text-right h6 text-uppercase">
				{{ _("Quantity") }}
			</div>
			<div class="col-sm-3 col-xs-3 text-right h6 text-uppercase">
				{{ _("Amount") }}
			</div>
		</div>
		{% for d in doc.items %}
		<div class="row order-items">
			<div class="col-sm-6 col-xs-6">
				{{ item_name_and_description(d) }}
			</div>
			<div class="col-sm-3 col-xs-3 text-right">
				{{ d.qty }}
				{% if d.delivered_qty is defined and d.delivered_qty != None %}
				<p class="text-muted small">{{ _("Delivered") }}&nbsp;{{ d.delivered_qty }}</p>
				{% endif %}
			</div>
			<div class="col-sm-3 col-xs-3 text-right">
				{{ d.get_formatted("amount")	 }}
				<p class="text-muted small">{{ _("Rate:") }}&nbsp;{{ d.get_formatted("rate") }}</p>
			</div>
		</div>
		{% endfor %}
	</div>

	<!-- taxes -->
	<div class="order-taxes row">
		<div class="col-sm-6"><!-- empty --></div>
		<div class="col-sm-6 text-right">
			{% include "erpnext/templates/includes/order/order_taxes.html" %}
		</div>
	</div>
</div>

{% if enabled_checkout and ((doc.doctype=="Sales Order" and doc.per_billed <= 0)
	or (doc.doctype=="Sales Invoice" and doc.outstanding_amount > 0)) %}

<div class="panel panel-default">
	<div class="panel-heading">
		<div class="row">
			<div class="form-column col-sm-6 address-title">
				<strong>Payment</strong>
			</div>
		</div>
	</div>
	<div class="panel-collapse">
		<div class="panel-body text-muted small">
			<div class="row">
				<div class="form-column col-sm-6">
					{% if available_loyalty_points %}
					<div class="form-group">
						<div class="h6">Enter Loyalty Points</div>
						<div class="control-input-wrapper">
							<div class="control-input">
								<input class="form-control" type="number" min="0" max="{{ available_loyalty_points }}" id="loyalty-point-to-redeem">
							</div>
							<p class="help-box small text-muted hidden-xs"> Available Points: {{ available_loyalty_points }} </p>
						</div>
					</div>
					{% endif %}
				</div>

				<div class="form-column col-sm-6">
					<div id="loyalty-points-status" style="text-align: right"></div>
					<div class="page-header-actions-block" data-html-block="header-actions">
						<p>
							<a href="/api/method/erpnext.accounts.doctype.payment_request.payment_request.make_payment_request?dn={{ doc.name }}&dt={{ doc.doctype }}&submit_doc=1&order_type=Shopping Cart"
								class="btn btn-primary btn-sm" id="pay-for-order">{{ _("Pay") }} {{ doc.get_formatted("grand_total") }} </a>
						</p>
					</div>
				</div>

			</div>

		</div>
	</div>
</div>
{% endif %}


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

{% block script %}
	<script> {% include "templates/pages/order.js" %} </script>
	<script>
		window.doc_info = {
			customer: '{{doc.customer}}',
			doctype: '{{ doc.doctype }}',
			doctype_name: '{{ doc.name }}',
			grand_total: '{{ doc.grand_total }}',
			currency: '{{ doc.currency }}'
		}
	</script>
{% endblock %}