{% extends "super_admin_templates/base.html" %}
{% set path = "dashboard" %}
{% set subpath = "dashboard" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  {% with messages = get_flashed_messages() %}
  {% if messages %}
    <ul class=flashes>
    {% for message in messages %}
      <h2><b><center style="color:green">{{ message }}</center></b></h2>
    {% endfor %}
    </ul>
  {% endif %}
{% endwith %}


<!-- Start::app-content -->
        <div class="main-content app-content">
            <div class="container-fluid">

                <!-- Start::page-header -->

                <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
                    <div>
                        <p class="fw-semibold fs-18 mb-0">Welcome back, {{adminDict.userName}} !</p>
                        <!-- <span class="fs-semibold text-muted">Track your sales activity, leads and deals here.</span> -->
                    </div>
                </div>

                 <!-- End::page-header -->

                <!-- Start::row-1 -->
                <div class="row">
                    <div class="col-xxl-12 col-xl-12">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="row">
                                    <div class="col-xxl-6 col-lg-6 col-md-6">
                                        <div class="card custom-card payin-dashboard-background">
                                             <div class="card-header justify-content-between border-bottom-0">
                                                    <div class="common-card-title">
                                                    <span class="mx-1 avatar avatar-sm avatar-rounded payin-icon-background">
                                                        <i class='bx bx-line-chart fs-16'></i>
                                                     </span>
                                                        Payin
                                                    </div>
                                                </div>

                                            <div class="card-body p-0">
                                                <div class="d-flex flex-wrap align-items-center payin-border-bottom border-block-end-dashed">
                                                    <div class="col-xxl-9 col-xxl-9 col-lg-8 col-md-8 col-sm-9 px-4 py-3 flex-fill border-inline-end-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payin-text-muted">Total Amount</p>
                                                            <!-- <div class="ms-0">
                                                                <span class="avatar bg-light text-danger"><i class="bi bi-instagram fs-16"></i></span>
                                                            </div> -->
                                                        </div>
                                                        <p class="mb-2 fs-16 fw-semibold">₹{{adminDict.totalPayInBalance}}</p>
                                                        <!-- <div class="flex-between">
                                                            <span class="text-muted fs-12">6 min ago</span>
                                                            <span class="text-danger d-inline-block"><i class="bi bi-arrow-down-right me-1 fs-10"></i>1.5%</span>
                                                        </div> -->
                                                    </div>
                                                    <div class="col-xxl-3 col-xxl-3 col-lg-4 col-md-4 col-sm-3 px-4 py-3 flex-fill border-bottom-dashed border-start-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payin-text fw-semibold">This Month</p>
                                                            <!-- <div>
                                                                <span class="avatar bg-light text-warning"><i class="bi bi-facebook fs-16"></i></span>
                                                            </div> -->
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.totalCurrentMonthPayinBalance}}</p>
                                                        <div class="flex-between">
                                                            <!-- <span class="text-muted fs-12">1 hr ago</span> -->
                                                            {% if adminDict.payinGrowth >0:%}
                                                                <span class="text-success d-inline-block"><i class="bi bi-graph-up-arrow me-1 fs-12"></i>{{adminDict.payinGrowth}}%</span>
                                                            {% else: %}
                                                            <span class="text-danger d-inline-block"><i class="bi bi-graph-down-arrow me-1 fs-12"></i>{{adminDict.payinGrowth}}%</span>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex flex-wrap align-items-center">
                                                    <div class="px-4 py-3 flex-fill border-inline-end-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payin-text-muted">Previous Month</p>
                                                            <!-- <div class="ms-1">
                                                                <span class="avatar bg-light text-info"><i class="bi bi-youtube fs-16"></i></span>
                                                            </div> -->
                                                        </div>
                                                        <p class="mb-2 fs-16 fw-semibold">₹{{adminDict.totalPreviousMonthPayinBalance}}</p>
                                                        <!-- <div class="flex-between">
                                                            <span class="text-muted fs-12">1 day ago</span>
                                                            <span class="text-info d-inline-block"><i class="bi bi-arrow-up-right me-1 fs-10"></i>1.9%</span>
                                                        </div> -->
                                                    </div>
                                                    <!-- <div class="px-4 py-3 flex-fill border-start-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 flex-fill fs-14 fw-semibold">Twitter</p>
                                                            <div>
                                                                <span class="avatar bg-light text-purple"><i class="bi bi-twitter fs-16"></i></span>
                                                            </div>
                                                        </div>
                                                        <p class="mb-2 fs-24 fw-semibold">2.1K</p>
                                                        <div class="flex-between">
                                                            <span class="text-muted fs-12">1 week ago</span>
                                                            <span class="text-purple d-inline-block"><i class="bi bi-arrow-up-right me-1 fs-10"></i>1.9%</span>
                                                        </div>
                                                    </div> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-xxl-6 col-lg-6 col-md-6">
                                        <div class="card custom-card payout-dashboard-background">
                                            <div class="card-header justify-content-between border-bottom-0">
                                                    <div class="common-card-title">
                                                    <span class="mx-1 avatar avatar-sm avatar-rounded payout-icon-background">
                                                        <i class='bx bx-select-multiple fs-16'></i>
                                                     </span>
                                                                Payout
                                                    </div>
                                                </div>
                                            <div class="card-body p-0">
                                                <div class="d-flex flex-wrap align-items-center payout-border-bottom border-block-end-dashed">
                                                    <div class="col-xxl-9 col-xl-9 col-lg-8 col-md-8 col-sm-9 px-4 py-3 flex-fill border-inline-end-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payout-text-muted">Total Amount</p>
                                                            <!-- <div class="ms-0">
                                                                <span class="avatar bg-light text-danger"><i class="bi bi-instagram fs-16"></i></span>
                                                            </div> -->
                                                        </div>
                                                        <p class="mb-2 fs-16 fw-semibold">₹{{adminDict.totalPayOutBalance}}</p>
                                                        <!-- <div class="flex-between">
                                                            <span class="text-muted fs-12">6 min ago</span>
                                                            <span class="text-danger d-inline-block"><i class="bi bi-arrow-down-right me-1 fs-10"></i>1.5%</span>
                                                        </div> -->
                                                    </div>
                                                    <div class="col-xxl-3 col-xl-3 col-lg-4 col-md-4 col-sm-3 px-4 py-3 flex-fill border-bottom-dashed border-start-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payout-text fw-semibold">This Month</p>
                                                            <!-- <div>
                                                                <span class="avatar bg-light text-warning"><i class="bi bi-facebook fs-16"></i></span>
                                                            </div> -->
                                                        </div>
                                                        <p class="mb-2 fs-16 payout-text fw-semibold">₹{{adminDict.totalCurrentMonthPayoutBalance}}</p>
                                                        <div class="flex-between">
                                                            <!-- <span class="text-muted fs-12">1 hr ago</span> -->
                                                            {% if adminDict.payoutGrowth>=0: %}
                                                            <span class="text-success d-inline-block"><i class="bi bi-graph-up-arrow me-1 fs-12"></i>{{adminDict.payoutGrowth}}%</span>
                                                            {% else: %}
                                                            <span class="text-danger d-inline-block"><i class="bi bi-graph-down-arrow me-1 fs-12"></i>{{adminDict.payoutGrowth}}%</span>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex flex-wrap align-items-center">
                                                    <div class="px-4 py-3 flex-fill border-inline-end-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payout-text-muted">Previous Month</p>
                                                            <!-- <div class="ms-1">
                                                                <span class="avatar bg-light text-info"><i class="bi bi-youtube fs-16"></i></span>
                                                            </div> -->
                                                        </div>
                                                        <p class="mb-2 fs-16 fw-semibold">₹{{adminDict.totalPreviousMonthPayoutBalance}}</p>
                                                        <!-- <div class="flex-between">
                                                            <span class="text-muted fs-12">1 day ago</span>
                                                            <span class="text-info d-inline-block"><i class="bi bi-arrow-up-right me-1 fs-10"></i>1.9%</span>
                                                        </div> -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    </div>

                                <div class="row">
                                        <div class="col-xxl-12 col-lg-12 col-md-12">
                                    <div class="card custom-card">
                                                <div class="card-header top-payin-header justify-content-between py-2">
                                                    <div class="card-title">
                                                        Payin Balances
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                    <div class="row">
                                    {% for each_payin in payinsList%}

                             <div class="col-lg-3 col-sm-3 col-md-3 col-xl-3">
                                <div class="card custom-card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-xxl-9 col-xl-10 col-lg-9 col-md-9 col-sm-8 col-8 px-0">
                                                <div class="mb-2">{{each_payin.apiName}}</div>
                                                <div class="text-muted mb-1 fs-12">
                                                    <span class="text-dark fw-semibold fs-20 lh-1 vertical-bottom">
                                                        ₹{{each_payin.currentBalance}}
                                                    </span>
                                                </div>
                                                <div>
                                                    <span class="fs-12 mb-0">Success Ratio <span class="badge bg-success-transparent text-success mx-1">{{each_payin.successRatio}}%</span></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                               
                                    {% endfor %}

                                     </div>
                                    </div>
                                     </div>
                                    </div>
                                </div>




                                <div class="row">
                                        <div class="col-xxl-12 col-lg-12 col-md-12">
                                    <div class="card custom-card">
                                                <div class="card-header top-payout-header justify-content-between py-2">
                                                    <div class="card-title">
                                                        Payout Balances
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                    <div class="row">
                                    {% for each_payout in payoutsList%}

                             <div class="col-lg-3 col-sm-3 col-md-3 col-xl-3">
                                <div class="card custom-card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-xxl-9 col-xl-10 col-lg-9 col-md-9 col-sm-8 col-8 px-0">
                                                <div class="mb-2">{{each_payout.apiName}}</div>
                                                <div class="text-muted mb-1 fs-12">
                                                    <span class="text-dark fw-semibold fs-20 lh-1 vertical-bottom">
                                                        ₹{{each_payout.currentBalance}}
                                                    </span>
                                                </div>
                                                <div>
                                                    <span class="fs-12 mb-0">Success Ratio <span class="badge bg-success-transparent text-success mx-1">{{each_payout.successRatio}}%</span></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                               
                                    {% endfor %}

                                     </div>
                                    </div>
                                     </div>
                                    </div>
                                </div>

                                    <div class="row">
                                
                                    <div class="col-xl-6">
                                        <div class="col-xl-12">
                                            <div class="card custom-card">
                                                <div class="card-header top-payin-header justify-content-between py-2">
                                                    <div class="card-title">
                                                        Top Payin Merchants
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <ul class="list-unstyled crm-top-deals mb-0">
                                                        {% for each_merchant in payInTop10MerchantsList%}
                                                        <li>
                                                            <div class="d-flex align-items-top flex-wrap payin-border-bottom">
                                                                <div class="me-2">
                                                                    <span class="avatar avatar-sm avatar-rounded bg-payin-image fw-semibold">
                                                                        {{each_merchant.imageString}}
                                                                    </span>
                                                                </div>
                                                                <div class="flex-fill">
                                                                    <p class="fw-semibold mb-0">{{each_merchant.merchantName}}</p>
                                                                    <span class="payin-text-muted fs-12">{{each_merchant.phoneNumber}}</span>
                                                                </div>
                                                                <div class="fw-semibold payin-text fs-15">₹{{each_merchant.totalMerchantAmount}}</div>
                                                            </div>
                                                        </li>
                                                        {% endfor %}
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-6">
                                        <div class="col-xl-12">
                                            <div class="card custom-card">
                                                <div class="card-header top-payout-header justify-content-between py-2">
                                                    <div class="card-title">
                                                        Top Payout Merchants
                                                    </div>
                                                    <!-- <div class="dropdown">
                                                        <a aria-label="anchor" href="javascript:void(0);" class="btn btn-icon btn-sm btn-light" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="fe fe-more-vertical"></i>
                                                        </a>
                                                        <ul class="dropdown-menu">
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Week</a></li>
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Month</a></li>
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Year</a></li>
                                                        </ul>
                                                    </div> -->
                                                </div>
                                                <div class="card-body">
                                                    <ul class="list-unstyled crm-top-deals mb-0">
                                                        {% for each_payout_merchant in payoutsTop10MerchantsList%}
                                                        <li>
                                                            <div class="d-flex align-items-top flex-wrap payout-border-bottom">
                                                                <div class="me-2">
                                                                    <span class="avatar avatar-sm avatar-rounded bg-payout-image fw-semibold">
                                                                        {{each_payout_merchant.imageString}}
                                                                    </span>
                                                                </div>
                                                                <div class="flex-fill">
                                                                    <p class="fw-semibold mb-0">{{each_payout_merchant.merchantName}}</p>
                                                                    <span class="payout-text-muted fs-12">{{each_payout_merchant.phoneNumber}}</span>
                                                                </div>
                                                                <div class="fw-semibold payout-text fs-15">₹{{each_payout_merchant.totalMerchantAmount}}</div>
                                                            </div>
                                                        </li>
                                                        {% endfor %}
                                                        
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xxl-6 col-lg-6 col-md-6">
                                        <div class="card custom-card">
                                            <div class="card-header p-0 payin-commission-header justify-content-between">
                                                    <div class="common-card-title pt-2 px-2">
                                                    <span class="mx-1 avatar avatar-sm avatar-rounded payin-icon-background">
                                                        <i class='bx bx-wallet'></i>
                                                     </span>
                                                                Payin Commissions Earned
                                                    </div>
                                                </div>
                                            <div class="card-body p-0">
                                                <div class="d-flex flex-wrap align-items-center payin-border-bottom border-block-end-dashed">
                                                    <div class="px-4 py-3 flex-fill border-inline-end-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payin-text-muted">Total Charges Amount</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.totalPayinAmount}}</p>
                                                    </div>
                                                    <div class="px-4 py-3 flex-fill border-bottom-dashed border-start-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payin-text-muted">Total Commission Amount</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.totalPayinCommissionsAmount}}</p>
                                                        <!-- <div class="flex-between">
                                                            {% if adminDict.payinGrowth >0:%}
                                                                <span class="text-success d-inline-block"><i class="bi bi-graph-up-arrow me-1 fs-12"></i>{{adminDict.payinGrowth}}%</span>
                                                            {% else: %}
                                                            <span class="text-danger d-inline-block"><i class="bi bi-graph-down-arrow me-1 fs-12"></i>{{adminDict.payinGrowth}}%</span>
                                                            {% endif %}
                                                        </div> -->
                                                    </div>
                                                </div>
                                                <div class="d-flex flex-wrap align-items-center border-bottom">
                                                    <div class="px-4 py-3 flex-fill border-inline-end-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payin-text-muted">GST</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.totalPayinGstAmount}}</p>
                                                    </div>

                                                    <div class="px-4 py-3 flex-fill border-bottom-dashed border-start-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payin-text-muted">TDS</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.totalPayinTdsAmount}}</p>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xxl-6 col-lg-6 col-md-6">
                                        <div class="card custom-card">
                                            <div class="card-header p-0 payout-commission-header justify-content-between">
                                                 <div class="common-card-title pt-2 px-2">
                                                    <span class="mx-1 avatar avatar-sm avatar-rounded payout-icon-background">
                                                            <i class='bx bx-wallet-alt'></i>
                                                        </span>
                                                   Payout Commissions Earned
                                                 </div>
                                                </div>
                                            
                                            <div class="card-body p-0">
                                                <div class="d-flex flex-wrap align-items-center payout-border-bottom border-block-end-dashed">
                                                    <div class="px-4 py-3 flex-fill border-inline-end-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payout-text-muted">Total Commission Amount</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 fw-semibold payout-text">₹{{adminDict.totalPayoutAmount}}</p>
                                                    </div>
                                                    <div class="px-4 py-3 flex-fill border-bottom-dashed border-start-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payout-text-muted">Total Charges Amount</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payout-text fw-semibold">₹{{adminDict.totalPayoutCommissionsAmount}}</p>
                                                        <!-- <div class="flex-between">
                                                            {% if adminDict.payinGrowth >0:%}
                                                                <span class="text-success d-inline-block"><i class="bi bi-graph-up-arrow me-1 fs-12"></i>{{adminDict.payinGrowth}}%</span>
                                                            {% else: %}
                                                            <span class="text-danger d-inline-block"><i class="bi bi-graph-down-arrow me-1 fs-12"></i>{{adminDict.payinGrowth}}%</span>
                                                            {% endif %}
                                                        </div> -->
                                                    </div>
                                                </div>
                                                <div class="d-flex flex-wrap align-items-center">
                                                    <div class="px-4 py-3 flex-fill border-inline-end-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payout-text-muted">GST</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payout-text fw-semibold">₹{{adminDict.totalPayoutGstAmount}}</p>
                                                    </div>
                                                    <div class="px-4 py-3 flex-fill border-end border-inline-end-dashed">
                                                        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                            <p class="mb-0 payout-text-muted">TDS</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payout-text fw-semibold">₹{{adminDict.totalPayoutTdsAmount}}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End::row-1 -->

            </div>
        </div>
        <!-- End::app-content -->

  

  </section>


