{% extends 'super_admin_templates/base.html' %}
{% set path = "settings" %}
{% set subpath = "fee_settings" %}
{% 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>

<style>
  .btn-edit {
    background-color: transparent;
    border: none;
    color: #007bff;
    cursor: pointer;
  }

  .btn-edit:hover {
    text-decoration: underline;
  }
  .service-permissions .level-1 {  margin:0 !important; padding:0 !important; } 
  .service-permissions .level-1, .service-permissions .level-1 li{ list-style: none;}
  .service-permissions .toggle-container-wrapper{ display: flex; align-items: center; background:#e5e5e5;
  border:1px solid #ccc; padding:7px 10px;}
  .service-permissions .toggle-container {
  cursor: pointer;
  display: flex;
  align-items: center;
  
  flex-grow: 1;
}
.service-permissions .toggle-container-wrapper input{ margin:0 10px 0 0;}
.service-permissions .toggle-container label{ margin-bottom:0; cursor: pointer;}
.service-permissions .arrow-icon {
  margin-right: 10px;
  transition: transform 0.3s;
  margin-left:auto;
}
.service-permissions .arrow-icon i{ font-size: 14px;}
.service-permissions .rotate {
  transform: rotate(90deg);
}

.service-permissions .content-dropdown {
  display: none;
  /*background:#ececec;*/
  padding:10px 30px;
}
.service-permissions .content-dropdown .content-dropdown {
 
  background:#dddddd;
  padding:10px 30px;
}
.service-permissions .content-dropdown .content-dropdown .content-dropdown  {
  
  background:#eee;
  padding:10px 30px;
}

.service-permissions .content-dropdown.active {
  display: block;
}
.service-permissions .content-dropdown.content-group-1{
  background:#ececec;
}
.service-permissions .content-dropdown .toggle-container-wrapper{ border:none; background:none;}
.service-permissions .level-1{}
#inputArea {
      width: 300px;
      height: 100px;
      margin-bottom: 10px;
    }

    #outputArea {
      width: 300px;
      height: 100px;
      border: 1px solid #ccc;
      padding: 10px;
    }
 
.btn-edit {
    background-color: transparent;
    border: none;
    color: #007bff; /* Set the color you want for the button text */
    cursor: pointer;
  }

  .btn-edit:hover {
    text-decoration: underline; /* Underline the text on hover (optional) */
  }
  .horizontal-checkboxes {
    display: inline-block;
    margin-right: 10px; /* Adjust the margin as needed */
    
  }
</style>



 <script>
          function toggleFunction(indexval) {
          var arrow = document.getElementById("arrow-"+indexval);
          var content = document.querySelector(".content-"+indexval);

          arrow.classList.toggle("rotate");
          content.classList.toggle("active");
      }
    </script>

