{% 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" />
                                  &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 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" />&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 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%}