<%@ Assembly Name="$SharePoint.Project.

AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities"
Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI"
Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true"
CodeBehind="NTD_SC_RoadmapExpSMLwiseproductMappingUserControl.ascx.cs"
Inherits="NTD.VWP.NTD_SC_RoadmapExpSMLwiseproductMapping.NTD_SC_RoadmapExpSMLwisepr
oductMappingUserControl" %>

<link rel="stylesheet" href="../SiteAssets/Style/progressbar.css">

<script src="../SiteAssets/Scripts/LatestScript/html2canvas.min.js"></script>
<script src="../Scripts/LatestScript/jquery-3.7.1.js"></script>
<script src="../SiteAssets/Scripts/LatestScript/jquery-ui.js"></script>
<script src="../SiteAssets/Scripts/LatestScript/jquery-confirm.min.js"></script>
<link rel="stylesheet" href="../SiteAssets/Style/LatestCSS/jquery-ui.css">
<link rel="stylesheet" href="../SiteAssets/Style/LatestCSS/jquery-confirm.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.3.30/
jquery.sumoselect.min.js" type="text/javascript"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.3.30/
sumoselect.css" type="text/css" />

<style type="text/css">
.gridview-header {
background-color: #8dbefd !important;
font-size: 18px;
}

.ms-usereditor {
width: 100% !important;
}

.SumoSelect {
display: inline-block;
position: absolute !important;
outline: none;
}

.Flr {
float: right;
}

.previous {
 background-color: #3c7bde !important;
color: white !important;
}

.next {
background-color: #3c7bde !important;
color: white !important;
}

.disp {
width: 17px;
height: 17px;
margin: 2px !important;
display: block !important;
}

.disnone {
display: none !important;
}

.prewhite {
white-space: pre-line;
}

label {
font-weight: bold;
}

.txtareamult {
width: 100%;
border: 1px solid #ced4da !important;
}

.custom-file-label {
margin-left: 15px;
}

.col-md-4, .col-md-5, .col-md-7 {

float: left !important
}

.form-group {
margin-bottom: 0px !important;
}

.txtalign {
text-align: right;
}

.third-table {
width: 60% !important
}

.fileInputcss {
width: 100% !important
}
.hiddencol {
display: none;
}

.table-striped tbody tr:nth-child(1) {

background-color: #e5f2ff;
}

.ImgClass {
width: 16px;
height: 16px;
margin: 2px !important;
}

ul.level1.static {
margin-bottom: 0px !important
}

.ColPublished {
color: green
}

.ColDraft {
color: orange
}

.ColPending {
color: gray
}

.level1.tab1.selected.static {
padding: 5px 10px 5px 10px;
border: none !important;
font-weight: bold;
color: white !important;
text-align: center !important;
BACKGROUND-COLOR: #4994d6;
margin-right: 2px !important;
line-height: 1.42857143 !important;
border-radius: 4px 4px 0 0 !important
}

a.level1.tab1.selected.static {
height: 35px !important;
}

.tab-content {
float: left;
BACKGROUND-COLOR: WHITE;
PADDING: 13PX;
BORDER-RADIUS: 5PX;
MARGIN-TOP: 0PX;
}

.tab1 {
width: 17em;
padding: 5px 10px 5px 10px;
BACKGROUND-COLOR: #fff;
 text-align: center;
display: inline;
margin-right: 2px !important;
line-height: 1.42857143 !important;
border: 0px solid #E0E0E0 !important;
border-radius: 4px 4px 0 0 !important;
border-bottom-style: none !important;
}

.td {
padding: 0.5%;
}

.ValidationMsg {
color: red;
}

.fileInputcss {
width: 100% !important
}

.custom-card {
background-color: transparent !important;
border: none !important;
margin-bottom: 22px;
}

.bgcolorchange {
background-color: #E9ECEF !important;
}

.custom-card .card-header {
width: 280px;
color: black;
border-top: 2px solid #2e7ce0;
font-size: 16px;
padding-bottom: 10px !important;
font-weight: bold;
text-align: left;
background-color: white !important;
border-bottom: 0px;
border-top-left-radius: 6px !important;
border-top-right-radius: 6px !important;
margin-bottom: 0px !important;
background-color: #fffffe !important;
border-bottom: 0px !important;
}

.custom-card .collapse {
background-color: white;
border-top: 0px;
border-radius: 0px 6px 6px;
margin-top: 0px !important;
}

