<?php
//guarda las imagenes que fueron posteadas con ajax
if(isset($_POST['base64data']) ){
    $data = $_POST['base64data']; 
    //echo $data;
    $image = explode('base64,',$data);
    if($_POST['page'] > 1){
        $savedCanvas=str_replace(".pdf", '-'.$_POST['page']."Canvas.jpg", $_POST['saveTo'] );    
    }else{
        $savedCanvas=str_replace(".pdf", "Canvas.jpg", $_POST['saveTo'] );    
    }

    //el número de la página ya lo trae en realidad
    $savedCanvas=str_replace(".pdf", "Canvas.jpg", $_POST['saveTo'] );    

    file_put_contents($savedCanvas, base64_decode($image[1]));        
}else{
	//conexion bdd
$host_name = 'localhost';
$database = 'previewacd';
$user_name ='previewacd';
$password = '336J#fl6u';
	/*conectar bdd local*/$link = mysqli_connect($host_name, $user_name, $password, $database);
	if ($link->connect_error) {die("Connection failed: " . $link->connect_error);}else{/* echo "Connected successfully";/**/}
	/*character set to utf8mb4 */$link->set_charset(" utf8mb4");
	
	//convierte el pdf a jpg y lo pone de BG, escoge que pestaña...
	{
		$pdf_file_path="./multimedia/pdf.pdf";//la ruta al pdf original del proyecto
		$folder_path_for_images="./multimedia/";
		$bg=str_replace(".pdf", "-1.jpg", $pdf_file_path);
		$bgBase=$bg;//lo usas mas adelante para contar cuantas pags tuvo el pdf si se convirtio
		
		if(isset($_GET['pdf']) ){
			$pdf=$_GET['pdf'];
			if(!isset($_GET['page']) ){//es nuevo descarga el pdf y borra todo lo demas
				// Loop through the file list and delete each file
				$files = glob($folder_path_for_images . '*'); 
				foreach($files as $file) { 
					if(is_file($file)) { unlink($file); }
				}
				
				$sql = "SELECT nom_plano, archivo FROM log_plano_gf WHERE id_log_plano_gf = '".$pdf."'";
				$ejecutarquery=mysqli_query($link,$sql);
				if(mysqli_num_rows($ejecutarquery) > 0) {
					$row = mysqli_fetch_assoc($ejecutarquery);
					$nombre_archivo = $row['nom_plano'];
					$archivo_hex = $row['archivo'];  // Assuming this is the hex data
					$archivo = hex2bin(substr($archivo_hex, 2));  // Converting hex to binary, omitting the first "0x"
					// Save to multimedia folder
					$output_path = './multimedia/pdf.pdf';
					file_put_contents($output_path, $archivo);
					//echo "PDF saved to: " . $output_path;
				} else {
					echo "No record found. SQL query: " . $sql;
					if(!$ejecutarquery) {
						echo "<br />Query Error: " . mysqli_error($link);
					}
				}
				echo '<h1>Wait, site will reload...</h1><script>setTimeout(function(){ window.location.replace("'.$_SERVER['REQUEST_URI'].'&page=1"); }, 9000);</script>';
			}
		}else{ 
			$pdf="NA";
		}
		
		if (file_exists($bg)) {
			//echo "The file $bg exists NO convertion needed";echo "<br>";
		} else {
			//echo "The file $bg need convertion";echo "<br>";
			echo "<h1>The file needs convertion, please wait until page reloads</h1>";echo "<br>";

			require_once "./librerias/pdf-merge/takeoff.php";// Si hace falta convertir el PDF a JPG puedes usar convertAPI para eso...
			//renombrar para que todo funcione... y empezar desde 0
			rename($folder_path_for_images.'pdf.jpg', $folder_path_for_images.'pdf-1.jpg');
			rename($folder_path_for_images.'pdfCanvas.jpg', $folder_path_for_images.'pdf-1Canvas.jpg');			if(file_exists($folder_path_for_images . 'export.pdf')) { unlink($folder_path_for_images . 'export.pdf'); }
			
			//echo $_SERVER['REQUEST_URI'];
			echo '<script>setTimeout(function(){ window.location.replace("'.$_SERVER['REQUEST_URI'].'"); }, 10000);</script>';
		}		
	}
	//Crea el PDF con las ultimas imagenes
	{
		if(isset($_GET['print']) ){
			//aqui crea el pdf takeoff
			$pdf_file_path=$pdf_file_path;//es todo lo que necesitas, sabes como se llaman las imagenes if file_exists
			$Done = './multimedia/';//donde se guardan los ya combinados en relacion $ToMerge 
			$Merged =$folder_path_for_images . 'export.pdf';//str_replace(".pdf", "-takeoff.pdf", $pdf_file_path );//donde se guarda y con que nombre

		//si no elimina todas las que hayan existido las guarda y las juntara despues... pero mezclaria distintos archivos mas adelante... solo para que pruebe amr... o que se borren...?? o de alguna manera solo unlink feach con cierto nombre            
			require_once "./librerias/pdf-merge/takeoffNewPdf.php";// convierte las imagenes guardadas a pdf y las combina        
			echo '<script>setTimeout(function(){ window.location.replace("./index.php?pdf='.$_GET['pdf'].'&page='.$_GET['page'].'"); }, 5000);</script>';
		}
	}


	//obtiene el bg- width y height, carga la imagen previamente convertida del pdf
	{
		$pagina="NA";
		if(isset($_GET['page']) ){
			//if($_GET['page'] > 1){
				$pagina=$_GET['page']; 
				$pdf_file_path=str_replace(".pdf", "-".$_GET['page'].".pdf", $pdf_file_path);           
				//echo $pagina." es la pagina ".$pdf_file_path;
			//}
		}else{

			$pdf_file_path="NO HAY IMAGEN POR DEFAULT";    
		}
		$bg=str_replace(".pdf", ".jpg", $pdf_file_path);

		list($width, $height) = getimagesize($bg); //hace que el width y height se traiga por php y se ajuste
		//echo "width: " . $width . "<br />";echo "height: " .  $height;echo "<br>";
		$width+=10;//para el padding y quede de tamaño real
		$height+=10;
		//echo "width: " . $width . "<br />";echo "height: " .  $height;echo "<br>";
	}

	//guarda el takeoff
	if(isset($_POST['takeoff']) ){
		$takeoff=$_POST['takeoff'];

		$sql = "DELETE FROM pdf_canvas_meta WHERE proyecto='".$pdf."' AND valor ='".$pagina."';"; 
		$ejecutarquery=mysqli_query($link,$sql);
		$sql = "INSERT INTO pdf_canvas_meta (proyecto,meta,valor,takeoff) VALUES ('".$pdf."','takeoff','".$pagina."','".$takeoff."');"; 
		$ejecutarquery=mysqli_query($link,$sql);       
	}
	//recupera el takeoff
	{
	$sql="SELECT * FROM pdf_canvas_meta WHERE meta='takeoff' AND proyecto='".$pdf."' AND valor ='".$pagina."';"; 
	$ejecutarquery=mysqli_query($link,$sql); 
	if(mysqli_num_rows($ejecutarquery)>0){
		$row=mysqli_fetch_assoc($ejecutarquery);
		$takeoff=$row["takeoff"];
	}else{
		$takeoff='{"version":"5.2.1","objects":[]}';
		//$takeoff="";
	}
	//echo $sql;
	}
	//guarda cantidades
	if(isset($_POST['cantidades']) ){
		$cantidades=$_POST["cantidades"];
		$cantidades=str_replace(",}", "}", $cantidades);//quita la ultima coma
		//echo $cantidades;echo "<br>";
		$cantidades=json_decode($cantidades,true);
		$i=0; foreach( $cantidades as $key=>$feach){  
			//echo $key." seran ".$feach;echo "<br>";
		$i++;}
	}

	?>

	<!--solo usas jquery para mapear las key del y backspace para borrar y para algo de código que tu escribiste-->
	<script src="https://code.jquery.com/jquery-latest.min.js"></script>
	<!--Esta es la libreria real, funciona con puro js no requiere jquery https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js-->
	<script src="./librerias/fabric.min.js"></script> 
	<!--Esta libreria solo sirve para descargar el canvas http://html2canvas.hertzen.com/dist/html2canvas.min.js-->
	<script src="./librerias/html2canvas.min.js"></script>

	<!--CSS general-->
	<style>
		body{ background-color: #ededed;}
		.controls {
			padding: 0 10px; 
			z-index: 999; 
			position: fixed; 
			top: 50; 
			left: 50; 
			background: #ededed;
		}
		
		button {
			font-size: 11px;
			font-weight: bold;
			background-color: blue;
			color: white;
			margin: 3px;
			padding: 3px 10px;
			border-radius: 10px;
			border: none;
		}
		button:hover {
			background-color: #5353ff;
		}
		input, textarea{
			background-color: white;
			border: none;
			margin: 3px;
			padding: 3px 20px;
			border-radius: 10px;			
		}
		.input{
			width: 250px;
		}
		/* Common styles for buttons and styled anchors */
		a {
			font-size: 11px;
			font-weight: bold;
			background-color: blue;
			color: white;
			margin: 3px;
			padding: 3px 10px;
			border-radius: 10px;
			border: none;
			text-decoration: none;  /* Remove underlines for anchor elements */
			display: inline-block;  /* Make anchor elements inline-block to accept padding and margins */
		}

		/* Hover effect for buttons and styled anchors */
		a:hover {
			background-color: #5353ff;
		}
		p{
			font-size: 10px;
    		color: gray;
		}
		hr {
			width: 100px;
			border: 0;  /* Remove the default border */
			height: 3px; 
			background-color: #bdcaff; 
		}
		#canvas{
			/*background-image: url("<?php echo $bg;?>");/*esto si quieres que el fondo sea fijo en relación al zoom y no este en el canvas como objeto*/
			background-size: contain;
			background-repeat: no-repeat;
			background-color: gray;
			padding: 5px;
			background-origin: content-box;
		}
	</style>
	<!--CSS del preloader-->
	<style>/*El CSS de la animación del spinner loading*/
		/* Absolute Center Spinner */
		.loading {
			display: none;/*Por default va oculto hasta que se muestre con js*/
		  position: fixed;
		  z-index: 999;
		  height: 2em;
		  width: 2em;
		  overflow: visible;
		  margin: auto;
		  top: 0;
		  left: 0;
		  bottom: 0;
		  right: 0;
		}

		/* Transparent Overlay */
		.loading:before {
		  content: '';
		  display: block;
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: rgba(0,0,0,0.3);
		}

		/* :not(:required) hides these rules from IE9 and below */
		.loading:not(:required) {
		  /* hide "loading..." text */
		  font: 0/0 a;
		  color: transparent;
		  text-shadow: none;
		  background-color: transparent;
		  border: 0;
		}

		.loading:not(:required):after {
		  content: '';
		  display: block;
		  font-size: 10px;
		  width: 1em;
		  height: 1em;
		  margin-top: -0.5em;
		  -webkit-animation: spinner 1500ms infinite linear;
		  -moz-animation: spinner 1500ms infinite linear;
		  -ms-animation: spinner 1500ms infinite linear;
		  -o-animation: spinner 1500ms infinite linear;
		  animation: spinner 1500ms infinite linear;
		  border-radius: 0.5em;
		  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
		  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
		}

		/* Animation */

		@-webkit-keyframes spinner {
		  0% {
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		  }
		  100% {
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			transform: rotate(360deg);
		  }
		}
		@-moz-keyframes spinner {
		  0% {
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		  }
		  100% {
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			transform: rotate(360deg);
		  }
		}
		@-o-keyframes spinner {
		  0% {
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		  }
		  100% {
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			transform: rotate(360deg);
		  }
		}
		@keyframes spinner {
		  0% {
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		  }
		  100% {
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			transform: rotate(360deg);
		  }
		}
	</style>
	<div class="loading">Cargando&#8230;</div>

	<!--los controles-->
	<div class="controls">
		<p>
			<input type="color" name="color" id="colorFigura" list="colorList">
			<!--<select name="color" id="colorFigura">
				<option selected disabled>Choose a color</option>
				<option value="blue">product 1 - blue</option>
				<option value="red">prod 2 - red</option>
				<option value="#b1ff3b">p3 - green</option>
				<option value="yellow">p4 - yellow</option>
			</select>-->
			<!--<input type="color" id="colorFigura">-->
			<button onclick="addRectangle()">Cuadro</button>
			<button onclick="addTriangle()">Triangulo</button>
			<button onclick="addCircle()">Circulo</button>
			<!--<br />
			Blues: <span id="blue">0</span> / Reds: <span id="red">0</span> / Yellows: <span id="yellow">0</span> / Greens: <span id="green">0</span> / Greenishss: <span id="b1ff3b">0</span>--> 
			<br /><br />
			<input type="text" name="title" id="title" class="input" placeholder="Title"> 
			&nbsp;&nbsp;<button onclick="resetDescr()">Borrar</button>
			<br />
			<textarea rows="3" name="note"  id="note"  class="input" placeholder="Note"></textarea>
			<br />
			* Deselecciona el actual antes de agregar otro, a menos quieras repetir notas.<br />
			* No uses la tecla de suprimir, solo retroceso.<br />
			* Usa las flechas para mover los elementos seleccionados<br />
			* Utiliza las "bolas" alrededor de los elementos para modificarlos y rotarlos.
		</p>
		<hr>
		<p>
			<button onclick="removeGroup()">Borra selección</button>
			<button onclick="removeAll()">Borrar todo</button>
			<button onclick="centrarZoom()">Reset zoom y centrar</button>
			<br />
			* La tecla de retroceso también funciona<br />
			* Mantén presionada Alt + clic del ratón = desplazarse por el área<br />
			* La rueda del ratón hace zoom donde está la flecha o con dos dedos
			<!--<input id="pix2m" type="number" min="0" step="0.001" placeholder="100px to meters">
			<button onclick="startMeasure()">Start measuring</button>
			<button onclick="stopMeasure()">Stop measuring</button>-->
		</p>
		<hr>
		<p>        
			<button onclick="saveFabricjs()">Guardar checkpoint</button>
			<button onclick="loadFabricjs()">Cargar checkpoint</button>
			<br />
			<button onclick="saveCanvas()">Congelar imagen (abajo)</button>
			<button onclick="unSaveCanvas()">Quitar congelada</button>
			<br /><br />
			<button onclick="exportAndSaveCanvas()">Guardar imagen</button>
			<a href="<?php echo str_replace(".pdf", "Canvas.jpg", $pdf_file_path ); ?>"  target="_blank">Ver imagen</a>
			<br /><br />
			<button onclick="saveDB()">Guardar todo</button>
			<a href="?print=true&pdf=<?php echo $_GET['pdf']; ?>&page=<?php echo $_GET['page']; ?>">Crear PDF</a>
			<?php if( file_exists($folder_path_for_images."export.pdf") ){ ?>
			<a href="<?php echo $folder_path_for_images."export.pdf"; ?>"  target="_blank">Ver PDF</a> 
			<?php } ?>
			<br />
			* Para crear PDF se deben guardar las imagenes de todas las paginas editadas antes
		</p>
		<hr>
		<p>
			<?php if(isset($_GET['page']) ){ 
				$nPags=1;
				for ($i = 0; $i < 100; $i++) {//si hay mas de 100 paginas en el pdf truena  
					$checa=str_replace("-1", "-".$i, $bgBase);
					if( file_exists($checa) ){
						//echo "hay paginas ".$i." ".$checa;echo "<br>";
						$nPags=$i;
					}
				}
				//echo "paginas ".$nPags;echo "<br>";
			?>
				<?php if($_GET['page'] > 1){ ?>
					<a href="./index.php<?php echo '?pdf='.$_GET['pdf'].'&page='.($_GET['page']-1); ?>" >&larr; Página anterior</a>&nbsp;&nbsp;&nbsp;
				<?php } ?>
				<?php if($_GET['page'] < $nPags){ ?>
					<a href="./index.php<?php echo '?pdf='.$_GET['pdf'].'&page='.($_GET['page']+1); ?>" >Siguiente página &rarr;</a> 
				<?php } ?>
			<?php } ?>
		</p>
	</div>
	<!--El cuadro donde se va dibujar-->
	<div style="text-align:center; margin: 0px 10px; ">
		<canvas id="canvas" width="<?php echo $width;?>" height="<?php $height;?>"></canvas>
		<div id="frozeImg"></div>
	</div>

	<span id="saveJson" style="color:black;display:none;"><?php echo $takeoff;?></span>
	<form method="post" id="saveDB">
		<input type="hidden" name="takeoff">
		<input type="hidden" name="cantidades">
	</form>
	
	<script>
		//uso basico creando figuras con codigo
		var canvas = new fabric.Canvas('canvas');
		//aqui iria lo demás pero mejor al final para que lo renderee en el momento...	
	</script> 
	<!--dibujar, clonar y borrar-->
	<script>
		//tener la función de clonar o eliminar cada uno de los elementos

		//var canvas = this.__canvas = new fabric.Canvas('c');
		// create a rect object
	  var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";

	  var cloneIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 55.699 55.699' width='100px' height='100px' xml:space='preserve'%3E%3Cpath style='fill:%23010002;' d='M51.51,18.001c-0.006-0.085-0.022-0.167-0.05-0.248c-0.012-0.034-0.02-0.067-0.035-0.1 c-0.049-0.106-0.109-0.206-0.194-0.291v-0.001l0,0c0,0-0.001-0.001-0.001-0.002L34.161,0.293c-0.086-0.087-0.188-0.148-0.295-0.197 c-0.027-0.013-0.057-0.02-0.086-0.03c-0.086-0.029-0.174-0.048-0.265-0.053C33.494,0.011,33.475,0,33.453,0H22.177 c-3.678,0-6.669,2.992-6.669,6.67v1.674h-4.663c-3.678,0-6.67,2.992-6.67,6.67V49.03c0,3.678,2.992,6.669,6.67,6.669h22.677 c3.677,0,6.669-2.991,6.669-6.669v-1.675h4.664c3.678,0,6.669-2.991,6.669-6.669V18.069C51.524,18.045,51.512,18.025,51.51,18.001z M34.454,3.414l13.655,13.655h-8.985c-2.575,0-4.67-2.095-4.67-4.67V3.414z M38.191,49.029c0,2.574-2.095,4.669-4.669,4.669H10.845 c-2.575,0-4.67-2.095-4.67-4.669V15.014c0-2.575,2.095-4.67,4.67-4.67h5.663h4.614v10.399c0,3.678,2.991,6.669,6.668,6.669h10.4 v18.942L38.191,49.029L38.191,49.029z M36.777,25.412h-8.986c-2.574,0-4.668-2.094-4.668-4.669v-8.985L36.777,25.412z M44.855,45.355h-4.664V26.412c0-0.023-0.012-0.044-0.014-0.067c-0.006-0.085-0.021-0.167-0.049-0.249 c-0.012-0.033-0.021-0.066-0.036-0.1c-0.048-0.105-0.109-0.205-0.194-0.29l0,0l0,0c0-0.001-0.001-0.002-0.001-0.002L22.829,8.637 c-0.087-0.086-0.188-0.147-0.295-0.196c-0.029-0.013-0.058-0.021-0.088-0.031c-0.086-0.03-0.172-0.048-0.263-0.053 c-0.021-0.002-0.04-0.013-0.062-0.013h-4.614V6.67c0-2.575,2.095-4.67,4.669-4.67h10.277v10.4c0,3.678,2.992,6.67,6.67,6.67h10.399 v21.616C49.524,43.26,47.429,45.355,44.855,45.355z'/%3E%3C/svg%3E%0A"

	  var deleteImg = document.createElement('img');
	  deleteImg.src = deleteIcon;

	  var cloneImg = document.createElement('img');
	  cloneImg.src = cloneIcon;

	  fabric.Object.prototype.transparentCorners = false;
	  fabric.Object.prototype.cornerColor = 'gray';
	  fabric.Object.prototype.cornerStyle = 'circle';

	  function addRectangle() {
		    //var title = prompt("Enter the title for this figure:");
            //var note = prompt("Enter a note for this figure:");
		    var title = $("#title").val();
            var note = $("#note").val();
		  
		  let color=$("#colorFigura").val();
		  if(color == null){
			  alert("Choose a product first");
		  }else{
			var rect = new fabric.Rect({
			left: 50,
			top: 50,
			fill: color,
			width: 200,
			height: 200,
			//objectCaching: false,
			//stroke: 'lightgreen',
			//strokeWidth: 4,
                title: title, // Custom attribute
                note: note // Custom attribute
			});

			canvas.add(rect);
			canvas.setActiveObject(rect);
		  }
	  }
	  function addTriangle() {
		    var title = $("#title").val();
            var note = $("#note").val();

		  let color=$("#colorFigura").val();
		  if(color == null){
			  alert("Choose a product first");
		  }else{
			var rect = new fabric.Triangle({
			  left: 50,
			  top: 50,
			  fill: color,
			  width: 200,
			  height: 200,
			  //objectCaching: false,
			  //stroke: 'lightgreen',
			  //strokeWidth: 4,
                title: title, // Custom attribute
                note: note // Custom attribute
			});

			canvas.add(rect);
			canvas.setActiveObject(rect);
		  }
	  }
	  function addCircle() {
		    var title = $("#title").val();
            var note = $("#note").val();

		  let color=$("#colorFigura").val();
		  if(color == null){
			  alert("Choose a product first");
		  }else{
			var rect = new fabric.Circle({ 
				top: 40, 
				left: 40, 
				radius: 100, 
				fill: color,
				title: title, // Custom attribute
                note: note // Custom attribute
			});
			canvas.add(rect);
			canvas.setActiveObject(rect);
		  }
	  }

	  function renderIcon(icon) {
		return function renderIcon(ctx, left, top, styleOverride, fabricObject) {
		  var size = this.cornerSize;
		  ctx.save();
		  ctx.translate(left, top);
		  ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
		  ctx.drawImage(icon, -size/2, -size/2, size, size);
		  ctx.restore();
		}
	  }

	  fabric.Object.prototype.controls.deleteControl = new fabric.Control({
		x: 0.5,
		y: -0.5,
		offsetY: -16,
		offsetX: 16,
		cursorStyle: 'pointer',
		mouseUpHandler: deleteObject,
		render: renderIcon(deleteImg),
		cornerSize: 24
	  });

	  fabric.Object.prototype.controls.clone = new fabric.Control({
		x: -0.5,
		y: -0.5,
		offsetY: -16,
		offsetX: -16,
		cursorStyle: 'pointer',
		mouseUpHandler: cloneObject,
		render: renderIcon(cloneImg),
		cornerSize: 24
	  });

	  //Add();

	  function deleteObject(eventData, transform) {
					var target = transform.target;
			var canvas = target.canvas;
				canvas.remove(target);
			canvas.requestRenderAll();
		}

	  function cloneObject(eventData, transform) {
		var target = transform.target;
		var canvas = target.canvas;
		target.clone(function(cloned) {
		  cloned.left += 30;
		  cloned.top += 30;
		  canvas.add(cloned);
		});
		canvas.discardActiveObject().renderAll();//des-selecciona todo
	  }


	  function removeGroup() { //Remueve agrupados
			var doomedObj = canvas.getActiveObject();
			  if (doomedObj.type === 'activeSelection') {
						// active selection needs a reference to the canvas.
						doomedObj.canvas = canvas;
						doomedObj.forEachObject(function(obj) {
				  canvas.remove(obj);
						});
			 }//endif multiple objects
			  else{
			  //If single object, then delete it
			  var activeObject = canvas.getActiveObject();
				//How to delete multiple objects?
					//if(activeObject !== null && activeObject.type === 'rectangle') {
				if(activeObject !== null ) {
						canvas.remove(activeObject);
					}
			  }//end else there's a single object
		  canvas.discardActiveObject().renderAll();//des-selecciona todo
		}
	  function removeAll(){//hay un metodo para borrar todo
		  //Antes, realmente no quiero borrar la imagen...
		  //canvas.clear();//borra todo
		  //canvas.discardActiveObject().renderAll();//des-selecciona todo
			canvas.forEachObject(function(object){ //que no se seleccione la imagen, pero se le olvida al hacer reload
				if(object.type !== 'image'){
					//console.log("Borro "+object.type);
					canvas.remove(object);
				}
			});    
	  }

	</script>
	<!--zoom scroll wheel and pan con alt-->
	<script>
		 function centrarZoom(){
			let ratioZoomPDF=canvas.width/<?php echo $width-10;?>;//lo que mide en pixeles la imagen vs el tamaño real del div canvas
			//console.log(ratioZoomPDF);
			canvas.setViewportTransform([ratioZoomPDF, 0, 0, ratioZoomPDF, 0, 0]); //coloca de nuevo en el centro y con el zoom que debe   
		}

		//esto habilita el zoom
		canvas.on('mouse:wheel', function(opt) { 
		  var delta = opt.e.deltaY;
		  var zoom = canvas.getZoom();
		  //console.log(zoom);
		  zoom *= 0.999 ** delta;
		  if (zoom > 20) zoom = 20;
		  if (zoom < 0.1) zoom = 0.1; //max zoom in n out
		  canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
		  opt.e.preventDefault();
		  opt.e.stopPropagation();
		});

		//pan con hold alt y mouse
		canvas.on('mouse:down', function(opt) {
		  var evt = opt.e;
		  if (evt.altKey === true) {
			this.isDragging = true;
			this.selection = false;
			this.lastPosX = evt.clientX;
			this.lastPosY = evt.clientY;
		  }
		});
		canvas.on('mouse:move', function(opt) {
		  if (this.isDragging) {
			var e = opt.e;
			var vpt = this.viewportTransform;
			vpt[4] += e.clientX - this.lastPosX;
			vpt[5] += e.clientY - this.lastPosY;
			this.requestRenderAll();
			this.lastPosX = e.clientX;
			this.lastPosY = e.clientY;
		  }
		});
		canvas.on('mouse:up', function(opt) {
		  // on mouse up we want to recalculate new interaction
		  // for all objects, so we call setViewportTransform
		  this.setViewportTransform(this.viewportTransform);
		  this.isDragging = false;
		  this.selection = true;
		});
	</script>
	<!--keystrokes-->
	<script>
	  //borrar con del y con backspace, otras funciones de las teclas
	  $(window).keydown(function(e) {  
		//console.log(e.keyCode);
		if(e.keyCode == 46){//delete key
			removeGroup();
			return false;            
		}
		if(e.keyCode == 8){//backspace
			//removeGroup();//desactivada para que puedas editar el texto
			//return false;            
		}
		if(e.keyCode == 37){//flecha izquierda MOVER
			var object = canvas.getActiveObject();
			object.left -= 1;
			object.setCoords();
			canvas.renderAll();//update
			return false;            
		}
		if(e.keyCode == 38){//flecha arriba
			var object = canvas.getActiveObject();
			object.top -= 1;
			object.setCoords();
			canvas.renderAll();//update
			return false;            
		}
		if(e.keyCode == 39){//flecha derecha
			var object = canvas.getActiveObject();
			object.left += 1;
			object.setCoords();
			canvas.renderAll();//update
			return false;            
		}
		if(e.keyCode == 40){//flecha abajo
			var object = canvas.getActiveObject();
			object.top += 1;
			object.setCoords();
			canvas.renderAll();//update
			return false;            
		}
		return; //using "return" other attached events will execute
	});
	</script>
	<!--Salvar en BDD-->
	<script>
	//guardar y cargar, es facil te crea y carga un json
	//https://stackoverflow.com/questions/39193542/fabric-js-how-to-save-data
	function saveFabricjs(){
		var json = canvas.toJSON(['title', 'note']);//guarda todo en json, incluyendo el campo titulo y nota
		console.log(json);
		$("#saveJson").html(JSON.stringify(json) );//guardas el json en algún lado
	}
	function loadFabricjs(){
		var json = $("#saveJson").html();//jalas el json en algún lado
		canvas.loadFromJSON(json, function() {canvas.renderAll(); imageNoSelect(); centrarZoom(); }); //rendereas el json y al terminar corres estas funciones 
	}
	function imageNoSelect(){//hace que la imagen de fondo no sea seleccionable de nuevo...
		canvas.forEachObject(function(object){ //que no se seleccione la imagen, pero se le olvida al hacer reload
			if(object.type == 'image'){
			   //console.log("desactivada y hasta atras "+object.type);
			   object.set({ selectable:false, evented:false });
			   object.sendToBack();//en teoria lo manda hasta atras
			}
		});    
	}
	function saveDB(){
		$(".loading").show();
		exportAndSaveCanvas();//que guarde la imagen tambien
		saveFabricjs();//update
		$("input[name=takeoff]").val( $("#saveJson").html() );
		setTimeout(function() {  //espere a que guarde la imagen
			$("#saveDB").submit();    
		}, 6000);
	}
	</script>
	<!--lineas y medidas-->
	<script>
		let isOnMeasure=false; //con esto inicias y paras el line drawing
		function startMeasure(){
			isOnMeasure=true;
		}
		function stopMeasure(){
			isOnMeasure=false;
		}

	//Otros que podrían ayudar: dibujar multiples lineas:
		//https://stackoverflow.com/questions/55326720/rendering-a-line-that-follows-the-mouse-eventually-slows-down-with-multiple-line

	//http://jsfiddle.net/restorepro/URWru/264/
	//var canvas = new fabric.Canvas('c', { selection: false });

					 var line, isDown;
					 var arr = new Array();
					 var startx = new Array();
					 var endx = new Array();
					 var starty = new Array();
					 var endy = new Array();
					 var temp = 0;
					 var graphtype;


					 canvas.on('mouse:down', function (o) {
						 if(isOnMeasure == true){
							 isDown = true;
							 var pointer = canvas.getPointer(o.e);

							 var points = [pointer.x, pointer.y, pointer.x, pointer.y];
							 startx[temp] = pointer.x;
							 starty[temp] = pointer.y;
							 line = new fabric.Line(points, {
								 strokeWidth: 2,
								 fill: '#fd0001',//un rojo raro para que no cuente
								 stroke: '#fd0000',
								 originX: 'center',
								 originY: 'center'
							 });
							 canvas.add(line);
						 }
					 });

					 canvas.on('mouse:move', function (o) {
						 if(isOnMeasure == true){
							 if (!isDown) return;
							 var pointer = canvas.getPointer(o.e);
							 line.set({ x2: pointer.x, y2: pointer.y });
							 canvas.renderAll();
						 }
					 });

					 canvas.on('mouse:up', function (o) {
						 if(isOnMeasure == true){
							 var pointer = canvas.getPointer(o.e);
							 endx[temp] = pointer.x;
							 endy[temp] = pointer.y;
							 isDown = false;
							 calculate();
							 canvas.discardActiveObject().renderAll();//des-selecciona todo
						 }
					 });



					 function calculate() {

						 var linePixelsX = startx[temp] - endx[temp];
						 var linePixelsY = starty[temp] - endy[temp];
						 var gregVar = linePixelsX - linePixelsY;
						 // horizontal/vertical components of line in pixels

						 let metros = $("#pix2m").val()/100;//por cada 100 pixeles
						 let pixVert= <?php echo $width;?>;//el alto y ancho en pixeles del canvas
						 let pixHori= <?php echo $height;?>;

						 console.log(pixHori+"h y v"+pixVert);
						 var horizontalMPP = metros/pixHori;
						 var verticalMPP =   metros/pixVert;
						 // horizontal/vertical meters per pixel, p being according canvas measurement in pixels and m being the measurement (in meters) of the area it should represent

						 //como ya capturas los pixeles en metros, ya lo usas directo...
						 horizontalMPP = metros;
						 verticalMPP =   metros;


						 var lineMetersX = linePixelsX * horizontalMPP;
						 var lineMetersY = linePixelsY * verticalMPP;
						 // calculate horizontal/vertical line components in meters

						 var lineMetersTotal = (lineMetersX * lineMetersX + lineMetersY * lineMetersY);
						 lineMetersTotal = Math.sqrt(lineMetersTotal).toFixed(2);
						 var text = new fabric.Text('Length ' + lineMetersTotal, { left: endx[temp], top: endy[temp], fontSize: 16 });
						 // var text = new fabric.Text('Length ' + gregVar / 15, { left: endx[temp], top: endy[temp], fontSize: 12 });
						 canvas.add(text);
						 // Calculate total line length in meters with some Pythagoras
						 canvas.renderAll();
					 }    
	</script>
	<!--guardar imagen-->
	<script>
	//para capturar el canvas como imagen
		function saveCanvas(){
			centrarZoom();//para que salga completa
			canvas.discardActiveObject().renderAll();//des-selecciona todo

			html2canvas(document.querySelector("#canvas"),{scale:1}).then(canvas => {
				//document.body.appendChild(canvas)
				$("#frozeImg").html(canvas);				
			});     
		}
				
		function unSaveCanvas(){
				$("#frozeImg").html("");			
		}
		function exportAndSaveCanvas()  {
			centrarZoom();//para que salga completa
			canvas.discardActiveObject().renderAll();//des-selecciona todo

			//width=3000;//debe ir en pixeles y par que no este cambiando que sea fijo...
			//canvas.setWidth(width);
			//ratio = <?php echo round($height/$width,4);?>*width;
			//canvas.setHeight(ratio);
			//canvas.discardActiveObject().renderAll();//des-selecciona todo

			//scale porque se comprime. Si usas 1 usas el tamaño del navegador, al ser mayor que uno usa una resolución mejor
			html2canvas(document.querySelector("#canvas"),{scale:2}).then(canvas => {
				var imgData = canvas.toDataURL('image/jpeg');   
				var url = './index.php';//tu mismo
				$.ajax({ 
					type: "POST", 
					url: url,
					dataType: 'text',
					data: {
						saveTo: '<?php echo $pdf_file_path;?>',
						page: '<?php if(isset($_GET['page']) ){echo $_GET['page'];}?>',
						base64data : imgData
					}
				});     
			});        
			console.log("guardado");
			//return;
			//width=700;//debe ir en pixeles y par que no este cambiando que sea fijo...
			//canvas.setWidth(width);
			//ratio = <?php echo round($height/$width,4);?>*width;
			//canvas.setHeight(ratio);
			//canvas.discardActiveObject().renderAll();//des-selecciona todo
		} 
	</script>
	<!--mostrar titulos y notas de los objetos / editarlas-->
	<script>
		// Function to listen for object selection and show attributes
		canvas.on('mouse:down', function(e) {
			var activeObj = canvas.getActiveObject();
			if (activeObj) {
				//console.log("Active Object"); // Debugging log
				//console.log("Title: " + activeObj.title); // Debugging log
				//console.log("Note: " + activeObj.note);   // Debugging log
				$("#title").val(activeObj.title);
				$("#note").val(activeObj.note);
				//alert("Title: " + activeObj.title + "\nNote: " + activeObj.note);
			}
		});
		// Listen for changes to the title input field
		$("#title").on("input", function() {
			var activeObj = canvas.getActiveObject();
			if (activeObj) {
				activeObj.set("title", $(this).val());  // Update the title property
				canvas.renderAll();  // Re-render the canvas to reflect changes
			}
		});
		// Listen for changes to the note textarea
		$("#note").on("input", function() {
			var activeObj = canvas.getActiveObject();
			if (activeObj) {
				activeObj.set("note", $(this).val());  // Update the note property
				canvas.renderAll();  // Re-render the canvas to reflect changes
			}
		});
		
		function resetDescr(){
			$(".input").val("");
		}
	</script>
	<!--inicial y contador (al final porque si no luego no carga la imagen de bg)-->
	<script>
		//uso basico creando figuras con codigo
		fabric.Image.fromURL('<?php echo $bg;?>', image => {//imagen de fondo como objeto, la carga de nuevo del json...
		   image.scale(1);//el zoom
		   image.set({ selectable:false, evented:false });//que no se seleccione, pero se le olvida al hacer reload así que alla repito
		   canvas.add(image);
		   canvas.renderAll();
		});

		//esto para que la dimensión se ajuste
		canvas.setHeight(<?php echo $height;?>);
		canvas.setWidth(<?php echo $width/2;?>);
		//ahora si quieres que sea responsivo
		let width=parent.innerWidth*0.5;
		width=1200;//debe ir en pixeles y par que no este cambiando que sea fijo...
		canvas.setWidth(width);
		let ratio = <?php echo round($height/$width,4);?>*width;
		canvas.setHeight(ratio);


		jQuery(document).ready(function ($) { 
			loadFabricjs();//load checkpoint  
			//en teoria podría haber dos imagenes si tiene el mismo nombre y se guardaron en la bdd...
			imageNoSelect();//por si falla en load, sobre todo cuando load algo sin imagen...
		});    

		//contar
		setInterval(function() {  
			imageNoSelect();//por si acaso y mande hasta atras

			let colores= [];
			let objetos = $("#saveJson").html();
			objetos=jQuery.parseJSON(objetos);//haz json
			$.each(objetos.objects, function(key,value) {
					//console.log(value.type+" - "+value.fill);
				if(value.type == 'rect' || value.type == 'circle' || value.type == 'triangle'){
					//console.log(value.type+" - esta aprobado");
					colores.push(value.fill);
				}else{}
			});
			var unique = colores.filter(function(itm, i, a) {
				return i == a.indexOf(itm);
			});
			//console.log(unique);
			let salvar='{';
			$.each(unique, function(key,value) {
				//console.log(value.type+" - "+value.fill);
				let tiene=countElement(value,colores);
				$("#"+value.replaceAll("#","") ).html(tiene);
				//console.log(value+" tiene "+tiene);
				salvar+='"'+value+'":'+tiene+",";
			});
			salvar+="}";
			//console.log(salvar);
			$("input[name=cantidades]").val(salvar);
		}, 1000);
		function countElement(item,array) {//count elements in array
			var count = 0;
			$.each(array, function(i,v) { if (v === item) count++; });
			return count;
		}
	/*    
	  canvas.add(//asi agregas figuras directamente
		new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
		new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
		new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
	  );

	  function makeLine(coords) {
		return new fabric.Line(coords, {
		  fill: 'red',
		  stroke: 'red',
		  strokeWidth: 5,
		 // selectable: false, //permite seleccionar
		//  evented: false,    // permite editar tamaño y rotar
		});
	  }

	  var line = makeLine([ 50, 100, 250, 300 ]),
		  line2 = makeLine([ 250, 175, 250, 250 ]),
		  line3 = makeLine([ 250, 250, 300, 350]),
		  line4 = makeLine([ 250, 250, 200, 350]),
		  line5 = makeLine([ 250, 175, 175, 225 ]),
		  line6 = makeLine([ 250, 175, 325, 225 ]);

	  //canvas.add(line, line2, line3, line4, line5, line6);    //asi agregas figuras como si fueran variables
	  canvas.add(line);    //asi agregas figuras como si fueran variables
	*/

	</script> 
<?php 
}
?>