diff --git a/app/Http/Controllers/admin/AdminController.php b/app/Http/Controllers/admin/AdminController.php
index e8910bb..4f7d7e3 100644
--- a/app/Http/Controllers/admin/AdminController.php
+++ b/app/Http/Controllers/admin/AdminController.php
@@ -98,6 +98,17 @@ class AdminController extends Controller
 			->with('order_item_array', $order_item_array);
 	}
 
+	public function downloadPrintFile_shorts($dc, $id)
+	{
+		$AdminModel 	    = new AdminModel;
+		$client_design_array 	= $AdminModel->selectClientDesign($dc);
+		$order_item_array 	= $AdminModel->selectOrderItem('Id', $id);
+		// var_dump($order_item_array);
+		return view('admin_pages.download_pages.shorts')
+			->with('client_design_array', $client_design_array)
+			->with('order_item_array', $order_item_array);
+	}
+
 	public function downloadPrintFile_mask($dc, $id)
 	{
 		$AdminModel 	    = new AdminModel;
diff --git a/app/Http/routes.php b/app/Http/routes.php
index d7cb0cb..79341e6 100644
--- a/app/Http/routes.php
+++ b/app/Http/routes.php
@@ -85,6 +85,7 @@ Route::group(['middleware' => 'auth'], function () {
 		// Download Routes /////////////////
 		Route::get('orders/download/tshirt/{ck}/{id}', 'admin\AdminController@downloadPrintFile_tshirt');
 		Route::get('orders/download/jersey/{ck}/{id}', 'admin\AdminController@downloadPrintFile_jersey');
+		Route::get('orders/download/shorts/{ck}/{id}', 'admin\AdminController@downloadPrintFile_shorts');
 		Route::get('orders/download/mask/{ck}/{id}', 'admin\AdminController@downloadPrintFile_mask');
 		// End Download Routes /////////////
 
diff --git a/resources/views/admin_pages/download_pages/jersey.blade.php b/resources/views/admin_pages/download_pages/jersey.blade.php
index 68075f5..e9e364b 100644
--- a/resources/views/admin_pages/download_pages/jersey.blade.php
+++ b/resources/views/admin_pages/download_pages/jersey.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,25 +9,26 @@
     <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="svgJockTag" style="display:none;"></div>
 
-    <p>Please wait... Click here to go <a href="#" id="close_window" >back</a></p>
+    <p>Please wait... Click here to go <a href="#" id="close_window">back</a></p>
 
-    <canvas id="frontCanvas" width="220px" height="380px" style="border 1px solid black; display:none;" ></canvas>
-	<canvas id="backCanvas" width="220px" height="380px" style="border 1px solid black; display:none;" ></canvas>
+    <canvas id="frontCanvas" width="220px" height="380px" style="border 1px solid black; display:none;"></canvas>
+    <canvas id="backCanvas" width="220px" height="380px" style="border 1px solid black; display:none;"></canvas>
 
     <div id="printFileDiv" style="display:none;"></div>
-    
+
     <form id="myForm" action="{{ url('admin/orders/download') }}" method="post" accept-charset="UTF-8"></form>
-        <p id="log"></p>
+    <p id="log"></p>
     <!-- jQuery 3 -->
     <script src="{{ asset('/bower_components/jquery/dist/jquery.min.js') }}"></script>
     <!-- fabric js 1.7.20 -->
@@ -35,83 +37,87 @@
     <script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
 
     <script>
-       function logSubmit(event) {
-        log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
+        function logSubmit(event) {
+            log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
 
-        event.preventDefault();
+            event.preventDefault();
         }
 
         var form = document.getElementById('myForm');
-        var  log = document.getElementById('log');
+        var log = document.getElementById('log');
         form.addEventListener('submit', logSubmit);
 
 
-        var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas"));
-        tmp_frontCanvas = {!! json_encode($client_design_array[0]->ContentFront) !!};
+        var frontCanvas = new fabric.StaticCanvas(document.getElementById("frontCanvas"));
+        tmp_frontCanvas = {
+            !!json_encode($client_design_array[0] - > ContentFront) !!
+        };
         frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
             frontCanvas.renderAll();
 
-            setTimeout(function(){
+            setTimeout(function() {
 
                 frontCanvas.backgroundImage = 0;
                 frontCanvas.clear();
                 frontCanvas.renderAll();
 
-                setTimeout(function(){
+                setTimeout(function() {
 
                     frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
                         frontCanvas.renderAll();
                         frontCanvas.selection = false;
                     });
 
-                },1000);
+                }, 1000);
 
-            } ,500);
+            }, 500);
         });
 
