{% extends 'super_admin_templates/base.html' %}
{% set path = "api_management" %}
{% set subpath = "api_list" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->
 <style>
    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 */
    }
    .centered {
        text-align: center;
    }
 </style>
<script>
function openaddModal(each_modal) {
    $('#verifyaddDiv').hide();
    $('#updateaddGenerateBtn').text('Generate OTP').prop('disabled', false).show();

}
</script>
<script>
    function addInputField(containerId, key="", value="") {
        var container = document.getElementById(containerId);
        var newDiv = document.createElement('div');
        newDiv.className = 'input-group mb-2';

        var newInputKey = document.createElement('input');
        newInputKey.type = 'text';
        newInputKey.name = 'inputKeyField[]';
        newInputKey.placeholder = 'Enter Param Key';
        newInputKey.className = 'form-control';
        newInputKey.value = key;

        var newInputValue = document.createElement('input');
        newInputValue.type = 'text';
        newInputValue.name = 'inputValueField[]';
        newInputValue.placeholder = 'Enter Param Value';
        newInputValue.className = 'form-control';
        newInputValue.value = value;

        var removeButton = document.createElement('button');
        removeButton.type = 'button';
        removeButton.className = 'btn btn-danger';
        removeButton.innerText = 'Remove';
        removeButton.onclick = function () {
            container.removeChild(newDiv);
        };
        newDiv.appendChild(newInputKey);
        newDiv.appendChild(newInputValue);
        newDiv.appendChild(removeButton);
        container.appendChild(newDiv);
    }

    function removeInputField(containerId, removeAll=false) {
        var container = document.getElementById(containerId);
        if (removeAll){
            var container = document.getElementById(containerId);
            while (container.firstChild) {
                container.removeChild(container.firstChild);
            }
        }
        else{
            if (container.children.length > 1) {
                container.removeChild(container.lastChild);
            }
        }
    }
</script>



<script>
     const $fields = {
            payout: ["#virtualCodeDiv", "#lastSixDigitsDiv", "#ifscCodeDiv", "#preAuthorizationDiv", "#virtualCodeEditDiv", "#lastSixDigitsEditDiv", "#ifscCodeEditDiv", "#preAuthorizationEditDiv"],
            paymentGateway: ["#autoSettlementDiv", "#cardBinEnableDiv", "#priceTypeDiv", "#isSeamlessDiv", "#settlementLimitDiv", "#autoSettlementEditDiv", "#cardBinEnableEditDiv", "#priceTypeEditDiv", "#isSeamlessEditDiv", "#settlementLimitEditDiv" ]
        };

        const $Editfields ={
            payout: ["#virtualCodeEditDiv", "#lastSixDigitsEditDiv", "#ifscCodeEditDiv", "#preAuthorizationEditDiv"],
            paymentGateway: ["#autoSettlementEditDiv", "#cardBinEnableEditDiv", "#priceTypeEditDiv", "#isSeamlessEditDiv", "#settlementLimitEditDiv" ]
        };

        function resetRequired(fields, required) {
            fields.forEach(id => {
                if (required) {
                    $(id.replace("Div", "")).attr("required", true);
                } else {
                    $(id.replace("Div", "")).removeAttr("required");
                }
            });
        }

        function toggleTransactionFields(type) {

            [...$fields.payout, ...$fields.paymentGateway].forEach(id => {
                console.log("id", id)
                $(id).hide()
                $(id).find('input[type="text"]').val('');
                $(id).find('select').val('');
            });

            resetRequired($fields.payout, false);
            resetRequired($fields.paymentGateway, false);

            if (type === "PaymentGateway") {
                console.log("((((((((((((((((((((paymentgateway))))))))))))))))))))");
                $fields.paymentGateway.forEach(id => $(id).show());
                resetRequired(["#autoSettlement", "#cardBinEnable", "#isSeamless", "#priceType", "#settlementLimit"], true);
                // document.getElementById("#settlementLimit").value = "0"
            }
            else if (type === "Payout") {
                $fields.payout.forEach(id => $(id).show());
                resetRequired(["#preAuthorization", , "#ifscCode", "#virtualCode", "#lastSixDigits"], true);
            }
        }

        
        function toggleTransactionEditFields(type) {
            console.log("***********", type);
            [...$Editfields.payout, ...$Editfields.paymentGateway].forEach(id => {
                console.log("id", id)
                $(id).hide()
                $(id).find('input[type="text"]').val('');
                $(id).find('select').val('');
            });

            resetRequired($Editfields.payout, false);
            resetRequired($Editfields.paymentGateway, false);

            if (type === "PaymentGateway") {
                console.log("((((((((((((((((((((paymentgateway))))))))))))))))))))");
                $Editfields.paymentGateway.forEach(id => $(id).show());
                resetRequired(["#autoSettlementEdit", "#cardBinEnableEdit", "#isSeamlessEdit", "#priceTypeEdit", "#settlementLimitEdit"], true);
                // document.getElementById("#settlementLimitEdit").value = "0"
            }
            else if (type === "Payout") {
                $Editfields.payout.forEach(id => $(id).show());
                resetRequired(["#preAuthorizationEdit", , "#ifscCodeEdit", "#virtualCodeEdit", "#lastSixDigitsEdit"], true);
            }
        }

    
    $(document).ready(function () {
           // Initialize
        toggleTransactionFields($("#transactionType").val());
        toggleTransactionEditFields($("#transactionTypeEdit").val());

        // On change
        $("#transactionType").change(function () {
            toggleTransactionFields($(this).val());
        });
        $("#transactionTypeEdit").change(function () {
            toggleTransactionEditFields($(this).val());
        });

    });