<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>Add User Commission</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active"><a href="{{ url_for('user_commissions.user_commissions_list') }}">User Commissions</a></li>
          </ol>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>
  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-body">
              <center>
                {% if error %}
                  <h2><b><center style="color:RED"> {{error}}</center></b></h2>
                {% endif %}
              </center>

              <form method="POST" action="{{url_for('user_commissions.add_commission')}}" enctype="multipart/form-data">
                <!-- Add your form fields here -->
                <div class="form-group">
                    <label for="commissionName">Commission Name*</label>
                    <input type="text" class="form-control" id="commissionName" name="commissionName" placeholder="Enter Commission Name" required>
                </div>

                <div class="form-group">
                    <label for="createdBy">Users</label>
                    <select class="form-control" name="createdBy" id="createdBy" onchange="getCommissionList(this.value)">
                      <option value="">All</option>
                      {% for each_user in usersList %}
                        <option value="{{each_user.userId}}">{{each_user.fullName}}</option>
                      {% endfor %}
                    </select>                                        
                </div>

                <div class="form-group">
                  <label class="control-label" for="basicName">Commissions</label>
                </div>

                <div class="form-group service-permissions">
                  <ul class="level-1">
                    {% for each_transaction in transactionAPIsList %} 
                   <li> 
                      <div class="toggle-container-wrapper" >
                        <div class="toggle-container" onclick="toggleFunction('group-{{ each_transaction.id }}')">
                          <label class="toggleLabel">{{ each_transaction.apiName }}</label>
                          <div class="arrow-icon" id="arrow-group-{{ each_transaction.id }}"><i class="fas fa-chevron-right"></i></div>
                        </div>
                      </div>
                      <ul class="content-dropdown content-group-{{ each_transaction.id }}">
                        <table id="example4" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                          <tr>
                           <th>S.No</th>
                           <th>Operator Name</th>
                           <th>Charge Type</th>
                           <th>Charge Value</th>
                           <th>Commission Type</th>
                           <th>Commission Value</th>
                         </tr>
                       </thead>
                       <tbody>
                          {% for each_operator in operatorsList %}
                          <tr> 
                            <td>{{loop.index}}</td>
                            <td>
                            <input type="hidden" name="operatorslist[]" value="{{ each_operator.id }}">
                            <input type="hidden" name="transactionAPIId[]" value="{{ each_transaction.id }}">
                          <label class="toggleLabel-1">{{ each_operator.operatorName }}</label>
                          </td>
                          <td>
                            <select name="chargeType[]">
                            <option value="">Select</option>
                            <option value="Fixed">Fixed</option>
                            <option value="Percentage">Percentage</option>
                          </select>
                        </td>
                        <td>
                            <input type="number" name="chargeValue[]" min="0" placeholder="Charge Value" onblur="enforceMinValue(this)" id="chargeValue-{{each_transaction.id}}-{{each_operator.id}}">
                        </td>
                        <td>
                            <select name="commissionType[]">
                            <option value="">Select</option>
                            <option value="Fixed">Fixed</option>
                            <option value="Percentage">Percentage</option>
                          </select>
                        </td>
                        <td>
                            <input type="number" name="commissionValue[]" min="0" placeholder="Commission Value" onblur="enforceMinValue(this)" id="commissionValue-{{each_transaction.id}}-{{each_operator.id}}">
                        </td>
                        </tr>
                          {% endfor %}
                          </tbody>
                          </table>
                      </ul>
                    </li>
                    {% endfor %}
                  </ul>
                </div>

                <!-- Add more form fields as needed -->
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>

                <!-- Add more form fields as needed -->

              </form>
              <!-- /.row -->
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
  </section>
  <!-- /.content -->
</div>
<script>

function enforceMinValue(el) {
  if (el.value != "") {
    if (parseFloat(el.value) < parseFloat(el.min)) {
      el.value = el.min;
    }
  }
}

function enforceMaxValue(el) {
  if (el.value != "") {
    if (parseFloat(el.value) > parseFloat(el.max)) {
      el.value = el.max;
    }
  }
}


function getCommissionList(userId){
      if(userId != "" && userId != "undefined"){
     $.ajax({
        url: "{{ url_for('user_commissions.get_user_commission_details') }}",
        data: { "userId": userId },
        dataType:"json",
        type: "post",
        success: function(resultdata){
          if(resultdata.responseStatus==1){
          $.each(resultdata.commissionDict.commissionList, function( key, value ) {
            if(value.chargeValue==""){
              var chargeValue=0;
            }else{
             var chargeValue=value.chargeValue;
            }
            if(value.commissionValue==""){
              var commissionValue=0;
            }else{
              var commissionValue=value.commissionValue;
            }
              $("#chargeValue-"+value.transactionAPIId+'-'+value.operatorId).attr({"min" : chargeValue });
              $("#commissionValue-"+value.transactionAPIId+'-'+value.operatorId).attr({"min" : commissionValue });
              });
          }else{
            $("input[type='number']").attr({
       "min" : 0
             });
          }
         
        }
    });
      }else{
        $("input[type='number']").attr({
       "min" : 0
    });
      }
    
}

    </script>
{% endblock %}