<?php require_once "head.php"; ?>

<?php require_once "header.php"; ?>

<main class="layout bg-primary-100">
    <div class="ss-section">
        <div class="ss-section-inner">
            <div class="ss-adb-head">
                <div class="ss-section fixed-width-center">
                    <div class="ss-section-inner">
                        <div class="ss-db-head mb-0">
                            <div class="ss-db-head-left">
                                <h1 class="h3 fw-bold">Culture Analytics</h1>
                                <div class="d-flex flex-wrap">
                                    <div class="ss-dropdown dropdown d-block mt-4 me-4 js-single-select">
                                        <button id="ss-cw-gf-ds" type="button" class="btn btn-light with-icon-sep" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span class="ss-dropdown-toggle-txt">Email Data</span>
                                            <i class="ss-icon-caret-down"><svg>
                                                    <use xlink:href="#ss-icon-caret-down"></use>
                                                </svg></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-start with-overflow-scroll">
                                            <li>
                                                <a href="javascript:;" class="dropdown-item active">
                                                    <span class="dropdown-item-text">Email Data</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item">
                                                    <span class="dropdown-item-text">Chat Data</span>
                                                </a>
                                            </li>
                                            <li data-bs-toggle="tooltip" data-bs-placement="top" title="Coming Soon">
                                                <a href="javascript:;" class="dropdown-item disabled">
                                                    <span class="dropdown-item-text">Email + Chat</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class=" d-block mt-4 me-4">
                                        <span class="ss-table-pd-sep"></span>
                                    </div>
                                    <div class="ss-dropdown dropdown d-block mt-4 me-4 js-multi-select">
                                        <button disabled type="button" class="ss-dropdown-toggle disabled" data-bs-offset="0,8" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" data-selected-prefix="Location" data-placeholder="All Locations">
                                            <span class="ss-dropdown-toggle-txt">All Locations</span>
                                            <span class="ss-dropdown-arrow">
                                                <i class="ss-icon-chevron-down"><svg>
                                                        <use xlink:href="#ss-icon-chevron-down"></use>
                                                    </svg></i>
                                            </span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-start">
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                <use xlink:href="#ss-icon-check-outline"></use>
                                                            </svg></i></span>
                                                    <span class="dropdown-item-text">Option one</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                <use xlink:href="#ss-icon-check-outline"></use>
                                                            </svg></i></span>
                                                    <span class="dropdown-item-text">Option two</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                <use xlink:href="#ss-icon-check-outline"></use>
                                                            </svg></i></span>
                                                    <span class="dropdown-item-text">Option three</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="ss-dropdown dropdown d-block mt-4 me-4 ms-2 js-multi-select">
                                        <button disabled type="button" class="ss-dropdown-toggle disabled" data-bs-offset="0,8" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" data-selected-prefix="Department" data-placeholder="All Departments">
                                            <span class="ss-dropdown-toggle-txt">All Departments</span>
                                            <span class="ss-dropdown-arrow">
                                                <i class="ss-icon-chevron-down"><svg>
                                                        <use xlink:href="#ss-icon-chevron-down"></use>
                                                    </svg></i>
                                            </span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-start">
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                <use xlink:href="#ss-icon-check-outline"></use>
                                                            </svg></i></span>
                                                    <span class="dropdown-item-text">Option one</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                <use xlink:href="#ss-icon-check-outline"></use>
                                                            </svg></i></span>
                                                    <span class="dropdown-item-text">Option two</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                <use xlink:href="#ss-icon-check-outline"></use>
                                                            </svg></i></span>
                                                    <span class="dropdown-item-text">Option three</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="ss-dropdown dropdown d-block mt-4 me-4 ms-2 js-multi-select">
                                        <button disabled type="button" class="ss-dropdown-toggle disabled" data-bs-offset="0,8" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" data-selected-prefix="Job Title" data-placeholder="All Job Titles">
                                            <span class="ss-dropdown-toggle-txt">All Job Titles</span>
                                            <span class="ss-dropdown-arrow">
                                                <i class="ss-icon-chevron-down"><svg>
                                                        <use xlink:href="#ss-icon-chevron-down"></use>
                                                    </svg></i>
                                            </span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-start">
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                <use xlink:href="#ss-icon-check-outline"></use>
                                                            </svg></i></span>
                                                    <span class="dropdown-item-text">Option one</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                <use xlink:href="#ss-icon-check-outline"></use>
                                                            </svg></i></span>
                                                    <span class="dropdown-item-text">Option two</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                <use xlink:href="#ss-icon-check-outline"></use>
                                                            </svg></i></span>
                                                    <span class="dropdown-item-text">Option three</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="ss-dropdown dropdown js-multi-select d-block mt-20 me-4 ms-2">
                                        <button disabled type="button" class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" data-selected-prefix="Selected">
                                            <i class="ss-icon-ellipsis-h"><svg>
                                                    <use xlink:href="#ss-icon-ellipsis-h"></use>
                                                </svg></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-start">
                                            <li class="dropdown dropend">
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-icon dropdown-submenu-toggle" data-bs-offset="0,17" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                                    <span class="dropdown-item-text">Tenure</span>
                                                    <i class="ss-icon-chevron-right"><svg>
                                                            <use xlink:href="#ss-icon-chevron-right"></use>
                                                        </svg></i>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                            <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                        <use xlink:href="#ss-icon-check-outline"></use>
                                                                    </svg></i></span>
                                                            <span class="dropdown-item-text">Option one</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                            <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                        <use xlink:href="#ss-icon-check-outline"></use>
                                                                    </svg></i></span>
                                                            <span class="dropdown-item-text">Option two</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                            <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                        <use xlink:href="#ss-icon-check-outline"></use>
                                                                    </svg></i></span>
                                                            <span class="dropdown-item-text">Option three</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="dropdown dropend">
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-icon dropdown-submenu-toggle" data-bs-offset="0,17" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                                    <span class="dropdown-item-text">Diversity</span>
                                                    <i class="ss-icon-chevron-right"><svg>
                                                            <use xlink:href="#ss-icon-chevron-right"></use>
                                                        </svg></i>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                            <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                        <use xlink:href="#ss-icon-check-outline"></use>
                                                                    </svg></i></span>
                                                            <span class="dropdown-item-text">Option one</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                            <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                        <use xlink:href="#ss-icon-check-outline"></use>
                                                                    </svg></i></span>
                                                            <span class="dropdown-item-text">Option two</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                            <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg>
                                                                        <use xlink:href="#ss-icon-check-outline"></use>
                                                                    </svg></i></span>
                                                            <span class="dropdown-item-text">Option three</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="ss-db-head-right flex-column align-items-end mt-0 me-4">
                                <a class="btn btn-primary with-icon ss-adb-acai-btn" href="#ss-adb-acai-modal" data-bs-toggle="modal">
                                    <i class="ss-icon-ai"><svg>
                                            <use xlink:href="#ss-icon-ai"></use>
                                        </svg></i>
                                    <span>Ask Culture AI</span>
                                </a>
                                <ul class="ss-adb-tfo">
                                    <li>
                                        <h5 class="text-uppercase mt-4"><strong>Analysis Depth</strong></h5>
                                    </li>
                                    <li>
                                        <div class="ss-dropdown dropdown d-block js-single-select">
                                            <button id="ss-cw-gf-ad" type="button" class="ss-dropdown-toggle" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false" data-selected-prefix="Location" data-placeholder="All Locations">
                                                <span class="ss-dropdown-toggle-txt">60-Day Avg.</span>
                                                <span class="ss-dropdown-arrow">
                                                    <i class="ss-icon-chevron-down"><svg>
                                                            <use xlink:href="#ss-icon-chevron-down"></use>
                                                        </svg></i>
                                                </span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end with-overflow-scroll" data-popper-placement="bottom-end" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(-119px, 40px);">
                                                <li>
                                                    <a href="javascript:;" class="dropdown-item">
                                                        <span class="dropdown-item-text">7-Day Avg.</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;" class="dropdown-item">
                                                        <span class="dropdown-item-text">30-Day Avg.</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;" class="dropdown-item active">
                                                        <span class="dropdown-item-text">60-Day Avg.</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;" class="dropdown-item">
                                                        <span class="dropdown-item-text">365-Day Avg.</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ss-section fixed-width-center with-fixed-header">
                <div class="ss-section-inner">
                    <div class="ss-adb-cwn-row">
                        <!-- Start [ left part ] -->
                        <div class="ss-adb-cwn-l">

                            <div class="ss-adb-scyb-g-b">

                                <div class="ss-adb-cwn-l-aa">
                                    <div class="ss-adb-cwn-l-aa-l">
                                        <div class="ss-db-box d-flex flex-column">
                                            <div class="ss-db-box-h">
                                                <div class="ss-db-box-h-l">
                                                    <h3 class="h5">Culture Health</h3>
                                                </div>
                                            </div>
                                            <div class="ss-db-box-b pt-0 pb-0 d-flex flex-column">
                                                <div class="ss-adb-cwn-l-aa-sg d-flex flex-column flex-grow-1">
                                                    <div class="swiper-container ss-adb-cwn-l-aa-sa flex-grow-1 w-100 cpy-2">
                                                        <div class="swiper-wrapper">
                                                            <div class="swiper-slide">
                                                                <div class="ss-adb-cw-a-oh-row">
                                                                    <div class="ss-adb-cw-a-oh-l">
                                                                        <div class="bg-none ss-adb-cw-a-oh-h text-center mt-0">
                                                                            <strong class="ss-adb-cw-a-oh-p">72%</strong>
                                                                            <span class="ss-adb-cw-a-oh-lbl">Company
                                                                                Health</span>
                                                                        </div>
                                                                        <div class="ss-adb-cw-a-oh-dt  mb-4 mb-25">
                                                                            <div class="ss-db-score text-secondary">
                                                                                <i class="ss-icon-arrow-alt-up"><svg>
                                                                                        <use xlink:href="#ss-icon-arrow-alt-up">
                                                                                        </use>
                                                                                    </svg></i>
                                                                                <span>5.15%</span>
                                                                            </div>
                                                                            <span class="ss-adb-cw-a-oh-prd">Since previous month</span>
                                                                        </div>
                                                                        <span class="ss-adb-cw-a-oh-perf mt-5 sm bg-secondary-200 text-secondary mt-0">STRONG
                                                                            HEALTH</span>
                                                                    </div>
                                                                    <div class="ss-adb-cw-a-oh-r">
                                                                        <div class="ss-adb-cw-a-oh-chart" id="ss-adb-cw-a-oh-chart"></div>
                                                                        <div class="ss-db-ch-legends">
                                                                            <div class="ss-db-ch-legend">
                                                                                <strong>12%</strong>
                                                                                <span class="ss-db-ch-legend-text">
                                                                                    <i class="ss-icon-circle-fill text-danger"><svg>
                                                                                            <use xlink:href="#ss-icon-circle-fill">
                                                                                            </use>
                                                                                        </svg></i>
                                                                                    <span>Critical</span>
                                                                                </span>
                                                                            </div>
                                                                            <div class="ss-db-ch-legend">
                                                                                <strong>25%</strong>
                                                                                <span class="ss-db-ch-legend-text">
                                                                                    <i class="ss-icon-circle-fill text-yellow"><svg>
                                                                                            <use xlink:href="#ss-icon-circle-fill">
                                                                                            </use>
                                                                                        </svg></i>
                                                                                    <span>Limited</span>
                                                                                </span>
                                                                            </div>
                                                                            <div class="ss-db-ch-legend">
                                                                                <strong>63%</strong>
                                                                                <span class="ss-db-ch-legend-text">
                                                                                    <i class="ss-icon-circle-fill text-secondary"><svg>
                                                                                            <use xlink:href="#ss-icon-circle-fill">
                                                                                            </use>
                                                                                        </svg></i>
                                                                                    <span>Strong</span>
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <div class="ss-adb-cw-a-oh-row pe-3">
                                                                    <div class="ss-adb-cw-a-oh-l">
                                                                        <div class="bg-none ss-adb-cw-a-oh-h text-center mt-0">
                                                                            <strong class="ss-adb-cw-a-oh-p">0.99</strong>
                                                                            <span class="ss-adb-cw-a-oh-lbl">Sentiment Shift</span>
                                                                        </div>
                                                                        <div class="ss-adb-cw-a-oh-dt mb-0">
                                                                            <div class="ss-db-score p2">
                                                                                <span><strong class="fw-bold">1.15</strong></span>
                                                                            </div>
                                                                            <span class="ss-adb-cw-a-oh-prd">Current 60 days</span>
                                                                        </div>
                                                                        <div class="ss-adb-cw-a-oh-dt mt-1 mb-5">
                                                                            <div class="ss-db-score p2">
                                                                                <span><strong class="fw-bold">1.15</strong></span>
                                                                            </div>
                                                                            <span class="ss-adb-cw-a-oh-prd">Previous 60 days</span>
                                                                        </div>
                                                                        <span class="ss-adb-cw-a-oh-perf sm bg-gray mt-0">NEUTRAL MOVEMENT</span>
                                                                    </div>
                                                                    <div class="ss-adb-cw-a-oh-r ps-5 mt-auto mb-auto">
                                                                        <div class="ss-adb-cwn-l-a-ts-a">
                                                                            <div class="ss-adb-cwn-l-a-ts-a-pos"></div>
                                                                            <div class="ss-adb-cwn-l-a-ts-a-neu"></div>
                                                                            <div class="ss-adb-cwn-l-a-ts-a-neg"></div>
                                                                            <div class="ss-adb-cwn-l-a-ts-a-cn"><span>Culture
                                                                                    Norm</span></div>

                                                                            <!-- print startValue, endValue of red, green and gray bar and print current score here. I calculate % (position of yellow line) based on startValue and endValue of red, green and gray bar -->
                                                                            <div class="ss-adb-cwn-l-a-ts-a-scr" data-currentScore="0.99" data-redStartValue="-2" data-redEndValue="-1" data-grayStartValue="-1" data-grayEndValue="1" data-greenStartValue="1" data-greenEndValue="2">
                                                                                <!--data will be added by JS-->
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="swiper-slide">
                                                                <div class="ss-adb-cw-a-oh-row ps-3 pe-3 h-100">
                                                                    <div class="w-100 h-100">
                                                                        <div class="ss-adb-cwn-l-aa-sa-a">
                                                                            <!-- <span class="ss-adb-cwn-l-aa-sa-a-bdr bg-secondary"></span> -->
                                                                            <div class="ss-adb-cwn-l-aa-sa-a-cc w-1 flex-grow-1 text-center">
                                                                                <div class="d-flex justify-content-center" style="height: 80%;">
                                                                                    <span class="ss-adb-cw-a-oh-perf sm bg-secondary-200 text-secondary">STRONG HEALTH</span>
                                                                                    <!-- <span class="ss-adb-cw-a-oh-perf sm">Limited HEALTH</span> -->
                                                                                    <!-- <span class="ss-adb-cw-a-oh-perf sm bg-danger-200 text-danger">Weak HEALTH</span> -->
                                                                                </div>
                                                                                <h3 class="h3 fw-bold mb-3">Positive culture, improve teamwork.</h3>
                                                                                <div class="p1" style="padding-left: 30px; padding-right: 30px; padding-top: 5px;" data-bs-toggle="tooltip" data-bs-placement="top" data-size="adb-tooltip-xs-only" data-bs-title="Employees generally have a positive view of the company culture, with high scores in diversity and inclusion. However, there is room for improvement in teamwork and values alignment. Scores for vision and innovation are relatively low, but with focused effort, improvement is possible.">Employees generally have a positive view of the company culture, with high scores in diversity and inclusion. However, there is room for improvement in teamwork and values alignment. Scores for vision and innovation are relatively low, but with focused effort, improvement is possible.</div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="ss-adb-cwn-l-aa-sb-row mt-auto">
                                                        <a class="ss-adb-cwn-l-aa-arrow prev" aria-label="Prev">
                                                            <i class="ss-icon-chevron-left"><svg>
                                                                    <use xlink:href="#ss-icon-chevron-left"></use>
                                                                </svg></i>
                                                        </a>
                                                        <div class="swiper-container ss-adb-cwn-l-aa-sb">
                                                            <div class="swiper-wrapper">
                                                                <div class="swiper-slide">
                                                                    <div class="p2 text-center">Company Health</div>
                                                                </div>
                                                                <div class="swiper-slide">
                                                                    <div class="p2 text-center">Sentiment Shift</div>
                                                                </div>
                                                                <div class="swiper-slide">
                                                                    <div class="p2 text-center">Summary Analysis</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <a class="ss-adb-cwn-l-aa-arrow next" aria-label="Next">
                                                            <i class="ss-icon-chevron-right"><svg>
                                                                    <use xlink:href="#ss-icon-chevron-right"></use>
                                                                </svg></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-adb-cwn-l-aa-r">
                                        <div class="ss-db-box d-flex flex-column">
                                            <div class="ss-db-box-h afs pb-0">
                                                <div class="ss-db-box-h-l d-flex">
                                                    <h3 class="h5">Culture Trend</h3>
                                                    <ul class="ss-adb-tfo mt-0">
                                                        <!-- <li>
                                                            <div class="form-group p2">
                                                                <label class="form-label text-center">--</label>
                                                                <label class="form-label text-gray-inactive">Area Score</label>
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <div class="form-group p2">
                                                                <label class="form-label text-center">--</label>
                                                                <label class="form-label text-gray-inactive">Area Rank</label>
                                                            </div>
                                                        </li> -->
                                                    </ul>
                                                </div>
                                                <div class="ss-db-box-h-r">
                                                    <ul class="ss-adb-tfo mt-0">
                                                        <li>
                                                            <div class="ss-db-box-h d-flex fex-row pt-0 pb-0">
                                                                <div class="ss-db-box-h-l my-2">
                                                                    <div class="ss-dropdown dropdown sm">
                                                                        <button type="button" class="ss-dropdown-toggle disabled" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                                            <span class="ss-dropdown-toggle-txt">All Culture Areas</span>
                                                                            <span class="ss-dropdown-arrow">
                                                                                <i class="ss-icon-chevron-down"><svg>
                                                                                        <use xlink:href="#ss-icon-chevron-down"></use>
                                                                                    </svg></i>
                                                                            </span>
                                                                        </button>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <div class="ss-db-box-h-r m-2">
                                                                <div class="ss-dropdown dropdown d-block">
                                                                    <button class="with-icon btn-icon" role="button" data-bs-offset="0,8" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                                                        <i class="ss-icon-datepicker" data-bs-toggle="tooltip" data-bs-placement="top" title="Add Events" style="color: #4a4a4a;">
                                                                            <svg>
                                                                                <use xlink:href="#ss-icon-datepicker"></use>
                                                                            </svg>
                                                                        </i>
                                                                    </button>
                                                                    <div class="dropdown-menu ss-dropdown-form dropdown-menu-end">
                                                                        <div class="ss-table-inputs">
                                                                            <div class="ss-table-inputs-h">
                                                                                <ul class="nav ss-um-nav" style="position: relative; width:100%; justify-content:space-between;">
                                                                                    <li class="nav-item" role="presentation" style="width: 50%;">
                                                                                        <a href="" class="nav-link active" id="add-events" data-bs-toggle="tab" role="tab" onclick="switchTab('add-events', 'manage-events')">ADD EVENTS</a>
                                                                                    </li>
                                                                                    <li class="nav-item" role="presentation" style="width: 50%;">
                                                                                        <a href="#manage-events" class="nav-link" id="manage-events" data-bs-toggle="tab" role="tab" onclick="switchTab('manage-events', 'add-events')">MANAGE EVENTS</a>
                                                                                    </li>
                                                                                </ul>
                                                                            </div>
                                                                            <div id="add-events-container">
                                                                                <div class="ss-table-inputs-b" style="max-height: 38rem;" id="event-list-container">
                                                                                    <div class="ss-table-inputs-row">
                                                                                        <div class="ss-table-inputs-cell">
                                                                                            <div class="row">
                                                                                                <div class="col-12">
                                                                                                    <div class="form-group">
                                                                                                        <label class="form-label">Event Title</label>
                                                                                                        <span class="form-control-wrapper">
                                                                                                            <input type="text" value="" name="event-title" class="form-control" placeholder="e.g., Company Picnic" id="cultureTrendEventTitle">
                                                                                                        </span>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="row">
                                                                                                <div class="col-12">
                                                                                                    <div class="form-group">
                                                                                                        <label class="form-label">Date</label>
                                                                                                        <span class="form-control-wrapper with-icon-right with-sep-right">
                                                                                                            <input type="text" value="" name="event-date" class="form-control js-datepicker" placeholder="Select Date" id="cultureTrendEventDate">
                                                                                                            <i class="ss-icon-calender"><svg>
                                                                                                                    <use xlink:href="#ss-icon-calender"></use>
                                                                                                                </svg></i>
                                                                                                        </span>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>

                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="row ss-dropdown-btn-row" id="add-events-buttons-container">
                                                                                    <div class="col-6">
                                                                                        <a class="btn btn-light btn-block" data-bs-hide="" onclick="addEventToEventList()">Add more</a>
                                                                                    </div>
                                                                                    <div class="col-6">
                                                                                        <button type="submit" class="btn btn-primary btn-block" data-bs-hide="dropdown" onclick="submitEvents();">Submit</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div id="manage-events-container" class="d-none">
                                                                                <div class="ss-table-inputs-b manage-events-body" style="max-height: 38rem;">
                                                                                    <div class="ss-table-inputs-row">
                                                                                        <div class="ss-table-inputs-cell" id="event-list-checkbox">
                                                                                            <div class="form-group">
                                                                                                <label class="ss-checkradio primary">
                                                                                                    <span class="ss-checkradio-text" style="justify-content: end; padding-right: 0.5rem;">Select all</span>
                                                                                                    <input type="checkbox" value="" name="checkbox[]" id="selectAllEvents">
                                                                                                    <span class="ss-checkradio-ui">
                                                                                                        <i class="ss-icon-check-outline"><svg>
                                                                                                                <use xlink:href="#ss-icon-check-outline"></use>
                                                                                                            </svg></i>
                                                                                                    </span>
                                                                                                </label>
                                                                                            </div>
                                                                                        </div>
                                                                                        <p class="p2" id="no-events-message">No events added yet. Select "Add Events" tab to add events.</p>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="row ss-dropdown-btn-row flex-row-reverse" id="manage-events-buttons-container">
                                                                                    <div class="col-6">
                                                                                        <button type="submit" class="btn btn-primary btn-block" data-bs-hide="dropdown" onclick="deleteEvents()" id="delete-event-button">Delete</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <!-- <li>
                                                                <a class="ss-adb-tfo-link culture-trend-range" onclick="toggleCultureTrendsClass(this)">Wk</a>
                                                            </li>
                                                            <li>
                                                                <a class="ss-adb-tfo-link culture-trend-range" onclick="toggleCultureTrendsClass(this)">Mo</a>
                                                            </li>
                                                            <li>
                                                                <a class="ss-adb-tfo-link culture-trend-range" onclick="toggleCultureTrendsClass(this)">Yr</a>
                                                            </li>
                                                            <li>
                                                                <a class="ss-adb-tfo-link culture-trend-range active" id="ct-all-tag" onclick="toggleCultureTrendsClass(this)">All</a>
                                                            </li> -->
                                                        <li style="margin-left: 10px;">
                                                            <div class="ss-dropdown dropdown js-multi-select">
                                                                <button type="button" class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" data-selected-prefix="Selected">
                                                                    <i class="ss-icon-sliders-v ml-3 mr-3">
                                                                        <svg>
                                                                            <use xlink:href="#ss-icon-sliders-v"></use>
                                                                        </svg>
                                                                    </i>
                                                                </button>
                                                                <ul class="dropdown-menu dropdown-menu-end">
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-switcher active" id="volatility-toggle" onclick="handleVolatilityToggle()">
                                                                            <span class="dropdown-item-text">Volatility</span>
                                                                            <span class="ss-dropdown-switcher-ui">
                                                                                <i class="ss-icon-circle-fill">
                                                                                    <svg>
                                                                                        <use xlink:href="#ss-icon-circle-fill"></use>
                                                                                    </svg>
                                                                                </i>
                                                                            </span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-switcher active" data-bs-toggle="tooltip" data-bs-placement="top" title="Coming Soon">
                                                                            <span class="dropdown-item-text">Reversal Signal</span>
                                                                            <span class="ss-dropdown-switcher-ui"><i class="ss-icon-circle-fill"><svg>
                                                                                        <use xlink:href="#ss-icon-circle-fill"></use>
                                                                                    </svg></i></span>
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="javascript:;" id="reverse-signal-alert-toggle" class="dropdown-item ss-dpitem-switcher active" data-bs-toggle="tooltip" data-bs-placement="top">
                                                                            <span class="dropdown-item-text">Reversal Signal Alert</span>
                                                                            <span class="ss-dropdown-switcher-ui"><i class="ss-icon-circle-fill"><svg>
                                                                                        <use xlink:href="#ss-icon-circle-fill"></use>
                                                                                    </svg></i></span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="ss-db-box-b pt-0 pb-0 d-flex flex-column">
                                                <div class="ss-adb-cwn-l-aa-sg d-flex flex-column flex-grow-1">
                                                    <figure class="highcharts-figure">
                                                        <div id="ss-adb-cwn-l-aa-ct-chart"></div>
                                                    </figure>
                                                </div>
                                            </div>
                                            <div class="container">
                                                <div class="row justify-content-center align-items-center">
                                                    <div class="col-md-4 d-flex justify-content-center align-items-center border-top" style="border-right: 1px solid #DEE2E6; padding: 1.2rem; font-size:12px;" data-size="lg" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="click" data-bs-html="true" data-bs-offset="[0,20]" data-bs-original-title="" data-bs-content="
                                                            <div class='ss-popover-body p-0'>
                                                                <div class='lg1'>
                                                                    <table class='ss-table'>
                                                                        <tbody>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                    <i class='ss-icon-circle-fill text-danger m-0'><svg><use xlink:href='#ss-icon-circle-fill'></use></svg></i>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-danger'>-2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                    <i class='ss-icon-circle-fill text-danger m-0'><svg><use xlink:href='#ss-icon-circle-fill'></use></svg></i>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-danger'>-2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-danger'>-2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-danger'>-2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-danger'>-2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                    <i class='ss-icon-circle-fill text-danger m-0'><svg><use xlink:href='#ss-icon-circle-fill'></use></svg></i>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-danger'>-2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                    <i class='ss-icon-circle-fill text-danger m-0'><svg><use xlink:href='#ss-icon-circle-fill'></use></svg></i>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-danger'>-2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                    <i class='ss-icon-circle-fill text-danger m-0'><svg><use xlink:href='#ss-icon-circle-fill'></use></svg></i>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-danger'>-2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                    <i class='ss-icon-circle-fill text-danger m-0'><svg><use xlink:href='#ss-icon-circle-fill'></use></svg></i>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-danger'>-2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                    <i class='ss-icon-circle-fill text-danger m-0'><svg><use xlink:href='#ss-icon-circle-fill'></use></svg></i>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-danger'>-2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                <div class='justify-content-center align-items-center mb-4 pb-2'>
                                                                    <div class='box text-center'>Critical Items</div>
                                                                </div>
                                                            </div>
                                                            ">
                                                        <span class="ss-badge dark rounded bg-danger-200">
                                                            <span class="ss-badge-txt text-danger">3</span>
                                                        </span>
                                                        <div class="box text-center">Critical Items</div>
                                                    </div>
                                                    <div class="col-md-4 d-flex justify-content-center align-items-center border-top" style="border-right: 1px solid #DEE2E6; padding: 1.2rem; font-size:12px;" data-size="lg" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="click" data-bs-html="true" data-bs-offset="[0,20]" data-bs-original-title="" data-bs-content="
                                                            <div class='ss-popover-body p-0'>
                                                                <div class='lg1'>
                                                                    <table class='ss-table'>
                                                                        <tbody>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                    <i class='ss-icon-circle-fill text-yellow m-0'><svg><use xlink:href='#ss-icon-circle-fill'></use></svg></i>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-yellow'>-1</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                    <i class='ss-icon-circle-fill text-yellow m-0'><svg><use xlink:href='#ss-icon-circle-fill'></use></svg></i>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-yellow'>-1</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-yellow'>-1</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-yellow'>-1</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-yellow'>-1</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-yellow'>-1</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-yellow'>-1</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                <div class='justify-content-center align-items-center mb-4 pb-2'>
                                                                    <div class='box text-center'>Need Focus</div>
                                                                </div>
                                                            </div>
                                                            ">
                                                        <span class="ss-badge dark rounded bg-yellow-100">
                                                            <span class="ss-badge-txt text-yellow">12</span>
                                                        </span>
                                                        <div class="box text-center">Need Focus</div>
                                                    </div>
                                                    <div class="col-md-4 d-flex justify-content-center align-items-center border-top" style="padding: 1.2rem; font-size:12px;" data-size="lg" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="click" data-bs-html="true" data-bs-offset="[0,20]" data-bs-original-title="" data-bs-content="
                                                            <div class='ss-popover-body p-0'>
                                                                <div class='lg1'>
                                                                    <table class='ss-table'>
                                                                        <tbody>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                    <i class='ss-icon-circle-fill text-secondary m-0'><svg><use xlink:href='#ss-icon-circle-fill'></use></svg></i>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-secondary'>+2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                    <i class='ss-icon-circle-fill text-secondary m-0'><svg><use xlink:href='#ss-icon-circle-fill'></use></svg></i>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-secondary'>+2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-secondary'>+1</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-secondary'>+1</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-secondary'>+1</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-secondary'>+2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class='px-3'>
                                                                                </td>
                                                                                <td class='px-0'>
                                                                                    <span class='box text-center'>Vision & Strategy</span>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='text-secondary'>+2</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>SD</h5>
                                                                                </td>
                                                                                <td>
                                                                                    <i class='ss-icon-arrow-long-right'><svg><use xlink:href='#ss-icon-arrow-long-right'></use></svg></i>
                                                                                </td>
                                                                                <td>
                                                                                    <h5 class='sl'>5/3/23</h5>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                <div class='justify-content-center align-items-center mb-4 pb-2'>
                                                                    <div class='box text-center'>Celebrations</div>
                                                                </div>
                                                            </div>
                                                            ">
                                                        <span class="ss-badge dark rounded bg-secondary-200">
                                                            <span class="ss-badge-txt text-secondary">5</span>
                                                        </span>
                                                        <div class="box text-center">Celebrations</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ss-adb-cwn-l-bb">
                                    <div class="swiper-container ss-adb-cwn-l-bb-sl">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <a class="ss-adb-td-a-item theme-b">
                                                    <h3 class="h5">Vision &amp; Strategy</h3>
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-1 flex-grow-1">
                                                            <div class="d-flex align-items-center ss-adb-td-a-item-incdec">
                                                                <span class="ss-badge ms-0 me-0 bg-secondary-200">
                                                                    <span class="ss-badge-txt p3 text-uppercase text-secondary">STRONG</span>
                                                                </span>
                                                                <div class="w-1 flex-grow-1 ms-3 p2 text-gray-inactive">Vision
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="flex-shrink-0">
                                                            <strong class="fw-bold ss-adb-td-a-item-scr">87%</strong>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="swiper-slide">
                                                <a class="ss-adb-td-a-item theme-b">
                                                    <h3 class="h5">Communication</h3>
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-1 flex-grow-1">
                                                            <div class="d-flex align-items-center ss-adb-td-a-item-incdec">
                                                                <span class="ss-badge ms-0 me-0 bg-secondary-200">
                                                                    <span class="ss-badge-txt p3 text-uppercase text-secondary">STRONG</span>
                                                                </span>
                                                                <div class="w-1 flex-grow-1 ms-3 p2 text-gray-inactive">
                                                                    Leadership</div>
                                                            </div>
                                                        </div>
                                                        <div class="flex-shrink-0">
                                                            <strong class="fw-bold ss-adb-td-a-item-scr">76%</strong>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="swiper-slide">
                                                <a class="ss-adb-td-a-item theme-b">
                                                    <h3 class="h5">Customer Centricity</h3>
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-1 flex-grow-1">
                                                            <div class="d-flex align-items-center ss-adb-td-a-item-incdec">
                                                                <span class="ss-badge ms-0 me-0 bg-yellow-100">
                                                                    <span class="ss-badge-txt p3 text-uppercase text-yellow">LIMITED</span>
                                                                </span>
                                                                <div class="w-1 flex-grow-1 ms-3 p2 text-gray-inactive">Vision
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="flex-shrink-0">
                                                            <strong class="fw-bold ss-adb-td-a-item-scr">62%</strong>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="swiper-slide">
                                                <a class="ss-adb-td-a-item theme-b">
                                                    <h3 class="h5">Social Impact</h3>
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-1 flex-grow-1">
                                                            <div class="d-flex align-items-center ss-adb-td-a-item-incdec">
                                                                <span class="ss-badge ms-0 me-0 bg-danger-200">
                                                                    <span class="ss-badge-txt p3 text-uppercase text-danger">CRITICAL</span>
                                                                </span>
                                                                <div class="w-1 flex-grow-1 ms-3 p2 text-gray-inactive">Growth
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="flex-shrink-0">
                                                            <strong class="fw-bold ss-adb-td-a-item-scr">65%</strong>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="swiper-slide">
                                                <a class="ss-adb-td-a-item theme-b">
                                                    <h3 class="h5">Teamwork</h3>
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-1 flex-grow-1">
                                                            <div class="d-flex align-items-center ss-adb-td-a-item-incdec">
                                                                <span class="ss-badge ms-0 me-0 bg-danger-200">
                                                                    <span class="ss-badge-txt p3 text-uppercase text-danger">CRITICAL</span>
                                                                </span>
                                                                <div class="w-1 flex-grow-1 ms-3 p2 text-gray-inactive">
                                                                    Employees</div>
                                                            </div>
                                                        </div>
                                                        <div class="flex-shrink-0">
                                                            <strong class="fw-bold ss-adb-td-a-item-scr">27%</strong>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="swiper-slide">
                                                <a class="ss-adb-td-a-item theme-b">
                                                    <h3 class="h5">Values</h3>
                                                    <div class="d-flex align-items-center">
                                                        <div class="w-1 flex-grow-1">
                                                            <div class="d-flex align-items-center ss-adb-td-a-item-incdec">
                                                                <span class="ss-badge ms-0 me-0 bg-danger-200">
                                                                    <span class="ss-badge-txt p3 text-uppercase text-danger">CRITICAL</span>
                                                                </span>
                                                                <div class="w-1 flex-grow-1 ms-3 p2 text-gray-inactive">Vision
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="flex-shrink-0">
                                                            <strong class="fw-bold ss-adb-td-a-item-scr">14%</strong>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div>
                                <div class="ss-db-head mb-5">
                                    <div class="ss-db-head-left">
                                        <h1 class="h3 fw-bold mb-0">Culture Areas</h1>
                                    </div>
                                    <div class="ss-db-head-right d-none">
                                        <a href="javascript:;" class="btn-icon">
                                            <i class="ss-icon-inbox-out"><svg>
                                                    <use xlink:href="#ss-icon-inbox-out"></use>
                                                </svg></i>
                                        </a>
                                        <a href="javascript:;" class="btn-icon">
                                            <i class="ss-icon-share"><svg>
                                                    <use xlink:href="#ss-icon-share"></use>
                                                </svg></i>
                                        </a>
                                        <a href="javascript:;" class="btn-icon">
                                            <i class="ss-icon-refresh"><svg>
                                                    <use xlink:href="#ss-icon-refresh"></use>
                                                </svg></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="ss-adb-cwn-l-c">
                                    <div class="ss-db-box">
                                        <div class="ss-adb-cwn-l-c-row">
                                            <div class="ss-adb-cwn-l-c-l">
                                                <div class="ss-db-box-h">
                                                    <div class="ss-db-box-h-l">
                                                        <h3 class="h5">Culture Pillars</h3>
                                                    </div>
                                                </div>
                                                <div class="ss-db-box-b cp">
                                                    <div class="ss-adb-cwn-l-c-tc">
                                                        <div class="ss-adb-cwn-l-c-tc-b p-0">
                                                            <div class="ss-adb-cwn-l-c-tc-tl d-flex flex-column">
                                                                <span class="ss-badge-icon md mb-2 bg-sea-green">
                                                                    <i class="ss-icon-bulb text-white"><svg>
                                                                            <use xlink:href="#ss-icon-bulb"></use>
                                                                        </svg></i>
                                                                </span>
                                                                <h4 class="h4 fw-bold m-0">Vision</h4>
                                                            </div>
                                                            <div class="ss-adb-cwn-l-c-tc-tr d-flex flex-column align-items-end">
                                                                <span class="ss-badge-icon md mb-2 bg-blue">
                                                                    <i class="ss-icon-growth text-white"><svg>
                                                                            <use xlink:href="#ss-icon-growth"></use>
                                                                        </svg></i>
                                                                </span>
                                                                <h4 class="h4 fw-bold m-0 text-right">Growth</h4>
                                                            </div>
                                                            <div class="ss-adb-cwn-l-c-tc-bl d-flex flex-column">
                                                                <span class="ss-badge-icon md mb-2 bg-hot-pink">
                                                                    <i class="ss-icon-users-friend-fill text-white"><svg>
                                                                            <use xlink:href="#ss-icon-users-friend-fill"></use>
                                                                        </svg></i>
                                                                </span>
                                                                <h4 class="h4 fw-bold m-0">Employees</h4>
                                                            </div>
                                                            <div class="ss-adb-cwn-l-c-tc-br d-flex flex-column align-items-end">
                                                                <span class="ss-badge-icon md mb-2 bg-orange-light">
                                                                    <i class="ss-icon-horn texty-white"><svg>
                                                                            <use xlink:href="#ss-icon-horn"></use>
                                                                        </svg></i>
                                                                </span>
                                                                <h4 class="h4 fw-bold m-0 text-right">Leaderhsip</h4>
                                                            </div>
                                                            <div class="ss-adb-cwn-l-c-tc-chart" id="ss-adb-cwn-l-c-tc-chart">
                                                            </div>
                                                        </div>
                                                        <div class="ss-adb-cwn-l-c-tc-t"></div>
                                                        <ul class="nav ss-sidebar-build-rnav theme-b ps-0 pe-0 border-bottom-0 d-none">
                                                            <li>
                                                                <a role="button" class="ss-adb-cwn-l-c-tc-chart-link active">Scores</a>
                                                            </li>
                                                            <li>
                                                                <a role="button" class="ss-adb-cwn-l-c-tc-chart-link">Sentiment</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ss-adb-cwn-l-c-r">
                                                <div class="ss-db-box-h">
                                                    <div class="ss-db-box-h-l">
                                                        <h3 class="h5">Scorecard Summary</h3>
                                                    </div>
                                                    <div class="ss-db-box-h-r d-none">
                                                        <a href="javascript:;" class="btn-icon" role="button" aria-label="Sort">
                                                            <i class="ss-icon-sort p2"><svg>
                                                                    <use xlink:href="#ss-icon-sort"></use>
                                                                </svg></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="ss-db-box-b p-0">

                                                    <div class="ss-adb-cwn-l-c-r-g">
                                                        <div class="ss-db-sa-row mb-20">
                                                            <div class="ss-db-sa-l">
                                                                <span class="ss-badge-icon bg-hot-pink">
                                                                    <i class="ss-icon-users-friend-fill text-white"><svg>
                                                                            <use xlink:href="#ss-icon-users-friend-fill"></use>
                                                                        </svg></i>
                                                                </span>
                                                            </div>
                                                            <div class="ss-db-sa-m">
                                                                <h4 class="h5 fw-bold mb-0">Employees</h4>
                                                            </div>
                                                            <div class="ss-db-sa-r">
                                                                <a class="btn btn-light btn-sm">View</a>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex align-items-center">
                                                            <h5 class="h4 fw-bold mb-0 me-4">42%</h5>
                                                            <span class="ss-badge ms-0 me-0 bg-yellow-100">
                                                                <span class="ss-badge-txt p3 text-uppercase text-yellow">LIMITED</span>
                                                            </span>
                                                        </div>
                                                        <div class="p2 mt-4">The organization has moderate employee engagement,
                                                            with committed and enthusiastic workers. Teamwork scores are low,
                                                            indicating a need for improvement. Ethical standards are high, with
                                                            a score of 9/10. To improve, the organization should focus on
                                                            teamwork while maintaining ethics.</div>
                                                    </div>
                                                    <div class="ss-adb-cwn-l-c-r-g">
                                                        <div class="ss-db-sa-row mb-20">
                                                            <div class="ss-db-sa-l">
                                                                <span class="ss-badge-icon bg-sea-green">
                                                                    <i class="ss-icon-bulb text-white"><svg>
                                                                            <use xlink:href="#ss-icon-bulb"></use>
                                                                        </svg></i>
                                                                </span>
                                                            </div>
                                                            <div class="ss-db-sa-m">
                                                                <h4 class="h5 fw-bold mb-0">Vision</h4>
                                                            </div>
                                                            <div class="ss-db-sa-r">
                                                                <a class="btn btn-light btn-sm">View</a>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex align-items-center">
                                                            <h5 class="h4 fw-bold mb-0 me-4">84%</h5>
                                                            <span class="ss-badge ms-0 me-0 bg-secondary-200">
                                                                <span class="ss-badge-txt p3 text-uppercase text-secondary">STRONG</span>
                                                            </span>
                                                        </div>
                                                        <div class="p2 mt-4">The organization is committed to maintaining high
                                                            ethical standards and principles, and has a clear sense of direction
                                                            and purpose. However, there may be room for improvement in terms of
                                                            aligning its values and vision with the needs and preferences of its
                                                            customers. </div>
                                                    </div>
                                                    <div class="ss-adb-cwn-l-c-r-g">
                                                        <div class="ss-db-sa-row mb-20">
                                                            <div class="ss-db-sa-l">
                                                                <span class="ss-badge-icon bg-blue">
                                                                    <i class="ss-icon-growth text-white"><svg>
                                                                            <use xlink:href="#ss-icon-growth"></use>
                                                                        </svg></i>
                                                                </span>
                                                            </div>
                                                            <div class="ss-db-sa-m">
                                                                <h4 class="h5 fw-bold mb-0">Growth</h4>
                                                            </div>
                                                            <div class="ss-db-sa-r">
                                                                <a class="btn btn-light btn-sm">View</a>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex align-items-center">
                                                            <h5 class="h4 fw-bold mb-0 me-4">22%</h5>
                                                            <span class="ss-badge ms-0 me-0 bg-danger-200">
                                                                <span class="ss-badge-txt p3 text-uppercase text-danger">CRITICAL</span>
                                                            </span>
                                                        </div>
                                                        <div class="p2 mt-4">The organization is struggling with innovation,
                                                            exhibiting a lack of creativity and originality. Teamwork scores are
                                                            low, indicating a possible lack of collaboration and communication
                                                            among team members, which could be hindering the flow of ideas.
                                                        </div>
                                                    </div>
                                                    <div class="ss-adb-cwn-l-c-r-g">
                                                        <div class="ss-db-sa-row mb-20">
                                                            <div class="ss-db-sa-l">
                                                                <span class="ss-badge-icon bg-orange-light">
                                                                    <i class="ss-icon-horn texty-white"><svg>
                                                                            <use xlink:href="#ss-icon-horn"></use>
                                                                        </svg></i>
                                                                </span>
                                                            </div>
                                                            <div class="ss-db-sa-m">
                                                                <h4 class="h5 fw-bold mb-0">Leadership</h4>
                                                            </div>
                                                            <div class="ss-db-sa-r">
                                                                <a class="btn btn-light btn-sm">View</a>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex align-items-center">
                                                            <h5 class="h4 fw-bold mb-0 me-4">71%</h5>
                                                            <span class="ss-badge ms-0 me-0 bg-secondary-200">
                                                                <span class="ss-badge-txt p3 text-uppercase text-secondary">STRONG</span>
                                                            </span>
                                                        </div>
                                                        <div class="p2 mt-4">The organization currently exhibits moderate levels
                                                            of leadership, with dedicated and passionate workers. However, the
                                                            teamwork scores are below average, indicating a need for
                                                            improvement. On a positive note, the organization upholds high
                                                            ethical standards, as evidenced by a score of 9/10.</div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="ss-adb-cw-b-nw theme-c mt-60 mb-5">
                                <div class="ss-cc-block text-white">
                                    <div class="row align-items-center">
                                        <div class="col-8">
                                            <div class="mxw-45rem">
                                                <h2 class="h1">Now What?</h2>
                                                <div class="ss-cc-desc p1">
                                                    <p>EDA leads the way in helping organizations create impactful, lasting
                                                        cultures. Let us help you get you started. </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="ss-cc-btns m-0">
                                                <a class="btn btn-white btn-lg btn-block m-0">Get Professional Support</a>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="ss-adb-scyb-g-b">
                                <div class="ss-db-head mb-5">
                                    <div class="ss-db-head-left">
                                        <h1 class="h3 fw-bold mb-0">Culture Mentions</h1>
                                    </div>
                                    <div class="ss-db-head-right d-none">
                                        <a href="javascript:;" class="btn-icon">
                                            <i class="ss-icon-inbox-out"><svg>
                                                    <use xlink:href="#ss-icon-inbox-out"></use>
                                                </svg></i>
                                        </a>
                                        <a href="javascript:;" class="btn-icon">
                                            <i class="ss-icon-share"><svg>
                                                    <use xlink:href="#ss-icon-share"></use>
                                                </svg></i>
                                        </a>
                                        <a href="javascript:;" class="btn-icon">
                                            <i class="ss-icon-refresh"><svg>
                                                    <use xlink:href="#ss-icon-refresh"></use>
                                                </svg></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="ss-adb-cm-a-row">
                                    <div class="ss-adb-cm-a-c">
                                        <div class="ss-adb-cm-a-box">
                                            <div class="ss-adb-cm-a-box-l">
                                                <div class="p2 text-gray-inactive">Total Positve</div>
                                                <strong class="ss-adb-cm-a-score">235</strong>
                                                <div class="ss-adb-cw-a-oh-dt justify-content-start mt-auto mb-0">
                                                    <!-- <div class="ss-db-score text-secondary">
                                            <i class="ss-icon-arrow-alt-up"><svg><use xlink:href="#ss-icon-arrow-alt-up"></use></svg></i>
                                            <span>5.15%</span>
                                        </div> -->
                                                    <div class="ss-db-score text-danger">
                                                        <i class="ss-icon-arrow-alt-down"><svg>
                                                                <use xlink:href="#ss-icon-arrow-alt-down"></use>
                                                            </svg></i>
                                                        <span>3.72%</span>
                                                    </div>
                                                    <span class="ss-adb-cw-a-oh-prd">Since previous month</span>
                                                </div>
                                            </div>
                                            <div class="ss-adb-cm-a-box-r">
                                                <span class="ss-badge-icon bg-sea-green-200">
                                                    <i class="ss-icon-comment-check-fill text-sea-green"><svg>
                                                            <use xlink:href="#ss-icon-comment-check-fill"></use>
                                                        </svg></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-adb-cm-a-c">
                                        <div class="ss-adb-cm-a-box">
                                            <div class="ss-adb-cm-a-box-l">
                                                <div class="p2 text-gray-inactive">Total Negative</div>
                                                <strong class="ss-adb-cm-a-score">10,345</strong>
                                                <div class="ss-adb-cw-a-oh-dt justify-content-start mt-auto mb-0">
                                                    <div class="ss-db-score text-secondary">
                                                        <i class="ss-icon-arrow-alt-up"><svg>
                                                                <use xlink:href="#ss-icon-arrow-alt-up"></use>
                                                            </svg></i>
                                                        <span>12.5%</span>
                                                    </div>
                                                    <!-- <div class="ss-db-score text-danger">
                                            <i class="ss-icon-arrow-alt-down"><svg><use xlink:href="#ss-icon-arrow-alt-down"></use></svg></i>
                                            <span>0.52%</span>
                                        </div> -->
                                                    <span class="ss-adb-cw-a-oh-prd">Since previous month</span>
                                                </div>
                                            </div>
                                            <div class="ss-adb-cm-a-box-r">
                                                <span class="ss-badge-icon bg-hot-pink-200">
                                                    <i class="ss-icon-comment-warning text-hot-pink"><svg>
                                                            <use xlink:href="#ss-icon-comment-warning"></use>
                                                        </svg></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-adb-cm-a-c">
                                        <div class="ss-adb-cm-a-box">
                                            <div class="ss-adb-cm-a-box-l">
                                                <div class="p2 text-gray-inactive">Most Impressions</div>
                                                <strong class="ss-adb-cm-a-score">Communication</strong>
                                                <div class="ss-adb-cw-a-oh-dt justify-content-start mt-auto mb-0">
                                                    <div class="ss-db-score p2">
                                                        <strong class="fw-bold">1,023</strong>
                                                    </div>
                                                    <span class="ss-adb-cw-a-oh-prd">Impressions</span>
                                                </div>
                                            </div>
                                            <div class="ss-adb-cm-a-box-r">
                                                <span class="ss-badge-icon bg-orange-200">
                                                    <i class="ss-icon-signal text-orange"><svg>
                                                            <use xlink:href="#ss-icon-signal"></use>
                                                        </svg></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-adb-cm-a-c">
                                        <div class="ss-adb-cm-a-box">
                                            <div class="ss-adb-cm-a-box-l">
                                                <div class="p2 text-gray-inactive">Least Impressions</div>
                                                <strong class="ss-adb-cm-a-score">Social Impact</strong>
                                                <div class="ss-adb-cw-a-oh-dt justify-content-start mt-auto mb-0">
                                                    <div class="ss-db-score p2">
                                                        <strong class="fw-bold">468</strong>
                                                    </div>
                                                    <span class="ss-adb-cw-a-oh-prd">Impressions</span>
                                                </div>
                                            </div>
                                            <div class="ss-adb-cm-a-box-r">
                                                <span class="ss-badge-icon bg-sea-green-200">
                                                    <i class="ss-icon-users-fill text-sea-green"><svg>
                                                            <use xlink:href="#ss-icon-users-fill"></use>
                                                        </svg></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ss-adb-rts-d-row">
                                    <div class="ss-adb-rts-d-r">
                                        <div class="ss-db-box d-flex flex-column">
                                            <div class="ss-db-box-h">
                                                <div class="ss-db-box-h-l">
                                                    <h3 class="h5">Top 5 Mentions</h3>
                                                </div>
                                                <div class="ss-db-box-h-r d-none">
                                                    <div class="ss-dropdown dropdown js-single-select">
                                                        <button class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ss-icon-ellipsis-v"><svg>
                                                                    <use xlink:href="#ss-icon-ellipsis-v"></use>
                                                                </svg></i>
                                                        </button>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">Menu one</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">Menu two</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">Menu three</span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ss-db-box-b pt-0 ">

                                                <div class="ss-adb-hs-a-l-chart" id="ss-adb-hs-a-l-chart"></div>

                                                <div class="d-flex flex-column">
                                                    <div class="ss-db-ch-legends theme-b mb-0 mt-40 align-self-center">
                                                        <span class="ss-db-ch-legend theme-b">
                                                            <span class="ss-db-ch-legend-text">
                                                                <i class="ss-icon-circle-fill text-secondary"><svg>
                                                                        <use xlink:href="#ss-icon-circle-fill"></use>
                                                                    </svg></i>
                                                                <span>Positive</span>
                                                            </span>
                                                        </span>
                                                        <span class="ss-db-ch-legend theme-b">
                                                            <span class="ss-db-ch-legend-text">
                                                                <i class="ss-icon-circle-fill text-danger"><svg>
                                                                        <use xlink:href="#ss-icon-circle-fill"></use>
                                                                    </svg></i>
                                                                <span>Negative</span>
                                                            </span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ss-adb-rts-d-l">
                                        <div class="ss-db-box">
                                            <div class="ss-db-box-h">
                                                <div class="ss-db-box-h-l">
                                                    <h3 class="h5">Competency Mentions & Strength</h3>
                                                </div>
                                                <div class="ss-db-box-h-r d-none">
                                                    <div class="ss-dropdown dropdown js-single-select">
                                                        <button class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ss-icon-ellipsis-v"><svg>
                                                                    <use xlink:href="#ss-icon-ellipsis-v"></use>
                                                                </svg></i>
                                                        </button>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">Menu one</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">Menu two</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">Menu three</span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ss-db-box-b pt-0">
                                                <div class="ss-adb-hs-a-r-chart" id="ss-adb-hs-a-r-chart"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- End   [ left part ] -->

                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- Div for manage events -->
