{% extends 'super_admin_templates/base.html' %}

{% 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 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 removeParamsField(containerId, removeAll = false) {
        if (removeAll) {
            var container = document.getElementById(containerId);
            while (container.firstChild) {
                container.removeChild(container.firstChild);
            }
        }
        else {
            var container = document.getElementById(containerId);
            if (container.children.length > 1) {
                container.removeChild(container.lastChild);
            }
        }
    }
</script>
<script>
    function openaddModal(each_modal) {
        $('#verifyaddDiv').hide();
        $('#updateaddGenerateBtn').text('Generate OTP').prop('disabled', false).show();

    }
</script>
<script>
    function openaddAssignsmsModal(each_modal) {
        $('#verifyaddAssignDiv').hide();
        $('#updateaddAssignGenerateBtn').text('Generate OTP').prop('disabled', false).show();

    }
</script>
<script>
    function openaddSmsTempModal(each_modal) {
        $('#verifySmsTempaddDiv').hide();
        $('#updateaddSmsTempGenerateBtn').text('Generate OTP').prop('disabled', false).show();

    }
</script>

<script>
    function openUpdateSmsModal(each_sms_api) {
        $('#verifyDiv').hide();
        $('#updateGenerateBtn').text('Generate OTP').prop('disabled', false).show();
        var updateSmsBaseUrl = "{{ url_for('sms_apis.update_sms_apis', smsApiId='__ID__') }}"
        const formAction = updateSmsBaseUrl.replace('__ID__', each_sms_api.id);
        console.log("==========->", formAction)
        document.getElementById('updateSmsForm').action = formAction;
        
        resetFormDataNew('updateSmsForm')
        document.getElementById('defaultVerificationIdupdatesmsapi').value = each_sms_api.id || '';
        document.getElementById('apiNameEdit').value = each_sms_api.apiName;
        document.getElementById('codeEdit').value = each_sms_api.code;
        const paramsList = each_sms_api.paramsList || []
        removeParamsField('updateInputContainer', true);

        paramsList.forEach(param => {
            if (param.key) {
                addInputField('updateInputContainer', param.key, param.value)
            }
        })
        const modal = new bootstrap.Modal(document.getElementById('updateTask'));
        modal.show();
    }

    function openUpdateAssignSmsModal(each_sms_api) {
        $('#verifyAssignSmsDiv').hide();
        $('#updateAssignSmsGenerateBtn').text('Generate OTP').prop('disabled', false).show();
        var updateSmsBaseUrl = "{{ url_for('sms_apis.update_assign_sms', AssignsmsId='__ID__') }}"
        const formAction = updateSmsBaseUrl.replace('__ID__', each_sms_api.id);
        console.log("==========->", formAction)
        document.getElementById('defaultVerificationIdupdateassignsms').value = each_sms_api.id || '';
        document.getElementById('updateAssignSmsForm').action = formAction;

        
        resetFormDataNew('updateAssignSmsForm')
        selectElement = document.getElementById('smsApiIdEdit');
        options = selectElement.options;

        for (let option of options) {
            console.log(each_sms_api.apiName, each_sms_api.smsApiId, option.value, each_sms_api.smsApiId == option.value)
            if (each_sms_api.smsApiId == option.value) {
                option.selected = true;
            } else {
                option.selected = false;
            }
        }
        $("#smsApiIdEdit").trigger("chosen:updated");

        selectElement = document.getElementById('AssignsmsId');
        options = selectElement.options;

        for (let option of options) {
            if (each_sms_api.otpTypeList.includes(option.value)) {
                option.selected = true;
            } else {
                option.selected = false;
            }
        }
        $("#AssignsmsId").trigger("chosen:updated");
        const modal = new bootstrap.Modal(document.getElementById('updateassignkyc'));
        modal.show();
    }

    function openUpdateSmsTemplateModal(each_sms_api) {
        $('#verifySmsTempDiv').hide();
        $('#updateSmsTempGenerateBtn').text('Generate OTP').prop('disabled', false).show();
        var updateSmsBaseUrl = "{{ url_for('sms_apis.update_sms_template', smsTemplateId='__ID__') }}"
        const formAction = updateSmsBaseUrl.replace('__ID__', each_sms_api.id);
        console.log("==========->", formAction)
        document.getElementById('updateSmsTemplateForm').action = formAction;
        
        resetFormDataNew('updateSmsTemplateForm')
        document.getElementById('defaultVerificationIdupdatetemplate').value = each_sms_api.id || '';
        document.getElementById("templateContentEdit").value = each_sms_api.templateContent;
        selectElement = document.getElementById('editsmsApiId');
        options = selectElement.options;

        for (let option of options) {
            if (each_sms_api.smsApiId == option.value) {
                option.selected = true;
            } else {
                option.selected = false;
            }
        }
        $("#editsmsApiId").trigger("chosen:updated");

        selectElement = document.getElementById('smsTemplateId');
        options = selectElement.options;

        for (let option of options) {
            if (each_sms_api.otpTypeList.includes(option.value)) {
                option.selected = true;
            } else {
                option.selected = false;
            }
        }
        $("#smsTemplateId").trigger("chosen:updated");
        const modal = new bootstrap.Modal(document.getElementById('updatesmstemplate'));
        modal.show();
    }

    function deleteSmsApiModel(data) {
        $('#verifyDelSmsDiv').hide();
        $('#updateDelSmsGenerateBtn').text('Generate OTP').prop('disabled', false).show();
        var deleteSmsApiBaseUrl = "{{ url_for('sms_apis.delete_sms_api', smsApiId='__ID__', search_element='__SEARCH__', smsPage='__PAGE__')}}"
        const formAction = deleteSmsApiBaseUrl.replace('__ID__', data.id).replace('__SEARCH__', encodeURIComponent(data.search_element)).replace('__PAGE__', encodeURIComponent(data.smsPage));
        console.log("==========->", formAction)
        document.getElementById('smsApiDeleteForm').action = formAction;
        document.getElementById('defaultVerificationIddeletesmsapi').value = data.id || '';
        
        const modal = new bootstrap.Modal(document.getElementById('smsapiDeleteModal'));
        modal.show();
    }

    function deleteAssignSmsApiModel(data) {
        $('#verifyDelAssignSmsDiv').hide();
        $('#updateDelAssignSmsGenerateBtn').text('Generate OTP').prop('disabled', false).show();
        var deleteSmsApiBaseUrl = "{{ url_for('sms_apis.delete_assign_sms', AssignsmsId='__ID__', assign_search_element='__SEARCH__', assignSmsPage='__PAGE__')}}"
        const formAction = deleteSmsApiBaseUrl.replace('__ID__', data.id).replace('__SEARCH__', encodeURIComponent(data.assign_search_element)).replace('__PAGE__', encodeURIComponent(data.assignSmsPage));
        console.log("==========->", formAction)
        document.getElementById('assignsmsapiDeleteForm').action = formAction;
        document.getElementById('defaultVerificationIddeleteassignsmsapi').value = data.id || '';
        
        const modal = new bootstrap.Modal(document.getElementById('assignsmsapiDeleteModal'));
        modal.show();
    }

    function deleteSmsTemplateApiModel(data) {
        $('#verifyDelSmsTempDiv').hide();
        $('#updateDelSmsTempGenerateBtn').text('Generate OTP').prop('disabled', false).show();
        var deleteSmsApiBaseUrl = "{{ url_for('sms_apis.delete_sms_template', smsTemplateId='__ID__', smstemplate_search_element='__SEARCH__', smsTemplatePage='__PAGE__')}}"
        const formAction = deleteSmsApiBaseUrl.replace('__ID__', data.id).replace('__SEARCH__', encodeURIComponent(data.smstemplate_search_element)).replace('__PAGE__', encodeURIComponent(data.smsTemplatePage));
        console.log("==========->", formAction)
        document.getElementById('smsTemplateApiDeleteForm').action = formAction;
        document.getElementById('defaultVerificationIddeletesmstemplate').value = data.id || '';
        
        const modal = new bootstrap.Modal(document.getElementById('smstemplateDeleteModal'));
        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">SMS API</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->
        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header">
                        <div class="card-title">
                            SMS API List
                        </div>
                    </div>

                    <div class="card-body">
                        <nav class="nav nav-style-6 nav-pills mb-3 nav-justified d-sm-flex d-block" role="tablist">
                            {% if 'view' in session.get('smsApiPermissions', []) %}
                            <a class="nav-link {% if redirectval == 'smsApis' %}active{% endif %}" data-bs-toggle="tab"
                                role="tab" aria-current="page" href="#nav-smsapis" aria-selected="true">SMS API</a>
                            {% endif %}
                            {% if 'view' in session.get('assignSmsPermissions', []) %}
                            <a class="nav-link {% if redirectval == 'AssignSms' %}active{% endif %}"
                                data-bs-toggle="tab" role="tab" href="#nav-AssignSms" aria-selected="false">Assign SMS
                                Type</a>
                            {% endif %}
                            {% if 'view' in session.get('smsTemplatePermissions', []) %}
                            <a class="nav-link {% if redirectval == 'smsTemplates' %}active{% endif %}"
                                data-bs-toggle="tab" role="tab" href="#nav-smsTemplates" aria-selected="false">SMS
                                Templates</a>
                            {% endif %}
                        </nav>

                        <center>
                            {% if error %}
                            <h2><b>
                                    <center style="color:RED">{{ error }}</center>
                                </b></h2>
                            {% endif %}
                        </center>

                        <div class="tab-content">
                            <div class="tab-pane fade {% if redirectval == 'smsApis' %}show active{% endif %}"
                                id="nav-smsapis" role="tabpanel">
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div class="d-flex justify-content-between align-items-center mb-4">
                                            <form method="GET"
                                                action="{{ url_for('sms_apis.sms_apis_list', smsPage=smsPage)}}"
                                                class="row gy-2 gx-3 align-items-center">

                                                <div class="col-auto">
                                                    <input type="text" class="form-control" value="{{search_element}}"
                                                        name="search_element" id="search_element"
                                                        title="Only alphanumeric and special characters @#$()+_-/"
                                                        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('sms_apis.sms_apis_list')}}"><button
                                                            type="button" class="btn btn-warning">Reset</button></a>
                                                </div>
                                                {% for error in smsForm.search_element.errors %}
                                                <span class="text-danger" class="error">{{ error }}</span>
                                                {% endfor %}
                                            </form>

                                            <div class="prism-toggle">
                                                {% if 'add' in session.get('smsApiPermissions', []) %}
                                                <button type="button"
                                                    class="btn btn-primary-light rounded-pill btn-wave"
                                                    data-bs-toggle="modal" data-bs-target="#addtask"
                                                    onClick="resetFormDataNew('addSmsForm'); openaddModal({})">
                                                    <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New
                                                    SMS Api
                                                </button>
                                                {% endif %}

                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="mt-3"></div>
                                <div class="table-responsive">
                                    <table id="datatable-basic" class="table text-nowrap"
                                        style="padding-bottom: 200px;">
                                        <thead class="table-primary">
                                            <tr>
                                                <th scope="col">S.No</th>
                                                <th scope="col">ApiName</th>
                                                <th scope="col">Code</th>
                                                <th scope="col">Parameters</th>
                                                {% if 'edit' in session.get('smsApiPermissions', []) %}
                                                    <th scope="col">Status</th>
                                                {% endif %}
                                                {% if 'edit' in session.get('smsApiPermissions', []) %}
                                                    <th scope="col">Action</th>
                                                {% elif 'delete' in session.get('smsApiPermissions', []) %}
                                                    <th scope="col">Action</th>
                                                {% endif %}

                                            </tr>
                                        </thead>

                                        <tbody>
                                            {% if smsAPIList %}
                                            {% for each_sms_api in smsAPIList %}
                                            <tr>
                                                <td>{{ smsSnoCount + loop.index}}</td>

                                                {% if each_sms_api.apiName %}
                                                <td>{{each_sms_api.apiName}}</td>
                                                {% else %}
                                                <td class="centered">-</td>
                                                {% endif %}
                                                
                                                {% if each_sms_api.code %}
                                                <td>{{each_sms_api.code}}</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="#viewKycAPIModal{{ loop.index }}">
                                                        <i class="ri-eye-line"></i>
                                                    </button>

                                                    <div class="modal fade" id="viewKycAPIModal{{ loop.index }}"
                                                        tabindex="-1" role="dialog"
                                                        aria-labelledby="viewKycAPIModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title" id="viewKycAPIModalLabel">
                                                                        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('sms_apis.update_sms_apis', smsApiId=each_sms_api.id) }}"
                                                                        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_sms_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>
                                                {% if 'edit' in session.get('smsApiPermissions', []) %}
                                                <td>
                                                    {% if each_sms_api.status == 1 %}
                                                    <a class="btn btn-sm btn-success"
                                                        href="{{ url_for('sms_apis.update_sms_api_status', smsApiId=each_sms_api.id, search_element=search_element, smsPage=smsPage) }}" data-requires-location>Active</a>
                                                    {% else %}
                                                    <a class="btn btn-sm btn-warning"
                                                        href="{{ url_for('sms_apis.update_sms_api_status',  smsApiId=each_sms_api.id, search_element=search_element, smsPage=smsPage) }}" data-requires-location>Deactive</a>
                                                    {% endif %}
                                                </td>
                                                {% endif %}
                                                <td>
                                                    {% if 'edit' in session.get('smsApiPermissions', []) %}
                                                    <a href="javascript:void(0);"
                                                        class="btn btn-icon btn-sm btn-info-transparent rounded-pill"
                                                    onclick= 'openUpdateSmsModal({
                                                        "id": "{{each_sms_api.id}}",
                                                        "apiName": "{{each_sms_api.apiName}}",
                                                        "code": "{{each_sms_api.code}}",
                                                        "paramsList": {{each_sms_api.paramsList}}
                                                    })'>
                                                        <i class="ri-edit-line"></i>
                                                    </a>
                                                    {% endif %}

                                                    <!-- <a href="javascript:void(0);" onclick="confirmDelete('{{ url_for('sms_apis.delete_sms_api', smsApiId=each_sms_api.id) }}')"><span class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i class="ri-delete-bin-line"></i></span></a>
                              </a> -->
                                                    {% if 'delete' in session.get('smsApiPermissions', []) %}
                                                    <a href="javascript:void(0);"
                                                        class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"
                                                        onclick='deleteSmsApiModel({
                                                            "id":"{{each_sms_api.id}}",
                                                            "search_element": "{{search_element}}",
                                                            "smsPage": "{{smsPage}}"
                                                        }
                                                        )'>
                                                        <i class="ri-delete-bin-line"></i>
                                                    </a>
                                                    {% endif %}

                                                    <!-- <a href="javascript:void(0);" class="delete-btn" data-smsapi-id="{{ each_sms_api.id }}">
                                    <button class="btn btn-icon btn-sm btn-danger-transparent rounded-pill">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </a> -->



                                                </td>

                                                {% endfor %}
                                                {% else %}
                                            <tr>
                                                <td colspan="12" style="text-align: center;">No Data Found</td>
                                            </tr>
                                            {% endif %}
                                        </tbody>
                                        {% with messages = get_flashed_messages(with_categories=true) %}
                                        {% if messages %}
                                        {% for category, message in messages %}
                                        {% if category == "SmsApis_success" %}
                                        <ul class=flashes>
                                            <h2><b>
                                                <center style="color:green">{{ message }}</center>
                                                </b></h2>
                                            {% elif category == "SmsApis_danger" %}
                                            <h2><b>
                                            <center style="color:red">{{ message }}</center>
                                                </b></h2>
                                        </ul>
                                         {% endif %}
                                            {% endfor %}
                                        {% 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 class="modal fade" id="smsapiDeleteModal" tabindex="-1" role="dialog"
                                aria-labelledby="smsapiDeleteModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="smsapiDeleteModalLabel">OTP Verification</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form method="POST" action="" enctype="multipart/form-data"
                                                id="smsApiDeleteForm" name="smsApiDeleteForm" data-requires-location>
                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                <input type="hidden" id="latitude_deletesmsapi" name="latitude">
                                                <input type="hidden" id="longitude_deletesmsapi" name="longitude">
                                                <input type="hidden" name="defaultVerificationId"
                                                    id="defaultVerificationIddeletesmsapi">


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

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

                                                <!-- Submit Button -->
                                                <div class="modal-footer justify-content-between">
                                                    <button type="button" class="btn btn-default"
                                                        data-bs-dismiss="modal">Close</button>
                                                    <button type="submit" class="btn btn-primary updateBtn"
                                                        id="updateBtndeletesmsapi" disabled>Submit</button>
                                                </div>


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


                            <div class="tab-pane fade {% if redirectval == 'AssignSms' %}show active{% endif %}"
                                id="nav-AssignSms" role="tabpanel">
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div class="d-flex justify-content-between align-items-center mb-4">
                                            <form method="GET"
                                                action="{{ url_for('sms_apis.sms_apis_list', redirectto=AssignSms)}}"
                                                class="row gy-2 gx-3 align-items-center">

                                                <div class="col-auto">
                                                    <input type="text" class="form-control"
                                                        value="{{assign_search_element}}" name="assign_search_element"
                                                        id="assign_search_element"
                                                        title="Only alphanumeric and special characters @#$()+_-/"
                                                        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('sms_apis.sms_apis_list')}}"><button
                                                            type="button" class="btn btn-warning">Reset</button></a>
                                                </div>

                                                {% for error in assignSmsForm.assign_search_element.errors %}
                                                <span class="text-danger" class="error">{{ error }}</span>
                                                {% endfor %}
                                            </form>

                                            <div class="prism-toggle">
                                                {% if 'add' in session.get('assignSmsPermissions', []) %}
                                                <button type="button"
                                                    class="btn btn-primary-light rounded-pill btn-wave"
                                                    data-bs-toggle="modal" data-bs-target="#addCategoryTask"
                                                    onClick="resetFormDataNew('addAssignSmsForm');openaddAssignsmsModal({})">
                                                    <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Add Assign
                                                    SMS Type
                                                </button>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="mt-3"></div>
                                <div class="table-responsive">
                                    <table id="datatable-basic" class="table text-nowrap"
                                        style="padding-bottom: 200px;">
                                        <thead class="table-primary">
                                            <tr>
                                                <th scope="col">S.No</th>
                                                <th scope="col">ApiName</th>
                                                <th scope="col">OTP Type</th>
                                                {% if 'edit' in session.get('assignSmsPermissions', []) %}
                                                    <th scope="col">Status</th>
                                                {% endif %}
                                                {% if 'edit' in session.get('assignSmsPermissions', []) %}
                                                    <th scope="col">Action</th>
                                                {% elif 'delete' in session.get('assignSmsPermissions', []) %}
                                                    <th scope="col">Action</th>
                                                {% endif %}

                                            </tr>
                                        </thead>

                                        <tbody>
                                            {% if assignSmsList %}
                                            {% for each_assign_sms in assignSmsList %}
                                            <tr>
                                                <td>{{ assignSmsSnoCount + loop.index}}</td>

                                                {% if each_assign_sms.apiName %}
                                                <td>{{each_assign_sms.apiName}}</td>
                                                {% else %}
                                                <td class="centered">-</td>
                                                {% endif %}
                                                
                                                {% if each_assign_sms.otpTypeList %}
                                                <td>{% for item in each_assign_sms.otpTypeList %}
                                                    {{ item }}{% if not loop.last %}, {% endif %}
                                                    {% endfor %}
                                                </td>
                                                {% else %}
                                                <td class="centered">-</td>
                                                {% endif %}
                                                

                                                {% if 'edit' in session.get('assignSmsPermissions', []) %}
                                                <td>
                                                    {% if each_assign_sms.status == 1 %}
                                                    <a class="btn btn-sm btn-success"
                                                        href="{{ url_for('sms_apis.update_assign_sms_status', AssignsmsId=each_assign_sms.id, assign_search_element=assign_search_element, assignSmsPage=assignSmsPage) }}" data-requires-location>Active</a>
                                                    {% else %}
                                                    <a class="btn btn-sm btn-warning"
                                                        href="{{ url_for('sms_apis.update_assign_sms_status', AssignsmsId=each_assign_sms.id, assign_search_element=assign_search_element, assignSmsPage=assignSmsPage) }}" data-requires-location>Deactive</a>
                                                    {% endif %}
                                                </td>
                                                {% endif %}

                                                <td>
                                                    {% if 'edit' in session.get('assignSmsPermissions', []) %}
                                                    <a href="javascript:void(0);"
                                                        class="btn btn-icon btn-sm btn-info-transparent rounded-pill"
                                                        onclick='openUpdateAssignSmsModal({
                                                            "id": "{{each_assign_sms.id}}",
                                                            "apiName": "{{each_assign_sms.apiName}}",
                                                            "smsApiId": "{{each_assign_sms.smsApiId}}",
                                                            "otpTypeList": {{each_assign_sms.otpTypeList}},
                                                         })'>
                                                        <i class="ri-edit-line"></i>
                                                    </a>
                                                    {% endif %}
                                                    <!--  <a href="javascript:void(0);" onclick="confirmDelete('{{ url_for('sms_apis.delete_assign_sms', AssignsmsId=each_assign_sms.id) }}')"><span class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i class="ri-delete-bin-line"></i></span></a>
                            </a> -->
                                                    {% if 'delete' in session.get('assignSmsPermissions', []) %}
                                                    <a href="javascript:void(0);"
                                                        class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"
                                                        onclick='deleteAssignSmsApiModel({
                                                            "id":"{{each_assign_sms.id}}",
                                                            "assignSmsPage": "{{assignSmsPage}}",
                                                            "assign_search_element": "{{assign_search_element}}"
                                                        })'>
                                                        <i class="ri-delete-bin-line"></i>
                                                    </a>
                                                    {% endif %}


                                                </td>

                                                {% endfor %}
                                                {% else %}
                                            <tr>
                                                <td colspan="12" style="text-align: center;">No Data Found</td>
                                            </tr>
                                            {% endif %}
                                        </tbody>
                                        {% with messages = get_flashed_messages(with_categories=true) %}
                                        {% if messages %}
                                        {% for category, message in messages %}
                                        {% if category == "SmsAssign_success" %}
                                        <ul class=flashes>
                                    
                                            <h2><b>
                                                    <center style="color:green">{{ message }}</center>
                                                </b></h2>
                                             {% elif category == "SmsAssign_danger" %}
                                            <h2><b>
                                            <center style="color:red">{{ message }}</center>
                                            </b></h2>
                                            {% endif %}
                                            {% endfor %}                                       
                                            {% endif %}
                                            {% endwith %}
                                        </ul>
                                    </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 assignSmsPagination %}
                                            <div class="pagination">
                                                {{ assignSmsPagination.links }}
                                            </div>
                                            {% endif %}
                                        </ul>
                                    </nav>
                                </div>

                            </div>

                            <div class="modal fade" id="assignsmsapiDeleteModal" tabindex="-1" role="dialog"
                                aria-labelledby="assignsmsapiDeleteModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="assignsmsapiDeleteModalLabel">OTP Verification
                                            </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form method="POST" action="" enctype="multipart/form-data"
                                                id="assignsmsapiDeleteForm" name="assignsmsapiDeleteForm" data-requires-location>
                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                <input type="hidden" id="latitude_deleteassignsms" name="latitude">
                                                <input type="hidden" id="longitude_deleteassignsms" name="longitude">
                                                <input type="hidden" name="defaultVerificationId"
                                                    id="defaultVerificationIddeleteassignsmsapi">

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

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

                                                <!-- Submit Button -->
                                                <div class="modal-footer justify-content-between">
                                                    <button type="button" class="btn btn-default"
                                                        data-bs-dismiss="modal">Close</button>
                                                    <button type="submit" class="btn btn-primary updateBtn"
                                                        id="updateBtndeleteassignsmsapi" disabled>Submit</button>
                                                </div>


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



                            <div class="tab-pane fade {% if redirectval == 'smsTemplates' %}show active{% endif %}"
                                id="nav-smsTemplates" role="tabpanel">
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div class="d-flex justify-content-between align-items-center mb-4">
                                            <!-- <form method="GET" action="{{ url_for('sms_apis.sms_apis_list')}}" class="row gy-2 gx-3 align-items-center">
                              
                          </form> -->

                                            <div class="row">
                                                <div class="col-xl-12">
                                                    <form method="GET"
                                                        action="{{ url_for('sms_apis.sms_apis_list',redirectto=smsTemplates)}}"
                                                        class="row gy-2 gx-3 align-items-center mb-4">

                                                        <div class="col-auto">
                                                            <input type="text" class="form-control"
                                                                value="{{smstemplate_search_element}}"
                                                                name="smstemplate_search_element"
                                                                id="smstemplate_search_element"
                                                                title="Only alphanumeric and special characters @#$()+_-/"
                                                                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('sms_apis.sms_apis_list')}}"><button
                                                                    type="button"
                                                                    class="btn btn-warning">Reset</button></a>
                                                        </div>
                                                        {% for error in
                                                        smsTemplateForm.smstemplate_search_element.errors %}
                                                        <span class="text-danger" class="error">{{ error }}</span>
                                                        {% endfor %}
                                                    </form>
                                                </div>
                                            </div>

                                            <div class="prism-toggle">
                                                {% if 'add' in session.get('smsTemplatePermissions', []) %}
                                                <button type="button"
                                                    class="btn btn-primary-light rounded-pill btn-wave"
                                                    data-bs-toggle="modal" data-bs-target="#addsmsTemplate"
                                                    onClick="resetFormDataNew('addSmsTemplateForm');openaddSmsTempModal({})">
                                                    <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Add SMS
                                                    Template
                                                </button>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="mt-3"></div>
                                <div class="table-responsive">
                                    <table id="datatable-basic" class="table text-nowrap"
                                        style="padding-bottom: 200px;">
                                        <thead class="table-primary">
                                            <tr>
                                                <th scope="col">S.No</th>
                                                <th scope="col">Api Name</th>
                                                <th scope="col">OTP Type</th>
                                                <th scope="col">Template Content</th>
                                                {% if 'edit' in session.get('smsTemplatePermissions', []) %}
                                                    <th scope="col">Status</th>
                                                {% endif %}
                                                {% if 'edit' in session.get('smsTemplatePermissions', []) %}
                                                    <th scope="col">Action</th>
                                                {% elif 'delete' in session.get('smsTemplatePermissions', []) %}
                                                    <th scope="col">Action</th>
                                                {% endif %}

                                            </tr>
                                        </thead>

                                        <tbody>
                                            {% if smsTemplatesList %}
                                            {% for each_sms_template in smsTemplatesList %}
                                            <tr>
                                                <td>{{smsTemplateSnoCount + loop.index}}</td>

                                                {% if each_sms_template.apiName %}
                                                <td>{{each_sms_template.apiName}}</td>
                                                {% else %}
                                                <td class="centered">-</td>
                                                {% endif %}
                                                
                                                {% if each_sms_template.otpTypeList %}
                                                <td>{% for item in each_sms_template.otpTypeList %}
                                                    {{ item }}{% if not loop.last %}, {% endif %}
                                                    {% endfor %}
                                                </td>
                                                {% else %}
                                                <td class="centered">-</td>
                                                {% endif %}
                                                
                                                {% if each_sms_template.templateContent %}
                                                <td>{{each_sms_template.templateContent}}</td>
                                                {% else %}
                                                <td class="centered">-</td>
                                                {% endif %}
                                                

                                                {% if 'edit' in session.get('smsTemplatePermissions', []) %}
                                                <td>
                                                    {% if each_sms_template.status == 1 %}
                                                    <a class="btn btn-sm btn-success"
                                                        href="{{ url_for('sms_apis.update_sms_template_status', smsTemplateId=each_sms_template.id, smstemplate_search_element=smstemplate_search_element, smsTemplatePage=smsTemplatePage) }}" data-requires-location>Active</a>
                                                    {% else %}
                                                    <a class="btn btn-sm btn-warning"
                                                        href="{{ url_for('sms_apis.update_sms_template_status', smsTemplateId=each_sms_template.id, smstemplate_search_element=smstemplate_search_element, smsTemplatePage=smsTemplatePage) }}" data-requires-location>Deactive</a>
                                                    {% endif %}
                                                </td>
                                                {% endif %}


                                                <td>
                                                    {% if 'edit' in session.get('smsTemplatePermissions', []) %}
                                                    <a href="javascript:void(0);"
                                                        class="btn btn-icon btn-sm btn-info-transparent rounded-pill"
                                                        onclick='openUpdateSmsTemplateModal({
                                                            "id": "{{each_sms_template.id}}",
                                                            "smsApiId": "{{each_sms_template.smsApiId}}",
                                                            "templateContent":"{{each_sms_template.templateContent}}",
                                                            "otpTypeList": {{each_sms_template.otpTypeList}}
                                                         })'>
                                                        <i class="ri-edit-line"></i>
                                                    </a>
                                                    {% endif %}

                                                    <!-- <a href="javascript:void(0);" onclick="confirmDelete('{{ url_for('sms_apis.delete_sms_template', smsTemplateId=each_sms_template.id) }}')"><span class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i class="ri-delete-bin-line"></i></span></a>
                            </a>
 -->
                                                    {% if 'delete' in session.get('smsTemplatePermissions', []) %}
                                                    <a href="javascript:void(0);"
                                                        class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"
                                                        onclick='deleteSmsTemplateApiModel({
                                                            "id": "{{each_sms_template.id}}",
                                                            "smsTemplatePage":"{{smsTemplatePage}}",
                                                            "smstemplate_search_element": "{{smstemplate_search_element}}"
                                                        })'>
                                                        <i class="ri-delete-bin-line"></i>
                                                    </a>
                                                    {% endif %}


                                                    <!--  <a href="javascript:void(0);" class="smstemp-delete-btn" data-assignsmsapi-id="{{ each_sms_template.id }}">
                                <button class="btn btn-icon btn-sm btn-danger-transparent rounded-pill">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                            </a> -->
                                                </td>

                                                {% endfor %}
                                                {% else %}
                                            <tr>
                                                <td colspan="12" style="text-align: center;">No Data Found</td>
                                            </tr>
                                            {% endif %}
                                        </tbody>
                                        {% with messages = get_flashed_messages(with_categories=true) %}
                                        {% if messages %}
                                        {% for category, message in messages %}
                                        {% if category == "SmsTemplates_success" %}
                                        <ul class=flashes>
                                    
                                            <h2><b>
                                                    <center style="color:green">{{ message }}</center>
                                                </b></h2>
                                       {% elif category == "SmsTemplates_danger" %}
                                        <h2><b>
                                            <center style="color:red">{{ message }}</center>
                                            </b></h2>
                                        {% endif %}
                                        {% endfor %}
                                    
                                        {% endif %}
                                        {% endwith %}
                                        </ul>
                                    </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 smsTemplatePagination %}
                                            <div class="pagination">
                                                {{ smsTemplatePagination.links }}
                                            </div>
                                            {% endif %}
                                        </ul>
                                    </nav>
                                </div>

                            </div>

                            <div class="modal fade" id="smstemplateDeleteModal" tabindex="-1" role="dialog"
                                aria-labelledby="smstemplateDeleteModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="smstemplateDeleteModalLabel">OTP Verification
                                            </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form method="POST" action="" enctype="multipart/form-data"
                                                id="smsTemplateApiDeleteForm" name="smsTemplateApiDeleteForm" data-requires-location>
                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                <input type="hidden" id="latitude_deletesmstemp" name="latitude">
                                                <input type="hidden" id="longitude_deletesmstemp" name="longitude">
                                                <input type="hidden" name="defaultVerificationId"
                                                    id="defaultVerificationIddeletesmstemplate">

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

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

                                                <!-- Submit Button -->
                                                <div class="modal-footer justify-content-between">
                                                    <button type="button" class="btn btn-default"
                                                        data-bs-dismiss="modal">Close</button>
                                                    <button type="submit" class="btn btn-primary form_submit"
                                                        id="updateBtndeletesmstemplate" disabled>Submit</button>
                                                </div>


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


                            <div class="modal fade" id="updateassignkyc" tabindex="-1" role="dialog"
                                aria-labelledby="updateTaskLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="updateTaskLabel">Update Assign SMS Type </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form method="POST" action="" enctype="multipart/form-data"
                                                id="updateAssignSmsForm" name="updateAssignSmsForm">
                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                <input type="hidden" id="latitude_updateassignsms" name="latitude">
                                                <input type="hidden" id="longitude_updateassignsms" name="longitude">
                                                <input type="hidden" name="defaultVerificationId"
                                                    id="defaultVerificationIdupdateassignsms">
                                                <div class="form-group">
                                                    <label for="smsApiId">APIName*</label>
                                                    <select class="form-control chosen-select" id="smsApiIdEdit"
                                                        name="smsApiId" required>
                                                        {% for each_api in smsAPIList %}
                                                        <option value="{{each_api.id}}">{{each_api.apiName}}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <span id="smsApiId_edit_error" class="error"></span>
                                                </div>
                                                <div class="form-group">
                                                    <label for="otpTypeList">OTP Type</label>
                                                    <select class="form-control chosen-select" name="otpTypeList"
                                                        id="AssignsmsId" data-placeholder="Select otpType" multiple
                                                        required>

                                                        <option value="Forgot_TPIN_SMS">Forgot_TPIN_SMS</option>
                                                        <option value="Transaction_Success_SMS">Transaction_Success_SMS
                                                        </option>
                                                        <option value="Wrong_Password_SMS">Wrong_Password_SMS</option>
                                                        <option value="Forgot_Password_OTP">Forgot_Password_OTP</option>
                                                        <option value="TPIN_Setup_OTP">TPIN_Setup_OTP</option>
                                                        <option value="Change_Password_OTP">Change_Password_OTP</option>
                                                        <option value="Transaction_Verify_OTP">Transaction_Verify_OTP
                                                        </option>
                                                        <option value="Settlement_Done_SMS">Settlement_Done_SMS</option>
                                                        <option value="KYC_Pending_SMS">KYC_Pending_SMS</option>
                                                        <option value="Signup_Mobile_Verification">
                                                            Signup_Mobile_Verification</option>
                                                        <option value="Payment_Failed_SMS">Payment_Failed_SMS</option>
                                                        <option value="KYC_Approval_SMS">KYC_Approval_SMS</option>
                                                        <option value="Payment_Success_SMS">Payment_Success_SMS</option>
                                                        <option value="KYC_Rejected_SMS">KYC_Rejected_SMS</option>
                                                        <option value="Change_TPIN_OTP">Change_TPIN_OTP</option>
                                                        <option value="KYC_Submitted_SMS">KYC_Submitted_SMS</option>
                                                        <option value="Grievance_success">Grievance_success</option>
                                                        <option value="Grievance_accept">Grievance_accept</option>
                                                        <option value="Grievance_reject">Grievance_reject</option>
                                                        <option value="Bill_Payment_Success">Bill_Payment_Success
                                                        </option>
                                                        <option value="Insufficient_Funds">Insufficient_Funds</option>
                                                        <option value="Common_Otp">Common_Otp</option>
                                                        <option value="Verify_OTP">Verify_OTP</option>
                                                        <option value="Other_OTP">Other_OTP</option>
                                                    </select>
                                                    <span id="otpTypeList_edit_error" class="error"></span>
                                                </div>


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

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

                                                <!-- Add more edit form fields as needed -->
                                                <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="updateBtnupdateassignsms" disabled>Update</button>
                                                </div>

                                                <!-- Add more edit form fields as needed -->
                                                <!-- <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div> -->
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal fade" id="addCategoryTask" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h6 class="modal-title" id="mail-ComposeLabel">Add Assign SMS Type</h6>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <form method="POST"
                                            action="{{url_for('sms_apis.add_assign_sms_api',redirectto=AssignSms)}}"
                                            enctype="multipart/form-data" id="addAssignSmsForm" name="addAssignSmsForm">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="latitude_addassignsms" name="latitude">
                                            <input type="hidden" id="longitude_addassignsms" name="longitude">
                                            <input type="hidden" name="defaultVerificationId"
                                                id="defaultVerificationId">
                                            <div class="modal-body px-4">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="smsApiId">API Name*</label>
                                                            <select class="form-control chosen-select" name="smsApiId"
                                                                id="smsApiId" required>
                                                                <option value="">Select</option>
                                                                {% for each_api in smsAPIList %}
                                                                <option value="{{each_api.id}}">{{each_api.apiName}}
                                                                </option>
                                                                {% endfor %}
                                                            </select><span id="smsApiId_error" class="error"></span>

                                                        </div>
                                                    </div>


                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="otpTypeList">OTP Type*</label>
                                                            <select class="form-control chosen-select" id="otpTypeList"
                                                                name="otpTypeList" multiple required>
                                                                <option value="">Select</option>
                                                                <option value="Forgot_TPIN_SMS">Forgot_TPIN_SMS</option>
                                                                <option value="Transaction_Success_SMS">
                                                                    Transaction_Success_SMS</option>
                                                                <option value="Wrong_Password_SMS">Wrong_Password_SMS
                                                                </option>
                                                                <option value="Forgot_Password_OTP">Forgot_Password_OTP
                                                                </option>
                                                                <option value="TPIN_Setup_OTP">TPIN_Setup_OTP</option>
                                                                <option value="Change_Password_OTP">Change_Password_OTP
                                                                </option>
                                                                <option value="Transaction_Verify_OTP">
                                                                    Transaction_Verify_OTP</option>
                                                                <option value="Settlement_Done_SMS">Settlement_Done_SMS
                                                                </option>
                                                                <option value="KYC_Pending_SMS">KYC_Pending_SMS</option>
                                                                <option value="Signup_Mobile_Verification">
                                                                    Signup_Mobile_Verification</option>
                                                                <option value="Payment_Failed_SMS">Payment_Failed_SMS
                                                                </option>
                                                                <option value="KYC_Approval_SMS">KYC_Approval_SMS
                                                                </option>
                                                                <option value="Payment_Success_SMS">Payment_Success_SMS
                                                                </option>
                                                                <option value="KYC_Rejected_SMS">KYC_Rejected_SMS
                                                                </option>
                                                                <option value="Change_TPIN_OTP">Change_TPIN_OTP</option>
                                                                <option value="KYC_Submitted_SMS">KYC_Submitted_SMS
                                                                </option>
                                                                <option value="Grievance_success">Grievance_success
                                                                </option>
                                                                <option value="Grievance_accept">Grievance_accept
                                                                </option>
                                                                <option value="Grievance_reject">Grievance_reject
                                                                </option>
                                                                <option value="Bill_Payment_Success">
                                                                    Bill_Payment_Success</option>
                                                                <option value="Insufficient_Funds">Insufficient_Funds
                                                                </option>
                                                                <option value="Common_Otp">Common_Otp</option>
                                                                <option value="Verify_OTP">Verify_OTP</option>
                                                                <option value="Bbps_Service">Bbps_Service</option>
                                                                <option value="Other_OTP">Other_OTP</option>

                                                            </select>
                                                            <span id="otpTypeList_error" class="error"></span>
                                                        </div>
                                                    </div>

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

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

                                                </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="updateBtnaddassignsms" disabled>Submit</button>
                                            </div>

                                            <!-- <div class="modal-footer justify-content-between">
                  <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary" id="form_submit">Submit</button>
              </div> -->
                                        </form>
                                    </div>
                                </div>
                            </div>


                            <div class="modal fade" id="updatesmstemplate" tabindex="-1" role="dialog"
                                aria-labelledby="updateTaskLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="updateTaskLabel">Update SMS Template </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form method="POST" action="" enctype="multipart/form-data"
                                                id="updateSmsTemplateForm" name="updateSmsTemplateForm">
                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                <input type="hidden" id="latitude_updatesmstemp" name="latitude">
                                                <input type="hidden" id="longitude_updatesmstemp" name="longitude">
                                                <input type="hidden" name="defaultVerificationId"
                                                    id="defaultVerificationIdupdatetemplate">

                                                <div class="form-group">
                                                    <label for="smsApiId">APIName*</label>
                                                    <select class="form-control chosen-select" id="editsmsApiId"
                                                        name="smsApiId" required>
                                                        {% for each_api in smsAPIList %}
                                                        <option value="{{each_api.id}}">{{each_api.apiName}}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <span id="smsApiId_template_edit_error" class="error"></span>
                                                </div>


                                                <div class="form-group">
                                                    <label for="otpTypeList">OTP Type*</label>
                                                    <select class="form-control chosen-select" name="otpTypeList"
                                                        id="smsTemplateId" data-placeholder="Select OTP Type" required>
                                                        <option value="Forgot_TPIN_SMS">Forgot_TPIN_SMS</option>
                                                        <option value="Transaction_Success_SMS">Transaction_Success_SMS
                                                        </option>
                                                        <option value="Wrong_Password_SMS">Wrong_Password_SMS</option>
                                                        <option value="Forgot_Password_OTP">Forgot_Password_OTP</option>
                                                        <option value="TPIN_Setup_OTP">TPIN_Setup_OTP</option>
                                                        <option value="Change_Password_OTP">Change_Password_OTP</option>
                                                        <option value="Transaction_Verify_OTP">Transaction_Verify_OTP
                                                        </option>
                                                        <option value="Settlement_Done_SMS">Settlement_Done_SMS</option>
                                                        <option value="KYC_Pending_SMS">KYC_Pending_SMS</option>
                                                        <option value="Signup_Mobile_Verification">
                                                            Signup_Mobile_Verification</option>
                                                        <option value="Payment_Failed_SMS">Payment_Failed_SMS</option>
                                                        <option value="KYC_Approval_SMS">KYC_Approval_SMS</option>
                                                        <option value="Payment_Success_SMS">Payment_Success_SMS</option>
                                                        <option value="KYC_Rejected_SMS">KYC_Rejected_SMS</option>
                                                        <option value="Change_TPIN_OTP">Change_TPIN_OTP</option>
                                                        <option value="KYC_Submitted_SMS">KYC_Submitted_SMS</option>
                                                        <option value="Grievance_success">Grievance_success</option>
                                                        <option value="Grievance_accept">Grievance_accept</option>
                                                        <option value="Grievance_reject">Grievance_reject</option>
                                                        <option value="Bill_Payment_Success">Bill_Payment_Success
                                                        </option>
                                                        <option value="Insufficient_Funds">Insufficient_Funds</option>
                                                        <option value="Common_Otp">Common_Otp</option>
                                                        <option value="Verify_OTP">Verify_OTP</option>
                                                        <option value="Bbps_Service">Bbps_Service</option>
                                                        <option value="Other_OTP">Other_OTP</option>
                                                    </select>
                                                    <span id="otpTypeList_template_edit_error" class="error"></span>
                                                </div>

                                                <div class="form-group">
                                                    <label for="templateContent">Template Content*</label>
                                                    <textarea rows="5" class="form-control" name="templateContent"
                                                        id="templateContentEdit" required></textarea>
                                                    <span id="templateContent_template_edit_error" class="error"></span>
                                                </div>

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

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

                                                <!-- Add more edit form fields as needed -->
                                                <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="updateBtnupdatetemplate" disabled>Update</button>
                                                </div>

                                                <!-- Add more edit form fields as needed -->
                                                <!-- <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div> -->
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="modal fade" id="addsmsTemplate" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h6 class="modal-title" id="mail-ComposeLabel">Add SMS Template</h6>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <form method="POST"
                                            action="{{url_for('sms_apis.add_sms_template',redirectto=smsTemplates)}}"
                                            enctype="multipart/form-data" id="addSmsTemplateForm"
                                            name="addSmsTemplateForm">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="latitude_addsmstemp" name="latitude">
                                            <input type="hidden" id="longitude_addsmstemp" name="longitude">
                                            <input type="hidden" name="defaultVerificationId"
                                                id="defaultVerificationId">
                                            <div class="modal-body px-4">
                                                <div class="row">
                                                    <!-- API Name -->
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="smsApiId">API Name*</label>
                                                            <select class="form-control chosen-select" name="smsApiId"
                                                                id="smsApiId" required>
                                                                <option value="">Select</option>
                                                                {% for each_api in smsAPIList %}
                                                                <option value="{{each_api.id}}">{{each_api.apiName}}
                                                                </option>
                                                                {% endfor %}
                                                            </select>
                                                            <span id="smsApiId_template_error" class="error"></span>
                                                        </div>
                                                    </div>

                                                    <!-- OTP Type -->
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="otpTypeList">OTP Type*</label>
                                                            <select class="form-control chosen-select" id="otpTypeList"
                                                                name="otpTypeList" required>
                                                                <option value="">Select</option>
                                                                <option value="Forgot_TPIN_SMS">Forgot_TPIN_SMS</option>
                                                                <option value="Transaction_Success_SMS">
                                                                    Transaction_Success_SMS</option>
                                                                <option value="Wrong_Password_SMS">Wrong_Password_SMS
                                                                </option>
                                                                <option value="Forgot_Password_OTP">Forgot_Password_OTP
                                                                </option>
                                                                <option value="TPIN_Setup_OTP">TPIN_Setup_OTP</option>
                                                                <option value="Change_Password_OTP">Change_Password_OTP
                                                                </option>
                                                                <option value="Transaction_Verify_OTP">
                                                                    Transaction_Verify_OTP</option>
                                                                <option value="Settlement_Done_SMS">Settlement_Done_SMS
                                                                </option>
                                                                <option value="KYC_Pending_SMS">KYC_Pending_SMS</option>
                                                                <option value="Signup_Mobile_Verification">
                                                                    Signup_Mobile_Verification</option>
                                                                <option value="Payment_Failed_SMS">Payment_Failed_SMS
                                                                </option>
                                                                <option value="KYC_Approval_SMS">KYC_Approval_SMS
                                                                </option>
                                                                <option value="Payment_Success_SMS">Payment_Success_SMS
                                                                </option>
                                                                <option value="KYC_Rejected_SMS">KYC_Rejected_SMS
                                                                </option>
                                                                <option value="Change_TPIN_OTP">Change_TPIN_OTP</option>
                                                                <option value="KYC_Submitted_SMS">KYC_Submitted_SMS
                                                                </option>
                                                                <option value="Grievance_success">Grievance_success
                                                                </option>
                                                                <option value="Grievance_accept">Grievance_accept
                                                                </option>
                                                                <option value="Grievance_reject">Grievance_reject
                                                                </option>
                                                                <option value="Bill_Payment_Success">
                                                                    Bill_Payment_Success</option>
                                                                <option value="Insufficient_Funds">Insufficient_Funds
                                                                </option>
                                                                <option value="Common_Otp">Common_Otp</option>
                                                                <option value="Verify_OTP">Verify_OTP</option>
                                                                <option value="Bbps_Service">Bbps_Service</option>
                                                                <option value="Other_OTP">Other_OTP</option>
                                                            </select>
                                                            <span id="otpTypeList_template_error" class="error"></span>
                                                        </div>

                                                    </div>
                                                </div>

                                                <!-- Template Content -->
                                                <div class="row mt-3">
                                                    <div class="col-12">
                                                        <div class="form-group">
                                                            <label for="templateContent">Template Content*</label>
                                                            <textarea class="form-control" rows="4"
                                                                name="templateContent" id="templateContent"
                                                                pattern="^[\s\S]*$"
                                                                title="Template Content contain all characters"
                                                                placeholder="Enter template content"
                                                                required></textarea>
                                                            <span id="templateContent_template_error"
                                                                class="error"></span>
                                                        </div>
                                                    </div>
                                                </div>

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

                                                <div class="form-group mt-3 otp-section" data-index="addingsmsTemplate"
                                                    style="display: none;" id="verifySmsTempaddDiv">
                                                    <label for="otpCodeaddingsmsTemplate">Enter OTP*</label>
                                                    <input type="text" class="form-control otp-input"
                                                        id="otpCodeaddingsmsTemplate" name="otpCode"
                                                        placeholder="Enter OTP">
                                                    <div class="mt-2">
                                                        <button type="button" class="btn btn-primary verifyOtpBtn"
                                                            data-index="addingsmsTemplate">Verify OTP</button>
                                                        <button type="button" class="btn btn-secondary resendOtpBtn"
                                                            data-index="addingsmsTemplate"
                                                            data-mail-type="API Setup">Resend OTP</button>
                                                    </div>
                                                    <div id="otpMessageaddingsmsTemplate" class="text-danger mt-2">
                                                    </div>
                                                </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="updateBtnaddingsmsTemplate" disabled>Submit</button>
                                            </div>

                                            <!-- <div class="modal-footer justify-content-between">
                                            <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                                            <button type="submit" class="btn btn-primary" id="form_submit">Submit</button>
                                        </div> -->
                                        </form>
                                    </div>
                                </div>
                            </div>


                            <div class="modal fade" id="updateTask" tabindex="-1" role="dialog"
                                aria-labelledby="updateTaskLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="updateTaskLabel">Update SMS API</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form method="POST" action="" enctype="multipart/form-data"
                                                id="updateSmsForm" name="updateSmsForm">
                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                <input type="hidden" id="latitude_updatesmsapi" name="latitude">
                                                <input type="hidden" id="longitude_updatesmsapi" name="longitude">
                                                <input type="hidden" name="defaultVerificationId"
                                                    id="defaultVerificationIdupdatesmsapi">
                                                <div class="form-group">
                                                    <label for="apiName"> API Name*</label>
                                                    <input type="text" class="form-control" id="apiNameEdit"
                                                        name="apiName" 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_error" class="error"></span>
                                                </div>
                                                <div class="form-group" id="updateInputContainer">
                                                    <label for="params">Parameters</label>
                                                    <br>
                                                </div>

                                                <div class="form-group">
                                                    <button type="button"
                                                        class="btn btn-primary-light rounded-pill btn-wave"
                                                        onclick="addInputField('updateInputContainer')">Add
                                                        Param</button>
                                                </div>


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

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

                                                <!-- Add more edit form fields as needed -->
                                                <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="updateBtnupdatesmsapi" disabled>Update</button>
                                                </div>

                                                <!-- Add more edit form fields as needed -->
                                                <!-- <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div> -->
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal fade" id="addtask" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h6 class="modal-title" id="mail-ComposeLabel">Create New SMS API</h6>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <form method="POST" action="{{url_for('sms_apis.add_sms_api')}}"
                                            enctype="multipart/form-data" id="addSmsForm" name="addSmsForm">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="latitude_addsmsapi" name="latitude">
                                            <input type="hidden" id="longitude_addsmsapi" name="longitude">
                                            <input type="hidden" name="defaultVerificationId"
                                                id="defaultVerificationId">
                                            <div class="modal-body px-4">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="apiName">APIName*</label>
                                                            <input type="text" class="form-control" id="apiName"
                                                                name="apiName" placeholder="Enter api name"
                                                                title="API Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
                                                                required>
                                                        </div>
                                                        <span id="apiName_error" class="error"></span>
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="code">Code*</label>
                                                        <select class="form-select" name="code" id="code" required>
                                                            <option value="">Select code</option>
                                                            <option value="Twilio">Twilio</option>
                                                            <option value="Text_Local">Text Local</option>
                                                            <option value="Fast2Sms">Fast2Sms</option>
                                                        </select>
                                                        <span id="code_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="removeParamsField('inputContainer')">Remove
                                                            Param</button>
                                                    </div>

                                                </div>

                                                <div class="form-group mt-3">
                                                    <button type="button" class="btn btn-warning generateOtpBtn"
                                                        data-index="add" id="updateaddGenerateBtn"
                                                        data-mail-type="API Setup">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" disabled>Submit</button>
                                                </div>


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


                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
