{% 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">
            <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('patterns_configuarations.get_on_demand_settlement_charges_list') }}">On
                                Demand Settlement Charges</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">
                        <div class="card-title">
                            Create New Charge
                        </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(with_categories=true) %}
                        {% if messages %}
                        {% for category, message in messages %}
                        {% if category == "success" %}
                        <h2><b>
                                <center style="color:green">{{ message }}</center>
                            </b></h2>

                        {% else %}
                        <h2><b>
                                <center style="color:red">{{ message }}</center>
                            </b></h2>
                        {% endif %}
                        {% endfor %}
                        {% endif %}
                        {% endwith %}
                        <form method="POST"
                            action="{{url_for('patterns_configuarations.update_on_demand_settlement_charge',chargeId=chargeDict.id)}}"
                            enctype="multipart/form-data" name="update_charge" id="update_charge">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <input type="hidden" id="latitude_update" name="latitude">
                            <input type="hidden" id="longitude_update" name="longitude">
                                        <div class="form-group">
                                <label>Charge Name*</label>
                                <input type="text" class="form-control" name="chargeName"
                                    pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" value={{chargeDict.chargeName}}
                                    title="Charge Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/."
                                    placeholder="Enter charge name" required>
                                <span id="chargeName_edit_error" class="error"></span>
                            </div>

                            <div class="form-group">
                                <label for="paymentGatewayIdsList">Payment Gateway*</label>
                                <select class="form-control chosen-select" id="paymentGatewayIdsList"
                                    name="paymentGatewayIdsList" required multiple>
                                    <!-- <option value="">Select Api</option> -->
                                    {% for each_api in transactionAPIsList %}
                                    <option value="{{ each_api.id }}" {% if each_api.id in
                                        chargeDict.checkTransactionAPIIds %}selected{% endif %}> {{ each_api.apiName }}
                                    </option>
                                    {% endfor %}
                                </select>
                                <span id="paymentGatewayIdsList_edit_error" class="error"></span>
                            </div>

                            <div class="form-group">
                                <label for="holidayCalculation">Holiday Calculation*</label>
                                <select class="form-select" name="holidayCalculation" id="holidayCalculation" required>
                                    <option value="True" {% if chargeDict.holidayCalculation==True %}selected{% endif
                                        %}>True</option>
                                    <option value="False" {% if chargeDict.holidayCalculation==False %}selected{% endif
                                        %}>False</option>
                                </select>
                                <span id="holidayCalculation_edit_error" class="error"></span>
                            </div>

                            <div class="form-group">
                                <label>Max Days*</label>
                                <input type="number" class="form-control" name="maxDays" value={{chargeDict.maxDays}} minlength="1" maxlength="4"
                                    min="0"
                                    title="Max Days must be only in numeric" placeholder="Enter max days" required>
                                <span id="maxDays_edit_error" class="error"></span>
                            </div>

                            <div class="form-group">
                                <label for="priceType">Price Type*</label>
                                <select class="form-select" name="priceType" id="priceType" required>
                                    <option value="FIXED" {% if chargeDict.priceType=="FIXED" %}selected{% endif %}>
                                        FIXED</option>
                                    <option value="RANGE" {% if chargeDict.priceType=="RANGE" %}selected{% endif %}>
                                        RANGE</option>
                                </select>
                                <span id="priceType_edit_error" class="error"></span>
                            </div>

                            <div class="form-group">
                                <label for="chargeType">Charge Type*</label>
                                <select class="form-select" name="chargeType" id="chargeType" required>
                                    <option value="FLAT" {% if chargeDict.chargeType=="FLAT" %}selected{% endif %}>FLAT
                                    </option>
                                    <option value="PERCENTAGE" {% if chargeDict.chargeType=="PERCENTAGE" %}selected{%
                                        endif %}>PERCENTAGE</option>
                                </select>
                                <span id="chargeType_edit_error" class="error"></span>
                            </div>
                            <div class="form-group">
                                <label>Charge Value*</label>
                                <input type="number" class="form-control" name="chargeValue" minlength="1" maxlength="6"
                                    min="0"
                                    value={{chargeDict.chargeValue}} title="Charge Value must be only in numeric"
                                    placeholder="Enter charge value" required>
                                <span id="chargeValue_edit_error" class="error"></span>
                            </div>

                            <div class="form-group">
                                <label for="gstInclude">GST Include*</label>
                                <select class="form-select" name="gstInclude" id="gstInclude" required>
                                    <option value="True" {% if chargeDict.gstInclude=="True" %}selected{% endif %}>Yes
                                    </option>
                                    <option value="False" {% if chargeDict.gstInclude=="False" %}selected{% endif %}>No
                                    </option>
                                </select>
                                <span id="gstInclude_edit_error" class="error"></span>
                            </div>

                            <div class="form-group">
                                <label>Gst Value*</label>
                                <input type="number" class="form-control" name="gstValue" value={{chargeDict.gstValue}} minlength="1" maxlength="6"
                                    min="0"
                                    title="GST Value must be only in numeric" placeholder="Enter gst value" required>
                                <span id="gstValue_edit_error" class="error"></span>
                            </div>

                            <div class="form-group">
                                <label for="tdsInclude">TDS Include*</label>
                                <select class="form-select" name="tdsInclude" id="tdsInclude" required>
                                    <option value="True" {% if chargeDict.tdsInclude=="True" %}selected{% endif %}>Yes
                                    </option>
                                    <option value="False" {% if chargeDict.tdsInclude=="False" %}selected{% endif %}>No
                                    </option>
                                </select>
                                <span id="tdsInclude_edit_error" class="error"></span>
                            </div>

                            <div class="form-group">
                                <label>TDS Value*</label>
                                <input type="number" class="form-control" name="tdsValue" value={{chargeDict.tdsValue}} minlength="1" maxlength="6"
                                    min="0"
                                    title="GST Value must be only in numeric" placeholder="Enter tds value" required>
                                <span id="tdsValue_edit_error" class="error"></span>
                            </div>

                            <div>
                                <button type="submit" class="btn btn-primary form_submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->

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


