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

    select option:first-child {
        color: #000;
        /* grey for placeholders */
    }

    select:invalid {
        color: #000;
        /* force placeholder to stay grey on load */
    }

    select:valid {
        color: #000;
        /* normal black once a real value is chosen */
    }

    select option {
        color: #000;
        /* fallback color for all other options */
    }

    #settlementDateTime option:first-child {
        color: #000;
        /* grey for placeholders */
    }

    #settlementDateTime:invalid {
        color: #000;
        /* force placeholder to stay grey on load */
    }

    #settlementDateTime:valid {
        color: #000;
        /* normal black once a real value is chosen */
    }

    #settlementDateTime option {
        color: #000;
        /* fallback color for all other options */
    }
    #pg_file {
        color: #000;
        /* fallback color for all other options */
    }

    .centered {
        text-align: center;
    }
</style>

<script>
    function openUpdateModal(pg) {
        // Set the form action URL using the ID
        const updatePg = "{{ url_for('pg_settlements.update_pg_settlement', site_id='__ID__') }}";
        const formAction = updatePg.replace('__ID__', pg.id);
        document.getElementById('update_pg_settlement').action = formAction;
        resetFormDataNew('update_pg_settlement');


        // Populate the form fields
        // document.getElementById('edit_transactionAPIId').value = pg.edit_transactionAPIId || '';
        document.getElementById('edit_settlementAmount').value = pg.settlementAmount || '';
        document.getElementById('edit_additionalChargeType').value = pg.additionalChargeType || '';
        document.getElementById('edit_additionalChargeValue').value = pg.additionalChargeValue || '';
        document.getElementById('edit_gstChargeType').value = pg.gstChargeType || '';
        document.getElementById('edit_gstChargeValue').value = pg.gstChargeValue || '';

        function formatDateToLocal(dateString) {
            if (!dateString) return '';

            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');

            return `${year}-${month}-${day}T${hours}:${minutes}`;
        }

        // Example usage
        const formattedDate = formatDateToLocal(pg.settlementDateTime);
        document.getElementById('edit_settlementDateTime').value = formattedDate;
        console.log("Formatted date:", formattedDate);



        // document.getElementById('edit_settlementDateTime').value = pg.settlementDateTime || '';
        // console.log("======date", pg.settlementDateTime)

        const selectElement = document.getElementById('edit_transactionAPIId');
        const options = selectElement.options;
        console.log("options:", options);

        for (let option of options) {
            console.log(pg.transactionAPIId, option.value)
            console.log(typeof pg.transactionAPIId, typeof pg.transactionAPIId)
            if (pg.transactionAPIId == option.value) {
                option.selected = true;
            } else {
                option.selected = false;
            }
        }

        // Populate and refresh chosen dropdown
        // $('#edit_paymentGatewayId').html(htmldata);
        $(selectElement).trigger('chosen:updated');

        // Show Bootstrap modal
        const modal = new bootstrap.Modal(document.getElementById('updateTask'));
        modal.show();
    }
