{% extends "super_admin_templates/base.html" %}
{% set path = "dashboard" %}
{% set subpath = "dashboard" %}
{% block content %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- 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 new-dashboard">
        <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="kyc-approved">
                    <div class="header">
                        <div class="s-icon">
                            <img src="../../static/images/approved.svg" alt="">
                        </div>
                        <h3>KYC Approved</h3>
                        <h6><span class="blinking-dot"></span>{{adminDict.approvedMerchantsCount}}</h6>
                    </div>
                    <div class="kyc-body">
                        <div class="kyc-box">
                            <h3>Applied</h3>
                            <h6>{{adminDict.totalMerchantsCount}}</h6>
                            <div class="s-icon">
                                <img src="../../static/images/applied.svg" alt="">
                            </div>
                        </div>
                        <div class="kyc-box">
                            <h3>Pending</h3>
                            <h6>{{adminDict.pendingMerchantsCount}}</h6>
                            <div class="s-icon">
                                <img src="../../static/images/pending.svg" alt="">
                            </div>
                        </div>
                        <div class="kyc-box">
                            <h3>Rejected</h3>
                            <h6>{{adminDict.rejectedMerchantsCount}}</h6>
                            <div class="s-icon">
                                <img src="../../static/images/rejected.svg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="kyc-approved">
                        <div class="header">
                            <div class="s-icon">
                                <img src="../../static/images/approved.svg" alt="">
                            </div>
                            <h3>KYC Approved</h3>
                            <h6><span class="blinking-dot"></span>{{adminDict.approvedMerchantsCount}}</h6>
                        </div>
                        <div class="kyc-body">
                            <div class="kyc-box">
                                <h3>Applied</h3>
                                <h6>{{adminDict.totalMerchantsCount}}</h6>
                                <div class="s-icon">
                                    <img src="../../static/images/applied.svg" alt="">
                                </div>
                            </div>
                            <div class="kyc-box">
                                <h3>Pending</h3>
                                <h6>{{adminDict.pendingMerchantsCount}}</h6>
                                <div class="s-icon">
                                    <img src="../../static/images/pending.svg" alt="">
                                </div>
                            </div>
                            <div class="kyc-box">
                                <h3>Rejected</h3>
                                <h6>{{adminDict.rejectedMerchantsCount}}</h6>
                                <div class="s-icon">
                                    <img src="../../static/images/rejected.svg" alt="">
                                </div>
                            </div>
                        </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="payinout-wrapper">
                        <div class="payinout-box">
                            <div class="header">
                                <div class="s-icon">
                                    <img src="../../static/images/payin_icon.svg" alt="">
                                </div>
                                <h3>PAYIN</h3>
                                <div class="dropdown">
                                    <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        <img src="../../static/images/dots.png" alt="">
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
                                        <li><a class="dropdown-item" href="#" id="viewMapOption"
                                                onclick="toggleMap()">View Map</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div id="statsSection">
                                <div class="payinout-week">
                                    <div class="payinout-yesterday">
                                        <h4>Yesterday</h4>
                                        <h3>₹{{adminDict.yesterdayTotalPayinAmount}}</h3>
                                        <div class="payinout-success">
                                            <p>Success Ratio
                                                <span>{{adminDict.yesterdayTotalPayinSucceessRatio}}%</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="payinout-today">
                                        <h4>Today</h4>
                                        {% if adminDict.todayPayinGrowth >= 0 %}
                                        <h3><span class="positive">+ {{ adminDict.todayPayinGrowth }}%</span> ₹{{
                                            adminDict.todayTotalPayinAmount }}</h3>
                                        {% else %}
                                        <h3><span class="negative">{{ adminDict.todayPayinGrowth }}%</span> ₹{{
                                            adminDict.todayTotalPayinAmount }}</h3>
                                        {% endif %}
                                        <div class="payinout-success">
                                            <p>Success Ratio
                                                <span>{{adminDict.todayTotalPayinSucceessRatio}}%</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="payinout-monthly">
                                    <div class="payinout-monthly-box">
                                        <div class="payinout-monthly-box-title">
                                            <h3>Previous Month</h3>
                                            <h4> ₹{{adminDict.totalPreviousMonthPayinBalance}}</h4>
                                        </div>
                                        <div class="payinout-monthly-box-success">
                                            <p>Success Ratio
                                                <span>{{adminDict.previousMonthPayinSucceessRatio}}%</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="payinout-monthly-box">
                                        <div class="payinout-monthly-box-title">
                                            <h3>This Month</h3>
                                            <h4>₹{{adminDict.totalCurrentMonthPayinBalance}}</h4>
                                        </div>
                                        <div class="payinout-monthly-box-success">
                                            <p>Success Ratio
                                                <span>{{adminDict.currentMonthTotalPayinSucceessRatio}}%</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="payinout-monthly-box">
                                        <div class="payinout-monthly-box-title">
                                            <h3>Total Amount</h3>
                                            <h4> ₹{{adminDict.totalPayInBalance}}</h4>
                                        </div>
                                        <div class="payinout-monthly-box-success">
                                            <p>Success Ratio
                                                <span>{{adminDict.totalPayinSucceessRatio}}%</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="mapView" class="map-view">
                                <div class="chart-container">
                                    <canvas id="myStackedBarChart"></canvas>
                                </div>
                            </div>

                        </div>
                        <div class="payinout-box">
                            <div class="header">
                                <div class="s-icon">
                                    <img src="../../static/images/payout_icon.svg" alt="">
                                </div>
                                <h3>PAYOUT</h3>
                                <div class="dropdown">
                                    <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        <img src="../../static/images/dots.png" alt="">
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
                                        <li><a class="dropdown-item" href="#" id="viewpayoutMapOption"
                                                onclick="togglePayoutMap()">View Map</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div id="payoutStateSelection">
                                <div class="payinout-week">
                                    <div class="payinout-yesterday">
                                        <h4>Yesterday</h4>
                                        <h3>₹{{ adminDict.yesterdayTotalPayoutAmount }}</h3>
                                        <div class="payinout-success">
                                            <p>Success Ratio
                                                <span>{{adminDict.yesterdayTotalPayoutSucceessRatio}}%</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="payinout-today">
                                        <div class="payinout-today-box">
                                            <h4>Today</h4>
                                            {% if adminDict.todayPayoutGrowth >= 0 %}
                                            <h3><span class="positive">+ {{adminDict.todayPayoutGrowth}}%</span>₹{{
                                                adminDict.todayTotalPayoutAmount }}</h3>
                                            {% else %}
                                            <h3><span class="negative">{{adminDict.todayPayoutGrowth}}%</span>₹{{
                                                adminDict.todayTotalPayoutAmount }}</h3>
                                            {% endif %}
                                            <div class="payinout-success">
                                                <p>Success Ratio
                                                    <span>{{adminDict.todayTotalPayoutSucceessRatio}}%</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="payinout-monthly">
                                    <div class="payinout-monthly-box">
                                        <div class="payinout-monthly-box-title">
                                            <h3>Previous Month</h3>
                                            <h4> ₹{{ adminDict.totalPreviousMonthPayoutBalance}}</h4>
                                        </div>
                                        <div class="payinout-monthly-box-success">
                                            <p>Success Ratio
                                                <span>{{adminDict.previousMonthPayoutSucceessRatio}}%</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="payinout-monthly-box">
                                        <div class="payinout-monthly-box-title">
                                            <h3>This Month</h3>
                                            <h4>₹{{adminDict.totalCurrentMonthPayoutBalance}}</h4>
                                        </div>
                                        <div class="payinout-monthly-box-success">
                                            <p>Success Ratio
                                                <span>{{adminDict.currentMonthTotalPayoutSucceessRatio}}%</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="payinout-monthly-box">
                                        <div class="payinout-monthly-box-title">
                                            <h3>Total Amount</h3>
                                            <h4> ₹{{adminDict.totalPayOutBalance}}</h4>
                                        </div>
                                        <div class="payinout-monthly-box-success">
                                            <p>Success Ratio
                                                <span>{{adminDict.totalPayoutSucceessRatio}}%</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="payoutmapView" class="map-view" style="display: none;">
                                <div class="chart-container">
                                    <canvas id="myPayoutStackedBarChart"></canvas>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="commissions-earned-wrapper">
                        <div class="commissions-earned">
                            <div class="header">
                                <div class="s-icon">
                                    <img src="../../static/images/payin-com.svg" alt="">
                                </div>
                                <h3>Payin Commissions Earned</h3>
                            </div>
                            <div class="commission-content">
                                <div class="comission-content-left">
                                    <table class="commission-table">
                                        <thead>
                                            <tr>
                                                <th>Category</th>
                                                <th>Total</th>
                                                <th>Previous Month</th>
                                                <th>Current Month</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Commission Earned</td>
                                                <td>₹{{adminDict.cwCommissionAmount}}</td>
                                                <td>₹{{adminDict.previousMonthcwCommissionAmount}}</td>
                                                <td>₹{{adminDict.currentMonthcwCommissionAmount}}</td>
                                            </tr>
                                            <tr>
                                                <td>Transactions Charges</td>
                                                <td>₹{{adminDict.totalTransactionAmount}}
                                                    <span>(GST)
                                                        ₹{{adminDict.overallTransactionGstAmountDatewise}}</span>
                                                </td>
                                                <td>₹{{adminDict.previousMonthTotalTransactionAmount}}</td>
                                                <td>₹{{adminDict.currentMonthTotalTransactionAmount}}</td>
                                            </tr>
                                            <tr>
                                                <td>PG Charges</td>
                                                <td>₹{{adminDict.pgtotalAmount}} <span>(GST)
                                                        ₹{{adminDict.overallPayinPgGstAmount}}</span></td>
                                                <td>₹{{adminDict.previousMonthpgtotalAmount}}</td>
                                                <td>₹{{adminDict.currentMonthpgtotalAmount}}</td>
                                            </tr>
                                            <tr>
                                                <td>Agent Commissions Amount</td>
                                                <td>₹{{adminDict.agentCommissionAmount}}</td>
                                                <td>₹{{adminDict.previousMonthAgentCommissionAmount}}</td>
                                                <td>₹{{adminDict.currentMonthAgentCommissionAmount}}</td>
                                            </tr>
                                            <tr>
                                                <td>PG Total Additional Charges</td>
                                                <td>₹{{adminDict.pgAdditionalChargeAmount}}</td>
                                                <td>₹{{adminDict.pgPreviousMonthAdditionalChargeAmount}}</td>
                                                <td>₹{{adminDict.pgCurrentMonthAdditionalChargeAmount}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="comission-content-right">
                                    <div class="chart-container">
                                        <canvas id="myPieChart"></canvas>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="commissions-earned">
                            <div class="header">
                                <div class="s-icon">
                                    <img src="../../static/images/payin-com.svg" alt="">
                                </div>
                                <h3> Payout Commissions Earned</h3>
                            </div>
                            <div class="commission-content">
                                <div class="comission-content-left">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>Category</th>
                                                <th>Total</th>
                                                <th>Previous Month</th>
                                                <th>Current Month</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Total Commission Amount</td>
                                                <td>₹{{adminDict.totalPayoutAmount}}</td>
                                                <td>₹{{adminDict.previousMonthPayoutCommissionAmount}}</td>
                                                <td>₹{{adminDict.currentMonthPayoutCommissionAmount}}</td>
                                            </tr>
                                            <tr>
                                                <td>Total Charges Amount</td>
                                                <td>₹{{adminDict.totalPayoutCommissionsAmount}}
                                                    <span> ₹{{adminDict.totalPayoutGstAmount}}</span>
                                                </td>
                                                <td>₹{{adminDict.previousMonthPayoutCharges}}</td>
                                                <td>₹{{adminDict.currentMonthPayoutChargesAmount}}</td>
                                            </tr>
                                            <tr>
                                                <td>Total PG Charges</td>
                                                <td>₹{{adminDict.payoutTotalPgchargeAmount}} <span>
                                                        ₹{{adminDict.payoutTotalPggstAmount}}</span></td>
                                                <td>₹{{adminDict.previousMonthPGCharges}}</td>
                                                <td>₹{{adminDict.currentMonthPayoutPGCharges}}</td>
                                            </tr>
                                            <tr>
                                                <td>Total Beneficiaries Charges Amount</td>
                                                <td>₹{{adminDict.beneficiaryTotalChargesAmount}} <span><span>
                                                            ₹{{adminDict.beneficiaryGstAmount}}</span></span></td>
                                                <td>₹{{adminDict.beneficiaryPreviousTotalChargesAmount}}</td>
                                                <td>₹{{adminDict.beneficiaryCurrentMonthTotalChargesAmount}}</td>
                                            </tr>
                                            <tr>
                                                <td>Total Beneficiaries Transactions Count</td>
                                                <td>{{adminDict.beneficiaryTransactionsCount}}</td>
                                                <td>{{adminDict.beneficiaryPreviousTransactionsCount}}</td>
                                                <td>{{adminDict.beneficiaryCurrentMonthTransactionsCount}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="comission-content-right">
                                    <div class="chart-container">
                                        <canvas id="payOutChart"></canvas>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- top 10 -->
                    <div class="dashboard-merchant">
                        <div class="merchant-box">
                            <div class="header">
                                <div class="s-icon">
                                    <img src="../../static/images/top10.svg" alt="">
                                </div>
                                <h3 class="dm-title">Top 10 PayIn Merchants Transactions</h3>
                            </div>

                            <table class="orders-table">
                                <thead>
                                    <tr>
                                        <th>S.No</th>
                                        <th>Name</th>
                                        <th>Previous Month</th>
                                        <th>Current Month</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for each_merchant in payInTop10MerchantsList%}
                                    <tr>
                                        <td><span>{{ loop.index }}</span></td>
                                        <td>
                                            <p>{{each_merchant.merchantName}}</p>
                                            <span>{{each_merchant.phoneNumber}}</span>
                                        </td>
                                        <td>₹{{each_merchant.totalMerchantPreviousPayinBalance}} </td>
                                        <td>
                                            <p>₹{{each_merchant.totalMerchantAmount}} </p>
                                            <span
                                                class="percentage_positive">{{each_merchant.payinMerchantGrowth}}%</span>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>


                        </div>
                        <div class="merchant-box">
                            <div class="header">
                                <div class="s-icon">
                                    <img src="../../static/images/top10.svg" alt="">
                                </div>
                                <h3 class="dm-title">Top 10 Payout Merchants Transactions</h3>
                            </div>
                            <table class="orders-table">
                                <thead>
                                    <tr>
                                        <th>S.No</th>
                                        <th>Name</th>
                                        <th>Previous Month</th>
                                        <th>Current Month</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for each_payout_merchant in payoutsTop10MerchantsList%}
                                    <tr>
                                        <td><span>{{ loop.index }}</span></td>
                                        <td>
                                            <p>{{each_payout_merchant.merchantName}}</p>
                                            <span>{{each_payout_merchant.phoneNumber}}</span>
                                        </td>
                                        <td>₹{{each_payout_merchant.totalMerchantPreviousPayoutBalance}} </td>
                                        <td>
                                            <p>₹{{each_payout_merchant.totalMerchantAmount}}</p> <span
                                                class="percentage_negative">{{each_payout_merchant.payoutMerchantGrowth}}%</span>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>


                        </div>
                    </div>
                    <div class="dashboard-volumes">
                        <div class="volume-box">
                            <div class="header">
                                <div class="s-icon">
                                    <img src="../../static/images/volume.svg" alt="">
                                </div>
                                <h3>Payin Volumes</h3>
                            </div>
                            <div class="volume-boxes-wrapper">
                                {% for each_payin in payinsList%}
                                <div class="admin-card2-box">
                                    <div class="volume-title">
                                        <h3 class="admin-card2-box-title">{{each_payin.apiName}}</h3>
                                        <h4 class="admin-card2-box-price"> ₹{{each_payin.currentBalance}}</h4>
                                    </div>
                                    <div class="volume-success">
                                        <p class="admin-card2-success">Success Ratio
                                            <span
                                                class="badge bg-success-transparent text-success mx-1">{{each_payin.successRatio}}%</span>
                                        </p>
                                    </div>

                                </div>
                                {% endfor %}

                            </div>
                        </div>
                    </div>
                    <div class="dashboard-volumes">
                        <div class="volume-box">
                            <div class="header">
                                <div class="s-icon">
                                    <img src="../../static/images/volume.svg" alt="">
                                </div>
                                <h3>Payout Volumes</h3>
                            </div>
                            <div class="volume-boxes-wrapper">
                                {% for each_payout in payoutsList%}
                                <div class="admin-card2-box">
                                    <div class="volume-title">
                                        <h3 class="admin-card2-box-title">{{each_payout.apiName}}</h3>
                                        <h4 class="admin-card2-box-price"> ₹{{each_payout.currentBalance}}</h4>
                                    </div>
                                    <div class="volume-success">
                                        <p class="admin-card2-success">Success Ratio
                                            <span
                                                class="badge bg-success-transparent text-success mx-1">{{each_payout.successRatio}}%</span>
                                        </p>
                                    </div>

                                </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>
        </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> -->

<!-- payin commissions earned -->
<script>
    var cwCommissionAmount = "{{adminDict.cwCommissionAmount}}";
    cwCommissionAmount = cwCommissionAmount.replace(/,/g, '');
    var totalTransactionAmount = "{{adminDict.totalTransactionAmount}}"
    totalTransactionAmount = totalTransactionAmount.replace(/,/g, '');
    var pgtotalAmount = "{{adminDict.pgtotalAmount}}"
    pgtotalAmount = pgtotalAmount.replace(/,/g, '');
    var agentCommissionAmount = "{{adminDict.agentCommissionAmount}}";
    agentCommissionAmount = agentCommissionAmount.replace(/,/g, '');
    console.log(parseFloat(cwCommissionAmount), parseFloat(totalTransactionAmount), parseFloat(pgtotalAmount), parseFloat(agentCommissionAmount))

    var ctx = document.getElementById('myPieChart').getContext('2d');

    var myPieChart = new Chart(ctx, {
        type: 'pie', // Type of chart
        data: {
            labels: ['Commission Amount', 'Transaction Charges', 'PG Amount', 'Agent Commission Amount'],
            datasets: [{
                label: 'Commission Breakdown',
                data: [parseFloat(cwCommissionAmount), parseFloat(totalTransactionAmount), parseFloat(pgtotalAmount), parseFloat(agentCommissionAmount)],
                backgroundColor: ['#64AE2B', '#453ED5', '#F52F67', '#FF7C24'],
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            rotation: -0.5,  // Rotate to create the 3D effect
            cutoutPercentage: 40,  // Make the chart doughnut-shaped (optional)
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        usePointStyle: true, // Use dots instead of rectangles in the legend
                        pointStyle: 'circle', // You can customize the shape of the point (e.g., 'circle', 'triangle', etc.)
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function (tooltipItem) {
                            return tooltipItem.label + ': ₹' + tooltipItem.raw.toLocaleString();
                        }
                    }
                }
            }
        }
    });

