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

<div class="container-fluid">
    <div class="configuration-table_wrapper">
        <div class="elements-space-between">
            <h3>Maintain Calendars</h3>
            <div>
                <button class="btn btn-outline-primary"  title="Extract" onclick="location.href='{% url 'eProc_Basic_Settings:extract_calendar_data' %}'" type="button">
                    <i class="fas fa-download"></i> extract
                </button>
                <button type="button" id="id_add_data" title="Add Calendar" value="ADD" class="btn btn-primary" data-toggle="modal" data-target="#Calendar_Modal" onclick="onclick_add_button(this)">
                    <i class="fa fa-plus" title="Add Country"></i> add calendar
                </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" id="id_delete_data" title= "DELETE" value="Delete" style="display:none;" onclick="onclick_delete_button()">
                        <i class="fa fa-trash"></i> delete
                    </button>
                    <button class="btn btn-primary btn-sm" title="Update" id="id_update_data" style="display:none;" value="calendar_update" type="button" onclick="onclick_update_button()">
                        <i class="far fa-edit" title="Update"></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" title="Cancel"></i> cancel
                    </button>
                </div>
                <!--   display basic calendar settings table-->
                <table id="display_basic_table" class="class_basic_calendar_table table table-bordered custom-table">
                    <thead id="id_calendar_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>Calendar Number</th>
                        <th>Country</th>
                        <th>Description</th>
                        <th>Year</th>
                        <th>Working Days</th>
                        <th hidden>guid</th>
                    </tr>
                    </thead>
                    <tbody id="id_calendar_tbody">
                    {% for calendar in calendar_data %}
                    <tr>
                        <td class="class_select_checkbox" hidden><input type="checkbox" class="checkbox_check" onclick="valueChanged()" required></td>
                        <td>{{calendar.calender_id}}</td>
                        <td>{{calendar.country_desc}}</td>
                        <td>{{calendar.description}}</td>
                        <td>{{calendar.year}}</td>
                        <td>
                            {% for ct in calendar.wday_array %}
                                <span class="badge badge-primary">{{ct}}</span>
                            {% endfor %}
                        </td>
                        <td hidden>{{calendar.calender_config_guid}}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <!--end of display basic country table-->
            </div>
        </div>
    </div>
    <!--modal popup for Add,copy,update and upload-->
    <div class="modal fade" id="Calendar_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 Calendar</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="">
                        <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')" id="deleteBtn"><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_calendar_code" ></p>
                            <p id="id_error_msg_calendar_name" ></p>
                            <p id="id_error_msg_calendar_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>calendar Number</th>
                                    <th>Country</th>
                                    <th>Description</th>
                                    <th>Year</th>
                                    <th>Working Days</th>
                                    <th id="id_del_ind_checkbox" hidden>Del Indicator</th>
                                    <th hidden></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>
                    <button class="btn btn-primary btn-sm" title="Delete" id="delete_data" value="DELETE" data-toggle="modal" data-target="#id_delete_confirm_popup" onclick="hideModal()">
                        <i class="fa fa-trash"></i> Delete
                    </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>
