{% extends "super_admin_templates/base.html" %}
{% set path = "dashboard" %}
{% set subpath = "dashboard" %}
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
   
    #commissionChart {
        max-width: 400px;
        margin: 0 auto;
    }
   
</style>


<!-- 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 mt-3 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 -->
            <div class="dashboard-statistics">
                <div class="statistic-box">
                    <div class="s-icon">
                        <img src="../../static/images/d_icon_1.svg" alt="">
                    </div>
                    <div class="s-icon-info">
                        <h6>{{adminDict.totalMerchantsCount}}</h6>
                        <span>Total Merchants</span>
                    </div>
                </div>
                <div class="statistic-box">
                    <div class="s-icon">
                        <img src="../../static/images/d_icon_2.svg" alt="">
                    </div>
                    <div class="s-icon-info">
                        <h6>{{adminDict.approvedMerchantsCount}}</h6>
                        <span>Total KYC Approved</span>
                    </div>
                </div>
                <div class="statistic-box">
                    <div class="s-icon">
                        <img src="../../static/images/d_icon_3.svg" alt="">
                    </div>
                    <div class="s-icon-info">
                        <h6>{{adminDict.pendingMerchantsCount}}</h6>
                        <span>Pending KYC</span>
                    </div>
                </div>
                <div class="statistic-box">
                    <div class="s-icon">
                        <img src="../../static/images/d_icon_4.svg" alt="">
                    </div>
                    <div class="s-icon-info">
                        <h6>{{adminDict.rejectedMerchantsCount}}</h6>
                        <span>Rejected KYC</span>
                    </div>
                </div>
            </div>

            <!-- Start::row-1 -->
            <!-- <div class="row">
                    <div class="col-xl-7">
                        <div class="row">
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12">
                                <div class="card custom-card">
                                    <div class="card-body">
                                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                                            <div>
                                                <h6 class="fw-semibold mb-3">Total Merchants</h6>
                                                <span class="fs-25 fw-semibold">{{adminDict.totalMerchantsCount}}</span>
                                               
                                            </div>
                                            <div id="analytics-users"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6">
                                <div class="card custom-card">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div>
                                                <h6 class="fw-semibold mb-3">Total KYC Approved</h6>
                                                <span class="fs-25 fw-semibold">{{adminDict.approvedMerchantsCount}}</span>
                                                
                                            </div>
                                            <div>
                                                <span class="avatar avatar-md bg-secondary">
                                                    <i class="ri-user-3-line"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div> -->
            <!--End::row-1 -->
            {% if 'view' in session.get('dashboardPermissions', []) %}
            <!-- Start::row-1 -->
            <div class="row mb-2">
                <div class="col-xxl-12 col-xl-12">
                    <div class="row">
                        <div class="col-xl-12 admin-card1">
                            <div class="row">
                                <div class="col-xxl-6 col-lg-6 col-md-6">
                                    <div class="card custom-card payinpayout payin-dashboard-background">
                                        <div class="card-header justify-content-between border-bottom-0">
                                            <div class="common-card-title">
                                                <span class="icon">
                                                    <img src="../../static/images/payin.svg" alt="">
                                                </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-xl-6 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="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-xl-6 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="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="admin-card1-bottom">
                                                <div class="acb">
                                                    <p class="acb-left">Previous Month</p>
                                                    <p class="acb-right">₹{{adminDict.totalPreviousMonthPayinBalance}}
                                                    </p>

                                                </div>
                                                <div class="acb">
                                                    <p class="acb-left">Today Total Payin Amount</p>
                                                    <p class="acb-right">₹{{adminDict.todayTotalPayinAmount}}</p>
                                                </div>

                                                <div class="acb">
                                                    <p class="acb-left">Yesterday Total Payin Amount</p>
                                                    <p class="acb-right">₹{{adminDict.yesterdayTotalPayinAmount}}</p>

                                                </div>
                                            </div>


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

                                <div class="col-xxl-6 col-lg-6 col-md-6">
                                    <div class="card custom-card payinpayout payout-dashboard-background">
                                        <div class="card-header justify-content-between border-bottom-0">
                                            <div class="common-card-title">
                                                <span class="icon">
                                                    <img src="../../static/images/payout.svg" alt="">
                                                </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-xl-6 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-xl-6 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="admin-card1-bottom">
                                                <div class="acb">
                                                    <p class="acb-left">Previous Month Payout</p>
                                                    <p class="acb-right">₹{{ adminDict.totalPreviousMonthPayoutBalance
                                                        }}</p>
                                                </div>
                                                <div class="acb">
                                                    <p class="acb-left">Today Payout Total Amount</p>
                                                    <p class="acb-right">₹{{ adminDict.todayTotalPayoutAmount }}</p>
                                                </div>
                                                <div class="acb">
                                                    <p class="acb-left">Yesterday Payout Total Amount</p>
                                                    <p class="acb-right">₹{{ adminDict.yesterdayTotalPayoutAmount }}</p>
                                                </div>
                                            </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 admin-card2">
                                <div class="card-header top-payin-header justify-content-between py-2">
                                    <div class="card-title">
                                        Payin Volumes
                                    </div>
                                </div>
                                <div class="card-body">


                                    {% for each_payin in payinsList%}

                                    <div class="admin-card2-box">
                                        <h3 class="admin-card2-box-title">{{each_payin.apiName}}</h3>
                                        <h4 class="admin-card2-box-price">₹{{each_payin.currentBalance | formatINR}}</h4>

                                        <span class="admin-card2-success">Success Ratio <span
                                                class="badge bg-success-transparent text-success mx-1">{{each_payin.successRatio}}%</span></span>

                                    </div>
                                    {% endfor %}


                                </div>


                            </div>

                        </div>

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

                                    <div class="admin-card2-box">
                                        <h3 class="admin-card2-box-title">{{each_payout.apiName}}</h3>
                                        <h4 class="admin-card2-box-price">₹{{each_payout.currentBalance | formatINR}}</h4>
                                        <span class="admin-card2-success">Success Ratio <span
                                                class="badge bg-success-transparent text-success mx-1">{{each_payout.successRatio}}%</span></span>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="dashboard-recent-transations">
                                    <h3>Recent Transactions
                                     </h3>
                                     <table class="table-pattern1">
                                        <thead>
                                            <tr>
                                                <th class="name">Name</th>
                                                <th>Date</th>
                                                <th>Status</th>
                                                <th>Amount</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><p class="received">Received From Kevin</p></td>
                                                <td>02/04/2025</td>
                                                <td><span class="success">Success</span></td>
                                                <td class="amount">₹410.00</td>
                                            </tr>
                                            <tr>
                                                <td><p class="sent">Paid to Kevin</p></td>
                                                <td>02/04/2025</td>
                                                <td><span class="success">Success</span></td>
                                                <td class="amount">₹410.00</td>
                                            </tr>
                                            <tr>
                                                <td><p class="received">Received From Kevin</p></td>
                                                <td>02/04/2025</td>
                                                <td><span class="success">Success</span></td>
                                                <td class="amount">₹410.00</td>
                                            </tr>
                                            <tr>
                                                <td><p class="sent">Paid to Kevin</p></td>
                                                <td>02/04/2025</td>
                                                <td><span class="success">Success</span></td>
                                                <td class="amount">₹410.00</td>
                                            </tr>
                                            <tr>
                                                <td><p class="received">Received From Kevin</p></td>
                                                <td>02/04/2025</td>
                                                <td><span class="success">Success</span></td>
                                                <td class="amount">₹410.00</td>
                                            </tr>
                                            <tr>
                                                <td><p class="sent">Paid to Kevin</p></td>
                                                <td>02/04/2025</td>
                                                <td><span class="success">Success</span></td>
                                                <td class="amount">₹410.00</td>
                                            </tr>
                                            <tr>
                                                <td><p class="received">Received From Kevin</p></td>
                                                <td>02/04/2025</td>
                                                <td><span class="success">Success</span></td>
                                                <td class="amount">₹410.00</td>
                                            </tr>
                                            <tr>
                                                <td><p class="sent">Paid to Kevin</p></td>
                                                <td>02/04/2025</td>
                                                <td><span class="success">Success</span></td>
                                                <td class="amount">₹410.00</td>
                                            </tr>
                                            <tr>
                                                <td><p class="received">Received From Kevin</p></td>
                                                <td>02/04/2025</td>
                                                <td><span class="success">Success</span></td>
                                                <td class="amount">₹410.00</td>
                                            </tr>
                                            <tr>
                                                <td><p class="sent">Paid to Kevin</p></td>
                                                <td>02/04/2025</td>
                                                <td><span class="success">Success</span></td>
                                                <td class="amount">₹410.00</td>
                                            </tr>
                                        </tbody>
                                     </table>
                                </div> -->

                    <div class="row dashboard-merchant">


                        <div class="dashboard-merchant-container">

                            <div class="payin-merchant">
                                <h3 class="dm-title">Top 10 PayIn Merchants Transactions</h3>
                                <ul>
                                    {% for each_merchant in payInTop10MerchantsList%}
                                    <li>
                                        <div class="avatar">
                                            <span>{{each_merchant.imageString}}</span>
                                        </div>
                                        <div class="merchant-name">
                                            <p>{{each_merchant.merchantName}}</p>
                                            <span>{{each_merchant.phoneNumber}}</span>
                                        </div>
                                        <div class="merchant-amount">
                                            <span>₹{{each_merchant.totalMerchantAmount}}</span>

                                        </div>

                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            <div class="payout-merchant">
                                <h3 class="dm-title">Top 10 PayIn Merchants Transactions</h3>
                                <ul>
                                    {% for each_payout_merchant in payoutsTop10MerchantsList%}
                                    <li>
                                        <div class="avatar">
                                            <span>{{each_payout_merchant.imageString}}</span>
                                        </div>
                                        <div class="merchant-name">
                                            <p>{{each_payout_merchant.merchantName}}</p>
                                            <span>{{each_payout_merchant.phoneNumber}}</span>
                                        </div>
                                        <div class="merchant-amount">
                                            <span>₹{{each_payout_merchant.totalMerchantAmount}}</span>

                                        </div>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>



                        </div>
                    </div>

                    <div class="row">



                        <div class="col-xxl-6 col-lg-6 col-md-6">
                            <div class="commissions-earned">
                                <h3>Payin Commissions Earned</h3>
                                <div class="ce-graph">
                                    <div class="ce-graph-left">
                                        <canvas id="commissionChart"></canvas>
                                    </div>
                                    <div class="ce-graph-right">
                                        <ul>
                                            <li>
                                                <p>Total Commission Earned</p>
                                                <span>₹{{adminDict.cwCommissionAmount}}</span>
                                            </li>
                                            <li>
                                                <p>Total Transactions Charges</p>
                                                <span>₹{{adminDict.totalTransactionAmount}}</span>
                                            </li>
                                            <li>
                                                <p>Total Transactions Gst Charges</p>
                                                <span>₹{{adminDict.overallTransactionGstAmountDatewise}}</span>
                                            </li>
                                            <li>
                                                <p>Total PG Charges</p>
                                                <span>₹{{adminDict.pgtotalAmount}}</span>
                                            </li>
                                            <li>
                                                <p>Total PG Gst Charges</p>
                                                <span>₹{{adminDict.overallPayinPgGstAmount}}</span>
                                            </li>
                                            <li>
                                                <p>Agent Commissions Amount</p>
                                                <span>₹{{adminDict.agentCommissionAmount}}</span>
                                            </li>
                                            <li>
                                                <p>PG Total Additional Charges</p>
                                                <span>₹{{adminDict.pgAdditionalChargeAmount}}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="ce-month">
                                    <h3>Current Month</h3>
                                    <ul>
                                        <li>
                                            <p>Commission Earned</p>
                                            <span>₹{{adminDict.currentMonthcwCommissionAmount}}</span>
                                        </li>
                                        <li>
                                            <p>Transactions Charges</p>
                                            <span>₹{{adminDict.currentMonthTotalTransactionAmount}}</span>
                                        </li>
                                        <li>
                                            <p>PG Charges</p>
                                            <span>₹{{adminDict.currentMonthpgtotalAmount}}</span>
                                        </li>
                                        <li>
                                            <p>Agent Commissions Amount</p>
                                            <span>₹{{adminDict.currentMonthAgentCommissionAmount}}</span>
                                        </li>
                                        <li>
                                            <p>PG Current Month Additional Charges</p>
                                            <span>₹{{adminDict.pgCurrentMonthAdditionalChargeAmount}}</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="ce-month">
                                    <h3>Previous Month</h3>
                                    <ul>
                                        <li>
                                            <p>Commission Earned</p>
                                            <span>₹{{adminDict.previousMonthcwCommissionAmount}}</span>
                                        </li>
                                        <li>
                                            <p>Transactions Charges</p>
                                            <span>₹{{adminDict.previousMonthTotalTransactionAmount}}</span>
                                        </li>
                                        <li>
                                            <p>PG Charges</p>
                                            <span>₹{{adminDict.previousMonthpgtotalAmount}}</span>
                                        </li>
                                        <li>
                                            <p>Agent Commissions Amount</p>
                                            <span>₹{{adminDict.previousMonthAgentCommissionAmount}}</span>
                                        </li>
                                        <li>
                                            <p>PG Previous Month Additional Charges</p>
                                            <span>₹{{adminDict.pgPreviousMonthAdditionalChargeAmount}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!-- <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-3 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 Commission Earned</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.cwCommissionAmount}}</p>
                                                    </div>
                                                    <div class="px-3 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 Transactions Charges</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.totalTransactionAmount}}</p>
                                                    </div>
                                                    <div class="px-3 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 PG Charges</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.pgtotalAmount}}</p>
                                                    </div>
                                                    <div class="px-3 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">Agent Commissions Amount</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.agentCommissionAmount}}</p>
                                                    </div>
                                                </div>
                                                <div class="d-flex flex-wrap align-items-center border-bottom">
                                                    <div class="px-3 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">Current Commission Earned</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.currentMonthcwCommissionAmount}}</p>
                                                    </div>
                                                    <div class="px-3 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">Current Transactions Charges</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.currentMonthTotalTransactionAmount}}</p>
                                                    </div>
                                                    <div class="px-3 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">Current PG Charges</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.currentMonthpgtotalAmount}}</p>
                                                    </div>
                                                    <div class="px-3 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">Current Agent Commissions Amount</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.currentMonthAgentCommissionAmount}}</p>
                                                    </div>
                                                </div>
                                                <div class="d-flex flex-wrap align-items-center border-bottom">
                                                    <div class="px-3 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 Commission Earned</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.previousMonthcwCommissionAmount}}</p>
                                                    </div>
                                                    <div class="px-3 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">Previous Transactions Charges</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.previousMonthTotalTransactionAmount}}</p>
                                                    </div>
                                                    <div class="px-3 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 PG Charges</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.previousMonthpgtotalAmount}}</p>
                                                    </div>
                                                    <div class="px-3 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 Agent Commissions Amount</p>
                                                        </div>
                                                        <p class="mb-2 fs-16 payin-text fw-semibold">₹{{adminDict.previousMonthAgentCommissionAmount}}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->
                        </div>

                        <div class="col-xxl-6 col-lg-6 col-md-6">
                            <div class="commissions-earned">
                                <h3> Payout Commissions Earned</h3>
                                <div class="ce-graph">
                                    <div class="ce-graph-left">
                                        <img src="../../static/images/pie.jpg" alt="">
                                    </div>
                                    <div class="ce-graph-right">
                                        <ul>
                                            <li>
                                                <p>Total Commission Amount</p>
                                                <span>₹{{adminDict.totalPayoutAmount}}</span>
                                            </li>
                                            <li>
                                                <p>Total Charges Amount</p>
                                                <span>₹{{adminDict.totalPayoutCommissionsAmount}}</span>
                                            </li>
                                            <li>
                                                <p>GST</p>
                                                <span>₹{{adminDict.totalPayoutGstAmount}}</span>
                                            </li>
                                            <li>
                                                <p>Total PG Charges</p>
                                                <span>₹{{adminDict.payoutTotalPgchargeAmount}}</span>
                                            </li>
                                            <li>
                                                <p>Total PG Gst Amount</p>
                                                <span>₹{{adminDict.payoutTotalPggstAmount}}</span>
                                            </li>
                                            <!-- <li>
                                                    <p>Total Beneficiaries Charges Amount</p>
                                                    <span>₹{{adminDict.beneficiaryGstAmount}}</span>
                                                </li>
                                                <li>
                                                    <p>Total Beneficiaries Gst Amount</p>
                                                    <span>₹{{adminDict.beneficiaryTotalChargesAmount}}</span>
                                                </li>
                                                <li>
                                                    <p>Total Beneficiaries Transactions Count</p>
                                                    <span>{{adminDict.beneficiaryTransactionsCount}}</span>
                                                </li>
                                            -->
                                        </ul>
                                    </div>
                                </div>


                                <div class="ce-month">
                                    <ul>
                                        <li>
                                            <p></p>
                                            <span>Previous Month</span>
                                            <span>Current Month</span>
                                        </li>
                                        <li>
                                            <p>Commission Earned</p>
                                            <span>₹{{adminDict.previousMonthPayoutCommissionAmount}}</span>
                                            <span>₹{{adminDict.currentMonthPayoutCommissionAmount}}</span>
                                        </li>
                                        <li>
                                            <p>Transactions Charges</p>
                                            <span>₹{{adminDict.previousMonthPayoutCharges}}</span>
                                            <span>₹{{adminDict.currentMonthPayoutChargesAmount}}</span>
                                        </li>
                                        <li>
                                            <p>PG Charges</p>
                                            <span>₹{{adminDict.previousMonthPGCharges}}</span>
                                            <span>₹{{adminDict.currentMonthpgtotalAmount}}</span>
                                        </li>
                                        <!--  <li>
                                                        <p>Beneficiaries Charges Amount</p>
                                                        <span>₹{{adminDict.beneficiaryPreviousGstAmount}}</span>
                                                        <span>₹{{adminDict.beneficiaryCurrentMonthGstAmount}}</span>
                                                    </li>
                                                    <li>
                                                        <p>Beneficiaries Transactions Count</p>
                                                        <span>{{adminDict.beneficiaryPreviousTransactionsCount}}</span>
                                                        <span>{{adminDict.beneficiaryCurrentMonthTransactionsCount}}</span>
                                                    </li> -->
                                    </ul>
                                </div>
                                <!-- <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>
                                                </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>
        {% endif %}
        <!-- 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>
<script>
    // Data for the chart (example values)
    var commissions_earned="{{adminDict.agentCommissionAmount}}";
    var commissions_earned_cleanedStr = commissions_earned.replace(/,/g, '');
    const data = {
        labels: [
            'Total Commission Earned',
            'Total Transactions Charges',
            'Total PG Charges',
            'Total Transactions Charges'
        ],
        datasets: [{
            data: [parseFloat(commissions_earned_cleanedStr), 200, 100, 300],  // Example data
            backgroundColor: ['#00bcd4', '#ff9800', '#9c27b0', '#4caf50', '#f44336'],  // Colors for the chart segments
            hoverOffset: 4
        }]
    };

    // Configuration for the chart
    const config = {
        type: 'pie',
        data: data,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    callbacks: {
                        label: function(tooltipItem) {
                            return tooltipItem.label + ': ₹' + tooltipItem.raw.toFixed(2);
                        }
                    }
                }
            }
        }
    };

    // Creating the chart instance
    const ctx = document.getElementById('commissionChart').getContext('2d');
    const commissionChart = new Chart(ctx, config);

</script>
</div>
{%endblock%}