<?php

include "config.php";

?>

<!DOCTYPE html>
<html lang="en" class="light-style customizer-hide">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
        <title>NPS Dashboard</title>
        <meta name="description" content="" />
        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
        <!-- <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> -->
        <link href="assets/css/main.d810cf0ae7f39f28f336.css" rel="stylesheet">
        <link href="assets/css/animate.css" rel="stylesheet">
        <link href="assets/css/animate.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/fontawesome.min.css" integrity="sha512-d0olNN35C6VLiulAobxYHZiXJmq+vl+BGIgAxQtD5+kqudro/xNMvv2yIHAciGHpExsIbKX3iLg+0B6d0k4+ZA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
        <link rel="stylesheet" href="assets/select2/select2.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css" />
        <script type="text/javascript" src="assets/scripts/jquery.min.js"></script>
        <link rel="stylesheet" href="assets/css/styleX.css">

        <style>
            .top_col
            {
                max-width:100px !important;
            }
            .offscreen {
            position: absolute;
            top: -10000px;
            left: -10000px;
            visibility: hidden;
        }
        #ppt_frame
        {
            position: absolute;
            top: 0px;
            /* z-index: 999999; */
            width: 100%;
            height: 100%;
            display:none;
        }
        iframe
        {
            width: 100%;
            height: 100%;
        }
        /* .left-section, .right-section {
            max-height: 430px; 
            overflow-y: auto;
            overflow-x: hidden;
        } */
        .scroll-section
        {
            max-height: 430px;
            max-width: 1360px; 
            overflow-y: auto;
            overflow-x: auto;
        }
        .scroll-section2
        {
            max-height: 430px;
            max-width: 1360px; 
            overflow-y: auto;
            overflow-x: auto;
        }
        /* .pr2, .pr4 {
            padding-right: 15px;
        } */

        .cardBg {
            background-color: #FFFFFF; /* Adjust to match your theme */
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 5px;
        }
        .card-header>.nav {
            margin-left: 0rem !important;
            height: 100%;
            width: 100%;
        }
        .card-header {
            height: 2.5rem;
        }
        .nav-link {
            display: block;
            padding: .2rem 1rem;
        }
        .female_selected_shadow
        {
            filter: drop-shadow(0px 3px 7px #FF94D4);
        }
        .male_selected_shadow
        {
            filter: drop-shadow(0px 3px 7px #8BCAFF);
        }
        .selected_shadow
        {
            filter: drop-shadow(0px 0px 7px #000000);
        }
        .switchG {
            position: relative;
            height: 32px;
            width: auto;
            margin: 0px;
            background: #FFFFFF;
            border-radius: 32px;
            left: 4%;
            float:right;

        }

        .switch-labelG {
            font-weight: bold;
            position: relative;
            z-index: 2;
            float: left;
            width: 70px;
            line-height: 32px;
            font-size: 12px;
            color: #676a6c;
            text-align: center;
            cursor: pointer;
            margin-bottom:0px;
        }

        .switch-inputG {
            display: none;
        }

        .switch-inputG:checked + .switch-labelG {
            color: #FFF;
            transition: 0.15s ease-out;
            transition-property: color, text-shadow;
        }

        .switch-inputG:checked + .switch-labelG-y ~ .switch-selectorG {
            transform: translateX(0%);
            background-color: #1AB394;
        }

        .switch-inputG:checked + .switch-labelG-i ~ .switch-selectorG {
            transform: translateX(200%);
            background-color: #f8ac59;
        }

        .switch-inputG:checked + .switch-labelG-n ~ .switch-selectorG {
            transform: translateX(100%);
            background-color: #ed5565;
        }

        .switch-selectorG {
            position: absolute;
            z-index: 1;
            top: 0px;
            left: 0px;
            display: block;
            width: 70px;
            height: 32px;
            border-radius: 32px;
            background-color: #1ab394;
            transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }

        .tbodyCat{
            background-color:#F9D00D !important;
            width: 10%;
            font-size:0.7rem;
            color: #000000 !important;
            font-weight: 500;
        }
        .main_td
        {
            background-color:#1F74BA !important;
            color:white !important;
        }

        .promoterTd
        {
            background-color: #C1F0C8 !important;
            font-size:0.6rem !important;
        }
        .passiveTd
        {
            background-color: #FFFFCC !important;
            font-size:0.6rem !important;
        }
        .detractorTd
        {
            background-color: #FBE2D5 !important;
            font-size:0.6rem !important;
        }

        .tbodyCat {
                min-width: 150px; /* Example width */
            }
            .tdContent {
                display: flex;
                justify-content: space-around; /* Space between values */
                width: 100%; /* Match parent width */
            }
            .tdContent span {
                flex: 1; /* Ensure equal spacing for values */
                text-align: center; /* Center each value */
            }

            table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid #ddd;
        text-align: center;
        vertical-align: top;
    }

    .tbodyCat {
        width: 150px; /* Example width for the first column */
    }

    .tdContent {
        display: flex;
        justify-content: space-around; /* Space values evenly */
        width: 100%;
    }

    .tdContent span {
        flex: 1; /* Equal space for each value */
        text-align: center;
        font-size: 0.7rem;
    }

    .brand_img {
        width: 35px; /* Adjust image size as needed */
        height: 35px;
    }
    .brand_img2 {
        width: 20px; /* Adjust image size as needed */
        height: 20px;
    }
    .waveX
    {
        font-weight: normal;
        font-size: 0.8rem;
    }
    .nps_count
    {
        font-size: 0.8rem;
    }
    .nav-item .nav-link {
        font-weight: normal;
    }
    .dashed_border
    {
        border:2px dashed #e9ecef !important;
    }
    .dashed_border1
    {
        border-right:2px dashed #e9ecef !important;
    }
    .dashed_border2
    {
        border-right:2px dashed #e9ecef !important;
    }
    .solid_border
    {
        border: 1px solid black !important;
        font-size:0.7rem !important;
    }
    .solid_border2 
    {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        font-size:0.7rem !important;
    }
    .table thead th {
        border-bottom: 2px dashed #e9ecef;
    }
    .table th, .table td 
    {
        padding: .20rem;
    }
    .boldC
    {
        font-weight:500;
    }
    .nps_count2 {
    font-weight: 700;
}
.word_cloud_comment td {
    font-size: 0.7rem;
    text-align: start;
    padding-left: 10px;
}

.WCX
{
    height: 300px;
    border-radius: 70%;
    border: 1px solid black;
}

.waveX
{
    font-weight: bold
}

#overall_tbl_trends {
  border-collapse: collapse;
  width: 100%;
}

#overall_tbl_trends thead th {
  position: sticky;
  top: 0; /* Keeps the header row fixed */
  z-index: 2; /* Ensures it stays above other content */
}