</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">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">PG Settlement List</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">PG Settlement</div>
                        <div class="prism-toggle">



                            {% if 'add' in session.get('pgSettlementsPermission', []) %}
                            <button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3"
                                data-bs-toggle="modal" data-bs-target="#fileUploadModal" onClick="resetFormDataNew('add_file')">
                                <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Upload
                            </button>
                            <button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3"
                                data-bs-toggle="modal" data-bs-target="#addSettlementModal"
                                onClick="resetFormDataNew('add_pg_settlements')">
                                <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New PG Settlement
                            </button>
                            {% endif %}
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b>
                                    <center style="color:RED">{{ error }}</center>
                                </b></h2>
                            {% endif %}
                        </center>

                        <div class="row">
                            <div class="col-xl-12">
                                <!-- <form method="POST" action="{{ url_for('pg_settlements.get_pg_settlements')}}"
                                    class="row gy-2 gx-3 align-items-center mb-4">

                                    <div class="col-auto">
                                        <input type="text" class="form-control" value="{{search_element}}"
                                            name="search_element" id="autoSizingInput" placeholder="Search...">
                                    </div>

                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">Search</button>
                                    </div>

                                </form> -->
                            </div>
                        </div>

                        <div class="mt-3"></div>
                        <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">Transaction API </th>
                                        <th scope="col">Settlement Amount</th>
                                        <th scope="col">Additional Charge Type</th>
                                        <th scope="col">Additional Charge Value</th>
                                        <th scope="col">Additional Charge Amount</th>
                                        <th scope="col">GST Charge Type</th>
                                        <th scope="col">GST Charge Value</th>
                                        <th scope="col">GST Charge Amount</th>
                                        <th scope="col">Settlement Date Time</th>
                                        <th scope="col">Created On</th>
                                        {% if 'edit' in session.get('pgSettlementsPermission', []) %}
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                        {% endif %}
                                    </tr>
                                </thead>
                                <tbody>
                                    {% if pgSettlementsList %}
                                    {% for each_pg_settlement in pgSettlementsList %}
                                    <tr>
                                        <td>{{ snoCount + loop.index }}</td>

                                        {% if each_pg_settlement.transactionAPIId.apiName %}
                                        <td>{{ each_pg_settlement.transactionAPIId.apiName }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}

                                        <td>{{ each_pg_settlement.settlementAmount }}</td>

                                        {% if each_pg_settlement.additionalChargeType %}
                                        <td>{{ each_pg_settlement.additionalChargeType }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}

                                        <td>{{ each_pg_settlement.additionalChargeValue }}</td>
                                        <td>{{ each_pg_settlement.additionalChargeAmount }}</td>

                                        {% if each_pg_settlement.gstChargeType %}
                                        <td>{{ each_pg_settlement.gstChargeType }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}


                                        <td>{{ each_pg_settlement.gstChargeValue }}</td>
                                        <td>{{ each_pg_settlement.gstChargeAmount }}</td>

                                        {% if each_pg_settlement.settlementDateTime %}
                                        <td>{{ each_pg_settlement.settlementDateTime.strftime("%Y-%m-%d %H:%M:%S") }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}


                                        {% if each_pg_settlement.createdOn %}
                                        <td>{{ each_pg_settlement.createdOn.strftime("%Y-%m-%d %H:%M:%S") }}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}


                                        {% if 'edit' in session.get('pgSettlementsPermission', []) %}
                                        <td>

                                            {% if each_pg_settlement.status == 1 %}
                                            <a class="btn btn-sm btn-success"
                                                href="{{ url_for('pg_settlements.update_pg_settlement_status', site_id=each_pg_settlement.id,PgSettlementPage=PgSettlementPage,search_element=search_element) }}" data-requires-location>Active</a>
                                            {% else %}
                                            <a class="btn btn-sm btn-warning"
                                                href="{{ url_for('pg_settlements.update_pg_settlement_status', site_id=each_pg_settlement.id,PgSettlementPage=PgSettlementPage,search_element=search_element) }}" data-requires-location>Inactive</a>
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        <td>
                                            {% if 'edit' in session.get('pgSettlementsPermission', []) %}

                                            <a href="javascript:void(0);" onclick='openUpdateModal({
                                                "id": "{{ each_pg_settlement.id }}",
                                                "transactionAPIId": "{{ each_pg_settlement.transactionAPIId.id }}",
                                                "settlementAmount": {{ each_pg_settlement.settlementAmount | tojson }},
                                                "additionalChargeType": {{ each_pg_settlement.additionalChargeType | tojson }},
                                                "additionalChargeValue": {{ each_pg_settlement.additionalChargeValue | tojson }},
                                                "gstChargeType": {{ each_pg_settlement.gstChargeType | tojson }},
                                                "gstChargeValue": {{ each_pg_settlement.gstChargeValue | tojson }},
                                                "settlementDateTime": {{ each_pg_settlement.settlementDateTime | tojson }},
                                            })' class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                                                <i class="ri-edit-line"></i>
                                            </a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    {% else %}
                                    <tr>
                                        <td colspan="12" style="text-align: center;">No Data Found</td>
                                    </tr>
                                    {% endif %}
                                </tbody>
                                {% 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 %}

                            </table>

                            <div class="col-sm-12 col-md-12 mt-3">
                                <nav aria-label="Page navigation" class="pagination-style-1">
                                    <ul class="pagination mb-0">
                                        {% if pagination %}
                                        <div class="pagination">
                                            {{ pagination.links }}
                                        </div>
                                        {% endif %}
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End::row-1 -->

