{% extends 'super_admin_templates/base.html' %}
{% set path = "report" %}
{% set subpath = "payout_transaction_report" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->

<style type="text/css">
  .pagination-page-info {
    padding: .6em;
    padding-left: 0;
    width: 40em;
    margin: .5em;
    margin-left: 0;
    font-size: 12px;
  }

  .pagination-page-info b {
    color: black;
    background: #6aa6ed;
    padding-left: 2px;
    padding: .1em .25em;
    font-size: 150%;
  }
</style>

<script>
  $(document).ready(function () {
    $('.view-task-btn').on('click', function () {
      const apiId = $(this).data('id');
      const startDate = $('#startDate').val(); // get start date
      const endDate = $('#endDate').val();     // get end date

      // Optional: Show loading state
      $('#modal-task-content').html('<p>Loading...</p>');

      // AJAX request to fetch task data
      $.ajax({
        url: "{{url_for('admin.get_pg_wise_commission_data')}}",  // change this to your route
        type: "get",
        dataType: "json",
        data: {
          "apiId": apiId, "startDate": startDate,
          "endDate": endDate
        },
        success: function (response) {
          if (response.responseStatus === 1) {
            if (response.subPaymentmodeDataList.length > 0) {
              const apiName = response.apiName;
              let rows = '';
              $('#updateTaskLabel').text(` SubPaymentMode Wise Data For ${apiName}  -  From ${startDate} to ${endDate}`);
              response.subPaymentmodeDataList.forEach((item, index) => {
                rows += `<tr>
                         <td>${item.snoCount}</td>
                         <td>${item.subPaymentModeType}</td>
                         <td>${item.transactionsCount}</td>
                         <td>${item.totalVolumeAmount}</td>
                         <td>${item.transactionChargeAmount}</td>
                         <td>${item.transactionGstAmount}</td>
                         <td>${item.transactionTotalAmount}</td>
                         <td>${item.aggregatorChargeAmount}</td>
                         <td>${item.aggregatorGstAmount}</td>
                         <td>${item.aggregatorTotalAmount}</td>
                         <td>${item.companyChargeAmount}</td>
                         <td>${item.companyGstAmount}</td>
                         <td>${item.companyTotalAmount}</td>
                         <td>${item.companyCommissionAmount}</td>
                       </tr>`;
              });
              $('#modalTaskTableBody').html(rows);
              let baseUrl = "{{url_for('admin.admin_download_pgbased_subpaymentmode_wise_commission_structure_excel_report')}}";  // Flask will render this

              // Append the query parameters dynamically using jQuery
              let fullUrl = baseUrl + '?startDate=' + startDate + '&endDate=' + endDate + '&apiId=' + apiId;

              $('#downloadPgpaymentmodes').attr('href', fullUrl);
            } else {
              // Success but no data
              $('#modalTaskTableBody').html('<tr><td colspan="5" class="text-center">No records found.</td></tr>');
            }
          } else {
            // Error status
            $('#modalTaskTableBody').html(`<tr><td colspan="5" class="text-danger text-center">${response.result}</td></tr>`);
          }
        },
        error: function () {
          $('#modalTaskTableBody').html('<tr><td colspan="5" class="text-danger text-center">Failed to load data.</td></tr>');
        }
      });
    });
  });
</script>
<!-- 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"> Dashboards</h1>
      <div class="ms-md-1 ms-0">
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page"> Commissions Structure</li>
          </ol>
        </nav>
      </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row">
      <div class="col-xl-12">
        <div class="card custom-card">
          <div class="card-header">
            <div class="card-title">
              Commissions Structure
            </div>
          </div>
          <div class="card-body">
            <div class ="flashes">
            <center>

              {% if error %}
              <h2><b>
                  <center style="color:RED">{{ error }}</center>
                </b></h2>
              {% endif %}
            </center>
            </div>
            <div class="d-flex flex-wrap card-body p-0">
              <div class="col-md-6 d-flex flex-wrap align-items-center payout-border-bottom border-block-end-dashed">
                <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 Transaction Count</p>
                  </div>
                  <p class="mb-2 fs-16 payout-text fw-semibold">{{totalSuccessTxnscount}}</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 Transaction Volume</p>
                  </div>
                  <p class="mb-2 fs-16 payout-text fw-semibold">₹{{totalSuccessAmount | formatINR}}</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 Transaction Charges</p>
                  </div>
                  <p class="mb-2 fs-16 payout-text fw-semibold">₹{{overallTransactionChargesDatewise | formatINR}}</p>
                </div>
                <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 Transaction GST</p>
                  </div>
                  <p class="mb-2 fs-16 payout-text fw-semibold">₹{{overallTransactionGstAmountDatewise | formatINR}}</p>
                </div>
              </div>
              <div class="col-md-6 d-flex flex-wrap align-items-center payout-border-bottom border-block-end-dashed">
                <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 PG Charges</p>
                  </div>
                  <p class="mb-2 fs-16 payout-text fw-semibold">₹{{overPGCharges | formatINR}}</p>
                </div>
                <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 PG GST</p>
                  </div>
                  <p class="mb-2 fs-16 payout-text fw-semibold">₹{{overPgGstAmount | formatINR}}</p>
                </div>
              </div>
              <div class="col-md-6 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">Total Commission Earned</p>
                  </div>
                  <p class="mb-2 fs-16 fw-semibold payout-text">₹{{overAllCWCommissionsAmount | formatINR}}</p>
                </div>
              </div>
            </div>
            <div class="table-responsive">
              <div id="datatable-basic_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                <div class="row align-items-center">
                  <div class="col-sm-4 col-md-4">
                    <form method="GET" action="{{ url_for('admin.commissionStructure') }}" enctype="multipart/form-data"
                      class="d-flex justify-content-between align-items-center">


                      <div class="col-auto">
                        <input type="text" class="form-control flatpickrdate" value="{{startDate}}" name="startDate"
                          id="startDate" placeholder="Select start date">
                      </div>

                      <div class="col-auto">
                        <input type="text" class="form-control flatpickrdate" value="{{endDate}}" name="endDate"
                          placeholder="Select end date" id="endDate">
                      </div>
                      <div class="form-group col-4">
                        <button type="submit" class="btn btn-primary">Search</button>
             
                                        <a href="{{url_for('admin.commissionStructure')}}"><button type="button"
                                            class="btn btn-warning">Reset</button></a> </div>
                         

                    </form>
                    {% for error in form.startDate.errors %}
                                    <span class="text-danger" class="error">{{ error }}</span>
                                    {% endfor %}

                          {% for error in form.endDate.errors %}
                        <span class="text-danger" class="error">{{ error }}</span>
                        {% endfor %}

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

              <!-- Add some space -->
              <div class="mt-3"></div>
              <!-- End space -->
              <div class="d-flex flex-wrap card-body p-0">
                <div class=" col-md-6 d-flex flex-wrap align-items-center payout-border-bottom border-block-end-dashed">
                  <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">Transaction Count</p>
                    </div>
                    <p class="mb-2 fs-16 payout-text fw-semibold">{{successTxnscountDatewise}}</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">Transaction Volume</p>
                    </div>
                    <p class="mb-2 fs-16 payout-text fw-semibold">₹{{successAmountDatewise | formatINR}}</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">Transaction Charges</p>
                    </div>
                    <p class="mb-2 fs-16 payout-text fw-semibold">₹{{transactionChargesDatewise | formatINR}}</p>
                  </div>
                  <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">Transaction GST</p>
                    </div>
                    <p class="mb-2 fs-16 payout-text fw-semibold">₹{{transactionGstAmountDatewise | formatINR}}</p>
                  </div>
                </div>
                <div class=" col-md-6 d-flex flex-wrap align-items-center payout-border-bottom border-block-end-dashed">
                  <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">PG Charges</p>
                    </div>
                    <p class="mb-2 fs-16 payout-text fw-semibold">₹{{pgCharges | formatINR}}</p>
                  </div>
                  <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">PG GST</p>
                    </div>
                    <p class="mb-2 fs-16 payout-text fw-semibold">₹{{pgGstAmount | formatINR}}</p>
                  </div>
                </div>
                <div class=" col-md-6 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">Commission Earned</p>
                    </div>
                    <p class="mb-2 fs-16 fw-semibold payout-text">₹{{cwCommissionsAmount | formatINR}}</p>
                  </div>
                </div>
              </div>
              <div style="float: right;">
                <a
                  href="{{url_for('admin.admin_download_pgwise_commission_structure_excel_report',startDate=startDate,endDate=endDate)}}"><button
                    type="button" title="Click to download" class="btn btn-secondary"><i class="ri-file-excel-line"></i></button></a>
              </div>
              <div class="col-xl-12">
                <div class="card custom-card">
                  <div class="card-body">
                    <div class=" align-items-top flex-wrap payin-border-bottom col-xl-12">
                      <div class="table-responsive">
                        <table id="datatable-basic" class="table text-nowrap">
                          <thead class="table-primary">
                            <tr>
                              <th scope="col">S.No</th>
                              <th scope="col">PG Name</th>
                              <th scope="col">Txn Count</th>
                              <th scope="col">Txn Volume Amount</th>
                              <th scope="col">Transaction Charge Amount</th>
                              <th scope="col">Transaction Gst Amount</th>
                              <th scope="col">Transaction Total Amount</th>
                              <th scope="col">PG Charge Amount</th>
                              <th scope="col">PG Gst Amount</th>
                              <th scope="col">PG Total Amount</th>
                              <th scope="col">Company Charge Amount</th>
                              <th scope="col">Company Gst Amount</th>
                              <th scope="col">Company Total Amount</th>
                              <th scope="col">Company Commission Amount</th>
                              <th scope="col">View</th>
                            </tr>
                          </thead>
                          <tbody>
                            {% for each_payout in pgTop10chargesList %}
                            <tr>
                              <td>{{each_payout.snoCount}}</td>
                              <td>{{each_payout.apiName }}</td>
                              <td>{{each_payout.transactionsCount}}</td>
                              <td>₹{{each_payout.totalVolumeAmount}}</td>
                              <td>₹{{each_payout.transactionChargeAmount }}</td>
                              <td>₹{{ each_payout.transactionGstAmount }}</td>
                              <td>₹{{each_payout.transactionTotalAmount}}</td>
                              <td>₹{{each_payout.aggregatorChargeAmount }}</td>
                              <td>₹{{ each_payout.aggregatorGstAmount }}</td>
                              <td>₹{{each_payout.aggregatorTotalAmount}}</td>
                              <td>₹{{each_payout.companyChargeAmount}}</td>
                              <td>₹{{each_payout.companyGstAmount}}</td>
                              <td>₹{{each_payout.companyTotalAmount}}</td>
                              <td>₹{{each_payout.companyCommissionAmount}}</td>
                              <td><a href="javascript:void(0);"
                                  class="btn btn-icon btn-sm btn-success-transparent rounded-pill view-task-btn"
                                  data-id="{{ each_payout.apiId }}" data-bs-toggle="modal" data-bs-target="#viewTask">
                                  <i class="ri-eye-line"></i>
                                </a></td>
                            </tr>
                            {% endfor %}
                          </tbody>
                        </table>
                          {% if not pgTop10chargesList %}
                                    <h5 class="mt-2" style="text-align: center; font-size: medium;">No Data Found</h5>
                            {% endif %}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div style="float: right;">
                <a
                  href="{{url_for('admin.admin_download_subpaymentmode_wise_commission_structure_excel_report',startDate=startDate,endDate=endDate)}}"><button
                    type="button" title="Click to download" class="btn btn-secondary"><i class="ri-file-excel-line"></i></button></a>
              </div>
              <div class="col-xl-12">
                <div class="card custom-card">
                  <div class="card-body">
                    <div class=" align-items-top flex-wrap payin-border-bottom col-xl-12">
                      <div class="table-responsive">
                        <table id="datatable-basic" class="table text-nowrap">
                          <thead class="table-primary">
                            <tr>
                              <th scope="col">S.No</th>
                              <th scope="col">PaymentMode</th>
                              <th scope="col">Txn Count</th>
                              <th scope="col">Txn Volume Amount</th>
                              <th scope="col">Transaction Charge Amount</th>
                              <th scope="col">Transaction Gst Amount</th>
                              <th scope="col">Transaction Total Amount</th>
                              <th scope="col">PG Charge Amount</th>
                              <th scope="col">PG Gst Amount</th>
                              <th scope="col">PG Total Amount</th>
                              <th scope="col">Company Charge Amount</th>
                              <th scope="col">Company Gst Amount</th>
                              <th scope="col">Company Total Amount</th>
                              <th scope="col">Company Commission Amount</th>
                            </tr>
                          </thead>
                          <tbody>
                            {% for each_payout in subPaymentmodeDataList %}
                            <tr>
                              <td>{{each_payout.snoCount}}</td>
                              <td>{{each_payout.subPaymentModeType}}</td>
                              <td>{{each_payout.transactionsCount}}</td>
                              <td>₹{{each_payout.totalVolumeAmount}}</td>
                              <td>₹{{each_payout.transactionChargeAmount }}</td>
                              <td>₹{{ each_payout.transactionGstAmount }}</td>
                              <td>₹{{each_payout.transactionTotalAmount}}</td>
                              <td>₹{{each_payout.aggregatorChargeAmount }}</td>
                              <td>₹{{ each_payout.aggregatorGstAmount }}</td>
                              <td>₹{{each_payout.aggregatorTotalAmount}}</td>
                              <td>₹{{each_payout.companyChargeAmount}}</td>
                              <td>₹{{each_payout.companyGstAmount}}</td>
                              <td>₹{{each_payout.companyTotalAmount}}</td>
                              <td>₹{{each_payout.companyCommissionAmount}}</td>
                            </tr>
                            {% endfor %}
                          </tbody>
                        </table>
                          {% if not subPaymentmodeDataList %}
                                    <h5 class="mt-2" style="text-align: center; font-size: medium;">No Data Found</h5>
                            {% endif %}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="float: right;">
                <a
                  href="{{url_for('admin.admin_download_site_wise_commission_structure_excel_report',startDate=startDate,endDate=endDate)}}"><button
                    type="button" title="Click to download" class="btn btn-secondary"><i class="ri-file-excel-line"></i></button></a>
              </div>
              <div class="col-xl-12">
                <div class="card custom-card">
                  <div class="card-body">
                    <div class=" align-items-top flex-wrap payin-border-bottom col-xl-12">
                      <div class="table-responsive">
                        <table id="datatable-basic" class="table text-nowrap">
                          <thead class="table-primary">
                            <tr>
                              <th scope="col">S.No</th>
                              <th scope="col">Site Title</th>
                              <th scope="col">Txn Count</th>
                              <th scope="col">Txn Volume Amount</th>
                              <th scope="col">Transaction Charge Amount</th>
                              <th scope="col">Transaction Gst Amount</th>
                              <th scope="col">Transaction Total Amount</th>
                              <th scope="col">PG Charge Amount</th>
                              <th scope="col">PG Gst Amount</th>
                              <th scope="col">PG Total Amount</th>
                              <th scope="col">Company Charge Amount</th>
                              <th scope="col">Company Gst Amount</th>
                              <th scope="col">Company Total Amount</th>
                              <th scope="col">Company Commission Amount</th>
                            </tr>
                          </thead>
                          <tbody>
                            {% for each_payout in siteWiseDataList %}
                            <tr>
                              <td>{{each_payout.snoCount}}</td>
                              <td>{{each_payout.siteTitle}}</td>
                              <td>{{each_payout.transactionsCount}}</td>
                              <td>₹{{each_payout.totalVolumeAmount}}</td>
                              <td>₹{{each_payout.transactionChargeAmount }}</td>
                              <td>₹{{ each_payout.transactionGstAmount }}</td>
                              <td>₹{{each_payout.transactionTotalAmount}}</td>
                              <td>₹{{each_payout.aggregatorChargeAmount }}</td>
                              <td>₹{{ each_payout.aggregatorGstAmount }}</td>
                              <td>₹{{each_payout.aggregatorTotalAmount}}</td>
                              <td>₹{{each_payout.companyChargeAmount}}</td>
                              <td>₹{{each_payout.companyGstAmount}}</td>
                              <td>₹{{each_payout.companyTotalAmount}}</td>
                              <td>₹{{each_payout.companyCommissionAmount}}</td>
                            </tr>
                            {% endfor %}
                          </tbody>
                        </table>
                          {% if not siteWiseDataList %}
                                    <h5 class="mt-2" style="text-align: center; font-size: medium;">No Data Found</h5>
                            {% endif %}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--End::row-1 -->

  </div>
</div>
<!-- End::app-content -->
<!-- Update Bank Modal -->
<div class="modal fade right-modal" id="viewTask" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-slide" role="document" style="max-width: 100%;">
    <div class="modal-content">
      <div class="modal-header title-header-background" style="
            justify-content: space-between;">
        <h5 class="modal-title d-flex align-items-center justify-content-between flex-wrap" id="updateTaskLabel"></h5>
        <div style="float: right;">
          <a href="#" id="downloadPgpaymentmodes"><button type="button" class="btn btn-secondary">download</button></a>
        </div>
      </div>
      <div class="col-xl-12">
        <div class="card custom-card">
          <div class="card-body">
            <div class=" align-items-top flex-wrap payin-border-bottom col-xl-12">
              <div class="table-responsive">
                <table id="datatable-basic" class="table text-nowrap">
                  <thead class="table-primary">
                    <tr>
                      <th scope="col">S.No</th>
                      <th scope="col">PaymentMode</th>
                      <th scope="col">Txn Count</th>
                      <th scope="col">Txn Volume Amount</th>
                      <th scope="col">Transaction Charge Amount</th>
                      <th scope="col">Transaction Gst Amount</th>
                      <th scope="col">Transaction Total Amount</th>
                      <th scope="col">PG Charge Amount</th>
                      <th scope="col">PG Gst Amount</th>
                      <th scope="col">PG Total Amount</th>
                      <th scope="col">Company Charge Amount</th>
                      <th scope="col">Company Gst Amount</th>
                      <th scope="col">Company Total Amount</th>
                      <th scope="col">Company Commission Amount</th>
                    </tr>
                  </thead>
                  <tbody id="modalTaskTableBody">
                    <tr>
                      <td scope="col">Loading...</td>
                    </tr>
                  </tbody>
                </table>
                
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
<!-- End Update Bank Modal -->

{% endblock %}