<script>
    var rendered_calendar_data = {{calendar_data|safe}};
    var render_country_data = {{country_list|safe}}
    var messages_list = {{messages_list|safe}};
    var calendar_data_array = {}
    var main_table_calendar_value =[];
    var calendar = '';
    var edit_basic_data ='';
    var calendar_data = new Array();
    var GLOBAL_ACTION='';
    var no_duplicate_entries = 'Y'
    var Tablename = uiConstants["CONST_TABLENAME_CALENDERCONFIG"]
    var appname = uiConstants["CONST_APPNAME01"]
    var db_header_data = uiConstants["CONST_HEADER_DATA_COUNTRY"]
    var workingdays_dropdown = '';
    workingdays_dropdown = '<option value="1">Sunday</option> <option value="2">Monday</option> <option value="3">Tuesday</option> <option value="4">Wednesday</option> <option value="5">Thursday</option> <option value="6">Friday</option> <option value="7">Saturday</option>';
    var working_days_values = [];
    var wday_array = [];
    var country_dropdwn = [];
    var main_table_calendar_checked = [];

    //******************************
    function calendar_drpdown(){
        $.each(rendered_calendar_data, function (i, item) {
            working_days_values = []
            wday_array = item.working_days.split(",");
            for(j=0; j<wday_array.length; j++)
            {
                working_days_values[j] = get_days(wday_array[j]);
            }
        });
        country_dropdwn = '';
        $.each(render_country_data, function (i, item) {
            country_dropdwn += '<option  value="' + item.country_code + '">' + item.country_name + '</option>'
        });
    }

    //onclick of add button display Calendar_Modal popup and set GLOBAL_ACTION button value
    function onclick_add_button(button){
        OpenLoaderPopup();
        calendar_drpdown();
        $("#error_msg_id").css("display", "none")
        $( "#header_select").prop( "hidden", false );
        $("#calenderid").prop("hidden", true);
        GLOBAL_ACTION=button.value
        $('#id_popup_table').DataTable().destroy();
        $("#id_popup_tbody").empty();
        $('#Calendar_Modal').modal('show');
        display_button(); // Call the display_button function to show/hide the buttons
        basic_add_new_html = '<tr> <td><input type="checkbox"> </td>'+
        '<td><input class="form-control" type="text"  pattern="[A-Z]" maxlength="10"  name="calender_id" style="text-transform:uppercase;" required></td>'+
        '<td><select id="country" class="input form-control" type="text" name="country"> {% for country in country_list %} <option value="{{country.country_code}}">{{country.country_name}}</option> {% endfor %} </select> </td>'+
        '<td> <input class="form-control check_special_char" type="text" name="description"> </td>'+
        '<td> <input class="form-control yearPicker" type="text" maxlength="4"  name="year"> </td>'+
        '<td style="width: 160px;"> <select style="overflow-y:scroll;" type="text" class="input form-control multiple_select" type="text" name="working_days" title="Select.." multiple data-selected-text-format="count" data-actions-box="true" >'+
        '<option value="1">Sunday</option><option value="2">Monday</option><option value="3">Tuesday</option><option value="4">Wednesday</option><option value="5">Thursday</option><option value="6">Friday</option><option value="7">Saturday</option></select>'+
        '</td>'+
        '<td class="class_del_checkbox" hidden> <input type="checkbox"> </td>'+
        '<td input type="text" id="calendar_config_guid" hidden></td></tr>';
        $('#id_popup_tbody').append(basic_add_new_html);
        DatePicker();
        MultipleSelect();
        $("#id_del_ind_checkbox").prop( "hidden", true );
        document.getElementById("id_del_add_button").style.display = "block";
        $("#save_id").prop("hidden", false);
        CloseLoaderPopup();
        table_sort_filter('id_popup_table');
    }

    function onclick_copy_update_button(data) {
        $('#id_popup_table').DataTable().destroy();
        $("#error_msg_id").css("display", "none")
        $("#id_popup_tbody").empty();
        //Reference the Table.
        var res = get_all_checkboxes(); // Function to get all the checkboxes
        var $chkbox_all = $('td input[class="checkbox_check"]', res);
        //Reference the CheckBoxes in Table.
        var edit_basic_data = "";
        var guid = '';
        var dropdown_values = [];
        var unique_input = '';
        calendar_drpdown();
        var country_code, cntry_name;
        //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[6].innerHTML;
                    $("#calenderid").prop("hidden", false);
                    unique_input = '<input class="form-control" type="text" value="' + row.cells[1].innerHTML + '" name="calender_id"  maxlength="10" style="text-transform:uppercase" disabled>'
                    cntry_name = row.cells[2].innerHTML;
                    Desc_inpt = '<input value="' + row.cells[3].innerHTML + '"  class="form-control check_special_char" type="text" name="description">'
                    edit_basic_data += 
                    '<tr>'+
                        '<td hidden><input type="checkbox" required></td>'+
                        '<td><input class="form-control" type="text" value="' + row.cells[1].innerHTML + '" name="calender_id"  maxlength="10" style="text-transform:uppercase" disabled></td>'+
                        '<td><select id="country"  class="form-control datatable-scroll-wrap " type="text" name="country" disabled>'+country_dropdwn+'</select></td>'+
                        '<td><input value="' + row.cells[3].innerHTML + '"  class="form-control check_special_char" type="text" name="description"></td>'+
                        '<td><input value="'+row.cells[4].innerHTML+'" class="form-control yearPicker" type="text" maxlength="4"  name="year"></td>'+
                        '<td style="width:160px;"> <select style="overflow-y:scroll;" id="working_days"  class="form-control multiple_select working_days" type="text" name="working_days"  multiple  title="Select.." data-selected-text-format="count" data-actions-box="true">'+workingdays_dropdown+'</select> </td>'+
                        '<td class="class_del_checkbox" hidden> <input type="checkbox" ></td>'+
                        '<td hidden><input type="text" id="calendar_config_guid" value="'+row.cells[6].innerHTML+'"></td>'+
                    '</tr> ';
                    $("#header_select").prop("hidden", true);
                }
                var country_drp_values = row.cells[2].innerHTML
                for (var j = 0; j < render_country_data.length; j++) {
                    if (cntry_name == render_country_data[j].country_name)
                        country_code = render_country_data[j].country_code;
                }
                var wdays_value = row.cells[5].innerText;
                var wday_copy_values = [];
                wday_copy_values = wdays_value.split(" ")
                dropdown_values.push([country_code,wday_copy_values])
            }
        }
        $('#id_popup_tbody').append(edit_basic_data);
        var i =0;
        var day_val = '';
        $("#id_popup_table TBODY TR").each(function() {
            var row = $(this);
            var country_values = dropdown_values[i][0]
            var workingdays_value = dropdown_values[i][1]
            for(k=0;k<workingdays_value.length;k++){
                day_val = get_values(workingdays_value[k]);
                $(row.find("TD").eq(5).find("select option[value="+ day_val +"]")).attr('selected','selected');
            }  
            $(row.find("TD").eq(2).find("select option[value="+country_values+"]")).attr('selected','selected');
            i++;
        });
        DatePicker();
        MultipleSelect();
        $("#id_del_ind_checkbox").prop("hidden", true);
        $('#Calendar_Modal').modal('show');
        table_sort_filter('id_popup_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 Tabledata = { "Dbl_clck_tbl_id": 'CalenderConfig' };
        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, calendarconfig_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'){
                    $('#Calendar_Modal').modal('show');
                }
            }
            if ((no_duplicate_value == 'Y') && (no_duplicate_entries == 'Y')) {
                var calendar_data_array = calendarconfig_data;
                $('#id_save_confirm_popup').modal('hide');
                data = {'data':calendarconfig_data,'table_name':'CalenderConfig','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_calendar_data = Response[0];
                        display_basic_db_data();
                        success_response(Response);
                        DatePicker();
                        MultipleSelect();
                        CloseLoaderPopup();
                    }
                });
            }
            else if (error_message) {
                display_error_message(error_message)
            } 
        }
        table_sort_filter('id_popup_table');
    } 

    // on click add icon display the row in to add the new entries
    function add_popup_row1() {
        var basic_add_new_html = '';
        var display_db_data = '';
        $('#id_popup_table').DataTable().destroy();
        $(".modal").on("hidden.bs.modal", function () {
            $("#id_error_msg").html("");
        });
        basic_add_new_html =
        '<tr> <td><input type="checkbox"> </td>'+
        '<td><input class="form-control" type="text"  pattern="[A-Z]" maxlength="10"  name="calender_id" style="text-transform:uppercase;" required></td>'+
        '<td><select id="country" class="input form-control" type="text" name="country">' + country_dropdwn + '</select></td>'+
        '<td> <input class="form-control check_special_char" type="text" name="description"> </td>'+
        '<td> <input class="form-control yearPicker" type="text" maxlength="4"  name="year" style="width:150px"> </td>'+
       '<td style="width: 160px;"> <select style="overflow-y:scroll;" id="working_days"  class="input multiple_select working_days" type="text" name="working_days"  multiple  title="Select.." >'+workingdays_dropdown+'</select> </td>'+
        '<td class="class_del_checkbox" hidden> <input type="checkbox"> </td>'+
        '<td input type="text" id="calendar_config_guid" hidden></td></tr>';
        $('#id_popup_tbody').append(basic_add_new_html);
		DatePicker();
        MultipleSelect(); 
        if (GLOBAL_ACTION == "calendar_upload") {
            $(".class_del_checkbox").prop("hidden", false);
        }
        table_sort_filter_popup('id_popup_table');
    }

    // Onclick delete Button
    function onclick_delete_button() {
        $('#id_popup_table').DataTable().destroy();
        $("#error_msg_id").css("display", "none")
        $("#id_popup_tbody").empty();
        GLOBAL_ACTION = "DELETE";
        var edit_basic_data = "";
        var guid = '';
        var dropdown_values = [];
        main_table_number_range_checked = [];
        get_row_data("#display_basic_table"); // Function call to get the selected row data
        display_button(); // Call the display_button function to show/hide the buttons
        var data = {'data': main_table_calendar_checked, 'table_name': 'CalenderConfig', '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; // Get the delete_flags array from the response
                var res = get_all_checkboxes(); // Function to get all the checkboxes
                var $chkbox_all = $('td input[type="checkbox"]', res);
                var j = 0; // Index for docTypeArray
                for (var i = 0; i < $chkbox_all.length; i++) {
                    if ($chkbox_all[i].checked) {
                        var row = $chkbox_all[i].parentNode.parentNode;
                        if (j < docTypeArray.length && docTypeArray[j] === false) {
                            check = '<input type="checkbox" class="checkbox_check" disabled>';
                            $('#delete_data').prop('disabled', true);
                        } else {
                            check = '<input type="checkbox" class="checkbox_check" onclick="enableDeleteButton()">';
                            $('#delete_data').prop('disabled', true);
                        }
                        j++; // Move to the next index in docTypeArray
                        cntry_name = row.cells[2].innerHTML;
                        edit_basic_data +=
                        '<tr>'+
                            '<td>' + check + '</td>' +
                            '<td><input class="form-control" type="text" value="' + row.cells[1].innerHTML + '" name="calender_id"  maxlength="10" style="text-transform:uppercase" disabled></td>'+
                            '<td><input id="country"  class="form-control datatable-scroll-wrap " type="text" name="country" value="' + row.cells[2].innerHTML + '" disabled></td>'+
                            '<td><input value="' + row.cells[3].innerHTML + '"  class="form-control check_special_char" type="text" name="description" disabled></td>'+
                            '<td><input value="'+row.cells[4].innerHTML+'" class="form-control yearPicker" type="text" maxlength="4"  name="year" disabled></td>'+
                            '<td style="width:110px;"> <select style="overflow-y:scroll;" id="working_days"  class="form-control multiple_select working_days" type="text" name="working_days"  multiple  title="Select.." data-selected-text-format="count" data-actions-box="true" disabled>'+workingdays_dropdown+' </select> </td>'+
                            '<td class="class_del_checkbox" hidden> <input type="checkbox" ></td>'+
                            '<td hidden><input type="text" id="calendar_config_guid" value="'+row.cells[6].innerHTML+'"></td>'+
                        '</tr> ';
                        var country_drp_values = row.cells[2].innerHTML
                        for (var k = 0; k < render_country_data.length; k++) {
                            if (cntry_name == render_country_data[k].country_name)
                                country_code = render_country_data[k].country_code;
                        }
                        var wdays_value = row.cells[5].innerText;
                        var wday_copy_values = [];
                        wday_copy_values = wdays_value.split(" ")
                        dropdown_values.push([country_code,wday_copy_values])
                    }
                }
                $('#id_popup_tbody').append(edit_basic_data);
                var i =0;
                var day_val = '';
                $("#id_popup_table TBODY TR").each(function() {
                    var row = $(this);
                    var country_values = dropdown_values[i][0]
                    var workingdays_value = dropdown_values[i][0]
                    for(k=0;k<workingdays_value.length;k++){
                        day_val = get_values(workingdays_value[k]);
                        $(row.find("TD").eq(5).find("select option[value="+ day_val +"]")).attr('selected','selected');
                    }
                    $(row.find("TD").eq(2).find("select option[value="+country_values+"]")).attr('selected','selected');
                    i++;
                });
                DatePicker();
                MultipleSelect();
                $("#id_del_ind_checkbox").prop("hidden", true);
                $('#Calendar_Modal').modal('show');
                $("#header_select").prop("hidden", false);
                CloseLoaderPopup();
                table_sort_filter('id_popup_table');
            },
        });
    }

    //delete the selected row in db................
    function main_table_delete() {
        $('#success_msg_id').empty()
        main_table_calendar_checked = [];
        GLOBAL_ACTION = 'DELETE'
        main_table_country_checked = [];
        var Tabledata = { "Dbl_clck_tbl_id": 'CalenderConfig' };
        $('#display_basic_table').DataTable().destroy();
        get_row_data("#id_popup_table");
        $('#id_delete_confirm_popup').modal('hide');
        data = {'data':main_table_calendar_checked, 'table_name': 'CalenderConfig', '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_calendar_data = Response[0];
                display_basic_db_data();
                success_response(Response); // Function call to display response data
                CloseLoaderPopup();
            }
        });
    }

    function DatePicker() {
        $(".yearPicker").datepicker({
            format: "yyyy",
            viewMode: "years",
            minViewMode: "years",
            autoclose:true
        });
    }

    function MultipleSelect() {
        $('.working_days').selectpicker();
        $('.multiple_select').selectpicker();
    }

    function get_days(workingday){
        var day;
        switch (workingday) {
            case '1':
                day = "Sun";
                break;
            case '2':
                day = "Mon";
                break;
            case '3':
                day = "Tue";
                break;
            case '4':
                day = "Wed";
                break;
            case '5':
                day = "Thur";
                break;
            case '6':
                day = "Fri";
                break;
            case '7':
                day = "Sat";
        }
        return day;
    }

    function get_values(short_day){
        var day;
        switch (short_day) {
            case 'Sun':
                day = "1";
                break;
            case 'Mon':
                day = "2";
                break;
            case 'Tue':
                day = "3";
                break;
            case 'Wed':
                day = "4";
                break;
            case 'Thur':
                day = "5";
                break;
            case 'Fri':
                day = "6";
                break;
            case 'Sat':
                day = "7";
        }
        return day;
    }

    // validating the  popup table for duplicate entries
    function compare_table_for_duplicate_entries(validate_add_attributes, calendar) {
        add_attr_duplicates = false;
        var error_message = ''
        var common = [];
        var add_attr_unique_list = [];
        var no_duplicate_value = 'Y'
         $.each(calendar, function (i, item) {
                if ((item.calender_id.length == 0) || (item.description.length == 0)) {
                    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 Calendar_check = new Array;
        $("#id_popup_table TBODY TR").each(function() {
            var row = $(this);
            Calendar_dic = {}
            Calendar_dic.calender_id = (row.find("TD").eq(1).find('input[type="text"]').val())
            var compare =  Calendar_dic.calender_id 
            Calendar_check.push(compare);
            jQuery.grep(Calendar_check, function(el) {
                if (jQuery.inArray(el, common) != -1) {
                    row_color_highlight(row);
                }
                else {
                    row_color_no_highlight(row);
                }
            });
        });
    }

</script>

<script src="{% static 'scripts/calender_settings.js' %}"></script>

{% endblock %}