</div>
</div>

<!-- End::app-content -->
<div class="modal fade" id="fileUploadModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered md-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Upload File</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ url_for('pg_settlements.add_pg_settlements') }}"
                enctype="multipart/form-data" id="add_file">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" id="latitude_addfile" name="latitude">
                <input type="hidden" id="longitude_addfile" name="longitude">
             
                <div class="modal-body">
                    <div class="form-group">
                        <label for="pgSettlementFile">Settlement Amount*</label>
                        <input type="file" class="form-control" id="pgSettlementFile" name="pgSettlementFile" id = "pg_file"
                            title="please select file of formate .xls,.xlsx,.csv"
                            accept=".xls,.xlsx,.csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv"
                            required>
                        <span id="pgSettlementFile_error" class="error"></span>
                    </div>
                    <!-- {% for error in fileForm.pgSettlementFile.errors %}
                    <span class="text-danger" class="error">{{ error }}</span>
                    {% endfor %} -->
                </div>
                <div class="modal-footer">
                    <span id="errorMessage" class="error"></span>
                    <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary form_submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Create New Site Modal -->
<div class="modal fade" id="addSettlementModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered md-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New PG Settlement</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ url_for('pg_settlements.add_pg_settlements') }}"
                enctype="multipart/form-data" id="add_pg_settlements">
                <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="modal-body">
                    <div class="col-auto">
                        <label for="transactionAPIId">Transaction Api*</label>
                        <select class="form-control chosen-select" name="transactionAPIId" id="transactionAPIId"
                            required>
                            <option value="">Select PG</option>
                            {% for each_api in transactionApisList %}
                            <option value="{{each_api.id}}">{{each_api.apiName}}</option>
                            {% endfor %}
                        </select>
                        <span id="transactionAPIId_error" class="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="settlementAmount">Settlement Amount*</label>
                        <input type="text" class="form-control" id="settlementAmount" name="settlementAmount"
                            minlength="1" maxlength="10" pattern="^\d+(\.\d+)?$"
                            title="Settlement Amount contain only numeric characters"
                            placeholder="Enter settlement amount" required>
                        <span id="settlementAmount_error" class="error"></span>
                    </div>
                    <div class="col-auto">
                        <label for="additionalChargeType">Additional Charge Type*</label>
                        <select class="form-select" id="additionalChargeType" name="additionalChargeType">
                            <option value="Amount" {% if additionalChargeType=="Amount" %} selected {% endif %}>Amount
                            </option>
                            <option value="Percentage" {% if additionalChargeType=="Percentage" %} selected {% endif %}>
                                Percentage</option>
                        </select>
                        <span id="additionalChargeType_error" class="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="additionalChargeValue">Additional Charge Value*</label>
                        <input type="text" class="form-control" id="additionalChargeValue" name="additionalChargeValue"
                            minlength="1" maxlength="10" pattern="^\d+(\.\d+)?$"
                            title="Additional Charge Value contain only numeric characters"
                            placeholder="Enter additional charge value" required>
                        <span id="additionalChargeValue_error" class="error"></span>
                    </div>
                    <div class="col-auto">
                        <label for="gstChargeType">GST Charge Type*</label>
                        <select class="form-select" id="gstChargeType" name="gstChargeType">
                            <option value="Amount" {% if gstChargeType=="Amount" %} selected {% endif %}>Amount</option>
                            <option value="Percentage" {% if gstChargeType=="Percentage" %} selected {% endif %}>
                                Percentage</option>
                        </select>
                        <span id="gstChargeType_error" class="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="gstChargeValue">GST Value*</label>
                        <input type="text" class="form-control" id="gstChargeValue" pattern="^\d+(\.\d+)?$"
                            minlength="1" maxlength="10" title="Invalid format!" name="gstChargeValue"
                            placeholder="Enter gst value" required>
                        <span id="gstChargeValue_error" class="error"></span>
                    </div>
                    <div class="mb-3">
                        <label for="settlementDateTime" class="form-label">Settlement Date*</label>
                        <input type="datetime-local" class="form-control" id="settlementDateTime"
                            name="settlementDateTime" required>
                        <span id="settlementDateTime_error" class="error"></span>
                    </div>

                </div>
                <div class="modal-footer">
                    <span id="errorMessage" class="error"></span>
                    <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary form_submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- update model -->
