LatestDuplicate_Working

Paused

App Files Files Community

LatestDuplicate_Working / templates /tableDetection.html

Marthee

Update templates/tableDetection.html

06079b4 verified 6 months ago

raw

history blame

76.2 kB

	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>



	<link rel="stylesheet" href="https://use.typekit.net/zos0ars.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="static/style.css">
	<link rel="stylesheet" href="static/MenuStyle.css">
	<link rel="stylesheet" href="static/LegendPageStyle.css">
	<link rel="stylesheet" href="static/popups.css">
	<link rel="stylesheet" href="static/IMG-Larger.css">
	<link rel="stylesheet" href="static/searchButton.css">
	<meta charset="utf-8">
	<title>ADR Console</title>
	<link rel = "icon" type = "image/png" sizes = "180x154" href = "static/images/TSAlogoCropped180x154.png">
	<link rel = "icon" type = "image/png" sizes = "32x27" href = "static/images/TSAlogoCropped32x27.png">
	<link rel = "icon" type = "image/png" sizes = "16x14" href = "static/images/TSAlogoCropped16x14.png">
	<link rel = "mask-icon" href = "static/images/TSAlogoCropped180x154.png">
	<link rel = "shortcut icon" href = "static/images/TSAlogoCropped180x154.png">

	<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
	<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-sunburst.min.js"></script>
	<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.min.js"></script>



	</head>
	<body >
	<div id="all">
	{% include 'loading.html' %}
	</div>
	<!--Main tab links-->
	<div class="tab" >
	<div class="container" id="toggle">
	<div class="bar1"></div>
	<div class="bar2"></div>
	<div class="bar3"></div>
	</div>

	<button class="tablinks" id="pagetitle" onclick="openTab(event, 'home')">ADR Console <i class="fa fa-home" > </i></button>
	<!-- <button class="tablinks" id="LegendHist" onclick="openTab(event, 'legends')">Legends History <i class="fa fa-caret-down"></i></button> -->
	<a class="tablinks" id="LegendHist" href="{{ url_for('legendDirectory') }}">Legends History <i class="fa fa-caret-down"></i></a>
	<button class="dropbtn" onclick="userguideclick()"><img id="infoImg" src="data:image/png;base64,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"></button>
	</div>


	<div id="mySidebar" class="slide-out">
	<div id="menuOptions">
	<li><a href="{{ url_for('measurementConsoleFn') }}">Measure Plans </a></li>
	<li><a href="{{ url_for('searchDocument') }}">Search in Documents</a></li>
	<li onclick=redirectOmarSearch()>Table Detection</li>
	<li><a href="{{ url_for('FindInitialMarkups') }}">Markup Specification</a></li>
	<li><a href="{{ url_for('TestingMeasurement') }}">Testing Measurement</a></li>

	</div>
	</div>

	<div id="home" class="tabcontent" >

	<div id="loading" hidden> </div>
	<form method="post" id="myForm" enctype="multipart/form-data">


	<div id ="">
	<select name="selectproj" class="selectionsProj" id="selectionsProjid" required > </select>
	</div>

	<div id ="projectpart">
	<select name="selectprojp" class="selectionsProjp" id="selectionsProjpid" required> </select>
	</div>

	<div id ="projectsection">
	<select name="selectprojs" class="selectionsProjs" onchange=getproj() required> </select>
	</div>


	<div id ="tomeasurediv">
	<div>
	<label id="measureLabel">Document To Measure</label>
	<input type="search" onkeyup=filterFunction(this.id) id="tomeasureSearchInput">
	<!-- <button id="refreshDropboxButtonID"></button> -->
	<i hidden class="fa fa-dropbox fa-lg" id="refreshDropboxButtonID">
	<span class="dropboxtip">The console updates projects retrieved from Dropbox automatically at 9:00 am and 9:00 p.m. If you need to access any projects in between, just click on this button. Please note that it will refresh the files related to the project you chose only.</span> </i>

	</div>
	<div id="measureCheckbox">
	<!-- <select style="margin-left: -1%;" hidden name="measureselectname" id="measureselectid" multiple size="5"></select> -->
	<div id="measureContainer" hidden required></div>
	</div>
	</div>

	<button id="Newtablebutton">Table Detect</button>

	</form>

	<!-- <button id="downloadbutton" hidden>Download Tables</button> -->

	<input type="button" value="Download Tables" id="downloadbutton" style="display: none;" />




	<div id="progressBar" hidden>
	<div id="progress">0%</div>
	</div>

	<!-- Modal popup box -->
	<div id="mpopupBox" class="mpopup" name="tobeclosed">
	<!-- Modal content -->
	<div class="modal-content">
	<div class="modal-header">
	<button type="button" class="closeModal" data-dismiss="modal">×</button>
	<h2 id="TopTextModal">Error</h2>
	</div>
	<div class="modal-body">
	<p id="modal-bodyText">
	</p>
	<br>
	</div>

	</div>
	</div>

	<!-- Modal popup box -->
	<div id="mpopupBox" class="mpopup" name="tobeclosed">
	<!-- Modal content -->
	<div class="modal-content">
	<div class="modal-header">
	<button type="button" class="closeModal" data-dismiss="modal">×</button>
	<h2 id="TopTextModal">Error</h2>
	</div>
	<div class="modal-body">
	<p id="modal-bodyText">
	</p>
	<br>
	</div>

	</div>
	</div>

	<!-- <div id="loading" hidden> </div> -->
	</div>
	<div id="legends" class="tabcontent">
	<ul class="graynavbarLegend" >
	<label class="label1">Project Name / Project Part / NRM Section /</label> <label class="label2">Legend</label>
	<div class="legendtime">
	<div style="display: inline-flex;">
	<label class="CreatedTime"> Created Time </label>
	<button id="sortBtnCreateDesc" class="sortbutton" onclick="sortlegends(this.id)"><i id="CreatesortDesc" class="fa fa-sort-amount-desc" aria-hidden="true" ></i> </button>
	<button id="sortBtnCreateAsc" class="sortbutton" onclick="sortlegends(this.id)"><i id="CreatesortAsc" class="fa fa-sort-amount-asc" aria-hidden="true" ></i></button>
	</div>
	<div style="display: inline-flex;">
	<label class="EditTime"> Last Edited Time </label>
	<button id="sortBtnEditDesc" class="sortbutton" onclick="sortlegends(this.id)"><i id="EditsortDesc" class="fa fa-sort-amount-desc" aria-hidden="true" ></i></button>
	<button id="sortBtnEditAsc"class="sortbutton" onclick="sortlegends(this.id)"><i id="EditsortAsc" class="fa fa-sort-amount-asc" aria-hidden="true" ></i> </button>
	</div>
	</div>
	</ul>

	</div>
	<div class="dropdown-content" id="dropdown-contentUserguideId" name="tobeclosed">
	<div id="userguidetext" >
	<div id="UserguideRibbon">
	<label id="UserGuideHeader"> User Guide Text: Before using this tool, kindly read the following carefully. </label>
	<button id="homeguidebutton" style="background-color: transparent; border: none;" onclick="ShowSectionUserguide(this)">
	<i class="fa fa-home fa-lg" id="userguideHome"></i>
	</button>

	<div class="Userguidecontainer" id="UserGuidetoggle" onclick="userguidetoggleFunction()">
	<div class="UserGuidebar1"></div>
	<div class="UserGuidebar2"></div>
	<div class="UserGuidebar3"></div>
	</div>


	<button type="button" class="closeModal" id="userguideClose" data-dismiss="modal">×</button>
	<button style="background-color: transparent; border: none;" id="userguideTableMaya" onclick="userguideMayaTableClick()">
	<i class="fa fa-th fa-lg" aria-hidden="true"></i>
	</button>
	<div id="UserGuideSideBar">
	<div id="UserGuidemenuOptions">
	<li onclick="ShowSectionUserguide(this)">1.0 Substructure</li>
	<li onclick="ShowSectionUserguide(this)">2.1 Frames</li>
	<li onclick="ShowSectionUserguide(this)">2.2 Upper Floor</li>
	<li onclick="ShowSectionUserguide(this)">2.3 Roof</li>
	<li onclick="ShowSectionUserguide(this)">2.4 Stairs</li>
	<li onclick="ShowSectionUserguide(this)">2.5 External Walls</li>
	<li onclick="ShowSectionUserguide(this)">2.6 External Openings</li>
	<li onclick="ShowSectionUserguide(this)">2.7 Internal Walls</li>
	<li onclick="ShowSectionUserguide(this)">2.8 Internal Openings</li>
	<li onclick="ShowSectionUserguide(this)">3.1 Wall Finishes</li>
	<li onclick="ShowSectionUserguide(this)">3.2 Floor Finishes</li>
	<li onclick="ShowSectionUserguide(this)">3.3 Ceiling Finishes</li>
	<li onclick="ShowSectionUserguide(this)">4.0 Fittings, Furnishings and Equipments</li>
	<li onclick="ShowSectionUserguide(this)">5.0 Services</li>
	<li onclick="ShowSectionUserguide(this)">5.1 Sanitary</li>
	<li onclick="ShowSectionUserguide(this)">7.0 Works to existing buildings</li>
	<li onclick="ShowSectionUserguide(this)">8.1 Site Preparation Works</li>
	<li onclick="ShowSectionUserguide(this)">8.2 Roads, Paths, Pavings</li>
	<li onclick="ShowSectionUserguide(this)">8.3 Soft Landscaping</li>
	<li onclick="ShowSectionUserguide(this)">8.4 Fencing, Railing, Walls</li>
	<li onclick="ShowSectionUserguide(this)">8.5 External Fixtures</li>
	<li onclick="ShowSectionUserguide(this)">8.6 External Drainage</li>
	<li onclick="ShowSectionUserguide(this)">8.7 External Services</li>
	<li onclick="ShowSectionUserguide(this)">8.8 Minor Buildings</li>

	</div>
	</div>
	</div>


	<div id="textfirstpage">
	<label style="font-weight: bold;">
	After reading this user guide, if you still encounter any issues or have suggestions for improving the system, please don't hesitate to contact the ADR team.
	</label>
	<br>
	<label style="font-style: italic;">
	This page provides general guidance on using the console. For details on a specific section, refer to the menu and select the desired section by clicking the '<i class="fa fa-bars" aria-hidden="true"></i>' icon.
	<br>
	In the top right corner, you will find this icon '<i class="fa fa-th fa-lg" aria-hidden="true"></i>', which, when clicked, takes you to a Google Spreadsheet containing a summarized table of the main AI features implemented and
	planned for the ADR console, along with the sections where they are applied.
	</label>


	<br>
	The tool is divided into two main parts:
	<br><br>
	<i class="fa fa-circle" aria-hidden="true"> </i> <label id="userguideheadings"> First Part </label>
	<br>
	<div style="margin-left: 40px;">
	The system automatically refreshes all data retrieved every 5 minutes from the MC including project names, parts, sections, and MC-T names every. However, if you notice missing information, click this button
	<span style="background-color: blue; color: white; padding: 2px 8px; border-radius: 4px; font-style: italic; margin-top: 5px;">Refresh data received from MC</span> to retrieve the latest MC updates.

	<br>
	<label id="underlinedLables">Inputs: </label>
	<br>

	<li>
	Use the three dropdown menus to select the project name, part, and section to measure.
	<br>
	<img src="static/images/Dropdowns_3.png" alt="Dropdown menus example" style="margin-top: 10px; width:240px;">
	<label style="font-style: italic; margin-left: -10px; margin-top: 50px;color: #2e83c7;"> Ensure the correct 'Project Section' is selected, as it affects the applied code. </label>
	<br>
	</li>
	<li>
	<label style="font-size: 15px;"> Document To Measure: </label>
	<br>
	Clicking a document's name opens a PDF preview in a separate tab attached to the black ribbon inside the console. Checking the box next to the document selects it as the document to measure.

	<br>
	<li>
	When retrieving documents for measurement, if multiple files share the same name on Dropbox, a popup may appear. In such cases, please rename the files in Dropbox, then return to the console and click the following icon:
	<i hidden class="fa fa-dropbox" style="color:white; background-color: #2e83c7; border-radius: 4px;"></i> to retrieve the updated documents. You can then select the desired document for measurement. Please note that this process will refresh all documents in the selected project folder.
	</li>
	<br>
	</li>
	After selecting the project, part, section, and file:
	<br>
	1)Click the Table Detect button. The system will process the PDF and automatically download the resulting Excel file.
	<br>
	2)If the automatic download does not occur, click Download Table to retrieve the Excel output manually.
	<br>
	3)The excel sheet contains a column named "page number" which helps in tracing if there any missing cells.
	<br>
	4)The project works on the approach with a 80% chance success and a 20% chance fail, depending on the quality of the pdf and whether the table conatins any overlaid shape on it.
	<br>
	5)This Project is made for 4.0 Plans.

	</div>



	</div>
	</div>


	</body>
	</html>

	<script>
	function userguidetoggleFunction() {
	var dropdownContentUserguideId = document.getElementById("dropdown-contentUserguideId");
	var UserGuideSideBar = document.getElementById('UserGuideSideBar');
	var UserGuidetoggle = document.getElementById('UserGuidetoggle');

	var isOpen = UserGuideSideBar.style.display === "block";

	// Close the dropdown when opening User Guide
	dropdownContentUserguideId.classList.remove("active");

	// Toggle the sidebar visibility properly
	if (isOpen) {
	UserGuideSideBar.style.display = "none";
	UserGuideSideBar.classList.remove('UserGuideslide-in');
	UserGuideSideBar.classList.add('UserGuideslide-out');
	UserGuidetoggle.classList.remove("change");
	} else {
	UserGuideSideBar.style.display = "block";
	UserGuideSideBar.style.width = "25%";
	UserGuideSideBar.classList.add('UserGuideslide-in');
	UserGuideSideBar.classList.remove('UserGuideslide-out');
	UserGuidetoggle.classList.add("change");
	}
	}

	function ShowSectionUserguide(element) {
	var textFirstPage = document.getElementById('textfirstpage');
	var UserGuideSideBar = document.getElementById('UserGuideSideBar');
	var UserGuidetoggle = document.getElementById('UserGuidetoggle');
	var isOpen = UserGuideSideBar.style.display === "block";



	// If clicking home and already on home, only toggle icon
	if (element.id === 'homeguidebutton' \|\| element.parentElement?.id === 'homeguidebutton') {
	if (textFirstPage.style.display === 'block') {
	return; // Exit function to prevent further toggling
	}
	hideAllSections();
	textFirstPage.style.display = 'block';
	return;
	}

	// If clicking a section, hide sidebar and update content
	if (element.tagName === 'LI') {
	hideAllSections();
	// Toggle the sidebar visibility properly
	if (isOpen) {
	UserGuideSideBar.style.display = "none";
	UserGuideSideBar.classList.remove('UserGuideslide-in');
	UserGuideSideBar.classList.add('UserGuideslide-out');
	UserGuidetoggle.classList.remove("change");
	} else {
	UserGuideSideBar.style.display = "block";
	UserGuideSideBar.style.width = "25%";
	UserGuideSideBar.classList.add('UserGuideslide-in');
	UserGuideSideBar.classList.remove('UserGuideslide-out');
	UserGuidetoggle.classList.add("change");
	}
	if (element.textContent.startsWith('4.0')) {
	document.getElementById('4_0UserGuide').style.display = 'block';
	document.getElementById('4_0UserGuide').removeAttribute('hidden');

	}
	}
	}

	// Function to hide all sections before showing the selected one
	function hideAllSections() {
	document.getElementById('textfirstpage').style.display = 'none';
	document.getElementById('4_0UserGuide').style.display = 'none';

	}

	function userguideclick(){
	document.getElementById('textfirstpage').style.display='block'
	var acc = document.getElementsByClassName("dropdown-content")[0];
	var userguideClose=document.getElementById("userguideClose")
	var i;
	acc.classList.toggle("active");

	/* Toggle between hiding and showing the active panel */
	if (acc.style.display === "block") {
	acc.style.display = "none";

	} else {
	acc.style.display = "block";
	acc.style.backgroundColor=(0, 153, 255);
	}

	close.onclick = function() {
	acc.style.display = "none";
	};

	}
	function userguideMayaTableClick(){
	var userguideTableMaya=document.getElementById('userguideTableMaya')
	window.open('https://docs.google.com/spreadsheets/d/10TjB8EbSiDHybo9YsDDzekxi8iQECpprXdqptHCZzec/edit?gid=875423041#gid=875423041');

	}

	// Start with the first tab open
	document.getElementById("pagetitle").click();

	var closeButtons = document.querySelectorAll(".closeModal");
	var allCloseDivs = document.getElementsByName("tobeclosed");

	closeButtons.forEach(function(button) {
	button.addEventListener("click", function() {
	allCloseDivs.forEach(function(div) {
	div.style.display = "none";
	});
	});
	});

	document.getElementById("myForm").addEventListener("submit", function (e) {
	e.preventDefault(); // Prevent form submission
	let isChecked = document.querySelector('input[name="measureCheckbox"]:checked') !== null;
	// let sectionNumber = projsec.value; // Ensure projsec is defined
	// let isRelvClicked = document.querySelector(".relv-item[style*='background-color']") !== null;

	let TopTextModal = document.getElementById("TopTextModal");
	TopTextModal.textContent = "Warning: Missing Inputs";
	if (!isChecked){
	PopupElement.textContent = "Please select at least one project from 'Documents to Measure' before proceeding!";
	ShowPopUp();
	return;
	}



	// If validation passes, proceed with form submission
	getData(e.target);
	});


	function getData(form) {

	document.getElementById("loading").hidden = false;

	document.getElementById('Newtablebutton').setAttribute('disabled',true);
	document.getElementById('Newtablebutton').style.cursor='not-allowed';
	document.getElementById('Newtablebutton').style.boxShadow = 'none';
	document.getElementById('Newtablebutton').style.color = 'white';
	document.getElementById('Newtablebutton').style.backgroundColor="rgb(154,152,152)";


	var formData = new FormData(form);




	// clearInterval(interval)
	val=0;
	answers=[];
	tomeasureproj='';
	pdfpath=[];
	formvalues=Object.fromEntries(formData);

	tomeasureproj=formvalues['measureCheckbox']; //proj name

	answers.push(selectedValues);
	formData.append('answers',JSON.stringify(answers))

	// Place this once in your JS before any $.ajax calls
	$.ajaxTransport("+binary", function(options, originalOptions, jqXHR) {
	if (window.FormData && (
	(options.dataType && options.dataType === "binary") \|\|
	(options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) \|\|
	(window.Blob && options.data instanceof Blob)))
	)) {
	return {
	send: function(headers, callback) {
	const xhr = new XMLHttpRequest();
	xhr.open(options.type, options.url, options.async ?? true,
	options.username, options.password);
	// Apply custom fields like responseType
	xhr.responseType = options.responseType \|\| "blob";
	if (options.xhrFields) {
	for (const field in options.xhrFields) {
	xhr[field] = options.xhrFields[field];
	}
	}
	xhr.onload = function() {
	// Package the response as the declared dataType
	const data = {};
	data[options.dataType] = xhr.response;
	callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
	};
	xhr.send(options.data \|\| null);
	},
	abort: function() {
	jqXHR.abort();
	}
	};
	}
	});

	$.ajax({
	// type: "POST",
	// url: "/savedetectedtables/",
	// // contentType: "application/json", // set content type header to use Flask response.get_json()
	// data: formData,// convert data/object to JSON to send
	// processData: false, // Prevent jQuery from automatically processing the data
	// contentType: false,
	// xhr: function() {
	// const x = $.ajaxSettings.xhr();
	// x.responseType = "blob"; // set blob mode
	// return x;
	// },
	url: "/savedetectedtables/",
	method: "POST",
	data: formData,
	processData: false,
	contentType: false,
	dataType: 'binary', // match your transport
	responseType: 'blob', // tell the transport to use blob

	success: function(blob) {
	console.log(blob);
	// downloadPdf(data,'detected_tables.xlsx')
	console.log('typeof(blob) = ',typeof(blob))

	if (!blob \|\| blob.size === 0) {
	// empty response → show your “no tables” popup
	PopupElement.textContent = "No tables detected in the document.";
	ShowPopUp();
	return;
	}
	else{
	console.log("gowa el else")
	downloadPdf(blob,'detected_tables.xlsx')

	}





	},
	error: function(err) {
	var TopTextModal = document.getElementById("TopTextModal");
	TopTextModal.textContent='Error'
	PopupElement.textContent='Error occured. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
	ShowPopUp();

	}
	})
	.done(function(data){
	console.log(data)
	document.getElementById("loading").hidden = true;
	document.getElementById('Newtablebutton').removeAttribute('disabled');
	document.getElementById('Newtablebutton').style.cursor='pointer';
	document.getElementById('Newtablebutton').style.color = 'white';
	document.getElementById('Newtablebutton').style.backgroundColor="#16c72e";
	document.getElementById('Newtablebutton').style.padding='10px 102px';
	document.getElementById('Newtablebutton').addEventListener('mouseover',function(){
	document.getElementById('Newtablebutton').style.color='black';
	document.getElementById('Newtablebutton').style.boxShadow=' 0 0 8px 2px #16c72e';
	})
	document.getElementById('Newtablebutton').addEventListener('mouseout',function(){
	document.getElementById('Newtablebutton').style.color='white';
	document.getElementById('Newtablebutton').style.boxShadow='none';
	});

	// downloadPdf(data,'detected_tables.xlsx')
	// downloadPdf(blob,'detected_tables.xlsx')
	// document.getElementById('downloadbutton').hidden = false;
	document.getElementById('downloadbutton').style.display = 'inline-block';
	// document.getElementById('downloadbutton').onclick=downloadPdf(data,'detected_tables.xlsx')
	const btn = document.getElementById('downloadbutton');
	btn.addEventListener('click', () => {
	downloadPdf(data, 'detected_tables.xlsx');
	});


	})


	};




	document.getElementById('Newtablebutton').onclick= function()
	{
	if (!measSelect.value) {
	measSelect.style.boxShadow = '0 0 8px 2px rgb(255, 0, 0)';
	measSelect.setAttribute("required", "")
	}
	}
	document.getElementById('Newtablebutton').addEventListener('click',function(){
	if (!document.getElementsByClassName('selectionsProj')[0].value)
	document.getElementsByClassName('selectionsProj')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
	if (!document.getElementsByClassName('selectionsProjp')[0].value)
	document.getElementsByClassName('selectionsProjp')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
	if (!document.getElementsByClassName('selectionsProjs')[0].value)
	document.getElementsByClassName('selectionsProjs')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
	//___________________________________________________________________________________________________________
	//___________________________________________________________________________________________________________
	if (document.getElementById('imgContainer')) {
	document.getElementById('imgContainer').innerHTML = '';
	}
	});
	var mpopup = document.getElementById('mpopupBox');
	// Select close action element
	// var close = document.getElementsByClassName("closeModal")[0];
	function ShowPopUp(){
	// Open modal
	mpopup.style.display = "block";
	}
	// Close modal once close element is clicked
	// close.onclick = function() {
	// mpopup.style.display = "none";
	// };
	// Close modal when user clicks outside of the modal box
	window.onclick = function(event) {
	if (event.target == mpopup) {
	mpopup.style.display = "none";
	}
	};
	// closeDialog.onclick = function() {
	// dialog_container.style.display = "none";
	// };

	var dialog_container = document.getElementById('dialog-container');
	// Select close action element
	// var closeDialog = document.getElementsByClassName("closeModal")[0];
	function ShowPopUpWarning(){
	// Open modal
	dialog_container.style.display = "block";
	}
	// Close modal once close element is clicked
	// closeDialog.onclick = function() {
	// console.log()
	// dialog_container.style.display = "none";
	// };
	// Close modal when user clicks outside of the modal box
	window.onclick = function(event) {
	if (event.target == dialog_container) {
	dialog_container.style.display = "none";
	}
	};

	PopupElement=document.getElementById('modal-bodyText');

	var ActiveSections=['4.0']

	var menuItems = document.querySelectorAll("#UserGuidemenuOptions li");

	menuItems.forEach(function (item) {
	// Extract the section number (first part of the text)
	var sectionNumber = item.textContent.trim().split(" ")[0];

	// If the section is not in ActiveSections, disable it
	if (!ActiveSections.includes(sectionNumber)) {
	item.id = "disabledSection"; // Assign ID
	item.style.color = "#bdbcbc"; // Greyed-out text
	item.style.cursor = "not-allowed"; // Change cursor
	item.onclick = null; // Disable clicking
	}
	});


	function updateProgressBar(value) {
	const progressBar = document.getElementById('progress');
	progressBar.style.width = value + '%';
	progressBar.innerText = Math.round(value) + '%';
	}

	function redirectOmarSearch(){
	$toggle.classList.toggle("change");
	var isOpen = $mySidebar.classList.contains('slide-out');
	$mySidebar.setAttribute('class', isOpen ? 'slide-in' : 'slide-out');
	w3_close()

	}

	sectionSelect=document.getElementById('section-select');
	$(sectionSelect).select2({
	closeOnSelect: true,
	width:'20ch'

	});
	// add project names to first dropdown from google sheet
	firstdropdown=document.getElementsByClassName('selectionsProj')[0];
	seconddropdown=document.getElementsByClassName('selectionsProjp')[0];
	thirddropdown=document.getElementsByClassName('selectionsProjs')[0];


	$(firstdropdown).select2({
	placeholder:'Projects',
	closeOnSelect: true,
	width:'51ch'

	});

	$(seconddropdown).select2({
	placeholder:'Project Parts',
	closeOnSelect: true,
	width:'51ch'
	});
	$(thirddropdown).select2({
	placeholder:'Sections',
	closeOnSelect: true,
	width:'51ch'
	});
	var measSelect = document.getElementById("measureselectid");

	// var relvSelect = document.getElementById("relvselectid");
	document.getElementById("all").style.display = "block";

	PrjNamesArray=[];
	PrjPartsArray=[];
	PrjSectionsArray=[];
	var partsArrwithID=[];
	var firstDpwnValue;
	var prjids=[]

	displayprjnames()
	function displayprjnames(){

	var eventSource = new EventSource('/getprojectnames/');
	document.getElementById('progressBar').removeAttribute('hidden')
	document.getElementById('progressBar').style.display='block';
	eventSource.onmessage = function (event) {
	var progress = parseInt(event.data); // Progress value from Flask
	if (progress <= 100) {
	console.log(progress); // Log progress for debugging
	document.getElementById('progress').style.width = progress + '%';
	document.getElementById('progress').textContent = progress + '%';
	} else {
	// Final data handling when progress reaches 100%
	console.log('Process completed!');

	// Parse and handle the final response data (documentsToMeasure, RelevantDocuments, extracted_path)
	var data = JSON.parse(event.data); // Assuming the result is a JSON array
	console.log('Final result:', data);
	// You can use this data to update your page or handle it accordingly

	eventSource.close(); // Close the connection when finished
	document.getElementById('progressBar').setAttribute('hidden',true)
	document.getElementById('progressBar').style.display='none';
	document.getElementById('progress').style.width = '0%'; // Reset progress for the next process
	document.getElementById('progress').textContent = '0%';

	document.getElementById("all").style.display = "none";
	prjids=data[1];
	var op0 = document.createElement("OPTION") ;
	op0.text= 'Projects'
	op0.value= "";
	op0.hidden=true;
	firstdropdown.add(op0);
	for (let i=0;i<data[0].length;i++)
	{
	opt=document.createElement("option");
	opt.textContent=data[0][i];
	opt.text=data[0][i];
	firstdropdown.append(opt);
	PrjNamesArray.push(data[0][i]);
	}

	}
	}


	eventSource.onerror = function (error) {
	console.error('Error occurred:', error);
	eventSource.close(); // Close on error
	PopupElement.textContent='Error occured while retrieving the Project Names. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
	ShowPopUp();
	};
	}
	/Get chosen value and send to flask to get project parts/

	$(firstdropdown).on("change", function (e) {
	console.log('clickeds')
	firstDpwnValue=firstdropdown.value;
	seconddropdown.innerHTML='';
	var op0 = document.createElement("OPTION") ;
	op0.text= 'Project Part'
	op0.value= "";
	op0.hidden=true;
	seconddropdown.add(op0);
	var ii, L = seconddropdown.options.length - 1;
	for(ii = L; ii >= 0; ii--) {
	if (seconddropdown.options[ii].value)
	seconddropdown.remove(ii);
	}

	displayprojparts(prjids[(firstdropdown.selectedIndex)-1]);
	})
	var partsArrIDsonly=[]
	function displayprojparts(val){
	document.getElementById("all").style.display = "block";
	console.log(val)
	$.get('/getprojectparts/'+JSON.stringify(val))
	.success(function(data){
	document.getElementById("all").style.display = "none";
	partsArrwithID= data[0];
	partsArrIDsonly= data[1];

	for (let i=0;i<data[0].length;i++)
	{
	opt=document.createElement("option");
	opt.value=data[0][i];
	opt.text=data[0][i];
	seconddropdown.append(opt);
	PrjPartsArray.push(data[0][i]);

	}

	})
	.error(function(jqXHR, textStatus, errorThrown) {
	PopupElement.textContent='Error occured while retrieving the Project Parts. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
	ShowPopUp();
	});
	}
	$(seconddropdown).on("change", function (e) {
	thirddropdown.innerHTML='';
	var op0 = document.createElement("OPTION") ;
	op0.text= 'Section'
	op0.value= "";
	op0.hidden=true;
	thirddropdown.add(op0);
	displayprojsections(prjids[(firstdropdown.selectedIndex)-1],partsArrIDsonly[(seconddropdown.selectedIndex)-1]);
	})
	function isValueNotInDropdown(dropdown, value) {
	// const dropdown = document.getElementById(dropdownId);
	const values = Array.from(dropdown.options).map(option => option.value);
	return !values.includes(value); // Check if the value is not in dropdown values
	}
	function displayprojsections(projectid,Partid){
	console.log(seconddropdown.selectedIndex)
	document.getElementById("all").style.display = "block";
	if (measSelect && measSelect.hasChildNodes()) {
	while (measSelect.firstChild) {
	measSelect.removeChild(measSelect.firstChild);
	}
	}

	// if (relvSelect && relvSelect.hasChildNodes()) {
	// while (relvSelect.firstChild) {
	// relvSelect.removeChild(relvSelect.firstChild);
	// }
	// }
	$.get('/getprojectsections/' + JSON.stringify([projectid, Partid]))
	.done(function(data) {
	document.getElementById("all").style.display = "none";

	for (let i = 0; i < data.length; i++) {
	let valueDoesNotExist = isValueNotInDropdown(thirddropdown, data[i]);

	if (valueDoesNotExist) {
	let opt = document.createElement("option");
	opt.value = data[i];
	opt.text = data[i];

	let isActive = false;
	for (let d = 0; d < ActiveSections.length; d++) {
	if (data[i].startsWith(ActiveSections[d])) {
	isActive = true;
	break; // Exit loop early if active
	}
	}

	if (!isActive) {
	opt.style.color = '#bdbcbc';
	opt.style.cursor = 'not-allowed';
	opt.setAttribute('disabled', true);
	}

	thirddropdown.append(opt);
	PrjSectionsArray.push(data[i]);
	}
	}
	})
	.fail(function(jqXHR, textStatus, errorThrown) {
	PopupElement.textContent='Error occured while retrieving the Project Sections. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
	ShowPopUp();
	});

	}

	function filterFunction(id) {
	var input, filter, ul, li, a, i;
	input = document.getElementById(id);
	filter = input.value.toUpperCase();
	if (id.toString().startsWith('tomeasure'))
	a = document.querySelectorAll("#measureContainer .measure-item");

	// a = document.getElementById("measureselectid").children;
	// else
	// // a = document.getElementById("relvselectid").children;
	// a = document.querySelectorAll("#relvselectid .relv-item");
	// a = div.getElementsByTagName("option");
	for (i = 0; i < a.length; i++) {
	txtValue = a[i].textContent \|\| a[i].innerText;
	if (txtValue.toUpperCase().indexOf(filter) > -1) {
	a[i].style.display = "";
	} else {
	a[i].style.display = "none";
	}
	}
	}

	function getproj(){


	var proj = document.getElementsByClassName("selectionsProj")[0];
	var projectVal=proj.value.toString() //selected project

	var inputs = document.getElementsByTagName("select")[1]; //second dropdown(project part)
	var p=document.getElementById("selectionsProjpid") //project part

	var sections = document.getElementsByClassName("selectionsProjs")[0];

	var eventSource = new EventSource('/getmethod/' + JSON.stringify(projectVal));
	document.getElementById('progressBar').removeAttribute('hidden')
	document.getElementById('progressBar').style.display='block';
	eventSource.onmessage = function (event) {
	var progress = parseInt(event.data); // Progress value from Flask
	if (progress <= 100) {
	console.log(progress); // Log progress for debugging
	document.getElementById('progress').style.width = progress + '%';
	document.getElementById('progress').textContent = progress + '%';
	} else {
	// Final data handling when progress reaches 100%
	console.log('Process completed!');

	// Parse and handle the final response data (documentsToMeasure, RelevantDocuments, extracted_path)
	var data = JSON.parse(event.data); // Assuming the result is a JSON array
	console.log('Final result:', data);
	// You can use this data to update your page or handle it accordingly

	eventSource.close(); // Close the connection when finished
	document.getElementById('progressBar').setAttribute('hidden',true)
	document.getElementById('progressBar').style.display='none';
	document.getElementById('progress').style.width = '0%'; // Reset progress for the next process
	document.getElementById('progress').textContent = '0%';


	document.getElementById('refreshDropboxButtonID').style.display = "block";
	document.getElementById("all").style.display = "none";
	// if (sections.value.startsWith('3.2') \|\| sections.value.startsWith('3.3') \|\| sections.value.startsWith('2.7') ){
	// document.getElementById('dxfdiv').removeAttribute('hidden');
	// document.getElementById('pdftodxfFile').setAttribute('required',true)
	// }

	// else{
	// document.getElementById('dxfdiv').setAttribute('hidden',true)
	// }

	extracted_path=data[2]
	var docsToMeasure=data[0]; //
	// var relvDocs=data[1]
	var projname = document.getElementsByClassName("selectionsProj")[0];
	var projpart = document.getElementsByClassName("selectionsProjp")[0];
	var projsec = document.getElementsByClassName("selectionsProjs")[0];

	var meas = document.getElementById("measureCheckbox") ;
	// var relv = document.getElementById("relvdiv") ;
	const measids=[];
	// const relvids=[];
	const measoptns=[];

	// var measSelect = document.getElementById("measureselectid");
	var measSelect = document.getElementById("measureContainer");

	// var relvSelect = document.getElementById("relvselectid");
	// var levelcheckbox= document.getElementById("levelcheckbox");


	measSelect.removeAttribute("hidden");
	// relvSelect.removeAttribute("hidden");
	if (measSelect && measSelect.hasChildNodes()) {
	while (measSelect.firstChild) {
	measSelect.removeChild(measSelect.firstChild);
	}
	}

	var optn2 = document.createElement("div"); // Use a <div> instead of <option>
	optn2.textContent = 'Select project to measure'; // Set text content
	optn2.hidden = true; // Keep it hidden
	optn2.id = 'hidden';

	measSelect.appendChild(optn2); // Append to div instead of .add()
	document.getElementById("hidden").required = true;


	// if (relvSelect && relvSelect.hasChildNodes()) {
	// while (relvSelect.firstChild) {
	// relvSelect.removeChild(relvSelect.firstChild);
	// }
	// }
	const nameSet = new Set(); // To track unique names
	// const nameSetRelv = new Set(); // To track unique names

	// Action foconst nameSet = new Set(); // To track unique names

	// Action for when the checkbox is clicked
	function handleLabelClick(event) {
	let selectedLabel = event.target.textContent;
	console.log("Label clicked: ", selectedLabel);

	// Reset background only for items whose checkbox is not checked
	document.querySelectorAll(".measure-item").forEach(item => {
	const checkbox = item.querySelector('input[type="checkbox"]');
	if (!checkbox.checked) {
	item.style.backgroundColor = '';
	}
	});

	// Optionally highlight the clicked div (even though its checkbox isn’t selected)
	const clickedDiv = event.target.closest(".measure-item");
	clickedDiv.style.backgroundColor = '#919592';

	// Show loading spinner
	document.getElementById("all").style.display = "block";

	fetch('/getdropboxurl/' + JSON.stringify(selectedLabel), {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ filename: "your_pdf_filename_here.pdf" }) // ← Replace with real value if dynamic
	})
	.then(response => response.blob())
	.then(blob => {
	document.getElementById("all").style.display = "none";
	const url = URL.createObjectURL(blob);
	addIframeTab(selectedLabel, url);
	})
	.catch(function (jqXHR, textStatus, errorThrown) {
	PopupElement.textContent = 'Error occurred while retrieving the Dropbox URL. Refresh and try again. If the error continues, please contact the ADR team to fix it.';
	ShowPopUp();
	});
	}
	selectedValues=[]
	function handleCheckboxChange(event) {
	// Uncheck all checkboxes before checking the current one
	// document.querySelectorAll('input[name="measureCheckbox"]').forEach(checkbox => {
	// checkbox.checked = false;
	// });

	// Check the current checkbox
	// event.target.checked = true;

	// // Action when checkbox is clicked (e.g., log the selected project)
	// let selectedValue = event.target.value;
	// measSelect.value=selectedValue;
	// console.log("Selected project:", selectedValue);

	const selectedCheckboxes = Array.from(document.querySelectorAll('input[name="measureCheckbox"]:checked'));
	selectedValues = selectedCheckboxes.map(cb => cb.value);
	measSelect.value = selectedValues.join(', ');


	console.log("Selected projects:", selectedValues);

	pdfname = selectedValues.length === 1 ? selectedValues[0] : selectedValues.join(', ');


	// Highlight the selected item
	document.querySelectorAll(".measure-item").forEach(item => {
	const checkbox = item.querySelector('input[name="measureCheckbox"]');
	item.style.backgroundColor = checkbox.checked ? '#d3f8d3' : '';
	});
	console.log("Selected projects:", selectedValues);

	// Highlight the selected item
	// document.querySelectorAll(".measure-item").forEach(item => {
	// item.style.backgroundColor = ''; // Reset background color for all items
	// });
	// event.target.closest(".measure-item").style.backgroundColor = '#d3f8d3'; // Highlight the selected item



	// Show alert immediately to prompt the user
	// if (projsec.value.startsWith('3.2') \|\| projsec.value.startsWith('3.3') \|\| projsec.value.startsWith('2.7')) {
	// // downloadPdf(selectedValue);
	// downloadPdf(selectedValue,'DXF_File_:'+selectedValue)
	// // window.alert("Measure the purple shape drawn on the PDF using Foxit Reader, Bluebeam, or any other external tool, then enter its area and perimeter in your desired scale.");
	// }
	// else{
	// window.alert("Measure the purple shape drawn on the PDF using Foxit Reader, Bluebeam, or any other external tool, then enter its area and perimeter in your desired scale.");
	// }
	canvasimg='';
	ry=[[]];
	// levelcheckbox.checked=false;
	// pdfname=selectedValue;
	pdfname=selectedValues;
	measSelect.style.boxShadow='none';

	console.log(projsec.value)
	// if (!(projsec.value.startsWith('2.6') \|\| projsec.value.startsWith('2.8'))) {
	// document.getElementById("all").style.display = "block";

	// pixelArr=[projname.value, projpart.value,projsec.value, pdfname]
	// var eventSource = new EventSource('/pixelimg/' + JSON.stringify(pixelArr));
	// document.getElementById('progressBar').removeAttribute('hidden')
	// document.getElementById('progressBar').style.display='block';
	// eventSource.onmessage = function (event) {
	// var progress = parseInt(event.data); // Progress value from Flask
	// if (progress <= 100) {
	// console.log(progress); // Log progress for debugging
	// document.getElementById('progress').style.width = progress + '%';
	// document.getElementById('progress').textContent = progress + '%';
	// } else {
	// var data = JSON.parse(event.data); // Assuming the result is a JSON array
	// eventSource.close(); // Close the connection when finished

	// document.getElementById('progressBar').setAttribute('hidden',true)
	// document.getElementById('progressBar').style.display='none';
	// document.getElementById('progress').style.width = '0%'; // Reset progress for the next process
	// document.getElementById('progress').textContent = '0%';
	// document.getElementById("all").style.display = "none";
	// // Display link or any additional data if needed
	// window.open(data[2]);
	// downloadPdf(pdfname,'Pixel_Conversion_File_:'+pdfname)
	// document.getElementById("all").style.display = "none";

	// document.getElementById('Newtablebutton').onclick= function()
	// {
	// if (!areaRatio.value){
	// if (!(projsec.value.startsWith('3.2')) & !(projsec.value.startsWith('2.8')) & !(projsec.value.startsWith('2.6')) & !(projsec.value.startsWith('3.3')) & !(projsec.value.startsWith('2.7')) )
	// areaRatio.style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
	// }
	// if (!prmRatio.value) {
	// if (!(projsec.value.startsWith('2.6') \|\| projsec.value.startsWith('2.8'))) {
	// prmRatio.style.boxShadow = '0 0 8px 2px rgb(255, 0, 0)';
	// }
	// }

	// }
	// document.getElementById('radiosColors').removeAttribute('hidden');
	// var scalelbl= document.createElement("label");
	// scalelbl.innerText='Scale Document';
	// scalelbl.id='measureLabel';
	// var br1= document.createElement("br");
	// var areadiv=document.createElement("div");
	// areadiv.id='areadiv'
	// var areaRatiolbl= document.createElement("label");
	// areaRatiolbl.innerText='Area:'
	// areaRatiolbl.id='radiolbl';

	// var areaRatio= document.createElement("input");
	// areaRatio.type='number';
	// areaRatio.id='arealvlinput';
	// areaRatio.className='lvlinput';
	// areaRatio.name='areaRatio';
	// areaRatio.style.marginLeft='78px';
	// areaRatio.style.textAlign='right';
	// areaRatio.step=".0000001";
	// areaRatio.min = "0"; // Allow only positive numbers (>= 0)
	// if( projsec.value.startsWith('3.2') \|\| projsec.value.startsWith('3.3') \|\| projsec.value.startsWith('2.1') \|\| projsec.value.startsWith('2.7')){
	// areaRatio.setAttribute('disabled',true)
	// areaRatio.style.cursor='not-allowed';
	// areaRatio.style.backgroundColor='rgba(101, 101, 101, 0.27)'
	// document.getElementById('selectunitA').setAttribute('disabled',true)
	// document.getElementById('selectunitA').style.cursor='not-allowed';
	// document.getElementById('selectunitA').style.backgroundColor='rgba(101, 101, 101, 0.27)'
	// }

	// else{ // section 1.0
	// areaRatio.removeAttribute('disabled')
	// areaRatio.style.cursor='pointer';
	// document.getElementById('selectunitA').removeAttribute('disabled')
	// document.getElementById('selectunitA').style.cursor='pointer';
	// }
	// areaRatio.addEventListener('change',function(){
	// areaRatio.value=(Number(areaRatio.value)).toFixed(7)
	// areaRatio.style.boxShadow='none';
	// })
	// areaRatio.required=true;
	// selectunitA=document.getElementById('selectunitA')
	// selectunitA.removeAttribute('hidden')

	// areadiv.append(areaRatiolbl,areaRatio,selectunitA)
	// var br2= document.createElement("br");
	// var br3= document.createElement("br");
	// var prmdiv=document.createElement("div");
	// prmdiv.id='prmdiv'
	// var prmRatiolbl= document.createElement("label");
	// prmRatiolbl.innerText='Perimeter:'
	// prmRatiolbl.id='radiolbl';

	// var prmRatio= document.createElement("input");
	// prmRatio.type='number';
	// prmRatio.id='perimlvlinput';
	// prmRatio.className='lvlinput';
	// prmRatio.name='prmRatio';
	// prmRatio.style.textAlign='right';
	// prmRatio.style.marginLeft='49px';
	// prmRatio.step=".0000001";
	// prmRatio.min = "0"; // Allow only positive numbers (>= 0)
	// prmRatio.addEventListener('change',function(){
	// prmRatio.value=(Number(prmRatio.value)).toFixed(7)
	// prmRatio.style.boxShadow='none';
	// })
	// prmRatio.required=true;
	// selectunitP=document.getElementById('selectunitP')
	// selectunitP.removeAttribute('hidden')

	// prmdiv.append(prmRatiolbl, prmRatio,selectunitP)
	// var ratiosdiv= document.getElementById("ratios");
	// ratiosdiv.innerHTML='';
	// ratiosdiv.append(scalelbl);
	// ratiosdiv.append(br1);
	// ratiosdiv.append(areadiv)
	// ratiosdiv.append(prmdiv)
	// areainpixels=data[0];
	// prminpixels=data[1];


	// if( projsec.value.startsWith('2.8') \|\| projsec.value.startsWith('2.6')) {
	// areaRatio.setAttribute('disabled',true)
	// areaRatio.style.cursor='not-allowed';
	// areaRatio.style.backgroundColor='rgba(101, 101, 101, 0.27)'
	// document.getElementById('selectunitA').setAttribute('disabled',true)
	// document.getElementById('selectunitA').style.cursor='not-allowed';
	// document.getElementById('selectunitA').style.backgroundColor='rgba(101, 101, 101, 0.27)'

	// prmRatio.setAttribute('disabled',true)
	// prmRatio.style.cursor='not-allowed';
	// prmRatio.style.backgroundColor='rgba(101, 101, 101, 0.27)'
	// document.getElementById('selectunitP').setAttribute('disabled',true)
	// document.getElementById('selectunitP').style.cursor='not-allowed';
	// document.getElementById('selectunitP').style.backgroundColor='rgba(101, 101, 101, 0.27)'
	// }
	// };
	// }


	// eventSource.onerror = function (error) {
	// console.error('Error occurred:', error);
	// eventSource.close(); // Close on error
	// PopupElement.textContent='Error occured while uploading the pdf to the Dropbox. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
	// ShowPopUp();
	// };

	// selectunitA.addEventListener('change',function(){
	// value=document.getElementById('selectunitA').value
	// if (value=='mm2')
	// ratioAunit=1000000;
	// else
	// ratioAunit=1;
	// })
	// selectunitP.addEventListener('change',function(){
	// value=document.getElementById('selectunitP').value
	// if (value=='mm'){
	// ratioPunit=1000;
	// }
	// else
	// ratioPunit=1;

	// })
	// // }
	// // for 2.8 multiple pdfs
	// // else{
	// // pdfnames=getSelectValues(elem)
	// // }
	// }
	// else{
	// document.getElementById('radiosColors').removeAttribute('hidden')
	// }
	}
	// Action for when the label is clicked (no checkbox change)
	// function handleLabelClick(event) {
	// let selectedLabel = event.target.textContent;
	// console.log("Label clicked: ", selectedLabel);

	// // Reset background only for items whose checkbox is not checked
	// document.querySelectorAll(".measure-item").forEach(item => {
	// const checkbox = item.querySelector('input[type="checkbox"]');
	// if (!checkbox.checked) {
	// item.style.backgroundColor = '';
	// }
	// });

	// // Optionally highlight the clicked div (even though its checkbox isn’t selected)
	// const clickedDiv = event.target.closest(".measure-item");
	// clickedDiv.style.backgroundColor = '#919592';

	// // Show loading spinner
	// document.getElementById("all").style.display = "block";

	// fetch('/getdropboxurl/' + JSON.stringify(selectedLabel), {
	// method: 'POST',
	// headers: { 'Content-Type': 'application/json' },
	// body: JSON.stringify({ filename: "your_pdf_filename_here.pdf" }) // ← Replace with real value if dynamic
	// })
	// .then(response => response.blob())
	// .then(blob => {
	// document.getElementById("all").style.display = "none";
	// const url = URL.createObjectURL(blob);
	// // addIframeTab(selectedLabel, url);
	// })
	// .catch(function (jqXHR, textStatus, errorThrown) {
	// PopupElement.textContent = 'Error occurred while retrieving the Dropbox URL. Refresh and try again. If the error continues, please contact the ADR team to fix it.';
	// ShowPopUp();
	// });
	// }


	for (let i = 0; i < docsToMeasure.length; i++) {
	let name = docsToMeasure[i][0];

	// Create div for the measure item
	let div = document.createElement("div");
	div.className = "measure-item";

	// Create the checkbox
	let checkbox = document.createElement("input");
	checkbox.type = "checkbox";
	checkbox.name = "measureCheckbox";
	checkbox.value = name;

	// Only clicking checkbox checks it and triggers handler
	checkbox.onclick = function (e) {
	e.stopPropagation(); // prevent bubbling to div
	handleCheckboxChange(e);
	};

	// Create the label
	let label = document.createElement("label");
	label.textContent = name;

	// Label click does not check the checkbox
	label.onclick = function (e) {
	e.stopPropagation(); // just to be safe
	handleLabelClick(e, name);
	};

	// Div click also doesn't check the checkbox
	div.onclick = function (e) {
	handleLabelClick(e, name);
	};

	// Assemble
	div.appendChild(checkbox);
	div.appendChild(label);
	measSelect.appendChild(div);

	// Handle duplicates
	if (nameSet.has(name)) {
	label.style.color = "red";
	document.getElementById("TopTextModal").textContent = 'Error: Duplicates Error';
	PopupElement.textContent = 'Duplicate project names were detected while retrieving the project PDFs. Please visit Dropbox and rename the relevant files that you will be working on to ensure each project has a unique name. Once the renaming is complete, return to the console and click on the Dropbox icon to retrieve the updated project names.';
	ShowPopUp();
	} else {
	nameSet.add(name);
	}
	}


	// for (let i = 0; i < relvDocs.length; i++) {
	// let name = relvDocs[i][0];

	// // Create div for the measure item
	// let divRelv = document.createElement("div");
	// divRelv.className = "relv-item";

	// // Create the checkbox
	// let checkboxRelv = document.createElement("input");
	// checkboxRelv.type = "checkbox";
	// checkboxRelv.name = "measureCheckboxRelv";
	// checkboxRelv.value = name;

	// // Create the label
	// let label = document.createElement("label");
	// label.textContent = name;

	// // Shared click handler
	// function checkboxRelvClick(event) {
	// event.stopPropagation(); // Prevent event bubbling issues

	// // Get the parent div from the event target
	// const container = event.currentTarget;

	// // Get the checkbox inside this container
	// const checkbox = container.querySelector('input[type="checkbox"]');

	// // Uncheck all checkboxes
	// document.querySelectorAll('input[name="measureCheckboxRelv"]').forEach(cb => cb.checked = false);

	// // Check the clicked one
	// checkbox.checked = true;

	// const relevantDocumentName = checkbox.value;
	// console.log("Item clicked: ", relevantDocumentName);

	// if (projsec.value.startsWith('2.8') \|\| projsec.value.startsWith('2.6')) {
	// doorSchedulePDF = relevantDocumentName;
	// console.log(doorSchedulePDF);
	// }

	// // Highlight selection
	// document.querySelectorAll(".relv-item").forEach(item => {
	// item.style.backgroundColor = '';
	// });
	// container.style.backgroundColor = '#d3f8d3';
	// document.getElementById('relvselectid').style.boxShadow = '';
	// relvSelect.value = relevantDocumentName;
	// }

	// // Assign the click event to the container div
	// divRelv.onclick = checkboxRelvClick;

	// // Also attach to checkbox specifically to prevent bubbling issue
	// checkboxRelv.onclick = (e) => {
	// e.stopPropagation();
	// divRelv.click(); // Trigger div's click logic
	// };

	// divRelv.appendChild(checkboxRelv);
	// divRelv.appendChild(label);

	// relvSelect.appendChild(divRelv);

	// if (nameSetRelv.has(name)) {
	// label.style.color = "red";
	// } else {
	// nameSetRelv.add(name);
	// }
	// }


	// relvids.push(relvSelect);
	measids.push(measSelect);

	// document.addEventListener("click", function(event) {
	// const iframe = document.getElementById("pdfFrame");
	// if (!iframe.contains(event.target)) {
	// const iframe = document.getElementById("pdfFrame");
	// iframe.style.display = "none";
	// }
	// });
	document.getElementById('Newtablebutton').onclick= function()
	{
	if (!measSelect.value) {
	measSelect.style.boxShadow = '0 0 8px 2px rgb(255, 0, 0)';
	measSelect.setAttribute("required", "")
	}

	// if (!relvSelect.value) {
	// if (sectionNumber.startsWith('2.8') \|\| sectionNumber.startsWith('2.6')) {
	// relvSelect.style.boxShadow = '0 0 8px 2px rgb(255, 0, 0)';
	// relvSelect.setAttribute("required", "")
	// }
	// }


	}

	}


	if (document.getElementById('arealvlinput')){
	if( projsec.value.startsWith('3.2') \|\| projsec.value.startsWith('2.8') \|\| projsec.value.startsWith('2.6') \|\| projsec.value.startsWith('3.3') \|\| projsec.value.startsWith('2.1') \|\| projsec.value.startsWith('2.7')){
	document.getElementById('arealvlinput').setAttribute('disabled',true)
	document.getElementById('selectunitA').setAttribute('disabled',true)
	}
	else{ // section 1.0
	document.getElementById('arealvlinput').removeAttribute('disabled')
	document.getElementById('selectunitA').removeAttribute('disabled')
	}
	}



	// if (!(thirddropdown.value.startsWith('2.8')\|\|thirddropdown.value.startsWith('2.6')) ) {
	// document.getElementById("relvselectid").classList.add("disabled");
	// document.getElementById("relvoverlay").style.display = "block";
	// } else {
	// document.getElementById("relvselectid").classList.remove("disabled");
	// document.getElementById("relvoverlay").style.display = "none";
	// }

	};

	eventSource.onerror = function (error) {
	console.error('Error occurred:', error);
	eventSource.close(); // Close on error
	PopupElement.textContent='Error occured while retrieving the Project Names. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
	ShowPopUp();
	};

	}
	//___________________________________________________________________________________________________________
	//___________________________________________________________________________________________________________
	function downloadPdf(blob,downloadPDFName) {

	// const url = URL.createObjectURL(blob);
	// var link = document.createElement('a');
	// link.href = url;
	// link.download = downloadPDFName;
	// link.dispatchEvent(new MouseEvent('click'));


	const url = URL.createObjectURL(blob);
	const a = document.createElement('a');
	a.style.display = 'none';
	a.href = url;
	a.download = downloadPDFName;
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
	URL.revokeObjectURL(url);

	}
	/Menu bar icon mySidebar and Toggle/
	var $mySidebar = document.getElementById('mySidebar');
	var $toggle = document.getElementById('toggle');
	$toggle.addEventListener('click', function() {

	var isOpen = $mySidebar.classList.contains('slide-in');
	w3_open();
	$mySidebar.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
	$toggle.classList.toggle("change");


	if ($mySidebar.classList.contains('slide-out')){
	w3_close()
	}
	});

	function w3_open() {
	document.getElementById("home").style.marginLeft = "25%";
	document.getElementById("legends").style.marginLeft = "25%";

	document.getElementById("home").style.transition= '0.8s';
	document.getElementById("legends").style.transition= '0.8s';

	document.getElementById("mySidebar").style.width = "25%";
	document.getElementById("mySidebar").style.display = "block";
	}

	function w3_close() {
	document.getElementById("home").style.marginLeft = "0%";
	document.getElementById("legends").style.marginLeft = "0%";
	document.getElementById("home").style.transition= '1.5s'
	document.getElementById("legends").style.transition= '1.5s'
	document.getElementById("mySidebar").style.display = "none";
	}
	function openTab(evt, tabname) {
	var i, tabcontent, tablinks;



	// Hide all tab contents
	tabcontent = document.getElementsByClassName("tabcontent");
	for (i = 0; i < tabcontent.length; i++) {
	tabcontent[i].style.display = "none";
	}

	// Remove "active" class from all tab buttons
	tablinks = document.getElementsByClassName("tablinks");
	for (i = 0; i < tablinks.length; i++) {
	tablinks[i].className = tablinks[i].className.replace(" active", "");
	}

	// Show selected tab content and mark button as active
	var tab = document.getElementById(tabname);
	if (tab) {
	tab.style.display = "block";
	tab.className += " active";
	// evt.currentTarget.className += " active";
	} else {
	console.error('Tab content with ID ' + tabname + ' not found.');
	}
	}
	</script>