{% extends "super_admin_templates/base.html" %}
{% set path = "dashboard" %}
{% set subpath = "dashboard" %}
{% block content %}

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

<style>
.canvasjs-chart-credit{
  display:none;
}
    .chart--container {
      min-height: 370px;
      width: 100%;
      height: 100%;
    }
  .myChart-license-text {
      display: none;
    }
  </style>

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

                <!-- Page Header -->
                <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
                    <h1 class="page-title fw-semibold fs-18 mb-0">Payout Balances</h1>
                    <div class="ms-md-1 ms-0">

                        <center>
                            {% 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 %}
                                
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </center>
                    </div>

                    <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                            </ol>
                        </nav>
                </div>
                <!-- Page Header Close -->

 <!-- Start::row-1 -->
                <div class="row">
                    <div class="col-xxl-12 col-xl-12">
                        <div class="row">
                            {% for each_payout in payoutsList%}
                            <div class="col-lg-3 col-sm-3 col-md-3 col-xl-3">
                                <div class="card custom-card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-xxl-3 col-xl-2 col-lg-3 col-md-3 col-sm-4 col-4 d-flex align-items-center justify-content-center ecommerce-icon px-0">
                                                <span class="rounded p-3 bg-primary-transparent">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="svg-white primary" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/><path d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M18,20H6V8h2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8h4v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8 h2V20z"/></g></svg>
                                                </span>
                                            </div>
                                            <div class="col-xxl-9 col-xl-10 col-lg-9 col-md-9 col-sm-8 col-8 px-0">
                                                <div class="mb-2">{{each_payout.apiName}}</div>
                                                <div class="text-muted mb-1 fs-12">
                                                    <span class="text-dark fw-semibold fs-20 lh-1 vertical-bottom">
                                                       {{each_payout.currentBalance}} 
                                                    </span>
                                                     <a href="{{url_for('api_master.get_payout_balance',apiId=each_payout.id)}}"><span class="text-dark fw-semibold fs-20 lh-1 vertical-bottom">
                                                       <i class='bx bx-refresh'></i>
                                                    </span>
                                                   </a>
                                                </div>
                                                <div>
                                                    <span class="fs-12 mb-0">UpdatedOn <span class="badge bg-success-transparent text-success mx-1">{{each_payout.updatedOn}}</span></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}

                        </div>
                    </div>

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

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

  

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