</script>
<!-- payout commissions earned -->
<script>

    var beneficiaryTotalChargesAmount = "{{adminDict.beneficiaryTotalChargesAmount}}"
    beneficiaryTotalChargesAmount = beneficiaryTotalChargesAmount.replace(/,/g, '');
    var payoutTotalPgchargeAmount = "{{adminDict.payoutTotalPgchargeAmount}}";
    payoutTotalPgchargeAmount = payoutTotalPgchargeAmount.replace(/,/g, '');
    var totalPayoutCommissionsAmount = "{{adminDict.totalPayoutCommissionsAmount}}"
    totalPayoutCommissionsAmount = totalPayoutCommissionsAmount.replace(/,/g, '');
    var totalPayoutAmount = "{{adminDict.totalPayoutAmount}}"
    totalPayoutAmount = totalPayoutAmount.replace(/,/g, '');
    console.log(totalPayoutAmount, totalPayoutCommissionsAmount, payoutTotalPgchargeAmount, beneficiaryTotalChargesAmount)

    var ctx2 = document.getElementById('payOutChart').getContext('2d');

    var payOutChart = new Chart(ctx2, {
        type: 'pie',
        data: {
            labels: ['Commission Amount', 'Charges Amount', 'PG Charges', 'Beneficiaries Charges'],
            datasets: [{
                label: 'Sales Breakdown',
                data: [parseFloat(totalPayoutAmount), parseFloat(totalPayoutCommissionsAmount), parseFloat(payoutTotalPgchargeAmount), parseFloat(beneficiaryTotalChargesAmount)],
                backgroundColor: ['#64AE2B', '#453ED5', '#F52F67', '#FF7C24'],
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            rotation: 0.5,  // Rotate the chart if you want a different angle
            cutoutPercentage: 40,  // Make this chart also doughnut-shaped (optional)
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        usePointStyle: true, // Use dots instead of rectangles in the legend
                        pointStyle: 'circle', // You can customize the shape of the point (e.g., 'circle', 'triangle', etc.)
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function (tooltipItem) {
                            return tooltipItem.label + ': ₹' + tooltipItem.raw.toLocaleString();
                        }
                    }
                }
            }
        }
    });