<div class="ss-table-inputs-row d-none manage-event-row">
    <div class="ss-table-inputs-cell">
        <div class="form-group">
            <label class="ss-checkradio primary">
                <span class="ss-checkradio-text" style="flex-direction: column;">
                    <p style="padding: 0px;margin-bottom: 0px;" class="manage-event-title"></p>
                    <p class="p2 text-gray-inactive"><em class="manage-event-date"></em></p>
                    <input type="hidden" class="manage-event-id" value="">
                </span>
                <input type="checkbox" value="" name="checkbox[]">
                <span class="ss-checkradio-ui">
                    <i class="ss-icon-check-outline"><svg>
                            <use xlink:href="#ss-icon-check-outline"></use>
                        </svg></i>
                </span>
            </label>
        </div>
    </div>
</div>

<div class="ss-table-inputs-row event-row" style="display: none;">
    <div class="ss-table-inputs-cell">
        <div class="row">
            <div class="col-12">
                <div class="form-group">
                    <label class="form-label">Event Title</label>
                    <span class="form-control-wrapper">
                        <input type="text" value="" name="event-title" class="form-control" placeholder="e.g., Company Picnic" id="cultureTrendEventTitle">
                    </span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="form-group">
                    <label class="form-label">Date</label>
                    <span class="form-control-wrapper with-icon-right with-sep-right">
                        <input type="text" value="" name="event-date" class="form-control js-datepicker" placeholder="Select Date" id="cultureTrendEventDate">
                        <i class="ss-icon-calender"><svg>
                                <use xlink:href="#ss-icon-calender"></use>
                            </svg></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<!-- <script src="https://code.highcharts.com/highcharts.js"></script> -->
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>

