Conversion_Kitchen_Code/kitchen_counter/conversion/templates/conversion/book_checkout.html

689 lines
27 KiB
HTML
Executable File

{% extends "mnfapp/base.html" %} {% load static %} {% block content %}
{% load i18n %}
{% load poll_extras1 %}
{% block title %}{%endblock%}
<style>
.invoice-6 .invoice-6-container {
}
.invoice-6 .title-color {
color: #b5a6d2;
}
.invoice-6 .note-color {
color: #847cb8;
}
.table>tbody>tr>td {
padding: 13px;
vertical-align: middle;
padding-left: 12px !important;
padding-right: 12px !important;
padding-top:13px !important ;
font-size: 1.25rem !important;
}
tr {
border: 1px solid #f97474;
margin-left: 10px;
border-collapse: collapse;
}
.align-middleR{
text-align: right;
}
</style>
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
<!--begin::Entry-->
<div class="d-flex flex-column-fluid">
<!--begin::Container-->
<div class="container-fluid">
<div class="card card-custom overflow-hidden">
<div class="card-body invoice-6 p-0">
<!--begin::Invoice-->
<div
class="invoice-6-container bgi-size-contain bgi-no-repeat bgi-position-y-top bgi-position-x-center"
>
<div class="container">
<div
class="row justify-content-center py-8 px-8 py-md-27 px-md-0"
>
<!--begin::Invoice header-->
<div class="col-md-9">
<div
class="d-flex justify-content-between align-items-center flex-column flex-md-row mb-10"
>
<h1 class="display-3 text-primary font-weight-boldest mb-5 mb-md-0">INVOICE</h1>
<div class="d-flex flex-column px-0 text-right">
<span
class="d-flex flex-column font-size-h5 font-weight-bold text-black align-items-center align-items-md-end"
>
<span class="mb-2" id="Country1"></span>
<span> {% now "N j, Y" %}</span>
</span>
</div>
</div>
<!--end::Invoice header-->
<!--begin::Invoice body-->
<div class="table-responsive">
<table class="table">
<thead>
<tr class="font-weight-boldest title-color">
<h3 class="display-3 font-weight-boldest text-primary mb-5 mb-md-0">Book Summary</h3>
</tr>
</thead>
<tbody>
<tr class="font-size-h4 font-weight-bolder text-black">
<td class="align-middle pl-0 border-0 py-4">Book Title</td>
<td class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-2">
<span>{{book_title|get_script_name}}</span>
</td>
</tr>
<tr class="font-size-h4 font-weight-bolder text-black">
<td class="align-middle pl-0 border-0 py-2">Total Number of Pages</td>
<td class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-2">
{{numPages}}
</td>
</tr>
<tr class="font-size-h4 font-weight-bolder text-black">
<td class="align-middle pl-0 border-0 py-2">Source Language of Book</td>
<td
class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-2">{{src_lang}}</td>
</tr>
<tr class="font-size-h4 font-weight-bolder text-black">
<td class="align-middle pl-0 border-0 py-2">Desired Language of Book</td>
<td class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-2">{{dest_lang}}</td>
</tr>
<tr class="font-size-h4 font-weight-bolder text-black">
<td class="align-middle pl-0 border-0 py-4">Vetting by LPP</td>
<td class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-4">{{lpp_available}}</td>
</tr>
</tbody>
</table>
</div>
<!--end::Invoice body-->
<div class="border-bottom w-100 my-3 opacity-15"></div>
<!--begin::Invoice total-->
<div class="row">
<div class="col-md-12">
<div class="d-flex flex-column text-black mb-5 mb-md-0">
<h3
class="display-3 font-weight-boldest text-primary mb-5 mb-md-0">Payable Amount</h3>
<div class="table-responsive">
<table class="table font-size-h5">
<tbody>
<tr class="text-black font-weight-boldest">
<td
class="font-weight-boldest border-0 pl-0 w-50"
>Amount for System based translation (${{conversion_per_page}}/page)</td>
<td class="align-middleR text-primary font-size-h3 border-0 pt-0">${{subtotal}}
</td>
</tr>
{% if directly_pay_monthly %}
<tr class="text-black font-weight-boldest">
<td class="font-weight-boldest border-0 pl-0 w-50">Monthly Subscription ($1/month)
</td>
<td
class="align-middleR text-primary font-size-h3 border-0 pt-0"
>
$1
</td>
</tr>
{% endif %}
{% if lpp_available == 'YES' %}
<tr
class="text-black font-weight-boldest"
id="vett-amount"
>
<td
class="font-weight-boldest border-0 pl-0 w-50"
>Amount for vetting script by LPP (${{lpp_per_page}}/page)</td>
<td
id="lpp-amount"
class="border-0 text-primary"
>
${{onlylppfee}}
</td>
</tr>
<tr
class="text-black font-weight-boldest"
id="vett-amount1"
>
<td
class="font-weight-boldest border-0 pl-0 w-50"
>
Total Amount
</td>
<td
id="lpp-amount1"
class="border-0 text-primary"
>
${{sublpptotal}}
</td>
</tr>
{%endif%}
<tr class="text-black font-weight-boldest">
<td
class="font-weight-boldest border-0 pl-0 w-50 " style="display:flex; width: 100% !important;">Running Discount
<div class="border-0 "style="padding-left: 5px;">
({{running_discount_conversion}}%)</div>
</td>
<td class="align-middleR text-primary font-size-h3 border-0 pt-0 text-success">$93
</td>
</tr>
{% if user.is_staff%}
<tr class="text-black font-weight-boldest">
<td
class="font-weight-boldest border-0 pl-0 w-50"style="display:flex;width: 100% !important;"
>
MNF Team Discount
<div class="border-0 " style="padding-left: 5px;">
({{employ_discount}}%)</div>
</td>
<td class="align-middleR text-primary font-size-h3 border-0 pt-0 text-success">$93
</td>
</tr>
{% endif %}
<tr class="text-black font-weight-boldest">
<td
class="font-weight-boldest border-0 pl-0 w-50"style="display:flex;width: 100% !important;"
>
Membership Discount
<div class="border-0 "style="padding-left: 5px; font-size:1.25rem !important;">
({{pdiscount}}%)
</div>
</td>
<td class="align-middleR text-primary font-size-h3 border-0 pt-0 text-success">$93
</td>
</tr>
{% comment %}</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12">
<div class="table-responsive">
<br><br><br><br>
<table class="table text-md-right font-weight-boldest">
<tbody>
<tr>
<td
class="align-middle title-color font-size-h4 border-0 py-7 pl-0 w-50"
>
&nbsp;
</td>
<td
class="align-middle text-primary font-size-h3 border-0 py-7"
>
&nbsp;
</td>
{% comment %}
<td
class="align-middle title-color font-size-lg border-0 pt-0 pl-0 w-50"
>
SUBTOTAL
</td>
<td
class="align-middle text-success font-size-h3 border-0 pt-0"
>
${{subtotal}}
</td>
</tr>{% endcomment %}
<tr>
<td
class="align-middle title-black font-size-h4 border-0 py-7 pl-0 w-50"
style="font-weight:700;">
Total Discount
</td>
<td
class="align-middleR text-success font-size-h3 border-0 py-7"
id="tot-disc"style="font-weight: 600;"
>
${{discount}}
</td>
</tr>
<tr>
<td
class="align-middle title-black font-size-h1 border-0 pl-0 w-50"style="font-weight:600; font-size:1.25rem !important;"
>
NET PAYABLE
</td>
<td
class="align-middleR text-black font-size-h1 border-0"
id="tot-amount"style="font-weight: 600;"
>
<p id="amountCheck" style="font-size:1.25rem !important;">${{amount}}</p>
</td>
<input
type="text"
value="{{amount}}"
id="totalAmount"
style="display: none"
/>
</tr>
{% if balance != -1 %}
<td class="title-black border-0 font-size-h4">
<label>
<input
id="walletChkbx"
type="checkbox"
name="wallet"
value=""
onclick="walletChk()"
style="width: 15px; height: 15px"
/>
&nbsp; Pay with wallet
</label> <div style="display: flex;">
<p style="" >Max Amount:</p>
<p id="demoValue" style="" >${{balance}}</p> </div>
<td
class="align-middleR text-success font-size-h3 border-0 py-7"style="font-weight: 600;"
>
<p id="demoValue1" style="margin-top: -14px">$0</p>
</td>
</td>
</tr>
<td
class="align-middleR text-success font-size-h3 border-0 py-7"
style="display: none"
>
<p id="balanceAmount" >
$
</p>
<input type="text" value="{{balance}}" id="bal" />
</td>
{% endif %}
{% comment %} <tr>
&nbsp;
<td
class="align-middle title-color font-size-h4 border-0 py-7 pl-0 w-50"
>
&nbsp;
</td>
<td
class="align-middle text-primary font-size-h3 border-0 py-7"
>
&nbsp;
</td>
</tr> {% endcomment %}
</tbody>
</table>
</div>
</div>
</div>
<!--end::Invoice total-->
<!--begin::Invoice note-->
<div class="d-flex flex-wrap align-items-left mt-0">
<div class="col-md-3">
{% comment %}
<div
class="font-size-h4 font-weight-boldest text-primary title-color mb-3"
>
NOTE
</div>
{% endcomment %}
<div class="font-size-h2 font-weight-bolder text-black"style="
width: max-content;
margin: 100px -225px 0px 280px;
">
Thanks For Your Order
</div>
</div>
<div class="col-md-9">
<form
class="d-flex flex-column"
action="{% url 'bookCheckout'%}"
method="POST"
>
{%csrf_token%}
<input
type="hidden"
name="country"
id="country"
value=""
/>
{% if lpp_available == 'YES' %}
<span
class="switch switch-sm switch-outline switch-icon switch-danger"
>
<label class="font-size-h5 text-black">
<input
type="text"
name="want_to_be_vetted"
value="yes"
style="display: none"
id="LPP"
/>
</label>
</span>
{%else%}
<span
class="switch switch-sm switch-outline switch-icon switch-danger"
>
{% comment %}
<label class="font-size-h5 text-black">
<input
type="checkbox"
checked="checked"
name="interested_to_be_lpp"
/>&nbsp;I am interested in becoming a LPP for this pair of languages.
<span></span>
</label>
{% endcomment %}
</span>
{%endif%}
<input
type="text"
name="pay_with_wallet"
value="no"
style="display: none"
id="pay_with_wallet"
/>
<input
type="text"
name="balance"
value=""
style="display: none"
id="balance_form"
/>
<input
type="text"
name="payable"
value=""
style="display: none"
id="payable_form"
/>
<button
type="submit"
class="btn btn-danger font-weight-bolder ml-sm-auto mt-5 px-5 py-4"
style="font-size: 25px"
>
Pay Now
</button>
</form>
</div>
</div>
<!--end::Invoice note-->
</div>
</div>
</div>
</div>
<!--end::Invoice-->
</div>
</div>
</div>
<!--end::Container-->
</div>
<!--end::Entry-->
</div>
{% include 'mnfapp/rightnav.html' %}
<input type="hidden" name="rate" id="rate" value="{{rate}}" />
<script>
fetch("https://ipinfo.io/json?key=tryout")
.then((response) => response.json())
.then((jsonResponse) => {
$("#Country1").text("Country: " + jsonResponse.country);
$("#country").val(jsonResponse.country);
});
</script>
<script>
var walletAmt = document.getElementById("walletAmount");
var walletInp = document.getElementById("walletInput");
</script>
<!--
payble=2.44
balance=1000.00
rate= 81.8845
diff=2/rate
dbalance=balance/rate
print(dbalance)
if(dbalance>payble):
maxAmount=payble-diff
finalPayble=payble-maxAmount
print("test1",maxAmount,finalPayble)
elif(dbalance<payble) and (dbalance!=0):
if((payble-dbalance)<diff):
maxAmount=dbalance-diff
finalPayble=payble-maxAmount
print("test2",maxAmount,finalPayble)
else:
maxAmount=dbalance
finalPayble=payble-maxAmount
print("test3",maxAmount,finalPayble)
else:
print("No balance in wallet")
finalPayble=round(finalPayble,2)
print(finalPayble)
-->
<script>
var payable3 = document.getElementById("totalAmount").value;
var balance3 = document.getElementById("bal").value;
var rate3 = document.getElementById("rate").value;
console.log("payable: ",payable3,"balance: ", balance3,"rate: ", rate3)
var diff3 = 2 / rate3;
var dbalance3 = balance3 / rate3;
console.log(dbalance3, "dbalance3");
function walletChk() {
if (walletChkbx.checked) {
document.getElementById("amountCheck").innerHTML = "$" + finalPayable3; //Netpayable amount (final amount)
document.getElementById("demoValue1").innerHTML = "$" + maxAmount3;
document.getElementById("payable_form").value=finalPayable3
document.getElementById("balance_form").value=maxAmount3
document.getElementById("pay_with_wallet").value = "yes";
} else {
document.getElementById("pay_with_wallet").value = "no";
document.getElementById("demoValue1").innerHTML = "$" + 0;
document.getElementById("amountCheck").innerHTML = "$" + payable3
}
}
if (dbalance3 > payable3) {
maxAmount3 = payable3 - diff3;
maxAmount3 = maxAmount3.toFixed(2)
finalPayable3 = payable3 - maxAmount3;
finalPayable3 = finalPayable3.toFixed(2)
document.getElementById("demoValue").innerHTML = "$ "+ maxAmount3
console.log("test1", "maxAmount: ",maxAmount3,"finalpay ", finalPayable3);
} else {
if (dbalance3 < payable3 && dbalance3 !== 0) {
if (payable3 - dbalance3 < diff3) {
maxAmount3 = dbalance3 - diff3;
maxAmount3 = maxAmount3.toFixed(2)
finalPayable3 = payable3 - maxAmount3;
finalPayable3 = finalPayable3.toFixed(2)
document.getElementById("demoValue").innerHTML = "$ "+ maxAmount3
console.log("test2", "maxAmount: ", maxAmount3, "finalpay: ", finalPayable3);
} else {
maxAmount3 = dbalance3;
maxAmount3 = maxAmount3.toFixed(2)
document.getElementById("demoValue").innerHTML = "$ "+ maxAmount3
finalPayable3 = payable3 - maxAmount3;
finalPayable3 = finalPayable3.toFixed(2)
console.log("test3", "maxAmount: ",maxAmount3, "finalPayable: ",finalPayable3);
}
} else{
$("#walletChkbx").prop("disabled", true);
console.log("No balance in wallet");
}
}
finalPayable = round(finalPayable, 2);
console.log(finalPayable);
</script>
<!--
<script>
var payableInit = document.getElementById("totalAmount").value;
console.log("payableInit", payableInit)
function walletChk() {
if (walletChkbx.checked) {
document.getElementById("amountCheck").innerHTML = "$" + payableFinal; //Netpayable amount (final amount)
document.getElementById("demoValue1").innerHTML = "$" + amountMax;
document.getElementById("pay_with_wallet").value = "yes";
} else {
document.getElementById("pay_with_wallet").value = "no";
document.getElementById("demoValue1").innerHTML = "$" + 0;
document.getElementById("amountCheck").innerHTML = "$" + payableInit
}
}
var balance = document.getElementById("bal").value; //currently in INR
var payWithWallet = document.getElementById("bal").value;
var payable = document.getElementById("totalAmount").value; //at console 2.4
var rate = document.getElementById("rate").value;
var conversionToUsd = 1/rate;
balance = balance/rate; //conversion to dollar
console.log("Initial Values")
console.log("payable total Amount", payable)
console.log("balance", balance)
console.log("usd", conversionToUsd)
console.log("payable rate", payable, "balance: ", balance)
var balance1 = document.getElementById("tot-amount").value;
console.log("rate:", document.getElementById("rate").value);
if (balance == 0) {
$("#walletChkbx").prop("disabled", true);
console.log("test00");
}
else if (balance < payable) {
if ((payable - balance) >= conversionToUsd){
console.log("tessssst1");
payable = payable-balance;
console.log(payable, "payable")
var used_balance = balance;
balance = 0;
balance = balance/rate;
used_balance = used_balance/rate
payable = payable/rate
var amountMax = used_balance;
console.log("maxAmountTest", amountMax, "payable", payable)
amountMax = Math.trunc(amountMax*100)/100
var payableFinal = payableInit - amountMax;
payableFinal = Math.trunc(payableFinal*100)/100
document.getElementById("payable_form").value = payable ;
document.getElementById("balance_form").value = balance ;
document.getElementById("balanceAmount").innerHTML = "$" + used_balance.toFixed(2)
console.log("test1", "amountMax :", amountMax);
}
else if (payable - balance < conversionToUsd){
console.log("tesssst2", "balance: ", balance, "payable: ",payable);
var used_balance = payable - conversionToUsd;
console.log("used_balance", used_balance)
balance = balance - used_balance;
payable = payable - used_balance;
balance = balance/rate;
used_balance = used_balance/rate
amountMax = Math.trunc(used_balance*100)/100 //2.38
console.log("used_balance", used_balance)
document.getElementById("demoValue").value = amountMax
payable = payable/rate
payableFinal = Math.trunc(payable*100)/100
document.getElementById("payable_form").value = payable ;
document.getElementById("balance_form").value = balance ;
}
}
else if (balance >= payable) {
console.log("tesssst3");
console.log("pay", payable) //118
var used_balance = payable - conversionToUsd;
balance = balance - used_balance ;
console.log("usedbalance",used_balance, balance)
netPayable = payable - used_balance ; //net pay
balance = balance/rate;
used_balance = used_balance/rate
console.log("used/rate= ", used_balance)
netPayable = netPayable/rate;
console.log("payable =", payable)
console.log("netPaybale =", netPayable)
var amountMax = used_balance;
amountMax = Math.trunc(amountMax*100)/100
var payableFinal = payableInit - amountMax;
if((payableFinal*rate)<1){
payableFinal = payable.toFixed(2)
}
else{
payableFinal = Math.trunc(payableFinal*100)/100
}
console.log("payableFinal",payableFinal)
document.getElementById("payable_form").value = payableFinal;
document.getElementById("balance_form").value = balance;
document.getElementById("balanceAmount").innerHTML = balance.toFixed(2) ;
document.getElementById("demoValue").innerHTML = "$" + amountMax;
console.log("test3");
console.log(balance.toFixed(2));
console.log(payable.toFixed(2));
console.log(used_balance, "used balance")
console.log("balance", balance)
console.log("payable", payable)
console.log("amountMax", amountMax)
console.log("payableInit", payableInit)
}
</script>
-->
{%endblock%}