{% extends 'super_admin_templates/base.html' %}
{% block content %}
<!-- Content Wrapper. Contains page content -->



<!-- 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">Create Commission</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"><a href="{{ url_for('user_managements.manage_users_list') }}">Commissions List</a></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 justify-content-between">
                        <div class="card-title">
                           Utility Master
                        </div>
                    </div>

                    <form method="POST" data-requires-location action="{{url_for('user_commissions.add_commission')}}" enctype="multipart/form-data">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <input type="hidden" id="latitude_add" name="latitude">
                         <input type="hidden" id="longitude_add" name="longitude">
                <!-- 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>
                </div>
            </div>
        </div>
        <!--End::row-1 -->

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

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("form[data-requires-location]").forEach(function (form) {
        form.addEventListener("submit", function (event) {
            const latInput = form.querySelector("input[name='latitude']");
            const lngInput = form.querySelector("input[name='longitude']");

            if (latInput?.value && lngInput?.value) {
                return;
            }

            event.preventDefault();

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function (position) {
                        latInput.value = position.coords.latitude;
                        lngInput.value = position.coords.longitude;
                        form.submit();
                    },
                    function () {
                        alert("Location access is required to proceed. Please enable location services.");
                    },
                    {
                        enableHighAccuracy: true,
                        timeout: 10000,
                        maximumAge: 0
                    }
                );
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        });
    });
});
</script>

{% endblock %}