<div class="modal fade" id="updateTask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered md-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Update PG Settlement</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" enctype="multipart/form-data" id="update_pg_settlement">
                <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="modal-body">
                    <!-- Banner Name -->
                    <div class="col-auto">
                        <label for="transactionAPIId">Transaction Api*</label>
                        <select class="form-control chosen-select" name="transactionAPIId" id="edit_transactionAPIId"
                            required>
                            {% for each_api in transactionApisList %}
                            <option value="{{each_api.id}}">{{each_api.apiName}}</option>
                            {% endfor %}
                        </select>
                        <span id="transactionAPIId_edit_error" class="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="settlementAmount">Settlement Amount*</label>
                        <input type="text" class="form-control" name="settlementAmount" id="edit_settlementAmount"
                            minlength="1" maxlength="10" pattern="^\d+(\.\d+)?$"
                            title="Settlement Amount contain only numeric characters" required>
                        <span id="settlementAmount_edit_error" class="error"></span>
                    </div>
                    <div class="col-auto">
                        <label for="additionalChargeType">Additional Charge Type*</label>
                        <select class="form-select" id="edit_additionalChargeType" name="additionalChargeType">
                            <option value="Amount" {% if additionalChargeType=="Amount" %} selected {% endif %}>Amount
                            </option>
                            <option value="Percentage" {% if additionalChargeType=="Percentage" %} selected {% endif %}>
                                Percentage</option>
                        </select>
                        <span id="additionalChargeType_edit_error" class="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="additionalChargeValue">Additional Charge Value*</label>
                        <input type="text" class="form-control" name="additionalChargeValue"
                            id="edit_additionalChargeValue" minlength="1" maxlength="10" pattern="^\d+(\.\d+)?$"
                            title="Additional Charge Value contain only numeric characters"
                            placeholder="Enter Additional Charge Value" required>
                        <span id="additionalChargeValue_edit_error" class="error"></span>
                    </div>
                    <div class="col-auto">
                        <label for="gstChargeType">GST Charge Type*</label>
                        <select class="form-select" id="edit_gstChargeType" name="gstChargeType">
                            <option value="Amount" {% if gstChargeType=="Amount" %} selected {% endif %}>Amount</option>
                            <option value="Percentage" {% if gstChargeType=="Percentage" %} selected {% endif %}>
                                Percentage</option>
                        </select>
                        <span id="gstChargeType_edit_error" class="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="gstChargeValue">GST Value*</label>
                        <input type="text" class="form-control" name="gstChargeValue" id=edit_gstChargeValue
                            pattern="^\d+(\.\d+)?$" minlength="1" maxlength="10" title="Invalid format!"
                            placeholder="Enter gst value" required>
                        <span id="gstChargeValue_edit_error" class="error"></span>
                    </div>
                    <div class="mb-3">
                        <label for="settlementDateTime" class="form-label">Settlement Date Time*</label>
                        <input type="datetime-local" class="form-control" name="settlementDateTime"
                            id="edit_settlementDateTime" required>
                        <span id="settlementDateTime_edit_error" class="error"></span>
                    </div>

                </div>
                <div class="modal-footer">
                    <span id="edit_errorMessage" class="error"></span>
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary form_submit">Update Settlement</button>
                </div>
            </form>
        </div>
    </div>
</div>



