{% extends 'root/base.html' %}
{% load static %}
{% block title %} Message Descriptions (Application Settings) {% endblock %}
{% block maincontent %}

<div class="container-fluid">
    <div class="configuration-table_wrapper">
        <div class="elements-space-between">
            <h3>Maintain Message Descriptions</h3>
            <div>
                <button class="btn btn-outline-primary"  title="Extract" onclick="location.href='{% url 'eProc_Application_Settings:extract_message_id_desc_data' %}'"type="button">
                    <i class="fas fa-download"></i> extract data
                </button>
                <button type="button" id="id_add_data" title="Add Message Description" value="ADD" class="btn btn-primary" data-toggle="modal" data-target="#msg_desc_Modal" onclick="onclick_add_button(this)">
                    <i class="fa fa-plus"></i> add message description
                </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 tcw-80">
                <div class="edit-button-section mb-4">
                    <button id="id_edit_data" class="btn btn-secondary btn-sm" title="Edit" onclick="onclick_edit_button()">
                        <i class="fas fa-edit" id="edit" title="Edit"></i> edit
                    </button>
                    <button class="btn btn-outline-danger btn-sm" title="Delete" id="id_delete_data" value="DELETE" style="display:none;" data-toggle="modal" data-target="#id_delete_confirm_popup">
                        <i class="fa fa-trash" ></i> delete
                    </button>
                    <button class="btn btn-primary btn-sm" title="Copy" id="id_copy_data" style="display:none;" value="COPY"  type="button" onclick="onclick_copy_button()">
                        <i class="fa fa-copy"></i> copy
                    </button>
                    <button class="btn btn-primary btn-sm" title="Update" id="id_update_data" style="display:none;" value="UPDATE" type="button" onclick="onclick_update_button()">
                        <i class="far fa-edit"></i> update
                    </button>
                    <button class="btn btn-secondary btn-sm" title="Cancel" id="id_cancel_data" style="display:none;" type="button" onclick="display_basic_db_data()">
                        <i class="fas fa-times"></i> cancel
                    </button>
                </div>
                <!--   display basic Message Id table-->
                <table id="display_basic_table" class="class_basic_country_table table table-bordered custom-table">
                    <thead id="id_message_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>Message Number</th>
                        <th>Description</th>
                        <th>Language</th>
                        <th hidden></th>
                    </tr>
                    </thead>
                    <tbody id="id_message_tbody">
                    {% for msg in message_id_desc_data %}
                    <tr>
                        <td class="class_message_checkbox" hidden><input type="checkbox" class="checkbox_check" onclick="valueChanged()" required></td>
                        <td>{{msg.messages_id}}</td>
                        <td>{{msg.messages_id_desc}}</td>
                        <td>{{msg.lang_description}}</td>
                        <td hidden>{{msg.msg_id_desc_guid}}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <!--end of display basic Messages table-->
            </div>
        </div>
    </div>
    <!--modal popup for Add,copy,update and upload-->
    <div class="modal fade" id="msg_desc_Modal" style="overflow:auto;">
        <div class="modal-dialog modal-dialog-centered modal-xl" >
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"> Maintain Message Description</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_del_add_button" class="mb-4">
                            <button type="button" class="btn btn-primary" title="Add New Row" onclick="add_popup_row()"><i class="fa fa-plus"></i> add new row</button>
                            <button class="btn btn-outline-danger" title="Delete" onclick="application_settings_delete_Row('id_popup_table')"><i class="fa fa-trash"></i> delete</button>
                        </div>
                        <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_id" ></p>
                            <p id="id_error_msg_length" ></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>
                        <table class="class_popup_table table table-bordered mt-2" id="id_popup_table">
                            <thead>
                            <tr>
                                <th id="header_select">Select</th>
                                <th>Message Number</th>
                                <th>Description</th>
                                <th>Language</th>
                                <th hidden></th>
                                <th id="id_del_ind_checkbox" hidden>Del Indicator</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 class="btn btn-primary" title="Save" id="save_id"><i class="fas fa-save"></i> save</button>
                </div>
            </div>
        </div>
    </div>
    <!--end of modal popup for Add,copy,update and upload-->
    <!-- modal popup to upload the csv file; save confirmation popup; delete confirmation popup -->
    {% 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>
{% include 'root/loader.html' %}
<script>
    var rendered_message_id_desc_data = {{message_id_desc_data|safe}};
    var rendered_message_id_data = {{messages_id_list|safe}};
    var render_language_data = {{ language_list| safe}};
    var messages_list = {{messages_list|safe}};
    var message_id_desc_data_array = {}
    var main_table_message_value =[];
    var message_id_desc = '';
    var edit_basic_data ='';
    var GLOBAL_ACTION='';
    var no_duplicate_entries = 'Y';
    var message_id_dropdown,language_dropdown= '';

    //*************************
    function drop_down(){
        message_id_dropdown='';
        $.each(rendered_message_id_data, function(i, item){
            message_id_dropdown += '<option value="' + item.messages_id + '">' + item.messages_id + '</option>';
        });
        language_dropdown= '';
        $.each(render_language_data, function(i, item){
            language_dropdown += '<option value="' + item.language_id + '">' + item.description + '</option>';
        });
    }

    function message_drpdown() {
        message_id_dropdown = '';
        var hidden_message_ids = []; // Array to store node types with all their node values used in the main table

        // Function to check if all node values of a specific node type are used in the main table
        function areAll_languageUsed(messages_id) {
            var language_Values = main_table_data[messages_id];
            if (!language_Values) {
                return false;
            }
            return language_Values.length === render_language_data.length;
        }

        // Iterate through the rendered_message_id_data to build the messages_id dropdown
        $.each(rendered_message_id_data, function(i, item) {
            var message_id = item.messages_id;
            if (!areAll_languageUsed(message_id)) {
                message_id_dropdown += '<option value="' + message_id + '">' + message_id + '</option>';
            } else {
                hidden_message_ids.push(message_id);
            }
        });
        $.each(hidden_message_ids, function(i, hidden_message_id) {
            message_id_dropdown = message_id_dropdown.replace(new RegExp('<option value="' + hidden_message_id + '">.*<\/option>'), '');
        });

        // Extract the first node type value from message_id_dropdown using regular JavaScript
        var firs_messageMatch = message_id_dropdown.match(/value="([^"]+)"/);
        if (firs_messageMatch && firs_messageMatch[1]) {
            firs_message = firs_messageMatch[1];
        }
        if (firs_message !== null) {
            var unused_message_idForFirstType = [];
            var used_message_id = {};
            $.each(main_table_data[firs_message], function(index, value) {
                used_message_id[value] = true;
            });
            $.each(render_language_data, function(i, item) {
                var language = item.language_id;
                if (!used_message_id.hasOwnProperty(language)) {
                    unused_message_idForFirstType.push(language);
                }
            });
            language_dropdown = '';
            $.each(unused_message_idForFirstType, function(i, language) {
                var descriptionItem = render_language_data.find(item => item.language_id === language);
                if (descriptionItem) {
                    language_dropdown += '<option value="' + descriptionItem.language_id + '">' + descriptionItem.description + '</option>';
                }
            });
        }
    }

    //onclick of add button display msg_desc_Modal popup and set GLOBAL_ACTION button value
    function onclick_add_button(button){
         OpenLoaderPopup();
        var data = {'table_name':'MessagesIdDesc'}
        $.ajax({
            type: 'POST',
            url: "{% url 'eProc_Configuration:get_dropdown_data' %}",
            data: JSON.stringify(data),
            success: function(response) {
                rendered_message_id_data = response.messages_id_list
                render_language_data = response.language_list
                get_msg_id_data()
                message_drpdown()
                $("#error_msg_id").css("display", "none")
                $("#id_info_msg_id").css("display", "none")
                $("#id_warning_msg_id").css("display", "none")
                $( "#header_select").prop( "hidden", false );
                GLOBAL_ACTION=button.value
                $("#id_popup_tbody").empty();
                new_row_data();   // Add a new row in popup
                $("#id_del_ind_checkbox").prop( "hidden", true );
                document.getElementById("id_del_add_button").style.display = "block";
                $("#save_id").prop("hidden", false);
                $('#msg_desc_Modal').modal('show');
                 CloseLoaderPopup();
            }
        });
    }

    // validate and save for add,copy,update and upload data
    function popup_save_data() {
		$('#success_msg_id').empty();
        $('#id_popup_table').DataTable().destroy();
        // var Tabledata = { "Dbl_clck_tbl_id": 'MessagesIdDesc' };
        no_duplicate_entries = 'Y'
        no_duplicate_value = 'Y'
        var error_message = '';
        get_main_table_data(); //Read data from main table
        // compare for duplicates in popup
        [no_duplicate_value,error_message] = compare_table_for_duplicate_entries(validate_add_attributes,message_id_desc_data)
        if (error_message){
            display_error_message(error_message)
        }
        else{
            if ((GLOBAL_ACTION == "COPY") || (GLOBAL_ACTION == "ADD") ) {
                // compare main table and pop up for duplicate values
                [no_duplicate_entries,error_message] = maintable_validation(validate_add_attributes, main_table_low_value)
                if(no_duplicate_entries == 'N'){
                    $('#msg_desc_Modal').modal('show');
                }
            }
            if ((no_duplicate_value == 'Y') && (no_duplicate_entries == 'Y')) {
                var message_id_desc_data_array = message_id_desc_data;
                $('#id_save_confirm_popup').modal('hide');
                data = {'data':message_id_desc_data,'table_name':'MessagesIdDesc','action':GLOBAL_ACTION}
                OpenLoaderPopup();
                $.ajax({
                    type: 'POST',
                    url: "{% url 'eProc_Configuration:create_update_application_data' %}",
                    data: JSON.stringify(data),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (Response) {
                        rendered_message_id_desc_data = Response[0];
                        display_basic_db_data();
                        $('#msg_desc_Modal').modal('hide');
                        success_response(Response); // Function call to display response data
                        CloseLoaderPopup();
                    }
                });
            }
            else if (error_message){
                display_error_message(error_message)
            }
        }
        table_sort_filter('id_popup_table');
    }

    //delete the selected row in db................
    var main_table_message_id_desc_checked = [];
    function main_table_delete() {
        $('#success_msg_id').empty()
        GLOBAL_ACTION = 'DELETE'
        var Tabledata = { "Dbl_clck_tbl_id": 'MessagesIdDesc' };
        $('#display_basic_table').DataTable().destroy();
        get_selected_row_data(); // Function call to get the selected row data
        $('#id_delete_confirm_popup').modal('hide');
        data = {'data':main_table_message_id_desc_checked,'table_name':'MessagesIdDesc','action':GLOBAL_ACTION}
        OpenLoaderPopup();
        $.ajax({
            type: 'POST',
            url: "{% url 'eProc_Configuration:create_update_application_data' %}",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (Response) {
                rendered_message_id_desc_data = Response[0];
                display_basic_db_data();
                success_response(Response); // Function call to display response data
                CloseLoaderPopup();
            }
        });
    }

    //**********************************************************
    function onclick_copy_update_button(data) {
        OpenLoaderPopup();
        var data = {'table_name':'MessagesIdDesc'}
        $.ajax({
            type: 'POST',
            url: "{% url 'eProc_Configuration:get_dropdown_data' %}",
            data: JSON.stringify(data),
            success: function(response) {
                rendered_message_id_data = response.messages_id_list
                render_language_data = response.language_list
                drop_down()
                $("#error_msg_id").css("display", "none")
                $('#id_popup_table').DataTable().destroy();
                $("#id_popup_tbody").empty();;
                //Reference the Table.
                var res = get_all_checkboxes(); // Function to get all the checkboxes
                var $chkbox_all = $('td input[type="checkbox"]', res);
                //Reference the CheckBoxes in Table.
                var edit_basic_data = "";
                var guid = '';
                var unique_input = '';
                var dropdown_values = [];
                //Loop through the CheckBoxes.
                for (var i = 0; i < $chkbox_all.length; i++) {
                    if ($chkbox_all[i].checked) {
                        var row = $chkbox_all[i].parentNode.parentNode;
                        if(GLOBAL_ACTION == "UPDATE"){
                            guid = row.cells[4].innerHTML;
                            unique_input = '<select id="messages_id" name="messages_id" class="form-control" value="' + row.cells[1].innerHTML + '" type="text" title="Select..." disabled>' +message_id_dropdown+'</select>' 
                            edit_basic_data += '<tr><td hidden><input type="checkbox" required></td>' +
                            '<td>'+ unique_input +'</td>' +
                            '<td><input class="input form-control check_special_char" type="text" id="messages_desc" name="messages_desc" value="' + row.cells[2].innerHTML + '"  required></td>'+
                            '<td><select id="language" name="language" class="form-control" value="' + row.cells[3].innerHTML + '" type="text" disabled>'+ language_dropdown +'</select></td>' +
                            '<td hidden><input type="text" value="'+guid+'" hidden></td>'+
                            '<td class="class_del_checkbox" hidden><input type="checkbox" required></td></tr>';
                            $("#header_select").prop("hidden", true);
                        }
                        else {
                            guid =row.cells[4].innerHTML;
                            unique_input = '<select id="messages_id" name="messages_id" class="form-control" type="text"  value="' + row.cells[1].innerHTML + '" title="Select..." onchange="get_language_dropdown(this)>'+ message_id_dropdown +'</select>'
                            edit_basic_data += '<tr><td><input type="checkbox" required></td>' +
                            '<td>'+ unique_input +'</td>' +
                            '<td><input class="input form-control check_special_char" type="text" id="messages_desc" name="messages_desc" value="' + row.cells[2].innerHTML + '"  required></td>'+
                            '<td><select id="language" name="language" class="form-control" value="' + row.cells[3].innerHTML + '" title="Select..." type="text" >'+ language_dropdown +'</select></td>' +
                            '<td hidden><input type="text" value="'+guid+'" hidden></td>'+
                            '<td class="class_del_checkbox" hidden><input type="checkbox" required></td></tr>';
                            $("#header_select").prop("hidden", false);
                        }
                        var row = $chkbox_all[i].parentNode.parentNode;
                        var message_id_value = row.cells[1].innerHTML
                        var language_value = row.cells[3].innerHTML
                        dropdown_values.push([message_id_value, language_value])
                    }
                }
                $('#id_popup_tbody').append(edit_basic_data);
                var i =0;
                $("#id_popup_table TBODY TR").each(function() {
                    var row = $(this);
                    var messageid_value = dropdown_values[i][0]
                    var lang_value = dropdown_values[i][1]
                    var lang_id;
                    for (j = 0; j < render_language_data.length; j++) {
                        if (lang_value == render_language_data[j].description)
                            lang_id = render_language_data[j].language_id;
                    }
                    $(row.find("TD").eq(1).find("select option[value="+messageid_value+"]")).attr('selected','selected');
                    $(row.find("TD").eq(3).find("select option[value="+lang_id+"]")).attr('selected','selected');
                    i++;
                });
                $("#id_del_ind_checkbox").prop("hidden", true);
                $('#msg_desc_Modal').modal('show');
                table_sort_filter('id_popup_table');
                CloseLoaderPopup();
            } 
        });
    }

    // on click add icon display the row in to add the new entries
    function add_popup_row() {
        basic_add_new_html = '';
        var display_db_data = '';
        $('#id_popup_table').DataTable().destroy();
        $(".modal").on("hidden.bs.modal", function () {
<!--            $("#error_msg_id").html("");-->
        });
        new_row_data();   // Add a new row in popup
        if (GLOBAL_ACTION == "message_id_upload") {
            $(".class_del_checkbox").prop("hidden", false);
        }
    }

    // validating the  popup table for duplicate entries
    function compare_table_for_duplicate_entries(validate_add_attributes, message) {
        add_attr_duplicates = false;
        var error_message = ''
        var common = [];
        var add_attr_unique_list = [];
        var no_duplicate_value = 'Y'
        $.each(message, function (i, item) {
            if ((item.messages_id == null) || (item.messages_id_desc.length == 0) || (item.language_id == null) ) {
                error_message = ui_messeges("JMSG002")// Get message details
                no_duplicate_value = 'N'
                return [no_duplicate_value,error_message]
            }
        });
        if (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){ 
                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]
            }
        }
        return [no_duplicate_value,error_message]
    }

    //Function to highlight duplicate records
    function display_duplicate_entry(common) {
        var  message_id_desc_check = new Array;
        $("#id_popup_table TBODY TR").each(function() {
            var row = $(this);
            message_id_desc_dic = {}
            message_id_desc_dic.messages_id = row.find("TD").eq(1).find('select[type="text"]').val();
            message_id_desc.language_id = row.find("TD").eq(3).find('select[type="text"]').val();
            var desc='';
            for (i = 0; i < render_language_data.length; i++) {
                if (message_id_desc.language_id == render_language_data[i].language_id)
                    desc = render_language_data[i].description;
            }
            var compare = message_id_desc.messages_id+'-'+desc;
            message_id_desc_check.push(compare);
            jQuery.grep(message_id_desc_check, function(el) {
                if (jQuery.inArray(el, common) != -1) {
                    row_color_highlight(row);
                }
                else {
                    row_color_no_highlight(row);
                }
            });

        });
    }
</script>
<script src="{% static 'scripts/message_desc_config.js' %}"></script>
{% endblock %}