</script>




<!-- pay in line chart -->
<script>
    var ctx = document.getElementById('myStackedBarChart').getContext('2d');
    list1 = {{ monthwisePayinGraphData | safe }};
    var myStackedBarChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: list1
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        usePointStyle: true, // Use dots instead of rectangles in the legend
                        pointStyle: 'circle', // You can customize the shape of the point (e.g., 'circle', 'triangle', etc.)
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function (tooltipItem) {
                            return tooltipItem.dataset.label + ': ₹' + tooltipItem.raw.toLocaleString();
                        }
                    }
                }
            },
            scales: {
                x: {
                    stacked: true, // Stack the bars on the x-axis
                },
                y: {
                    stacked: true, // Stack the bars on the y-axis
                    beginAtZero: true
                }
            }
        }
    });


    var ctx = document.getElementById('myPayoutStackedBarChart').getContext('2d');
    list1 = {{ monthwisePayoutGraphData | safe }};
    var myPayoutStackedBarChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: list1
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        usePointStyle: true, // Use dots instead of rectangles in the legend
                        pointStyle: 'circle', // You can customize the shape of the point (e.g., 'circle', 'triangle', etc.)
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function (tooltipItem) {
                            return tooltipItem.dataset.label + ': ₹' + tooltipItem.raw.toLocaleString();
                        }
                    }
                }
            },
            scales: {
                x: {
                    stacked: true, // Stack the bars on the x-axis
                },
                y: {
                    stacked: true, // Stack the bars on the y-axis
                    beginAtZero: true
                }
            }
        }
    });
