From df8dad0a9857b9b3f14931dac8a9dd8e08057dd7 Mon Sep 17 00:00:00 2001
From: franknstayn <begorniafrankjohn@gmail.com>
Date: Wed, 19 Jan 2022 19:23:17 +0800
Subject: [PATCH] update short download

---
 .../download_pages/shorts.blade.php           | 422 +++++++++---------
 1 file changed, 210 insertions(+), 212 deletions(-)
diff --git a/resources/views/admin_pages/download_pages/shorts.blade.php b/resources/views/admin_pages/download_pages/shorts.blade.php
index e1882ad..a6fea53 100644
--- a/resources/views/admin_pages/download_pages/shorts.blade.php
+++ b/resources/views/admin_pages/download_pages/shorts.blade.php
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,26 +8,25 @@
     <link href="{{asset('/designer/custom-fonts/custom-fonts.php')}}" rel='stylesheet' type='text/css'>
     <style>
         canvas {
-            display: none;
+            display:none;
         }
     </style>
 </head>
-
 <body onload="loadPrintFile()">
 
-    <div id="svgRightContent" style="display:none;"></div>
-    <div id="svgLeftContent" style="display:none;"></div>
+    <div id="svgFrontContent" style="display:none;"></div>
+    <div id="svgBackContent" style="display:none;"></div>
     <div id="svgJockTag" style="display:none;"></div>
 
-    <p>Please wait... Click here to go <a href="#" id="close_window">back</a></p>
+    <p>Please wait... Click here to go <a href="#" id="close_window" >back</a></p>
 
-    <canvas id="frontCanvas" width="220px" height="380px" style="border 1px solid black; display:none;"></canvas>
-    <canvas id="backCanvas" width="220px" height="380px" style="border 1px solid black; display:none;"></canvas>
+    <canvas id="frontCanvas" width="220px" height="380px" style="border 1px solid black; display:none;" ></canvas>
+	<canvas id="backCanvas" width="220px" height="380px" style="border 1px solid black; display:none;" ></canvas>
 
     <div id="printFileDiv" style="display:none;"></div>
-
+    
     <form id="myForm" action="{{ url('admin/orders/download') }}" method="post" accept-charset="UTF-8"></form>
-    <p id="log"></p>
+        <p id="log"></p>
     <!-- jQuery 3 -->
     <script src="{{ asset('/bower_components/jquery/dist/jquery.min.js') }}"></script>
     <!-- fabric js 1.7.20 -->
@@ -37,83 +35,83 @@
     <script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
 
     <script>
-        function logSubmit(event) {
-            log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
+       function logSubmit(event) {
+        log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
 
-            event.preventDefault();
+        event.preventDefault();
         }
 
         var form = document.getElementById('myForm');
-        var log = document.getElementById('log');
+        var  log = document.getElementById('log');
         form.addEventListener('submit', logSubmit);
 
 
-        var frontCanvas = new fabric.StaticCanvas(document.getElementById("frontCanvas"));
+        var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas"));
         tmp_frontCanvas = {!! json_encode($client_design_array[0]->ContentLeft) !!};
         frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
             frontCanvas.renderAll();
 
-            setTimeout(function() {
+            setTimeout(function(){
 
                 frontCanvas.backgroundImage = 0;
                 frontCanvas.clear();
                 frontCanvas.renderAll();
 
-                setTimeout(function() {
+                setTimeout(function(){
 
                     frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
                         frontCanvas.renderAll();
                         frontCanvas.selection = false;
                     });
 
-                }, 1000);
+                },1000);
 
-            }, 500);
+            } ,500);
         });
 
-        var backCanvas = new fabric.StaticCanvas(document.getElementById("backCanvas"));
+        var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas") );
         tmp_backCanvas = {!! json_encode($client_design_array[0]->ContentRight) !!};
         backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
             backCanvas.renderAll();
 
-            setTimeout(function() {
+            setTimeout(function(){
 
                 backCanvas.backgroundImage = 0;
                 backCanvas.clear();
                 backCanvas.renderAll();
 
-                setTimeout(function() {
+                setTimeout(function(){
 
                     backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
                         backCanvas.renderAll();
                         backCanvas.selection = false;
                     });
 
-                }, 1000);
-            }, 500);
+                },1000);
+            } ,500);
 
         });
