From 729454a11393b8c1d7a90b52774ad5bc2336925e Mon Sep 17 00:00:00 2001
From: franknstayn <begorniafrankjohn@gmail.com>
Date: Mon, 4 Apr 2022 23:00:53 +0800
Subject: [PATCH] updated

---
 .../download_pages/hoodie.blade.php           | 591 +++++++++---------
 1 file changed, 299 insertions(+), 292 deletions(-)
diff --git a/resources/views/admin_pages/download_pages/hoodie.blade.php b/resources/views/admin_pages/download_pages/hoodie.blade.php
index 6e43064..0285bf8 100644
--- a/resources/views/admin_pages/download_pages/hoodie.blade.php
+++ b/resources/views/admin_pages/download_pages/hoodie.blade.php
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,10 +9,11 @@
     <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>
@@ -20,16 +22,16 @@
     <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>
     <!-- width="157.936" height="173.727" -->
-    <canvas  id="frontCanvas"  width="157.936px" height="173.727px" style="border: 1px solid black;"></canvas>
-    <canvas  id="backCanvas"  width="157.936" height="173.727px" 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="157.936px" height="173.727px" style="border: 1px solid black;"></canvas>
+    <canvas id="backCanvas" width="157.936" height="173.727px" 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 -->
@@ -38,56 +40,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,'"'));
+            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 (leftContentRaw) {
+                var tmp_leftCanvas = JSON.parse(leftContentRaw.replace(/&quot;/g, '"'));
             }
-            if(rightContentRaw) {
-                var tmp_rightCanvas = JSON.parse(rightContentRaw.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) ? tmp_frontCanvas : {});
             loadDesigns(backCanvas, (tmp_backCanvas) ? tmp_backCanvas : {});
             loadDesigns(leftCanvas, (tmp_leftCanvas) ? tmp_leftCanvas : {});
-            loadDesigns(rightCanvas, (tmp_rightCanvas) ? tmp_rightCanvas : {} );
+            loadDesigns(rightCanvas, (tmp_rightCanvas) ? tmp_rightCanvas : {});
 
         } catch (error) {
-            console.log(error)  
+            console.log(error)
         }
 
 
@@ -97,17 +99,20 @@
             let objects = [];
 
             Object.entries(canvas_json.objects).forEach(([key, item]) => {
-                if(item.type == 'image') {
-                   toDataURL(item.src, function(src) {
-                        const images = {...item,  src }
+                if (item.type == 'image') {
+                    toDataURL(item.src, function(src) {
+                        const images = {
+                            ...item,
+                            src
+                        }
                         objects.push(images)
 
                     })
-                }else {
+                } else {
                     objects.push(item)
                 }
             });
-            
+
             console.log("objects", objects)
             var final_json = "";
             setTimeout(() => {
@@ -117,23 +122,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);
         }
 
@@ -183,7 +188,7 @@
 
 
 
-        
+
 
 
 
@@ -209,7 +214,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) {
@@ -255,24 +260,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 + "/HOODIE/SIZES/" +  size +  ".svg";
 
-            $.ajax({    //create an ajax request to load_page.php
+
+            var svgLocation = path + "uniform-templates/" + template_code + "/HOODIE/SIZES/" + size + ".svg";
+
+            $.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");
@@ -296,40 +301,40 @@
                     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);
 
-                        setTimeout(function(){
+                        setTimeout(function() {
                             sendSVG();
-                        },2000);
+                        }, 2000);
 
                     }, 3000);
                 }
             });
         }
 
-        function loadTemplateDesign(){
-           
+        function loadTemplateDesign() {
+
             // tmpdetails = {!! json_encode($client_design_array[0]->TemplateDesign) !!};
             var tmpdetails = "{{ $client_design_array[0]->TemplateDesign }}";
             // var obj = JSON.parse(tmpdetails);
-            var obj = JSON.parse(tmpdetails.replace(/&quot;/g,'"'))
-            
+            var obj = JSON.parse(tmpdetails.replace(/&quot;/g, '"'))
+
 
             ///////////// 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 +342,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 front_svgpatternid = "Front_MainColor_Pattern"; 
-                        var back_svgpatternid = "Back_MainColor_Pattern"; 
+                    var getPatternURL = pattern_properties(getMainBodyPatternId);
+                    var front_clipathval = "url(#Front_MainColor_Clippath_URL)";
+                    var back_clipathval = "url(#Back_MainColor_Clippath_URL)";
 
-                        var front_idappend = "Front_MainColor"; 
-                        var back_idappend = "Back_MainColor"; 
+                    var front_svgpatternid = "Front_MainColor_Pattern";
+                    var back_svgpatternid = "Back_MainColor_Pattern";
 
-                        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);
+                    var front_idappend = "Front_MainColor";
+                    var back_idappend = "Back_MainColor";
 
-                        }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)"
-                            }];
+                    if (obj[0].patternColors[0].patternColorType == "Solid") {
 
-                            // console.log(GradientPatternColor);
+                        loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
+                        loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
 
-                            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);
-                            
-                        }
+                    } 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);
+
+                    }
                 }
 
-            }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"){
-                        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);
 
