From 43929eef33c420dc04f045bb9cbb9f217a626660 Mon Sep 17 00:00:00 2001
From: franknstayn <begorniafrankjohn@gmail.com>
Date: Fri, 1 Apr 2022 21:12:48 +0800
Subject: [PATCH] update downloader for hoodie

---
 .../download_pages/hoodie.blade.php           | 543 +++++++++---------
 1 file changed, 269 insertions(+), 274 deletions(-)
diff --git a/resources/views/admin_pages/download_pages/hoodie.blade.php b/resources/views/admin_pages/download_pages/hoodie.blade.php
index adc2917..04e1e27 100644
--- a/resources/views/admin_pages/download_pages/hoodie.blade.php
+++ b/resources/views/admin_pages/download_pages/hoodie.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,29 +8,28 @@
     <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="svgFrontContent" style="display:none;"></div>
     <div id="svgBackContent" style="display:none;"></div>
-    <!-- <div id="svgRightContent" style="display:none;"></div>
-    <div id="svgLeftContent" style="display:none;"></div> -->
+    <div id="svgRightContent" style="display:none;"></div>
+    <div id="svgLeftContent" 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="222px" height="380px" style="border: 1px solid black;"></canvas>
-    <canvas id="backCanvas" width="222px" height="380px" style="border: 1px solid black;"></canvas>
-    <!-- <canvas id="rightCanvas" width="96px" height="112px" style="border: 1px solid black;"></canvas>
-    <canvas id="leftCanvas" width="96px" height="112px" style="border: 1px solid black;"></canvas> -->
+    <canvas  id="frontCanvas"  width="222px" height="380px" style="border: 1px solid black;"></canvas>
+    <canvas  id="backCanvas"  width="222px" height="380px" style="border: 1px solid black;"></canvas>
+    <canvas  id="rightCanvas"  width="96px" height="112px" style="border: 1px solid black;"></canvas>
+    <canvas  id="leftCanvas" width="96px" height="112px" style="border: 1px solid black;"></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 -->
@@ -40,56 +38,56 @@
     <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);
 
         // const sides = ["Front", "Back", "Right", "Left"];
 
+    
 