<script>
    var overallHealthChart = null,
        cultureAreaChart = null,
        demographicChart = null,
        top5Chart = null,
        cmsChart = null;
    window.addEventListener('DOMContentLoaded', function() {
        jQuery(document).ready(function() {
            jQuery('#ss-culture-onboard-1-modal').modal('show');
        });
        Highcharts.setOptions({
            lang: {
                thousandsSep: ','
            }
        });
        // for overall health chart
        if (jQuery('#ss-adb-cw-a-oh-chart').length) {
            overallHealthChart = Highcharts.chart('ss-adb-cw-a-oh-chart', {
                chart: {
                    type: 'gauge',
                    plotBackgroundColor: null,
                    plotBackgroundImage: null,
                    plotBorderWidth: 0,
                    plotShadow: false,
                    height: '50%',
                    spacing: [5, 5, 5, 5]
                },
                credits: {
                    enabled: false,
                },
                title: false,
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    enabled: false
                },
                pane: {
                    startAngle: -90,
                    endAngle: 89.9,
                    background: null,
                    center: ['50%', '95%'],
                    size: '180%'
                },
                yAxis: {
                    min: 0,
                    max: 100, // :: IMPORTANT :: don't forget to give max number here
                    tickLength: 0,
                    tickWidth: 0,
                    minorTickInterval: null,
                    lineWidth: 0,
                    labels: {
                        enabled: false,
                    },
                    plotBands: [{
                        from: 0,
                        to: 25,
                        color: '#ee6262', // Week
                        thickness: '15%'
                    }, {
                        from: 25,
                        to: 65,
                        color: '#F8C12446', // limited
                        thickness: '15%'
                    }, {
                        from: 65,
                        to: 100,
                        color: '#7bba52', // Strong
                        thickness: '15%'
                    }]
                },
                series: [{
                    name: 'Overall Health',
                    data: [80], // Give overall Health score here 
                    dataLabels: {
                        enabled: false
                    },
                    dial: {
                        radius: '110%',
                        backgroundColor: '#404041',
                        baseWidth: 6,
                        baseLength: '0%',
                        rearLength: '0%'
                    },
                    pivot: {
                        backgroundColor: '#404041',
                        radius: 5
                    }
                }]
            });

            // for update above overall health chart data programatically
            // overallHealthChart.update({
            //     yAxis: {
            //         max: 200, // :: IMPORTANT :: don't forget to give max number here 
            //         plotBands: [
            //             {
            //                 from: 0,
            //                 to: 40,
            //                 color: '#ee6262', // Week
            //                 thickness: '15%'
            //             }, {
            //                 from: 40,
            //                 to: 65,
            //                 color: '#d7d7d7', // limited
            //                 thickness: '15%'
            //             }, {
            //                 from: 65,
            //                 to: 200,
            //                 color: '#7bba52', // Strong
            //                 thickness: '15%'
            //             }
            //         ]
            //     },
            //     series: [{
            //         data: [175] // Give overall Health score here 
            //     }]
            // });
        }

        // for show Tone Shift score
        toneShiftScore();

        // for culture area chart
        if (jQuery('#ss-adb-cwn-l-c-tc-chart').length) {
            cultureAreaChart = Highcharts.chart('ss-adb-cwn-l-c-tc-chart', {
                chart: {
                    polar: true,
                    type: 'column',
                    spacing: [0, 0, 0, 0]
                },
                credits: {
                    enabled: false,
                },
                title: false,
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    enabled: true,
                    valueSuffix: ' %',
                    style: {
                        fontSize: '12px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif'
                    }
                },
                xAxis: {
                    type: 'category',
                    lineWidth: 2,
                    lineColor: '#fff',
                    gridLineWidth: 2,
                    gridLineColor: '#fff',
                    labels: {
                        distance: 25,
                        style: {
                            fontSize: '11px',
                            color: '#404041',
                            fontFamily: 'Open Sans, sans-serif'
                        }
                    }
                },
                yAxis: {
                    gridLineWidth: 0,
                    lineWidth: 0,
                    min: 0, // set min series value 0%
                    max: 100, // set max series value 100%
                    labels: {
                        enabled: false
                    }
                },
                pane: {
                    background: {
                        backgroundColor: "#f5f5f5",
                        borderWidth: 0,
                        outerRadius: "100%"
                    }
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.03,
                        groupPadding: 0,
                        states: {
                            inactive: {
                                opacity: 1
                            },
                            hover: {
                                borderWidth: 2,
                                borderColor: '#fff'
                            }
                        }
                    }
                },
                series: [{
                    name: 'Scores',
                    data: [ // adjust fill opacity based on percentage (below 30% socre is 0.3, 31% to 60% is 0.6, everything else is 1 opacity.
                        {
                            name: 'Innovation & Change',
                            y: 80,
                            color: 'rgba(85, 166, 213, 1)'
                        },
                        {
                            name: 'Diversity & Inclusion',
                            y: 60,
                            color: 'rgba(85, 166, 213, 0.6)'
                        },
                        {
                            name: 'Social Impact',
                            y: 30,
                            color: 'rgba(85, 166, 213, 0.3)'
                        },
                        {
                            name: 'Exec/Sr. Leadership',
                            y: 70,
                            color: 'rgba(219, 132, 55, 1)'
                        },
                        {
                            name: 'Communication',
                            y: 80,
                            color: 'rgba(219, 132, 55, 1)'
                        },
                        {
                            name: 'Immediate Supervision',
                            y: 50,
                            color: 'rgba(219, 132, 55, 0.6)'
                        },
                        {
                            name: 'Engagement',
                            y: 70,
                            color: 'rgba(237, 73, 97, 1)'
                        },
                        {
                            name: 'Teamwork',
                            y: 40,
                            color: 'rgba(237, 73, 97, 0.6)'
                        },
                        {
                            name: 'Learning & Development',
                            y: 80,
                            color: 'rgba(237, 73, 97, 1)'
                        },
                        {
                            name: 'Customer Centricity',
                            y: 70,
                            color: 'rgba(101, 186, 162, 1)'
                        },
                        {
                            name: 'Values',
                            y: 30,
                            color: 'rgba(101, 186, 162, 0.3)'
                        },
                        {
                            name: 'Vision & Strategy',
                            y: 60,
                            color: 'rgba(101, 186, 162, 0.6)'
                        }
                    ]
                }]
            });

            // for update above culture area chart data programatically
            // cultureAreaChart.update({
            //     series: [{
            //         name: 'Sentiment',
            //         data: [ // adjust fill opacity based on percentage (below 30% socre is 0.3, 31% to 60% is 0.6, everything else is 1 opacity.
            //             {
            //                 name: 'Innovation & Change',
            //                 y: 80,
            //                 color: 'rgba(85, 166, 213, 1)'
            //             },
            //             {
            //                 name: 'Diversity & Inclusion',
            //                 y: 60,
            //                 color: 'rgba(85, 166, 213, 0.6)'
            //             },
            //             {
            //                 name: 'Social Impact',
            //                 y: 30,
            //                 color: 'rgba(85, 166, 213, 0.3)'
            //             },
            //             {
            //                 name: 'Exec/Sr. Leadership',
            //                 y: 70,
            //                 color: 'rgba(219, 132, 55, 1)'
            //             },
            //             {
            //                 name: 'Communication',
            //                 y: 80,
            //                 color: 'rgba(219, 132, 55, 1)'
            //             },
            //             {
            //                 name: 'Immediate Supervision',
            //                 y: 50,
            //                 color: 'rgba(219, 132, 55, 0.6)'
            //             },
            //             {
            //                 name: 'Engagement',
            //                 y: 70,
            //                 color: 'rgba(237, 73, 97, 1)'
            //             },
            //             {
            //                 name: 'Teamwork',
            //                 y: 40,
            //                 color: 'rgba(237, 73, 97, 0.6)'
            //             },
            //             {
            //                 name: 'Learning & Development',
            //                 y: 80,
            //                 color: 'rgba(237, 73, 97, 1)'
            //             },
            //             {
            //                 name: 'Customer Centricity',
            //                 y: 70,
            //                 color: 'rgba(101, 186, 162, 1)'
            //             },
            //             {
            //                 name: 'Values',
            //                 y: 30,
            //                 color: 'rgba(101, 186, 162, 0.3)'
            //             },
            //             {
            //                 name: 'Vision & Strategy',
            //                 y: 60,
            //                 color: 'rgba(101, 186, 162, 0.6)'
            //             }
            //         ]
            //     }]
            // });
        }

        // for demographic chart
        if (jQuery('#ss-adb-cw-b-dmg-chart').length) {
            demographicChart = Highcharts.chart('ss-adb-cw-b-dmg-chart', {
                chart: {
                    polar: true,
                    type: 'area',
                    spacing: [10, 0, 0, 0],
                },
                credits: {
                    enabled: false,
                },
                title: false,
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    enabled: true,
                    style: {
                        fontSize: '12px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif'
                    }
                },
                pane: {
                    size: '85%'
                },
                plotOptions: {
                    area: {
                        marker: {
                            enabled: false,
                            states: {
                                hover: {
                                    enabled: false,
                                }
                            }
                        },
                        dataLabels: {
                            enabled: true,
                            shadow: false,
                            backgroundColor: '#55A6D5',
                            color: '#ffffff',
                            padding: 3,
                            useHTML: true,
                            borderWidth: 1,
                            borderColor: '#ffffff',
                            y: 5,
                            style: {
                                fontWeight: 'normal',
                                fontSize: '11px',
                                fontFamily: 'Open Sans, sans-serif'
                            }
                        }
                    }
                },
                xAxis: {
                    categories: ['New Orleans', 'Tampa', 'New York', 'Orlando', 'Illinois'],
                    tickmarkPlacement: 'on',
                    lineWidth: 0,
                    labels: {
                        distance: 10,
                        style: {
                            fontSize: '11px',
                            color: '#404041',
                            fontFamily: 'Open Sans, sans-serif'
                        }
                    }
                },
                yAxis: {
                    gridLineInterpolation: 'polygon',
                    gridLineWidth: 1,
                    gridLineColor: '#e1e1e1',
                    min: 0,
                    labels: {
                        enabled: false,
                    },
                    tickAmount: 8
                },
                series: [{
                    name: 'Demographics',
                    data: [5.5, 6.2, 2.8, 4.1, 5.1],
                    color: '#55A6D5',
                    fillOpacity: 0.5,
                    pointPlacement: 'on'
                }]
            });

            // for update above demographic chart data programatically
            // demographicChart.update({
            //     xAxis: {
            //         categories: ['New Orleans', 'Tampa', 'New York', 'Orlando', 'Illinois']
            //     },
            //     series: [
            //         {
            //             name: 'Demographics',
            //             data: [4.1, 5.1, 5.5, 6.2, 2.8],
            //             color: '#55A6D5',
            //             fillOpacity: 0.5,
            //             pointPlacement: 'on'
            //         }
            //     ]
            // });
        }

        // for top 5 mention chart
        if (jQuery('#ss-adb-hs-a-l-chart').length) {
            top5Chart = Highcharts.chart('ss-adb-hs-a-l-chart', {
                chart: {
                    type: 'column',
                    inverted: true,
                    polar: true,
                    spacing: [0, 0, 0, 0],
                },
                credits: {
                    enabled: false,
                },
                title: false,
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    enabled: true,
                    style: {
                        fontSize: '12px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif'
                    }
                },
                pane: {
                    size: '85%',
                    innerSize: '20%',
                    endAngle: 270
                },
                xAxis: {
                    tickInterval: 1,
                    labels: {
                        align: 'right',
                        allowOverlap: true,
                        useHTML: true,
                        step: 1,
                        style: {
                            fontSize: '11px',
                            color: '#404041',
                            fontFamily: 'Open Sans, sans-serif',
                            paddingRight: '3px',
                            paddingTop: '4px',
                            textOverflow: 'none',
                            whiteSpace: 'nowrap'
                        }
                    },
                    lineWidth: 0,
                    categories: ['Communication', 'Values', 'Innovation', 'Customer Centricity', 'Vision & Strategy']
                },
                yAxis: {
                    lineWidth: 0,
                    reversedStacks: false,
                    endOnTick: true,
                    showLastLabel: true,
                    labels: {
                        style: {
                            fontSize: '11px',
                            color: '#404041',
                            fontFamily: 'Open Sans, sans-serif'
                        },
                        format: '{value:,.0f}'
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        borderWidth: 0,
                        pointPadding: 0,
                        groupPadding: 0.15
                    }
                },
                series: [{
                    name: 'Positive',
                    data: [348.1, 113, 30.4, 71, 177],
                    color: '#7bba52'
                }, {
                    name: 'Negative',
                    data: [724.4, 95, 865, 91, 0.776],
                    color: '#ee6262'
                }]
            });
        }

        // for update above top 5 mention data programatically
        // top5Chart.update({
        //     series: [{
        //         name: 'Positive',
        //         data: [124, 95, 65, 91, 76],
        //         color: '#7bba52'
        //     }, {
        //         name: 'Neutral',
        //         data: [148, 113, 104, 71, 77],
        //         color: '#d7d7d7'
        //     }, {
        //         name: 'Negative',
        //         data: [113, 122, 98, 88, 72],
        //         color: '#ee6262'
        //     }]
        // });

        // for competency mention & strength chart
        if (jQuery('#ss-adb-hs-a-r-chart').length) {
            cmsChart = Highcharts.chart('ss-adb-hs-a-r-chart', {
                chart: {
                    type: 'heatmap',
                    marginTop: 7,
                    marginBottom: 150,
                    plotBorderWidth: 1,
                    spacing: [0, 0, 0, 0],
                },
                credits: {
                    enabled: false,
                },
                title: false,
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                tooltip: {
                    enabled: true,
                    formatter: function() {
                        return `Competency: <b>${this.series['xAxis'].categories[this.point['x']]}</b><br> Mentions: <b>${this.point.value}</b><br>Signal Strength: <b>${this.series['yAxis'].categories[this.point['y']]}</b>`;
                    },
                    style: {
                        fontSize: '12px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif'
                    }
                },
                xAxis: {
                    labels: {
                        style: {
                            fontSize: '11px',
                            color: '#404041',
                            fontFamily: 'Open Sans, sans-serif'
                        }
                    },
                    categories: ['Values', 'Communication', 'Exec. Sr. Leadership', 'Immediate Supervision', 'Vision & Strategy', 'Customer Centricity', 'Social Impact', 'Diversity & Inclusion', 'Engagement', 'Teamwork', 'Learning & Development', 'Innovation']
                },
                yAxis: {
                    categories: ['0 - 20%', '21 - 40%', '41 - 60%', '61 - 80%', '81 - 100%'],
                    labels: {
                        style: {
                            fontSize: '11px',
                            color: '#404041',
                            fontFamily: 'Open Sans, sans-serif'
                        }
                    },
                    title: {
                        enabled: false
                    }
                },
                colorAxis: {
                    min: 0,
                    minColor: '#FFFFFF',
                    maxColor: '#55a6d5',
                    labels: {
                        style: {
                            fontSize: '11px',
                            color: '#404041',
                            fontFamily: 'Open Sans, sans-serif'
                        },
                        formatter: function() {
                            return this.value.toLocaleString(); // Format the label with thousands separators
                        }
                    },
                },
                legend: {
                    align: 'right',
                    layout: 'vertical',
                    margin: 0,
                    verticalAlign: 'top',
                    y: 0,
                    symbolHeight: 263
                },
                series: [{
                    name: 'Mentions & Strength',
                    borderWidth: 1,
                    color: '#55a6d5',
                    data: [
                        [0, 0, 10], // first digit is for number of column, second digit is for number/order of cell, third is for score/data 
                        [0, 1, 19],
                        [0, 2, 8],
                        [0, 3, 24],
                        [0, 4, 67],
                        [1, 0, 92],
                        [1, 1, 58],
                        [1, 2, 78],
                        [1, 3, 3117],
                        [1, 4, 48],
                        [2, 0, 35],
                        [2, 1, 15],
                        [2, 2, 123],
                        [2, 3, 64],
                        [2, 4, 52],
                        [3, 0, 72],
                        [3, 1, 6132],
                        [3, 2, 114],
                        [3, 3, 19],
                        [3, 4, 16],
                        [4, 0, 38],
                        [4, 1, 5],
                        [4, 2, 8],
                        [4, 3, 2117],
                        [4, 4, 115],
                        [5, 0, 88],
                        [5, 1, 32],
                        [5, 2, 12],
                        [5, 3, 6],
                        [5, 4, 120],
                        [6, 0, 13],
                        [6, 1, 44],
                        [6, 2, 88],
                        [6, 3, 98],
                        [6, 4, 96],
                        [7, 0, 31],
                        [7, 1, 1],
                        [7, 2, 82],
                        [7, 3, 32],
                        [7, 4, 30],
                        [8, 0, 85],
                        [8, 1, 97],
                        [8, 2, 123],
                        [8, 3, 64],
                        [8, 4, 84],
                        [9, 0, 47],
                        [9, 1, 114],
                        [9, 2, 31],
                        [9, 3, 48],
                        [9, 4, 91],
                        [10, 0, 10],
                        [10, 1, 19],
                        [10, 2, 8],
                        [10, 3, 24],
                        [10, 4, 67],
                        [11, 0, 92],
                        [11, 1, 58],
                        [11, 2, 78],
                        [11, 3, 117],
                        [11, 4, 48]
                    ],
                    dataLabels: {
                        enabled: true,
                        color: '#4A4A4A',
                        style: {
                            fontSize: 11,
                            fontFamily: 'Open Sans, sans-serif',
                            textOutline: 0
                        }

                    }
                }]
            });

            // for update above competency mention & strength chart data programatically
            // cmsChart.update({
            //     colorAxis: {
            //         min: 0,
            //         minColor: '#FFFFFF',
            //         maxColor: '#55a6d5'
            //     },
            //     series: [{
            //         name: 'Mentions & Strength',
            //         color: '#55a6d5',
            //         data: [
            //             [0, 0, 10], // first digit is for number of column, second digit is for number/order of cell, third is for score/data 
            //             [0, 1, 19], 
            //             [0, 2, 8], 
            //             [0, 3, 24], 
            //             [0, 4, 67], 
            //             [1, 0, 92], 
            //             [1, 1, 58], 
            //             [1, 2, 78], 
            //             [1, 3, 117], 
            //             [1, 4, 48], 
            //             [2, 0, 35], 
            //             [2, 1, 15], 
            //             [2, 2, 123], 
            //             [2, 3, 64], 
            //             [2, 4, 52], 
            //             [3, 0, 72], 
            //             [3, 1, 132], 
            //             [3, 2, 114], 
            //             [3, 3, 19], 
            //             [3, 4, 16], 
            //             [4, 0, 38], 
            //             [4, 1, 5], 
            //             [4, 2, 8], 
            //             [4, 3, 117], 
            //             [4, 4, 115], 
            //             [5, 0, 88], 
            //             [5, 1, 32], 
            //             [5, 2, 12], 
            //             [5, 3, 6], 
            //             [5, 4, 120], 
            //             [6, 0, 13], 
            //             [6, 1, 44], 
            //             [6, 2, 88], 
            //             [6, 3, 98], 
            //             [6, 4, 96], 
            //             [7, 0, 31], 
            //             [7, 1, 1], 
            //             [7, 2, 82], 
            //             [7, 3, 32], 
            //             [7, 4, 30], 
            //             [8, 0, 85], 
            //             [8, 1, 97], 
            //             [8, 2, 123], 
            //             [8, 3, 64], 
            //             [8, 4, 84], 
            //             [9, 0, 47], 
            //             [9, 1, 114], 
            //             [9, 2, 31], 
            //             [9, 3, 48], 
            //             [9, 4, 91],
            //             [10, 0, 10], 
            //             [10, 1, 19], 
            //             [10, 2, 8], 
            //             [10, 3, 24], 
            //             [10, 4, 67], 
            //             [11, 0, 92], 
            //             [11, 1, 58], 
            //             [11, 2, 78], 
            //             [11, 3, 117], 
            //             [11, 4, 48]
            //         ]
            //     }]
            // });
        }

    });

    function toneShiftScore() {
        var greenStartValue = parseFloat(jQuery('.ss-adb-cwn-l-a-ts-a-scr').attr('data-greenStartValue'));
        var greenEndValue = parseFloat(jQuery('.ss-adb-cwn-l-a-ts-a-scr').attr('data-greenEndValue'));

        var grayStartValue = parseFloat(jQuery('.ss-adb-cwn-l-a-ts-a-scr').attr('data-grayStartValue'));
        var grayEndValue = parseFloat(jQuery('.ss-adb-cwn-l-a-ts-a-scr').attr('data-grayEndValue'));

        var redStartValue = parseFloat(jQuery('.ss-adb-cwn-l-a-ts-a-scr').attr('data-redStartValue'));
        var redEndValue = parseFloat(jQuery('.ss-adb-cwn-l-a-ts-a-scr').attr('data-redEndValue'));

        var normValue = (grayStartValue + grayEndValue) / 2;

        var currentScore = parseFloat(jQuery('.ss-adb-cwn-l-a-ts-a-scr').attr('data-currentScore'));
        var linePos = 0;

        if (currentScore >= redStartValue && currentScore <= redEndValue) {
            var scorePercent = ((currentScore - redStartValue) * 100) / (redEndValue - redStartValue);
            linePos = (scorePercent / 4);
            jQuery('.ss-adb-cwn-l-a-ts-b-r').html(
                '<span class="ss-adb-cw-a-oh-perf sm mw-auto bg-danger-200 text-danger">Negative Shift</span>');
        } else if (currentScore >= grayStartValue && currentScore <= grayEndValue) {
            if (currentScore >= grayStartValue && currentScore <= normValue) {
                var scorePercent = ((currentScore - grayStartValue) * 100) / (normValue - grayStartValue);
                linePos = ((scorePercent / 4) + 25);
            } else {
                var scorePercent = ((currentScore - normValue) * 100) / (grayEndValue - normValue);
                linePos = ((scorePercent / 4) + 50);
            }
            jQuery('.ss-adb-cwn-l-a-ts-b-r').html(
                '<span class="ss-adb-cw-a-oh-perf sm mw-auto bg-gray">Neutral Shift</span>');
        } else if (currentScore >= greenStartValue && currentScore <= greenEndValue) {
            var scorePercent = ((currentScore - greenStartValue) * 100) / (greenEndValue - greenStartValue);
            linePos = ((scorePercent / 4) + 75);
            jQuery('.ss-adb-cwn-l-a-ts-b-r').html(
                '<span class="ss-adb-cw-a-oh-perf sm mw-auto bg-secondary-200 text-secondary">Positive Shift</span>');
        }

        if (currentScore > 0) {
            jQuery('.ss-adb-cwn-l-a-ts-a-scr').html('<span>+' + currentScore + '</span>');
            jQuery('.ss-adb-cwn-l-a-ts-b-l .h3').html('+' + currentScore);
        } else {
            jQuery('.ss-adb-cwn-l-a-ts-a-scr').html('<span>' + currentScore + '</span>');
            jQuery('.ss-adb-cwn-l-a-ts-b-l .h3').html(currentScore);
        }

        jQuery('.ss-adb-cwn-l-a-ts-a-scr').css({
            bottom: linePos + '%'
        });
    }

    cultureTrendJsonStr = "[{\"nan\": false, \"cp\": false, \"date\": 1696222800.0, \"sv\": 62.2, \"a\": 0, \"ub\": 67.76, \"lb\": 56.64}, {\"nan\": false, \"cp\": false, \"date\": 1696309200.0, \"sv\": 62.28, \"a\": 0, \"ub\": 67.77, \"lb\": 56.8}, {\"nan\": false, \"cp\": false, \"date\": 1696395600.0, \"sv\": 62.36, \"a\": 0, \"ub\": 67.78, \"lb\": 56.95}, {\"nan\": false, \"cp\": false, \"date\": 1696482000.0, \"sv\": 62.44, \"a\": 0, \"ub\": 67.78, \"lb\": 57.1}, {\"nan\": false, \"cp\": false, \"date\": 1696568400.0, \"sv\": 62.53, \"a\": 0, \"ub\": 67.8, \"lb\": 57.25}, {\"nan\": false, \"cp\": false, \"date\": 1696654800.0, \"sv\": 62.64, \"a\": 0, \"ub\": 67.86, \"lb\": 57.41}, {\"nan\": false, \"cp\": false, \"date\": 1696741200.0, \"sv\": 62.75, \"a\": 0, \"ub\": 67.93, \"lb\": 57.58}, {\"nan\": false, \"cp\": false, \"date\": 1696827600.0, \"sv\": 62.92, \"a\": 0, \"ub\": 68.1, \"lb\": 57.75}, {\"nan\": false, \"cp\": false, \"date\": 1696914000.0, \"sv\": 63.09, \"a\": 0, \"ub\": 68.25, \"lb\": 57.92}, {\"nan\": false, \"cp\": true, \"date\": 1697000400.0, \"sv\": 63.28, \"a\": 1, \"ub\": 68.46, \"lb\": 58.09}, {\"nan\": false, \"cp\": true, \"date\": 1697086800.0, \"sv\": 63.46, \"a\": 1, \"ub\": 68.66, \"lb\": 58.26}]";
    cultureTrend = JSON.parse(cultureTrendJsonStr);
    let eventList = [];
    let previousNumber = 0;

    cultureTrend.sort((a, b) => a.date - b.date);
    ub = [];
    sv = [];
    lb = [];
    cpUb = [];
    cpLb = [];
    ua = [];
    da = [];
    pushDataPoints = false;
    cultureTrend.forEach(element => {
        if (!(element.ub === 50 && element.sv === 50 && element.lb === 50)) {
            pushDataPoints = true;
        }
        if (pushDataPoints) {
            date = element.date * 1000;

            ub.push([date, element.ub]);


            sv.push([date, element.sv]);


            lb.push([date, element.lb]);

            if (element.cp) {
                if (element.a === 1) {
                    cpUb.push([date, element.ub + 5]);
                } else if (element.a === -1) {
                    cpLb.push([date, element.lb - 5]);
                }
            } else {
                // cp.push([]);
            }
            if (element.a <= -1 && (previousNumber >= 0)) {
                da.push([date, element.lb]);
                previousNumber = element.a;
            } else if (element.a >= 1 && (previousNumber <= 0)) {
                ua.push([date, element.ub]);
                previousNumber = element.a;
            }
        }
    });

    cultureTrendsChart = Highcharts.stockChart('ss-adb-cwn-l-aa-ct-chart', {
        exporting: {
            enabled: false
        },
        scrollbar: {
            enabled: false
        },
        navigator: {
            enabled: true
        },
        tooltip: {
            enabled: true,
            formatter: function() {
                var date = Highcharts.dateFormat('%A, %e %b, %H:%M', this.point.x);
                var dot = '<span style="color:' + this.point.color + '">&#11044;</span>';
                if (this.point.y) {
                    if(this.point.series.name == "cpUb")
                    {
                        return `${date} <br> <b>${dot} : ${this.point.y - 5} %</b>`;
                    }
                    else if(this.point.series.name == "cpLb")
                    {
                        return `${date} <br> <b>${dot} : ${this.point.y + 5} %</b>`;
                    }
                    else{
                        return `${date} <br> <b>${dot} : ${this.point.y} %</b>`;
                    }
                    
                } else {
                    return `${date}`;
                }
            },
            style: {
                fontSize: '12px',
                color: '#404041',
                fontFamily: 'Open Sans, sans-serif'
            }
        },
        lang: {
            rangeSelectorZoom: ""
        },
        scrollbar: {
            enabled: false
        },
        navigator: {
            enabled: true
        },
        chart: {
            height: "38%"
        },
        rangeSelector: {
            enabled: false // Disable the range selector
        },
        title: {
            // text: 'USD to EUR exchange rate'
        },
        yAxis: [{
            opposite: false,
            top: '15%',
            height: '85%',
            labels: {
                style: {
                    fontSize: '1.2rem',
                }
            },
            tickInterval: 10,
        }],
        xAxis: [{
            labels: {
                style: {
                    fontSize: '1.2rem',
                }
            }
        }],

        plotOptions: {
            flags: {
                accessibility: {
                    exposeAsGroupOnly: true,
                    description: 'Flagged events.'
                }
            }
        },
        series: [{
                type: 'scatter',
                name: 'ub',
                data: ub,
                id: 'ub',
                marker: {
                    enabled: false,
                    symbol: 'circle',
                },
                color: '#D1EAD8',
                lineWidth: 2
            },
            {
                type: 'scatter',
                name: '',
                data: sv,
                id: 'sv',
                marker: {
                    enabled: false,
                    symbol: 'circle',
                },
                color: "#539cc1",
                lineWidth: 2
            },
            {
                type: 'scatter',
                name: 'lb',
                data: lb,
                id: 'lb',
                marker: {
                    enabled: false,
                    symbol: 'circle',
                },
                color: '#fad0d0',
                lineWidth: 2
            },
            {
                type: 'scatter',
                color: "#000000",
                name: 'cpUb',
                data: cpUb,
                id: 'cpUb',
                // Display markers for data points
                marker: {
                    enabled: true,
                    radius: 2,
                    symbol: 'circle',
                    radius: 2
                },
            },
            {
                type: 'scatter',
                color: "#000000",
                name: 'cpLb',
                data: cpLb,
                id: 'cpLb',
                // Display markers for data points
                marker: {
                    enabled: true,
                    symbol: 'circle',
                    radius: 2
                }
            },
            {
                type: 'scatter',
                color: "#FF0000",
                name: 'da',
                data: da,
                id: 'da',
                // Display markers for data points
                marker: {
                    enabled: true,
                    symbol: 'url(../images/red-down-arrow.png)',
                    radius: 2
                },
                lineWidth: 0, // Ensure this is set correctly
            },
            {
                type: 'scatter',
                color: "#008000",
                name: 'ua',
                data: ua,
                id: 'ua',
                // Display markers for data points
                marker: {
                    enabled: true,
                    symbol: "url(../images/green-up-arrow.png)",
                    radius: 1
                },
                lineWidth: 0, // Ensure this is set correctly
            }
        ]
    })

    function showFlag(chart) {
        let flagSeries = chart.get('flagSeries'); // Get the flag series

        if (flagSeries) {
            // Remove all existing points in the flag series
            while (flagSeries.data.length > 0) {
                flagSeries.data[0].remove();
            }
        } else {
            flagSeries = chart.addSeries({
                type: 'flags',
                id: 'flagSeries',
                accessibility: {
                    exposeAsGroupOnly: true,
                    description: 'Flagged events.'
                },
                shape: 'squarepin',
                width: 16,
                data: []
            });
        }

        eventList.forEach(obj => {
            // Accessing key-value pairs from each object in the array
            let eventTitle = obj.eventTitle;
            let eventDateStr = obj.eventDateStr;

            // Parse the event date string into a Date object
            const eventDate = new Date(eventDateStr);

            flagSeries.addPoint({
                x: Date.UTC(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate()),
                title: eventTitle,
                text: eventTitle
            });
        });
    }

    function submitEvents() {

        const eventTitleInputs = $('#add-events-container input[name="event-title"]');
        const eventDateInputs = $('#add-events-container input[name="event-date"]');
        const eventData = [];

        // Loop through each pair of event title and date inputs
        for (let i = 0; i < eventTitleInputs.length; i++) {
            const eventTitle = eventTitleInputs[i].value;
            const eventDate = eventDateInputs[i].value;
            // Check if both title and date are not empty before adding to eventData
            if (eventTitle.trim() !== '' && eventDate.trim() !== '') {
                eventData.push({
                    eventTitle: eventTitle,
                    eventDateStr: eventDate
                });
                eventList.push({
                    eventTitle: eventTitle,
                    eventDateStr: eventDate
                });
            }
        }
        showFlag(cultureTrendsChart)
        // Removing the added elements when submit element is clicked
        $('.event-row').remove();

        $('#cultureTrendEventDate').val('');
        $('#cultureTrendEventTitle').val('');
    }

    function handleVolatilityToggle() {
        // Event delegation for the volatility toggle icon
        const seriesCpUb = cultureTrendsChart.series[3];
        seriesCpUb.setVisible(!seriesCpUb.visible);

        const seriesCpLb = cultureTrendsChart.series[4];
        seriesCpLb.setVisible(!seriesCpLb.visible);
    }

    // Function to add events to the addEventsContainer
    function addEventToEventList() {
        var newRow = $('.event-row').clone().removeAttr('style').removeClass('hidden');
        $('#event-list-container').append(newRow);
    }

    function switchTab(selectedTab, otherTab) {
        if (selectedTab == "manage-events") {
            $('#add-events-container').addClass('d-none');
            $('#manage-events-container').removeClass('d-none');

            if (eventList.length > 0) {
                $('#event-list-checkbox').removeClass('d-none');
                $('#no-events-message').addClass('d-none');
            } else {
                $('#event-list-checkbox').addClass('d-none');
                $('#no-events-message').removeClass('d-none');
            }
        } else {
            $('#add-events-container').removeClass('d-none');
            $('#manage-events-container').addClass('d-none');
        }
    }
</script>

<?php require_once "footer.php"; ?>
<?php require_once "modal-culture-onboarding-plan-1.php";?>
<?php require_once "modal-culture-onboarding-plan-2.php";?>
<?php require_once "modal-adb-ask-culture-ai.php";?>