</script>
<script>
    function openUpdateTransactionModal(each_trasaction_api){
        $('#verifyDiv').hide();
        $('#updateGenerateBtn').text('Generate OTP').prop('disabled', false).show();
        const updatetransactionBaseUrl = "{{ url_for('api_master.update_transaction_api', transactionApiId='__ID__') }}"
        const formAction = updatetransactionBaseUrl.replace('__ID__', each_trasaction_api.id);
        ;
        console.log("==========->", formAction)
        document.getElementById("updateTaskForm").action = formAction;

        resetFormDataNew('updateTaskForm')
        document.getElementById("apiNameEdit").value = each_trasaction_api.apiName || "";
        document.getElementById("codeEdit").value = each_trasaction_api.code || "";
        document.getElementById("subCodeEdit").value = each_trasaction_api.subCode || "";
        document.getElementById("virtualCodeEdit").value = each_trasaction_api.virtualCode || "";
        document.getElementById("lastSixDigitsEdit").value = each_trasaction_api.lastSixDigits || "";
        document.getElementById("ifscCodeEdit").value = each_trasaction_api.ifscCode || "";
        document.getElementById("settlementLimitEdit").value = each_trasaction_api.settlementLimit || "";
        document.getElementById("perdayTransactionLimitEdit").value = each_trasaction_api.perdayTransactionLimit || "";

        var htmldata = '<option value=""> Select Invoice Type</option>'
        if (each_trasaction_api.invoiceType == "Commission"){
            htmldata += '<option value="Commission" selected >Commission</option> <option value="Amount">Amount</option>'

        }
        else if (each_trasaction_api.invoiceType == "Amount"){
            htmldata += '<option value="Commission">Commission</option> <option value="Amount" selected>Amount</option>'

        }
        else{
            htmldata += '<option value="Commission">Commission</option> <option value="Amount" selected>Amount</option>'
        }

        $('#invoiceTypeEdit').html(htmldata);

        var selectElement = document.getElementById('transactionTypeEdit');
        var options = selectElement.options;
        console.log("options:",  options);

        for (let option of options) {
            console.log(each_trasaction_api.transactionType,option.value)
            if (each_trasaction_api.transactionType == option.value) {
                option.selected = true;
            } else {
                option.selected = false;
            }
        }
        $("#transactionTypeEdit").trigger("chosen:updated");
        
        toggleTransactionEditFields(each_trasaction_api.transactionType || "");

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

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

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

        for (let option of options) {
            console.log(each_trasaction_api.cardBinEnable,option.value)
            if (each_trasaction_api.cardBinEnable == option.value) {
                option.selected = true;
            } else {
                option.selected = false;
            }
        }
        
        selectElement = document.getElementById('isSeamlessEdit');
        options = selectElement.options;
        console.log("options:",  options);

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

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

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

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

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

        const paramsList = each_trasaction_api.paramsList || []
        htmldata = ""

        removeInputField('updateInputContainer', true);
        paramsList.forEach(param => {
            addInputField('updateInputContainer',param.key, param.value)
        })

        //     htmldata +=`<div class="input-group mb-2">
        //                         <input type="text" name="inputKeyField[]" placeholder="Enter Param Key"
        //                             value="${ param.key }" class="form-control" readonly>
        //                         <input type="text" name="inputValueField[]" placeholder="Enter Param Value"
        //                             value="${param.value }" class="form-control">
        //                         <button type="button" class="btn btn-danger"
        //                             onclick="removeInputField('updateInputContainer')">Remove</button>
        //                     </div>`
            
        // });
        // $('#updateInputContainerEdit').html(htmldata);


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

        // Show Bootstrap modal

        document.getElementById('defaultVerificationId').value = each_trasaction_api.id || '';
        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">API Master</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">API Management</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">
                            API Management List
                        </div>
                        <div class="prism-toggle">
                            {% if 'add' in session.get('apiGatewaysPermissions', []) %}
                            <button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3"
                                data-bs-toggle="modal" data-bs-target="#addtask" onClick="resetFormDataNew('addApiManagementForm');openaddModal({})">
                                <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Transaction API
                            </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="GET" action="{{ url_for('api_master.api_masters_list')}}"
                                    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 api name" pattern="^[a-zA-Z0-9\s@#$()+_\-/]*$" minlength="3" maxlength="75">
                                    </div>

                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">Search</button>
                                    </div>
                                    <div class="col-auto">
                                        <a href="{{url_for('api_master.api_masters_list')}}"><button type="button"
                                            class="btn btn-warning">Reset</button></a> </div>
                                    {% for error in form.search_element.errors %}
                                    <span class="text-danger" class="error">{{ error }}</span>
                                    {% endfor %}
                                </form>
                            </div>
                        </div>

                        <!-- Add some space -->
                        <div class="mt-3"></div>
                        <!-- End space -->
                        <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">API Name</th>
                                        <th scope="col">Code</th>
                                        <th scope="col">Virtual Code</th>
                                        <th scope="col">Escro Account Number</th>
                                        <th scope="col">IFSC Code</th>
                                        <!--   <th scope="col">Is Active</th>
                                       <th scope="col">Is UserWise</th> -->
                                        <th scope="col">Type</th>
                                        <th scope="col">Auto Settlement</th>
                                        <th scope="col">Settlement Limit</th>
                                        <th scope="col">Card Bin Enable</th>
                                        <th scope="col">Pre Authorization</th>
                                        <th scope="col">Is Seamless</th>
                                        <th scope="col">Price Type</th>
                                        <th scope="col">Invoice Type</th>
                                        <th scope="col">Parameters</th>
                                        <th scope="col">Per Day Txn Limit</th>
                                        {% if 'edit' in session.get('apiGatewaysPermissions', []) %}
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                         {% endif %}
                                    </tr>
                                </thead>
                                <tbody>
                                     {% if transactionAPIList %}
                                    {% for each_trasaction_api in transactionAPIList %}
                                    <tr>
                                        <td>{{SnoCount +loop.index}}</td>

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

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

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

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

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

                                        <td>{{each_trasaction_api.autoSettlement}}</td>

                                        <td>{{each_trasaction_api.settlementLimit}}</td>
                                        <td>{{each_trasaction_api.cardBinEnable}}</td>
                                        <td>{{each_trasaction_api.preAuthorization}}</td>
                                        <td>{{each_trasaction_api.isSeamless}}</td>

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

                                        {% if each_trasaction_api.invoiceType %}
                                        <td>{{each_trasaction_api.invoiceType}}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        
                                        <td>
                                            <button type="button"
                                                class="btn btn-icon btn-sm btn-warning-transparent rounded-pill"
                                                data-bs-toggle="modal"
                                                data-bs-target="#viewTransactionAPIModal{{ loop.index }}">
                                                <i class="ri-eye-line"></i>
                                            </button>

                                            <div class="modal fade" id="viewTransactionAPIModal{{ loop.index }}"
                                                tabindex="-1" role="dialog"
                                                aria-labelledby="viewTransactionAPIModalLabel" aria-hidden="true">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="viewTransactionAPIModalLabel">
                                                                View Parameters</h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form method="POST"
                                                                action="{{ url_for('api_master.update_transaction_api', transactionApiId=each_trasaction_api.id, page=page, search_element=search_element) }}"
                                                                enctype="multipart/form-data">
                                                                <input type="hidden" name="csrf_token"
                                                                    value="{{ csrf_token() }}">
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        {% for each_dict in
                                                                        each_trasaction_api.paramsList %}
                                                                        <div class="col-md-6 mb-3">
                                                                            <label for="apiName">{{ each_dict.get('key',
                                                                                '') }}</label>
                                                                            <input type="text" class="form-control"
                                                                                value="{{ each_dict.get('value', '') }}"
                                                                                readonly>
                                                                        </div>
                                                                        {% endfor %}
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </td>
                                        <td>{{each_trasaction_api.perdayTransactionLimit}}</td>

                                        {% if 'edit' in session.get('apiGatewaysPermissions', []) %}
                                        <td>
                                            {% if each_trasaction_api.status == 1 %}
                                            <a class="btn btn-sm btn-success"
                                                href="{{ url_for('api_master.update_transaction_api_status', transactionApiId=each_trasaction_api.id, page=page, search_element=search_element) }}" data-requires-location>Active</a>
                                            {% else %}
                                            <a class="btn btn-sm btn-warning"
                                                href="{{ url_for('api_master.update_transaction_api_status', transactionApiId=each_trasaction_api.id, page=page, search_element=search_element) }}" data-requires-location>Deactive</a>
                                            {% endif %}
                                        </td>
                                        {% endif %}

                                        {% if 'edit' in session.get('apiGatewaysPermissions', []) %}
                                        <td>
                                            <a href="javascript:void(0);"
                                                class="btn btn-icon btn-sm btn-info-transparent rounded-pill" onclick='openUpdateTransactionModal({
                                                        "id":"{{each_trasaction_api.id}}",
                                                        "apiName":"{{each_trasaction_api.apiName}}",
                                                        "code":"{{each_trasaction_api.code}}",
                                                        "virtualCode":"{{each_trasaction_api.virtualCode}}",
                                                        "subCode": "{{each_trasaction_api.subCode}}",
                                                        "lastSixDigits": "{{each_trasaction_api.lastSixDigits}}",
                                                        "ifscCode":"{{each_trasaction_api.ifscCode}}",
                                                        "transactionType": "{{each_trasaction_api.transactionType}}",
                                                        "autoSettlement":"{{each_trasaction_api.autoSettlement}}",
                                                        "settlementLimit":"{{each_trasaction_api.settlementLimit}}",
                                                        "cardBinEnable":"{{each_trasaction_api.cardBinEnable}}",
                                                        "preAuthorization":"{{each_trasaction_api.preAuthorization}}",
                                                        "isSeamless":"{{each_trasaction_api.isSeamless}}",
                                                        "priceType":"{{ each_trasaction_api.priceType }}",
                                                        "invoiceType":"{{each_trasaction_api.invoiceType}}",
                                                        "paramsList":{{each_trasaction_api.paramsList | tojson}},
                                                        "perdayTransactionLimit":"{{each_trasaction_api.perdayTransactionLimit}}"
                                                    })'>
                                                <i class="ri-edit-line"></i>
                                            </a>
                                        </td>
                                        {% endif %}
                                    </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>
                        <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>
    <!-- End::row-1 -->

    <!-- Add Task Modal -->
    <div class="modal fade" id="addtask" tabindex="-1" role="dialog" aria-labelledby="addtask" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">Create New Transaction API</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"></span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ url_for('api_master.add_transaction_api')}}"
                        id="addApiManagementForm" name="addApiManagementForm" 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">

                        <input type="hidden" name="defaultVerificationId" id="defaultVerificationIdadd"> 
                        <div class="form-group">
                            <label for="apiName">API Name*</label>
                            <input type="text" class="form-control" name="apiName"
                                title="API Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
                                id="apiName" placeholder="Enter api name" required >
                            <span id="apiName_error" class="error"></span>
                        </div>
                        <div class="form-group">
                            <label for="code">Code*</label>
                            <select class="form-control chosen-select" name="code" id="code" required>
                                <option value="">Select code</option>
                                <option value="AccurePay_PayIn">Accure Pay Payin</option>
                                <option value="AccurePay_Payout">Accure Pay Payout</option>
                                <option value="WowPe_Payin">Wowpe Payin</option>
                                <option value="WowPe_Payout">Wowpe Payout</option>
                                <option value="Payaid_Payin">Payaid Payin</option>
                                <option value="Payaid_Payout">Payaid Payout</option>
                                <option value="Upi_Payin">Upi Payin</option>
                                <option value="Upi_Payout">Upi Payout</option>
                                <option value="PayU_BBPS">PayU BBPS</option>
                                <option value="PayU_Prepaid">PayU Prepaid</option>
                                <option value="Payu_Payin">Payu Payin</option>
                                <option value="Payu_Payout">Payu Payout</option>
                                <option value="Idfc_Payout">Idfc Payout</option>
                                <option value="Idfc_Payin">Idfc Payin</option>
                                <option value="Setu_Payin">Setu Payin</option>
                                <option value="Axis_Payout">Axis Payout</option>
                                <option value="Lyra_Payin">Lyra Payin</option>
                                <option value="Paywize_Payout">Paywize Payout</option>
                                <option value="Paywize_Payin">Paywize Payin</option>
                                <option value="Indusspay_Payout">Indusspay Payout</option>
                                <option value="Indusspay_Payin">Indusspay Payin</option>
                                <option value="Paysprint_Dmt">Paysprint Dmt</option>
                                <option value="Worldline_Payin">Worldline Payin</option>
                                <option value="Campuslinkpro_Payin">Campuslinkpro Payin</option>
                                <option value="Getepay_Payin">Getepay Payin</option>
                                <option value="safegold">Safe Gold</option>
                                <option value="testgold">Test Gold</option>
                                <option value="Aabhibus">Aabhibus</option>
                            </select>
                            <span id="code_error" class="error"></span>
                        </div>
                        <div class="form-group">
                            <label for="subCode">Sub Code*</label>
                            <input type="text" class="form-control"
                                title="Sub Code must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
                                name="subCode" id="subCode" placeholder="Enter sub code" required >
                            <span id="subCode_error" class="error"></span>
                        </div>
                        <div class="form-group">
                            <label for="perdayTransactionLimit">Per Day Txn Limit</label>
                            <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])"
                                title="Please enter a valid number." class="form-control" id="perdayTransactionLimit"
                                name="perdayTransactionLimit" placeholder="Enter txn limit" >
                            <span id="perdayTransactionLimit_error" class="error"></span>
                        </div>
                        <div class="form-group">
                            <label for="invoiceType">Invoice Type*</label>
                            <select class="form-select" name="invoiceType" id="invoiceType" required>
                                <option value="">Select invoice type</option>
                                <option value="Commission">Commission</option>
                                <option value="Amount">Amount</option>
                            </select>
                            <span id="invoiceType_error" class="error"></span>
                        </div>
                        <div class="form-group">
                            <label for="transactionType">Transaction Type*</label>
                            <select class="form-select" name="transactionType" id="transactionType" required >
                                <option value="">Select transaction type</option>
                                <option value="Service">Service</option>
                                <option value="PaymentGateway">PaymentGateway</option>
                                <option value="Payout">Payout</option>
                                <option value="PaysprintDmt">Dmt</option>
                                <option value="Gold">Gold</option>
                                <option value="Prepaid">Prepaid</option>
                                <option value="BusBooking">BusBooking</option>
                            </select>
                            <span id="transactionType_error" class="error"></span>
                        </div>
                        <div class="form-group" id="virtualCodeDiv">
                            <label for="virtualCode">Virtual Code*</label>
                            <input type="text" class="form-control"
                                title="Virtual Code must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
                                name="virtualCode" id="virtualCode" placeholder="Enter virtual code">
                            <span id="virtualCode_error" class="error"></span>
                        </div>
                        <div class="form-group" id="lastSixDigitsDiv">
                            <label for="lastSixDigits">Escro Account Number*</label>
                            <input type="text" class="form-control"
                                title="Escro Account Number must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
                                name="lastSixDigits" id="lastSixDigits" placeholder="Enter six digits account number ">
                            <span id="lastSixDigits_error" class="error"></span>
                        </div>
                        <div class="form-group" id="ifscCodeDiv">
                            <label for="ifscCode">IFSC Code*</label>
                            <input type="text" class="form-control" pattern="^[A-Za-z]{4}\d{1}[A-Za-z0-9]{6}$"
                                title="IFSC Code must be in the format: 4 letters, 1 digit, and 6 alphanumeric characters"
                                name="ifscCode" id="ifscCode" placeholder="Enter ifsc code">
                            <span id="ifscCode_error" class="error"></span>
                        </div>
                        <div class="form-group" id="preAuthorizationDiv">
                            <label for="preAuthorization">Pre Authorization</label>
                            <select class="form-select" name="preAuthorization" id="preAuthorization">
                                <option value="">Select</option>
                                <option value="True">True</option>
                                <option value="False">False</option>
                            </select>
                            <span id="preAuthorization_error" class="error"></span>
                        </div>
                        <div class="form-group" id="autoSettlementDiv">
                            <label for="autoSettlement">Auto Settlement</label>
                            <select class="form-select" name="autoSettlement" id="autoSettlement">
                                <option value="">Select</option>
                                <option value="True">True</option>
                                <option value="False">False</option>
                            </select>
                            <span id="autoSettlement_error" class="error"></span>
                        </div>
                        <div class="form-group" id="settlementLimitDiv">
                            <label for="settlementLimit">Auto Settlement Limit</label>
                            <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])"
                                title="Please enter a valid number." class="form-control" id="settlementLimit"
                                name="settlementLimit" placeholder="Enter auto settlement limit" value="0">
                            <span id="settlementLimit_error" class="error"></span>
                        </div>

                        <div class="form-group" id="cardBinEnableDiv">
                            <label for="cardBinEnable">Card Bin Enable</label>
                            <select class="form-select" name="cardBinEnable" id="cardBinEnable">
                                <option value="">Select</option>
                                <option value="True">True</option>
                                <option value="False">False</option>
                            </select>
                            <span id="cardBinEnable_error" class="error"></span>
                        </div>
                        <div class="form-group" id="isSeamlessDiv">
                            <label for="isSeamless">Is Seamless</label>
                            <select class="form-select" name="isSeamless" id="isSeamless">
                                <option value="">Select</option>
                                <option value="True">True</option>
                                <option value="False">False</option>
                            </select>
                            <span id="isSeamless_error" class="error"></span>
                        </div>
                        <div class="form-group" id="priceTypeDiv">
                            <label for="priceType">PriceType</label>
                            <select class="form-select" name="priceType" id="priceType">
                                <option value="">Select</option>
                                <option value="common">Common</option>
                                <option value="variable">Variable</option>
                            </select>
                            <span id="priceType_error" class="error"></span>
                        </div>
                        <div class="form-group" id="inputContainer">
                            <label for="params">Parameters</label>
                            <br>
                            <input type="text" name="inputKeyField[]" placeholder="Enter param key"
                                class="form-control mb-2">
                            <input type="text" name="inputValueField[]" placeholder="Enter param value"
                                class="form-control mb-2">
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary-light rounded-pill btn-wave"
                                onclick="addInputField('inputContainer')">Add Param</button>
                            <button type="button" class="btn btn-danger-light rounded-pill btn-wave"
                                onclick="removeInputField('inputContainer')">Remove Param</button>
                        </div>

                        <!-- Add some space -->
                        <div class="mt-3"></div>

                        <div class="form-group mt-3">
                            <button type="button" class="btn btn-warning generateOtpBtn" data-index="add" data-mail-type="API Setup" id="updateaddGenerateBtn">Generate
                                OTP</button>
                            <input type="hidden" id="otpLogidadd" name="otpLogid">
                        </div>

                        <div class="form-group mt-3 otp-section" data-index="add" style="display: none;" id="verifyaddDiv">
                            <label for="otpCodeadd">Enter OTP*</label>
                            <input type="text" class="form-control otp-input" id="otpCodeadd" name="otpCode"
                                placeholder="Enter otp">
                            <div class="mt-2">
                                <button type="button" class="btn btn-primary verifyOtpBtn" data-index="add">Verify
                                    OTP</button>
                                <button type="button" class="btn btn-secondary resendOtpBtn" data-index="add" data-mail-type="API Setup">Resend
                                    OTP</button>
                             </div>
                            <div id="otpMessageadd" class="text-danger mt-2"></div>
                        </div>

                        <!-- End space -->

                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary form_submit" id="updateBtnadd">Save</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Add Task Modal Close -->

    <!-- Update Task Modal for each transaction API -->
    <div class="modal fade" id="updateTask" tabindex="-1" role="dialog" aria-labelledby="updateTask"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">Update Transaction API</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"></span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST"
                        action=""
                        enctype="multipart/form-data" id="updateTaskForm" name="updateTaskForm">
                        <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">
                        <input type="hidden" name="defaultVerificationId" id="defaultVerificationId"> 
                        <div class="form-group">
                            <label for="apiName">API Name*</label>
                            <input type="text" class="form-control"
                                title="API Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
                                name="apiName" id="apiNameEdit"  required>
                            <span id="apiName_edit_error" class="error"></span>
                        </div>
                        <div class="form-group">
                            <label for="code">Code*</label>
                            <input type="text" class="form-control" name="code" id="codeEdit"
                                readonly>
                            <span id="code_edit_error" class="error"></span>
                        </div>
                        <div class="form-group">
                            <label for="subCode">Sub Code*</label>
                            <input type="text" class="form-control" name="subCode"
                                title="Sub Code must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
                                id="subCodeEdit">
                            <span id="subCode_edit_error" class="error"></span>
                        </div>
                        <div class="form-group" id="virtualCodeEditDiv">
                            <label for="virtualCode">Virtual Code*</label>
                            <input type="text" class="form-control"
                                title="Virtual Code must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
                                name="virtualCode" id="virtualCodeEdit" >
                            <span id="virtualCode_edit_error" class="error"></span>
                        </div>
                        <div class="form-group" id="lastSixDigitsEditDiv">
                            <label for="lastSixDigits">Escro Account Number*</label>
                            <input type="text" class="form-control"
                                title="Escro Account Number must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
                                name="lastSixDigits" id="lastSixDigitsEdit" >
                            <span id="lastSixDigits_edit_error" class="error"></span>
                        </div>
                        <div class="form-group" id="ifscCodeEditDiv">
                            <label for="ifscCode">IFSC Code*</label>
                            <input type="text" class="form-control" pattern="^[A-Za-z]{4}\d{1}[A-Za-z0-9]{6}$"
                                title="IFSC Code must be in the format: 4 letters, 1 digit, and 6 alphanumeric characters"
                                name="ifscCode" id="ifscCodeEdit" >
                            <span id="ifscCode_edit_error" class="error"></span>
                        </div>
                        <div class="form-group" >
                            <label for="transactionType">Transaction Type*</label>
                            <select class="form-select" name="transactionType" id="transactionTypeEdit" required>
                                <option value="">Select transaction type</option>
                                <option value="Service">Service</option>
                                <option value="PaymentGateway">PaymentGateway</option>
                                <option value="Payout" >Payout</option>
                                <option value="PaysprintDmt">Dmt</option>
                                <option value="Gold" >Gold</option>
                                <option value="Prepaid" >Prepaid</option>
                                <option value="BusBooking">BusBooking</option>

                            </select>
                            <span id="transactionType_edit_error" class="error"></span>
                        </div>
                        <div class="form-group">
                            <label for="invoiceType">Invoice Type*</label>
                            <select class="form-select" name="invoiceType" id="invoiceTypeEdit" required>
                            </select>
                            <span id="invoiceType_edit_error" class="error"></span>
                        </div>
                        <div class="form-group">
                            <label for="perdayTransactionLimit">Per Day Txn Limit</label>
                            <input type="text" class="form-control" pattern="([0-9]+([.][0-9]*)?|[.][0-9])"
                                title="Please enter a valid number." name="perdayTransactionLimit"
                                id="perdayTransactionLimitEdit" >
                                <span id="perdayTransactionLimit_edit_error" class="error"></span>
                        </div>
                        <div class="form-group" id="autoSettlementEditDiv">
                            <label for="autoSettlement">Auto Settlement</label>
                            <select class="form-select" name="autoSettlement" id="autoSettlementEdit">
                                <option value="">Select auto settlement</option>
                                <option value="True" >True
                                </option>
                                <option value="False">False</option>
                            </select>
                            <span id="autoSettlement_edit_error" class="error"></span>
                        </div>
                        <div class="form-group" id="settlementLimitEditDiv">
                            <label for="settlementLimit">Auto Settlement Limit</label>
                            <input type="text" class="form-control" pattern="([0-9]+([.][0-9]*)?|[.][0-9])"
                                title="Please enter a valid number." name="settlementLimit" id="settlementLimitEdit"
                                >
                                <span id="settlementLimit_edit_error" class="error"></span>
                        </div>
                        <div class="form-group"  id="cardBinEnableEditDiv">
                            <label for="cardBinEnable">Card Bin Enable</label>
                            <select class="form-select" name="cardBinEnable" id="cardBinEnableEdit">
                                <option value="">Select card bin enable</option>
                                <option value="True">True</option>
                                <option value="False">False</option>
                            </select>
                            <span id="cardBinEnable_edit_error" class="error"></span>
                        </div>

                        <div class="form-group" id="preAuthorizationEditDiv">
                            <label for="preAuthorization">Pre Authorization</label>
                            <select class="form-select" name="preAuthorization" id="preAuthorizationEdit">
                                <option value="">Select pre authorization</option>
                                <option value="True" >
                                    True</option>
                                <option value="False">
                                    False</option>
                            </select>
                            <span id="preAuthorization_edit_error" class="error"></span>
                        </div>

                        <div class="form-group" id="isSeamlessEditDiv">
                            <label for="isSeamless">Is Seamless</label>
                            <select class="form-select" name="isSeamless" id="isSeamlessEdit">
                                <option value="">Select is seamless</option>
                                <option value="True">True
                                </option>
                                <option value="False">
                                    False</option>
                            </select>
                            <span id="isSeamless_edit_error" class="error"></span>
                        </div>
                        <div class="form-group" id="priceTypeEditDiv">
                            <label for="priceType">PriceType</label>
                            <select class="form-select" name="priceType" id="priceTypeEdit">
                                <option value="">Select</option>
                                <option value="common">Common</option>
                                <option value="variable">Variable</option>
                            </select>
                            <span id="priceType_edit_error" class="error"></span>
                        </div>


                        <div class="form-group" id="updateInputContainer">
                            <label for="params">Parameters</label>
                            <br>
                            <div id="updateInputContainerEdit"></div>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary-light rounded-pill btn-wave"
                                onclick="addInputField('updateInputContainer')">Add Param</button>
                        </div>


                        <!-- Add some space -->
                        <div class="mt-3"></div>

                        <div class="form-group mt-3">
                            <button type="button" class="btn btn-warning generateOtpBtn" id="updateGenerateBtn"
                                data-index="u" data-mail-type="API Setup">Generate OTP</button>
                            <input type="hidden" id="otpLogidu" name="otpLogid">
                        </div>

                        <div class="form-group mt-3 otp-section" data-index="u" style="display: none;" id="verifyDiv">
                            <label for="otpCodeu">Enter OTP*</label>
                            <input type="text" class="form-control otp-input" id="otpCodeu"
                                name="otpCode" placeholder="Enter otp">
                            <div class="mt-2">
                                <button type="button" class="btn btn-primary verifyOtpBtn"
                                    data-index="u">Verify
                                    OTP</button>
                                <button type="button" class="btn btn-secondary resendOtpBtn"
                                    data-index="u" data-mail-type="API Setup">Resend OTP</button>
                            </div>
                            <div id="otpMessageu" class="text-danger mt-2"></div>
                             <span id="otpCode_error" class="error"></span>
                        </div>
                        <!-- End space -->
                        <div class="modal-footer justify-content-between">
                             <span id="EditErrorMessage" class="error"></span>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary form_submit" id="updateBtnu"
                                disabled>Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Update Task Modal Close -->