.custom-card .card-body {
border-top: 0px;
margin-top: 0px;
padding: 0px 15px !important;
 }

.custom-card .card-link {
color: #212120;
}

.tab-container {
padding: 20px;
background-color: #eef1e9;
margin-top: 0px;
}

.GridviewDiv {
font-size: 100%;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial,
Helevetica, sans-serif;
color: #303933;
}

.headerstyle {
color: #FFFFFF;
border-right-color: #abb079;
border-bottom-color: #abb079;
background-color: #8a8684;
padding: 0.5em 0.5em 0.5em 0.5em;
text-align: center;
}

.gridHeadStyleNew {
text-align: center;
padding: 5px;
background-color: #f3c500 !important;
color: white;
font-weight: bold;
font-size: 14pt;
margin-top: 0px !important;
}

.ImgClass2 {
width: 17px;
height: 17px;
margin: 2px !important;
}

.ms-usereditor table tbody tr td div {

overflow-wrap: normal !important;
overflow-x: hidden;
height: 50px !important;
border-radius: 4px !important;
max-width: 100% !important;
border-color: #ced4da !important;
font-size: 12px !important;
}

.menuMargin {
margin-top: 20px !important;
}
</style>
<script type="text/javascript">
var startdtfiscalYr = "";
var minDate = "";

function PopUpWindows(pageUrl, Title) {

var options =
{
url: pageUrl,
title: Title,
allowMaximize: false,
width: 1250,
height: 500
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog',
options);
}

function PopUpWindow() {
debugger;
var Pager_ID = $("[id$='hdnPagerID']").val();
var OpType = $("[id$='hdnOPtype']").val();

var pageUrl = "/sites/NTD/Pages/ReviewOnePagerCompressed.aspx?PagerID=" +

Pager_ID + "&redirectFrom=review&Type=" + OpType;
var Title = "Review Idea";

var options =
{
url: pageUrl,
title: Title,
allowMaximize: false,
width: 1250,
height: 700
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog',
options);
}
function PopUpWindowsWithReload3(pageUrl) {
var dialogOptions = SP.UI.$create_DialogOptions();
dialogOptions.url = pageUrl;
dialogOptions.width = 1400;
dialogOptions.height = 650;

dialogOptions.dialogReturnValueCallback = Function.createDelegate(null,
CloseCallback3);
SP.UI.ModalDialog.showModalDialog(dialogOptions);

}
function CloseCallback3(strReturnValue, target) {
if (strReturnValue == SP.UI.DialogResult.OK) {

}
if (strReturnValue == SP.UI.DialogResult.cancel) {

}
 }