<!-- <script>
        document.addEventListener('DOMContentLoaded', function() {
                // fetchDashboardtoptenmerchants();
        });

function fetchDashboardtoptenmerchants(){
     $.ajax({
        url: "#",//{{ url_for('admin.dashboard') }}
        data:{},
        dataType:"json",
        type: "post",
        success: function(resultdata){
            payinhtmldata=""
            payouthtmldata=""
          if(resultdata.responseStatus==1){
          $.each(resultdata.payInTop10MerchantsList, function( key, value ) {
              payinhtmldata=payinhtmldata+'<li><div class="d-flex align-items-top flex-wrap payin-border-bottom"><div class="me-2"><span class="avatar avatar-sm avatar-rounded bg-payin-image fw-semibold">'+value.imageString+'</span></div><div class="flex-fill"><p class="fw-semibold mb-0">'+value.merchantName+'</p><span class="payin-text-muted fs-12">'+value.phoneNumber+'</span></div><div class="fw-semibold payin-text fs-15">₹'+value.totalMerchantAmount+'</div></div></li>';
              });
         $('#top10payinmerchants').html(payinhtmldata);
         $.each(resultdata.payoutsTop10MerchantsList, function( key, value ) {
              payouthtmldata=payouthtmldata+'<li><div class="d-flex align-items-top flex-wrap payin-border-bottom"><div class="me-2"><span class="avatar avatar-sm avatar-rounded bg-payin-image fw-semibold">'+value.imageString+'</span></div><div class="flex-fill"><p class="fw-semibold mb-0">'+value.merchantName+'</p><span class="payin-text-muted fs-12">'+value.phoneNumber+'</span></div><div class="fw-semibold payin-text fs-15">₹'+value.totalMerchantAmount+'</div></div></li>';
              });
         $('#top10payoutmerchants').html(payouthtmldata);
          }else{
            $('#top10payoutmerchants').html("<li>NO Merchants Found.</li>");
          }
        }
    });
     // fetchDashboardmerchantcommissions();
    };

function fetchDashboardmerchantcommissions(){
    alert('commissions')
     $.ajax({
        url: "#",//{{ url_for('admin.dashboard') }}
        data:{},
        dataType:"json",
        type: "post",
        success: function(resultdata){
            console.log("testing commissions");
            console.log(resultdata);
            console.log(resultdata.commissionsDict);

          if(resultdata.responseStatus==1){
         $('#payintotalchargesamount').html("₹"+resultdata.commissionsDict.totalPayinAmount);
         $('#payintotalcommissionamount').html("₹"+resultdata.commissionsDict.totalPayinCommissionsAmount);
         $('#payingstamount').html("₹"+resultdata.commissionsDict.totalPayinGstAmount);
         $('#payintotaltdsamount').html("₹"+resultdata.commissionsDict.totalPayinTdsAmount);
          }else{
            $('#payintotalchargesamount').html("₹0.00");
            $('#payintotalcommissionamount').html("₹0.00");
            $('#payingstamount').html("₹0.00");
            $('#payintotaltdsamount').html("₹0.00");
          }
         
        }
    });
    };
    </script> -->

<script type="text/javascript" src="https://cdn.canvasjs.com/jquery.canvasjs.min.js"></script>
</div>
     {%endblock%}