You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
4.2 KiB
HTML
88 lines
4.2 KiB
HTML
{% extends "customer_main.html" %}
|
|
{%load static%}
|
|
|
|
{% block modules_section %}
|
|
<!-- This block is intentionally left empty to exclude the modules section -->
|
|
{% endblock modules_section %}
|
|
|
|
{% block content %}
|
|
|
|
|
|
|
|
<div class="w-full flex flex-col gap-5 mt-5 font-poppinsLight">
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md">
|
|
<div class="grid grid-cols-1 xxlg1:grid-cols-2">
|
|
<div
|
|
class="w-full pb-9 flex flex-col items-center justify-between rounded-lb-none xxlg1:rounded-l-md h-full rounded-tl-md rounded-tr-md xxlg1:rounded-tr-none gap-10 overflow-hidden relative bg-gradient-to-b from-gray-400 via-gray-500 to-blue-950">
|
|
<div
|
|
class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
|
</div>
|
|
<div
|
|
class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
|
</div>
|
|
<div
|
|
class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
|
</div>
|
|
<div
|
|
class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
|
</div>
|
|
|
|
<div></div>
|
|
|
|
<!-- INVOICE DETAILS -->
|
|
<div class="w-[90%] s:w-[85%] xll:w-[75%] h-fit flex flex-col gap-5 justify-center items-center py-9 bg-white rounded-md z-10 shadow-md duration-300">
|
|
<img src="{% static 'images/ositcom_logos/full-logo.png' %}" class="w-[120px]">
|
|
|
|
<div class="w-full bg-osiblue py-3 px-3 flex justify-between items-center text-white mt-5">
|
|
<p>Due Date: <span class="font-semibold">{{payment.date_due}}</span></p>
|
|
</div>
|
|
|
|
<div class="w-full p-5">
|
|
<p class="font-poppinsBold text-secondosiblue text-[17px]">Bill To:</p>
|
|
<p class="text-secondosiblue font-light">{{payment.order.customer.user.first_name}} {{payment.order.customer.user.last_name}}</p>
|
|
<p class="text-secondosiblue font-light">{{payment.order.customer.mobile_number}}</p>
|
|
<p class="text-secondosiblue font-light">{{payment.order.customer.user.email}}</p>
|
|
</div>
|
|
|
|
<div class="w-full bg-osiblue py-3 px-3 flex justify-start items-center text-white">
|
|
<p>Invoice Items</p>
|
|
</div>
|
|
|
|
|
|
<div class="w-full flex flex-col gap-5 p-5">
|
|
<ul class="text-secondosiblue font-light list-disc px-5">
|
|
{% for item in payment.order.orderitem_set.all %}
|
|
<li>{{item.item.title}}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<div class="w-full flex justify-end items-center text-secondosiblue text-xl">
|
|
<p>Total: <span class="font-semibold">${{payment.order.get_cart_total}}</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- WHISH CONTAINER -->
|
|
<div class="w-full flex flex-col justify-between items-center gap-5">
|
|
<div class="w-full flex flex-col justify-center items-center gap-8 p-9">
|
|
<p class="text-center text-secondosiblue font-poppinsBold text-xl s:text-2xl">Scan this QR on Your Whish Mobile Application<br> to Proceed Payment</p>
|
|
<img src="{% static 'images/whish-qr.jpeg' %}" class="w-[300px]">
|
|
</div>
|
|
|
|
|
|
<div class="w-full flex justify-center items-center gap-2 border-t border-gray-100 pt-5 py-5 px-9">
|
|
<img src="{% static 'images/whishlogo.png' %}" class="w-[35px] rounded-md">
|
|
<p class="text-secondosiblue text-sm font-light">Payment By Whish Money</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
{% endblock %} |