We’re sorry – something went wrong on our end.<div class="modal fade bd-example-modal-lg" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<div class="3d-btn d-flex align-items-center">
					<div class="toggle-container" id="toggle3DPreview">
						<div class="toggle-circle"></div>
					</div>
					<span class="toggle-text ml-2"><strong>3D Preview</strong></span>
				</div>
				<button type="button" id="download-pdf-btn" class="ml-auto btn btn-success">
					<span aria-hidden="true"><i class="bi bi-download"></i></span> Download Pdf Proof
				</button>

				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><img src="/cross.png"></span>
				</button>
			</div>
			<div class="modal-body">
				<div class=" d-flex justify-content-center">
					<canvas id="imageCanvas" width="760" height="760"></canvas>
				</div>
				<div class="d-flex justify-content-center">
					<div class="button-container" id="reset0-buttons">
						
					</div>
				</div>
			</div>
			
		</div>
	</div>
</div> 

<div class="modal bd-example-modal-lg" id="frontDesignModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
    
      <!-- Modal Header -->
      <div class="modal-header"> 
        <button type="button" class="close" data-bs-dismiss="modal" id="closefdmodal"><img src="/cross.png"></button>
      </div>
      
      <!-- Modal Body -->
      <div class="modal-body">
		<div class="row">
			<div class="col-md-6 col-12"> 
				<div class="div-left-section">
				<h4 class="modal-title">Upload your file directly</h4>
					 <form>
          <div class="form-group">
		  <!-- <input type="file" class="form-control-file" id="imageInput" accept="image/*" > -->

			<label for="imageInput" button type="file" name="image" class="btn btn-secondary upload_des w-100 p-3 fs-5">
			<img src="/upload-file-icon.svg"><p>Choose a file or drag it here</p></label>
    		<input type="file" id="imageInput" name="image" value="Prebrskaj" style="visibility:hidden;" accept="image/*">
            <!-- <label for="imageInput">Upload Image:</label> -->
           
            <h4 id="imageHelp" class="form-text text-muted">Maximum file size is 1GB.</h4>
			<p>.jpg, .jpeg, .jfif, .bmp, .png, .gif, .heic, .svg, .pdf, .psd, .ai, .eps, .ait, .ppt, .pptx, .tif, .tiff</p>

	
			
          </div>
        </form>
				</div>
			</div>
			<div class="col-md-6 col-12">
				<div class="div-right-section">
					<h4 class="modal-title">File design tips to a beautiful print</h4>
					<p>These file guidelines will increase the quality of your print</p>
					<div class="outer_custom_div">
					<div class="inner_custom_div">
					<div class="design_column"><input type="radio" name="orientation_type" id="horizontal_standard" value="horizontal_standard"><label for="horizontal_standard"><div class="content_continer"><div class="image_div"><img src="https://signisland.covio.fr/wp-content/themes/sign-island/images/resolution.svg" class="shape-image"></div><div class="content_div"><p>Resolution</p><span>Upload images with more them 220 DPI </span></div></div></label></div>
					<div class="design_column"><input type="radio" name="orientation_type" id="horizontal_square" value="horizontal_square"><label for="horizontal_square"><div class="content_continer"><div class="image_div"><img src="https://signisland.covio.fr/wp-content/themes/sign-island/images/cover-2.svg" class="shape-image"></div><div class="content_div"><p>Covers</p><span>First and last pages of the file, if the page count is odd, then blank cover is blank </span></div></div></label></div>
					<div class="design_column"><input type="radio" name="orientation_type" id="vertical_standard" value="vertical_standard"><label for="vertical_standard"><div class="content_continer"><div class="image_div"><img src="https://signisland.covio.fr/wp-content/themes/sign-island/images/safe-zone.svg" class="shape-image"></div><div class="content_div"><p>Safezone</p><span>Please use safe zone indicators in our design studio </span></div></div></label></div>
					<div class="design_column"><input type="radio" name="orientation_type" id="vertical_standard" value="vertical_standard"><label for="vertical_standard"><div class="content_continer"><div class="image_div"><img src="https://signisland.covio.fr/wp-content/themes/sign-island/images/cut-zone.svg" class="shape-image"></div><div class="content_div"><p>Cut markers</p><span>No need to add bleeds or cutmarks</span></div></div></label></div>
					</div>
					</div>
				</div>
			</div>
		</div>
      </div>
     
      
    </div>
  </div>
</div>