-
-        var frontCanvas = new fabric.StaticCanvas(document.getElementById("frontCanvas"));
-        var backCanvas = new fabric.StaticCanvas(document.getElementById("backCanvas"));
-        // var leftCanvas = new fabric.StaticCanvas(document.getElementById("leftCanvas"));
-        // var rightCanvas = new fabric.StaticCanvas(document.getElementById("rightCanvas"));
-
+         var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas"));
+         var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas"));
+         var leftCanvas = new fabric.StaticCanvas( document.getElementById("leftCanvas"));
+         var rightCanvas = new fabric.StaticCanvas( document.getElementById("rightCanvas"));
+         
         try {
             var frontContentRaw = "{{ $client_design_array[0]->ContentFront }}";
             var backContentRaw = "{{ $client_design_array[0]->ContentBack }}";
-            // var leftContentRaw = "{{ $client_design_array[0]->ContentLeft }}";
-            // var rightContentRaw = "{{ $client_design_array[0]->ContentRight }}";
-
-            // console.log(leftContentRaw)
-            if (frontContentRaw) {
-                var tmp_frontCanvas = JSON.parse(frontContentRaw.replace(/&quot;/g, '"'));
+            var leftContentRaw = "{{ $client_design_array[0]->ContentLeft }}";
+            var rightContentRaw = "{{ $client_design_array[0]->ContentRight }}";
+            
+            console.log(leftContentRaw)
+            if(frontContentRaw) {
+                var tmp_frontCanvas = JSON.parse(frontContentRaw.replace(/&quot;/g,'"'));
             }
-            if (backContentRaw) {
-                var tmp_backCanvas = JSON.parse(backContentRaw.replace(/&quot;/g, '"'));
+            if(backContentRaw) {
+                var tmp_backCanvas = JSON.parse(backContentRaw.replace(/&quot;/g,'"'));
+            }
+            if(leftContentRaw) {
+                var tmp_leftCanvas = JSON.parse(leftContentRaw.replace(/&quot;/g,'"'));
+            }
+            if(rightContentRaw) {
+                var tmp_rightCanvas = JSON.parse(rightContentRaw.replace(/&quot;/g,'"'));
             }
-            // if (leftContentRaw) {
-            //     var tmp_leftCanvas = JSON.parse(leftContentRaw.replace(/&quot;/g, '"'));
-            // }
-            // if (rightContentRaw) {
-            //     var tmp_rightCanvas = JSON.parse(rightContentRaw.replace(/&quot;/g, '"'));
-            // }
             // var tmp_frontCanvas = JSON.parse(frontContentRaw.replace(/&quot;/g,'"'));
-
+           
             // var tmp_leftCanvas = JSON.parse(leftContentRaw.replace(/&quot;/g,'"'));
             // var tmp_rightCanvas = JSON.parse(rightContentRaw.replace(/&quot;/g,'"'));
             // console.log(frontCanvas)
             loadDesigns(frontCanvas, tmp_frontCanvas);
             loadDesigns(backCanvas, tmp_backCanvas);
-            // loadDesigns(leftCanvas, tmp_leftCanvas);
-            // loadDesigns(rightCanvas, tmp_rightCanvas);
+            loadDesigns(leftCanvas, tmp_leftCanvas);
+            loadDesigns(rightCanvas, tmp_rightCanvas);
 
         } catch (error) {
-            console.log(error)
+            console.log(error)  
         }
 
 
@@ -99,12 +97,9 @@
             let objects = [];
 
             Object.entries(canvas_json.objects).forEach(([key, item]) => {
-                if (item.type == 'image') {
-                    toDataURL(item.src, function(src) {
-                        const images = ada = {
-                            ...item,
-                            src
-                        }
+                if(item.type == 'image') {
+                   toDataURL(item.src, function(src) {
+                        const images =   ada = {...item,  src }
                         objects.push(images)
 
                     })
@@ -119,23 +114,23 @@
                 side_canvas.loadFromJSON(final_json, function(objects, options) {
                     side_canvas.renderAll();
 
-                    setTimeout(function() {
+                setTimeout(function(){
 
-                        side_canvas.backgroundImage = 0;
-                        side_canvas.clear();
-                        side_canvas.renderAll();
+                    side_canvas.backgroundImage = 0;
+                    side_canvas.clear();
+                    side_canvas.renderAll();
 
-                        setTimeout(function() {
+                    setTimeout(function(){
 
-                            side_canvas.loadFromJSON(canvas_json, function(objects, options) {
-                                side_canvas.renderAll();
-                                side_canvas.selection = false;
-                            });
+                        side_canvas.loadFromJSON(canvas_json, function(objects, options) {
+                            side_canvas.renderAll();
+                            side_canvas.selection = false;
+                        });
 
-                        }, 1000);
+                    },1000);
 
-                    }, 500);
-                });
+                } ,500);
+            });
             }, 1000);
         }
 
@@ -185,7 +180,7 @@
 
 
 
-
+        
 
 
 
@@ -211,7 +206,7 @@
         //     } ,500);
 
         // });
-
+        
         // var rightCanvas = new fabric.StaticCanvas( document.getElementById("rightCanvas") );
         // tmp_rightCanvas =  {!! json_encode($client_design_array[0]->ContentRight) !!};
         // rightCanvas.loadFromJSON(tmp_rightCanvas, function(objects, options) {
@@ -257,24 +252,24 @@
         //     } ,500);
 
         // });
-
-
-        function loadPrintFile() {
+      
+        
+        function loadPrintFile(){
             var path = 'https://crewsportswear.com/uploads/images/';
             var template_code = "{{ $client_design_array[0]->TemplateCode }}";
             var size = "{{ $order_item_array[0]->Size }}";
+           
+            
+            var svgLocation = path + "uniform-templates/" + template_code + "/TSHIRTS/SIZES/" +  size +  ".svg";
 
-
-            var svgLocation = path + "uniform-templates/" + template_code + "/HOODIE/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.
-                success: function(response) {
+                url : svgLocation,
+                dataType: "text",   //expect html to be returned.
+                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");
@@ -287,49 +282,49 @@
                     var bb_height = $(bb).children("rect").attr("height");
                     var bb_width = $(bb).children("rect").attr("width");
 
-                    // var rb = document.getElementById('Right_Border');
-                    // var rb_x = $(rb).children("rect").attr("x");
-                    // var rb_y = $(rb).children("rect").attr("y");
-                    // var rb_height = $(rb).children("rect").attr("height");
-                    // var rb_width = $(rb).children("rect").attr("width");
-
-                    // var lb = document.getElementById('Left_Border');
-                    // var lb_x = $(lb).children("rect").attr("x");
-                    // var lb_y = $(lb).children("rect").attr("y");
-                    // var lb_height = $(lb).children("rect").attr("height");
-                    // var lb_width = $(lb).children("rect").attr("width");
-
+                    var rb = document.getElementById('Right_Border');
+                    var rb_x = $(rb).children("rect").attr("x");
+                    var rb_y = $(rb).children("rect").attr("y");
+                    var rb_height = $(rb).children("rect").attr("height");
+                    var rb_width = $(rb).children("rect").attr("width");
 
+                    var lb = document.getElementById('Left_Border');
+                    var lb_x = $(lb).children("rect").attr("x");
+                    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);
-                        // rightContent(rb_height, rb_width, rb_x, rb_y);
-                        // leftContent(lb_height, lb_width, lb_x, lb_y);
+                        rightContent(rb_height, rb_width, rb_x, rb_y);
+                        leftContent(lb_height, lb_width, lb_x, lb_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;
-                $('#Front_MainColor').attr("fill", setMainColor);
-                $('#Back_MainColor').attr("fill", setMainColor);
-            } else {
+                $('#Front_MainColor').attr("fill",   setMainColor);
+                $('#Back_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;
@@ -337,111 +332,111 @@
                 var gradientFor = "Body";
                 var trimCount = 0;
                 var gradientIds = "Gradient_List";
-
+                
                 loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
 
-                $('#Back_MainColor').attr("fill", "url(#Body_Gradient)");
-                $('#Front_MainColor').attr("fill", "url(#Body_Gradient)");
-
-            } ///////////// END for mainColor
+                $('#Back_MainColor').attr("fill",  "url(#Body_Gradient)");
+                $('#Front_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(#Front_MainColor_Clippath_URL)";
-                    var back_clipathval = "url(#Back_MainColor_Clippath_URL)";
+                        var getPatternURL = pattern_properties(getMainBodyPatternId);	
+                        var front_clipathval = "url(#Front_MainColor_Clippath_URL)"; 
+                        var back_clipathval = "url(#Back_MainColor_Clippath_URL)"; 
+                        
+                        var front_svgpatternid = "Front_MainColor_Pattern"; 
+                        var back_svgpatternid = "Back_MainColor_Pattern"; 
 
-                    var front_svgpatternid = "Front_MainColor_Pattern";
-                    var back_svgpatternid = "Back_MainColor_Pattern";
+                        var front_idappend = "Front_MainColor"; 
+                        var back_idappend = "Back_MainColor"; 
 
-                    var front_idappend = "Front_MainColor";
-                    var back_idappend = "Back_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);
-                        $('#Front_' + SVGTrimId).attr("fill", "url(#" + SVGTrimId + "_Gradient)");
-                        $('#Back_' + SVGTrimId).attr("fill", "url(#" + SVGTrimId + "_Gradient)");
+                        $('#Front_'+SVGTrimId).attr("fill", "url(#"+SVGTrimId+"_Gradient)");
+                        $('#Back_'+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 = {};
@@ -451,71 +446,72 @@
                                 // console.log(arrayPatternColor);
                                 // console.log(obj[0].Trims[i][trimNumPattern].patternColorType);
 
-                                var getPatternURL = pattern_properties(getTrimPattern);
-                                var front_clipathval = "url(#Front_Trim_" + trimCount + "_Clippath_URL)";
-                                var back_clipathval = "url(#Back_Trim_" + trimCount + "_Clippath_URL)";
+                                    var getPatternURL = pattern_properties(getTrimPattern);	
+                                    var front_clipathval = "url(#Front_Trim_"+trimCount+"_Clippath_URL)"; 
+                                    var back_clipathval = "url(#Back_Trim_"+trimCount+"_Clippath_URL)"; 
+                                    
+                                    var front_svgpatternid = "Front_Trim_"+trimCount+"_Pattern"; 
+                                    var back_svgpatternid = "Back_Trim_"+trimCount+"_Pattern"; 
+                                    
+                                    var front_idappend = "Front_Trim_"+trimCount; 
+                                    var back_idappend = "Back_Trim_"+trimCount;
+                                    // console.log(getPatternURL);
 
-                                var front_svgpatternid = "Front_Trim_" + trimCount + "_Pattern";
-                                var back_svgpatternid = "Back_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 = "Front_Trim_" + trimCount;
-                                var back_idappend = "Back_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();
             console.log(objects)
-            try {
+            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);
                         }
@@ -529,47 +525,47 @@
                     //         objects[i].setAttribute('scr') = dataUrl;
                     //     })
                     // }
-                }
-            } catch (e) {
+                }	
+            }catch(e){
                 console.log(e)
             }
             frontCanvas.renderAll();
             zoomIn(frontCanvas, fb_width, fb_height, "Front");
             var content = frontCanvas.toSVG();
             document.getElementById('svgFrontContent').innerHTML = content;
-
+            
             var el_id = document.getElementById('svgFrontContent');
 
-            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+")");
 
                 // toDataURL(getElements.getAttribute('xlink:href'), function(dataUrl) {
                 //     getElements.setAttributeNS("xlink:href", dataUrl)
                 // })
-
+                
             }
 
             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');
-                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"
@@ -580,48 +576,48 @@
                 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);
                 });
