490 lines
21 KiB
HTML
Executable File
490 lines
21 KiB
HTML
Executable File
{% extends "mnfapp/base.html" %} {% load static %} {% block content %}
|
|
{% load i18n %}
|
|
{% block title %}{%endblock%}
|
|
<style>
|
|
.invoice-6 .invoice-6-container {}
|
|
|
|
.invoice-6 .title-color {
|
|
color: #b5a6d2;
|
|
}
|
|
|
|
.invoice-6 .note-color {
|
|
color: #847cb8;
|
|
}
|
|
|
|
@media screen and (max-width: 400px) {
|
|
.new-class {
|
|
font-size: 1.4rem !important;
|
|
}
|
|
|
|
#tot-amount {
|
|
font-size: 1.4rem !important;
|
|
}
|
|
|
|
.new-class-2 {
|
|
min-width: 100vw;
|
|
position: absolute;
|
|
left: -28px;
|
|
}
|
|
|
|
.new-class-3 {
|
|
max-width: 65vw;
|
|
font-size: 1.3rem !important;
|
|
}
|
|
|
|
.new-class-4 {
|
|
font-size: 1.3rem !important;
|
|
}
|
|
|
|
.table {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table tbody {
|
|
font-size: 1.2rem !important;
|
|
}
|
|
|
|
.table tbody td {
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
.table tbody .text-right {
|
|
position: relative !important;
|
|
right: 25px !important;
|
|
}
|
|
|
|
.table tbody .font-size-h3 {
|
|
position: relative !important;
|
|
left: 55px !important;
|
|
}
|
|
|
|
.table tbody .text-success {
|
|
position: relative !important;
|
|
left: -14px !important;
|
|
}
|
|
|
|
.table tbody .new-class-6 {
|
|
position: relative !important;
|
|
left: 60px !important;
|
|
}
|
|
|
|
.table tbody #tot-amount {
|
|
position: relative !important;
|
|
right: 20px !important;
|
|
}
|
|
}
|
|
|
|
.pl-0 {
|
|
padding: 13px !important;
|
|
}
|
|
|
|
.pr-0 {
|
|
padding: 13px !important;
|
|
}
|
|
|
|
.ppt-invoice-table-width {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.table>tbody>tr>td {
|
|
padding: 13px !important;
|
|
}
|
|
|
|
.align-right {
|
|
text-align: right;
|
|
font-size: 1.25rem !important;
|
|
}
|
|
|
|
.table-responsive {
|
|
width: 105%;
|
|
}
|
|
</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 new-class-2">
|
|
<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">
|
|
{% trans '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="Country"></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">
|
|
{% trans 'Script 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">
|
|
{% trans 'Presentation Title' %}
|
|
</td>
|
|
{% comment %}
|
|
<td class="align-middle font-size-lg text-right border-0 py-2">
|
|
80
|
|
</td>
|
|
<td class="align-middle font-size-lg text-right border-0 py-2">
|
|
$40.00
|
|
</td>
|
|
{% endcomment %}
|
|
<td
|
|
class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-2 align-right">
|
|
{{script_title}}
|
|
</td>
|
|
</tr>
|
|
<tr class="font-size-h4 font-weight-bolder text-black">
|
|
<td class="align-middle pl-0 border-0 py-2">
|
|
{% trans 'Total Number of slides' %}
|
|
</td>
|
|
<td
|
|
class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-2 align-right">
|
|
{{numPages}}
|
|
</td>
|
|
</tr>
|
|
<tr class="font-size-h4 font-weight-bolder text-black">
|
|
<td class="align-middle pl-0 border-0 py-2">
|
|
{% trans 'Source Language of Presentation' %}
|
|
</td>
|
|
<td
|
|
class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-2 align-right">
|
|
{{ndial_src}}
|
|
</td>
|
|
</tr>
|
|
<tr class="font-size-h4 font-weight-bolder text-black">
|
|
<td class="align-middle pl-0 border-0 py-2">
|
|
{% trans 'Desired Language of Presentation' %}
|
|
</td>
|
|
<td
|
|
class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-2 align-right">
|
|
{{ndial_dest}}
|
|
</td>
|
|
</tr>
|
|
{% comment %}
|
|
<tr class="font-size-h4 font-weight-bolder text-black">
|
|
<td class="align-middle pl-0 border-0 py-4">
|
|
{% trans 'Desired Language of dialogues' %}
|
|
</td>
|
|
<td
|
|
class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-4">
|
|
{{dial_dest}}
|
|
</td>
|
|
</tr>
|
|
{% endcomment %}
|
|
<tr class="font-size-h4 font-weight-bolder text-black">
|
|
<td class="align-middle pl-0 border-0 py-4">
|
|
{% trans 'Source Script of Presentation' %}
|
|
</td>
|
|
<td
|
|
class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-4 align-right">
|
|
{{dial_src_script}}
|
|
</td>
|
|
</tr>
|
|
<tr class="font-size-h4 font-weight-bolder text-black">
|
|
<td class="align-middle pl-0 border-0 py-4">
|
|
{% trans 'Desired Script of Presentation' %}
|
|
</td>
|
|
<td
|
|
class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-4 align-right">
|
|
{{dial_dest_script}}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="font-size-h4 font-weight-bolder text-black">
|
|
<td class="align-middle pl-0 border-0 py-4">
|
|
{% trans 'Vetting by LPP'%}
|
|
</td>
|
|
<td
|
|
class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-4 align-right">
|
|
{{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-6 ppt-invoice-table-width">
|
|
<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-middle text-primary font-size-h3 border-0 pt-0 align-right">
|
|
${{total}}
|
|
</td>
|
|
</tr>
|
|
{% 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 align-right">
|
|
${{onlylppfee}}
|
|
</td>
|
|
</tr>
|
|
{%endif%}
|
|
<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 align-right">
|
|
${{subtotal}}
|
|
</td>
|
|
</tr>
|
|
<tr class="text-black font-weight-boldest">
|
|
<td class="font-weight-boldest border-0 pl-0 w-50">
|
|
Running Discount ({{running_discount_conversion}}%)
|
|
</td>
|
|
<td class="border-0 text-success new-class-6 align-right">
|
|
-${{value_after_rd}}
|
|
</td>
|
|
</tr>
|
|
{% if user.is_staff%}
|
|
<tr class="text-black font-weight-boldest">
|
|
<td class="font-weight-boldest border-0 pl-0 w-50">
|
|
MNF Team Discount ({{employ_discount}}%)
|
|
</td>
|
|
<td class="border-0 text-success new-class-6 align-right">
|
|
-${{value_after_td}}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr class="text-black font-weight-boldest">
|
|
<td class="font-weight-boldest border-0 pl-0 w-50">
|
|
Membership Discount ({{pdiscount}}%)
|
|
</td>
|
|
<td class="border-0 text-success new-class-6 align-right">
|
|
-${{value_after_md}}
|
|
</td>
|
|
</tr>
|
|
</tr>
|
|
<tr>
|
|
<td class="align-middle title-black font-size-h4 border-0 py-7 pl-0 w-50"
|
|
style="font-weight: 600;font-size: 1.25rem !important;">
|
|
Total Discount
|
|
</td>
|
|
<td class="align-middle text-success font-size-h3 border-0 py-7 new-class-5 align-right"
|
|
style="font-weight: 600;" id="tot-disc">
|
|
${{discount}}
|
|
</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-middle text-primary font-size-h3 border-0 pt-0 align-right">
|
|
$1
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<td class="align-middle title-black font-size-h1 border-0 pl-0 w-50 new-class"
|
|
style="font-weight: 600;font-size: 1.25rem !important;">
|
|
NET PAYABLE
|
|
</td>
|
|
<td class="align-middle text-black font-size-h1 border-0 align-right" id="tot-amount"
|
|
style="font-weight: 600;">
|
|
<p id="amountCheck">${{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" />
|
|
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 align-right"
|
|
style="font-weight: 600;">
|
|
<p id="demoValue1">$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 %}
|
|
</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 new-class-4" style="
|
|
width: max-content;
|
|
margin: 100px -225px 0px 280px;
|
|
">
|
|
{% trans ' Thanks For Your Order' %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<form class="d-flex flex-column" action="{% url 'pptCheckout' %}" 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" /> 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 new-class-3"
|
|
style="font-size: 25px">
|
|
{% trans '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) => {
|
|
$("#Country").text("Country: " + jsonResponse.country);
|
|
$("#country").val(jsonResponse.country);
|
|
});
|
|
</script>
|
|
|
|
<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>
|
|
{%endblock%} |