<script type="text/javascript">

    $(document).ready(function () {
        $('#update_charge').validate({
            errorElement: 'label',
            errorClass: 'error',
            ignore: ":hidden",
            ignore: [],
            errorPlacement: function (error, element) {
                if (element.hasClass('chosen-select')) {
                    error.insertAfter(element.siblings('.chosen-container'));
                } else {
                    error.insertAfter(element);
                }
            },
            rules: {
                chargeName: {
                    required: true,
                    minlength: 3,
                    maxlength: 75,
                    pattern: /^[a-zA-Z0-9\s@#$()+_\-/.]*$/
                },
                paymentGatewayIdsList: {
                    required: true
                },
                holidayCalculation: {
                    required: true,
                },
                maxDays: {
                    required: true,
                    minlength: 1,
                    maxlength: 4
                },
                priceType: {
                    required: true,
                },
                chargeType: {
                    required: true,
                },
                chargeValue: {
                    required: true,
                    minlength: 1,
                    maxlength: 6
                },
                gstInclude: {
                    required: true,
                },
                gstValue: {
                    required: true,
                    minlength: 1,
                    maxlength: 6
                },
                tdsInclude: {
                    required: true,
                },
                tdsValue: {
                    required: true,
                    minlength: 1,
                    maxlength: 6
                },

            },
            messages: {
                chargeName: {
                    required: 'Charge Name is required',
                    pattern: "Charge Name contains Only alphanumeric and space and special characters @#$()+_-/.",
                    minlength: 'Charge Name is must be greaterthan or equals to 3 charecters',
                    maxlength: 'Charge Name is must be lessthan or equals to 75 charecters',
                },
                paymentGatewayIdsList: {
                    required: 'paymentGatewayIdsList is required',
                },
                holidayCalculation: {
                    required: 'Holiday Calculation is required',
                },
                maxDays: {
                    required: 'Max Days is required',
                    minlength: "Max Days is must be greaterthan or equals to 1 Digits",
                    maxlength: "Max Days is must be lessthan or equals to 4 Digits"
                },
                priceType: {
                    required: 'Price Type is required',
                },
                chargeType: {
                    required: 'Charge Type is required',
                },
                chargeValue: {
                    required: 'chargeValue is required',
                    minlength: "chargeValue is must be greaterthan or equals to 1 Digits",
                    maxlength: "chargeValue is must be lessthan or equals to 6 Digits"
                },
                gstInclude: {
                    required: 'gstInclude is required',
                },
                gstValue: {
                    required: 'gstValue is required',
                    minlength: "gstValue is must be greaterthan or equals to 1 Digits",
                    maxlength: "gstValue is must be lessthan or equals to 6 Digits"
                },
                tdsInclude: {
                    required: 'tdsInclude is required',
                },
                tdsValue: {
                    required: 'tdsValue is required',
                    minlength: "tdsValue is must be greaterthan or equals to 1 Digits",
                    maxlength: "tdsValue is must be lessthan or equals to 6 Digits"
                },
            },
            submitHandler: function (form, event) {
                $('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
                event.preventDefault();
                getLocationAndProceed(
                    (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(),
                            success: function (response) {
                                console.log("in submit hndler", response)
                                if (response.responseStatus == 1) {
                                    form.reset();
                                    window.location.href = "/api/super_admin/get_on_demand_settlement_charges_list"; // Replace with your actual route
                                } else if (response.responseStatus == 4) {
                                    form.reset();
                                    location.reload();
                                } else if (response.responseStatus == 0) {
                                    $('.form_submit').prop('disabled', false);
        				            $('#newLoadingModel').hide();
                                    console.log("yesususuerror")
                                    $.each(response.result, function (key, value) {
                                        $('#' + key + "_edit_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();
                                }

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

{% endblock %}