function changeControlID() {

$('#tblrptPDE tbody tr').each(function (index, tr) {

var ctlID = "";

if ($(tr).find("td").eq(0).text().includes("PDE FY"))
ctlID = "PDE";

$(this).children('td').filter(function () {
$(this).find("input:text").each(function () {
if ($(this).attr('id')) {
this.id = this.id + ctlID + $
(tr).find("td").eq(0).text().slice(-9);

if ($("[id*='chebxtmlleadEE']").is(':checked')
|| $("[id*='chebxtmlleadChassis']").is(':checked')
|| $("[id*='chebxtmlleadBT']").is(':checked')
|| $("[id*='chebxtmetcleadEE']").is(':checked')
|| $("[id*='chebxtmetcleadChassis']").is(':checked')
|| $("[id*='chebxtmetcleadBT']").is(':checked')
) {
if (this.id.includes("tbPDETKHPDE") ||
this.id.includes("tbPDEFSSPDE")
|| this.id.includes("tbPDEMatPDE") ||
this.id.includes("tbPDEConvPDE")) {
$(this).on("keypress keyup blur", function (event)
{
$(this).attr('style', 'background-color:#E9ECEF
!important');
event.preventDefault();

});
}
}
}
});
});

});

}
function alertWithReloadPage(titleText, msg, typeColor) {
$.confirm({
title: titleText,
content: msg,
type: typeColor,
draggable: true,
typeAnimated: true,
buttons: {
OK:
{
action: function () {
ModalDialogClose();
}
 },
}
});
}
function ClosePopupReloadPg(titleText, msg, typeColor) {
$.confirm({
title: titleText,
content: msg,
type: typeColor,
draggable: true,
typeAnimated: true,
buttons: {
OK:
{
action: function () {
ModalDialogClose();
}
},
}
});
}
function ModalDialogClose() {
SP.SOD.execute('sp.ui.dialog.js',
'SP.UI.ModalDialog.commonModalDialogClose', CloseDlg);
}
function CloseDlg() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel);
window.location.reload(true);
}
$(document).ready(function () {
sumoSelect();
initializeSumoSelect();
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {

ischecboxClick();
sumoSelect();
initializeSumoSelect();

}
});
}
function sumoSelect() {
$('#<%= ddlproduct.ClientID %>').SumoSelect({
selectAll: true, // Adds "Select All" option
placeholder: 'Select Options', // Placeholder text
csvDispCount: 3, // Number of items to display before the "+ count
selected" text
captionFormat: '{0} Selected', // Custom format for the caption
search: true, // Enables search functionality inside the dropdown
okCancelInMulti: true // Adds "OK" and "Cancel" buttons in the dropdown
});
}
function initializeSumoSelect() {
// Initialize SumoSelect
 $('#<%= ddlproduct.ClientID %>').SumoSelect({
// Optional configuration options
selectAll: true
});

// Function to update hidden field with selected values

$('#<%= ddlproduct.ClientID %>').on('sumo:closing', function () {
var selectedValues = $(this).val(); // Get selected values
$('#<%= hdnSelectedValues.ClientID
%>').val(selectedValues.join(',')); // Store in hidden field

});
}

function ischecboxClick() {
$('.checkbox-item').on('change', function () {
var $this = $(this);
//var $checkbox = $(this);
var isChecked = $this.prop('checked'); // Use .prop() to check the
'checked' property
var techConceptText = $.trim($this.closest('.tooltip-
container').find('.draggable').data('tech-concept'));
var pagerIdValue = $.trim($this.closest('.tooltip-
container').find('.draggable').data('pager-id'));
var termType = $.trim($this.closest('.tooltip-
container').find('.draggable').data('term')); // Get the term type (short-term,
mid-term, long-term)

if (isChecked) {
// Add item to the container
var $draggable = $this.closest('.row').find('.draggable');
$draggable.draggable("disable").css('opacity', '0.5'); //
Disable draggable and indicate visually

var newItem = $
('<li>').text(techConceptText).addClass('dropped-item');
$('<input>').attr({
type: 'hidden',
value: pagerIdValue
}).appendTo(newItem); // Store pagerIdValue as a hidden input

var removeBtn = $('<span style="float:

right;">').text('×').addClass('remove-btn');
removeBtn.appendTo(newItem);
newItem.appendTo("#listContainer");

updateHiddenField();
toggleSubmitButton();
} else {
// Remove item from the container
var $draggable = $this.closest('.row').find('.draggable');
$draggable.draggable("enable").css('opacity', '1'); // Enable
draggable and reset opacity

$("#listContainer .dropped-item").each(function () {
var $listItem = $(this);
var storedPagerId =
$.trim($listItem.find('input[type="hidden"]').val());
 if (storedPagerId === pagerIdValue) {
$listItem.remove(); // Remove item from the list
updateHiddenField();
toggleSubmitButton();
}
});
}

});

</script>

<div class="container-fluid ContentBoxStyle">

<input type="checkbox" class="checkbox-item" />
<asp:UpdatePanel ID="RoadMapStructureDetails" runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<div class="row ContentHead">
<div class="col-md-4 col-sm-4 col-lg-4 "></div>
<div class="col-md-4 col-sm-4 col-lg-4 ">
<asp:Label ID="Label1" Font-Bold="true"
runat="server">Experience Roadmap SML wise Product</asp:Label>
</div>
</div>
<div>
<asp:HiddenField ID="hdnSelectedValues" runat="server" />
<div class="row" style="margin-top: 20px; margin-bottom: 12px;">

<div class="col-md-1p5 col-sm-1p5 col-lg-1p5">

<asp:Label ID="lblTechnoloy" Font-Bold="true"
runat="server" Text="Experiance" />
</div>
<div class="col-md-3 col-sm-3 col-lg-2">
<asp:DropDownList ID="ddlFilterExperience"
AutoPostBack="true" runat="server"
CssClass="required form-control form-control-sm"
OnSelectedIndexChanged="ddlFilterExperience_SelectedIndexChanged">
</asp:DropDownList>
</div>
<%-- <div class="col-sm-1">
<asp:Button ID="btnSearch" Class="btn btn-success btn-sm
ChkCheck req" runat="server" Text="Search" OnClick="btnSearch_Click" />
</div>--%>
<div class="col-md-6 float-left">
<div class="col-md-5 pull-right">
<asp:Label ID="Label21" Font-Bold="true" runat="server"
Text="Product" />

</div>
<div class="col-md-7 pull-right">
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:ListBox ID="ddlproduct" runat="server"
CssClass="required form-control form-control-sm SumoSelect"
SelectionMode="Multiple"></asp:ListBox>
 </div>
</div>
</div>

<asp:GridView ID="GridView1" Style="width: 100%; border: 1px solid

lightgrey" runat="server" AutoGenerateColumns="False" CssClass="table-sm table
table-striped export-table">
<HeaderStyle CssClass="gridview-header"
HorizontalAlign="Center" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="CheckAll" runat="server"
AutoPostBack="true" OnCheckedChanged="CheckAll_CheckedChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="ItemCheckBox" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="AggregateName"
HeaderText="Experiance Name" />
<asp:BoundField DataField="LevelName"
HeaderText="Product" />
<asp:BoundField DataField="Level 1" HeaderText="S" />
<asp:BoundField DataField="Level 2" HeaderText="M" />
<asp:BoundField DataField="Level 3" HeaderText="L" />

</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>

<script>
function toExcel2() {
var cache = {};
this.tmpl = function tmpl(str, data) {
var fn = !/\W/.test(str) ? cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +
"with(obj){p.push('" +
str.replace(/<br\s*\/?>/ig, "\r\n")
.split("{{").join("\t")
.replace(/((^|}})[^\t]*)'/g, "$1\r")
.replace(/\t=(.*?)}}/g, "',$1,'")
.split("\t").join("');")
.split("}}").join("p.push('")
.split("\r\n\<br>").join("\\<br><br><br>'") + "');}return
p.join('');");
return data ? fn(data) : fn;
};

var tableToExcel = (function () {

var uri = 'data:application/vnd.ms-excel;base64,',
 template = '<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-
html40"><head><!--[if gte mso
9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{{=worksheet}
}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></
x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></
head><body>{{for(var i=0; i<tables.length;i++){ }}<table cellspacing="3"
rules="rows" border="1" style="color:Black;border-color:Black;border-
width:1px;border-style:solid;width:100%;border-collapse:collapse;font-
size:10pt;text-align:center;">{{=tables[i]}}</table>{{ } }}</body></html>',
base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)));
},
format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) {
return c[p];
});
};

return function (tableList, name) {

if (!tableList.length > 0 && !tableList[0].nodeType) table =
document.getElementById(table);
var tables = [];
for (var i = 0; i < tableList.length; i++) {
// Clone the table to remove styles from the original
var clonedTable = tableList[i].cloneNode(true);

// Replace textareas with labels

var textareas = clonedTable.querySelectorAll('textarea');
for (var j = 0; j < textareas.length; j++) {
var label = document.createElement('label');
label.textContent = textareas[j].value;
textareas[j].parentNode.replaceChild(label, textareas[j]);
}

// Replace dropdowns with labels

var selects = clonedTable.querySelectorAll('select');
for (var k = 0; k < selects.length; k++) {
var label = document.createElement('label');
// Set label content to "0" if the selected value is
"Select"
label.textContent = selects[k].value === 'Select' ? '0' :
selects[k].options[selects[k].selectedIndex].text;
selects[k].parentNode.replaceChild(label, selects[k]);
}

// Replace textboxes with labels

var textboxes =
clonedTable.querySelectorAll('input[type="text"]');
for (var l = 0; l < textboxes.length; l++) {
var label = document.createElement('label');
label.textContent = textboxes[l].value;
textboxes[l].parentNode.replaceChild(label, textboxes[l]);
}

tables.push(clonedTable.innerHTML);
}
var ctx = {
worksheet: name || 'Worksheet',
 tables: tables
};

var link = document.createElement("a");

link.download = "Roadmap_Exp_SMLwise_product.xls";
link.href = uri + base64(tmpl(template, ctx));
link.click();

};
})();

tableToExcel(document.getElementsByTagName("table"),
"Roadmap_Exp_SMLwise_product");
}
</script>