<div class="modal bd-example-modal-lg" id="backDesignModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
    
      <!-- Modal Header -->
      <div class="modal-header"> 
        <button type="button" class="close" data-bs-dismiss="modal" id="closebdmodal"><img src="/cross.png"></button>
      </div>
      
      <!-- Modal Body -->
      <div class="modal-body">
		<div class="row">
			<div class="col-md-6 col-12"> 
				<div class="div-left-section">
				<h4 class="modal-title">Upload your file directly</h4>
					 <form>
          <div class="form-group">
		  <!-- <input type="file" class="form-control-file" id="imageInput" accept="image/*" > -->
			<label for="imagebackInput" button type="file" name="image" class="btn btn-secondary upload_des w-100 p-3 fs-5"><img src="/upload-file-icon.svg"><p>Choose a file or drag it here</p></label>    
			<input type="file" id="imagebackInput" name="image" value="Prebrskaj" style="visibility:hidden;" accept="image/*">
            <!-- <label for="imageInput">Upload Image:</label> -->
           
            <h4 id="imageHelp" class="form-text text-muted">Maximum file size is 1GB.</h4>
			<p>.jpg, .jpeg, .jfif, .bmp, .png, .gif, .heic, .svg, .pdf, .psd, .ai, .eps, .ait, .ppt, .pptx, .tif, .tiff</p>

	
			
          </div>
        </form>
				</div>
			</div>
			<div class="col-md-6 col-12">
				<div class="div-right-section">
					<h4 class="modal-title">File design tips to a beautiful print</h4>
					<p>These file guidelines will increase the quality of your print</p>
					<div class="outer_custom_div">
					<div class="inner_custom_div">
					<div class="design_column"><input type="radio" name="orientation_type" id="horizontal_standard" value="horizontal_standard"><label for="horizontal_standard"><div class="content_continer"><div class="image_div"><img src="https://signisland.covio.fr/wp-content/themes/sign-island/images/resolution.svg" class="shape-image"></div><div class="content_div"><p>Resolution</p><span>Upload images with more them 220 DPI </span></div></div></label></div>
					<div class="design_column"><input type="radio" name="orientation_type" id="horizontal_square" value="horizontal_square"><label for="horizontal_square"><div class="content_continer"><div class="image_div"><img src="https://signisland.covio.fr/wp-content/themes/sign-island/images/cover-2.svg" class="shape-image"></div><div class="content_div"><p>Covers</p><span>First and last pages of the file, if the page count is odd, then blank cover is blank </span></div></div></label></div>
					<div class="design_column"><input type="radio" name="orientation_type" id="vertical_standard" value="vertical_standard"><label for="vertical_standard"><div class="content_continer"><div class="image_div"><img src="https://signisland.covio.fr/wp-content/themes/sign-island/images/safe-zone.svg" class="shape-image"></div><div class="content_div"><p>Safezone</p><span>Please use safe zone indicators in our design studio </span></div></div></label></div>
					<div class="design_column"><input type="radio" name="orientation_type" id="vertical_standard" value="vertical_standard"><label for="vertical_standard"><div class="content_continer"><div class="image_div"><img src="https://signisland.covio.fr/wp-content/themes/sign-island/images/cut-zone.svg" class="shape-image"></div><div class="content_div"><p>Cut markers</p><span>No need to add bleeds or cutmarks</span></div></div></label></div>
					</div>
					</div>
				</div>
			</div>
		</div>
      </div>
     
      
    </div>
  </div>
</div>


<div class="modal fade" id="previewmodalupload" tabindex="-1" aria-labelledby="previewmodalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg">
	  <div class="modal-content">
		<div class="modal-header">
		 <!-- <h5 class="modal-title" id="previewmodalLabel">Design Preview</h5>-->
		 <button type="button" class="btn-close" data-dismiss="modal"></button>
		</div>
		<div class="modal-body text-center p-0">
			<div class="front-imagepreview">
				<img id="frontmodalImagehere" src="" class="img-fluid" alt="Selected Image" style="transform: scale(0.85);box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;padding:0px;object-fit:cover;aspect-ratio: ;">
			</div>
			<div class="back-imagepreview nottdisplay">
				<img id="backmodalImagehere" src="" class="img-fluid" alt="Selected Image" style="transform: scale(0.85);box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;padding:0px;object-fit:cover;aspect-ratio: ;">
			</div>
			<div class="d-flex mt-4 mt-4 mb-4 justify-content-center">
			<button class="btn f-btn mr-2 addactivebtn active" style="width:90px;" onclick="loadfrontprv()">Front</button>
			<button class="btn ml-2 addactivebtn" style="width:90px;"  onclick="loadbackprv()">Back</button>
		</div>
		</div>
		
		
	  </div>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/konva@7.2.5/konva.min.js"></script>
