{% 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">{% 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="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">{% 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 'Script 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">
                            <span>{{script_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">{% trans '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">{% trans 'Source Language of Screenplay' %}</td>
                          <td
                            class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-2">{{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 'Source Language of Dialogues' %}</td>
                          <td class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-2">{{dial_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 Screenplay' %}</td>
                          <td class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-2">{{ndial_dest}}
                          </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 Dialogues' %}</td>
                          <td class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-2">{{dial_dest}}</td>
                        </tr>
                        {% comment %}
                        <tr class="font-size-h4 font-weight-bolder text-black">
                          <td class="align-middle pl-0 border-0 py-4">
                            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 'Desired Script of Dialogues' %}</td>
                          <td class="align-middle text-right text-primary font-weight-boldest font-size-h5 pr-0 border-0 py-4">
                          {% blocktrans %}{{dial_dest_script}}{% endblocktrans %}
                          </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">{{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">{% trans ' 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"
                                >{% blocktrans %}Amount for System based translation (${{conversion_per_page}}/page){% endblocktrans %}</td>
                                <td class="align-middleR text-primary font-size-h3 border-0 pt-0" style="vertical-align: middle;">${{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">{% trans '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"
                                >{% blocktrans %}Amount for vetting script by LPP (${{lpp_per_page}}/page){% endblocktrans %}</td>

                                <td
                                  id="lpp-amount"
                                  class="align-middleR 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"
                                >
                                {% trans 'Total Amount' %}
                                </td>

                                <td
                                  id="lpp-amount1"
                                  class="align-middleR 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;">
                                {% trans ' Running Discount' %}
                                
                                 <div class="border-0 "style="padding-left: 5px;">
                                  ({{running_discount_conversion}}%)</div>
                                </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;"
                                >
                                {% trans ' MNF Team Discount' %}
                                <div class="border-0 " style="padding-left: 5px;">
                                  ({{employ_discount}}%)</div>
                                </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;"
                                >
                                {% trans 'Membership Discount' %}
                                <div class="border-0 "style="padding-left: 5px; font-size:1.25rem !important;">
                                  ({{pdiscount}}%)
                                </div>
                                </td>
                              </tr>
                              {% comment %} <tr class="text-black font-weight-boldest">
                                <td
                                  class="font-weight-boldest border-0 pl-0 w-50"
                                >
                                {% trans 'Estimated Time of Delivery' %}
                                </td>
                                <td class="border-0 text-success">0</td>
                              </tr> {% endcomment %}
                            {% 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"
                              >
                                {% trans '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  pl-0 w-50"
                              style="font-weight:600;padding-top:0!important;padding-bottom:0!important;">
                              {% trans 'Total Discount' %}
                              </td>
                              <td
                                class="align-middleR text-success font-size-h3 border-0 "
                                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;"
                              >
                              {% trans '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 style="font-weight:600 !important;">
                                <input
                                  id="walletChkbx"
                                  type="checkbox"
                                  name="wallet"
                                  value=""
                                  onclick="walletChk()"
                                  style="width: 15px; height: 15px "
                                >
                                &nbsp; {% trans 'Pay with wallet' %}
                              </label> <div style="display: flex;">
                              <p style="" >{% trans 'Max Amount:' %}</p>
                              <p id="demoValue"   >${{balance}}</p> </div>
                              <td
                              class="align-middleR text-success font-size-h3 border-0 py-7"style="vertical-align:middle ;"
                            >
                              <p id="demoValue1"style="font-weight: 600;" >$0</p>
                            </td>
                            </td>
                          </tr>
                            <td
                              class="align-middleR text-success font-size-h3 border-0 py-7"
                              style="display: none"
                            >
                              <p id="balanceAmount" style="margin-top: -16px">
                                $
                              </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"
                      >
                        {% trans 'NOTE' %}
                      </div>
                      {% endcomment %}
                      <div class="font-size-h2 font-weight-bolder text-black"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 'conversionCheckout'%}"
                        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"
                        >
                        {% 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) => {
      $("#Country1").text("{% trans '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%}