{% load static %}

{% block center %}
<link href="{% static "cloud/static/css/it-pricing.css" %}" rel="stylesheet">
<script src="{% static "/cloud/static/js/it-pricing.js" %}"></script>
<div class="zk-pricing-dashboard">
    <div class="container-fluid">
        <div class="zk-pricing-body">
{#            <div class="clearfix"></div>#}
            <div class="row">
                <div class="col-md-6 ">
                     <div class="select-pricing-billing" style="margin-top:20px;">
                     <span class="zk-pricing-billing-switch  ml-5">
                     <label for="zk-switch-pb-id" class="it-pricing1 active">Pricing</label>
                     <input type="checkbox" class="zk-pricing-billing-switch" id="zk-switch-pb-id">
                     <label for="zk-switch-pb-id"></label>
                     <label for="zk-switch-pb-id" class="it-billing1">Billing</label>
                     </span>
                    </div>
                </div>
            </div>
{#            <div class="clearfix"></div>#}
            <div class="" id="zk-pricing-plan"  >
                              <div class="row">
                    <div class="p-5 zk-pricing-box">
                         <div class="row">
                            <div class="col-md-6">
                                    <h2 class="monthly-plan-title text-dark">Monthly Plan</h2>
                            </div>
                            <div class="col-md-6">
                                     <div class="position-relative form-group pull-right">
                        <label for="selectCurrency" class="slt-currency-txt mr-5 mt-3 text-dark">Select Country</label>
                        <select type="select" id="selectCurrency" name="selectCurrency" class="form-control zk-select-currency">
                            <option value="INR" selected>India</option>
                            <option value="USD">Others</option>
{#                            <option value="RMB">China</option>#}
                        </select>
                    </div>
                            </div>
                         </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="panel panel-default zk-free-trail" id="zk-free-trail-plan">
                                <div class="panel-heading">Free Trial</div>
                                <div class="panel-body zk-pricing-content">
                                    <div class="zk-pricing-icon">
                                        <div class="pricing-highlight">
                                            <h4 class="text-center m-0 p-2"><strong>Logs Limit 6000</strong></h4>
                                            <h5 class="text-center mt-5">The first 6000 logs limit is on us! </h5>
                                        </div>
                                    </div>
                                    <div class="pricing-curve">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                                            <path fill="#FFFFFF" fill-opacity="1" d="M0,96L80,85.3C160,75,320,53,480,64C640,75,800,117,960,128C1120,139,1280,117,1360,106.7L1440,96L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
                                        </svg>
                                    </div>
                                    <div class="zk-pricing-features">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">Features</div>
                                            <div class="panel-body"  >
                                                <div class="p-3">
                                                    <div class="pricing-features-list" id="getFreeTrailFeatures">
                                                        <li>Logs Limit 6000</li>
                                                        <li>ESS Login</li>
                                                        <li>Time and Attendance</li>
                                                        <li>Access Control</li>
                                                        <li>Payroll</li>
                                                        <li>Mobile App</li>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6 col-md-offset-3 invisible">
                                                        <a class="btn btn-block zk-pricing-btn my-free-trail-plan" >Try Now</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="panel panel-default zk-basic" id="zk-professional-plan">
                                <div class="panel-heading">Professional</div>
                                <div class="panel-body zk-pricing-content">
                                    <div class="zk-pricing-icon">
                                        <div class="pricing-highlight">
                                            <h4 class="text-center m-0 p-2 currency"><i class="fa fa-inr"></i> <strong class="subscription_price_month">3000</strong> / month</h4>
                                            <h5 class="text-center m-0 p-2"><span class="employee_threshold">100</span> employees <span class="fa fa-plus fa-plus-small"></span> <i class="fa fa-inr"></i> <span class="employee_unit_price">10</span> / employee</h5>
                                            <h5 class="text-center currency"><span class="device_threshold">100</span> devices <span class="fa fa-plus fa-plus-small"></span> <i class="fa fa-inr"></i> <span class="device_unit_price">10</span> / device </h5>
                                            <h5 class="text-center mb-0 currency "><span class="whatsapp_push_threshold">100</span> Whatsapp Push <span class="fa fa-plus fa-plus-small"></span> <i class="fa fa-inr"></i> <span class="whatsapp_push_unit_price">5</span> / Whatsapp Push</h5>
                                            <h5 class="text-center mb-0 currency "><span class="transaction_threshold">100</span> Transactions <span class="fa fa-plus fa-plus-small"></span> <i class="fa fa-inr"></i> <span class="transaction_unit_price">5</span> / Transaction</h5>
                                             <h6 class="text-center text-underline">For Mobile App</h6>
                                            <h5 class="text-center mb-0 currency"><span class="mobile_applications_threshold">100</span>  <span class="fa fa-plus fa-plus-small"></span>  <i class="fa fa-inr"></i> <span class="mobile_applications_unit_price">5</span> / mobile application</h5>


                                        </div>
                                    </div>
                                    <div class="pricing-curve">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                                            <path fill="#FFFFFF" fill-opacity="1" d="M0,96L80,85.3C160,75,320,53,480,64C640,75,800,117,960,128C1120,139,1280,117,1360,106.7L1440,96L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
                                        </svg>
                                    </div>
                                    <div class="zk-pricing-features">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">Features</div>
                                            <div class="panel-body">
                                                <div class="p-3">
                                                    <ul class="pricing-features-list" id="getProfessionalFeatures">
                                                        <li>1 to 50 Users</li>
                                                        <li>ESS Login</li>
                                                        <li>Time and Attendance</li>
                                                        <li>Access Control</li>
                                                        <li>Payroll</li>
                                                        <li>Mobile App</li>
                                                    </ul>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6 col-md-offset-3">
                                                        <a class="btn btn-block zk-pricing-btn my-professional-plan" ps-id="" >Select</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="panel panel-default zk-pro" id="zk-premium-plan">
                                <div class="panel-heading">Premium</div>
                                <div class="panel-body zk-pricing-content">
                                    <div class="zk-pricing-icon">
                                        <div class="pricing-highlight">
                                            <h4 class="text-center m-0 p-2 currency"><i class="fa fa-inr"></i> <strong class="subscription_price_month">3000</strong> / month</h4>
                                            <h5 class="text-center m-0 p-2"><span class="employee_threshold">100</span> employees <span class="fa fa-plus fa-plus-small"></span> <i class="fa fa-inr"></i> <span class="employee_unit_price">10</span> / employee</h5>
                                            <h5 class="text-center currency"><span class="device_threshold">100</span> devices <span class="fa fa-plus fa-plus-small"></span> <i class="fa fa-inr"></i> <span class="device_unit_price">10</span> / device </h5>
                                            <h5 class="text-center mb-0 currency "><span class="whatsapp_push_threshold">100</span> Whatsapp Push <span class="fa fa-plus fa-plus-small"></span> <i class="fa fa-inr"></i> <span class="whatsapp_push_unit_price">5</span> / Whatsapp Push</h5>
                                            <h5 class="text-center mb-0 currency "><span class="transaction_threshold">100</span> Transactions <span class="fa fa-plus fa-plus-small"></span> <i class="fa fa-inr"></i> <span class="transaction_unit_price">5</span> / Transaction</h5>
                                            <h6 class="text-center text-underline">For Mobile App</h6>
                                            <h5 class="text-center mb-0 currency"><span class="mobile_applications_threshold">100</span>  <span class="fa fa-plus fa-plus-small"></span>  <i class="fa fa-inr"></i> <span class="mobile_applications_unit_price">5</span> / mobile application </h5>
                                            </div>
                                    </div>
                                    <div class="pricing-curve">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                                            <path fill="#FFFFFF" fill-opacity="1" d="M0,96L80,85.3C160,75,320,53,480,64C640,75,800,117,960,128C1120,139,1280,117,1360,106.7L1440,96L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
                                        </svg>
                                    </div>
                                    <div class="zk-pricing-features">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">Features</div>
                                            <div class="panel-body"  >
                                                <div class="p-3">
                                                    <ul class="pricing-features-list" id="getPremiumFeatures">
                                                        <li>51 to 250 Users</li>
                                                        <li>ESS Login</li>
                                                        <li>Time and Attendance</li>
                                                        <li>Access Control</li>
                                                        <li>Payroll</li>
                                                        <li>Mobile App</li>
                                                    </ul>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6 col-md-offset-3">
                                                        <a class="btn btn-block zk-pricing-btn my-premium-plan" >Select</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="panel panel-default zk-enterprise" id="zk-enterprise-plan">
                                <div class="panel-heading">Enterprise</div>
                                <div class="panel-body zk-pricing-content">
                                    <div class="zk-pricing-icon">
                                        <div class="pricing-highlight">
                                            <h4 class="text-center m-0 p-2 currency"><i class="fa fa-inr"></i> <strong class="subscription_price_month">3000</strong> / month</h4>
                                            <h5 class="text-center m-0 p-2"><span class="employee_threshold">100</span> employees <span class="fa fa-plus fa-plus-small"></span> <i class="fa fa-inr"></i> <span class="employee_unit_price">10</span> / employee</h5>
                                            <h5 class="text-center currency"><span class="device_threshold">100</span> devices <span class="fa fa-plus fa-plus-small"></span> <i class="fa fa-inr"></i> <span class="device_unit_price">10</span> / device </h5>
                                            <h5 class="text-center mb-0 currency"><span class="whatsapp_push_threshold">100</span> Whatsapp Push <span class="fa fa-plus fa-plus-small"></span> <i class="fa fa-inr"></i> <span class="whatsapp_push_unit_price">5</span> / Whatsapp Push</h5>
                                            <h5 class="text-center mb-0 currency"><span class="transaction_threshold">100</span> Transactions <span class="fa fa-plus fa-plus-small"></span> <i class="fa fa-inr"></i> <span class="transaction_unit_price">5</span> / Transaction</h5>
                                            <h6 class="text-center text-underline">For Mobile App</h6>
                                            <h5 class="text-center mb-0 currency"><span class="mobile_applications_threshold">100</span>  <span class="fa fa-plus fa-plus-small"></span>  <i class="fa fa-inr"></i> <span class="mobile_applications_unit_price">5</span> / mobile application</h5>
                                        </div>
                                    </div>
                                    <div class="pricing-curve">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                                            <path fill="#FFFFFF" fill-opacity="1" d="M0,96L80,85.3C160,75,320,53,480,64C640,75,800,117,960,128C1120,139,1280,117,1360,106.7L1440,96L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
                                        </svg>
                                    </div>
                                    <div class="zk-pricing-features">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">Features</div>
                                            <div class="panel-body"  >
                                                <div class="p-3">
                                                    <ul class="pricing-features-list" id="getEnterpriseFeatures" >
                                                        <li>251 to 1000 Users</li>
                                                        <li>ESS Login</li>
                                                        <li>Time and Attendance</li>
                                                        <li>Access Control</li>
                                                        <li>Payroll</li>
                                                        <li>Mobile App</li>
                                                    </ul>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6 col-md-offset-3">
                                                        <a class="btn btn-block zk-pricing-btn my-enterprise-plan">Select</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hidden" id="zk-billing-plan" style="min-height:675px;" >
                              <div class="row">
                    <div class="p-5 zk-pricing-box" >
                        <div class="col-md-12">
                              <div class="order-list-card">
                        <div class="card mb-3">
                            <div class="card-header">
                                <div class="row d-grid w-100">
                                    <div class="col-lg-6 col-md-6 col-sm-6 text-left">
                                       All Orders
                                    </div>
                                </div>
                            </div>
                            <div class="card-body" style="min-height: 425px;">
                                <div class="table-responsive">
                                    <table class="table table-striped table-order-list  mb-0">
                                        <thead class="">
                                            <tr>
                                                <th>Order Number</th>
                                                <th>Duration <small class="dur-month">(in month)</small></th>
                                                <th class="nobr" style="min-width:92px;">Expiry Date</th>
                                                <th>Employees Count</th>
                                                <th>Devices Count</th>
                                                <th>Transactions Count</th>
                                                <th>Mobile Apps Count</th>
                                                <th>WhatsApp Push Count</th>
                                                <th>Price Strategies Type</th>
                                                <th>Payment Status</th>
                                                <th style="min-width:170px;" class="text-center">Actions</th>

                                            </tr>
                                        </thead>
                                        <tbody id="getAllOrderRecords">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="col-md-6 p-0">
                                    <div class="modalTotalCom pull-left">
                                        <a href="javascript:void(0);">
                                        Total Orders
                                        <span class="badge" id="orders_count"></span>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-6 p-0">
                                    <div class="pull-right p-0">
                                        <nav class="text-right" aria-label="Page navigation example">
                                           <ul class="pager pagination modalPagination" style="margin: 0;">
                                                <li style="background:none;" class="page-item modalPageItem">
                                                    <a href="javascript:void(0);" class="page-link modalPageLink next-prev-order"
                                                    style="padding: 0; border: 0;background:none;">
                                                    </a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="zk-footer-cta">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="text-center p-5">
                        <h2 class="text-center text-dark">Need help to buy the right plan? Let us help you pick. <small><a  href="#" onclick="return false;" class="text-primary text-underline plan-contact-modal">Click Here</a></small></h2>
                    </div>
                </div>
            </div>
        </div>
        <footer class="zk-pricing-footer">
            <div class="row" >
                <div class="col-md-4 col-md-offset-8"  >
                    <div class="social-footer pull-right mr-5">
                        <div class="row align-items-stretch">
                            <span class="footer-title text-white">Follow Us On</span>
                            <a href="https://twitter.com/zk_india" target="_blank" class="social-btn-circle social-btn-sm m-1 ">
                                <img src="/static/cloud/static/images/twitter.png" class="mx-auto img-responsive twitter" alt="twitter">
                            </a>
                            <a href="https://www.facebook.com/zkteco.in" target="_blank" class="social-btn-circle social-btn-sm m-1">
                                <img src="/static/cloud/static/images/facebook.png" class="mx-auto img-responsive facebook" alt="facebook">
                            </a>
                            <a href="https://www.youtube.com/zktecobiometricsindia" target="_blank" class="social-btn-circle social-btn-sm m-1">
                                <img src="/static/cloud/static/images/youtube.png" class="mx-auto img-responsive youtube" alt="youtube">
                            </a>
                            <a href="https://www.linkedin.com/company/zkteco-biometrics-india" target="_blank" class="social-btn-circle social-btn-sm m-1">
                                <img src="/static/cloud/static/images/linkedin.png" class="mx-auto img-responsive linkedin" alt="linkedin">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>

<!-- Modal Popup Starts here -->
<!-- Order Form - Modal Popup -->
<div class="modal fade my-subscription-modal" id="" tabindex="-1" role="dialog"  aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered free-trail-modal" id="myModalDialog" >
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Free Trial</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <form  method="post" onsubmit="return false;" id="validateOrder">
            <div class="modal-body">
                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                <input type="hidden" value="" id="orderPriceStrategy">
               <div class="row">
                  <div class="col-md-6">
                     <div class="form-row">
                         <label>Subscription Duration <small>(in month)</small> <span class="text-danger">*</span></label>
                        <div class="mb-3"><input type="number" min="0" class="form-control"  required="required" id="orderSubsDuration">
                         <div class="text-danger my-error-msg" id="errorOrder1"></div>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-6">
                     <div class="form-row">
                        <label>Employees Count <span class="text-danger">*</span></label>
                        <div class="mb-3"><input type="number" min="0"  class="form-control" required="required" id="orderEmpCount">
                        <div class="text-danger my-error-msg" id="errorOrder2"></div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-6">
                     <div class="form-row">
                        <label>Devices Count <span class="text-danger">*</span></label>
                        <div class="mb-3"><input type="number" min="0"  class="form-control" required="required" id="orderDevCount">
                        <div class="text-danger my-error-msg" id="errorOrder3"></div>
                        </div>

                     </div>
                  </div>
                  <div class="col-md-6">
                     <div class="form-row">
                        <label>Transactions Count <span class="text-danger">*</span></label>
                        <div class="mb-3"><input type="number" min="0"  class="form-control" required="required" id="orderTransCount">
                        <div class="text-danger my-error-msg" id="errorOrder4"></div>
                        </div>

                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-6">
                     <div class="form-row">
                        <label>Mobile Applications Count <span class="text-danger">*</span></label>
                        <div class="mb-3"><input type="number" min="0"  class="form-control" required="required" id="orderMobileCount">
                        <div class="text-danger my-error-msg" id="errorOrder5"></div>
                        </div>

                     </div>
                  </div>
                  <div class="col-md-6">
                     <div class="form-row">
                        <label>Whatsapp Push Count <span class="text-danger">*</span></label>
                        <div class="mb-3"><input type="number" min="0"  class="form-control" required="required" id="orderWhatsappCount">
                        <div class="text-danger my-error-msg" id="errorOrder6"></div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="row">
                   <div class="col-md-12">
                        <div class="form-row">
                        <label>Features </label>
                        <div class="mb-3 my-order-features" id="orderFeatures">

                        </div>
                        </div>

                   </div>
{#                  <div class="col-md-12">#}
{#                     <div class="form-row">#}
{#                        <label>Features </label>#}
{#                        <div class="mb-3">#}
{#                           <select class="form-control my-order-features" style="min-height: 135px;" name="feature" multiple id="orderFeatures" disabled>#}
{#                              <option value="">Feature 1</option>#}
{#                              <option value="">Feature 2</option>#}
{#                              <option value="">Feature 3</option>#}
{#                              <option value="">Feature 4</option>#}
{#                           </select>#}
{#                            <!--<div class="text-danger my-error-msg" id="errorOrder7"></div>-->#}
{#                        </div>#}
{#                     </div>#}
{#                  </div>#}
               </div>
            </div>
            <div class="modal-footer">
               <button type="submit" class="btn btn-success validate-order-form"  id="postOrder"><i class="fa fa-check fa-fw"></i>Create Order</button>
               <button type="reset" class="btn btn-default" data-dismiss="modal" ><i class="fa fa-close fa-fw"></i>Cancel</button>
            </div>
         </form>
      </div>
   </div>
</div>
<!-- //Order Form Modal End -->
<!--Order Details Modal Start-->
<div class="modal my-order-info-modal fade" id="orderDetailsModal" tabindex="-1" role="dialog"  aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Order Details</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
            <div class="modal-body">
               <div class="row">
                    <div class="col-md-12">
                        <p class="text-center alert alert-success"><b>Your Order has been created, find the order details below:-</b></p>
                    </div>
               </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-borderless">
                            <tbody id="orderDetailsTable">
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-12">
                        <h4 class="text-center text-primary"><b>Make a Payment</b></h4>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
               <div class="row payment-option-section">
                    <div class="col-md-3 col-md-offset-3">
                        <div class="payment-option" id="paymentOption1"></div>
                    </div>
                     <div class="col-md-3">
                         <div class="payment-option" id="paymentOption2"></div>
                    </div>
               </div>
            </div>
      </div>
   </div>
</div>
<!--Order Details Modal End-->
<!--Order No. Details from Order List Modal Start-->
<div class="modal my-order-info-modal fade" id="orderNoDetailsModal" tabindex="-1" role="dialog"  aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Order Number</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-borderless">
                            <tbody id="orderNoDetailsTable">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
      </div>
   </div>
</div>
<!--Order No. Details Modal End-->
<!--Order Error Modal Start-->
<div class="modal my-center-modal fade" id="orderErrorModal" tabindex="-1" role="dialog"  aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered order-error-modal">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Order Failed</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
            <div class="modal-body">
               <div class="row">
                    <div class="col-md-12 text-center">
                        <p class="text-center alert alert-danger" id="orderErrorMsg"><b>---</b></p>
                        <br>
                        <a href="" class="select-pricing-billing  btn btn-info">Go to Billing</a>
                        <br>
                    </div>
               </div>

            </div>
      </div>
   </div>
</div>
<!--Order Error Modal End-->
<!--Order Cancel Modal Start-->
<div class="modal my-center-modal fade" id="orderCancelModal" tabindex="-1" role="dialog"  aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered order-cancel-modal">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Order Cancelled</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
            <div class="modal-body">
               <div class="row">
                    <div class="col-md-12 text-center">
                        <p class="text-center alert alert-success" id="orderErrorMsg"><b>Your order has been cancelled successfully.</b></p>
                    </div>
               </div>
            </div>
      </div>
   </div>
</div>
<!--Order Error Modal End-->
    <!--Order Payment Modal Start-->
<div class="modal my-center-modal fade" id="orderPaymentModal" tabindex="-1" role="dialog"  aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered order-payment-modal">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Make a Payment</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>

            <div class="modal-body">
               <div class="row payment-option-section">
                    <div class="col-md-3 col-md-offset-3">
                        <div class="payment-option" id="paymentOption_1"></div>
                    </div>
                    <div class="col-md-3">
                         <div class="payment-option" id="paymentOption_2"></div>
                    </div>
               </div>
            </div>

      </div>
   </div>
</div>
<!--Order Payment Modal End-->
        <!--Payment Processing Modal Start-->
<div class="modal my-center-modal fade" id="paymentProcessModal" tabindex="-1" role="dialog"  aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered payment-process-modal">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Payment Processing</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>

            <div class="modal-body">
               <div class="row">
                    <div class="col-md-12 text-center">
                        <p class="text-center alert alert-info" ><b>Your Payment is being processed</b><br>
                        <span>Check your payment status after some time on the billing page</span>
                        </p>
                        <br>
                        <a href="" id="billingPageShowHide" class="select-pricing-billing  btn btn-info">Go to Billing Page</a>
                        <br>
                    </div>
               </div>

            </div>

      </div>
   </div>
</div>
<!--Payment Processing Modal End-->
 <!-- Contact Us - Modal Popup -->
<div class="modal my-contact-plan-modal fade" id="planContactModal" tabindex="-1" role="dialog"  aria-hidden="true">
<div class="modal-dialog contact-pln-modal" >
<div class="modal-content">
   <div class="modal-header">
      <h4 class="modal-title">Contact Us</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
   </div>
   <div class="modal-body contact-info-modal">
      <div class="row">
         <div class="col-md-6">
            <h3 class="text-center mb-5 mt-5">Sales</h3>
            <div class="row">
               <div class="col-xs-3 col-md-2 col-md-offset-1">
                  <div class="icon-tray  text-center"><i class="fa fa-phone fa-2x"></i></div>
               </div>
               <div class="col-xs-9 col-md-9">
                  <h5>+91 80-68281300</h5>
                  <h5>+91 73045 53744</h5>
               </div>
            </div>
         </div>
            <div class="col-md-6">
               <h3 class="text-center mb-5 mt-5">Technical Support</h3>
               <div class="row">
                  <div class="col-xs-3 col-md-2 col-md-offset-1">
                     <div class="icon-tray  text-center"><i class="fa fa-phone fa-2x"></i></div>
                  </div>
                  <div class="col-xs-9 col-md-9">
                     <h5>+91 80-68281342</h5>
                     <h5>+91 80-68281348</h5>
                  </div>
               </div>
            </div>
         </div>
       <hr>
       <div class="row">
           <div class="col-md-6 col-md-offset-3">
                <div class="row contact-modal-email">
                  <div class="col-xs-3 col-md-2 col-md-offset-1">
                     <div class="icon-tray  text-center"><i class="fa fa-envelope fa-lg"></i></div>
                  </div>
                  <div class="col-xs-9 col-md-9">
                      <h5><a href="mailto:india@zkteco.com">india@zkteco.com</a></h5>
                  </div>
               </div>

           </div>
       </div>
      </div>
   </div>
 </div>
</div>
<!-- //Contact Us  Modal End -->

<!-- //Modal Popup Ends here -->
<script type="text/javascript">
$(function() {
    //Calling getPricingPlanDetails function - Default Country India
    getPricingPlanDetails('INDIA');

//Form Reset when close modal
    $('.modal').on('hidden.bs.modal', function () {
        $(this).find('form')[0].reset();
        $('#orderSubsDuration, #orderEmpCount, #orderDevCount, #orderTransCount, #orderMobileCount, #orderWhatsappCount').css("border-color", "#CCCCCC");
        $('#errorOrder1, #errorOrder2, #errorOrder3, #errorOrder4, #errorOrder5, #errorOrder6').html("");
    });

    /*-- Order Form Validation --*/
    $('.validate-order-form').on('click', function () {
        var value_order1 = $('#orderSubsDuration').val();
        var value_order2 = $('#orderEmpCount').val();
        var value_order3 = $('#orderDevCount').val();
        var value_order4 = $('#orderTransCount').val();
        var value_order5 = $('#orderMobileCount').val();
        var value_order6 = $('#orderWhatsappCount').val();
        if (value_order1 == 0 || value_order1 == "" || isNaN(value_order1)) {
            $('#orderSubsDuration').css("border-color", "red");
            if(value_order1 == 0) {
                $('#errorOrder1').html("*Ensure this value is greater than or equal to 1.");
            }
            if(value_order1 == "" || isNaN(value_order1)) {
                $('#errorOrder1').html("*This field is required!");
            }
        }
        else {
            $('#orderSubsDuration').css("border-color", "green");
            $('#errorOrder1').html("");
        }
        if (value_order2 == 0 || value_order2 == "" || isNaN(value_order2)) {
            $('#orderEmpCount').css("border-color", "red");
            if(value_order2 == 0) {
                $('#errorOrder2').html("*Ensure this value is greater than or equal to 1.");
            }
            if(value_order2 == "" || isNaN(value_order2)) {
                $('#errorOrder2').html("*This field is required!");
            }
        }
        else {
            $('#orderEmpCount').css("border-color", "green");
            $('#errorOrder2').html("");
        }
        if (value_order3 == 0 || value_order3 == "" || isNaN(value_order3)) {
            $('#orderDevCount').css("border-color", "red");
            if(value_order3 == 0){
                 $('#errorOrder3').html("*Ensure this value is greater than or equal to 1.");
            }
            if(value_order3 == "" || isNaN(value_order3)){
                $('#errorOrder3').html("*This field is required!");
            }
        }
        else {
             $('#orderDevCount').css("border-color", "green");
             $('#errorOrder3').html("");
        }
        if (value_order4 == 0 || value_order4 == "" || isNaN(value_order4)) {
            $('#orderTransCount').css("border-color", "red");
            if(value_order4 == 0 ){
               $('#errorOrder4').html("*Ensure this value is greater than or equal to 1.");
            }
            if(value_order4 == "" || isNaN(value_order4)) {
                $('#errorOrder4').html("*This field is required!");
            }
        }
        else {
            $('#orderTransCount').css("border-color", "green");
            $('#errorOrder4').html("");

        }
        if (value_order5 == 0 || value_order5 == "" || isNaN(value_order5)) {
            $('#orderMobileCount').css("border-color", "red");
            if(value_order5 == 0 ){
                 $('#errorOrder5').html("*Ensure this value is greater than or equal to 1.");
            }
            if(value_order5 == "" || isNaN(value_order5)) {
                 $('#errorOrder5').html("*This field is required!");
            }
        }
        else {
            $('#orderMobileCount').css("border-color", "green");
            $('#errorOrder5').html("");
        }
        if (value_order6 == 0 || value_order6 == "" || isNaN(value_order6)) {
            $('#orderWhatsappCount').css("border-color", "red");
            if(value_order6 == 0) {
                $('#errorOrder6').html("*Ensure this value is greater than or equal to 1.");
            }
            if( value_order6 == "" || isNaN(value_order6)) {
               $('#errorOrder6').html("*This field is required!");
            }

        }
        else {
            $('#orderWhatsappCount').css("border-color", "green");
            $('#errorOrder6').html("");

        }
    });

    /*-- //End --*/
//Contact Modaal Triger
    $('.plan-contact-modal').click(function () {
        $('#planContactModal').modal('show');
        $('#planContactModal .modal-title').html('Contact Us');
    });
//end

//Pricing Modals
    $('.my-free-trail-plan').click(function () {
        $('.my-subscription-modal').attr('id', 'freeTrailModal');
        $('#freeTrailModal').modal('show');
        $('#freeTrailModal .modal-title').html('Free Trial');
        $('.modal-open').css('padding', '0');
        $('#myModalDialog').addClass('free-trail-modal');
        $('#myModalDialog').removeClass('professional-modal premium-modal enterprise-modal');
        //$('.my-order-features').attr( 'id', 'selectFreeTrailList' );
        $('.my-order-features').addClass('selectFreeTrailList');
        $('.my-order-features').removeClass('selectProfessionalList selectPremiumlList selectEnterpriseList');
        //get Features List
        $.ajax({
            url: '/cloud/api/v1/internal/price_strategies/features/',
            type: 'GET',
            success: function (res) {
                //console.log(res);
                $('.my-order-features').html('');
                for (var j = 0; j < res.data.length; j++) {
                    var records = res.data[j];
                    var pricing_features_list = '';
                    for (var k = 0; k < records.feature.length; k++) {
                        pricing_features_list += '<option  class="features-list-label" value="' + records.feature[k].id + '" selected>' + records.feature[k].name + '</option>';
                    }
                    if (records.type_name == 'Free Trial') {
                        $('.selectFreeTrailList').html(pricing_features_list);
                        $('#orderPriceStrategy').val(records.id);
                    }

                }
            }
        });
    });

    $('.my-professional-plan').click(function () {
        $('.my-subscription-modal').attr('id', 'professionalModal');
        $('#professionalModal').modal('show');
        $('#professionalModal .modal-title').html('Professional');
        $('.modal-open').css('padding', '0');
        $('#myModalDialog').addClass('professional-modal');
        $('#myModalDialog').removeClass('free-trail-modal premium-modal enterprise-modal');
        $('.my-order-features').addClass('selectProfessionalList');
        $('.my-order-features').removeClass('selectFreeTrailList selectPremiumlList selectEnterpriseList');
        var ps_id = $('.my-professional-plan').attr('ps-id');
        //alert(ps_id);
        //get Features List
        $.ajax({
            url: '/cloud/api/v1/internal/price_strategies/features/',
            type: 'GET',
            success: function (res) {
                //console.log(res);
                $('.my-order-features').html('');
                for (var j = 0; j < res.data.length; j++) {
                    var records = res.data[j];
                    var pricing_features_list = '';
                    //alert(records.feature.length);
                    for (var k = 0; k < records.feature.length; k++) {
                        pricing_features_list += '<option  class="features-list-label" value="' + records.feature[k].id + '" selected>' + records.feature[k].name + '</option>';
                    }
                    if (records.type_name == 'Professional') {
                        $('.selectProfessionalList').html(pricing_features_list);
                        $('#orderPriceStrategy').val(records.id);
                    }

                }
            }
        });
        // Calling function (price strategy id)
        checkPushLimit(ps_id);
        //
    });

    $('.my-premium-plan').click(function () {
        $('.my-subscription-modal').attr('id', 'premiumModal');
        $('#premiumModal').modal('show');
        $('#premiumModal .modal-title').html('Premium');
        $('.modal-open').css('padding', '0');
        $('#myModalDialog').addClass('premium-modal');
        $('#myModalDialog').removeClass('free-trail-modal professional-modal enterprise-modal');
        $('.my-order-features').addClass('selectPremiumlList');
        $('.my-order-features').removeClass('selectProfessionalList selectFreeTrailList selectEnterpriseList');
        var ps_id = $('.my-premium-plan').attr('ps-id');
        //get Features List
        $.ajax({
            url: '/cloud/api/v1/internal/price_strategies/features/',
            type: 'GET',
            success: function (res) {
                //console.log(res);
                $('.my-order-features').html('');
                for (var j = 0; j < res.data.length; j++) {
                    var records = res.data[j];
                    var pricing_features_list = '';
                    for (var k = 0; k < records.feature.length; k++) {
                        pricing_features_list += '<option  class="features-list-label" value="' + records.feature[k].id + '" selected>' + records.feature[k].name + '</option>';
                    }
                    if (records.type_name == 'Premium') {
                        $('.selectPremiumlList').html(pricing_features_list);
                        $('#orderPriceStrategy').val(records.id);
                    }

                }
            }
        });
        // Calling function (price strategy id)
        checkPushLimit(ps_id);
        //
    });

    $('.my-enterprise-plan').click(function () {
        $('.my-subscription-modal').attr('id', 'enterpriseModal');
        $('#enterpriseModal').modal('show');
        $('#enterpriseModal .modal-title').html('Enterprise');
        $('.modal-open').css('padding', '0');
        $('#myModalDialog').addClass('enterprise-modal');
        $('#myModalDialog').removeClass('free-trail-modal premium-modal professional-modal');
        $('.my-order-features').addClass('selectEnterpriseList');
        $('.my-order-features').removeClass('selectFreeTrailList selectPremiumlList selectProfessionalList');
        var ps_id = $('.my-enterprise-plan').attr('ps-id');
        //get Features List
        $.ajax({
            url: '/cloud/api/v1/internal/price_strategies/features/',
            type: 'GET',
            success: function (res) {
                //console.log(res);
                $('.my-order-features').html('');
                for (var j = 0; j < res.data.length; j++) {
                    var records = res.data[j];
                    var pricing_features_list = '';
                    for (var k = 0; k < records.feature.length; k++) {
                        //pricing_features_list += '<option value="'+records.feature[k].id+'" selected>' + records.feature[k].name + '</option>';
                        pricing_features_list += '<option class="features-list-label" value="' + records.feature[k].id + '" selected>' + records.feature[k].name + '</option>';
                    }
                    if (records.type_name == 'Enterprise') {
                        $('.selectEnterpriseList').html(pricing_features_list);
                        $('#orderPriceStrategy').val(records.id);
                    }

                }
            }
        });
        // Calling function (price strategy id)
        checkPushLimit(ps_id);
        //
    });
// Modals End

    /*-- Post - Order --*/
    $('#postOrder').on('click', function (event) {
        event.preventDefault();
        /*var msg;
    var yes = prompt('Are you sure you want to add this item?');
    if(yes != null) {
        msg = "You pressed OK!";
        alert(msg);*/

        var order_price_strategy = $('#orderPriceStrategy').val();
        var order_subs_duration = $('#orderSubsDuration').val();
        var order_emp_count = $('#orderEmpCount').val();
        var order_device_count = $('#orderDevCount').val();
        var order_trans_count = $('#orderTransCount').val();
        var order_mbl_count = $('#orderMobileCount').val();
        var order_whtsapp_count = $('#orderWhatsappCount').val();
        var order_features = [];
        $.each($("#orderFeatures option:selected"), function () {
            order_features.push($(this).val());
        });
        var obj = {
            price_strategy: order_price_strategy,
            subscription_duration: order_subs_duration,
            employees_count: order_emp_count,
            devices_count: order_device_count,
            transactions_count: order_trans_count,
            mobile_applications_count: order_mbl_count,
            whatsapp_push_count: order_whtsapp_count,
            feature: order_features
        };
        $.ajax({
            url: '/cloud/api/v1/internal/orders/',
            type: 'POST',
            data: JSON.stringify(obj),
            dataType: "json",
            contentType: "application/json",
            headers: {"X-CSRFToken": $("input[name=csrfmiddlewaretoken]").val()},
            success: function (res, status, xhr) {

                //console.log(xhr.status);
                var orderId = res.id;
                //alert(orderId);
                $('.my-subscription-modal').modal('hide');
                $('.modal-backdrop').remove();
                $('#orderDetailsModal').modal('show');
                $('.modal-open').css('padding', '0');
                $('#orderDetailsModal .modal-title').html('Order Details');
                //getOrderDetails(orderId);
                $.fn.getOrderDetails(orderId);
                //location.reload();
            },
            error: function (xhr, status, error) {
                if (xhr) {
                    var err_msg = JSON.parse(xhr.responseText);
                    //console.log(err_msg, "Error Message");
                    if (err_msg.non_field_errors.length > 0) {
                        $('.my-subscription-modal').modal('hide');
                        $('#orderErrorModal').modal('show');
                        for (var i = 0; i < err_msg.non_field_errors.length; i++) {
                            $('#orderErrorMsg').html('<b>' + err_msg.non_field_errors[i] + '</b>')
                        }
                    }
                }
            }
        });
    });
    /*-- //Get Order Details Using Order ID --*/
    $.fn.getOrderDetails = function (orderId) {
        $.ajax({
            url: '/cloud/api/v1/internal/orders/' + orderId,
            type: 'GET',
            success: function (res) {
                //console.log(res);

                var order_number = res.number;
                var paytm_url_text = "/cloud/api/v1/internal/payment/paytm/transaction/" + order_number + '/';
                var paypal_url_text = "/cloud/api/v1/internal/payment/paypal/transaction/" + order_number + '/';
                //console.log(paytm_url_text);
                var payment_option_button1 = '<a href="'+ paytm_url_text +'"  onclick="paymentProcess(1)"  class="my-payment-btn" title="Paytm" target="_blank"><img src="/static/cloud/static/images/paytm.png" alt="Paytm" class="img-responsive"/></a>';
                var payment_option_button2 = '<a href="'+ paypal_url_text +'"  onclick="paymentProcess(1)" class="my-payment-btn"  title="PayPal" target="_blank"><img src="/static/cloud/static/images/paypal.png" alt="PayPal" class="img-responsive"/></a>';
                $('#orderDetailsTable, #paymentOption1, #paymentOption2').html('');
                $('#orderDetailsTable').append(
                    '<tr>' +
                    '<td><b>Order Number</b></td>' +
                    '<td>:</td>' +
                    '<td>' + res.number + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td><b>Original Price</b></td>' +
                    '<td>:</td>' +
                    '<td>' + res.original_price + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td><b>Discount Price</b></td>' +
                    '<td>:</td>' +
                    '<td>' + res.discount_price + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td><b>Payment Price</b></td>' +
                    '<td>:</td>' +
                    '<td><big>' + res.payment_price + '</big></td>' +
                    '</tr>'
                );
                 $('#paymentOption1').append(payment_option_button1);
                 $('#paymentOption2').append(payment_option_button2);
            }
        });
    }
//get Order Details End//
    /*-- Get - All Orders --*/
    function getAllOrders() {
       $.ajax({
        url: '/cloud/api/v1/internal/orders/?page_size=10',
        type: 'GET',
        success: function (res) {
            //console.log(res);
            var next_order = res.next;
            var prev_order = res.previous;
            document.getElementById('orders_count').innerHTML = res.count;
            $('#getAllOrderRecords').html('');
            for (var y = 0; y < res.data.length; y++) {
                var records = res.data[y];
                var order_id = records.id;
                var payment_status = records.payment_status;
                var expiryDate = myDateFormat(records.expire_date);
                var order_feature_records = '';
                for (var z = 0; z < records.feature_name.length; z++) {
                    order_feature_records += records.feature_name[z] + ', ';
                }
                var cancel_button;
                if ( payment_status == 3) {
                    cancel_button = '<a href="javascript:void(0);" class="btn btn-xs btn-danger cancel-order-btn" id="cancel-btn-' + order_id + '"  onclick="cancelOrder(' + order_id + ')">' +
                        '<i class="fa fa-close fa-fw"></i> Cancel</a>'

                } else if (payment_status == '0') {
                    cancel_button = '<a href="javascript:void(0);" class="btn btn-xs btn-danger btn-grey cancel-order-btn disabled" onclick="cancelOrder(' + order_id + ')">' +
                        '<i class="fa fa-close fa-fw"></i> Cancelled</a>'
                } else {
                    cancel_button = ''
                }

                $('#getAllOrderRecords').append(
                    '<tr>' +
                    '<td class="text-center"><a href="javascript:void(0);" class="text-primary" onclick="getOrderNoDetails(' + order_id + ')">' + records.number + '</a></td>' +
                    '<td class="text-center">' + records.subscription_duration + '</td>' +
                    '<td class="text-center nobr">' + expiryDate + '</td>' +
                    '<td class="text-center">' + records.employees_count + '</td>' +
                    '<td class="text-center">' + records.devices_count + '</td>' +
                    '<td class="text-center">' + records.transactions_count + '</td>' +
                    '<td class="text-center">' + records.mobile_applications_count + '</td>' +
                    '<td class="text-center">' + records.whatsapp_push_count + '</td>' +
                    '<td class="text-left">' + records.price_strategy_type + '</td>' +
                    '<td class="text-center payment-context-' + payment_status + '">' + records.payment_status_name + '</td>' +
                    '<td class="text-center">' +
                    '<a href="javascript:void(0);" class="btn btn-xs btn-success" onclick="getOrderNoDetails(' + order_id + ')">' +
                    '<i class="fa fa-eye fa-fw"></i> View</a>&nbsp;' + cancel_button +
                    '</td>' +
                    '</tr>'
                );

            }

            /*-- Next&Prev-(step1) --*/
            if (next_order) {
                $('.next-prev-order').append("<button class='btn btn-next next-data-link-order'" +
                    "value='" + next_order + "'>Next</button>");
            }
            if (prev_order) {
                $('.next-prev-order').append("<button class='btn btn-previous next-data-link-order'" +
                    "value='" + prev_order + "' >Previous</button>");
            }
            /*-- //End --*/
        }
    });
           /*-- //All Orders End --*/
    /*-- Next&Prev-(step2) --*/
    $(document.body).on('click', '.next-data-link-order', function () {
        $('.next-prev-order').html('');
        var link = $(this).val();
        $.ajax({
            url: link,
            type: 'GET',
            success: function (res) {
                var next_order = res.next;
                var prev_order = res.previous;
                $('#getAllOrderRecords').html('');
                $('.next-prev-order').html('');
                for (var y = 0; y < res.data.length; y++) {
                    var records = res.data[y];
                    var order_id = records.id;
                    var payment_status = records.payment_status;
                    var expiryDate = myDateFormat(records.expire_date);
                    order_feature_records = '';
                    for (var z = 0; z < records.feature_name.length; z++) {
                        order_feature_records += records.feature_name[z] + ', ';
                    }
                    var cancel_button;
                    if ( payment_status == 3) {
                        cancel_button = '<a href="javascript:void(0);" class="btn btn-xs btn-danger cancel-order-btn" id="cancel-btn-' + order_id + '"  onclick="cancelOrder(' + order_id + ')">' +
                            '<i class="fa fa-close fa-fw"></i> Cancel</a>'

                    } else if (payment_status == '0') {
                        cancel_button = '<a href="javascript:void(0);" class="btn btn-xs btn-danger btn-grey cancel-order-btn disabled" onclick="cancelOrder(' + order_id + ')">' +
                            '<i class="fa fa-close fa-fw"></i> Cancelled</a>'
                    } else {
                        cancel_button = ''
                    }
                    $('#getAllOrderRecords').append(
                        '<tr>' +
                        '<td class="text-center"><a href="javascript:void(0);"  class="text-primary"  onclick="getOrderNoDetails(' + order_id + ')">' + records.number + '</a></td>' +
                        '<td  class="text-center">' + records.subscription_duration + '</td>' +
                        '<td class="text-center">' + expiryDate + '</td>' +
                        '<td  class="text-center">' + records.employees_count + '</td>' +
                        '<td  class="text-center">' + records.devices_count + '</td>' +
                        '<td  class="text-center">' + records.transactions_count + '</td>' +
                        '<td  class="text-center">' + records.mobile_applications_count + '</td>' +
                        '<td  class="text-center">' + records.whatsapp_push_count + '</td>' +
                        '<td  class="text-left">' + records.price_strategy_type + '</td>' +
                        '<td class="text-center payment-context-' + payment_status + '">' + records.payment_status_name + '</td>' +
                        '<td class="text-center">' +
                        '<a href="javascript:void(0);" class="btn btn-xs btn-success" onclick="getOrderNoDetails(' + order_id + ')">' +
                        '<i class="fa fa-eye fa-fw"></i> View</a>&nbsp;' + cancel_button +
                        '</td>' +
                        '</tr>'
                    );

                }
                if (next_order) {
                    $('.next-prev-order').append("<button class='btn-transition btn btn-outline-success btn-next next-data-link-order'" +
                        "value='" + next_order + "'>Next</button>");
                }
                if (prev_order) {
                    $('.next-prev-order').append("<button class='btn-transition btn btn-outline-success btn-previous next-data-link-order'" +
                        "value='" + prev_order + "' >Previous</button>");
                }
            }
        });
    });
     }

 /*-- //End --*/
    //Currency //
    $('#selectCurrency').on('change', function () {
        var selectedCurrency = $(this).val();
        var country_name;
        switch (selectedCurrency) {
            case 'INR':
                country_name = 'INDIA';
                // code block
                break;
            case 'USD':
                country_name = 'United States of America';
                break;
            case 'RMB':
                country_name = 'CHINA';
                break;
            default:
                country_name = 'INDIA';
        }
        //console.log(' ----- Selected Currency ' + selectedCurrency);
        //console.log(' ----- Selected Country ' + country_name);
        getPricingPlanDetails(country_name);
    });
    //
    //Function for showing features on pricing Plan - Country INDIA
    function getPricingPlanDetails(country_name) {
        $.ajax({
            url: '/cloud/api/v1/internal/price_strategies/for_end_company/?country_name=' + country_name,
            type: 'GET',
            dataType: "json",
            success: function (res) {
                //console.log("Response: ", res);
                $('#getFreeTrailFeatures, #getProfessionalFeatures, #getPremiumFeatures, #getEnterpriseFeatures').html('');
                for (var j = 0; j < res.data.length; j++) {
                    var records = res.data[j];
                    var pricing_features_list = '';
                    for (var k = 0; k < records.feature_name.length; k++) {
                        pricing_features_list += '<li>' + records.feature_name[k] + '</li>';
                    }
                    if (records.type_name == 'Free Trial') {
                        $('#getFreeTrailFeatures').html(pricing_features_list);
                        $('#zk-free-trail-plan .panel-heading').html(records.type_name);
                    } else if (records.type_name == 'Professional') {
                        $('#getProfessionalFeatures').html(pricing_features_list);
                        $('#zk-professional-plan .panel-heading').html(records.type_name);
                        $('.my-professional-plan').attr('ps-id', records.id);
                        $('#zk-professional-plan .subscription_price_month').html(records.subscription_duration_unit_price_pre_month);
                        $('#zk-professional-plan .employee_threshold').html(records.employee_threshold);
                        $('#zk-professional-plan .employee_unit_price').html(records.employee_unit_price);
                        $('#zk-professional-plan .device_threshold').html(records.device_threshold);
                        $('#zk-professional-plan .device_unit_price').html(records.device_unit_price);
                        $('#zk-professional-plan .mobile_applications_threshold').html(records.mobile_applications_threshold);
                        $('#zk-professional-plan .mobile_applications_unit_price').html(records.mobile_applications_unit_price);
                        $('#zk-professional-plan .whatsapp_push_threshold').html(records.whatsapp_push_threshold);
                        $('#zk-professional-plan .whatsapp_push_unit_price').html(records.whatsapp_push_unit_price);
                        $('#zk-professional-plan .transaction_threshold').html(records.transaction_threshold);
                        $('#zk-professional-plan .transaction_unit_price').html(records.transaction_unit_price);

                    } else if (records.type_name == 'Premium') {
                        $('#getPremiumFeatures').html(pricing_features_list);
                        $('#zk-premium-plan .panel-heading').html(records.type_name);
                        $('.my-premium-plan').attr('ps-id', records.id);
                        $('#zk-premium-plan .subscription_price_month').html(records.subscription_duration_unit_price_pre_month);
                        $('#zk-premium-plan .employee_threshold').html(records.employee_threshold);
                        $('#zk-premium-plan .employee_unit_price').html(records.employee_unit_price);
                        $('#zk-premium-plan .device_threshold').html(records.device_threshold);
                        $('#zk-premium-plan .device_unit_price').html(records.device_unit_price);
                        $('#zk-premium-plan .mobile_applications_threshold').html(records.mobile_applications_threshold);
                        $('#zk-premium-plan .mobile_applications_unit_price').html(records.mobile_applications_unit_price);
                        $('#zk-premium-plan .whatsapp_push_threshold').html(records.whatsapp_push_threshold);
                        $('#zk-premium-plan .whatsapp_push_unit_price').html(records.whatsapp_push_unit_price);
                        $('#zk-premium-plan .transaction_threshold').html(records.transaction_threshold);
                        $('#zk-premium-plan .transaction_unit_price').html(records.transaction_unit_price);

                    } else if (records.type_name == 'Enterprise') {
                        $('#getEnterpriseFeatures').html(pricing_features_list);
                        $('#zk-enterprise-plan .panel-heading').html(records.type_name);
                        $('.my-enterprise-plan').attr('ps-id', records.id);
                        $('#zk-enterprise-plan .subscription_price_month').html(records.subscription_duration_unit_price_pre_month);
                        $('#zk-enterprise-plan .employee_threshold').html(records.employee_threshold);
                        $('#zk-enterprise-plan .employee_unit_price').html(records.employee_unit_price);
                        $('#zk-enterprise-plan .device_threshold').html(records.device_threshold);
                        $('#zk-enterprise-plan .device_unit_price').html(records.device_unit_price);
                        $('#zk-enterprise-plan .mobile_applications_threshold').html(records.mobile_applications_threshold);
                        $('#zk-enterprise-plan .mobile_applications_unit_price').html(records.mobile_applications_unit_price);
                        $('#zk-enterprise-plan .whatsapp_push_threshold').html(records.whatsapp_push_threshold);
                        $('#zk-enterprise-plan .whatsapp_push_unit_price').html(records.whatsapp_push_unit_price);
                        $('#zk-enterprise-plan .transaction_threshold').html(records.transaction_threshold);
                        $('#zk-enterprise-plan .transaction_unit_price').html(records.transaction_unit_price);
                    }
                }

            }
        });
    }

    //end
    // Check Limit - true False
    function checkPushLimit(ps_id) {
           $.ajax({
            url: '/cloud/api/v1/internal/price_strategies/for_end_company/'+ps_id,
            type: 'GET',
            success: function (res) {
                //console.log(res);
                    var plan_type = res.type_name;
                    var whatsapp_limit = res.whatsapp_push_counts_limit_status;
                    var mobile_limit = res.mobile_app_counts_limit_status;
                    var transaction_limit = res.transaction_counts_limit_status;
                    $('#orderMobileCount, #orderTransCount, #orderWhatsappCount').removeAttr('readonly');
                    // alert(mobile_limit);

                    if (mobile_limit == false) {
                        $('#orderMobileCount').val('9999999');
                        $('#orderMobileCount').attr('readonly', 'readonly');
                        //alert(mobile_limit);
                    }
                    if (transaction_limit == false) {
                        $('#orderTransCount').val('9999999');
                        $('#orderTransCount').attr('readonly', 'readonly');
                    }
                    if (whatsapp_limit == false) {
                        $('#orderWhatsappCount').val('9999999');
                        $('#orderWhatsappCount').attr('readonly', 'readonly');
                    }
                    else {

                    }


            }
        });
    }
    //end
//Switch between pricing & Billing
    $(".select-pricing-billing").click(function(){
        if($("#zk-billing-plan").hasClass("hidden")) {
            $("#zk-billing-plan").removeClass("hidden");
            $("#zk-pricing-plan").addClass("hidden");
            $(".it-pricing1").removeClass("active");
            $(".it-billing1").addClass("active");
            $("#zk-switch-pb-id").prop("checked", true);
            $("#orderErrorModal").modal('hide');
            $("#paymentProcessModal").modal('hide');
           // $("#zk-billing-plan").refresh("#zk-billing-plan > *");
            getAllOrders();

        } else {
            $("#zk-pricing-plan").removeClass("hidden");
            $("#zk-billing-plan").addClass("hidden");
            $(".it-pricing1").addClass("active");
            $(".it-billing1").removeClass("active");
            $("#zk-switch-pb-id").prop("checked", false);
            $('.next-prev-order').html('');

        }
           return false;

    });
   //Switch end

});
//Jquery Function end
/*-- //Get Order Details from Order Lists --*/
   function getOrderNoDetails(order_id) {
       //alert(order_id);
       $.ajax({
           url: '/cloud/api/v1/internal/orders/'+ order_id,
           type: 'GET',
           success: function (res) {
               console.log(res);
               var order_number = res.number;
               var expiryDate = myDateFormat(res.expire_date);
               var pricing_features_list = '';
                    for (var a = 0; a < res.feature_name.length; a++) {
                        pricing_features_list += '<li  class="features-list-label" value="'+res.feature_name[a]+'">' + res.feature_name[a] + '</li>';
                    }
                     //Add Pay Button when Status=Unpaid
                     var status = res.payment_status;
                     var continue_to_payment = "";
                     if (status == 3) {
                         var continue_to_payment;
                         continue_to_payment = '<a href="javascript:void(0);" class="btn btn-lg btn-success continue-to-pay-btn" onclick="continueToPay()" payment-order-no="'+ order_number +'">' +
                         '<i class="fa fa-credit-card fa-fw"></i>&nbsp;&nbsp; Continue to Pay</a>';
                    }
                     //Add Export Billing Button when Status=Paid
                     else if (status == 2) {
                         var export_billing_url = '/cloud/api/v1/internal/invoice_export/' + order_number + '/';
                         var continue_to_payment;
                         continue_to_payment = '<a href="'+ export_billing_url +'"  class="btn btn-lg btn-success continue-to-pay-btn">' +
                         '<i class="fa fa-print fa-fw"></i>&nbsp;&nbsp; Export Billing</a>';
                    }
                    else {
                          continue_to_payment = "";

                    }
                    //end
               $('#orderNoDetailsModal').modal('show');
               $('.modal-open').css('padding', '0');
               $('#orderNoDetailsModal .modal-title').html('Order Number: '+ order_number );
               $('#orderNoDetailsTable').html('');
               $('#orderNoDetailsTable').append(
                        '<tr>'+
                            '<td><b>Plan</b></td>'+
                            '<td>:</td>'+
                            '<td>' + res.price_strategy_type + '</td>'+
                        '</tr>' +

                       '<tr>'+
                            '<td><b>Company Name</b></td>'+
                            '<td>:</td>'+
                            '<td style="text-transform: capitalize;">' + res.company_name + '</td>'+
                        '</tr>' +

                        '<tr>'+
                            '<td><b>Vendor Name</b></td>'+
                            '<td>:</td>'+
                            '<td style="text-transform: capitalize;">' + res.vendor_name + '</td>'+
                        '</tr>' +

                         '<tr>'+
                            '<td><b>Expiry Date</b></td>'+
                            '<td>:</td>'+
                            '<td>' + expiryDate + '</td>'+
                        '</tr>' +
                        '<tr>'+
                            '<td><b>Employees Count</b></td>'+
                            '<td>:</td>'+
                            '<td>' + res.employees_count + '</td>'+
                        '</tr>' +
                        '<tr>'+
                            '<td><b>Devices Count</b></td>'+
                            '<td>:</td>'+
                            '<td>' + res.devices_count + '</td>'+
                        '</tr>' +
                       '<tr>'+
                            '<td><b>Transactions Count</b></td>'+
                            '<td>:</td>'+
                            '<td>' + res.transactions_count + '</td>'+
                        '</tr>' +
                       '<tr>'+
                            '<td><b>Mobile Apps Count</b></td>'+
                            '<td>:</td>'+
                            '<td>' + res.mobile_applications_count + '</td>'+
                        '</tr>' +
                       '<tr>'+
                            '<td><b>WhatsApp Push Count</b></td>'+
                            '<td>:</td>'+
                            '<td>' + res.whatsapp_push_count + '</td>'+
                        '</tr>' +
                        '<tr>'+
                            '<td><b>Original Price</b></td>' +
                            '<td>:</td>' +
                            '<td>' + res.original_price + '</td>'+
                        '</tr>' +
                        '<tr>'+
                           '<td><b>Discount Price</b></td>' +
                           '<td>:</td>' +
                           '<td>' + res.discount_price + '</td>'+
                        '</tr>' +
                        '<tr>'+
                           '<td><b>Payment Price</b></td>' +
                           '<td>:</td>' +
                           '<td>' + res.payment_price + '</td>'+
                        '</tr>' +
                       '<tr>'+
                           '<td><b>Payment Status</b></td>' +
                           '<td>:</td>' +
                           '<td><b class="payment-context-'+ status +'">' + res.payment_status_name + '</b></td>'+
                        '</tr>' +
                       '<tr>'+
                           '<td><b>Features</td></b>' +
                           '<td>:</td>' +
                           '<td>' + pricing_features_list + '</td>'+
                        '</tr>'+
                         '<tr>'+
                           '<td><b>&nbsp;</td></b>' +
                           '<td></td>' +
                           '<td>' + continue_to_payment + '</td>'+
                        '</tr>'
                    );
                    //Condition for Month & Months
                     if (res.subscription_duration>1) {
                        $('.subsDurUnit').html('months');
                    }
                    else {
                        $('.subsDurUnit').html('month');
                    }
                    //end

           }
       });
   }
//get Order Details End//

function continueToPay() {
     var  order_number =  $('.continue-to-pay-btn').attr('payment-order-no');
    //alert(order_number);
    $('#paymentOption_1, #paymentOption_2').html('');
    //var order_number = order_number;
    var paytm_url_text1 = "/cloud/api/v1/internal/payment/paytm/transaction/" + order_number + '/';
    var paypal_url_text1 = "/cloud/api/v1/internal/payment/paypal/transaction/" + order_number + '/';
    //console.log(paytm_url_text1);
    var payment_option_button_1 = '<a href="'+ paytm_url_text1 +'"  title="Paytm" onclick="paymentProcess(0)"  class="my-payment-btn" target="_blank"><img src="/static/cloud/static/images/paytm.png" alt="Paytm" class="img-responsive"/></a>';
    var payment_option_button_2 = ' <a href="'+ paypal_url_text1 +'" title="PayPal" onclick="paymentProcess(0)"  class="my-payment-btn" target="_blank"><img src="/static/cloud/static/images/paypal.png" alt="paypal" class="img-responsive"/></a>';

    //$('#orderNoDetailsModal').modal('hide');
    $('#orderPaymentModal').modal('show');
    $('#paymentOption_1').append(payment_option_button_1);
    $('#paymentOption_2').append(payment_option_button_2);
}
//Payment Processsing
function paymentProcess(billing_page) {
       var billing_page_show_hide = billing_page;
       //alert(billing_page_show_hide);
    $('#paymentProcessModal').modal('show');
    $('#orderPaymentModal, #orderNoDetailsModal, #orderDetailsModal').modal('hide');
     if (billing_page_show_hide == 0) {
          $('#billingPageShowHide').addClass('hidden');
      }
     else {
          $('#billingPageShowHide').removeClass('hidden');
     }
}
//end

/*-- //Cancel Order from Order Lists --*/
     function cancelOrder(order_id) {
         var order_payment_status = 0;
         var obj = {
             payment_status: order_payment_status
         };
         $.ajax({
             url: '/cloud/api/v1/internal/orders/' + order_id + '/',
             data: obj,
             type: 'PUT',
             headers: {"X-CSRFToken": $("input[name=csrfmiddlewaretoken]").val()},
             success: function (res, status, xhr) {
                 //console.log(res);
                 //add class disable
                 $('#cancel-btn-'+ res.id +'').attr('class','btn btn-xs btn-danger btn-grey cancel-order-btn disabled');
                 $('#cancel-btn-'+ res.id +'').html('<i class="fa fa-close fa-fw"></i> Cancelled');
                 if (res.payment_status == 0) {
                     $('#orderCancelModal').modal('show');

                 }
                 //setTimeout($('#orderCancelModal').modal('hide'), 10000);

             }

         });

     }
//Cancel Order  End//
//Date Format
function myDateFormat(userDate) {
        var d = new Date(userDate);
        var year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
        var month = new Intl.DateTimeFormat('en', { month: 'short' }).format(d);
        var day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);
        return  day + '-' + month + '-' + year;

}
//
</script>
{% endblock center %}
{#{% block extension_js %}#}
{#    {{ block.super }}#}
{##}
{#{% endblock %}#}
{#{% endblock %}#}