-
+                
                 $("#Front_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{
                 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){
+                
             }
 
 
@@ -631,14 +627,14 @@
 
             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');
@@ -646,7 +642,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];
@@ -654,7 +650,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"
@@ -664,7 +660,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);
@@ -676,29 +672,29 @@
             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);
                 });
                 $("#Back_Border").html(jContent.join(""));
             }
         }
 
-        function rightContent(rb_height, rb_width, rb_x, rb_y) {
-
+        function rightContent(rb_height, rb_width, rb_x, rb_y){
+				
             var objects = rightCanvas.getObjects();
-
-            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){
+                
             }
 
 
@@ -709,13 +705,13 @@
             var el_id = document.getElementById('svgRightContent');
 
             var getAllImageTag = el_id.getElementsByTagName('image');
-            for (var i = 0; i < getAllImageTag.length; i++) {
+            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');
@@ -723,7 +719,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];
@@ -731,7 +727,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"
@@ -741,7 +737,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);
@@ -753,29 +749,29 @@
             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 leftContent(lb_height, lb_width, lb_x, lb_y) {
-
+        function leftContent(lb_height, lb_width, lb_x, lb_y){
+				
             var objects = leftCanvas.getObjects();
-
-            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){
+                
             }
 
 
@@ -785,14 +781,14 @@
 
             var el_id = document.getElementById('svgLeftContent');
 
-            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');
@@ -800,7 +796,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];
@@ -808,7 +804,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];
                 var defaultXvalue = lb_x;
@@ -817,7 +813,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);
@@ -829,9 +825,9 @@
             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(""));
             }
@@ -843,16 +839,16 @@
             // 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);
@@ -888,12 +884,12 @@
                 // canvas.renderAll();
                 objects[i].setCoords();
             }
-
+            
             // console.log(objects)
             canvas.renderAll();
         }
 
-        function sendSVG() {
+        function sendSVG(){
             var svgText = document.getElementById('printFileDiv').innerHTML;
 
 
@@ -907,7 +903,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");
@@ -916,7 +912,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);
@@ -929,14 +925,14 @@
             /* setTimeout(function(){
                window.location = "{{ url('admin/orders/view') }}" + "/" + "{{ $order_item_array[0]->CartKey  }}"
             },2000); */
-        }
+		}
 
         function toDataURL(url, callback) {
             var xhr = new XMLHttpRequest();
             xhr.onload = function() {
                 var reader = new FileReader();
                 reader.onloadend = function() {
-                    callback(reader.result);
+                callback(reader.result);
                 }
                 reader.readAsDataURL(xhr.response);
             };
@@ -947,5 +943,4 @@
     </script>
 
 </body>
-
-</html>
\ No newline at end of file
+</html>