</script>

<!-- map view -->
<script>
    // Toggle View Map / Exit Map functionality
    function toggleMap() {
        var mapView = document.getElementById('mapView');
        var statsSection = document.getElementById('statsSection');
        var viewMapOption = document.getElementById('viewMapOption');

        // If map is not visible, show it
        if (mapView.style.display === "none" || mapView.style.display === "") {
            mapView.style.display = "block"; // Show the map
            statsSection.style.display = "none"; // Hide the stats section
            viewMapOption.innerHTML = "Exit Map"; // Change dropdown option text to 'Exit Map'
        } else {
            mapView.style.display = "none"; // Hide the map
            statsSection.style.display = "block"; // Show the stats section
            viewMapOption.innerHTML = "View Map"; // Change dropdown option text back to 'View Map'
        }
    }

    function togglePayoutMap() {
        var mapView = document.getElementById('payoutmapView');
        var statsSection = document.getElementById('payoutStateSelection');
        var viewMapOption = document.getElementById('viewpayoutMapOption');

        // If map is not visible, show it
        if (mapView.style.display === "none" || mapView.style.display === "") {
            mapView.style.display = "block"; // Show the map
            statsSection.style.display = "none"; // Hide the stats section
            viewMapOption.innerHTML = "Exit Map"; // Change dropdown option text to 'Exit Map'
        } else {
            mapView.style.display = "none"; // Hide the map
            statsSection.style.display = "block"; // Show the stats section
            viewMapOption.innerHTML = "View Map"; // Change dropdown option text back to 'View Map'
        }
    }
</script>

</div>
{%endblock%}