-                    }else{
+                    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);
+
+                    } 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,72 +456,71 @@
                                 // 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 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 getPatternURL = pattern_properties(getTrimPattern);
+                                var front_clipathval = "url(#Front_Trim_" + trimCount + "_Clippath_URL)";
+                                var back_clipathval = "url(#Back_Trim_" + trimCount + "_Clippath_URL)";
 
-                                    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_svgpatternid = "Front_Trim_" + trimCount + "_Pattern";
+                                var back_svgpatternid = "Back_Trim_" + trimCount + "_Pattern";
 
-                                        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);
-                                        
-                                    }
+                                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);
+
+                                }
                             }
-                            
+
                         }
-                    }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);
                         }
@@ -530,30 +534,30 @@
                     //         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');
@@ -562,76 +566,76 @@
 
 
             try {
-                for (var i=0; i < allGs.length ; i++) {
-                var finalXvalue = 0;
-                var finalYvalue = 0;
-                var gElem = allGs[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 firstX = parts[1],
-                    firstY = parts[2];
-                //  x="3009.299" y="363.447"
-                var defaultXvalue = fb_x;
-                var defaultYvalue = fb_y;
+                    var children = gElem.childNodes;
 
-                //console.log(firstX, firstY);
-                var finalXvalue = Number(firstX) + Number(defaultXvalue);
-                var finalYvalue = Number(firstY) + Number(defaultYvalue);
-                //console.log(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){
-                    consolidatedContents1.push(str);
+                    var xforms = gElem.getAttribute('transform');
+                    var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
+
+                    var firstX = parts[1],
+                        firstY = parts[2];
+                    //  x="3009.299" y="363.447"
+                    var defaultXvalue = fb_x;
+                    var defaultYvalue = fb_y;
+
+                    //console.log(firstX, firstY);
+                    var finalXvalue = Number(firstX) + Number(defaultXvalue);
+                    var finalYvalue = Number(firstY) + Number(defaultYvalue);
+                    //console.log(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) {
+                        consolidatedContents1.push(str);
+                    }
                 }
-            } 
             } catch (error) {
 
                 console.log(error)
-                
+
             }
 
 
-		
+
             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) {
+
             }
 
 
@@ -641,14 +645,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');
@@ -657,31 +661,31 @@
             item = {}
 
             try {
-                for (var i=0; i < allGs.length ; i++) {
-                var finalXvalue = 0;
-                var finalYvalue = 0;
-                var gElem = allGs[i];
-                var children = gElem.childNodes;
+                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 firstX = parts[1],
-                    firstY = parts[2];
-                // x="460.455" y="363.397"
-                var defaultXvalue = bb_x;
-                var defaultYvalue = bb_y;
+                    var xforms = gElem.getAttribute('transform');
+                    //console.log(xforms);
+                    var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
+                    var firstX = parts[1],
+                        firstY = parts[2];
+                    // x="460.455" y="363.397"
+                    var defaultXvalue = bb_x;
+                    var defaultYvalue = bb_y;
 
-                //console.log(firstX, firstY);
-                var finalXvalue = Number(firstX) + Number(defaultXvalue);
-                var finalYvalue = Number(firstY) + Number(defaultYvalue);
-                gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue);
+                    //console.log(firstX, firstY);
+                    var finalXvalue = Number(firstX) + Number(defaultXvalue);
+                    var finalYvalue = Number(firstY) + Number(defaultYvalue);
+                    gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue, finalYvalue);
 
-                var s = new XMLSerializer();
-                var str = s.serializeToString(gElem);
-                consolidatedContents.push(str);
+                    var s = new XMLSerializer();
+                    var str = s.serializeToString(gElem);
+                    consolidatedContents.push(str);
 
-            }
+                }
             } catch (error) {
                 console.log(error)
             }
@@ -692,29 +696,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) {
+
             }
 
 
@@ -725,13 +729,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');
@@ -739,7 +743,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];
@@ -747,7 +751,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"
@@ -757,7 +761,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);
@@ -769,29 +773,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) {
+
             }
 
 
@@ -801,14 +805,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');
@@ -816,7 +820,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];
@@ -824,7 +828,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;
@@ -833,7 +837,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);
@@ -845,9 +849,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(""));
             }
@@ -859,17 +863,17 @@
             // 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") {
                 // width="157.936px" height="173.727px" // hoodie
                 var SCALE_FACTOR_X = actualSizeX / 157.936;
                 var SCALE_FACTOR_Y = actualSizeY / 173.727;
             }
 
-            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);
@@ -905,12 +909,12 @@
                 // canvas.renderAll();
                 objects[i].setCoords();
             }
-            
+
             // console.log(objects)
             canvas.renderAll();
         }
 
-        function sendSVG(){
+        function sendSVG() {
             var svgText = document.getElementById('printFileDiv').innerHTML;
 
 
@@ -924,7 +928,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");
@@ -933,7 +937,9 @@
             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  }}");
+            hiddenDetails.setAttribute("value", "{{ $order_item_array[0]->ProductName }} _ {{ $order_item_array[0]->Size }}" );
 
 
             form.appendChild(hiddenSVGField);
@@ -946,14 +952,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);
             };
@@ -964,4 +970,5 @@
     </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