</div>


<script type="text/javascript">

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

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

            event.preventDefault();

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function (position) {
                        latInput.value = position.coords.latitude;
                        lngInput.value = position.coords.longitude;
                        form.submit();
                    },
                    function () {
                        alert("Location access is required to proceed. Please enable location services.");
                    },
                    {
                        enableHighAccuracy: true,
                        timeout: 10000,
                        maximumAge: 0
                    }
                );
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        });
    });
  });
</script>
<script>
    function Activate() {
        alert("Do you want to activate this role?");
    }
</script>
<script type="text/javascript">
    $(document).ready(function () {
        // Validate Add Form
        $('#addSmsForm').validate({
            rules: {
                apiName: {
                    required: true,
                    minlength: 3,
                    maxlength: 75,
                    pattern: /^[a-zA-Z0-9\s@#$()+_\-/]+$/
                },
                code: {
                    required: true,
                }
            },
            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",
                }
            },
            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 == 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 == 1) {
                                                    form.reset();
                                                    window.location.href = 'sms_apis_list?redirectto=smsApis&smsPage={{smsPage}}';

                                } 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
        $('#updateSmsForm').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,
                }
            },
            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",
                }
            },
            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 == 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 == 1) {
                                                    form.reset();
                                                    window.location.href = 'sms_apis_list?redirectto=smsApis&smsPage={{smsPage}}';
                            } 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.");
                    }
                );
            }
        });

        $('#addAssignSmsForm').validate({
            rules: {
                smsApiId: {
                    required: true,
                },
                otpTypeList: {
                    required: true,
                }
            },
            messages: {
                smsApiId: {
                    required: "Please select API Name",
                },
                otpTypeList: {
                    required: "Please Select a OTP 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 == 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 == 1) {
                                                form.reset();
                                                window.location.href = 'sms_apis_list?redirectto=AssignSms&assignSmsPage={{assignSmsPage}}';
                            } 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
        $('#updateAssignSmsForm').validate({
            errorElement: 'label',
            errorClass: 'error',
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            ignore: ":hidden",
            rules: {
                smsApiId: {
                    required: true,
                },
                otpTypeList: {
                    required: true,
                }
            },
            messages: {
                smsApiId: {
                    required: "Please select API Name",
                },
                otpTypeList: {
                    required: "Please Select a OTP 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 == 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 == 1) {
                                                form.reset();
                                                window.location.href = 'sms_apis_list?redirectto=AssignSms&assignSmsPage={{assignSmsPage}}';
                            } 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.");
                    }
                );
            }
        });

        $('#addSmsTemplateForm').validate({
            rules: {
                smsApiId: {
                    required: true,
                },
                otpTypeList: {
                    required: true,
                },
                templateContent: {
                    required: true,
                }
            },
            messages: {
                smsApiId: {
                    required: "Please select API Name",
                },
                otpTypeList: {
                    required: "Please Select OTP Type",
                },
                templateContent: {
                    required: "Template Content 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);
                    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 == 4) {
                                form.reset();
                                location.reload();
                            } else if (response.responseStatus == 0) {
                                $('.form_submit').prop('disabled', false);
    				            $('#newLoadingModel').hide();
                                $.each(response.result, function (key, value) {
                                    $('#' + key + "_template_error").text(value);
                                });
                
                            }else if (response.responseStatus == 1) {
                                                form.reset();
                                                window.location.href = 'sms_apis_list?redirectto=smsTemplates&smsTemplatePage={{smsTemplatePage}}';
                            } 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
        $('#updateSmsTemplateForm').validate({
            errorElement: 'label',
            errorClass: 'error',
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            ignore: ":hidden",
            rules: {
                smsApiId: {
                    required: true,
                },
                otpTypeList: {
                    required: true,
                },
                templateContent: {
                    required: true,
                }
            },
            messages: {
                smsApiId: {
                    required: "Please select API Name",
                },
                otpTypeList: {
                    required: "Please Select OTP Type",
                },
                templateContent: {
                    required: "Template Content 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);
                    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 == 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 + "_template_edit_error").text(value);
                                });
                                
                            }else if (response.responseStatus == 1) {
                                                form.reset();
                                                window.location.href = 'sms_apis_list?redirectto=smsTemplates&smsTemplatePage={{smsTemplatePage}}';
                            } 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>
<script>
    // window.addEventListener('DOMContentLoaded', function () {
    //   const hash = window.location.hash;
    //   console.log("###########", hash)
    //   if (hash) {
    //     const tabTrigger = document.querySelector(`a[href="${hash}"]`);
    //     if (tabTrigger) {
    //       new bootstrap.Tab(tabTrigger).show();
    //     }
    //   }

    // const tabLinks = document.querySelectorAll('a[data-bs-toggle="tab"]');
    // tabLinks.forEach(tab => {
    //   tab.addEventListener('shown.bs.tab', function (e) {
    //     history.replaceState(null, null, e.target.getAttribute('href'));
    //   });
    // });
    //   });

</script>
<!-- Add the following JavaScript code -->
<!-- <script>
    function confirmDelete(url) {
        if (confirm("Are you sure want to delete?")) {
            window.location.href = url;
        }
    }
</script> -->




{%endblock%}