-        var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas") );
-        tmp_backCanvas = {!! json_encode($client_design_array[0]->ContentBack) !!};
+        var backCanvas = new fabric.StaticCanvas(document.getElementById("backCanvas"));
+        tmp_backCanvas = {
+            !!json_encode($client_design_array[0] - > ContentBack) !!
+        };
         backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
             backCanvas.renderAll();
 
-            setTimeout(function(){
+            setTimeout(function() {
 
                 backCanvas.backgroundImage = 0;
                 backCanvas.clear();
                 backCanvas.renderAll();
 
-                setTimeout(function(){
+                setTimeout(function() {
 
                     backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
                         backCanvas.renderAll();
                         backCanvas.selection = false;
                     });
 
-                },1000);
-            } ,500);
+                }, 1000);
+            }, 500);
 
         });
-          
-        
-        function loadPrintFile(){
+
+
+        function loadPrintFile() {
             var path = 'http://localhost/uploads/images/';
             var template_code = "{{ $client_design_array[0]->TemplateCode }}";
             var size = "{{ $order_item_array[0]->JerseySize }}";
-           
-            // console.log();
-            var svgLocation = "{{ config('site_config.images_directory')  }}" + "uniform-templates/" + template_code + "/JERSEY/SIZES/" +  size +  ".svg";
 
-            $.ajax({    //create an ajax request to load_page.php
+            // console.log();
+            var svgLocation = "{{ config('site_config.images_directory')  }}" + "uniform-templates/" + template_code + "/JERSEY/SIZES/" + size + ".svg";
+
+            $.ajax({ //create an ajax request to load_page.php
                 type: "GET",
-                url : svgLocation,
-                dataType: "text",   //expect html to be returned.,
+                url: svgLocation,
+                dataType: "text", //expect html to be returned.,
                 // headers: {  
                 //     'Access-Control-Allow-Origin': '*' 
                 // },
-                success: function(response){
+                success: function(response) {
 
                     $("#printFileDiv").html(response)
-      
+
                     var fb = document.getElementById('Front_Border');
                     var fb_x = $(fb).children("rect").attr("x");
                     var fb_y = $(fb).children("rect").attr("y");
@@ -135,36 +141,38 @@
                     var lb_y = $(lb).children("rect").attr("y");
                     var lb_height = $(lb).children("rect").attr("height");
                     var lb_width = $(lb).children("rect").attr("width");
-                    
-                   
+
+
                     setTimeout(function() {
 
                         loadTemplateDesign();
-                        frontContent(fb_height, fb_width, fb_x,  fb_y);
+                        frontContent(fb_height, fb_width, fb_x, fb_y);
                         backContent(bb_height, bb_width, bb_x, bb_y);
 
-                        setTimeout(function(){
+                        setTimeout(function() {
                             sendSVG();
-                        },2000);
+                        }, 2000);
 
                     }, 3000);
                 }
             });
         }
 
-        function loadTemplateDesign(){
-           
-            tmpdetails = {!! json_encode($client_design_array[0]->TemplateDesign) !!};
+        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;
@@ -172,111 +180,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 = {};
@@ -286,117 +294,116 @@
                                 // 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();
 
-            
-           // CHANGING FRONT NUMBER BASED ON USER INPUTS    
-            try{
+
+            // CHANGING FRONT NUMBER BASED ON USER INPUTS    
+            try {
                 var p_number = '{{ $order_item_array[0]->Number }}';
                 for (var j in objects) {
                     var id = objects[j].get('idNumber');
-                    if(id == "NumberFront"){
+                    if (id == "NumberFront") {
                         objects[j].setText(p_number.toString());
                         objects[j].centerH();
                         objects[j].setCoords();
                         break;
                     }
-                    
+
 
                 }
-            
-            }catch(e){
+
+            } catch (e) {
                 console.log('Error: ' + e);
             }
-            
-            try{
+
+            try {
                 for (var i in objects) {
-                    if(objects[i].get('type') == "text"){
-                        if(objects[i].getStroke() != null){
+                    if (objects[i].get('type') == "text") {
+                        if (objects[i].getStroke() != null) {
                             var getStrokeWidth = objects[i].getStrokeWidth();
                             objects[i].setStrokeWidth(getStrokeWidth * 4);
                         }
                     }
-                }	
-            }catch(e){
+                }
+            } catch (e) {
                 console.log('Error: ' + e);
             }
-            
+
             zoomIn(frontCanvas, fb_width, fb_height, "Front");
             var content = frontCanvas.toSVG();
             document.getElementById('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 + ")");
             }
 
             var allGs = el_id.getElementsByTagName('g');
             var consolidatedContents1 = [];
             item = {}
 
-            for (var i=0; i < allGs.length ; i++) {
+            for (var i = 0; i < allGs.length; i++) {
                 var finalXvalue = 0;
                 var finalYvalue = 0;
                 var gElem = allGs[i];
 
-                
+
                 var children = gElem.childNodes;
 
                 var xforms = gElem.getAttribute('transform');
                 // console.log(xforms);
-                var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
-                
+                var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
+
                 var firstX = parts[1],
                     firstY = parts[2];
                 //  x="3009.299" y="363.447"
@@ -407,41 +414,41 @@
                 var finalXvalue = Number(firstX) + Number(defaultXvalue);
                 var finalYvalue = Number(firstY) + Number(defaultYvalue);
                 //console.log(finalXvalue, finalYvalue);
-                gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue);
+                gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue, finalYvalue);
                 // console.log(gElem.transform.baseVal.getItem(0));
                 var s = new XMLSerializer();
-                
+
                 var str = s.serializeToString(gElem);
-                
+
                 // this for the fucking excess of curve text
-                var scale  = /scale\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
-                
-                if(scale != null){
+                var scale = /scale\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
+
+                if (scale != null) {
                     consolidatedContents1.push(str);
                 }
             }
-		
+
             var contents = JSON.stringify(consolidatedContents1);
-            
+
             var con = jQuery.parseJSON(contents);
             var countContents = con.length;
-            if(countContents != 0){ // check if content
+            if (countContents != 0) { // check if content
                 var jContent = $.map(con, function(value) {
-                    return(value);
+                    return (value);
                 });
                 $("#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 {
                 var p_number = '{{ $order_item_array[0]->Number }}';
                 for (var j in objects) {
                     var id = objects[j].get('idNumber');
-                    if(id == "NumberBack"){
+                    if (id == "NumberBack") {
                         objects[j].setText(p_number.toString());
                         objects[j].centerH();
                         objects[j].setCoords();
@@ -449,36 +456,36 @@
                     }
 
                 }
-                
-            }catch(e){
+
+            } catch (e) {
                 console.log('Error: ' + e);
             }
-            
-            try{
+
+            try {
                 var p_name = '{{ $order_item_array[0]->Name }}';
-                for (var j in objects){
+                for (var j in objects) {
                     var id = objects[j].get('idNumber');
-                    if(id == "LastNameBack"){
+                    if (id == "LastNameBack") {
                         objects[j].setText(p_name.toString());
                         objects[j].centerH();
                         objects[j].setCoords();
                         break;
                     }
                 }
-            }catch(e){
+            } catch (e) {
                 console.log('Error: ' + e);
             }
-            
-            try{
+
+            try {
                 for (var i in objects) {
-                    if(objects[i].get('type') == "text"){
-                        if(objects[i].getStroke() != null){
+                    if (objects[i].get('type') == "text") {
+                        if (objects[i].getStroke() != null) {
                             var getStrokeWidth = objects[i].getStrokeWidth();
                             objects[i].setStrokeWidth(getStrokeWidth * 4);
                         }
                     }
                 }
-            }catch(e){
+            } catch (e) {
                 console.log('Error: ' + e);
             }
 
@@ -489,14 +496,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');
@@ -504,7 +511,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];
@@ -512,7 +519,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"
@@ -522,7 +529,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);
@@ -534,30 +541,30 @@
             var con = jQuery.parseJSON(contents);
 
             var countContents = con.length;
-            if(countContents != 0){ // check if content
+            if (countContents != 0) { // check if content
                 var jContent = $.map(con, function(value) {
-                    return(value);
+                    return (value);
                 });
                 $("#Back_Border").html(jContent.join(""));
             }
         }
-        
+
         function zoomIn(canvas, actualSizeX, actualSizeY, side) {
             var canvasScale = 1;
             var SCALE_FACTOR = 1.2;
             // TODO limit the max canvas zoom in
             //Your scale factor is 2.172 (1086/500 = 2.172) or 2.13 (639/300 = 2.13) to be more precise.
             // X = WIDTH and Y = HEIGHT
-            if(side == "Front" || side == "Back"){
+            if (side == "Front" || side == "Back") {
                 var SCALE_FACTOR_X = actualSizeX / 222;
                 var SCALE_FACTOR_Y = actualSizeY / 380;
             }
 
-            if(side == "Right" || side == "Left"){
+            if (side == "Right" || side == "Left") {
                 var SCALE_FACTOR_X = actualSizeX / 96;
                 var SCALE_FACTOR_Y = actualSizeY / 112;
             }
-           
+
             canvasScale = canvasScale * SCALE_FACTOR;
 
             canvas.setHeight(canvas.getHeight() * SCALE_FACTOR_Y);
@@ -586,7 +593,7 @@
             canvas.renderAll();
         }
 
-        function sendSVG(){
+        function sendSVG() {
             var svgText = document.getElementById('printFileDiv').innerHTML;
 
 
@@ -600,7 +607,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");
@@ -609,7 +616,8 @@
             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);
@@ -619,12 +627,12 @@
             document.body.appendChild(form);
             form.submit();
             alert("Print file is successfully generated!");
-            setTimeout(function(){
-               window.location = "{{ url('admin/orders/view') }}" + "/" + "{{ $order_item_array[0]->CartKey  }}"
-            },2000);
-		}
-
+            setTimeout(function() {
+                window.location = "{{ url('admin/orders/view') }}" + "/" + "{{ $order_item_array[0]->CartKey  }}"
+            }, 2000);
+        }
     </script>
 
 </body>
+
 </html>
\ No newline at end of file
diff --git a/resources/views/admin_pages/download_pages/shorts.blade.php b/resources/views/admin_pages/download_pages/shorts.blade.php
new file mode 100644
index 0000000..f1f3c29
--- /dev/null
+++ b/resources/views/admin_pages/download_pages/shorts.blade.php
@@ -0,0 +1,638 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Customize Uniform</title>
+    <link href="{{asset('/designer/custom-fonts/custom-fonts.php')}}" rel='stylesheet' type='text/css'>
+    <style>
+        canvas {
+            display: none;
+        }
+    </style>
+</head>
+
+<body onload="loadPrintFile()">
+
+    <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>
+
+    <canvas id="frontCanvas" width="220px" height="380px" style="border 1px solid black; display:none;"></canvas>
+    <canvas id="backCanvas" width="220px" height="380px" style="border 1px solid black; display:none;"></canvas>
+
+    <div id="printFileDiv" style="display:none;"></div>
+
+    <form id="myForm" action="{{ url('admin/orders/download') }}" method="post" accept-charset="UTF-8"></form>
+    <p id="log"></p>
+    <!-- jQuery 3 -->
+    <script src="{{ asset('/bower_components/jquery/dist/jquery.min.js') }}"></script>
+    <!-- fabric js 1.7.20 -->
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
+    <!-- curvetext -->
+    <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}`;
+
+            event.preventDefault();
+        }
+
+        var form = document.getElementById('myForm');
+        var log = document.getElementById('log');
+        form.addEventListener('submit', logSubmit);
+
+
+        var frontCanvas = new fabric.StaticCanvas(document.getElementById("frontCanvas"));
+        tmp_frontCanvas = {
+            !!json_encode($client_design_array[0] - > ContentFront) !!
+        };
+        frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
+            frontCanvas.renderAll();
+
+            setTimeout(function() {
+
+                frontCanvas.backgroundImage = 0;
+                frontCanvas.clear();
+                frontCanvas.renderAll();
+
+                setTimeout(function() {
+
+                    frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
+                        frontCanvas.renderAll();
+                        frontCanvas.selection = false;
+                    });
+
+                }, 1000);
+
+            }, 500);
+        });
+
+        var backCanvas = new fabric.StaticCanvas(document.getElementById("backCanvas"));
+        tmp_backCanvas = {
+            !!json_encode($client_design_array[0] - > ContentBack) !!
+        };
+        backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
+            backCanvas.renderAll();
+
+            setTimeout(function() {
+
+                backCanvas.backgroundImage = 0;
+                backCanvas.clear();
+                backCanvas.renderAll();
+
+                setTimeout(function() {
+
+                    backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
+                        backCanvas.renderAll();
+                        backCanvas.selection = false;
+                    });
+
+                }, 1000);
+            }, 500);
+
+        });
+
+
+        function loadPrintFile() {
+            var path = 'http://localhost/uploads/images/';
+            var template_code = "{{ $client_design_array[0]->TemplateCode }}";
+            var size = "{{ $order_item_array[0]->JerseySize }}";
+
+            // console.log();
+            var svgLocation = "{{ config('site_config.images_directory')  }}" + "uniform-templates/" + template_code + "/JERSEY/SIZES/" + size + ".svg";
+
+            $.ajax({ //create an ajax request to load_page.php
+                type: "GET",
+                url: svgLocation,
+                dataType: "text", //expect html to be returned.,
+                // headers: {  
+                //     'Access-Control-Allow-Origin': '*' 
+                // },
+                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");
+                    var fb_height = $(fb).children("rect").attr("height");
+                    var fb_width = $(fb).children("rect").attr("width");
+
+                    var bb = document.getElementById('Back_Border');
+                    var bb_x = $(bb).children("rect").attr("x");
+                    var bb_y = $(bb).children("rect").attr("y");
+                    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");
+
+
+                    setTimeout(function() {
+
+                        loadTemplateDesign();
+                        frontContent(fb_height, fb_width, fb_x, fb_y);
+                        backContent(bb_height, bb_width, bb_x, bb_y);
+
+                        setTimeout(function() {
+                            sendSVG();
+                        }, 2000);
+
+                    }, 3000);
+                }
+            });
+        }
+
+        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") {
+                var setMainColor = obj[0].mainColor[0].solidColor;
+                $('#Left_MainColor').attr("fill", setMainColor);
+                $('#Right_MainColor').attr("fill", setMainColor);
+            } else {
+                var gradientColor1 = obj[0].mainColor[0].gradientColor1;
+                var gradientColor2 = obj[0].mainColor[0].gradientColor2;
+                var gradientColorOffset1 = obj[0].mainColor[0].gradientColorOffset1;
+                var gradientColorOffset2 = obj[0].mainColor[0].gradientColorOffset2;
+                var gradientFor = "Body";
+                var trimCount = 0;
+                var gradientIds = "Gradient_List";
+
+                loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
+
+                $('#Left_MainColor').attr("fill", "url(#Body_Gradient)");
+                $('#Right_MainColor').attr("fill", "url(#Body_Gradient)");
+
+            } ///////////// END for mainColor
+
+            ///////////// for patternColor
+            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
+                    var k, arrayPatternColor = [];
+                    for (i = 0; i < pColors; i++) {
+                        l = i + 1;
+                        k = "PatternColor" + l;
+                        temp = {};
+                        temp['PatternColor' + l] = obj[0].patternColors[0].patternColors[i][k];
+                        arrayPatternColor.push(temp);
+                    }
+                    var getPatternURL = pattern_properties(getMainBodyPatternId);
+                    var front_clipathval = "url(#Left_MainColor_Clippath_URL)";
+                    var back_clipathval = "url(#Right_MainColor_Clippath_URL)";
+
+                    var front_svgpatternid = "Left_MainColor_Pattern";
+                    var back_svgpatternid = "Right_MainColor_Pattern";
+
+                    var front_idappend = "Left_MainColor";
+                    var back_idappend = "Right_MainColor";
+
+                    if (obj[0].patternColors[0].patternColorType == "Solid") {
+
+                        loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
+                        loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
+
+                    } 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) {
+                //error
+            } /////////////END PatternColor
+
+
+            var Trims = obj[0].Trims['length'];
+            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 {
+                        var gradientColor1 = obj[0].Trims[i][trimNum].gradientColor1;
+                        var gradientColor2 = obj[0].Trims[i][trimNum].gradientColor2;
+                        var gradientColorOffset1 = obj[0].Trims[i][trimNum].gradientColorOffset1;
+                        var gradientColorOffset2 = obj[0].Trims[i][trimNum].gradientColorOffset2;
+                        var gradientFor = "Trim";
+                        var gradientIds = "Gradient_List";
+
+                        loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
+                        $('#Left_' + SVGTrimId).attr("fill", "url(#" + SVGTrimId + "_Gradient)");
+                        $('#Right_' + SVGTrimId).attr("fill", "url(#" + SVGTrimId + "_Gradient)");
+                    }
+
+                    ///// TRIM PATTERN		
+                    try {
+                        var getTrimPattern = obj[0].Trims[i][trimNumPattern].patternId;
+
+                        if ((getTrimPattern != "noPattern") || (getTrimPattern != "")) {
+                            var pColors = obj[0].Trims[i][trimNumPattern].patternColors['length'];
+                            if (pColors > 0) {
+                                var k, arrayPatternColor = [];
+                                for (a = 0; a < pColors; a++) {
+                                    l = a + 1;
+                                    k = "PatternColor" + l;
+                                    temp = {};
+                                    temp['PatternColor' + l] = obj[0].Trims[i][trimNumPattern].patternColors[a][k];
+                                    arrayPatternColor.push(temp);
+                                }
+                                // console.log(arrayPatternColor);
+                                // console.log(obj[0].Trims[i][trimNumPattern].patternColorType);
+
+                                var getPatternURL = pattern_properties(getTrimPattern);
+                                var front_clipathval = "url(#Left_Trim_" + trimCount + "_Clippath_URL)";
+                                var back_clipathval = "url(#Right_Trim_" + trimCount + "_Clippath_URL)";
+
+                                var front_svgpatternid = "Left_Trim_" + trimCount + "_Pattern";
+                                var back_svgpatternid = "Right_Trim_" + trimCount + "_Pattern";
+
+                                var front_idappend = "Left_Trim_" + trimCount;
+                                var back_idappend = "Right_Trim_" + trimCount;
+                                // console.log(getPatternURL);
+
+                                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) {
+
+                    }
+                }
+            }
+
+        }
+
+        function frontContent(fb_height, fb_width, fb_x, fb_y) {
+            var objects = frontCanvas.getObjects();
+
+
+            // CHANGING FRONT NUMBER BASED ON USER INPUTS    
+            try {
+                var p_number = '{{ $order_item_array[0]->Number }}';
+                for (var j in objects) {
+                    var id = objects[j].get('idNumber');
+                    if (id == "NumberFront") {
+                        objects[j].setText(p_number.toString());
+                        objects[j].centerH();
+                        objects[j].setCoords();
+                        break;
+                    }
+
+
+                }
+
+            } catch (e) {
+                console.log('Error: ' + e);
+            }
+
+            try {
+                for (var i in objects) {
+                    if (objects[i].get('type') == "text") {
+                        if (objects[i].getStroke() != null) {
+                            var getStrokeWidth = objects[i].getStrokeWidth();
+                            objects[i].setStrokeWidth(getStrokeWidth * 4);
+                        }
+                    }
+                }
+            } catch (e) {
+                console.log('Error: ' + e);
+            }
+
+            zoomIn(frontCanvas, fb_width, fb_height, "Front");
+            var content = frontCanvas.toSVG();
+            document.getElementById('svgRightContent').innerHTML = content;
+
+            var el_id = document.getElementById('svgRightContent');
+
+            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 + ")");
+            }
+
+            var allGs = el_id.getElementsByTagName('g');
+            var consolidatedContents1 = [];
+            item = {}
+
+            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="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);
+                }
+            }
+
+            var contents = JSON.stringify(consolidatedContents1);
+
+            var con = jQuery.parseJSON(contents);
+            var countContents = con.length;
+            if (countContents != 0) { // check if content
+                var jContent = $.map(con, function(value) {
+                    return (value);
+                });
+                $("#Left_Border").html(jContent.join(""));
+            }
+        }
+
+        function backContent(bb_height, bb_width, bb_x, bb_y) {
+
+            var objects = backCanvas.getObjects();
+
+            try {
+                var p_number = '{{ $order_item_array[0]->Number }}';
+                for (var j in objects) {
+                    var id = objects[j].get('idNumber');
+                    if (id == "NumberBack") {
+                        objects[j].setText(p_number.toString());
+                        objects[j].centerH();
+                        objects[j].setCoords();
+                        break;
+                    }
+
+                }
+
+            } catch (e) {
+                console.log('Error: ' + e);
+            }
+
+            try {
+                var p_name = '{{ $order_item_array[0]->Name }}';
+                for (var j in objects) {
+                    var id = objects[j].get('idNumber');
+                    if (id == "LastNameBack") {
+                        objects[j].setText(p_name.toString());
+                        objects[j].centerH();
+                        objects[j].setCoords();
+                        break;
+                    }
+                }
+            } catch (e) {
+                console.log('Error: ' + e);
+            }
+
+            try {
+                for (var i in objects) {
+                    if (objects[i].get('type') == "text") {
+                        if (objects[i].getStroke() != null) {
+                            var getStrokeWidth = objects[i].getStrokeWidth();
+                            objects[i].setStrokeWidth(getStrokeWidth * 4);
+                        }
+                    }
+                }
+            } catch (e) {
+                console.log('Error: ' + e);
+            }
+
+
+            zoomIn(backCanvas, bb_width, bb_height, "Back");
+            var content = backCanvas.toSVG();
+            document.getElementById('svgLeftContent').innerHTML = content;
+
+            var el_id = document.getElementById('svgLeftContent');
+
+            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 + ")");
+            }
+
+            var allGs = el_id.getElementsByTagName('g');
+
+            var consolidatedContents = [];
+            item = {}
+
+            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;
+
+                //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 contents = JSON.stringify(consolidatedContents);
+            var con = jQuery.parseJSON(contents);
+
+            var countContents = con.length;
+            if (countContents != 0) { // check if content
+                var jContent = $.map(con, function(value) {
+                    return (value);
+                });
+                $("#Right_Border").html(jContent.join(""));
+            }
+        }
+
+        function zoomIn(canvas, actualSizeX, actualSizeY, side) {
+            var canvasScale = 1;
+            var SCALE_FACTOR = 1.2;
+            // TODO limit the max canvas zoom in
+            //Your scale factor is 2.172 (1086/500 = 2.172) or 2.13 (639/300 = 2.13) to be more precise.
+            // X = WIDTH and Y = HEIGHT
+            if (side == "Front" || side == "Back") {
+                var SCALE_FACTOR_X = actualSizeX / 222;
+                var SCALE_FACTOR_Y = actualSizeY / 380;
+            }
+
+            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);
+            canvas.setWidth(canvas.getWidth() * SCALE_FACTOR_X);
+
+            var objects = canvas.getObjects();
+            for (var i in objects) {
+                var scaleX = objects[i].scaleX;
+                var scaleY = objects[i].scaleY;
+                var left = objects[i].left;
+                var top = objects[i].top;
+
+                var tempScaleX = scaleX * SCALE_FACTOR_X;
+                var tempScaleY = scaleY * SCALE_FACTOR_Y;
+                var tempLeft = left * SCALE_FACTOR_X;
+                var tempTop = top * SCALE_FACTOR_Y;
+
+                objects[i].scaleX = tempScaleX;
+                objects[i].scaleY = tempScaleY;
+                objects[i].left = tempLeft;
+                objects[i].top = tempTop;
+
+                objects[i].setCoords();
+            }
+
+            canvas.renderAll();
+        }
+
+        function sendSVG() {
+            var svgText = document.getElementById('printFileDiv').innerHTML;
+
+
+            var form = document.querySelector('form');
+            // form.setAttribute("method", "post");
+            // form.setAttribute("id", "frm_svg");
+            // form.setAttribute("action", "");
+            // form.setAttribute("accept-charset", "UTF-8");
+
+            var hiddenSVGField = document.createElement("input");
+            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");
+            hiddenToken.setAttribute("value", "{{ csrf_token() }}");
+
+            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  }}");
+
+
+            form.appendChild(hiddenSVGField);
+            form.appendChild(hiddenToken);
+            form.appendChild(hiddenDetails);
+
+            document.body.appendChild(form);
+            form.submit();
+            alert("Print file is successfully generated!");
+            setTimeout(function() {
+                window.location = "{{ url('admin/orders/view') }}" + "/" + "{{ $order_item_array[0]->CartKey  }}"
+            }, 2000);
+        }
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
