{% extends 'root/base.html' %}
{% load static %}
{% block title %} Addresses (Master Settings) {% endblock %}
{% block maincontent %}
{% include 'root/loader.html' %}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<div class="container-fluid">
    <div class="configuration-table_wrapper">
        <div class="elements-space-between">
            <h3>Maintain Addresses</h3>
            <div>
                <button class="btn btn-outline-primary" title="Template"
                    onclick="location.href='{% url 'eProc_Master_Settings:extract_address_data_Template' %}'" type="button">
                    <i class="fas fa-download"></i> template
                </button>
                <button class="btn btn-outline-primary" title="Extract"
                    onclick="location.href='{% url 'eProc_Master_Settings:extract_address_data' %}'" type="button">
                    <i class="fas fa-download"></i> extract data
                </button>
                <button class="btn btn-outline-primary modal_upload" id="id_upload_redirect_data" title="Upload Data"
                    value="address_upload" onclick="onclick_upload_button()" type="button">
                    <i class="fas fa-cloud-upload-alt"></i> upload data
                </button>
                <button class="btn btn-primary" id="id_add_data" type="button" value="ADD" title="Add Address" onclick="add_new_address(this);">
                    <i class="fa fa-plus"></i> Add Address
                </button>
                <button class="btn btn-outline-secondary" id="id_close" value="close" title="Close" onclick="window_close();">
                    <i class="fas fa-times"></i> close
                </button>
            </div>
        </div>
        <hr>
        <div class="configuration-table_section">
            <div id="err_msg_app_settings"> </div>
            <div id="err_msg_app_settings_t" class="alert alert-success" hidden><span id="success_msg_id"></span></div>
            <div class="table-container">
                <table id="display_basic_table" class="class_basic_country_table table table-bordered custom-table ">
                    <thead id="id_address_table_header">
                        <tr>
                            <th id="hg_select_checkbox"  hidden>
                                <div id="id_check_all" style="display:none;">
                                    <input type="checkbox" id="selectAll" name="chk[]">
                                </div>
                            </th>
                            <th>Address Number</th>
                            <th>Name 1</th>
                            <th>Name 2</th>
                            <th>City</th>
                            <th>Email</th>
                            <th>Country</th>
                            <th>Action</th>
                            <th hidden>del_ind_flag</th>
                            <th hidden>Guid</th>
                        </tr>
                    </thead>
                    <tbody id="id_address_tbody">
                        {% for data in address_data %}
                        <tr>
                            <td class="class_select_checkbox" hidden>
                                <input type="checkbox" class="checkbox_check" onclick="valueChanged()" required>
                            </td>
                            <td><a href="#" onclick="onclick_address_no({{ data.address_number}})">{{data.address_number}}</a></td>
                            <td>{{ data.name1}}</td>
                            <td>{{ data.name2}}</td>
                            <td>{{ data.city}}</td>
                            <td>{{ data.email }}</td>
                            {% for ct in country_list %}
                            {% if data.country_code == ct.country_code %}
                            <td>{{ct.country_name}}</td>
                            {% endif %}
                            {% endfor %}
                            <td class="item-action-icon-section">
                                <span title="Edit Address" id="edit-{{data.address_number}}"
                                    onclick="onclick_editaddress_button(this.id)">
                                    <i class="fas fa-edit item-action-icons"> edit</i>
                                </span>
                                <span title="Delete Address" id="delete-{{data.address_number}}"
                                    onclick="get_address_detail_to_delete(this.id)" data-target="#delete_restricted_confirm_popup">
                                    <i class="material-icons item-action-icons">delete</i>
                                </span>
                            </td>
                            <td hidden>{{ data.del_ind_flag}}</td>
                            <td hidden>{{ data.address_guid}}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--end of display basic address type table-->

    <!--  address popuptable data details - Start -->
    <div class="modal fade" id="address_details">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 95%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Address Details</h5>
                    <button type="button" class="btn btn-outline-secondary remove_upload_data" data-dismiss="modal"><i
                            class="fas fa-times"></i> close</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <div class="popup-vertical-scroll">
                        <div class="row">
                            <div class="col m-3">
                                <div class="form-group row" hidden>
                                    <label class="col-4 col-form-label">Address Number:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_address_number" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Title:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode" id="id_addresses_title" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Name1:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode" id="id_addresses_name1" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Name2:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode" id="id_addresses_name2" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Street:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_street" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Area:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode" id="id_addresses_area" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Landmark:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_landmark" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">City:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode" id="id_addresses_city"
                                            disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Address Partner Type:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_partnertype" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Org Address Source System:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_source" disabled>
                                    </div>
                                </div>
                            </div>
                            <div class="col m-3">
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Postal Code:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode check_postal_code"
                                            id="id_addresses_postalcode" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Region:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_region" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Mobile Number:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_mobile_number" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Telephone Number:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_telephone_number" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Fax Number:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_fax_number" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Email:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode" id="id_addresses_email"
                                            disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Country Code:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_country_code" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">Language:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_language_id" disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-4 col-form-label">TIME ZONE:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_time_zone" disabled>
                                    </div>
                                </div>
                                <div class="form-group row" hidden>
                                    <label class="col-4 col-form-label">Del Ind:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_del_ind_flag">
                                    </div>
                                </div>
                                <div class="form-group row" hidden>
                                    <label class="col-4 col-form-label">Address Guid:</label>
                                    <div class="col-8">
                                        <input type="text" class="form-control hg_edit_display_mode"
                                            id="id_addresses_address_guid">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal footer -->
            </div>
        </div>
    </div>
    <!--  Delivery address process data details - End -->

    <!--  address popuptable ADD details and upload update and edit in main table- Start -->
    <div class="modal fade" id="address_add_details" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 95%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Address Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <div class="popup-vertical-scroll">
                        <div id="id_check_success_messages" class="alert alert-success check_success_message" hidden></div>
                        <div id="id_check_error_messages" class="alert alert-danger check_error_messages" hidden></div>
                        <div id="id_check_special_character_messages"
                            class="alert alert-danger check_special_character_messages" hidden>
                            <p id="id_error_msg_address_number"></p>
                            <p id="id_error_msg_title"></p>
                            <p id="id_error_msg_name1"></p>
                            <p id="id_error_msg_name2"></p>
                            <p id="id_error_msg_street"></p>
                            <p id="id_error_msg_area"></p>
                            <p id="id_error_msg_landmark"></p>
                            <p id="id_error_msg_city"></p>
                            <p id="id_error_msg_org_address_source_system"></p>
                            <p id="id_error_msg_postal_code"></p>
                            <p id="id_error_msg_region"></p>
                            <p id="id_error_msg_mobile_number"></p>
                            <p id="id_error_msg_telephone_number"></p>
                            <p id="id_error_msg_fax_number"></p>
                            <p id="id_error_msg_email"></p>
                        </div>
                        <div id="error_msg_id" class="alert alert-danger display-none" role="alert"><span
                                id="error_message"></span></div>
                        <div id="id_warning_msg_id" class="alert alert-warning display-none" role="alert"></div>
                        <div id="id_info_msg_id" class="alert alert-primary display-none" role="alert"></div>
                        <form id ="address_clear">
                            <div class="row">
                                <div class="col m-3">
                                    <div class="form-group row">
                                        <div class="col-4">
                                            <label class="col-form-label">Address Number</label><span class="hg_required"></span>
                                        </div>
                                        <div class="col-8">
                                            <input type="text" class="form-control mandatory_fields hg_edit_display_mode " id="id_add_addresses_address_number" required>
                                            <span id="err_addressnumber" class="error_message" hidden></span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-4 col-form-label">Title</label>
                                        <div class="col-8">
                                            <input type="text" class="form-control" id="id_add_addresses_title">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-4">
                                            <label class="col-form-label">Name1</label><span class="hg_required"></span>
                                        </div>
                                        <div class="col-8">
                                            <input type="text" class="form-control hg_edit_display_mode mandatory_fields" id="id_add_addresses_name1">
                                            <span id="err_name1" class="error_message" hidden></span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-4 col-form-label">Name2</label>
                                        <div class="col-8">
                                            <input type="text" class="form-control" id="id_add_addresses_name2">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-4">
                                            <label class="col-form-label">Street</label><span class="hg_required"></span>
                                        </div>
                                        <div class="col-8">
                                            <input type="text" class="form-control hg_edit_display_mode mandatory_fields" id="id_add_addresses_street">
                                            <span id="err_street" class="error_message" hidden></span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-4">
                                            <label class="col-form-label">Area</label><span class="hg_required"></span>
                                        </div>
                                        <div class="col-8">
                                            <input type="text" class="form-control hg_edit_display_mode mandatory_fields" id="id_add_addresses_area">
                                            <span id="err_area" class="error_message" hidden></span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-4 col-form-label">Landmark</label>
                                        <div class="col-8">
                                            <input type="text" class="form-control" id="id_add_addresses_landmark">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-4">
                                            <label class="col-form-label">City</label><span class="hg_required"></span>
                                        </div>
                                        <div class="col-8">
                                            <input type="text" class="form-control hg_edit_display_mode mandatory_fields" id="id_add_addresses_city">
                                            <span id="err_city" class="error_message" hidden></span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-4">
                                            <label class="col-form-label">Address Partner Type</label>
                                        </div>
                                            <div class="col-8">
                                            <select class="form-control" type="text" name="address_partnertype"
                                                id="id_add_addresses_partnertype">
                                                {% for data in add_partner_type_data %}
                                                <option value={{data.address_partner_type}}>{{data.address_partner_type_desc}}</option>
                                                <span id="err_addresspartnertype" class="error_message" hidden></span>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-4">
                                            <label class="col-form-label">Org Address Source System</label>
                                        </div>
                                            <div class="col-8">
                                            <input type="text" class="form-control" id="id_add_addresses_source">
                                            <span id="err_OrgAddressSourceSystem" class="error_message" hidden></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col m-3">
                                    <div class="form-group row">
                                        <div class="col-4">
                                        <label class="col-form-label">Postal Code</label><span class="hg_required"></span>
                                        </div>
                                            <div class="col-8">
                                            <input type="text" class="form-control hg_edit_display_mode mandatory_fields" id="id_add_addresses_postalcode">
                                            <span id="err_postalcode" class="error_message" hidden></span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-4 col-form-label">Region</label>
                                        <div class="col-8">
                                            <input type="text" class="form-control" id="id_add_addresses_region">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-4">
                                        <label class="col-form-label">Mobile Number</label><span class="hg_required"></span>
                                        </div>
                                            <div class="col-8">
                                            <input type="text" class="form-control hg_edit_display_mode mandatory_fields" id="id_add_addresses_mobile_number">
                                            <span id="err_mobilenumber" class="error_message" hidden></span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-4 col-form-label">Telephone Number</label>
                                        <div class="col-8">
                                            <input type="text" class="form-control" id="id_add_addresses_telephone_number">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-4">
                                        <label class="col-form-label">Fax Number</label><span class="hg_required"></span>
                                        </div>
                                        <div class="col-8">
                                            <input type="text" class="form-control hg_edit_display_mode mandatory_fields" id="id_add_addresses_fax_number">
                                            <span id="err_faxnumber" class="error_message" hidden></span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-4">
                                        <label class="col-form-label">Email</label><span class="hg_required"></span>
                                        </div>
                                        <div class="col-8">
                                            <input type="text" class="form-control hg_edit_display_mode mandatory_fields" id="id_add_addresses_email">
                                            <span id="err_email" class="error_message" hidden></span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-4 col-form-label">Country Code</label>
                                        <div class="col-8">
                                            <select class="form-control" type="text" name="country_code"
                                                id="id_add_addresses_country_code">
                                                {% for data in country_list %}
                                                <option value={{data.country_code}}>{{data.country_name}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-4 col-form-label">Language</label>
                                        <div class="col-8">
                                            <select class="form-control" type="text" name="language_id"
                                                id="id_add_addresses_language_id">
                                                {% for data in language_list %}
                                                <option value={{data.language_id}}>{{data.description}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-4 col-form-label">TIME ZONE</label>
                                        <div class="col-8">
                                            <select class="form-control" type="text" name="time_zone"
                                                id="id_add_addresses_time_zone">
                                                {% for data in time_zone_data %}
                                                <option value={{data.time_zone}}>{{data.description}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row" hidden>
                                        <label class="col-4 col-form-label">Del Ind</label>
                                        <div class="col-8">
                                            <input type="text" class="form-control" id="id_add_addresses_del_ind_flag">
                                        </div>
                                    </div>
                                    <div class="form-group row" hidden>
                                        <label class="col-4 col-form-label">Address Guid</label>
                                        <div class="col-8">
                                            <input type="text" class="form-control" id="id_add_addresses_address_guid">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary remove_upload_data" title="Cancel" data-dismiss="modal"><i
                        class="fas fa-times"></i> cancel</button>
                    <button class="btn btn-primary" title="Save" id="save_id"><i class="fas fa-save"></i> save</button>
                    <button class="btn btn-primary" title="Save" id="save_upload_update" onclick="onclick_upload_save_button(this)"> save</button>
                </div>
            </div>
        </div>
    </div>
    <!--  Delivery address add process data details - End -->
    <!--modal popup for upload-->
    <div class="modal fade" id="myModalupload" style="overflow:auto;">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"  id="update-countries-title"> Maintain Address</h5>
                    <button type="button" class="close remove_upload_data" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <div class="popup-vertical-scroll">
                        <div id="id_check_success_messages_upload" class="alert alert-success check_success_message" hidden></div>
                        <div id="id_check_error_messages_upload" class="alert alert-danger check_error_messages" hidden></div>
                        <div id="id_check_special_character_messages_upload"
                            class="alert alert-danger check_special_character_messages" hidden>
                            <p id="id_error_msg_address_number_upload"></p>
                            <p id="id_error_msg_title_upload"></p>
                            <p id="id_error_msg_name1_upload"></p>
                            <p id="id_error_msg_name2_upload"></p>
                            <p id="id_error_msg_street_upload"></p>
                            <p id="id_error_msg_area_upload"></p>
                            <p id="id_error_msg_landmark_upload"></p>
                            <p id="id_error_msg_city_upload"></p>
                            <p id="id_error_msg_org_address_source_system_upload"></p>
                            <p id="id_error_msg_postal_code_upload"></p>
                            <p id="id_error_msg_region_upload"></p>
                            <p id="id_error_msg_mobile_number_upload"></p>
                            <p id="id_error_msg_telephone_number_upload"></p>
                            <p id="id_error_msg_fax_number_upload"></p>
                            <p id="id_error_msg_email_upload"></p>
                        </div>
                        <div id="error_msg_upload_id" class="alert alert-danger display-none" role="alert"><span id="error_message_upload"></span></div>
                        <div id="id_warning_upload_msg_id" class="alert alert-warning display-none" role="alert"></div>
                        <div id="id_info__upload_msg_id" class="alert alert-primary display-none" role="alert"></div>
                        <table class="class_popup_table table table-bordered mt-2" id="id_popup_table">
                            <thead>
                                <tr>
                                    <th id="header_select">Select</th>
                                    <th>Address Number</th>
                                    <th>Name 1</th>
                                    <th>Name 2</th>
                                    <th>City</th>
                                    <th>Email</th>
                                    <th>Country</th>
                                    <th>Action</th>
                                    <th id="id_del_ind_checkbox" hidden>del_ind</th>
                                    <th hidden>Guid</th>
                                </tr>
                            </thead>
                            <tbody id=id_popup_tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary remove_upload_data" title="Cancel" data-dismiss="modal"><i class="fas fa-times"></i> cancel</button>
                    <button id="id_delete_duplicate" class="btn btn-primary" title="Delete" style="display:none;" type="button" onclick="delete_duplicate()"><i class="fa fa-trash"></i> delete duplicates</button>
                    <button id="id_check_data" style="display:none;" class="btn btn-primary" title="Check" type="button" onclick="check_data()"><i class="fas fa-check"></i> check</button>
                    <button class="btn btn-primary" title="Save" id="save_upload_id"><i class="fas fa-save"></i> save</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="delete_restricted_confirm_popup">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" >
                    <h5 class="modal-title">Deletion Restricted</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="errorDeleteRestriction"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal"><i class="fas fa-times"></i> cancel</button>
                </div>
            </div>
        </div>
    </div>
    <!--end of modal popup for Add,copy,update and upload-->
    {% include 'configuration_common_pop_up.html' %}
    <div>
        {% if messages %}
        {% for message in messages %}
        {% if message.tags == 'success' %}
        <div style="color: green; ">{{ message }}</div>
        {% endif %}
        {% if message.tags == 'error' %}
        <div style="color: red; ">{{ message }}</div>
        {% endif %}
        {% if message.tags == 'info' %}
        <div style="color: Black bold"><b>{{ message }}</b> </div>
        {% endif %}
        {% endfor %}
        {% endif %}
    </div>
</div>
{{ address_data|json_script:"address_data" }}
<script>
    var GLOBAL_ADDRESS_NO = '';
    var rendered_address_data = JSON.parse(document.getElementById('address_data').textContent);
    var render_language_data = {{ language_list| safe}};
    var render_country_data = {{ country_list| safe}};
    var render_timezone_data = {{ time_zone_data| safe}};
    var render_address_partnertype_data = {{ add_partner_type_data| safe}};
    var messages_list = {{messages_list|safe}};
    var address_data_array = {}
    var main_table_address_value = [];
    var address = '';
    var edit_basic_data = '';
    var GLOBAL_ACTION = '';
    var no_duplicate_entries = 'Y'
    var Tablename = uiConstants["CONST_TABLENAME_ADDRESS"]
    var appname = uiConstants["CONST_APPNAME01"]
    var db_header_data = uiConstants["CONST_HEADER_DATA_ADDRESS"]

    // validate and save for add,copy,update and upload data
    function onclick_upload_save_button(button){
        address_data = new Array();
        var user_data_dict = {}
        user_data_dict.title = $('#id_add_addresses_title').val();
        user_data_dict.name1= $('#id_add_addresses_name1').val();
        user_data_dict.name2= $('#id_add_addresses_name2').val();
        user_data_dict.street= $('#id_add_addresses_street').val();
        user_data_dict.area= $('#id_add_addresses_area').val();
        user_data_dict.landmark=$('#id_add_addresses_landmark').val();
        user_data_dict.city= $('#id_add_addresses_city').val();
        user_data_dict.address_partner_type= $('#id_add_addresses_partnertype').val();
        user_data_dict.org_address_source_system= $('#id_add_addresses_source').val();
        user_data_dict.postal_code= $('#id_add_addresses_postalcode').val();
        user_data_dict.region= $('#id_add_addresses_region').val();
        user_data_dict.mobile_number= $('#id_add_addresses_mobile_number').val();
        user_data_dict.telephone_number= $('#id_add_addresses_telephone_number').val();
        user_data_dict.fax_number= $('#id_add_addresses_fax_number').val();
        user_data_dict.email= $('#id_add_addresses_email').val();
        user_data_dict.country_code= $('#id_add_addresses_country_code').val();
        user_data_dict.language_id= $('#id_add_addresses_language_id').val();
        user_data_dict.time_zone= $('#id_add_addresses_time_zone').val();
        user_data_dict.del_ind= $('#id_add_addresses_del_ind_flag').val();
        user_data_dict.address_guid= $('#id_add_addresses_address_guid').val();
        if (user_data_dict == undefined) {
            user_data_dict.address_number = $('#id_addresses_address_number').val();
        }
        if(user_data_dict.address_guid== undefined) {
            user_data_dict.address_guid= ''
        }
        address_data.push(user_data_dict);
        $.each(address_data, function(i, item){
            edit_basic_data += '<tr ><td class="class_select_checkbox"><input type="checkbox" disabled></td><td><input type="text" class="form-control" value="' + item[0] + '" maxlength="8" onkeypress="return /[a-z]/i.test(event.key)" disabled></td><td><input type="text" class="form-control" value="' + item[2] + '" maxlength="100" onkeypress="return /[a-z ]/i.test(event.key)" disabled></td><td><input type="text" class="form-control" value="' + item[3] + '" maxlength="100" onkeypress="return /[a-z ]/i.test(event.key)" disabled></td><td><input type="text" class="form-control" value="' + item[7] + '" maxlength="8" onkeypress="return /[a-z]/i.test(event.key)" disabled></td><td><input type="text" class="form-control" value="' + item[15] + '" maxlength="100" onkeypress="return /[a-z ]/i.test(event.key)" disabled></td><td><select class="form-control" type = "text" disabled>value ="' + item[16] + '"</select></td><td class="item-action-icon-section"><button class="btn btn-primary btn-sm" title="Update" id="edit-'+item[0]+'"  value="UPDATE" type="button" onclick="onclick_updateaddress_button(this.id)"><i class="far fa-edit"></i> update</button></td><td>' + item[19] + '</td><td hidden></td></tr>';
        });
        $('#id_popup_tbody').append(edit_basic_data);

        $('#myModalupload').modal('show');
        $('#address_add_details').modal('hide');
    }

    ////Onclick on Edit Button
    function onclick_editaddress_button(element) {
        $("#error_msg_id").css("display", "none")
        var getindex = element.split("-")[1]
        var address_number = parseInt(getindex)
        var address_edit_data = rendered_address_data.find(data => data.address_number === address_number)
        console.log(address_edit_data);
        $("#id_add_addresses_address_number").val(address_edit_data.address_number);
        $("#id_addresses_title").val(address_edit_data.title);
        $("#id_add_addresses_name1").val(address_edit_data.name1);
        $("#id_add_addresses_name2").val(address_edit_data.name2);
        $("#id_add_addresses_street").val(address_edit_data.street);
        $("#id_add_addresses_area").val(address_edit_data.area);
        $("#id_add_addresses_landmark").val(address_edit_data.landmark);
        $("#id_add_addresses_city").val(address_edit_data.city);
        $("#id_add_addresses_partnertype").val(address_edit_data.address_partner_type);
        $("#id_add_addresses_source").val(address_edit_data.org_address_source_system);
        $("#id_add_addresses_postalcode").val(address_edit_data.postal_code);
        $("#id_add_addresses_region").val(address_edit_data.region);
        $("#id_add_addresses_mobile_number").val(address_edit_data.mobile_number);
        $("#id_add_addresses_telephone_number").val(address_edit_data.telephone_number);
        $("#id_add_addresses_fax_number").val(address_edit_data.fax_number);
        $("#id_add_addresses_email").val(address_edit_data.email);
        $("#id_add_addresses_country_code").val(address_edit_data.country_code);
        $("#id_add_addresses_language_id").val(address_edit_data.language_id);
        $("#id_add_addresses_time_zone").val(address_edit_data.time_zone);
        $("#id_add_addresses_del_ind_flag").val(address_edit_data.del_ind_flag);
        $("#id_add_addresses_address_guid").val(address_edit_data.address_guid);
        $("#save_upload_update").css("display", "none")
        $('#address_add_details').modal('show');
        $("#id_add_addresses_address_number").prop("disabled", true);
    }

    //Onclick on Update Button
    function onclick_updateaddress_button(element) {
        $("#error_msg_id").css("display", "none")
        var getindex = element.split("-")[1]
        var address_number = parseInt(getindex)
        var address_edit_data = rendered_address_data.find(data => data.address_number === address_number)
        console.log(address_edit_data);
        $("#id_add_addresses_address_number").prop("disabled", true);
        $("#id_add_addresses_address_number").val(address_edit_data.address_number);
        $("#id_addresses_title").val(address_edit_data.title);
        $("#id_add_addresses_name1").val(address_edit_data.name1);
        $("#id_add_addresses_name2").val(address_edit_data.name2);
        $("#id_add_addresses_street").val(address_edit_data.street);
        $("#id_add_addresses_area").val(address_edit_data.area);
        $("#id_add_addresses_landmark").val(address_edit_data.landmark);
        $("#id_add_addresses_city").val(address_edit_data.city);
        $("#id_add_addresses_partnertype").val(address_edit_data.address_partner_type);
        $("#id_add_addresses_source").val(address_edit_data.org_address_source_system);
        $("#id_add_addresses_postalcode").val(address_edit_data.postal_code);
        $("#id_add_addresses_region").val(address_edit_data.region);
        $("#id_add_addresses_mobile_number").val(address_edit_data.mobile_number);
        $("#id_add_addresses_telephone_number").val(address_edit_data.telephone_number);
        $("#id_add_addresses_fax_number").val(address_edit_data.fax_number);
        $("#id_add_addresses_email").val(address_edit_data.email);
        $("#id_add_addresses_country_code").val(address_edit_data.country_code);
        $("#id_add_addresses_language_id").val(address_edit_data.language_id);
        $("#id_add_addresses_time_zone").val(address_edit_data.time_zone);
        $("#id_add_addresses_del_ind_flag").val(address_edit_data.del_ind_flag);
        $("#id_add_addresses_address_guid").val(address_edit_data.address_guid);
        $("#save_id").css("display", "none")
        $("#save_upload_update").css("display", "block")
        $('#address_add_details').modal('show');
        $('#myModalupload').modal('hide');
    }

    //onclick on Address number
    function onclick_address_no(address_number) {
        $("#error_msg_id").css("display", "none")
        var address_data = rendered_address_data.find(data => data.address_number === address_number)
        $("#id_addresses_title").val(address_data.title);
        $("#id_addresses_name1").val(address_data.name1);
        $("#id_addresses_name2").val(address_data.name2);
        $("#id_addresses_street").val(address_data.street);
        $("#id_addresses_area").val(address_data.area);
        $("#id_addresses_landmark").val(address_data.landmark);
        $("#id_addresses_city").val(address_data.city);
        $("#id_addresses_partnertype").val(address_data.address_partner_type);
        $("#id_addresses_source").val(address_data.org_address_source_system);
        $("#id_addresses_postalcode").val(address_data.postal_code);
        $("#id_addresses_region").val(address_data.region);
        $("#id_addresses_mobile_number").val(address_data.mobile_number);
        $("#id_addresses_telephone_number").val(address_data.telephone_number);
        $("#id_addresses_fax_number").val(address_data.fax_number);
        $("#id_addresses_email").val(address_data.email);
        $("#id_addresses_country_code").val(address_data.country_code);
        $("#id_addresses_language_id").val(address_data.language_id);
        $("#id_addresses_time_zone").val(address_data.time_zone);
        $('#id_popup_table').DataTable().destroy();
        $('#address_details').modal('show');
    }

    //onclick of cancel display the table in display mode............
    function display_basic_db_data() {
        $('#display_basic_table').DataTable().destroy();
        $('#id_address_tbody').empty();
        var edit_basic_data = '';
        var cntry_name = '';
        var lang = '';
        var time = '';
        $.each(rendered_address_data, function (i, item) {
            for (i = 0; i < render_country_data.length; i++) {
                if (item.country_code == render_country_data[i].country_code)
                    cntry_name = render_country_data[i].country_name;
            }
            edit_basic_data +=
            `<tr>
                <td class="class_select_checkbox"><input class="checkbox_check" onclick="valueChanged()" type="checkbox" required></td>
                <td><a href="#" onclick="onclick_address_no(${item.address_number})">${item.address_number}</a></td>
                <td> ${item.name1} </td>
                <td> ${item.name2} </td>
                <td> ${item.city} </td>
                <td> ${item.email} </td>
                <td> ${cntry_name} </td>
                <td  class="item-action-icon-section">
                    <span title = "edit address" id="edit-${item.address_number}" onclick="onclick_editaddress_button(this.id)">
                        <i class="fas fa-edit item-action-icons"> edit</i>
                    </span>
                    <span title ="Delete address"  id="delete-${item.address_number}" onclick="get_address_detail_to_delete(this.id)">
                        <i class="material-icons item-action-icons"> delete</i>
                    </span>
                </td>
                <td hidden><input type="checkbox"></td>
                <td hidden> ${item.address_guid} </td>
            </tr>`;
        });
        $('#id_address_tbody').append(edit_basic_data);
        $("#hg_select_checkbox").prop("hidden", true);
        $(".class_select_checkbox").prop("hidden", true);
        $('input:checkbox').removeAttr('checked');
        $('#id_edit_data').show();
        $('#id_cancel_data').hide();
        $('#id_delete_data').hide();
        $('#id_copy_data').hide();
        $('#id_update_data').hide();
        $('#id_save_confirm_popup').modal('hide');
        $('#id_delete_confirm_popup').modal('hide');
        $('#id_check_all').hide();
        table_sort_filter('display_basic_table');
    }

    // validate and save for add,copy,update and upload data
    function popup_save_data() {
    $('#success_msg_id').empty();
    $('#id_popup_table').DataTable().destroy();

    var error_message = '';
    get_main_table_data(); // Read data from main table

    if ((GLOBAL_ACTION == "COPY") || (GLOBAL_ACTION == "ADD")) {
        $('#address_details').modal('hide'); // Hide the popup
    }

    var address_data_array = address_data;
    $('#address_add_details').modal('hide');
    var data = {
        'data': address_data,
        'table_name': 'OrgAddress',
        'action': GLOBAL_ACTION
    };

    OpenLoaderPopup();
    $.ajax({
        type: 'POST',
        url: "{% url 'eProc_Master_Settings:create_update_master_data' %}",
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (Response) {
            rendered_address_data = Response[0];
            display_basic_db_data();
            success_response(Response); // Function call to display response data
            CloseLoaderPopup();
        }
    });

    table_sort_filter('id_popup_table');
}


    //validate by comparing  main table values and popup table values
    function maintable_validation(validate_add_attributes, main_table_low_value) {
        var no_duplicate_entries = 'Y'
        var error_message =''
        var common = [];
        jQuery.grep(validate_add_attributes, function(el) {
            if (jQuery.inArray(el, main_table_low_value) != -1) {
                common.push(el);
            }
        });
        if (common.length != 0) {
                // display_duplicate_entry(common);  //Function to highlight the rows in popup
                error_message = ui_messeges("JMSG001")
                no_duplicate_value = 'N'
                return [no_duplicate_value,error_message]
        }
        return [no_duplicate_entries,error_message]
    }

    //*********************************************
    function get_address_detail_to_delete(element) {
        GLOBAL_ACTION = "DELETE";
        var address_number = [];
        var error_message = '';
        $("#error_msg_id").css("display", "none")
        var getindex = element.split("-")[1]
        var address_number = parseInt(getindex)
        GLOBAL_ADDRESS_NO = address_number
        var data = {'data': address_number, 'table_name': 'OrgAddress', 'action': GLOBAL_ACTION };
        OpenLoaderPopup();
        $.ajax({
            type: 'POST',
            url: "{% url 'eProc_Configuration:create_update_delete_flags' %}",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(Response) {
                var docTypeArray = Response.delete_flags[0];
                if (docTypeArray === false) {
                    error_message = ui_messeges("JMSG054");
                    document.getElementById("errorDeleteRestriction").innerHTML = error_message;
                    $('#delete_restricted_confirm_popup').modal('show')
                } else {
                    $('#id_delete_confirm_popup').modal('show')
                }
                CloseLoaderPopup();
            }
        });
    }

    //delete the selected row in db................
    var main_table_address_checked = [];
    function main_table_delete() {
        $("#error_msg_id").css("display", "none")
        $('#success_msg_id').empty()
        GLOBAL_ACTION = 'DELETE'
        main_table_address_checked = [];
        var address_arr_obj = {};
        address_arr_obj.address_number = GLOBAL_ADDRESS_NO;
        address_arr_obj.del_ind = 1;
        main_table_address_checked.push(address_arr_obj);
        $('#id_delete_confirm_popup').modal('hide');
        data = { 'data': main_table_address_checked, 'table_name': 'OrgAddress', 'action': GLOBAL_ACTION }
        OpenLoaderPopup();
        $.ajax({
            type: 'POST',
            url: "{% url 'eProc_Master_Settings:create_update_master_data' %}",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (Response) {
                console.log(Response);
                rendered_address_data = Response[0];
                display_basic_db_data();
                success_response(Response); // Function call to display response data
                CloseLoaderPopup();
            }
        });
    }

    //onclick of data Upload copy data to modal pop-up
    function onclick_display_csv_data() {
        $("#error_msg_id").css("display", "none")
        $('#id_popup_table').DataTable().destroy();
        formdata = new FormData();
        attached_file = $('#id_file_data_upload').prop('files')[0]
        file_extension = (attached_file.name).split(".")[1]
        file_extension = file_extension.toUpperCase();
        if(file_extension == 'CSV'){
            formdata.append("file_attach", attached_file);
            formdata.append("Tablename",Tablename);
            formdata.append("appname",appname);
            $('#id_data_upload').modal('hide');
            $('#id_popup_tbody').empty();
            OpenLoaderPopup();
            $.ajax({
                type: 'POST',
                url: "{% url 'eProc_Basic_Settings:data_upload' %}",
                data: formdata,
                contentType: "application/json; charset=utf-8",
                success: function(response) {
                    if(response.error_message){
                        $("#id_error_msg_upload").prop("hidden",false)
                        document.getElementById("id_error_msg_upload").innerHTML = response.error_message;
                        document.getElementById("id_error_msg_upload").style.color = "Red";
                        $('#id_data_upload').modal('show');
                    } else {
                        var address_data_array = response.data;
                        var edit_basic_data = '';
                        var del_ind = '';
                        var dropdown_values = [];
                        var cntry_name = '';
                        var lang = '';
                        var time = '';
                        $("#id_popup_tbody").empty();
                        $.each(response.data, function (i, value) {
                            var address_partner_type = value[9]
                            var country_code = value[11]
                            var language_id = value[10]
                            var timezone_value = value[12]
                            dropdown_values.push([address_partner_type,language_id,country_code,timezone_value])
                            del_ind = '<td>' + value[7] + '</td>'
                            if (value[7] == 1) {
                                del_ind=' <input type="checkbox" value="' + value[7] + '" checked>'
                            }
                            else {
                                del_ind= '<input type="checkbox" value="' + value[7] + '" required>'
                            }
                            var address_partnertype_data = '';
                            var address_partnertype_data_list = '';
                            var address_partnertypedata_id_list = '';
                            $.each(render_address_partnertype_data, function(i, item){
                                if( value[10].address_address_partnertype_data_value == item){
                                    address_partnertype_data = '<option value="' + item.field_type_id + '">' + item.field_type_id + '</option>';
                                }else{
                                    address_partnertype_data_list += '<option value="' + item.field_type_id + '">' + item.field_type_id + '</option>';
                                }
                                address_partnertypedata_id_list = address_data + address_partnertype_data_list
                            });
                            var country_id = '';
                            var country_id_list = '';
                            var country_number_id_list = '';
                            $.each(render_country_data, function(i, item){
                                if( value[5].country == item){
                                    country_id = '<option value="' + item.country_code + '">' + item.country_name + '</option>';
                                } else {
                                    country_id_list += '<option value="' + item.country_code + '">' + item.country_name + '</option>';
                                }
                                country_number_id_list = country_id + country_id_list
                            });
                            var timezone = '';
                            var timezone_list = '';
                            var timezone_id_list = '';
                            $.each(render_timezone_data, function(i, item){
                                if( value[12].timezone_type_value == item){
                                    timezone = '<option value="' + item.description + '">' + item.description + '</option>';
                                } else {
                                    timezone_list += '<option value="' + item.description + '">' + item.description + '</option>';
                                }
                                timezone_id_list = timezone + timezone_list
                            });
                            var language = '';
                            var language_list = '';
                            var language_id_list = '';
                            $.each(render_language_data, function(i, item) {
                                if( value[11].language_type_value == item) {
                                    language = '<option value="' + item.description + '">' + item.description + '</option>';
                                }else{
                                    language_list += '<option value="' + item.description + '">' + item.description + '</option>';
                                }
                                language_id_list = language + language_list
                            });
                            edit_basic_data += '<tr ><td class="class_select_checkbox"><input type="checkbox" disabled></td><td><input type="text" class="form-control" value="' + value[0] + '" maxlength="8" onkeypress="return /[a-z]/i.test(event.key)" disabled></td><td><input type="text" class="form-control" value="' + value[3] + '" maxlength="100" onkeypress="return /[a-z ]/i.test(event.key)" disabled></td><td><input type="text" class="form-control" value="' + value[4] + '" maxlength="100" onkeypress="return /[a-z ]/i.test(event.key)" disabled></td><td><input type="text" class="form-control" value="' + value[8] + '" maxlength="8" onkeypress="return /[a-z]/i.test(event.key)" disabled></td><td><input type="text" class="form-control" value="' + value[14] + '" maxlength="100" onkeypress="return /[a-z ]/i.test(event.key)" disabled></td><td><select class="form-control" type = "text" disabled>value ="' + value[16] + '"'+country_number_id_list+'</select></td><td class="item-action-icon-section"><button class="btn btn-primary btn-sm" title="Update" id="edit-'+value[0]+'"  value="UPDATE" type="button" onclick="onclick_updateaddress_button(this.id)"><i class="far fa-edit"></i> update</button></td><td>' + del_ind + '</td><td hidden></td></tr>';
                        });
                        $('#id_popup_tbody').append(edit_basic_data);
                        var i = 0;
                        $("#id_popup_table TBODY TR").each(function () {
                            var row = $(this);
                            var country_list = dropdown_values[i][0]
                            $(row.find("TD").eq(16).find("select option[value=" + country_list + "]")).attr('selected', 'selected');
                            i++;
                        })
                        $("#id_del_ind_checkbox").prop("hidden", false);
                        $(".class_del_checkbox").prop("hidden", false);
                        $( "#header_select").prop( "hidden", false );
                        $('#myModalupload').modal('show');
                        $('#id_data_upload').modal('hide');
                        $('#id_check_data').show();
                        $("#id_check_data").prop("hidden", false);
                        $("#save_upload_id").prop("hidden", true);
                        table_sort_filter('id_popup_table')
                    }
                    CloseLoaderPopup();
                },
                cache: false,
                processData: false,
                contentType: false,
            });
        } else {
            $("#id_error_msg_upload").prop("hidden",false)
            get_message_details("JMSG110"); // Get message details
            var display = msg_type.messages_id_desc;
            document.getElementById("id_error_msg_upload").innerHTML = display;
            document.getElementById("id_error_msg_upload").style.color = "Red";
            $('#id_data_upload').modal('show');
        }
    }

    // validating the  popup table for duplicate entries
    function compare_table_for_duplicate_entries(validate_add_attributes, address) {
        add_attr_duplicates = false;
        var common = [];
        var add_attr_unique_list = [];
        var error_message = ''
        var no_duplicate_value = 'Y'
        $.each(validate_add_attributes, function (index, value) {
            if ($.inArray(value, add_attr_unique_list) == -1) {
                add_attr_unique_list.push(value);
            }
            else {
                if ($.inArray(value, common) == -1) {
                    common.push(value);
                }
            }
        });
        if (common.length != 0) {
            $('#address_details').modal('show');
            display_duplicate_entry(common);  //Function to highlight the rows in popup
            error_message = ui_messeges("JMSG001")// Get message details
            no_duplicate_value = 'N'
            return [no_duplicate_value, error_message]
        }
        else {
            $.each(address, function (i, item) {
                if (item.address_number.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.title.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.name1.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.name2.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.street.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.area.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.landmark.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.city.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.postal_code.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.region.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.mobile_number.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.telephone_number.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.email.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.fax_number.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
                if (item.org_address_source_system.length == 0) {
                    error_message = ui_messeges("JMSG002")// Get message details
                    no_duplicate_value = 'N'
                    return [no_duplicate_value, error_message]
                }
            });
        }
        return [no_duplicate_value, error_message]
    }

    //***********************************
    function add_new_address(button) {
        $("#address_clear").trigger('reset');
        $("#error_msg_id").css("display", "none")
        GLOBAL_ACTION = button.value
        $("#save_upload_update").css("display", "none")
        $('#address_add_details').modal('show');
        $("#id_add_addresses_address_number").prop("disabled", false);
    }

    //*********************************
    var address_count = 0;
    function address_popup_row() {
        $("#error_msg_id").css("display", "none")
        address_count++;
        var new_add_line =
        `<div>
            <div class="row">
                <div class="col m-3">
                    <div class="form-group row ">
                        <label class="col-4 col-form-label">Address Number:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_address_number-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Name2:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_name2-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Street:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_street-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Landmark:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_landmark-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Address Partner Type:</label>
                        <div class="col-8">
                            <select class="form-control" type="text" name="address_partnertype"
                                id="id_upload_addresses_partnertype-${address_count}">
                                {% for data in add_partner_type_data %}
                                <option value={{data.address_partner_type}}>{{data.address_partner_type}}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Org Address Source System:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_source-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Country Code:</label>
                        <div class="col-8">
                            <select class="form-control" type="text" name="country_code"
                                id="id_upload_addresses_country_code-${address_count}">
                                {% for data in country_list %}
                                <option value={{data.country_code}}>{{data.country_name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col m-3">
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Title:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_title-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Area:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_area-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Postal Code:</label>
                        <div class="col-8">
                            <input type="text" class="form-control check_postal_code" id="id_upload_addresses_postalcode-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Mobile Number:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_mobile_number-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Telephone Number:</label>
                        <div class="col-8">
                            <input type="text" class="form-control"
                                id="id_upload_addresses_telephone_number-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Language:</label>
                        <div class="col-8">
                            <select class="form-control" type="text" name="language_id"
                                id="id_upload_addresses_language_id-${address_count}">
                                {% for data in language_list %}
                                <option value={{data.language_id}}>{{data.description}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group row" hidden>
                        <label class="col-4 col-form-label">Del Ind:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_del_ind_flag-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row" hidden>
                        <label class="col-4 col-form-label">Address Guid:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_address_guid-${address_count}">
                        </div>
                    </div>
                </div>
                <div class="col m-3">
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Name1:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_name1-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Region:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_region-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">City:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_city-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Email:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_email-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">TIME ZONE:</label>
                        <div class="col-8">
                            <select class="form-control" type="text" name="time_zone"
                                id="id_upload_addresses_time_zone-${address_count}">
                                {% for data in time_zone_data %}
                                <option value={{data.time_zone}}>{{data.description}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Fax Number:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_fax_number-${address_count}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label">Del Ind:</label>
                        <div class="col-8">
                            <input type="text" class="form-control" id="id_upload_addresses_del_ind_flag-${address_count}">
                        </div>
                    </div>
                </div>
            </div>
        </div>`
        $("#upload_add_new_row").append(new_add_line);
    }

    //check function restricting special char and diaplay the data count of csv file
    function check_data() {
        $('#id_popup_table').DataTable().destroy();
        $("#id_check_success_messages_upload").empty()
        $("#id_check_error_messages_upload").empty()
        $("#id_check_success_messages_upload").prop("hidden",true)
        $("#id_check_error_messages_upload").prop("hidden",true)
        $("#id_check_special_character_messages_upload").prop("hidden",true)
        document.getElementById("id_error_msg_address_number_upload").innerHTML = "";
        document.getElementById("id_error_msg_title_upload").innerHTML = "";
        document.getElementById("id_error_msg_name1_upload").innerHTML = "";
        document.getElementById("id_error_msg_name2_upload").innerHTML = "";
        document.getElementById("id_error_msg_street_upload").innerHTML = "";
        document.getElementById("id_error_msg_area_upload").innerHTML = "";
        document.getElementById("id_error_msg_landmark_upload").innerHTML = "";
        document.getElementById("id_error_msg_city_upload").innerHTML = "";
        document.getElementById("id_error_msg_org_address_source_system_upload").innerHTML = "";
        document.getElementById("id_error_msg_postal_code_upload").innerHTML = "";
        document.getElementById("id_error_msg_region_upload").innerHTML = "";
        document.getElementById("id_error_msg_mobile_number_upload").innerHTML = "";
        document.getElementById("id_error_msg_telephone_number_upload").innerHTML = "";
        document.getElementById("id_error_msg_fax_number_upload").innerHTML = "";
        document.getElementById("id_error_msg_email_upload").innerHTML = "";
        count = 0;
        var add_array = new Array
        var DB_array = new Array
        var add_list = new Array
        var add_code_check = new Array
        del_ind = ''
        $("#id_popup_table TBODY TR").each(function() {
            var row = $(this);
                address_dic = {}
            //*************** reading data from the pop-up ***************
            address_dic.country_code = row.find("TD").eq(7).find('select[type="number"]').val();
            address_dic.email = row.find("TD").eq(6).find('input[type="number"]').val();
            address_dic.city = row.find("TD").eq(5).find('input[type="number"]').val();
            address_dic.name2 = row.find("TD").eq(4).find('input[type="text"]').val();
            address_dic.address_number = row.find("TD").eq(1).find('input[type="text"]').val();
            address_dic.title = row.find("TD").eq(2).find('input[type="text"]').val();
            address_dic.name1 = row.find("TD").eq(3).find('input[type="text"]').val();
            checked_box = row.find("TD").eq(9).find('input[type="checkbox"]').is(':checked')
                if (checked_box){
                    address_dic.del_ind = '1'
                }
                else{
                address_dic.del_ind = '0'
                }
            add_list.push(address_dic)
            var format = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
            //*************** checking for max length for country code (max length = 1) ***************
            if(address_dic.address_number.length > 10){
                error_message = ui_messeges("JMSG004")// Get message details
                var display = msg_type.messages_id_desc;
                document.getElementById("id_error_msg_address_type_length").innerHTML = display  + "Address Number";
                $(row.find("TD").eq(1).find('input[type="text"]')).css("border", "1px solid #FF0000");
                count = count +1;
            }
            //*************** checking for special characters for country code ***************
            else if(format.test(address_dic.address_number)){
                error_message = ui_messeges("JMSG003")// Get message details
                var display = msg_type.messages_id_desc;
                document.getElementById("id_error_msg_address_type_length").innerHTML = display + "Address Number";
                $(row.find("TD").eq(1).find('input[type="text"]')).css("border", "1px solid #FF0000");
                count = count +1;
            }
            else{
                $(row.find("TD").eq(1).find('input[type="text"]')).css("border", "none");
            }
            if(add_code_check.includes(address_dic.address_number)){
                $(row).css("border", "#f8d7da");
            }
            else{
                $(row).css("border", "");
            }
            add_code_check.push(address_dic.address_number)
        });
        //*************** shows save button if there are no errors(special characters and max length) ***************
        if(count == 0){
            $("#id_check_special_character_messages_upload").prop("hidden",true)
            $("#save_id").prop("hidden", false);
        }
        popup_data_dict ={
            'data_list' : add_list,
        }
        OpenLoaderPopup();
        $.ajax({
            type: 'POST',
            url: "{% url 'eProc_Configuration_Check:check_address' %}",
            data: JSON.stringify(popup_data_dict),
            success: function(response) {
                table_sort_filter_popup_pagination('id_popup_table')
                //table_sort_filter('id_popup_table');
                var message = ''
                update_check_message(response.messages)
                CloseLoaderPopup();
            }
        });
    }

    //**************************************8
    function update_check_message(messages){
        $.each(messages, function (i, message) {
            $("#id_check_success_messages_upload").append('<p>' + message + '</p>')
        });
        $("#id_check_success_messages_upload").prop("hidden",false)
    }

    //Function to highlight duplicate records
    function display_duplicate_entry(common) {
        var address_check = new Array;
        $("#id_popup_table TBODY TR").each(function() {
            var row = $(this);
            address_dic = {}
            address_dic.address_number = $('#id_add_addresses_address_number').val();
            var compare =  address_dic.address_number
            address_check.push(compare);
            jQuery.grep(address_check, function(el) {
                if (jQuery.inArray(el, common) != -1) {
                    row_color_highlight(row);
                }
                else {
                    row_color_no_highlight(row);
                }
            });

        });
    }

$("body").on("keypress keyup blur change", ".mandatory_fields", function (event) {
    if (event.currentTarget.value == "") {
        $('#' + event.currentTarget.nextElementSibling.id).prop('hidden', true);
        $('#' + event.currentTarget.nextElementSibling.id).css('display', 'block');
        var display_id = event.currentTarget.nextElementSibling.id;
        $('#' + display_id).prop('hidden', false);
        event.currentTarget.nextElementSibling.innerHTML = "Please enter a valid value";
    } else if (event.currentTarget.id === 'id_add_addresses_address_number') {
        if (event.currentTarget.value.length < 6) {
            var remainingChars = 6 - event.currentTarget.value.length;
            $('#' + event.currentTarget.nextElementSibling.id).prop('hidden', false);
            $('#' + event.currentTarget.nextElementSibling.id).css('display', 'block');
            var display_id = event.currentTarget.nextElementSibling.id;
            $('#' + display_id).prop('hidden', false);
            event.currentTarget.nextElementSibling.innerHTML = "Please enter " + remainingChars + " more digits for Address Number";
        } else {
            $('#' + event.currentTarget.nextElementSibling.id).prop('hidden', true);
            $('#' + event.currentTarget.nextElementSibling.id).css('display', 'none');
        }
    } else {
        if (event.currentTarget.value.length < 2) {
            var remainingChars = 2 - event.currentTarget.value.length;
            $('#' + event.currentTarget.nextElementSibling.id).prop('hidden', false);
            $('#' + event.currentTarget.nextElementSibling.id).css('display', 'block');
            var display_id = event.currentTarget.nextElementSibling.id;
            $('#' + display_id).prop('hidden', false);
            event.currentTarget.nextElementSibling.innerHTML = "Please enter " + remainingChars + " more characters";
        } else {
            $('#' + event.currentTarget.nextElementSibling.id).prop('hidden', true);
            $('#' + event.currentTarget.nextElementSibling.id).css('display', 'none');
        }
    }
});

$('#id_add_addresses_email').on('blur', function (event) {
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (!(event.currentTarget.value).match(mailformat)) {
        var msg = "JMSG002";
        var msg_type;
        msg_type = message_config_details(msg);
        var display1 = msg_type.messages_id_desc;
        $(".error_message").prop("hidden", false);
        var display_id = event.currentTarget.nextElementSibling.id;
        $('#' + display_id).prop('hidden', false);
        $('#' + display_id).css('display', 'block');
        event.currentTarget.nextElementSibling.innerHTML = display1 + " for Email Id";
        is_valid = false;
    } else {
        $('#' + event.currentTarget.nextElementSibling.id).prop('hidden', true);
        $('#' + event.currentTarget.nextElementSibling.id).css('display', 'none');
    }
});

$('#id_add_addresses_mobile_number').on('blur', function (event) {
    var mobileNumber = event.currentTarget.value;
    if (mobileNumber.length != 10 || !(/^\d+$/.test(mobileNumber))) {
        var display_id = event.currentTarget.nextElementSibling.id;
        $('#' + display_id).prop('hidden', false);
        $('#' + display_id).css('display', 'block');
        event.currentTarget.nextElementSibling.innerHTML = "Please enter a 10-digit Mobile Number";
        is_valid = false;
    } else {
        $('#' + event.currentTarget.nextElementSibling.id).prop('hidden', true);
        $('#' + event.currentTarget.nextElementSibling.id).css('display', 'none');
    }
});


</script>
<script src="{% static 'scripts/address_data/master_address.js' %}"></script>
{% endblock %}