<script>
jQuery(document).ready(function($) {
	$('#imageInput').change(function(event) {
		openLoader();
		var file = event.target.files[0];
		if(file)
		{
		var reader = new FileReader();
		
		reader.onload = function(e) {
		  var imageSrc = e.target.result;
		  var imageElement = $('<img>', { alt: 'Selected Image', style: 'max-width: 100%; max-height: 100%;scale: 1; width:calc(100% - 40px); height:calc(100% - 40px); object-fit:contain;'}); 
		  
		  var containerWidth = $('#container').width();
		  var containerHeight = $('#container').height();
		  
		  imageElement.attr('src', imageSrc).on('load', function() {
			var imageWidth = this.width;
			var imageHeight = this.height;

			if (imageWidth > containerWidth || imageHeight > containerHeight) {
			  var aspectRatio = imageWidth / imageHeight;
			  if (imageWidth > imageHeight) {
				//imageElement.css({ width: containerWidth, height: containerWidth / aspectRatio});
			  } else {
				//imageElement.css({ width: containerHeight * aspectRatio, height: containerHeight });
			  }
			}
			
			setTimeout(function() {
				$('#container').empty().append(imageElement);
				loadimagefront();
				$('#closefdmodal').click();
				var backdrops = $('.modal-backdrop');
				backdrops.each(function() {
					$(this).addClass('d-none').removeClass('show');
				});
				$('body').css('overflow', 'auto');
				$('body').css('padding-right', '0');
				closeLoader();
			}, 500);
		  });
		};
	
		reader.readAsDataURL(file);
	}
  });

    $('#imagebackInput').change(function(event) {
    openLoader();
    var file = event.target.files[0];
	if(file)
		{
    var reader = new FileReader();
    
    reader.onload = function(e) {
      var imageSrc = e.target.result;
      var imageElement = $('<img>', { alt: 'Selected Image', style: 'max-width: 100%; max-height: 100%; scale: 1; width:calc(100% - 40px); height:calc(100% - 40px); object-fit:contain;' });
      
      var containerWidth = $('#containerback').width();
      var containerHeight = $('#containerback').height();
      
      imageElement.attr('src', imageSrc).on('load', function() {
        var imageWidth = this.width;
        var imageHeight = this.height;
      
        if (imageWidth > containerWidth || imageHeight > containerHeight) {
          var aspectRatio = imageWidth / imageHeight;
          if (imageWidth > imageHeight) {
            //imageElement.css({ width: containerWidth, height: containerWidth / aspectRatio });
          } else {
            //imageElement.css({ width: containerHeight * aspectRatio, height: containerHeight });
          }
        }
        
        setTimeout(function() {
			$('#containerback').empty().append(imageElement);
			loadImageback();
			$('#closebdmodal').click();
			var backdrops = $('.modal-backdrop');
			backdrops.each(function() {
				$(this).addClass('d-none').removeClass('show');
			});
			$('body').css('overflow', 'auto');
			$('body').css('padding-right', '0');
			closeLoader();
			
        }, 500);
      });
    };
    
    reader.readAsDataURL(file);
}
  });
  
});
var myModal;
function loadimagefront(){
    document.getElementById("frontdesign").classList.add("d-flex");
    document.getElementById("frontdesign").style.display = "block";
    document.getElementById("backkdesign").classList.remove("d-flex");
    document.getElementById("backkdesign").style.display = "none";     
	
	myModal = new bootstrap.Modal(document.getElementById('frontDesignModal'));
	myModal.show();
}


function loadimagefrontWithLoader(){
    openLoader(); 
    setTimeout(function(){
        loadimagefront();
        closeLoader();
    }, 500);
}

function loadImagebackWithLoader(){
    openLoader(); 
    setTimeout(function(){
        loadImageback();
        closeLoader();
    }, 500);
}


function loadImageback(){
	document.getElementById("frontdesign").classList.remove("d-flex");	
	document.getElementById("frontdesign").style.display = "none";	
	document.getElementById("backkdesign").classList.add("d-flex");
	document.getElementById("backkdesign").style.display = "block";	
	
    var myModal = new bootstrap.Modal(document.getElementById('backDesignModal'));
	myModal.show();
}