<script type="text/javascript">

    $(document).ready(function () {

        $('#add_pg_settlements').validate({
            rules: {
                transactionAPIId: {
                    required: true,
                },
                settlementAmount: {
                    required: true,
                    minlength: 1,
                    maxlength: 10,
                },
                additionalChargeType: {
                    required: true,
                },
                additionalChargeValue: {
                    required: true,
                    minlength: 1,
                    maxlength: 10,
                },
                gstChargeType: {
                    required: true,
                },
                gstChargeValue: {
                    required: true,
                    minlength: 1,
                    maxlength: 10,
                },
                settlementDateTime: {
                    required: true,
                },
            },
            messages: {
                transactionAPIId: {
                    required: 'transactionAPIId is required',

                },
                settlementAmount: {
                    required: 'settlementAmount is required',
                    minlength: 'Settlement Amount must contains between 1 and 10 numeric characters ',
                    maxlength: 'Settlement Amount must contains between 1 and 10 numeric characters',
                },
                additionalChargeType: {
                    required: 'additionalChargeType is required',
                },
                additionalChargeValue: {
                    required: 'additionalChargeValue is required',
                    minlength: 'additionalChargeValue must contains between 1 and 10 numeric characters',
                    maxlength: 'additionalChargeValue must contains between 1 and 10 numeric characters',
                },
                gstChargeType: {
                    required: 'gstChargeType is required',
                },
                gstChargeValue: {
                    required: 'gstChargeValue is required',
                    minlength: 'gstChargeValue must contains between 1 and 10 numeric characters ',
                    maxlength: 'gstChargeValue must contains between 1 and 10 numeric characters',
                },
                settlementDateTime: {
                    required: 'settlementDateTime is required',

                },
            },
            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 hndler", response)
                                if (response.responseStatus == 1 || response.responseStatus == 4) {
                                    form.reset();
                                    location.reload();

                                } else if (response.responseStatus == 0) {
                                    $('.form_submit').prop('disabled', false);
        				            $('#newLoadingModel').hide();
                                    console.log(response)
                                    $.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.");
                            }
                        );
                    }
                });
            });


    $(document).ready(function () {

        $('#update_pg_settlement').validate({
            rules: {
                transactionAPIId: {
                    required: true,
                },
                settlementAmount: {
                    required: true,
                    minlength: 1,
                    maxlength: 10,
                },
                additionalChargeType: {
                    required: true,
                },
                additionalChargeValue: {
                    required: true,
                    minlength: 1,
                    maxlength: 10,
                },
                gstChargeType: {
                    required: true,
                },
                gstChargeValue: {
                    required: true,
                    minlength: 1,
                    maxlength: 10,
                },
                settlementDateTime: {
                    required: true,
                },
            },
            messages: {
                transactionAPIId: {
                    required: 'transactionAPIId is required',

                },
                settlementAmount: {
                    required: 'settlementAmount is required',
                    minlength: 'Settlement Amount must contains between 1 and 10 numeric characters ',
                    maxlength: 'Settlement Amount must contains between 1 and 10 numeric characters',
                },
                additionalChargeType: {
                    required: 'additionalChargeType is required',
                },
                additionalChargeValue: {
                    required: 'additionalChargeValue is required',
                    minlength: 'additionalChargeValue must contains between 1 and 10 numeric characters',
                    maxlength: 'additionalChargeValue must contains between 1 and 10 numeric characters',
                },
                gstChargeType: {
                    required: 'gstChargeType is required',
                },
                gstChargeValue: {
                    required: 'gstChargeValue is required',
                    minlength: 'gstChargeValue must contains between 1 and 10 numeric characters ',
                    maxlength: 'gstChargeValue must contains between 1 and 10 numeric characters',
                },
                settlementDateTime: {
                    required: 'settlementDateTime is required',

                },
            },
            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 hndler", response)
                                if (response.responseStatus == 1 || response.responseStatus == 4) {
                                    form.reset();
                                    location.reload();

                                } else if (response.responseStatus == 0) {
                                    $('.form_submit').prop('disabled', false);
        				            $('#newLoadingModel').hide();
                                    console.log(response)
                                    $.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();
                                    $('#edit_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>

<script>
    $(document).ready(function () {


        $('#add_file').validate({
            rules: {
                pgSettlementFile: {
                    required: true,
                },

            },
            messages: {
                pgSettlementFile: {
                    required: 'Please upload a file',
                },
            },

            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);
                        let formData = new FormData(form);
                        console.log("=====", formData)
                        $.ajax({
                            url: form.action,
                            type: form.method,
                            data: formData,
                            processData: false,  
                            contentType: false,  
                            xhrFields: {
                                        withCredentials: true   // THIS ensures cookies/session are sent
                                    },
                            success: function (response) {
                                console.log("in submit hndler", response)
                                if (response.responseStatus == 1 || response.responseStatus == 4) {
                                    form.reset();
                                    location.reload();

                                } else if (response.responseStatus == 0) {
                                    $('.form_submit').prop('disabled', false);
        				            $('#newLoadingModel').hide();
                                    console.log(response)
                                    $.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 %}