#overall_tbl_trends tbody th {
  position: sticky;
  left: 0; /* Keeps the first column fixed */
  /* z-index: 1;  */
}

#domain_tbl_trends {
  border-collapse: collapse;
  width: 100%;
}

#domain_tbl_trends thead th {
  position: sticky;
  top: 0; /* Keeps the header row fixed */
  z-index: 2; /* Ensures it stays above other content */
}

#domain_tbl_trends tbody th {
  position: sticky;
  left: 0; /* Keeps the first column fixed */
  /* z-index: 1;  */
}

.notice
{
    font-size: 0.7rem;
    padding-left:10px;
}

.select2-selection__rendered {
    font-weight: 600 !important;
}
        </style>
    </head>

    <body>
        <div class="app-container app-theme-white body-tN-shadow fixed-sidebar fixed-header" id="app-containerX">
            <div class="app-header header-shadow" style="height:30px;display:none">
                <div class="app-header__logo" style="background-color:white">
                    <button class="openbtn" id="openbtn" data-status="1" onclick="tabSidebar()" style="display:none"><i class="fa fa-bars" aria-hidden="true"></i></button>
                    <!-- <button class="openbtn" id="filterbtn" onclick="filterS(this)" data-value="1"><i class="fa fa-filter" aria-hidden="true"></i></button> -->
                    
                </div>
                <div class="app-header__mobile-menu">
                    <div>
                        <button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
                        <span class="hamburger-box">
                        <span class="hamburger-inner"></span>
                        </span>
                        </button>
                    </div>
                </div><!-- app-header mobile menu div-->
                <div class="app-header__menu">
                    <span>
                        <button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
                        <span class="btn-icon-wrapper">
                        <i class="fa fa-ellipsis-v fa-w-6"></i>
                        </span>
                        </button>
                    </span>
                </div><!-- app-header menu div-->
                <div class="app-header__content" style="background-color:white;display:block">
                    <div class="row">
                        <div class="col-lg-11">
                            
                        </div>
                        <div class="col-lg-1 text-center">
                            
                        </div>
                    </div>
                    <!-- <div class="app-header-left" style="margin:0px auto;margin-top:15px">
                        
                    </div>
                    <div class="app-header-right">
                        
                    </div> -->
                </div><!-- app-header content-->
            </div><!-- app-header div-->
            <div id="mySidebar" class="sidebar">
                <?php include("tabs.php"); ?>
            </div>
            <div class="app-main" id="main">
                <div class="splash">
                    <div class="splash-title">
                        <div class="spinner">

                        </div>
                    </div>
                </div>
                <div class="app-main__outer" style="background-color: #E4ECF3;">
                    <div class="app-main__inner" style="padding: 0px;padding-right:15px">
                        <div class="card">
                            <div class="card-header" style="position: sticky; top: 0; z-index: 1000; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                                <div class="header__pane bars" style="margin-left:-15px">
                                    <div class="logo-src">
                                        <img src="assets/images/filpkart.png" style="width:30px;height:30px;">
                                    </div>
                                </div>
                                <button class="openbtn btn" onclick="openF();" style="background-color:transparent"><i class="fa fa-filter"></i></button>
                                <ul class="nav nav-justified ml-2">
                                    <li class="nav-item"><a data-toggle="tab" href="#tab-eg9-1" class="nav-link active">NPS</a></li>
                                    <li class="nav-item"><a data-toggle="tab" href="#tab-eg9-2" class="nav-link">Trends</a></li>
                                    <li class="nav-item"><a data-toggle="tab" href="#tab-eg9-3" class="nav-link">VOC</a></li>
                                </ul>
                                <div class="header__pane bars" style="margin-left:5px">
                                    <div>
                                        <button class="mb-0 mr-0 border-0 btn-transition btn btn-outline-primary" onclick="resetFilters();">Reset</button>
                                    </div>
                                </div>
                                <div class="header__pane bars" style="margin-left:5px">
                                    <div>
                                        <button class="mb-0 mr-0 border-0 btn-transition btn btn-outline-primary" onclick="exportExcelFlag();">Export</button>
                                    </div>
                                </div>
                                <div class="header__pane bars" style="margin-left:5px">
                                    <button type="button" class="mb-0 mr-0 border-0 btn-transition btn btn-outline-danger" onclick="logout();"> <i class="fa fa-power-off" style="font-size:0.9rem"></i></button>
                                </div>
                            </div>
                            <div class="card-body" style="padding-top:5px;padding-bottom:5px">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="tab-eg9-1" role="tabpanel">
                                        <?php include "tab1.php"; ?>
                                    </div>
                                    <div class="mt-2"></div>
                                    <div class="tab-pane" id="tab-eg9-2" role="tabpanel">
                                        <?php include "tab2.php"; ?>
                                    </div>
                                    <div class="tab-pane" id="tab-eg9-3" role="tabpanel">
                                        <?php include "tab3.php"; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- app-main inner-->
                </div><!-- app-main outer-->
            </div><!-- app-main div-->
        </div><!-- app-container div-->
        

        <div class="card animate__animated animate__fadeInDown" id="alert_div" style="display:none">
            <h6>Excel export is getting downloaded !!</h6>
        </div>
        <div class="card animate__animated animate__fadeInDown" id="alert_div2" style="display:none">
            <h6>Excel export is downloaded successfully !!</h6>
        </div>

        <div class="card animate__animated animate__fadeInDown" id="alert_div3" style="display:none">
            <h6>PPT export is getting downloaded !!</h6>
        </div>
        <div class="card animate__animated animate__fadeInDown" id="alert_div4" style="display:none">
            <h6>PPT export is downloaded successfully !!</h6>
        </div>

        <!-- <div class="popup-btn trends" onclick="trends(1)" id="trends_open_div">
            <a href="javascript:void(0)">
                TRENDS
            </a>
        </div>
        <div class="popup-btn trends" onclick="trends(2)" id="trends_close_div" style="display:none">
            <a href="javascript:void(0)">
                GO BACK
            </a>
        </div> -->
        <div id="mySidebar2" class="sidebar2">
            <a href="javascript:void(0)" class="closebtn" onclick="closeF()"><i class="fa fa-times"></i></a>
            <ul class="vertical-nav-menu" style="padding:0px 0px 0px 10px !important;font-family: 'Roboto', sans-serif" id="filterX">
                <?php include('filter.php');?>
            </ul>
        </div>

        <div id="frame" style="display:none">
            
        </div>
        
        <script type="text/javascript" src="assets/scripts/main.d810cf0ae7f39f28f336.js"></script>
        <script type="text/javascript" src="assets/select2/select2.min.js"></script>
        <script async defer src="https://buttons.github.io/buttons.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
	    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
        <script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
        <script src="assets/wizard/js/jquery.steps.js"></script>
	    <script src="assets/wizard/js/main.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>
        <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js.map"></script> -->
        <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript" src="https://code.highcharts.com/modules/variable-pie.js"></script>
        <script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>
        <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
        <script type="text/javascript" src="https://code.highcharts.com/modules/offline-exporting.js"></script>
        <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script> -->
        <script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
        <script type="text/javascript" src="https://keresearch.in/demoDash/assets/code/modules/heatmap.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.3.1/dist/pptxgen.bundle.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pptxgenjs/3.8.0/pptxgen.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
        <script src="https://code.highcharts.com/highcharts-more.js"></script>
        <script src="https://code.highcharts.com/maps/modules/map.js"></script>
        <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.3.1/dist/pptxgen.bundle.js"></script>

        <script>
            var filtercondX = ``;
            var zoneTxt = [];
            var tierTxt = [];
            var architectTxt = [];
            var accountTxt = [];
            var monthX = [];
            var conX = ``;
            var condX = ``;
            var domainDropCvalX = '0';
            var domainLabel = <?php echo json_encode($domain); ?>;
            var subdomainLabel = <?php echo json_encode($subdomain); ?>;
            var brandLabel = <?php echo json_encode($brand); ?>;
            var monthLabel = ['','Jan\'25', 'Feb\'25', 'Mar\'25', 'Apr\'25', 'May\'25', 'Jun\'25', 'Jul\'25', 'Aug\'25', 'Sep\'25', 'Oct\'25', 'Nov\'25', 'Dec\'25', 'Jan\'26'];

            $(document).ready(function() {
                $(".splash").show();
                $('#zone').multiselect({
                    includeSelectAllOption: true,
                    enableFiltering: false,
                    enableFullValueFiltering: false
                });
                $("#zone").multiselect('selectAll', false);
                $("#zone").multiselect("deselectAll", false);
                $("#zone").multiselect('updateButtonText');

                $('#tier').multiselect({
                    includeSelectAllOption: true,
                    enableFiltering: false,
                    enableFullValueFiltering: false
                });
                $("#tier").multiselect('selectAll', false);
                $("#tier").multiselect("deselectAll", false);
                $("#tier").multiselect('updateButtonText');

                $('#architect').multiselect({
                    includeSelectAllOption: true,
                    enableFiltering: false,
                    enableFullValueFiltering: false
                });
                $("#architect").multiselect('selectAll', false);
                $("#architect").multiselect("deselectAll", false);
                $("#architect").multiselect('updateButtonText');

                $('#account').multiselect({
                    includeSelectAllOption: true,
                    enableFiltering: false,
                    enableFullValueFiltering: false
                });
                $("#account").multiselect('selectAll', false);
                $("#account").multiselect("deselectAll", false);
                $("#account").multiselect('updateButtonText');
                select2Initialize();
            });

            $(window).on("load", function() {
                applyF();
                var heightX = $(window).height();
                heightX = (90/100)*heightX;
                // $(".ov-card").css("max-height",heightX);
                var widthX = $(window).width();
                widthX = (93/100)*widthX;
                $(".scroll-section").each(function(){
                    $(this).css("max-width",widthX);
                })
                $(".scroll-section2").each(function(){
                    $(this).css("max-width",widthX);
                })
            });

            $(window).on("resize", function() {
                var heightX = $(window).height();
                heightX = (90/100)*heightX;
                // $(".ov-card").css("max-height",heightX);
                var widthX = $(window).width();
                widthX = (93/100)*widthX;
                $(".scroll-section").each(function(){
                    $(this).css("max-width",widthX);
                })
                $(".scroll-section2").each(function(){
                    $(this).css("max-width",widthX);
                })
            });

            //=================================Drodpown============================================
            function select2Initialize()
            {
                $(".js-select2").each(function(){
                    $(this).select2({
                        minimumResultsForSearch: 20,
                        dropdownParent: $(this).next('.dropDownSelect2')
                    });
                    $(".js-select2").each(function(){
                        $(this).on('select2:close', function (e){
                            if($(this).val() == "Please chooses") {
                                $('.js-show-service').slideUp();
                            }
                            else {
                                $('.js-show-service').slideUp();
                                $('.js-show-service').slideDown();
                            }
                        });
                    });
                });

                $("#domainDrop").next().addClass("ml-2");
            }
            //=================================Filter Sidebar START============================================

            function openF() 
            {
                document.getElementById("mySidebar2").style.width = "220px";
                document.getElementById("app-containerX").style.opacity = "0.5";
            }

            function closeF() 
            {
                document.getElementById("mySidebar2").style.width = "0px";
                document.getElementById("app-containerX").style.opacity = "1";
            }

            //=================================Filter Sidebar END============================================

            //=================================Logout============================================
            function logout() {
                window.stop();
                $.ajax({
                    url: "api/logout.php",
                    type: "POST",
                    data: {
                        'action': 'logout'
                    },
                    success: function(response) {
                        if (response == "success") {
                            window.location.href = "index.php";
                        }
                    }
                })
            }
            //=================================Logout============================================

            function resetFilters()
            {
                $('#zone').multiselect({
                    includeSelectAllOption: true,
                    enableFiltering: false,
                    enableFullValueFiltering: false
                });
                $("#zone").multiselect('selectAll', false);
                $("#zone").multiselect("deselectAll", false);
                $("#zone").multiselect('updateButtonText');

                $('#tier').multiselect({
                    includeSelectAllOption: true,
                    enableFiltering: false,
                    enableFullValueFiltering: false
                });
                $("#tier").multiselect('selectAll', false);
                $("#tier").multiselect("deselectAll", false);
                $("#tier").multiselect('updateButtonText');

                $('#architect').multiselect({
                    includeSelectAllOption: true,
                    enableFiltering: false,
                    enableFullValueFiltering: false
                });
                $("#architect").multiselect('selectAll', false);
                $("#architect").multiselect("deselectAll", false);
                $("#architect").multiselect('updateButtonText');

                $('#account').multiselect({
                    includeSelectAllOption: true,
                    enableFiltering: false,
                    enableFullValueFiltering: false
                });
                $("#account").multiselect('selectAll', false);
                $("#account").multiselect("deselectAll", false);
                $("#account").multiselect('updateButtonText');
                flagConstruct();
            }

            function flagConstruct()
            {
                applyF();
            }

            function transposeData(data) 
            {
                return data[0].map((col, i) => data.map(row => row[i]));
            }

            function calculateDifference(array1, array2) 
            {
                if (array1.length !== array2.length || array1.some((row, index) => row.length !== array2[index].length)) {
                    throw new Error("Arrays must have the same dimensions.");
                }
                const result = array1.map((row, rowIndex) => {
                    return row.map((value, colIndex) => {
                        return value - array2[rowIndex][colIndex];
                    });
                });
                return result;
            }

            function domainDropC(id)
            {
                $(".splash").show();
                debugger;
                domainDropCvalX = parseInt($(`#${id}`).val());
                var domainLabelX = domainLabel[domainDropCvalX-1];
                var subdomainLabelX = subdomainLabel[domainDropCvalX-2];

                var html = ``;
                var html2 = ``;
                html += `
                    <tr>
                        <th class="tbodyCat ${domainLabelX}_td main_td">${domainLabelX}</th>
                    `;

                $('#current_tbl tbody tr').eq(domainDropCvalX).find(".nps_count").each(function(i,e){
                    var X = $(e).html();
                    html += `
                        <td class="dashed_border">
                            <div class="tdContent">
                                <span class="nps_count nps_count2" id="nps_count_SDC_${brandLabel[i]}">${X}</span>
                            </div>
                        </td>
                    `;
                });
                html += `</tr>`;

                subdomainLabelX.forEach(function(e,i,a){
                    html += `<tr>`;
                    html += `<th class="tbodyCat ${e}_td">${e}</th>`;
                    brandLabel.forEach(function(e2,i2,a2){
                        html += `<td class="dashed_border">
                            <div class="tdContent">
                                <span class="nps_count" id="nps_count_SDC_${e2}_${i+1}">-</span>
                            </div>
                        </td>`;
                    });
                    html += `</tr>`;
                });

                $("#sd_current_tbl > tbody").empty().append(html);

                html2 += `
                    <tr>
                        <th class="tbodyCat ${domainLabelX}_td main_td">${domainLabelX}</th>
                    `;

                $('#previous_tbl tbody tr').eq(domainDropCvalX).find(".nps_count").each(function(i,e){
                    var X = $(e).html();
                    html2 += `
                        <td class="dashed_border">
                            <div class="tdContent">
                                <span class="nps_count nps_count2" id="nps_count_SDC_${brandLabel[i]}">${X}</span>
                            </div>
                        </td>
                    `;
                });
                html2 += `</tr>`;

                subdomainLabelX.forEach(function(e,i,a){
                    html2 += `<tr>`;
                    html2 += `<th class="tbodyCat ${e}_td">${e}</th>`;
                    brandLabel.forEach(function(e2,i2,a2){
                        html2 += `<td class="dashed_border">
                            <div class="tdContent">
                                <span class="nps_count" id="nps_count_SDP_${e2}_${i+1}">-</span>
                            </div>
                        </td>`;
                    });
                    html2 += `</tr>`;
                });
                $("#sd_previous_tbl > tbody").empty().append(html2);

                secondAjax();
            }

            function applyF()
            {
                $(".splash").show();
                debugger;
                closeF();
                filtercondX = ``;
                zoneTxt = [];
                tierTxt = [];
                architectTxt = [];
                accountTxt = [];

                conX = ``;
                condX = ``;
                var zoneLengthY = $("#zone option:selected").length;
                var tierLengthY = $("#tier option:selected").length;
                var architectLengthY = $("#architect option:selected").length;
                var accountLengthY = $("#account option:selected").length;

                var zoneVal = $("#zone").val();
                var tierVal = $("#tier").val();
                var architectVal = $("#architect").val();
                var accountVal = $("#account").val();

                var selectedOptionsZone = $("#zone").find("option:selected");
                selectedOptionsZone.each(function () {
                    var dataNameValue = $(this).data("name");
                    zoneTxt.push(dataNameValue);
                });

                var selectedOptionsTier = $("#tier").find("option:selected");
                selectedOptionsTier.each(function () {
                    var dataNameValue = $(this).data("name");
                    tierTxt.push(dataNameValue);
                });

                var selectedOptionsarchitect = $("#architect").find("option:selected");
                selectedOptionsarchitect.each(function () {
                    var dataNameValue = $(this).data("name");
                    architectTxt.push(dataNameValue);
                });

                var selectedOptionsaccount = $("#account").find("option:selected");
                selectedOptionsaccount.each(function () {
                    var dataNameValue = $(this).data("name");
                    accountTxt.push(dataNameValue);
                });

                if((zoneLengthY == 0) && (tierLengthY == 0) && (architectLengthY == 0) && (accountLengthY == 0))
                {
                    conX = 1;
                }
                else
                {
                    conX = 2;
                }
                if(conX==2)
                {
                    filtercondX += `<b>Filters</b>: `;
                    if(zoneLengthY != 0)
                    {
                        condX += `Q2A IN (${zoneVal}) AND `
                        filtercondX += `<b>Zone</b> IN (${zoneTxt.join(", ")}) || `;
                    }
                    if(tierLengthY != 0)
                    {
                        condX += `Q2D IN (${tierVal}) AND `
                        filtercondX += `<b>Tier</b> IN (${tierTxt.join(", ")}) || `;
                    }
                    if(architectLengthY != 0)
                    {
                        condX += `QGA IN (${architectVal}) AND `
                        filtercondX += `<b>Good Architect</b> IN (${architectTxt.join(", ")}) || `;
                    }
                    if(accountLengthY != 0)
                    {
                        condX += `QAccountType IN (${accountVal}) AND `
                        filtercondX += `<b>Account Type</b> IN (${accountTxt.join(", ")}) || `;
                    }
                    condX += ` 1=1`;
                }
                else
                {
                    filtercondX += `<span class="boldC">Filters</span>: All Selected`;
                    condX += ` 1=1`;
                }
                console.log(condX);
                filtercondX = filtercondX.replace(/\|\| $/, '');
                $(".paraY").empty().append(filtercondX);
                fetchMonth();
                fetchBase();
                firstAjax();
                if(domainDropCvalX != '0')
                {
                    secondAjax();
                }
            }

            function fetchMonth()
            {
                $.ajax({
                    url: "api/month.php",
                    type: "POST",
                    async: false,
                    success: function(response) {
                        debugger;
                        var data = JSON.parse(response);
                        console.log("month");
                        console.log(data);
                        monthX = [1,2];
                    }
                });
            }

            function fetchBase()
            {
                $.ajax({
                    url: "api/base.php",
                    type: "POST",
                    data: {
                        'condX' : condX,
                        'conX' : conX,
                        'monthX' : monthX
                    },
                    success: function(response) {
                        debugger;
                        var data = JSON.parse(response);
                        console.log(data);
                        $("#overallBase").empty().append(`<span class="boldC">Sample Size:</span> ${data[0]}`);
                        $("#currentmonthname").empty().append(`${monthLabel[monthX[1]]}`);
                        $("#currentmonthbase").empty().append(`${data[1]}`);
                    }
                });
            }

            function firstAjax()
            {
                console.log(monthX);
                $.ajax({
                    url: "api/ajax1.php",
                    type: "POST",
                    data: {
                        'condX' : condX,
                        'conX' : conX,
                        'monthX' : monthX
                    },
                    success: function(response) {
                        var data = JSON.parse(response);
                        console.log("firstAjax");
                        console.log(data);

                        var dataOverall = [data[0]];
                        var dataDomain = [data[1]];

                        var overallflipkartCurrentNPS = [];
                        var overallamazonCurrentNPS = [];
                        var overallmeeshoCurrentNPS = [];
                        var overallflipkartPreviousNPS = [];
                        var overallamazonPreviousNPS = [];
                        var overallmeeshoPreviousNPS = [];

                        var domainflipkartCurrentNPS = [];
                        var domainamazonCurrentNPS = [];
                        var domainmeeshoCurrentNPS = [];
                        var domainflipkartPreviousNPS = [];
                        var domainamazonPreviousNPS = [];
                        var domainmeeshoPreviousNPS = [];

                        var overallcurrentWave = [];
                        var overallpreviousWave = [];

                        var domaincurrentWave = [];
                        var domainpreviousWave = [];

                        console.log(dataOverall);

                        dataOverall.forEach(function(e,i,a){
                            overallflipkartCurrentNPS.push(e['overallflipkartCurrentNPS']);
                            overallamazonCurrentNPS.push(e['overallamazonCurrentNPS']);
                            overallmeeshoCurrentNPS.push(e['overallmeeshoCurrentNPS']);
                            overallflipkartPreviousNPS.push(e['overallflipkartPreviousNPS']);
                            overallamazonPreviousNPS.push(e['overallamazonPreviousNPS']);
                            overallmeeshoPreviousNPS.push(e['overallmeeshoPreviousNPS']);
                        });

                        dataDomain.forEach(function(e,i,a){
                            e.CurrentNPS.forEach(function(e2,i2,a2){
                                domainflipkartCurrentNPS.push(e2[0].nps);
                                domainamazonCurrentNPS.push(e2[1].nps);
                                domainmeeshoCurrentNPS.push(e2[2].nps);
                            });

                            e.PreviousNPS.forEach(function(e2,i2,a2){
                                domainflipkartPreviousNPS.push(e2[0].nps);
                                domainamazonPreviousNPS.push(e2[1].nps);
                                domainmeeshoPreviousNPS.push(e2[2].nps);
                            });
                        });

                        overallcurrentWave.push(overallflipkartCurrentNPS);
                        overallcurrentWave.push(overallamazonCurrentNPS);
                        overallcurrentWave.push(overallmeeshoCurrentNPS);

                        overallpreviousWave.push(overallflipkartPreviousNPS);
                        overallpreviousWave.push(overallamazonPreviousNPS);
                        overallpreviousWave.push(overallmeeshoPreviousNPS);

                        domaincurrentWave.push(domainflipkartCurrentNPS);
                        domaincurrentWave.push(domainamazonCurrentNPS);
                        domaincurrentWave.push(domainmeeshoCurrentNPS);

                        domainpreviousWave.push(domainflipkartPreviousNPS);
                        domainpreviousWave.push(domainamazonPreviousNPS);
                        domainpreviousWave.push(domainmeeshoPreviousNPS);

                        console.log(overallcurrentWave);
                        console.log(domaincurrentWave);

                        var transposeoverallcurrentWave = transposeData(overallcurrentWave);
                        var transposeoverallpreviousWave = transposeData(overallpreviousWave);

                        var transposedomaincurrentWave = transposeData(domaincurrentWave);
                        var transposedomainpreviousWave = transposeData(domainpreviousWave);

                        console.log("transposeoverallcurrentWave");
                        console.log(transposeoverallcurrentWave);

                        console.log("transposeoverallpreviousWave");
                        console.log(transposeoverallpreviousWave);

                        var difference2 = calculateDifference(transposeoverallcurrentWave[0], transposeoverallpreviousWave[0]);
                        var difference = calculateDifference(transposedomaincurrentWave, transposedomainpreviousWave);

                        overallcurrentWave.forEach(function(e,i,a){
                            e.forEach(function(e2,i2,a2){
                                $(`#nps_count_C_${i2+1}_${i+1}`).empty().append(e2[4]);
                                $(`#promoterTd_C_${i2+1}_${i+1}`).empty().append(`${e2[1]}%`);
                                $(`#passiveTd_C_${i2+1}_${i+1}`).empty().append(`${e2[2]}%`);
                                $(`#detractorTd_C_${i2+1}_${i+1}`).empty().append(`${e2[3]}%`);
                            });
                        });

                        transposedomaincurrentWave.forEach(function(e,i,a){
                            e.forEach(function(e2,i2,a2){
                                $(`#nps_count_C_${i+2}_${i2+1}`).empty().append(e2);
                            });
                        });

                        difference.forEach(function(e,i,a){
                            e.forEach(function(e2,i2,a2){
                                console.log(`#nps_count_P_${i + 2}_${i2 + 1}`);
                                const $element = $(`#nps_count_P_${i + 2}_${i2 + 1}`);
                                $element.empty().append(e2);

                                $element.removeClass('negativeX positiveX neutralX');

                                if (e2 < 0) {
                                    $element.addClass('negativeX');
                                } else if (e2 > 0) {
                                    $element.addClass('positiveX');
                                } else if (e2 == 0) {
                                    $element.addClass('blankX');
                                }
                                else {
                                    $element.addClass('blankX');
                                }

                            });
                        });

                        difference2.forEach(function(e,i,a){
                            $(`#nps_count_P_1_${i+1}`).empty().append(`${e[4]}`);
                            $(`#promoterTd_P_1_${i+1}`).empty().append(`${e[1]}%`);
                            $(`#passiveTd_P_1_${i+1}`).empty().append(`${e[2]}%`);
                            $(`#detractorTd_P_1_${i+1}`).empty().append(`${e[3]}%`);
                        });

                        console.log(difference2);

                    },complete: function (data) 
                    {
                        $(".splash").hide();
                    }
                });
            }

            function secondAjax()
            {
                $.ajax({
                    url: "api/ajax2.php",
                    type: "POST",
                    data: {
                        'condX' : condX,
                        'conX' : conX,
                        'monthX' : monthX,
                        'domainDropCvalX' : domainDropCvalX
                    },
                    success: function(response) {
                        var data = JSON.parse(response);
                        console.log("secondAjax");
                        console.log(data);

                        var PreviousNPS = [];
                        var CurrentNPS = [];
                        var PreviousNPSX = [];
                        var CurrentNPSX = [];

                        data.forEach(function(e,i,a){
                            PreviousNPS.push(data[i]['PreviousNPS']);
                            CurrentNPS.push(data[i]['CurrentNPS']);
                        });

                        var PreviousNPSX = PreviousNPS[0];
                        var CurrentNPSX = CurrentNPS[0];

                        var PreviousnpsValues = PreviousNPSX.map(subArray => 
                            subArray.map(item => item.nps)
                        );

                        var CurrentnpsValues = CurrentNPSX.map(subArray => 
                            subArray.map(item => item.nps)
                        );

                        var difference = calculateDifference(CurrentnpsValues, PreviousnpsValues);

                        CurrentNPSX.forEach(function(e,i,a){
                            e.forEach(function(e2,i2,a2){
                                $(`#nps_count_SDC_${brandLabel[i2]}_${i+1}`).empty().append(e2.nps);
                            });
                        });

                        PreviousNPSX.forEach(function(e,i,a){
                            e.forEach(function(e2,i2,a2){
                                $(`#nps_count_SDP_${brandLabel[i2]}_${i+1}`).empty().append(e2.nps);
                            });
                        });

                        difference.forEach(function(e,i,a){
                            e.forEach(function(e2,i2,a2){
                                const $element = $(`#nps_count_SDP_${brandLabel[i2]}_${i+1}`);
                                $element.empty().append(e2);

                                $element.removeClass('negativeX positiveX neutralX');

                                // Add class based on value
                                if (e2 < 0) {
                                    $element.addClass('negativeX');
                                } else if (e2 > 0) {
                                    $element.addClass('positiveX');
                                } else if (e2 == 0) {
                                    $element.addClass('blankX');
                                }
                                else {
                                    $element.addClass('blankX');
                                }
                            });
                        });
                    },
                    complete: function (data) 
                    {
                        setTimeout(() => {
                            $(".splash").hide();
                        }, 200);
                        
                    }
                });
            }
        </script>
    </body>
</html>