document.getElementById('closebdmodal').addEventListener('click', function() {
	var myModal = new bootstrap.Modal(document.getElementById('backDesignModal'));
	myModal.hide();
});

document.getElementById('resizeRange').addEventListener('input', function() {
    var value = parseFloat(this.value);
	var shape = null;
	if(shape === "Square"){
		var scale1 = value <= 1 ? value : 1 + (value - 1) / 0.75; 
		var scale2 = value <= 1 ? value : 1 + (value - 1) / 1; 
		var scale =  scale1 + ',' + scale2; 
	} else {
		var shape2 = null;
		if(shape2 === "Vertical"){
			var scale1 = value <= 1 ? value : 1 + (value - 1) / 0.75; 
			var scale2 = value <= 1 ? value : 1 + (value - 1) / 1; 
			var scale =  scale1 + ',' + scale2;
		} else {
			var scale = value <= 1 ? value : 1 + (value - 1) / 1; 
		}
	}
    
    var container = document.getElementById('front-parent');
	
	var zoomSlider = document.getElementById('zoomSlider');
    container.style.transform = 'scale(' + scale + ')'; 

	
	var percentage = Math.round(value * 100);
	document.getElementById('zoomPercentage').textContent = percentage + '%';
	
	if (value > 1.14) {
        zoomSlider.style.zIndex = 9; // Apply z-index 9
    } else {
        zoomSlider.style.zIndex = ''; // Remove z-index
    }
});

document.getElementById('resizeRangeback').addEventListener('input', function() {
    var value = parseFloat(this.value);
	
    var shape = null;
	if(shape === "Square"){
		var scale = value <= 1 ? value : 1 + (value - 1) / 1; 
	} else {
		var shape2 = null;
		if(shape2 === "Vertical"){
			var scale = value <= 1 ? value : 1 + (value - 1) / 1; 
		} else {
			var scale = value <= 1 ? value : 1 + (value - 1) / 1; 
		}
	}
    
    var container = document.getElementById('back-parent');
	var zoomSlider = document.getElementById('zoomSliderback');
    container.style.transform = 'scale(' + scale + ')'; 

	
	var percentage = Math.round(value * 100);
	document.getElementById('zoomPercentageback').textContent = percentage + '%';
	
	if (value > 1.14) {
        zoomSlider.style.zIndex = 9; 
    } else {
        zoomSlider.style.zIndex = '';
    }
	
});
function movetostudio() {
	showLoader();
	
	var userloginstatus = '';
	
	var frontImageFile = $('#imageInput')[0].files[0];
	var backImageFile = $('#imagebackInput')[0].files[0];

    var product_id = $('#product_id').val();
    var quantity = $('#quantity').val();
    var price = $('#price').val();
    var orientation = $('#selected_orientation').val();
	var timezoneOffset = new Date().getTimezoneOffset();
	
	if(userloginstatus === '0'){
		hideLoader();
		showloginmodal(product_id, orientation, window.innerWidth, timezoneOffset);
		return;
	}

	
    var formData = new FormData();

    formData.append('action', 'more_edits_to_studio');
    formData.append('product_id', product_id);
    formData.append('orientation', orientation);
    formData.append('size', window.innerWidth);
    formData.append('quantity', quantity);
    formData.append('price', price);
	formData.append('time_zone', timezoneOffset);

	if (frontImageFile) {
		formData.append('front_image', frontImageFile);
	}
    
    if (backImageFile) {
        formData.append('back_image', backImageFile);
    }

    $.ajax({
        type: 'POST',
        url: '/wp-admin/admin-ajax.php',
        data: formData,
        processData: false,  
        contentType: false,
        success: function(response) {
            var result = JSON.parse(response);
            window.location = window.location.origin + '/studio?workid=' + result.key;
        },
        error: function(xhr, status, error) {
			hideLoader();
            console.error(xhr.responseText);
        }
    });
}

function loadfrontprv(){
    document.querySelector('.back-imagepreview').classList.add('nottdisplay');
    document.querySelector('.front-imagepreview').classList.remove('nottdisplay');
}

function loadbackprv(){
    document.querySelector('.front-imagepreview').classList.add('nottdisplay');
    document.querySelector('.back-imagepreview').classList.remove('nottdisplay');
}

document.body.addEventListener('click', function(event) {
	if (event.target.classList.contains('addactivebtn')) {
		var buttons = document.querySelectorAll('.addactivebtn');
		
		buttons.forEach(function(button) {
			button.classList.remove('active');
		});
		
		event.target.classList.add('active');
	}
});
</script>