-
-
-        function loadPrintFile() {
+          
+        
+        function loadPrintFile(){
             var path = 'http://localhost/uploads/images/';
             var template_code = "{{ $client_design_array[0]->TemplateCode }}";
             var size = "{{ $order_item_array[0]->JerseySize }}";
-
+           
             // console.log();
-            var svgLocation = "{{ config('site_config.images_directory')  }}" + "uniform-templates/" + template_code + "/SHORTS/SIZES/" + size + ".svg";
+            var svgLocation = "{{ config('site_config.images_directory')  }}" + "uniform-templates/" + template_code + "/SHORTS/SIZES/" +  size +  ".svg";
 
-            $.ajax({ //create an ajax request to load_page.php
+            $.ajax({    //create an ajax request to load_page.php
                 type: "GET",
-                url: svgLocation,
-                dataType: "text", //expect html to be returned.,
+                url : svgLocation,
+                dataType: "text",   //expect html to be returned.,
                 // headers: {  
                 //     'Access-Control-Allow-Origin': '*' 
                 // },
-                success: function(response) {
+                success: function(response){
 
                     $("#printFileDiv").html(response)
-
+      
                     var fb = document.getElementById('Front_Border');
                     var fb_x = $(fb).children("rect").attr("x");
                     var fb_y = $(fb).children("rect").attr("y");
@@ -137,36 +135,36 @@
                     var lb_y = $(lb).children("rect").attr("y");
                     var lb_height = $(lb).children("rect").attr("height");
                     var lb_width = $(lb).children("rect").attr("width");
-
-
+                    
+                   
                     setTimeout(function() {
 
                         loadTemplateDesign();
-                        frontContent(fb_height, fb_width, fb_x, fb_y);
+                        frontContent(fb_height, fb_width, fb_x,  fb_y);
                         backContent(bb_height, bb_width, bb_x, bb_y);
 
-                        setTimeout(function() {
+                        setTimeout(function(){
                             sendSVG();
-                        }, 2000);
+                        },2000);
 
                     }, 3000);
                 }
             });
         }
 
-        function loadTemplateDesign() {
-
+        function loadTemplateDesign(){
+           
             tmpdetails = {!! json_encode($client_design_array[0]->TemplateDesign) !!};
             var obj = JSON.parse(tmpdetails);
-
+            
 
             ///////////// for mainColor
             var getMainColorType = obj[0].mainColor[0].type;
-            if (getMainColorType == "Solid") {
+            if(getMainColorType == "Solid"){
                 var setMainColor = obj[0].mainColor[0].solidColor;
-                $('#Left_MainColor').attr("fill", setMainColor);
-                $('#Right_MainColor').attr("fill", setMainColor);
-            } else {
+                $('#Left_MainColor').attr("fill",   setMainColor);
+                $('#Right_MainColor').attr("fill",  setMainColor);
+            }else{
                 var gradientColor1 = obj[0].mainColor[0].gradientColor1;
                 var gradientColor2 = obj[0].mainColor[0].gradientColor2;
                 var gradientColorOffset1 = obj[0].mainColor[0].gradientColorOffset1;
@@ -174,111 +172,111 @@
                 var gradientFor = "Body";
                 var trimCount = 0;
                 var gradientIds = "Gradient_List";
-
+                
                 loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
 
-                $('#Left_MainColor').attr("fill", "url(#Body_Gradient)");
-                $('#Right_MainColor').attr("fill", "url(#Body_Gradient)");
-
-            } ///////////// END for mainColor
+                $('#Right_MainColor').attr("fill",  "url(#Body_Gradient)");
+                $('#Left_MainColor').attr("fill", "url(#Body_Gradient)");				
+                
+            }///////////// END for mainColor
 
             ///////////// for patternColor
-            try {
+            try{
 
                 var getMainBodyPatternId = obj[0].patternColors[0].patternId;
                 // console.log(getMainBodyPatternId);
                 var pColors = obj[0].patternColors[0].patternColors['length'];
-
-                if (pColors > 0) { // check if pattern exist
+                
+                if(pColors > 0){ // check if pattern exist
                     var k, arrayPatternColor = [];
-                    for (i = 0; i < pColors; i++) {
+                    for (i = 0 ; i < pColors  ; i++){
                         l = i + 1;
                         k = "PatternColor" + l;
                         temp = {};
                         temp['PatternColor' + l] = obj[0].patternColors[0].patternColors[i][k];
                         arrayPatternColor.push(temp);
                     }
-                    var getPatternURL = pattern_properties(getMainBodyPatternId);
-                    var front_clipathval = "url(#Left_MainColor_Clippath_URL)";
-                    var back_clipathval = "url(#Right_MainColor_Clippath_URL)";
+                        var getPatternURL = pattern_properties(getMainBodyPatternId);	
+                        var front_clipathval = "url(#Left_MainColor_Clippath_URL)"; 
+                        var back_clipathval = "url(#Right_MainColor_Clippath_URL)"; 
+                        
+                        var front_svgpatternid = "Left_MainColor_Pattern"; 
+                        var back_svgpatternid = "Right_MainColor_Pattern"; 
 
-                    var front_svgpatternid = "Left_MainColor_Pattern";
-                    var back_svgpatternid = "Right_MainColor_Pattern";
+                        var front_idappend = "Left_MainColor"; 
+                        var back_idappend = "Right_MainColor"; 
 
-                    var front_idappend = "Left_MainColor";
-                    var back_idappend = "Right_MainColor";
+                        if(obj[0].patternColors[0].patternColorType == "Solid"){
+                        
+                            loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
+                            loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
 
-                    if (obj[0].patternColors[0].patternColorType == "Solid") {
+                        }else{
+                            var gradientColor1 =  obj[0].patternColors[0].patternGradientColor1;
+                            var gradientColor2 =  obj[0].patternColors[0].patternGradientColor2;
+                            var gradientColorOffset1 = obj[0].patternColors[0].patternGradientOffset1;
+                            var gradientColorOffset2 = obj[0].patternColors[0].patternGradientOffset2;
+                            var gradientFor = "Body_Pattern";
+                            var trimCount = 0;
+                            var gradientIds = "Gradient_List";
+                            var GradientPatternColor = [{
+                                "PatternColor1" : "url(#Body_Pattern_Gradient)"
+                            }];
 
-                        loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
-                        loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
+                            // console.log(GradientPatternColor);
 
-                    } else {
-                        var gradientColor1 = obj[0].patternColors[0].patternGradientColor1;
-                        var gradientColor2 = obj[0].patternColors[0].patternGradientColor2;
-                        var gradientColorOffset1 = obj[0].patternColors[0].patternGradientOffset1;
-                        var gradientColorOffset2 = obj[0].patternColors[0].patternGradientOffset2;
-                        var gradientFor = "Body_Pattern";
-                        var trimCount = 0;
-                        var gradientIds = "Gradient_List";
-                        var GradientPatternColor = [{
-                            "PatternColor1": "url(#Body_Pattern_Gradient)"
-                        }];
-
-                        // console.log(GradientPatternColor);
-
-                        loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
-                        loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor);
-                        loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor);
-
-                    }
+                            loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
+                            loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor);
+                            loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor);
+                            
+                        }
                 }
 
-            } catch (e) {
+            }catch (e){
                 //error
-            } /////////////END PatternColor
-
+            }/////////////END PatternColor
+				
 
             var Trims = obj[0].Trims['length'];
-            if (Trims > 0) { // check if Trim exist
-                for (i = 0; i < Trims; i++) {
+            if(Trims > 0){ // check if Trim exist
+                for (i = 0 ; i < Trims  ; i++){
                     trimCount = i + 1;
                     trimNum = "Trim" + trimCount;
                     trimNumPattern = "Trim" + trimCount + "_Pattern";
                     SVGTrimId = "Trim_" + trimCount;
                     trimPattern = "Trim" + trimCount + "_Pattern";
                     trimPatternColor = "Trim" + trimCount + "_patternColor";
-
-                    if (obj[0].Trims[i][trimNum].type == "Solid") {
+                    
+                    if(obj[0].Trims[i][trimNum].type == "Solid"){
                         var trim_solid_color = obj[0].Trims[i][trimNum].solidColor;
+                        
+                        $('#Front_'+SVGTrimId).attr("fill", trim_solid_color);
+                        $('#Back_'+SVGTrimId).attr("fill", trim_solid_color);
+                        $('#Left_'+SVGTrimId).attr("fill", trim_solid_color);
+                        $('#Right_'+SVGTrimId).attr("fill", trim_solid_color);
 
-                        // $('#Front_' + SVGTrimId).attr("fill", trim_solid_color);
-                        // $('#Back_' + SVGTrimId).attr("fill", trim_solid_color);
-                        $('#Left_' + SVGTrimId).attr("fill", trim_solid_color);
-                        $('#Right_' + SVGTrimId).attr("fill", trim_solid_color);
-
-                    } else {
+                    }else{
                         var gradientColor1 = obj[0].Trims[i][trimNum].gradientColor1;
                         var gradientColor2 = obj[0].Trims[i][trimNum].gradientColor2;
                         var gradientColorOffset1 = obj[0].Trims[i][trimNum].gradientColorOffset1;
                         var gradientColorOffset2 = obj[0].Trims[i][trimNum].gradientColorOffset2;
                         var gradientFor = "Trim";
                         var gradientIds = "Gradient_List";
-
+                
                         loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
-                        $('#Left_' + SVGTrimId).attr("fill", "url(#" + SVGTrimId + "_Gradient)");
-                        $('#Right_' + SVGTrimId).attr("fill", "url(#" + SVGTrimId + "_Gradient)");
+                        $('#Left_'+SVGTrimId).attr("fill", "url(#"+SVGTrimId+"_Gradient)");
+                        $('#Right_'+SVGTrimId).attr("fill", "url(#"+SVGTrimId+"_Gradient)");
                     }
 
                     ///// TRIM PATTERN		
-                    try {
+                    try{
                         var getTrimPattern = obj[0].Trims[i][trimNumPattern].patternId;
 
-                        if ((getTrimPattern != "noPattern") || (getTrimPattern != "")) {
+                        if((getTrimPattern != "noPattern") || (getTrimPattern != "")){
                             var pColors = obj[0].Trims[i][trimNumPattern].patternColors['length'];
-                            if (pColors > 0) {
+                            if(pColors > 0){ 
                                 var k, arrayPatternColor = [];
-                                for (a = 0; a < pColors; a++) {
+                                for (a = 0 ; a < pColors  ; a++){
                                     l = a + 1;
                                     k = "PatternColor" + l;
                                     temp = {};
@@ -288,116 +286,117 @@
                                 // console.log(arrayPatternColor);
                                 // console.log(obj[0].Trims[i][trimNumPattern].patternColorType);
 
-                                var getPatternURL = pattern_properties(getTrimPattern);
-                                var front_clipathval = "url(#Left_Trim_" + trimCount + "_Clippath_URL)";
-                                var back_clipathval = "url(#Right_Trim_" + trimCount + "_Clippath_URL)";
+                                    var getPatternURL = pattern_properties(getTrimPattern);	
+                                    var front_clipathval = "url(#Left_Trim_"+trimCount+"_Clippath_URL)"; 
+                                    var back_clipathval = "url(#Right_Trim_"+trimCount+"_Clippath_URL)"; 
+                                    
+                                    var front_svgpatternid = "Left_Trim_"+trimCount+"_Pattern"; 
+                                    var back_svgpatternid = "Right_Trim_"+trimCount+"_Pattern"; 
+                                    
+                                    var front_idappend = "Left_Trim_"+trimCount; 
+                                    var back_idappend = "Right_Trim_"+trimCount;
+                                    // console.log(getPatternURL);
 
-                                var front_svgpatternid = "Left_Trim_" + trimCount + "_Pattern";
-                                var back_svgpatternid = "Right_Trim_" + trimCount + "_Pattern";
+                                    if(obj[0].Trims[i][trimNumPattern].patternColorType == "Solid"){
+                                        //console.log('solid');
+                                        loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
+                                        loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
+                                    }
+                                    else{
+                                        var gradientColor1 =  obj[0].Trims[i][trimNumPattern].patternGradientColor1;
+                                        var gradientColor2 =  obj[0].Trims[i][trimNumPattern].patternGradientColor2;
+                                        var gradientColorOffset1 = obj[0].Trims[i][trimNumPattern].patternGradientOffset1;
+                                        var gradientColorOffset2 = obj[0].Trims[i][trimNumPattern].patternGradientOffset2;
+                                        var gradientFor = "Trim_Pattern";
+                                        var gradientIds = "Gradient_List";
+                                        var GradientPatternColor = [{
+                                            "PatternColor1" : "url(#Trim_"+trimCount+"_Pattern_Gradient)"
+                                        }];
 
-                                var front_idappend = "Left_Trim_" + trimCount;
-                                var back_idappend = "Right_Trim_" + trimCount;
-                                // console.log(getPatternURL);
-
-                                if (obj[0].Trims[i][trimNumPattern].patternColorType == "Solid") {
-                                    //console.log('solid');
-                                    loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
-                                    loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
-                                } else {
-                                    var gradientColor1 = obj[0].Trims[i][trimNumPattern].patternGradientColor1;
-                                    var gradientColor2 = obj[0].Trims[i][trimNumPattern].patternGradientColor2;
-                                    var gradientColorOffset1 = obj[0].Trims[i][trimNumPattern].patternGradientOffset1;
-                                    var gradientColorOffset2 = obj[0].Trims[i][trimNumPattern].patternGradientOffset2;
-                                    var gradientFor = "Trim_Pattern";
-                                    var gradientIds = "Gradient_List";
-                                    var GradientPatternColor = [{
-                                        "PatternColor1": "url(#Trim_" + trimCount + "_Pattern_Gradient)"
-                                    }];
-
-                                    loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
-                                    loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor);
-                                    loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor);
-
-                                }
+                                        loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
+                                        loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor);
+                                        loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor);
+                                        
+                                    }
                             }
-
+                            
                         }
-                    } catch (e) {
+                    }catch(e){
 
                     }
                 }
             }
 
-        }
+		}
 
-        function frontContent(fb_height, fb_width, fb_x, fb_y) {
+        function frontContent(fb_height, fb_width, fb_x,  fb_y){
             var objects = frontCanvas.getObjects();
 
-
-            // CHANGING FRONT NUMBER BASED ON USER INPUTS    
-            try {
+            
+           // CHANGING FRONT NUMBER BASED ON USER INPUTS    
+            try{
                 var p_number = '{{ $order_item_array[0]->Number }}';
                 for (var j in objects) {
                     var id = objects[j].get('idNumber');
-                    if (id == "NumberFront") {
+                    if(id == "NumberFront"){
                         objects[j].setText(p_number.toString());
                         objects[j].centerH();
                         objects[j].setCoords();
                         break;
                     }
-
+                    
 
                 }
-
-            } catch (e) {
+            
+            }catch(e){
                 console.log('Error: ' + e);
             }
-
-            try {
+            
+            try{
                 for (var i in objects) {
-                    if (objects[i].get('type') == "text") {
-                        if (objects[i].getStroke() != null) {
+                    if(objects[i].get('type') == "text"){
+                        if(objects[i].getStroke() != null){
                             var getStrokeWidth = objects[i].getStrokeWidth();
                             objects[i].setStrokeWidth(getStrokeWidth * 4);
                         }
                     }
-                }
-            } catch (e) {
+                }	
+            }catch(e){
                 console.log('Error: ' + e);
             }
-
+            
             zoomIn(frontCanvas, fb_width, fb_height, "Front");
             var content = frontCanvas.toSVG();
-            document.getElementById('svgRightContent').innerHTML = content;
+            document.getElementById('svgFrontContent').innerHTML = content;
+            
+            var el_id = document.getElementById('svgFrontContent');
 
-            var el_id = document.getElementById('svgRightContent');
-
-            var getAllImageTag = el_id.getElementsByTagName('image');
-            for (var i = 0; i < getAllImageTag.length; i++) {
+            var getAllImageTag = el_id.getElementsByTagName('image');	
+            for (var i=0; i < getAllImageTag.length ; i++) {
                 var getElements = getAllImageTag[i];
                 var getXAttribute = getElements.getAttribute('x');
                 var getYAttribute = getElements.getAttribute('y');
                 getElements.removeAttribute('x')
                 getElements.removeAttribute('y');
-                getElements.setAttribute("transform", "matrix(1 0 0 1 " + getXAttribute + " " + getYAttribute + ")");
+                getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")");
             }
 
             var allGs = el_id.getElementsByTagName('g');
             var consolidatedContents1 = [];
             item = {}
 
-            for (var i = 0; i < allGs.length; i++) {
+            for (var i=0; i < allGs.length ; i++) {
                 var finalXvalue = 0;
                 var finalYvalue = 0;
                 var gElem = allGs[i];
 
-
+                
                 var children = gElem.childNodes;
 
                 var xforms = gElem.getAttribute('transform');
                 // console.log(xforms);
-                var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
-
+                var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
+                
                 var firstX = parts[1],
                     firstY = parts[2];
                 //  x="3009.299" y="363.447"
@@ -408,41 +407,41 @@
                 var finalXvalue = Number(firstX) + Number(defaultXvalue);
                 var finalYvalue = Number(firstY) + Number(defaultYvalue);
                 //console.log(finalXvalue, finalYvalue);
-                gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue, finalYvalue);
+                gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue);
                 // console.log(gElem.transform.baseVal.getItem(0));
                 var s = new XMLSerializer();
-
+                
                 var str = s.serializeToString(gElem);
-
+                
                 // this for the fucking excess of curve text
-                var scale = /scale\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
-
-                if (scale != null) {
+                var scale  = /scale\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
+                
+                if(scale != null){
                     consolidatedContents1.push(str);
                 }
             }
-
+		
             var contents = JSON.stringify(consolidatedContents1);
-
+            
             var con = jQuery.parseJSON(contents);
             var countContents = con.length;
-            if (countContents != 0) { // check if content
+            if(countContents != 0){ // check if content
                 var jContent = $.map(con, function(value) {
-                    return (value);
+                    return(value);
                 });
                 $("#Left_Border").html(jContent.join(""));
             }
-        }
-
-        function backContent(bb_height, bb_width, bb_x, bb_y) {
+		}
 
+        function backContent(bb_height, bb_width, bb_x, bb_y){
+				
             var objects = backCanvas.getObjects();
-
-            try {
+				
+            try{
                 var p_number = '{{ $order_item_array[0]->Number }}';
                 for (var j in objects) {
                     var id = objects[j].get('idNumber');
-                    if (id == "NumberBack") {
+                    if(id == "NumberBack"){
                         objects[j].setText(p_number.toString());
                         objects[j].centerH();
                         objects[j].setCoords();
@@ -450,54 +449,54 @@
                     }
 
                 }
-
-            } catch (e) {
+                
+            }catch(e){
                 console.log('Error: ' + e);
             }
-
-            try {
+            
+            try{
                 var p_name = '{{ $order_item_array[0]->Name }}';
-                for (var j in objects) {
+                for (var j in objects){
                     var id = objects[j].get('idNumber');
-                    if (id == "LastNameBack") {
+                    if(id == "LastNameBack"){
                         objects[j].setText(p_name.toString());
                         objects[j].centerH();
                         objects[j].setCoords();
                         break;
                     }
                 }
-            } catch (e) {
+            }catch(e){
                 console.log('Error: ' + e);
             }
-
-            try {
+            
+            try{
                 for (var i in objects) {
-                    if (objects[i].get('type') == "text") {
-                        if (objects[i].getStroke() != null) {
+                    if(objects[i].get('type') == "text"){
+                        if(objects[i].getStroke() != null){
                             var getStrokeWidth = objects[i].getStrokeWidth();
                             objects[i].setStrokeWidth(getStrokeWidth * 4);
                         }
                     }
                 }
-            } catch (e) {
+            }catch(e){
                 console.log('Error: ' + e);
             }
 
 
             zoomIn(backCanvas, bb_width, bb_height, "Back");
             var content = backCanvas.toSVG();
-            document.getElementById('svgLeftContent').innerHTML = content;
+            document.getElementById('svgBackContent').innerHTML = content;
 
-            var el_id = document.getElementById('svgLeftContent');
+            var el_id = document.getElementById('svgBackContent');
 
-            var getAllImageTag = el_id.getElementsByTagName('image');
-            for (var i = 0; i < getAllImageTag.length; i++) {
+            var getAllImageTag = el_id.getElementsByTagName('image');	
+            for (var i=0; i < getAllImageTag.length ; i++) {
                 var getElements = getAllImageTag[i];
                 var getXAttribute = getElements.getAttribute('x');
                 var getYAttribute = getElements.getAttribute('y');
                 getElements.removeAttribute('x')
                 getElements.removeAttribute('y');
-                getElements.setAttribute("transform", "matrix(1 0 0 1 " + getXAttribute + " " + getYAttribute + ")");
+                getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")");
             }
 
             var allGs = el_id.getElementsByTagName('g');
@@ -505,7 +504,7 @@
             var consolidatedContents = [];
             item = {}
 
-            for (var i = 0; i < allGs.length; i++) {
+            for (var i=0; i < allGs.length ; i++) {
                 var finalXvalue = 0;
                 var finalYvalue = 0;
                 var gElem = allGs[i];
@@ -513,7 +512,7 @@
 
                 var xforms = gElem.getAttribute('transform');
                 //console.log(xforms);
-                var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
+                var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
                 var firstX = parts[1],
                     firstY = parts[2];
                 // x="460.455" y="363.397"
@@ -523,7 +522,7 @@
                 //console.log(firstX, firstY);
                 var finalXvalue = Number(firstX) + Number(defaultXvalue);
                 var finalYvalue = Number(firstY) + Number(defaultYvalue);
-                gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue, finalYvalue);
+                gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue);
 
                 var s = new XMLSerializer();
                 var str = s.serializeToString(gElem);
@@ -535,30 +534,30 @@
             var con = jQuery.parseJSON(contents);
 
             var countContents = con.length;
-            if (countContents != 0) { // check if content
+            if(countContents != 0){ // check if content
                 var jContent = $.map(con, function(value) {
-                    return (value);
+                    return(value);
                 });
                 $("#Right_Border").html(jContent.join(""));
             }
         }
-
+        
         function zoomIn(canvas, actualSizeX, actualSizeY, side) {
             var canvasScale = 1;
             var SCALE_FACTOR = 1.2;
             // TODO limit the max canvas zoom in
             //Your scale factor is 2.172 (1086/500 = 2.172) or 2.13 (639/300 = 2.13) to be more precise.
             // X = WIDTH and Y = HEIGHT
-            if (side == "Front" || side == "Back") {
+            if(side == "Front" || side == "Back"){
                 var SCALE_FACTOR_X = actualSizeX / 222;
                 var SCALE_FACTOR_Y = actualSizeY / 380;
             }
 
-            if (side == "Right" || side == "Left") {
+            if(side == "Right" || side == "Left"){
                 var SCALE_FACTOR_X = actualSizeX / 96;
                 var SCALE_FACTOR_Y = actualSizeY / 112;
             }
-
+           
             canvasScale = canvasScale * SCALE_FACTOR;
 
             canvas.setHeight(canvas.getHeight() * SCALE_FACTOR_Y);
@@ -587,7 +586,7 @@
             canvas.renderAll();
         }
 
-        function sendSVG() {
+        function sendSVG(){
             var svgText = document.getElementById('printFileDiv').innerHTML;
 
 
@@ -601,7 +600,7 @@
             hiddenSVGField.setAttribute("type", "hidden");
             hiddenSVGField.setAttribute("name", "svgText");
             hiddenSVGField.setAttribute("value", svgText);
-
+            
             var hiddenToken = document.createElement("input");
             hiddenToken.setAttribute("type", "hidden");
             hiddenToken.setAttribute("name", "_token");
@@ -610,8 +609,7 @@
             var hiddenDetails = document.createElement("input");
             hiddenDetails.setAttribute("type", "hidden");
             hiddenDetails.setAttribute("name", "filename");
-            hiddenDetails.setAttribute("value", "{{ $order_item_array[0]->ProductName . "
-                _ " . $order_item_array[0]->Size  }}");
+            hiddenDetails.setAttribute("value", "{{ $order_item_array[0]->ProductName . "_" . $order_item_array[0]->Size  }}");
 
 
             form.appendChild(hiddenSVGField);
@@ -621,12 +619,12 @@
             document.body.appendChild(form);
             form.submit();
             alert("Print file is successfully generated!");
-            setTimeout(function() {
-                window.location = "{{ url('admin/orders/view') }}" + "/" + "{{ $order_item_array[0]->CartKey  }}"
-            }, 2000);
-        }
+            setTimeout(function(){
+               window.location = "{{ url('admin/orders/view') }}" + "/" + "{{ $order_item_array[0]->CartKey  }}"
+            },2000);
+		}
+
     </script>
 
 </body>
-
 </html>
\ No newline at end of file
