{% 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">Settlement</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') }}">Commission TDS Setup</a></li>
                    </ol>
                </nav>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header">
                        <div class="card-title">
                            Commission TDS Setup
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b>
                                    <center style="color:RED">{{ error }}</center>
                                </b></h2>
                            {% endif %}
                        </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 %}
                        <div class="table-responsive">
                            <div id="datatable-basic_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                                <form method="POST"
                                    action="{{url_for('commission_tds_setup.commission_tds_setup_charges')}}" id="add_commission_tds_setup" name="add_commission_tds_setup"
                                    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">
                                    <div class="form-group">
                                        <div class="col-md-5">
                                        <label for="tdsLimitAmount">TDS Limit Amount*</label>
                                        <input type="text" class="form-control" id="tdsLimitAmount" name="tdsLimitAmount"  pattern="^\d+(\.\d+)?$" title="TDS Limit Amount contain only numeric characters" value="{{commissionSetupSetupDict.tdsLimitAmount}}">
                                        <span id = "tdsLimitAmount_error" class = "error"> </span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-md-5">
                                        <label for="tdsChargePer">TDS Charge Percentage*</label>
                                        <input type="text" class="form-control" id="tdsChargePer" name="tdsChargePer"  pattern="^\d+(\.\d+)?$" title="TDS Charge Percentage contain only numeric characters" value="{{commissionSetupSetupDict.tdsChargePer}}">
                                        <span id = "tdsChargePer_error" class = "error"> </span>

                                    </div>
                                    </div>

                                        <div class="modal-footer justify-content-between">
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                        </div>

                                </form>
                            </div>
                           
                            </table>

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

    </div>
</div>


<script type="text/javascript">

    $(document).ready(function () {
        $('#add_commission_tds_setup').validate({
    rules: {
        tdsLimitAmount: {
            required: true,
            pattern: /^\d+(\.\d+)?$/, 
        },
        tdsChargePer: {
            required: true,
            pattern: /^\d+(\.\d+)?$/, 
        }
    },
    messages: {
        tdsLimitAmount: {
            required: 'Tds Limit Amount is required',
            pattern: "Tds Limit Amount must contain only numbers and a decimal point (optional)"
        },
        tdsChargePer: {
            required: 'Tds Charge Percentage is required',
            pattern: "Tds Charge Percentage must contain only numbers and a decimal point (optional)"
        }
    },


    submitHandler: function (form, event) {
        $('.form_submit').prop('disabled', true);
        $('#newLoadingModel').show();
        event.preventDefault();
        getLocationAndProceed(
            function (lat, lng) {
               
                $(form).find('input[name="latitude"]').val(lat);
                $(form).find('input[name="longitude"]').val(lng);
                $.ajax({
                    url: form.action,
                    type: form.method,
                    data: $(form).serialize(),
                    xhrFields: {
                                        withCredentials: true   // THIS ensures cookies/session are sent
                                    },
                    success: function (response) {
                        console.log("in submit handler", response);

                        if (response.responseStatus == 1 || response.responseStatus == 4) {
                            form.reset();
                            location.reload();
                        } else if (response.responseStatus == 0) {
                            $('.form_submit').prop('disabled', false);
                            $('#newLoadingModel').hide();
                            $.each(response.result, function (key, value) {
                                $('#' + key + "_error").text(value)
                            });
                            return false;
                        } else if (response.responseStatus == 2) {
                            $('.form_submit').prop('disabled', false);
                            $('#newLoadingModel').hide();
                            $('#errorMessage').text(response.result);
                            return false;
                        } else {
                            location.reload();
                        }
                    },
                                    error: function (xhr) {
                                        // You can also reload page after error (e.g. CSRF token mismatch)
                                        location.reload();
                                    }

                });
            },
            function () {
                        $('.form_submit').prop('disabled', false);
                        $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }

        });
     })
</script>



{% endblock %}