</div>
</div>

<script type="text/javascript">
    $('input').on('invalid', function () {
        this.setCustomValidity('');
    });

    $(document).ready(function () {
        // Validate Add Form
        $('#addApiManagementForm').validate({
            rules: {
                apiName: {
                    required: true,
                    minlength: 3,
                    maxlength: 75,
                    pattern: /^[a-zA-Z0-9\s@#$()+_\-/]+$/
                },
                code: { 
                    required: true,
                },
                subCode: {
                    required: true,
                    minlength: 1,
                    maxlength:15,
                    pattern: /^[a-zA-Z0-9\s@#$()+_\-/]+$/
                },
                
                perdayTransactionLimit: {
                    required:false,
                    minlength:1,
                    maxlength:10
                },
                transactionType: { 
                    required: true,
                },
                invoiceType: {
                    required: true,
                },
                virtualCode: {
                    required:false,
                    minlength:1,
                    maxlength: 10,
                    pattern: /^[a-zA-Z0-9]+$/
                },
                lastSixDigits: {
                    required:false,
                    minlength:6,
                    maxlength:6,
                    pattern: /^[a-zA-Z0-9\s@#$()+_\-/]+$/
                },
                ifscCode: {
                    required:false,
                    minlength:11,
                    maxlength:11,
                    pattern: /^[A-Za-z]{4}\d{1}[A-Za-z0-9]{6}$/
                },
                preAuthorization: {
                    required:false,

                },
                autoSettlement: {
                    required:false,
                },
                settlementLimit:{
                    required:false,
                    minlength: 1,
                    maxlength:10
                },
                cardBinEnable: {
                    required: false
                },
                
                isSeamless: {
                    required:false,
                },
                priceType:{
                    required:false
                },
                virtualAccountName: {
                    required:false,
                    maxlength: 100

                },
                isBulkfundtransfer: {

                },

                'paymentAccessTypeList[]': {

                }
                
            },
            messages: {
                apiName: {
                    required: 'API Name is required',
                    minlength: 'API Name must be at least 3 characters',
                    maxlength: 'API Name must be less than 75 characters',
                    pattern: 'Only alphanumeric and @#$()+_-/ characters allowed'
                },
                code: { required: 'Please select a Code' },
                subCode: {
                    required: 'Sub Code is required',
                    pattern: 'Only alphanumeric and @#$()+_-/ characters allowed'
                },
                transactionType: {
                    required: 'Please select a transaction type'
                },
                perdayTransactionLimit:{
                    minlength: "Per day Txn Limit is must be greaterthan or equals to 0",
                    maxlength: "Per day Txn Limit is must be lessthan or equals to 10 digits",
                },
                virtualCode: {
                    pattern: 'Only alphanumeric characters allowed',
                    minlength: 'Virtual code must be at least 1 character',
                    maxlength: 'Virtual code must be less than 10 characters',
                },
                lastSixDigits: {
                    pattern: 'Only alphanumeric and @#$()+_-/ characters allowed',
                    minlength: "Escro account number must be 6 digits",
                    maxlength: "Escro account number must be 6 digits",
                },
                ifscCode: {
                    required: 'Please enter IFSC Code ',
                    pattern: 'Format: 4 letters, 1 digit, 6 alphanumeric characters', 
                    minlength: "IFSC code must be 11 digits",
                    maxlength: "IFSC code must be 11 digits"
                },
                preAuthorization: {
                    required: 'Please select Pre Authorization option.'
                },
                
                autoSettlement: {
                    required: 'Please select  Auto Settlement option'

                },
                settlementLimit:{
                    minlength: "Settlement Limit is must be greaterthan or equals to 0",
                    maxlength: "Settlement Limit is must be lessthan or equals to 10 digits",
                },
                isBulkfundtransfer: {
                    required: 'Please select Bulk Fund Transfer option.'

                },
                isSeamless: {
                    required: 'Please select Is Seamless option.'

                },
                cardBinEnable: {
                    required: 'Please select  Card BinEnable option'

                },
                priceType:{
                    required: 'Please select Price Type option.'
                },
                invoiceType:{
                    required: "Please select Invoice type"
                },

                'paymentAccessTypeList[]': { required: 'Select at least one Payment Access Type' }
            },
            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);
                        $('.error').text('');
                        $.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) {
                                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);
                                    });
                                } else if (response.responseStatus == 2) {
                                    $('.form_submit').prop('disabled', false);
        				            $('#newLoadingModel').hide();
                                    $('#errorMessage').text(response.result);
                                } 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.");
                            }
                        );
                    }
                });

        // Validate Update Form
        $('#updateTaskForm').validate({
            errorElement: 'label',
            errorClass: 'error',
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            ignore: ":hidden",
            rules: {
                apiName: {
                    required: true,
                    minlength: 3,
                    maxlength: 75,
                    pattern: /^[a-zA-Z0-9\s@#$()+_\-/]+$/
                },
                code: { 
                    required: true,
                },
                subCode: {
                    required: true,
                    minlength: 1,
                    maxlength:15,
                    pattern: /^[a-zA-Z0-9\s@#$()+_\-/]+$/
                },
                
                perdayTransactionLimit: {
                    required:false,
                    minlength:1,
                    maxlength:10
                },
                transactionType: { 
                    required: true,
                },
                invoiceType: {
                    required: true,
                },
                virtualCode: {
                    required:false,
                    minlength:1,
                    maxlength: 10,
                    pattern: /^[a-zA-Z0-9]+$/
                },
                lastSixDigits: {
                    required:false,
                    minlength:6,
                    maxlength:6,
                    pattern: /^[a-zA-Z0-9\s@#$()+_\-/]+$/
                },
                ifscCode: {
                    required:false,
                    minlength:11,
                    maxlength:11,
                    pattern: /^[A-Za-z]{4}\d{1}[A-Za-z0-9]{6}$/
                },
                preAuthorization: {
                    required:false,

                },
                autoSettlement: {
                    required:false,
                },
                settlementLimit:{
                    required:false,
                    minlength: 1,
                    maxlength:10
                },
                cardBinEnable: {
                    required: false
                },
                
                isSeamless: {
                    required:false,
                },
                priceType:{
                    required:false
                },
                virtualAccountName: {
                    required:false,
                    maxlength: 100

                },
                isBulkfundtransfer: {

                },

                'paymentAccessTypeList[]': {

                }
                
            },
            messages: {
                apiName: {
                    required: 'API Name is required',
                    minlength: 'API Name must be at least 3 characters',
                    maxlength: 'API Name must be less than 75 characters',
                    pattern: 'Only alphanumeric and @#$()+_-/ characters allowed'
                },
                code: { required: 'Please select a Code' },
                subCode: {
                    required: 'Sub Code is required',
                    pattern: 'Only alphanumeric and @#$()+_-/ characters allowed'
                },
                transactionType: {
                    required: 'Please select a transaction type'
                },
                perdayTransactionLimit:{
                    minlength: "Per day Txn Limit is must be greaterthan or equals to 0",
                    maxlength: "Per day Txn Limit is must be lessthan or equals to 10 digits",
                },
                virtualCode: {
                    required: 'Please enter Virtual Code',
                    pattern: 'Only alphanumeric and @#$()+_-/ characters allowed',
                    minlength: 'Virtual code must be at least 1 character',
                    maxlength: 'Virtual code must be less than 10 characters',
                },
                lastSixDigits: {
                    pattern: 'Only alphanumeric and @#$()+_-/ characters allowed',
                    minlength: "Last Six Digits must be 6 digits",
                    maxlength: "Last Six Digits must be 6 digits",
                },
                ifscCode: {
                    required: 'Please enter IFSC Code ',
                    pattern: 'Format: 4 letters, 1 digit, 6 alphanumeric characters', 
                    minlength: "IFSC code must be 11 digits",
                    maxlength: "IFSC code must be 11 digits"
                },
                preAuthorization: {
                    required: 'Please select Pre Authorization option.'
                },
                
                autoSettlement: {
                    required: 'Please select  Auto Settlement option'

                },
                settlementLimit:{
                    minlength: "Settlement Limit is must be greaterthan or equals to 0",
                    maxlength: "Settlement Limit is must be lessthan or equals to 10 digits",
                },
                isBulkfundtransfer: {
                    required: 'Please select Bulk Fund Transfer option.'

                },
                isSeamless: {
                    required: 'Please select Is Seamless option.'

                },
                cardBinEnable: {
                    required: 'Please select  Card BinEnable option'

                },
                priceType:{
                    required: 'Please select Price Type option.'
                },
                invoiceType:{
                    required: "Please select Invoice type"
                },

                'paymentAccessTypeList[]': { required: 'Select at least one Payment Access Type' }
            },
            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);
                        $('.error').text('');
                        $.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) {
                                if (response.responseStatus == 1 || response.responseStatus == 4) {
                                    form.reset();
                                    window.location.reload();
                                } else if (response.responseStatus == 0) {
                                    $('.form_submit').prop('disabled', false);
        				            $('#newLoadingModel').hide();
                                    $.each(response.result, function (key, value) {
                                        $('#' + key + "_edit_error").text(value);
                                    });
                                } else if (response.responseStatus == 2) {
                                    $('.form_submit').prop('disabled', false);
        				            $('#newLoadingModel').hide();
                                    $('#EditErrorMessage').text(response.result);
                                } 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>

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

{% endblock content %}