<!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">
        <meta name="csrf_token" content="{{ csrf_token() }}" />
        <title>Designer</title>

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
        <!-- ---- Include the above in your HEAD tag -------- -->
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        
        <link href="{{asset('/designer/css/custom-style.css')}}" rel="stylesheet">
        <link href="{{asset('/designer/css/tab-styles.css')}}" rel="stylesheet">
        <link href="{{asset('/designer/css/input-range-style.css')}}" rel="stylesheet">
        <link href="{{asset('/designer/css/spectrum.css')}}" rel="stylesheet">
        <link href="{{asset('/designer/css/one-by-one-slider.css')}}" rel="stylesheet">
        <link href="{{asset('/designer/custom-fonts/custom-fonts.php')}}" rel='stylesheet' type='text/css'>
        
        <style>
            .carousel-indicators > li,
            .carousel-indicators > li.active{
                width: 100px;
                height: 25px;
                border-radius: 0;
                border: solid 1px grey;
                background:white ;
                text-indent: 0;
            }
            .carousel-indicators > li.active {
                background: lightgrey;
            }
            .custom-navbar-brand>img {
                display: block;
                height: 36px;
                margin-top: -9px;
            }
            .body-spacer{
                padding: 20px;
            }
            .visualizer-container{
                height: 510px; 
                width: 100%; 
                margin: auto;
            }
            .panel-default{
                font-size: 12px;
            }

            .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
				color: #000;
    			background-color: #f5f5f5;
			}
			.nav-pills>li>a{
				border-radius: 2px;
            }
            #wrapper{
				width: 1300px;
				overflow: hidden;
				margin: 0 auto;
            }
            #btn-body-gradient{
				/*	background: black; For browsers that do not support gradients */
				background: -webkit-linear-gradient(black, white); /* For Safari 5.1 to 6.0 */
				background: -o-linear-gradient(black, white); /* For Opera 11.1 to 12.0 */
				background: -moz-linear-gradient(black, white); /* For Firefox 3.6 to 15 */
				background: linear-gradient(black, white); /* Standard syntax */
				-webkit-text-stroke-width: 1px;
   				-webkit-text-stroke-color: white;
				border-radius: 0px;
				border-color: #000000;
				width: 45px;
				height: 45px;
				padding:5px;
            }

            #btn-body-pattern-gradient{
				background: -webkit-linear-gradient(black, white); /* For Safari 5.1 to 6.0 */
				background: -o-linear-gradient(black, white); /* For Opera 11.1 to 12.0 */
				background: -moz-linear-gradient(black, white); /* For Firefox 3.6 to 15 */
				background: linear-gradient(black, white); /* Standard syntax */
				-webkit-text-stroke-width: 1px;
   				-webkit-text-stroke-color: white;
				border-radius: 0px;
				border-color: #000000;
				width: 45px;
				height: 45px;
				padding:5px;
			}

            .patternThumbs, .patternTrimThumbs {
				width: 45px;
				height: 45px;
				padding:5px;
				border-radius: 0px;
				border-color: #000000;
            }
            
            .patternBox{
				margin-left: 8px;
				margin-right: 8px;
            }
            
            .row-trim-gradient{
				display:none;
				margin-top: 20px;
            }
            
            #row-body-gradient{
                display:none;
                margin-top: 20px;
            }

            #addNewTextId{
				display: none;
            }

            .canvas-container{
				margin:auto;
            }
            
            .addMarginLeft{
                margin-left:5px;
                margin-bottom: 5px;
            }

            #textProperties{
				display: none;
            }
            
            .font-name-bottom{
				background-color: #f3f3f3;
				padding: 5px;
				margin-top: 14px;
				font-size: 10px
			}
			.custom-font-td:hover{
				background-color: #f2f2f2; !important;
				cursor: pointer;
			}
            .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .clipart-thumnail a>img, .clipart-thumnail>img{
				height: 100px;
			}
			.clipart-thumnail {
				border: none;
			}

            .sendSelectedObjectToFront{
				height: 45px;
				width: 45px;
				background-image: url("{{asset('/images/bring_forward.png')}}");
				background-repeat: no-repeat;
				background-size: cover;
			}
			.sendSelectedObjectBack{
				height: 45px;
				width: 45px;
                background-image: url("{{asset('/images/send_backward.png')}}");
				background-repeat: no-repeat;
				background-size: cover;
			}

            .team-name-standard{
                height: 45px;
				width: 45px;
				background-image: url("{{asset('/images/bring_forward.png')}}");
				background-repeat: no-repeat;
				background-size: cover;
            }
            .center-vertical{
                height: 45px;
				width: 45px;
				background-image: url("{{asset('/images/align-v1.png')}}");
				background-repeat: no-repeat;
				background-size: cover;
            }

            .center-horizontal{
                height: 45px;
				width: 45px;
				background-image: url("{{asset('/images/align-h1.png')}}");
				background-repeat: no-repeat;
				background-size: cover;
            }
        </style>

    </head>
    <body>
        @include('layout.navbar')
        <div class="body-spacer"></div>
        <div id="wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-7 col-md-7  col-sm-12">
                        <div  class="panel with-nav-tabs panel-default " style="min-height:300px; height: 602px;">
                            <div class="panel-heading">
                                <ul class="nav nav-tabs nav-justified" id="uniform_sides">
                                    @foreach($templatepaths_arrays as $k => $template)
                                        <li class="@if ($template->Side == 'Front') active @endif" data-tab="li_{{  $template->Side }}_{{  $template->Type }}" data-object-svg="objSVG_{{  $template->Type }}_{{  $template->Side }}" data-canvas-id="canvas_{{  $template->Type }}_{{  $template->Side }}" >
                                            <a i href="#a_{{  $template->Side }}_{{  $template->Type }}" data-toggle="tab" class="svg">
                                                {{  $template->Type }}  {{  $template->Side }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                            <div class="panel-body">
                                <div class="tab-content">
                                    @foreach($templatepaths_arrays as $k => $template)
                                        <div class="tab-pane @if ($template->Side == 'Front') active @endif" id="a_{{  $template->Side }}_{{  $template->Type }}">
                                            <div class="col-md-12" style="overflow: auto;">
                                                <div class="visualizer-container divName">
                                                    <div id="objSVG_{{  $template->Type }}_{{  $template->Side }}" height="504px" style="position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">
                                                    </div>
                                                    
                                                    @if($template->Type == "Jersey" AND $template->Side == "Front")
                                                        <canvas id="canvas_{{  $template->Type }}_{{  $template->Side }}" width="219px" height="383px" style="margin-top:57px; margin-left: -4px;"></canvas>
                                                    @endif

                                                    @if($template->Type == "Jersey" AND $template->Side == "Back")
                                                        <canvas id="canvas_{{  $template->Type }}_{{  $template->Side }}" width="220px" height="385px" style="margin-top:13px;"></canvas>
                                                    @endif

                                                    @if($template->Type == "Shorts" AND $template->Side == "Right")
                                                        <canvas id="canvas_{{  $template->Type }}_{{  $template->Side }}" width="171px;" height="365px" style="margin-top:110px; margin-left: 0px;" ></canvas>
                                                    @endif

                                                    @if($template->Type == "Shorts" AND $template->Side == "Left")
                                                        <canvas id="canvas_{{  $template->Type }}_{{  $template->Side }}" width="171px" height="365px" style="margin-top:110px; margin-left: 0px;" ></canvas>
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-5 col-md-5 col-sm-12">
                        <div class="panel with-nav-tabs panel-default">
                            <div class="panel-heading">
                                <ul class="nav nav-tabs nav-justified" id="side-controls">
                                    <li class="active"><a href="#tab-change-color" id="tab-change-color1" data-toggle="tab"><b style="color:red;">Step 1</b><br>Uniform Color</a></li>
                                    <li><a href="#tab-add-text" id="tab-add-text1" data-toggle="tab"><b style="color:red;">Step 2</b><br>Team Name</a></li>
                                    <li><a href="#tab-add-number" id="tab-add-number1" data-toggle="tab"><b style="color:red;">Step 3</b><br>Name / Number</a></li>
                                    <li><a href="#tab-clipart" id="tab-clipart1" data-toggle="tab"><i class="fa fa-shirtsinbulk" aria-hidden="true"></i><br>Add<br>Clipart(s)</a></li>
                                    <li><a href="#tab-upload-image" id="tab-upload-image1" data-toggle="tab"><i class="fa fa-image" aria-hidden="true"></i><br>Add<br>Image(s)</a></li>
                                </ul>
                            </div>
                            <div class="panel-body" style="height: 441px; overflow:auto;">
                                <div class="tab-content">
                                    <div class="tab-pane fade in active" id="tab-change-color">
                                        <h4>Body Color</h4>

                                        <ul class="nav nav-pills nav-stacked col-md-4">
                                            <li class="active"><a href="#tab_basecolor" data-toggle="pill">Solid Color</a></li>
                                            <li><a href="#tab_gradient" data-toggle="pill">Gradient</a></li>
                                            <li><a href="#tab_bodypattern" data-toggle="pill">Pattern</a></li>
                                        </ul>
                                        <div class="tab-content col-md-8">
                                            
                                            <div class="tab-pane active" id="tab_basecolor">
                                                <input type="hidden" id="body-color-type" value="Solid">
                                                <table class="table table-custom" >
                                                    <tr>
                                                        <td>Solid Color</td>
                                                    </tr>	
                                                    <tr>
                                                        <td>
                                                            <input type="hidden" name="mainColor" id="mainColor"/>
                                                            <br><small><i>* Click on box to Choose Color</i></small>
                                                        </td>
                                                    </tr>	
                                                </table>
                                            </div>

                                            <div class="tab-pane" id="tab_gradient">
                                                <table class="table table-custom" >
                                                    <tr>
                                                        <td>Choose Gradient Color</td>
                                                    </tr>	
                                                    <tr>
                                                        <td>
                                                            <button type="button" class="btn" id="btn-body-gradient" title="Gradient Color"></button>
                                                            <br><small><i>* Click on box to choose Gradient Color</i></small>
                                                        </td>
                                                    </tr>	
                                                </table>

                                                <div id="row-body-gradient">
                                                    <div class="row">
                                                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                                            Gradient Color:
                                                        </div>
                                                    </div>
                                                    <div class="row">						
                                                        <div class="form-group col-md-2 col-sm-2 col-xs-2">
                                                            <input type="hidden" class="gradientColor pull-right" name="Body_Gradient_Color1" id="Body_Gradient_Color1" data-gradient-type="Body" value="rgb(0, 0, 0)" />
                                                        </div>
                                                        <div class="form-group col-md-10 col-sm-10 col-xs-10">
                                                            <input type="range" id="Offset_Body_Gradient_Color1" data-gradient-id="Body_Gradient_Color1" class="offsetGradientColor form-control input-sm" value="100" min="0" max="10" />
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group col-md-2 col-sm-2 col-xs-2">
                                                            <input type="hidden" class="gradientColor pull-right" name="Body_Gradient_Color2" id="Body_Gradient_Color2" data-gradient-type="Body" value="rgb(255, 255, 255)" />
                                                        </div>
                                                        <div class="form-group col-md-10 col-sm-10 col-xs-10">
                                                            <input type="range" id="Offset_Body_Gradient_Color2" data-gradient-id="Body_Gradient_Color2" class="offsetGradientColor form-control input-sm" value="0" min="0" max="10" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="tab-pane" id="tab_bodypattern">
                                                <input type="hidden" id="body-pattern-color-type" value="Solid" />
                                                <table class="table table-custom">
                                                    <tr>
                                                        <td>
                                                            Select Pattern
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-center">
                                                            <div class="carousel slide multi-item-carousel" id="theCarousel" data-interval="false">
                                                                <div class="carousel-inner">
                                                                    @foreach ($pattern_arrays as $i => $val)
                                                                        <div class="item @if ($i == 0) active @endif">
                                                                            <div class="btn-group patternBox ">
                                                                                <button type="button" data-pattern-path="{{ $val[0]->SVGPath }}" class="patternThumbs btn" data-id="{{ $val[0]->PatternId }}" style="background-image:url('{{ config('site_config.images_directory') }}{{ $val[0]->PatternThumbnail }}'); background-size:cover; background-repeat: no-repeat;" @if ($i == 0) disabled @endif> @if ($i == 0) <i class="fa fa-2 fa-check" aria-hidden="true"></i> @endif</button>	
                                                                            </div>
                                                                        </div>
                                                                    @endforeach
                                                                </div> 
                                                                <a class="left carousel-control" href="#theCarousel" data-slide="prev" style="width:50px"><i class="fa fa-chevron-left custom-chevron-left"></i></a>
                                                                <a class="right carousel-control" href="#theCarousel" data-slide="next" style="width:50px"><i class="fa fa-chevron-right custom-chevron-right"></i></a>
                                                            </div> 
                                                        </td>
                                                    </tr>
                                                </table>
                                                <div class="row">
                                                    <div id="patternColorChoices">
                                                        <input type="hidden"  name="body-pattern-name" id="body-pattern-name" value="noPattern,0">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        @for($i = 1; $i <=  $template_arrays[0]->Trim; $i++)
                                           <div class="row">
                                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                                    <hr style="margin-top: 10px; margin-bottom: 1px;">
                                                </div>
                                            </div>
                                            <h4>Trim {{ $i }}</h4>							
                                            <ul class="nav nav-pills nav-stacked col-md-4">
                                                <li class="active"><a href="#tab_trim_basecolor{{ $i }}" data-toggle="pill">Base Color</a></li>
                                                <li><a href="#tab_trimpattern{{ $i }}" data-toggle="pill">Pattern</a></li>
                                            </ul>

                                            <div class="tab-content col-md-8">
                                                <div class="tab-pane active" id="tab_trim_basecolor{{ $i }}">
                                                    <input type="hidden" id="trim-{{ $i }}-color-type" value="Solid">
                                                    <table class="table table-custom">
                                                        <tr>
                                                            <td>Solid Color</td>
                                                            <!-- <td>Gradient Color</td> -->
                                                        </tr>	
                                                        <tr>
                                                            <td>
                                                                <input type="hidden" class="trimColor" data-trim-num="{{ $i }}" name="trim{{ $i }}" id="Trim_{{ $i }}" value="rgb(204, 204, 204)" />
                                                                <br><small><i>* Click on box to Choose Color</i></small>
                                                            </td>
                                                        </tr>	
                                                    </table>
                                                    <div class="row-trim-gradient" id="row-trim-{{ $i }}-gradient">
                                                        <b>Gradient Color:</b>		
                                                        <div class="row">						
                                                            <div class="form-group col-md-2 col-sm-2 col-xs-2">
                                                                <input type="hidden" class="gradientColor pull-right" name="Trim_{{ $i }}_Gradient_Color1" id="Trim_{{ $i }}_Gradient_Color1" data-gradient-type="Trim" data-trim-num="{{ $i }}" value="rgb(0, 0, 0)" />
                                                            </div>
                                                            <div class="form-group col-md-10 col-sm-10 col-xs-10">
                                                                <input type="range" id="Offset_Trim_{{ $i }}_Gradient_Color1" data-gradient-id="Trim_{{ $i }}_Gradient_Color1" class="offsetGradientColor form-control input-sm" value="100" min="0" max="10" />
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="form-group col-md-2 col-sm-2 col-xs-2">
                                                                    <input type="hidden" class="gradientColor pull-right" name="Trim_{{ $i }}_Gradient_Color2" id="Trim_{{ $i }}_Gradient_Color2" data-gradient-type="Trim" data-trim-num="{{ $i }}" value="rgb(255, 255, 255)" />
                                                            </div>
                                                            <div class="form-group col-md-10 col-sm-10 col-xs-10">
                                                                <input type="range" id="Offset_Trim_{{ $i }}_Gradient_Color2" data-gradient-id="Trim_{{ $i }}_Gradient_Color2" class="offsetGradientColor form-control input-sm" value="0" min="0" max="10" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="tab-pane" id="tab_trimpattern{{ $i }}">
                                                    <input type="hidden" id="trim-{{ $i }}-pattern-color-type" value="Solid">
                                                    <table class="table table-custom">
                                                        <tr>
                                                            <td>
                                                                Select Pattern
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="text-center">
                                                                <div class="carousel slide multi-item-carousel" id="theCarousel{{ $i }}" data-interval="false">
                                                                    <div class="carousel-inner">
                                                                        @foreach ($pattern_arrays as $r => $val)
                                                                            <div class="item @if ($r == 0) active @endif">
                                                                                <div class="btn-group patternBox ">
                                                                                    <button type="button" data-pattern-path="{{ $val[0]->SVGPath }}" class="patternTrimThumbs patternTrim{{ $i }} btn" data-id="{{ $val[0]->PatternId }}"  data-trim="{{ $i }}" style="background-image:url('{{ config('site_config.images_directory') }}{{ $val[0]->PatternThumbnail }}'); background-size:cover; background-repeat: no-repeat;" @if ($r == 0) disabled @endif> @if ($r == 0) <i class="fa fa-2 fa-check" aria-hidden="true"></i> @endif</button>	
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    </div> 
                                                                        <a class="left carousel-control" href="#theCarousel{{ $i }}" data-slide="prev" style="width:50px"><i class="fa fa-chevron-left custom-chevron-left"></i></a>
                                                                        <a class="right carousel-control" href="#theCarousel{{ $i }}" data-slide="next" style="width:50px"><i class="fa fa-chevron-right custom-chevron-right"></i></a>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <div class="row">
                                                        <div id="trim-{{ $i }}-pattern-color-choices">
                                                            <input type="hidden"  name="Trim_{{ $i }}_patternName" id="Trim_{{ $i }}_patternName" value="noPattern,0" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endfor

                                    </div>

                                    <div class="tab-pane fade" id="tab-add-text">
										<div id="addNewTextId">
											<div class="row">
												<div class="form-group col-sm-12">
													<button type="button" class="btn btn-danger pull-right btn-sm remove addMarginLeft" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button>
													<button type="button" onclick="addNewText();" class="btn btn-primary pull-right btn-sm"><i class="fa fa-plus" aria-hidden="true"></i> New Text</button>
												</div>
											</div>
											<div class="row">
												<div class="form-group col-sm-12">
													<label>Enter team name here</label>
													<textarea name="editedTextInput" id="editedTextInput" class="form-control" placeholder="Enter team name here"></textarea>

												</div>
											</div>
										</div>
										<div id="enterTextId">
											<div class="row">
												<div class="form-group col-sm-12">
													<label>Enter team name here</label>
													<textarea name="textInput" id="textInput" class="form-control" placeholder="Enter team name here"></textarea>
													<!--span id="errfirstName" style="color: #dd4b39"></span> !-->
												</div>

												<div class="form-group col-sm-12">
													<button type="button" id="okBtn" onclick="addText();" class="btn btn-primary btn-block btn-sm">OK</button>
												</div>
											</div>
										</div>
                                        <div id="textProperties">
                                            @include('designer.text_properties')
                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="tab-add-number">
                                        <input type="hidden" id="countbtn" value="0" />
                                        <div id="addNumberId" style="display:none;">
                                            <div class="row">
                                                <div class="form-group col-sm-12">
                                                    <button type="button" class="btn btn-danger pull-right btn-sm removeNameNumber addMarginLeft" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button>
                                                    <div id="NameNumberId"></div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="form-group col-sm-12">
                                                    <label>Edit Name / Number</label>
                                                    <textarea name="editedNumberInput" id="editedNumberInput" class="form-control" placeholder="Enter number here"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="enterNumberId">
                                            <div class="row">
                                                <div class="form-group col-sm-12">
                                                    <button type="button" id="btnNumber" class="btn btn-warning btn-block btn-lg" onclick="addNameNumber();"><i class="fa fa-plus" aria-hidden="true"></i> Add Name and Number</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="numberProperties" style="display:none;">
                                            @include('designer.text_properties')
                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="tab-clipart">
										<div id="tab-clipart-content">
										</div>
									</div>

                                    <div class="tab-pane fade" id="tab-upload-image">
										<!-- <div class="row">
											<div class="form-group col-md-12">
												<button id="img-remove-btn" type="button" class="btn btn-danger pull-right btn-sm remove addMarginLeft" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button>
											</div>
										</div> -->
										<div class="row">
											<div class="form-group col-md-12">
												<h4>Add Image(s)</h4>
												<hr>
												<input type="file" id="upload-images" class="form-control" placeholder="Choose Image">
											</div>
										</div>
										<!-- <hr> -->
										<div id="image-properties">
										    
											<div class="row">
												<div class="col-md-6">
													<h4>Image Properties</h4>
												</div>
												<div class="col-md-6">
													<button class="btn btn-sm btn-default pull-right addMarginLeft" id="btn-close-clipart-properties" title="Close Clipart Properties"><i class="fa fa-remove" aria-hidden="true"></i> Close</button>
													<button id="img-remove-btn" type="button" class="btn btn-danger pull-right btn-sm remove addMarginLeft" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button>
												</div>
											</div>
											<div class="row">
												<div class="form-group col-md-3 col-sm-3 col-xs-3">
													<label>Opacity</label>
												</div>
												<div class="form-group col-md-6 col-sm-6 col-xs-6">

													<input type="range"  class="form-control input-sm opacityTextSlider" value="1" min="0" max="10"  />
												</div>
												<div class="form-group col-md-3 col-sm-3 col-xs-3">
													<input type="text" style="margin-top:5px;" class="form-control input-sm  text-center opacityTextValue" />
												</div>
											</div>
											<div class="row">
												<div class="form-group col-md-3 col-sm-3 col-xs-3">
													<label>Rotate</label>
												</div>
												<div class="form-group col-md-6 col-sm-6 col-xs-6">

													<input type="range" class="form-control input-sm rotateTextSlider" value="0" min="-180" max="180"  />
												</div>
												<div class="form-group col-md-3 col-sm-3 col-xs-3">
													<input type="text" style="margin-top:5px;" class="form-control input-sm text-center rotateTextValue"/>
												</div>
											</div>
											<div class="row">
												<div class="form-group col-md-5 col-sm-6 col-xs-6">
													<label>Layer Order</label><br>
													<button class="btn btn-sm btn-default sendSelectedObjectToFront" title="Bring Forward"></button>
													<button class="btn btn-sm btn-default sendSelectedObjectBack"  title="Send Backward"></button>
												</div>
												<div class="form-group col-md-7 col-sm-6 col-xs-6">
													<label>Position</label><br>
													<button class="btn btn-sm btn-default " style="margin:2px;" onclick="centerOnly();">Center</button>
													<button class="btn btn-sm btn-default" style="margin:2px;" onclick="centerVer();"> <img src="images/align-v1.png" height="16px;" /> Center Vertical</button>
													<button class="btn btn-sm btn-default" style="margin:2px;"  onclick="centerHor();" > <img src="images/align-h1.png" height="16px;" /> Center Horizontal</button>
												</div>
											</div>
											<hr>
										
										</div>
									</div>
                                    
                                </div>
                            </div>
                            <div class="panel-footer">
								<div class="row">
									<div class="form-group col-md-12">
                                        <a href="{{ url('user/my-designs') }}" type="button" class="btn btn-lg btn-default pull-right addMarginLeft"><i class="fa fa-remove" aria-hidden="true"></i> Cancel</a>
                                        <button type="button" class="btn btn-lg btn-primary pull-right" data-toggle="modal" data-target="#modalDesignName"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save Design</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- modals -->
            <div class="modal fade" id="fontsModal" role="dialog">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Fonts</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <table class="table table-bordered">

                                        @foreach($fonts_array as $fonts)

                                            @define $i++

                                            @if ($i % 4 == 1)
                                                <tr>
                                            @endif
                                            <td class="custom-font-td col-md-3 text-center" style="padding: 0px;" data-font-size="{{ $fonts->additionalSize }}" data-font-style="{{ $fonts->fontFamily }}" data-font-display="{{ $fonts->fontNameDisplay }}">
                                                <div style="font-family:'{{ $fonts->fontFamily }}'; font-size:1.5em; padding: 5px;" class="add-text-content"></div>
                                                <div class="font-name-bottom">{{ $fonts->fontNameDisplay }} <i class=""></i></div>
                                            </td>
                                            
                                            @if ($i % 4 == 0) 
                                              </tr>
                                            @endif
                                        @endforeach

                                        <!-- //if the counter is not divisible by 3, we have an open row -->
                                        @define  $spacercells = 4 - ($i % 4);
                                        @if ($spacercells < 4)
                                            @define $j
                                            @for($j=1; $j<=$spacercells; $j++) 
                                                <td></td>
                                            
                                            @endfor
                                           </tr>
                                        @endif

                                       
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modalDesignName" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                            <h4 class="modal-title">Design Name</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-xs-12">
                                    <label>Name your design</label>
                                        <textarea class="form-control" id="design_name"></textarea>
                                        <br>
                                        <button type="button" id="btn_submitDesignName" class="btn btn-lg btn-primary btn-block">Submit</button>
                                        <br><br>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <!-- end modals -->

        <!-- Footer -->
        @include('layout.footer')
        <!-- End Footer -->
        
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.15/fabric.min.js"></script>
        <script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script> 
        <script src="{{asset('/designer/js/spectrum.js')}}"></script>

        <script src="{{asset('/designer/js/custom-script.js')}}"></script>

        <script>
            
            $(document).ready(function() {
                myCart();
                $('#toTop').click(function() {
                    $('body,html').animate({scrollTop:0},800);
                }); 

                // $('#custom-navbar-brand').html('<img src="{{asset("/images/logo.png")}}">');
                
                // calling functions 
              
                changeData();
                colorPickerCustom();
                templateColors('{{ $template_arrays[0]->TemplateCode }}');
                loadClipartContent();
               
                //  end call
                
                $('.multi-item-carousel .item').each(function(){
                    var next = $(this).next();
                        if (!next.length) {
                            next = $(this).siblings(':first');
                        }

                        next.children(':first-child').clone().appendTo($(this));
                        

                    for (var i=0; i<2; i++){
                        
                        next=next.next(); 
                        
                        if (!next.length){ 
                            next=$(this).siblings(':first');
                        }
                        next.children(':first-child').clone().appendTo($(this));
                    }

                });

                initCanvas();
                
                setTimeout(function(){
                    loadTemplateDesign();
                }, 3000);
                
            });
            
            // design saving 
            $(document).on('button click', '#btn_submitDesignName', function(){
                
                var design_name = $('#design_name').val();
                if(design_name != ""){
                    submitSaveDesign(design_name);
                }else{
                    alert("Please enter your design name.");
                    $('#design_name').focus();
                }
                
            });

            function submitSaveDesign(design_name){
                newformSaveDesign			=	document.createElement('form');
                newformSaveDesign.name		=	'formSaveDesign';
                newformSaveDesign.method	=	'POST';
                newformSaveDesign.action	=	"{{url('designer/a/save-design')}}";

                var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                for (var i = 0; i < SideAndPath.length; i++) {
                    var sideName = SideAndPath[i]['Side'];
                    var type = SideAndPath[i]['Type'];

                    var contentName = "content_" + type + "_" + sideName;
                    //console.log(canvasName);
                    contentName = JSON.stringify(window['canvas_' + type + '_' + sideName].toObject(['idNumber'])); // = new fabric.Canvas(canvasName);
                    //console.log(contentName);


                    var inputName = "json_" + type + "_" + sideName;
                    var hiddenFieldContentDesign = "field_" + type + "_" + sideName;

                    hiddenFieldContentDesign = document.createElement("input");
                    hiddenFieldContentDesign.setAttribute("type", "hidden");
                    hiddenFieldContentDesign.setAttribute("name", inputName);
                    hiddenFieldContentDesign.setAttribute("value", contentName);
                    newformSaveDesign.appendChild(hiddenFieldContentDesign);
                }

                var hiddenFieldTemplateDetails = document.createElement("input");
                hiddenFieldTemplateDetails.setAttribute("type", "hidden");
                hiddenFieldTemplateDetails.setAttribute("name", "templateDetails");
                hiddenFieldTemplateDetails.setAttribute("value",  exportSVG());
                newformSaveDesign.appendChild(hiddenFieldTemplateDetails);

                var hiddenField_design_name = document.createElement("input");
                hiddenField_design_name.setAttribute("type", "hidden");
                hiddenField_design_name.setAttribute("name", "design_name");
                hiddenField_design_name.setAttribute("value", design_name);
                newformSaveDesign.appendChild(hiddenField_design_name);

                var hiddenField_token = document.createElement("input");
                hiddenField_token.setAttribute("type", "hidden");
                hiddenField_token.setAttribute("name", "_token");
                hiddenField_token.setAttribute("value", "<?= csrf_token(); ?>");
                newformSaveDesign.appendChild(hiddenField_token);

                document.body.appendChild(newformSaveDesign);
                //console.log(exportSVG());
                newformSaveDesign.submit();
            }

            function exportSVG(){

                var finalJSON = [];
                var arrayMainColor = [];
                var arrayTrim = [];
                var arrpatternColors = [];
                var temp;

                var arrayPatternColors = [];
                var value = $('#body-pattern-name').val();
                var p = value.split(',');
                patternId  = p[0];
                patternNoOFColors = p[1];

                if(patternNoOFColors > 0){
                    arrayPatternColors.push({
                        patternId : patternId,
                        patternColorType : $('#body-pattern-color-type').val(),
                        patternGradientColor1 : $('#Body_Pattern_Gradient_Color1').val(),
                        patternGradientColor2 : $('#Body_Pattern_Gradient_Color2').val(),
                        patternGradientOffset1 : $('#Offset_Body_Pattern_Gradient_Color1').val() * 10 + "%",
                        patternGradientOffset2 : $('#Offset_Body_Pattern_Gradient_Color2').val() * 10 + "%",
                        patternOpacity: $('#opacityPatternValue').val() / 10,
                        patternColors : arrpatternColors

                    });
                    for (i = 1; i <=  patternNoOFColors; i++){
                        temp = {};
                            temp['PatternColor' + i] = $('#PatternColor'+i).val();
                        arrpatternColors.push(temp);
                    }
                }

                arrayMainColor.push({
                    type : $('#body-color-type').val(),
                    solidColor: $('#mainColor').val(),
                    // gradientColorId: 'gradientColor',
                    gradientColor1: $('#Body_Gradient_Color1').val(),
                    gradientColor2: $('#Body_Gradient_Color2').val(),
                    gradientColorOffset1: $('#Offset_Body_Gradient_Color1').val() * 10 + "%",
                    gradientColorOffset2: $('#Offset_Body_Gradient_Color2').val() * 10 + "%",

                });

                var numberOfTrimi = '{{ $template_arrays[0]->Trim }}';

                for(var i = 0; i < numberOfTrimi; i++){
                    var trimCount = i + 1;
                    var SVGTrimId = "Trim_"+trimCount;
                    var TrimVar = "Trim"+trimCount;
                    var TrimPattern = "Trim"+trimCount+"_Pattern";
                    // Trim_2_PatternColor1
                    var getPatternValue = $('#Trim_'+trimCount+'_patternName').val();
                    var res = getPatternValue.split(',');
                    Trim_patternId  = res[0];
                    Trim_patternNoOFColors = res[1];
                    
                    var trimpatterncolor = "Trim"+trimCount+"_patternColor";
                    // console.log(Trim_patternId);
                    var patterncolor = getTrimPatternColor(Trim_patternNoOFColors, trimCount);
                    arrayTrim.push({
                        [TrimVar] : {
                            // color : $('#Trim_'+trimCount).val(),
                            type : $('#trim-'+trimCount+'-color-type').val(),
                            solidColor: $('#Trim_'+trimCount).val(),
                            // gradientColorId: 'gradientColor',
                            gradientColor1: $('#Trim_'+trimCount+'_Gradient_Color1').val(),
                            gradientColor2: $('#Trim_'+trimCount+'_Gradient_Color2').val(),
                            gradientColorOffset1: $('#Offset_Trim_'+trimCount+'_Gradient_Color1').val() * 10 + "%",
                            gradientColorOffset2: $('#Offset_Trim_'+trimCount+'_Gradient_Color2').val() * 10 + "%",
                        },
                        [TrimPattern] :{
                            patternId : Trim_patternId,
                            patternColorType : $('#trim-'+trimCount+'-pattern-color-type').val(),
                            // patternGradientId : 'gradientPattern',
                            patternGradientColor1 : $('#Trim_'+trimCount+'_Pattern_Gradient_Color1').val(),
                            patternGradientColor2 : $('#Trim_'+trimCount+'_Pattern_Gradient_Color2').val(),
                            patternGradientOffset1 : $('#Offset_Trim_'+trimCount+'_Pattern_Gradient_Color1').val() * 10 + "%",
                            patternGradientOffset2 : $('#Offset_Trim_'+trimCount+'_Pattern_Gradient_Color2').val() * 10 + "%",
                            // patternOpacity: $('#opacityPatternValue').val() / 10,
                            patternColors : patterncolor
                        },
                        
                        //  [trimpatterncolor] : {
                        // 	patterncolor
                        //  }

                    });
                    ;
                    
                }



                finalJSON.push({
                    templateCode : '{{ $template_arrays[0]->TemplateCode }}',
                    mainColor : arrayMainColor,
                    patternColors : arrayPatternColors,
                    Trims: arrayTrim,
                    //contents: consolidatedContents,
                });

                // then to get the JSON string
                var jsonString = JSON.stringify(finalJSON);
                return jsonString;

                // console.log(jsonString);
            }
            
            function getTrimPatternColor(patternColor, trimCount){
                var trimcolor;
                var Trim_Pattern_Color_Array = [];
                for (k = 1; k <=  patternColor; k++){
                    trimcolor = {};
                        trimcolor['PatternColor' + k] = $('#Trim_'+trimCount+'_PatternColor'+k).val();
                    Trim_Pattern_Color_Array.push(trimcolor);
                    // Trim_Pattern_Color_Array.push($('#Trim_'+trimCount+'_PatternColor'+k).val());
                
                }
                return Trim_Pattern_Color_Array;
                // return false;
            }
            // end design saving
           

            $("#uniform_sides li").click(function() {
                onDeSelected();
                if($(this).attr('data-canvas-id') == "canvas_Jersey_Front"){
                    canvas = canvas_Jersey_Front;
                    //console.log(canvas);
                    canvasID = "canvas_Jersey_Front";
                    canvas.calcOffset();
                    initCanvas();

                }

                if($(this).attr('data-canvas-id') == "canvas_Jersey_Back"){
                    canvas = canvas_Jersey_Back;
                    //console.log(canvas);
                    canvasID = "canvas_Jersey_Back";
                    canvas.calcOffset();
                    initCanvas();

                }

                if($(this).attr('data-canvas-id') == "canvas_Shorts_Left"){
                    canvas = canvas_Shorts_Left;
                //	console.log(canvas);
                    canvasID = "canvas_Shorts_Left";
                    canvas.calcOffset();
                    initCanvas();

                }

                if($(this).attr('data-canvas-id') == "canvas_Shorts_Right"){
                    canvas = canvas_Shorts_Right;
                    //console.log(canvas);
                    canvasID = "canvas_Shorts_Right";
                    canvas.calcOffset();
                    initCanvas();

                }
            });

            // 1ST TAB <---####################################
            $('#btn-body-gradient').on("click", function() {
				
				$('#row-body-gradient').css({
					'display':'block'
				});
				
				$(this).html('<i class="fa fa-2 fa-check" aria-hidden="true"></i>');
				
				$('#body-color-type').val('Gradient');
				
				var gradientId = $(this).attr('id');
				
                var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                for (var i = 0; i < SideAndPath.length; i++) {
                    var sideName = SideAndPath[i]['Side'];
                    var type = SideAndPath[i]['Type'];
                    var pathLocation = SideAndPath[i]['Path'];

					var objectId = "objSVG_" + type + "_" + sideName;
					var SVGColorId = type +"_"+sideName+"_"+"Color";
					var getGradientId = sideName + "_" + type + "_Body_Gradient";
					try{
						document.getElementById(SVGColorId).setAttribute("fill", "url(#"+getGradientId+")");
					}catch(e){
						// error here
					}
				}
			});
            
            $(document).on('button click', '.patternThumbs', function(){

                var patternSVGPath = $(this).attr('data-pattern-path');

                var patternPath =  "{{ config('site_config.images_directory') }}" + patternSVGPath; 

                var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                for (var i = 0; i < SideAndPath.length; i++) {
                    var sideName = SideAndPath[i]['Side'];
                    var type = SideAndPath[i]['Type'];

                    var mainColorId = type + "_" + sideName + "_" + "Color";
                    var urlClippath = "url(#"+ mainColorId +"_Clippath_URL)"; 
                    var objectId = "objSVG_" + type + "_" + sideName;
                    var svgpatternidVal = mainColorId + "_Pattern";
                    var TypeAndSide =  type + "_" + sideName;

                    if(patternSVGPath == ""){
                        var a = document.getElementById(objectId);
                        var svgDoc = a.contentDocument;
                        try{
                            document.getElementById(svgpatternidVal).innerHTML = "";
                        }catch(e){
                            //console.log(e);
                        }
                    }else{
                        loadPattern(patternPath, urlClippath, svgpatternidVal, objectId, TypeAndSide);
                    }
                    
                    
                }

                var getId = $(this).attr('data-id');

                $.ajax({    //create an ajax request to load_page.php

                    type: "POST",
                    url: "{{url('designer/a/set-pattern')}}",
                    dataType: "html",   //expect html to be returned
                    data: {
                        patternId : getId
                    },
                    beforeSend:function(xhr){
                        var token = $('meta[name="csrf_token"]').attr('content');

                            if (token) {
                                return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                            }
                            xhr.setRequestHeader( 'X-Requested-With',  'XMLHttpRequest');
                    },
                    success: function(response){

                        if(getId != 'noPattern'){

                            $("#patternColorChoices").hide().html(response).fadeIn("slow");

                                loadPatternColor();
                                colorPickerCustom();


                        }else{
                                $("#patternColorChoices").html(response);
                                //backToNoPattern();

                        }
                    }
                });

                $(".patternThumbs").attr("disabled", false);
                $(".patternThumbs").html('').fadeIn("slow");
                $(this).attr("disabled", true);
                $(this).html('<i class="fa fa-2 fa-check" aria-hidden="true"></i>');

                $("#body-pattern-color-type").val("Solid");

            });
            
            $(document).on('button click', '.patternTrimThumbs', function(){

                var patternSVGPath = $(this).attr('data-pattern-path');
                var patternPath =  "{{ config('site_config.images_directory') }}" + patternSVGPath; 
                var getTrimId = $(this).attr('data-trim');
               
                var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                for (var i = 0; i < SideAndPath.length; i++) {
                    var sideName = SideAndPath[i]['Side'];
                    var type = SideAndPath[i]['Type'];

                    var mainColorId = type + "_" + sideName + "_" + "Color";
                    var urlClippath = "url(#"+type + "_" + sideName +"_Trim_"+ getTrimId +"_Clippath_URL)"; 
                    var objectId = "objSVG_" + type + "_" + sideName;
                    var svgpatternidVal = type + "_" + sideName + "_Trim_" + getTrimId + "_Pattern";
                    var TypeAndSide =  type + "_" + sideName + "_Trim_" + getTrimId;

                    if(patternSVGPath == ""){
                        var a = document.getElementById(objectId);
                        var svgDoc = a.contentDocument;
                        try{
                            document.getElementById(svgpatternidVal).innerHTML = "";
                        }catch(e){
                            //console.log(e);
                        }
                    }else{
                        loadPattern(patternPath, urlClippath, svgpatternidVal, objectId, TypeAndSide);
                    }
                }

                var getPatternId = $(this).attr('data-id');

                $.ajax({    //create an ajax request to load_page.php

                    type: "POST",
                    url: "{{url('designer/a/set-trim-pattern')}}",
                    dataType: "html",   //expect html to be returned
                    data: {
                        patternId : getPatternId,
                        trim : getTrimId,
                    },
                    beforeSend:function(xhr){
                        var token = $('meta[name="csrf_token"]').attr('content');

                            if (token) {
                                return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                            }
                            xhr.setRequestHeader( 'X-Requested-With',  'XMLHttpRequest');
                    },
                    success: function(response){

                        if(getPatternId != 'noPattern'){
                            $("#trim-"+getTrimId+"-pattern-color-choices").hide().html(response).fadeIn("slow");
                            loadPatternColor();
                            colorPickerCustom();
                        }else{
                                $("#trim-"+getTrimId+"-pattern-color-choices").hide().html(response).fadeIn("slow");
                    
                        }
                    } 
                });

                $(".patternTrim"+getTrimId).attr("disabled", false);
                $(".patternTrim"+getTrimId).html('').fadeIn("slow");
                $(this).attr("disabled", true);
                $(this).html('<i class="fa fa-2 fa-check" aria-hidden="true"></i>');
                $('#trim-'+getTrimId+'-pattern-color-type').val('Solid');

            });


            $(document).on('select click', '#btn-body-pattern-gradient', function() {
				var gradientId = $(this).attr('id');
				$('#body-pattern-color-type').val('Gradient');

				$("#row-body-pattern-gradient").css('display', 'block');
				$(this).html('<i class="fa fa-2 fa-check" aria-hidden="true"></i>');
                var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                for (var i = 0; i < SideAndPath.length; i++) {
                    var sideName = SideAndPath[i]['Side'];
                    var type = SideAndPath[i]['Type'];
                    var pathLocation = SideAndPath[i]['Path'];

					var objectId = "objSVG_" + type + "_" + sideName;
					var patternColorId = type + "_" + sideName + "_PatternColor1";
					// patternColorId = type + "_" + sideName + "_" + patternId;
					var getGradientId = sideName + "_" + type + "_Body_Pattern_Gradient";
					// Front_Jersey_PatternColor1
					try{
						document.getElementById(patternColorId).setAttribute("fill", "url(#"+getGradientId+")");
						// document.getElementById(patternColorId).setAttribute("fill", onMoveColor);
					}catch(e){
						// error here
					}
				}

			});

            function colorPickerCustom(){
                $('.sp-replacer').css({
                    'padding':'0px',
                    'height':'45px',
                    'width':'45px',
                    'radius': '2px'
                });

                $('.sp-preview').css({
                    'width':'45px',
                    'height':'45px',
                    'border':'none'
                });
                $('.sp-dd').css({
                    'display':'none'
                });
            }

            function changeData() {

                var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                for (var i = 0; i < SideAndPath.length; i++) {
                    var sideName = SideAndPath[i]['Side'];
                    var type = SideAndPath[i]['Type'];
                    var pathLocation = SideAndPath[i]['Path'];

                    var objectId = "objSVG_" + type + "_" + sideName;
                    var SVGColorId = type +"_"+sideName+"_Color";
                    var gradientIds = sideName+"_"+type+"_Gradients";
                    var gradientPrefix = sideName+"_"+type+"_";
                    if(!document.getElementById(objectId))
                    return false;
                    var tempPath = "{{ config('site_config.images_directory') }}" + pathLocation;
				    loadTemplate(tempPath, objectId, gradientIds, gradientPrefix);
                } 
            }

            function loadTemplate(tempPath, objectId, gradientIds, gradientPrefix){
                $.get(tempPath, null, function(data){
                    var svgNode = $("svg", data);
                    
                    var docNode = document.adoptNode(svgNode[0]);
                    $('#'+objectId).html(docNode);
                }, 'xml');
                
                setTimeout(function() {

                    var template_array = {!! json_encode($template_arrays) !!};
                    var TrimCount  = template_array[0]['Trim'];
                    var ListGradient = document.getElementById(gradientIds);
                    
                    $.ajax({ //create an ajax request to load_page.php

                        type: "POST",
                        url: "{{url('designer/a/gradient-append')}}",
                        data : {
                            gradientPrefix: gradientPrefix, 
                            TrimCount: TrimCount 
                        },
                        beforeSend:function(xhr){
                        var token = $('meta[name="csrf_token"]').attr('content');

                            if (token) {
                                return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                            }
                            xhr.setRequestHeader( 'X-Requested-With',  'XMLHttpRequest');
                        },
                        success: function(response) {
                            ListGradient.innerHTML = response;
                        }
                    });
                       
                }, 2000);
            }

            function loadPattern(svgpath, clipathval, svgpatternid, visualizerObject, TypeAndSide){
                $.get(svgpath, null, function(data){
                    var svgNode = $("svg", data);
                    var arrPath = [];
                    
                    var docNode = document.adoptNode(svgNode[0]);
                    // console.log(docNode);
                        for(var i = 0 ; i < docNode.querySelectorAll("path")['length'] ; i++){
                            j = i + 1;
                            k = "PatternColor" + j;

                            var pathPatterns = docNode.querySelectorAll("path")[i];
                        
                            // for setting clippath
                            var att = document.createAttribute("clip-path");      
                            att.value = clipathval;
                            pathPatterns.setAttributeNode(att);

                            // for set Pattern Id
                            var getPatternIdFromSVG = TypeAndSide +"_"+ pathPatterns.getAttributeNode('id').value
                            var att1 = document.createAttribute("id");      
                            att1.value = getPatternIdFromSVG;
                            pathPatterns.setAttributeNode(att1);

                            // for PatternColor
                            // var patterColor  = document.createAttribute("fill");      
                            // patterColor.value = getPatternColor[i][k];
                            // pathPatterns.setAttributeNode(patterColor);

                            var s = new XMLSerializer();	
                            var str = s.serializeToString(pathPatterns);
                            
                            arrPath.push(str);
                        }
                        
                        try{

                            var contents = JSON.stringify(arrPath);
                            var con = jQuery.parseJSON(contents);
                            
                            var countContents = con.length;
                            if(countContents != 0){ // check if content
                                var jContent = $.map(con, function(value) {
                                    return(value);
                                });
                                var patternHolder = document.getElementById(svgpatternid);
                                $(patternHolder).html(jContent.join(""));

                            }
                        }catch (e){
                            //no errpr
                        }
                    
                }, 'xml');
            }

            function templateColors(tc){
                $.ajax({ //create an ajax request to load_page.php
                    type: "POST",
                    url: "{{url('designer/a/get-template-default-colors')}}",
                    data : { 
                        templateCode : tc
                    },
                    // dataType: "JSON", //expect JSON to be returned
                    beforeSend:function(xhr){
                        var token = $('meta[name="csrf_token"]').attr('content');

                            if (token) {
                                return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                            }
                            xhr.setRequestHeader( 'X-Requested-With',  'XMLHttpRequest');
                    },
                    success: function(response) {
                        var objColor = jQuery.parseJSON(response);
                        for (var i = 0; i < objColor.length; i++){
                        	for (var key in objColor[i]) {
                        		if(key == "default_mainColor"){
                        			$("#mainColor").spectrum("set", objColor[i][key]);
                                
                        		}else{
                        			$("input#Trim_"+key+".trimColor").spectrum("set", objColor[i][key]);
                        			colorPickerCustom();
                        		}
                        	}
                        }
                    }
                    
                });
            }
            
            function activaTab(tab){
                $('.nav-tabs a[href="#' + tab + '"]').tab('show');
            };
            //END 1ST TAB <---####################################
            
            // FABRIC JS 
            var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
            
            for (var i = 0; i < SideAndPath.length; i++) {
                var sideName = SideAndPath[i]['Side'];
                var type = SideAndPath[i]['Type'];

                var canvasName = "canvas_" + type + "_" + sideName;
                window['canvas_' + type + '_' + sideName] = new fabric.Canvas(canvasName);

                //loading canvas designs
                
                if(sideName == "Front"){
                    var frontCanvasHandler = {!! json_encode($client_design_array[0]->ContentFrontJersey) !!};
                    canvas_Jersey_Front.loadFromJSON(frontCanvasHandler, function(objects, options) {
                        canvas_Jersey_Front.renderAll();
                        setTimeout(function(){
                            canvas_Jersey_Front.backgroundImage=0;
                            canvas_Jersey_Front.clear();
                            canvas_Jersey_Front.renderAll();

                            setTimeout(function(){

								canvas_Jersey_Front.loadFromJSON(frontCanvasHandler, function(objects, options) {
									canvas_Jersey_Front.renderAll();
                                    // window['canvas_' + type + '_' + sideName].setActiveObject(c.item(0));
                                });

                            },3000);
							
                        },3000);
                    });
                }

                if(sideName == "Back"){
                    var backCanvasHandler = {!! json_encode($client_design_array[0]->ContentBackJersey) !!};
                    canvas_Jersey_Back.loadFromJSON(backCanvasHandler, function(objects, options) {
                        canvas_Jersey_Back.renderAll();
                        setTimeout(function(){
                            canvas_Jersey_Back.backgroundImage=0;
                            canvas_Jersey_Back.clear();
                            canvas_Jersey_Back.renderAll();

                            setTimeout(function(){

                                canvas_Jersey_Back.loadFromJSON(backCanvasHandler, function(objects, options) {
                                    canvas_Jersey_Back.renderAll();
                                    // window['canvas_' + type + '_' + sideName].setActiveObject(c.item(0));
                                });
								
                            },3000);
                            //console.log('done loading back')
                        },3000);
                    });
                }

                if(sideName == "Left"){
                    var leftCanvasHandler = {!! json_encode($client_design_array[0]->ContentLeftShorts) !!};
                    canvas_Shorts_Left.loadFromJSON(leftCanvasHandler, function(objects, options) {
                        canvas_Shorts_Left.renderAll();
                        setTimeout(function(){
                            canvas_Shorts_Left.backgroundImage=0;
                            canvas_Shorts_Left.clear();
                            canvas_Shorts_Left.renderAll();

                            setTimeout(function(){

                                canvas_Shorts_Left.loadFromJSON(leftCanvasHandler, function(objects, options) {
                                    canvas_Shorts_Left.renderAll();
                                    // window['canvas_' + type + '_' + sideName].setActiveObject(c.item(0));
                                });
								
                            },3000);
                            //console.log('done loading left')
                        },3000);
                    });
                }

                if(sideName == "Right"){
                    var rightCanvasHandler = {!! json_encode($client_design_array[0]->ContentRightShorts) !!};
                    canvas_Shorts_Right.loadFromJSON(rightCanvasHandler, function(objects, options) {
                        canvas_Shorts_Right.renderAll();
                        setTimeout(function(){
                            canvas_Shorts_Right.backgroundImage=0;
                            canvas_Shorts_Right.clear();
                            canvas_Shorts_Right.renderAll();
							
                            setTimeout(function(){

                                canvas_Shorts_Right.loadFromJSON(rightCanvasHandler, function(objects, options) {
                                    canvas_Shorts_Right.renderAll();
                                    // window['canvas_' + type + '_' + sideName].setActiveObject(c.item(0));
                                });

                            },3000);
                            //console.log('done loading back')
                        },3000);
                    });
                }

            }
            /* ############################ */
            var canvas = canvas_Jersey_Front;
            var canvasID = "canvas_Jersey_Front";
            /* ############################ */ 

            $('#side-controls a').click(function (e) {
                onDeSelected();

            });
                
            $("#uniform_sides li").click(function() {
                onDeSelected();
                if($(this).attr('data-canvas-id') == "canvas_Jersey_Front"){
                    canvas = canvas_Jersey_Front;
                    //console.log(canvas);
                    canvasID = "canvas_Jersey_Front";
                    canvas.calcOffset();
                    initCanvas();

                }

                if($(this).attr('data-canvas-id') == "canvas_Jersey_Back"){
                    canvas = canvas_Jersey_Back;
                    //console.log(canvas);
                    canvasID = "canvas_Jersey_Back";
                    canvas.calcOffset();
                    initCanvas();

                }

                if($(this).attr('data-canvas-id') == "canvas_Shorts_Left"){
                    canvas = canvas_Shorts_Left;
                //	console.log(canvas);
                    canvasID = "canvas_Shorts_Left";
                    canvas.calcOffset();
                    initCanvas();

                }

                if($(this).attr('data-canvas-id') == "canvas_Shorts_Right"){
                    canvas = canvas_Shorts_Right;
                    //console.log(canvas);
                    canvasID = "canvas_Shorts_Right";
                    canvas.calcOffset();
                    initCanvas();

                }
            });

            function initCanvas(){
                canvas.on('selection:cleared', onDeSelected);
                canvas.on('object:selected', onSelected);
                // canvas.on('object:scaling', onScaling);
                // canvas.on('object:modified', onModified);
                var snapZone = 4;
                canvas.on('object:moving', function(options) {
                    var objectMiddle = options.target.left + options.target.getWidth() / 2;
                    if (objectMiddle > canvas.width / 2 - snapZone &&
                        objectMiddle < canvas.width / 2 + snapZone) {
                        options.target.set({
                        left: canvas.width / 2 - options.target.getWidth() / 2,
                        }).setCoords();
                        
                        // console.log(canvasID)
                        $("#"+canvasID).css({ "border" : "1px solid #b1abfb" });

                    }
                });
                
                canvas.on('object:rotating', onRotating);

                var _isDragging = false;
                var _isMouseDown = false;

                canvas.on('mouse:down', function () {
                    _isMouseDown = true;
                    // other stuff
                });

                canvas.on('mouse:move', function () {
                    _isDragging = _isMouseDown;
                    // other stuff
                });

                canvas.on('mouse:up', function(element) {
                    
                    $("#"+canvasID).css({ "border" : "" });
                    
                    _isMouseDown = false;
                    var isDragEnd = _isDragging;
                    _isDragging = false;
                    if (isDragEnd) {
                        try{
                            default_canvas_width = 219;
                            default_canvas_height = 383;

                            var obj = canvas.getActiveObject();
                            getWidth = obj.getWidth();
                            makeWidthToNegative = ~getWidth + 1;

                            getHeight = obj.getHeight();
                            makeHeightToNegative = ~getHeight + 1;

                            if(obj.left >=  default_canvas_width){
                                obj.setLeft(default_canvas_width - getWidth);
                                obj.setCoords()
                                canvas.renderAll();
                            }
                            if(obj.left <= makeWidthToNegative){
                                obj.setLeft(1);
                                obj.setCoords()
                                canvas.renderAll();	
                            }

                            if(obj.top >=  default_canvas_height){
                                obj.setTop(default_canvas_height - getHeight);
                                obj.setCoords()
                                canvas.renderAll();
                            }
                            
                            if(obj.top <= makeHeightToNegative){
                                obj.setTop(1);
                                obj.setCoords()
                                canvas.renderAll();
                            }
                        }catch(e){

                        }

                    } else {
                        // code for no drag mouse up
                    }
                    // code for both
                });

                canvas.on('object:scaling', function(event) {
                    if (event.target && event.target.type == "text") {
                        try{
                            var inFont = $('.btn-show-fonts').attr('data-font-size');
                            $(".text-font-size").val(((event.target.fontSize * event.target.scaleX) / inFont ).toFixed(2));
                            event.target._clearCache();
                            event.target.setCoords();
                            canvas.renderAll();
                        }catch(e){
                            // error
                        }
                    }
                });

                canvas.on('object:modified', function(event) {
                    if (event.target && event.target.type == "text") {
                        event.target.fontSize *= event.target.scaleX;
                        event.target.fontSize = event.target.fontSize.toFixed(2);
                        event.target.scaleX = 1;
                        event.target.scaleY = 1;
                        event.target._clearCache();
                        var inFont = $('.btn-show-fonts').attr('data-font-size');
                        $(".text-font-size").val(((event.target.fontSize * event.target.scaleX) / inFont ).toFixed(2));
                        event.target.setCoords();
                        canvas.renderAll();
                    }
                });
            }

            function addNewText(){
                onDeSelected();
            }
            
		    function onSelected(){

                var obj = canvas.getActiveObject();
                // console.log("Height =", (obj.getScaleY() * obj.getHeight()).toFixed(2));
                // console.log("Width = ", (obj.getScaleX() * obj.getWidth()).toFixed(2));
                obj.set({
                    borderColor: '#71b7f3',
                    cornerColor: '#71b7f3',
                    cornerSize: 10,
                    transparentCorners: false
                });

                // console.log('left-', obj.left, 'top-', obj.top);
                // console.log('font-', obj.fontSize);

                if(obj != null){
                    
                    var objType = canvas.getActiveObject().get('type');
                    var id = canvas.getActiveObject().get('idNumber');
                    // console.log(obj.type);

                    if(objType == "curvedText"){
                        if(obj.effect == "curved"){
                            $('#teamname_text_shape').html('Text Shape: <br><img src="{{ config('site_config.images_directory') }}text-shapes-logo/curve-logo.png" height="30px">');
                        }else if(obj.effect == "arc"){
                            $('#teamname_text_shape').html('Text Shape: <br><img src="{{ config('site_config.images_directory') }}text-shapes-logo/arch-logo.png" height="30px">');
                        }else{
                            $('#teamname_text_shape').html('Add text Shape');
                        }
                    }else{
                        $('#teamname_text_shape').html('Add text Shape');
                    }

                    if(objType == "i-text" || objType == "curvedText" || objType == "text"){

                        if(id){
                            $("#numberProperties").css({ "display" : "block" });
                            $('#tab-add-number1').tab('show');

                            $("#addNumberId").css({ "display" : "block" });
                            $("#enterNumberId").css({ "display" : "none" });

                            $('#editedNumberInput').val(obj.getText());
                        }else{

                            $("#textProperties").css({ "display" : "block" });
                            $('#tab-add-text1').tab('show');

                            $("#addNewTextId").css({ "display" : "block" });
                            $("#enterTextId").css({ "display" : "none" });

                            $('#editedTextInput').val(obj.getText());
                        }
                        var fontprop = getFontDisplay(obj.fontFamily);
                        $('.btn-show-fonts').html(fontprop.fontNameDisplay);
                        $('.btn-show-fonts').css('font-family', obj.fontFamily);
                        $('.btn-show-fonts').attr('data-font-size', fontprop.additionalSize);
                        $(".text-font-size").val((obj.fontSize / $(".btn-show-fonts").attr('data-font-size')).toFixed(2));

                        $('#reverse').prop('checked', obj.get('reverse'));
                        $('#radius').val(obj.get('radius'));
                        $('#spacing').val(obj.get('spacing'));
                        //$('#fill').val(obj.getFill());
                        //$('#effect').val(obj.getEffect());

                        $(".fontColor").spectrum("set", obj.getFill());
                        $(".strokeColor").spectrum("set", obj.getStroke());
                        $(".outlineThickness").val(obj.getStrokeWidth());
                        $('#font_size').val(obj.getFontSize() + " in");
                        $('.rotateTextSlider, .rotateTextValue').val(Math.round(obj.getAngle()));
                        $('.spacingTextSlider, .spacingTextValue').val(obj.getCharSpacing() / 2);
                        $('.opacityTextSlider, .opacityTextValue').val(obj.getOpacity() * 10);

                        /* if($('#strokeColor').val() == ""){
                            console.log("null");
                        }else{
                            console.log($('#strokeColor').val());
                        } */
                    }

                    if(objType == "image"){
                        $('#tab-upload-image1').tab('show');
                        $('.rotateTextSlider, .rotateTextValue').val(Math.round(obj.getAngle()));
                        $('.opacityTextSlider, .opacityTextValue').val(obj.getOpacity() * 10);

                        $("#img-remove-btn").css({ "display" : "block" });
                        $("#image-properties").css({ "display" : "block" });
                    }

                    if(objType == "path-group"){
                        
                        $('.clipartColor').blur();
                        var obj = "";
                        var arrayPathId = [];
                        var k = 0;
                        
                        $('#tab-clipart1').tab('show');
                        obj = canvas.getActiveObject();
                        $('#clipartProperties').html('');
                        var randomNumbers = Math.random();
                        for (var j in obj.paths) {
                            k = k + 1;
                            var id = obj.paths[j].get('id');
                            var fill = obj.paths[j].get('fill');
                            // console.log(id);
                            arrayPathId.push({
                                'id' : id,
                                'fill' : fill,
                                'ran_num' : randomNumbers
                            });
                        }
                        
                        getClipartProperties(arrayPathId, randomNumbers); 
                        
                        setTimeout(function() {
                            $('.rotateTextSlider, .rotateTextValue').val(Math.round(obj.getAngle()));
                            $('.opacityTextSlider, .opacityTextValue').val(obj.getOpacity() * 10);
                        }, 1000);
                        
                        return false;
                    }

                    $("#"+canvasID).css({ "border" : "1px solid #b1abfb" });
                }
            }

            function onDeSelected(){
                var obj = canvas.getActiveObject();

                $("#textProperties").css({ "display" : "none" });
                $("#addNewTextId").css({ "display" : "none" });
                $("#enterTextId").css({ "display" : "block" })
                $("#textShapeProperties").css({ "display" : "none" })

                /* $("#numberProperties").css({ "display" : "none" });
                $("#addNumberId").css({ "display" : "none" });
                $("#enterNumberId").css({ "display" : "block" }) */


                $("#btnNumber").attr('disabled', false);
                $("#btnNumber").html('<i class="fa fa-2 fa-plus" aria-hidden="true"></i> Add Name and Number');

                $("#img-remove-btn").css({ "display" : "none" });
                $("#image-properties").css({ "display" : "none" });

                $("#okBtn").html("OK");
                $("#okBtn").attr('disabled', false);

                $('#textInput').val('');
                $('#numberInput').val('');
                
                loadClipartContent();

                canvas.discardActiveObject();
                canvas.renderAll();
                $("#"+canvasID).css({ "border" : "" });

            }

            function onRotating(){
                var obj = canvas.getActiveObject();
                /* obj.getAngle().toFixed(0);
                canvas.renderAll(); */
                var angleValue = obj.getAngle().toFixed(0);
                if(angleValue > 180){
                    angleValue = 180 - angleValue;
                }
                $('.rotateTextValue, .rotateTextSlider').val(angleValue);

            }

            // arrow keys navigations
			var processKeys = function (evt) {
				evt = evt || window.event;

				var movementDelta = 1;

				var activeObject = canvas.getActiveObject();
				var activeGroup = canvas.getActiveGroup();

				if (evt.keyCode === 37) {
					evt.preventDefault(); // Prevent the default action
					if (activeObject) {
						var a = activeObject.get('left') - movementDelta;
						activeObject.set('left', a);
					}
					else if (activeGroup) {
						var a = activeGroup.get('left') - movementDelta;
						activeGroup.set('left', a);
					}

				} else if (evt.keyCode === 39) {
					evt.preventDefault(); // Prevent the default action
					if (activeObject) {
						var a = activeObject.get('left') + movementDelta;
						activeObject.set('left', a);
					}
					else if (activeGroup) {
						var a = activeGroup.get('left') + movementDelta;
						activeGroup.set('left', a);
					}

				} else if (evt.keyCode === 38) {
					evt.preventDefault(); // Prevent the default action
					if (activeObject) {
						var a = activeObject.get('top') - movementDelta;
						activeObject.set('top', a);
					}
					else if (activeGroup) {
						var a = activeGroup.get('top') - movementDelta;
						activeGroup.set('top', a);
					}

				} else if (evt.keyCode === 40) {
					evt.preventDefault(); // Prevent the default action
					if (activeObject) {
						var a = activeObject.get('top') + movementDelta;
						activeObject.set('top', a);
					}
					else if (activeGroup) {
						var a = activeGroup.get('top') + movementDelta;
						activeGroup.set('top', a);
					}
				}

				if (activeObject) {
					activeObject.setCoords();
					canvas.renderAll();
				} else if (activeGroup) {
					activeGroup.setCoords();
					canvas.renderAll();
				}
				$("#"+canvasID).css({ "border" : "1px solid #b1abfb" });
			};
            
			window.addEventListener("keydown", processKeys, false);
             // end arrow keys navigations

            //remove object
            $(document).on('button click', '.remove', function() {
                var object = canvas.getActiveObject();
                if (!object){
                    alert('Please select the element to remove');
                    return '';
                }
                canvas.remove(object);
            });

            $(document).on('button click', '.copyObject', function(event){
				event.preventDefault();
				var copyData = canvas.getActiveObject().toObject(['id']);
				fabric.util.enlivenObjects([copyData], function(objects) {
					objects.forEach(function(o) {
						o.set({
							top: o.top + 10,
							left: o.left + 10,
							borderColor: '#71b7f3',
							cornerColor: '#71b7f3',
							cornerSize: 10,
							transparentCorners: false
						});
						canvas.add(o);
						canvas.setActiveObject(o);
					});
					canvas.renderAll();
				});
			});

            function numberStandardPos(){
                var obj = canvas.getActiveObject();

                var id = canvas.getActiveObject().get('idNumber');

                if(id == "NumberFront"){
                    obj.set({
                        top: 114.85 // default position for number
                    });
                }else if(id == "NumberBack"){
                    obj.set({
                        top: 175.00 // default position for number
                    });
                }else if(id == "LastNameBack"){
                    obj.set({
                        top: 50.28 // default position for number
                    });
                }else if(id == "NumberLeftShorts"){
                    obj.set({
                        top: 278.35 // default position for number
                    });
                }else if(id == "NumberRightShorts"){
                    obj.set({
                        top:  278.35, // default position for number
                    });
                }
                

                obj.centerH();
                obj.setCoords();
                canvas.renderAll();
            }

            function centerHor(){
                var obj = canvas.getActiveObject();
                obj.centerH();
                obj.setCoords();
                canvas.renderAll();
            }

            function centerVer(){
                var obj = canvas.getActiveObject();
                obj.centerV();
                obj.setCoords();
                canvas.renderAll();
            }

            //DROP DOWN STROKE
            $(document).on('select change', '.outlineThickness', function() {
                var strokeId = $(this).attr('data-outline');

                //$('#fontSizeValue').val($(this).val());
                var obj = canvas.getActiveObject();
                if(obj){

                    if($('#'+strokeId).val() == ""){
                        alert("Choose outline color first.");
                        //$('strokeColor').focus();
                        $('.outlineThickness').val(0);
                        //return false;
                    }else{
                        if($(this).val() == 0){
                            obj.setStrokeWidth($(this).val());
                            obj.setStroke(null);
                        }else{
                            obj.setStrokeWidth($(this).val());
                        }
                        
                    }

                }
                canvas.renderAll();
            });

            /// GRADIENT SLIDER
            $(document).on('input change', '.offsetGradientColor', function() {
                
                var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                for (var i = 0; i < SideAndPath.length; i++) {
                    var sideName = SideAndPath[i]['Side'];
                    var type = SideAndPath[i]['Type'];

                    var objectId = "objSVG_" + type + "_" + sideName;

                    // console.log($(this).attr('data-gradient-id'));
                    try {
                        document.getElementById(sideName + "_" + type +"_" + $(this).attr('data-gradient-id')).setAttribute("offset", $(this).val() * 10 + "%");
                    }
                    catch (e) {
                    //console.log(e);
                    }
                }
            });
            
            // OFFSETE GRADIENT PATTERN SLIDER
            $(document).on('input change', '.offsetGradientPattern', function(){

                var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                for (var i = 0; i < SideAndPath.length; i++) {
                    var sideName = SideAndPath[i]['Side'];
                    var type = SideAndPath[i]['Type'];

                    var mainColorId = type + "_" + sideName + "_" + "Color";

                    var objectId = "objSVG_" + type + "_" + sideName;

                    try {
                        document.getElementById(sideName + "_" + type +"_" + $(this).attr('data-gradient-id')).setAttribute("offset", $(this).val() * 10 + "%");
                    }
                    catch (e) {
                    //console.log(e);
                    }
                }
            });

            //PATTERN OPACITY SLIDER
            $(document).on('input change', '#opacityPattern', function(){
                //console.log($(this).val() * 1);

                var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                for (var i = 0; i < SideAndPath.length; i++) {
                    var sideName = SideAndPath[i]['Side'];
                    var type = SideAndPath[i]['Type'];


                    var mainColorId = type + "_" + sideName + "_" + "Color";

                    var objectId = "objSVG_" + type + "_" + sideName;

                    try {
                    document.getElementById(objectId).contentDocument.getElementById("patternColor1").setAttribute("opacity", $(this).val() / 10);

                    $('#opacityPatternValue').val($(this).val() * 1);
                    }
                    catch (e) {
                    //console.log(e);
                    }
                }
            });

            //OPACITY SLIDER
            $(document).on('input change', '.opacityTextSlider', function(){
                //console.log($(this).val() / 10);
                $('.opacityTextValue').val($(this).val());
                var obj = canvas.getActiveObject();
                if(obj){
                    obj.set({
                        opacity: $(this).val() / 10
                    });
                }
                canvas.renderAll();
            });
            
            //SPACING SLIDER
            $(document).on('input change', '.spacingTextSlider', function() {
                //console.log($(this).val());
                $('.spacingTextValue').val($(this).val());
                var obj = canvas.getActiveObject();
                if(obj){
                    
                        if(obj.type == "text"){
                            obj.set({
                                charSpacing: $(this).val() * 2
                            });
                        }else{
                            obj.set({
                                spacing: $(this).val() * 2
                            });
                        }
                        
                }
                canvas.renderAll();
            });

            //RADIUS SLIDER
            $(document).on('input change', '.radiusSlider', function() {
                $('.radiusTextValue').val($(this).val());
                var obj = canvas.getActiveObject();
                if(obj){
                    obj.set({
                        radius: $(this).val()
                    });
                }
                canvas.renderAll();
            });

            //ROTATE SLIDER
            $(document).on('input change', '.rotateTextSlider', function() {
                //console.log($(this).val());
                $('.rotateTextValue').val($(this).val());
                var obj = canvas.getActiveObject();
                if(obj){
                    obj.setAngle($(this).val());
                }
                canvas.renderAll();
            });

            $('.text-font-size').keyup(function() {
                var inFont =  $('.btn-show-fonts').attr('data-font-size');
                var val = $(this).val() * inFont;
                if (isNaN(val)) {
                    alert('please enter number');
                    $(this).val(20);
                    return false;
                }
                var activeObject = canvas.getActiveObject();
                activeObject.fontSize = val;
                activeObject._clearCache();
                activeObject.setCoords();
                canvas.renderAll();
            });

            $('#editedTextInput').keyup(function(){
                var obj = canvas.getActiveObject();
                if(obj){
                    obj.setText(this.value);
                    canvas.renderAll();
                }
            });

            $('#editedNumberInput').keyup(function(){
                var obj = canvas.getActiveObject();
                if(obj){
                    obj.setText(this.value);
                    canvas.renderAll();
                }
            });

            // front back function //
            $(document).on('button click', '.sendSelectedObjectBack', function(){

                var object = canvas.getActiveObject();
                if (!object){

                    alert('Please select object.');
                    return
                }
                canvas.sendToBack(object);
                object.setCoords();
                canvas.renderAll();

            });

            $(document).on('button click', '.sendSelectedObjectToFront', function(){

                var object = canvas.getActiveObject();
                if (!object){
                    alert('Please select object.');
                    return '';
                }
                canvas.bringToFront(object);
                object.setCoords();
                canvas.renderAll();

            });
            //END FABRIC JS <---####################################
            
            // 2ND TABS <---####################################
            function addText() {
                var userTextInput = $('#textInput').val();

                if(userTextInput == "" || userTextInput == null){
                    $('#textInput').focus();
                    return false;

                }

                var oText = new fabric.Text(userTextInput, {
                    top: 94.35 , // 94.35 for the default
                    fontSize: 71.25, // 71.25 for default font size. equivalent 2.5"
                    fill: '#000000',
                    //fontFamily: 'Academic M54',
                    textAlign: 'center',
                    stroke: null,
                    strokeWidth: 0,
                    borderColor: '#71b7f3',
                    cornerColor: '#71b7f3',
                    cornerSize: 10,
                    transparentCorners: false,
                    //hasRotatingPoint: false,
                    centeredScaling: true,
                    hasControls: true,
                    lockScalingFlip: true,
                    lockUniScaling: true,
                    objectCaching : false
                });

                // var div_textProperties = document.getElementById('wait-msg-jfront');
                //     div_textProperties.style.display = 'block';

                $("#okBtn").html("Please Wait");
                $("#okBtn").attr('disabled', true);
                canvas.add(oText);
                setTimeout(function() {
                    //canvas.add(oText);
                    canvas.setActiveObject(oText);
                    oText.bringToFront();
                    oText.centerH();
                    oText.setCoords();

                    //var div_textProperties = document.getElementById('wait-msg-jfront');
                        // div_textProperties.style.display = 'none';
                    canvas.renderAll();
                }, 1000);

            }

            function getFontDisplay(ff){
                var data;
                $.ajax({    //create an ajax request to load_page.php
                    type: "POST",
                    url :  "{{url('designer/a/get-font-display')}}",
                    data : {
                        fontFamily : ff
                    },
                    async: false,
                    dataType : 'json',
                    cache: true,
                    beforeSend:function(xhr){
                        var token = $('meta[name="csrf_token"]').attr('content');

                            if (token) {
                                return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                            }
                            xhr.setRequestHeader( 'X-Requested-With',  'XMLHttpRequest');
                    },
                    success: function(response){
                        data = response;
                    }
                    
                });

                return data;
            }

            $(document).on('button click', '.btn-show-fonts', function() {
				var obj = canvas.getActiveObject();
				$('.add-text-content').html(obj.getText());
				$('#fontsModal').modal('show'); 
			});
            
            $(document).on('button click', '.custom-font-td', function() {
				
				$('.btn-show-fonts').css('font-family', $(this).attr('data-font-style'));
				$('.btn-show-fonts').html($(this).attr('data-font-display'));
				$('.btn-show-fonts').attr('data-font-style', $(this).attr('data-font-style'));
				$('.btn-show-fonts').attr('data-font-size',  $(this).attr('data-font-size'));
				var data_font_size = $(this).attr('data-font-size');
				// var current_font = $('.text-font-size').val();
				
				var obj = canvas.getActiveObject();
				
				if(obj){
					obj.set({
							fontFamily: $(this).attr('data-font-style')
						});

					default_text = obj.getText();
					props = obj.toObject(['idNumber']);
					delete props['type'];
					props['borderColor'] =  '#71b7f3',
					props['cornerColor'] =  '#71b7f3',
					props['cornerSize'] =  10,
					props['transparentCorners'] = false,
					props['centeredScaling'] =  true,
					props['hasControls'] =  true,
					props['lockScalingFlip'] =  true,
					props['lockUniScaling'] =  true,
					props['objectCaching'] =  false
					
					setTimeout(function() {
						obj.setCoords();
						canvas.renderAll();
						canvas.setActiveObject(obj);
						
					}, 1000);
						// return false;
				}
				$('#fontsModal').modal('hide'); 
			});
            //END 2ND TAB <---####################################

            // 3RD TAB
            
            function addFrontNumber(){

                var defaultNumber  = "00";
                var currentCount = +$("#countbtn").val() + 1;
                $('#countbtn').val(currentCount);
                var defNumberFront = new fabric.Text(defaultNumber, {
                    idNumber:"NumberFront",
                    top: 114.85 , // 94.35 for the default
                    fontSize: 75.00, // 71.25 for default font size. equivalent 2.5"
                    fill: '#000000',
                    textAlign: 'center',
                    padding: 0,
                    //spacing: 20,
                    stroke: null,
                    strokeWidth: 0,
                    borderColor: '#71b7f3',
                    cornerColor: '#71b7f3',
                    cornerSize: 10,
                    transparentCorners: false,
                    //hasRotatingPoint: false,
                    centeredScaling: true,
                    hasControls: true,
                    lockScalingFlip: true,
                    lockUniScaling: true
                });

                activaTab('a_Front_Jersey');
                canvas = canvas_Jersey_Front;
                canvasID = "canvas_Jersey_Front";

                setTimeout(function() {
                    canvas.add(defNumberFront);
                    canvas.setActiveObject(defNumberFront);

                    defNumberFront.bringToFront();
                    defNumberFront.centerH();
                    defNumberFront.setCoords();
                    $('#addFrontNumber').remove();
                }, 1000);
                canvas.renderAll();
            }

            function addBackNumber(){

                var defaultNumber  = "00";
                var currentCount = +$("#countbtn").val() + 1;
                $('#countbtn').val(currentCount);

                var defNumberBack = new fabric.Text(defaultNumber, {
                    idNumber:"NumberBack",
                    top: 84.35, // 94.35 for the default
                    fontSize: 175.00,
                    fill: '#000000',
                    textAlign: 'center',
                    padding: 0,
                    //spacing: 20,
                    stroke: null,
                    strokeWidth: 0,
                    borderColor: '#71b7f3',
                    cornerColor: '#71b7f3',
                    cornerSize: 10,
                    transparentCorners: false,
                    //hasRotatingPoint: false,
                    centeredScaling: true,
                    hasControls: true,
                    lockScalingFlip: true,
                    lockUniScaling: true
                });

                activaTab('a_Back_Jersey');
                canvas = canvas_Jersey_Back;
                canvasID = "canvas_Jersey_Back";

                setTimeout(function() {
                    canvas.add(defNumberBack);
                    canvas.setActiveObject(defNumberBack);

                    defNumberBack.bringToFront();
                    defNumberBack.centerH();
                    defNumberBack.setCoords();
                    $('#addBackNumber').remove();
                }, 1000);
                canvas.renderAll();

            }

            function addLastName(){

                var defaultName = "LASTNAME";
                var currentCount = +$("#countbtn").val() + 1;
                $('#countbtn').val(currentCount);

                var defNameBack = new fabric.Text(defaultName, {
                    idNumber:"LastNameBack",
                    top: 50.28 , // 94.35 for the default
                    fontSize: 32.50,// 71.25 for default font size. equivalent 2.5"
                    fill: '#000000',
                    textAlign: 'center',
                    padding: 0,
                    //spacing: 20,
                    stroke: null,
                    strokeWidth: 0,
                    borderColor: '#71b7f3',
                    cornerColor: '#71b7f3',
                    cornerSize: 10,
                    transparentCorners: false,
                    //hasRotatingPoint: false,
                    centeredScaling: true,
                    hasControls: true,
                    lockScalingFlip: true,
                    lockUniScaling: true
                });

                activaTab('a_Back_Jersey');
                canvas = canvas_Jersey_Back;
                canvasID = "canvas_Jersey_Back";

                setTimeout(function() {
                    canvas.add(defNameBack);
                    canvas.setActiveObject(defNameBack);

                    defNameBack.bringToFront();
                    defNameBack.centerH();
                    defNameBack.setCoords();
                    $('#addLastName').remove();


                }, 1000);
                canvas.renderAll();

            }

            function addShortsNumberLeft(){

                var defaultNumber  = "00";
                var currentCount = +$("#countbtn").val() + 1;
                $('#countbtn').val(currentCount);

                var defNameShortLeft = new fabric.Text(defaultNumber, {
                    idNumber:"NumberLeftShorts",
                    top: 278.35,
                    fontSize: 62.50,
                    fill: '#000000',
                    textAlign: 'center',
                    padding: 0,
                    stroke: null,
                    strokeWidth: 0,
                    borderColor: '#71b7f3',
                    cornerColor: '#71b7f3',
                    cornerSize: 10,
                    transparentCorners: false,
                    //hasRotatingPoint: false,
                    centeredScaling: true,
                    hasControls: true,
                    lockScalingFlip: true,
                    lockUniScaling: true
                });

                activaTab('a_Left_Shorts');
                canvas = canvas_Shorts_Left;
                canvasID = "canvas_Shorts_Left";

                setTimeout(function() {
                    canvas.add(defNameShortLeft);
                    canvas.setActiveObject(defNameShortLeft);

                    defNameShortLeft.bringToFront();
                    defNameShortLeft.centerH();
                    defNameShortLeft.setCoords();
                    $('#addShortsNumberLeft').remove();


                }, 1000);
                canvas.renderAll();
            }

            function addShortsNumberRight(){

                var defaultNumber  = "00";
                var currentCount = +$("#countbtn").val() + 1;
                $('#countbtn').val(currentCount);

                var defNameShortRight = new fabric.Text(defaultNumber, {
                    idNumber:"NumberRightShorts",
                    top: 278.35,
                    fontSize: 62.50,
                    fill: '#000000',
                    textAlign: 'center',
                    padding: 0,
                    stroke: null,
                    strokeWidth: 0,
                    borderColor: '#71b7f3',
                    cornerColor: '#71b7f3',
                    cornerSize: 10,
                    transparentCorners: false,
                    //hasRotatingPoint: false,
                    centeredScaling: true,
                    hasControls: true,
                    lockScalingFlip: true,
                    lockUniScaling: true
                });

                activaTab('a_Right_Shorts');
                canvas = canvas_Shorts_Right;
                canvasID = "canvas_Shorts_Right";

                setTimeout(function() {
                    canvas.add(defNameShortRight);
                    canvas.setActiveObject(defNameShortRight);

                    defNameShortRight.bringToFront();
                    defNameShortRight.centerH();
                    defNameShortRight.setCoords();
                    $('#addShortsNumberRight').remove();

                }, 1000);
                canvas.renderAll();

            }
            
            function addNameNumber() {
                var defaultNumber  = "00";
                var defaultName = "LASTNAME";

                $('#countbtn').val("5");
                $('#NameNumberId').html('');

                var defNumberFront = new fabric.Text(defaultNumber, {
                    idNumber:"NumberFront",
                    top: 114.85 , // 94.35 for the default
                    fontSize: 75.00, // 71.25 for default font size. equivalent 2.5"
                    fill: '#000000',
                    textAlign: 'center',
                    padding: 0,
                    //spacing: 20,
                    stroke: null,
                    strokeWidth: 0,
                    borderColor: '#71b7f3',
                    cornerColor: '#71b7f3',
                    cornerSize: 10,
                    transparentCorners: false,
                    //hasRotatingPoint: false,
                    centeredScaling: true,
                    hasControls: true,
                    lockScalingFlip: true,
                    lockUniScaling: true
                });

                var defNumberBack = new fabric.Text(defaultNumber, {
                    idNumber:"NumberBack",
                    top: 84.35, // 94.35 for the default
                    fontSize: 175.00, // 71.25 for default font size. equivalent 2.5"
                    fill: '#000000',
                    textAlign: 'center',
                    padding: 0,
                    //spacing: 20,
                    stroke: null,
                    strokeWidth: 0,
                    borderColor: '#71b7f3',
                    cornerColor: '#71b7f3',
                    cornerSize: 10,
                    transparentCorners: false,
                    //hasRotatingPoint: false,
                    centeredScaling: true,
                    hasControls: true,
                    lockScalingFlip: true,
                    lockUniScaling: true
                });

                var defNameBack = new fabric.Text(defaultName, {
                    idNumber:"LastNameBack",
                    top: 50.28 , // 94.35 for the default
                    fontSize: 32.50, // 71.25 for default font size. equivalent 2.5"
                    fill: '#000000',
                    textAlign: 'center',
                    padding: 0,
                    //spacing: 20,
                    stroke: null,
                    strokeWidth: 0,
                    borderColor: '#71b7f3',
                    cornerColor: '#71b7f3',
                    cornerSize: 10,
                    transparentCorners: false,
                    //hasRotatingPoint: false,
                    centeredScaling: true,
                    hasControls: true,
                    lockScalingFlip: true,
                    lockUniScaling: true
                });

                var defNameShortLeft = new fabric.Text(defaultNumber, {
                    idNumber:"NumberLeftShorts",
                    top: 278.35,
                    fontSize: 62.50, // 71.25 for default font size. equivalent 2.5"
                    //height:  fabric.util.parseUnit('1in'),
                    fill: '#000000',
                    textAlign: 'center',
                    padding: 0,
                    //spacing: 20,
                    stroke: null,
                    strokeWidth: 0,
                    borderColor: '#71b7f3',
                    cornerColor: '#71b7f3',
                    cornerSize: 10,
                    transparentCorners: false,
                    //hasRotatingPoint: false,
                    centeredScaling: true,
                    hasControls: true,
                    lockScalingFlip: true,
                    lockUniScaling: true
                });

                 var defNameShortRight = new fabric.Text(defaultNumber, {
                    idNumber:"NumberRightShorts",
                    top: 278.35,
                    fontSize: 62.50, // 71.25 for default font size. equivalent 2.5"
                    //height:  fabric.util.parseUnit('1in'),
                    fill: '#000000',
                    textAlign: 'center',
                    padding: 0,
                    //spacing: 20,
                    stroke: null,
                    strokeWidth: 0,
                    borderColor: '#71b7f3',
                    cornerColor: '#71b7f3',
                    cornerSize: 10,
                    transparentCorners: false,
                    //hasRotatingPoint: false,
                    centeredScaling: true,
                    hasControls: true,
                    lockScalingFlip: true,
                    lockUniScaling: true
                });

                // $("#btnNumber").html("Please Wait");
                $("#btnNumber").attr('disabled', true);
                activaTab('a_Front_Jersey');
                canvas = canvas_Jersey_Front;
                canvasID = "canvas_Jersey_Front";

                setTimeout(function() {
                    canvas_Jersey_Front.add(defNumberFront);
                    canvas_Jersey_Front.setActiveObject(defNumberFront);
                    canvas_Jersey_Back.add(defNumberBack, defNameBack);
                    canvas_Shorts_Right.add(defNameShortRight);
                    canvas_Shorts_Left.add(defNameShortLeft);

                    /// FRONT JERSEY
                    defNumberFront.bringToFront();
                    defNumberFront.centerH();
                    defNumberFront.setCoords();

                    /// BACK JERSEY
                    defNumberBack.bringToFront();
                    defNumberBack.centerH();
                    defNumberBack.setCoords();

                    defNameBack.bringToFront();
                    defNameBack.centerH();
                    defNameBack.setCoords();

                    /// LEFT SHORTS
                    defNameShortLeft.bringToFront();
                    defNameShortLeft.centerH();
                    defNameShortLeft.setCoords();

                    /// RIGHT SHORTS
                    defNameShortRight.bringToFront();
                    defNameShortRight.centerH();
                    defNameShortRight.setCoords();


                }, 1000);
                canvas_Jersey_Front.renderAll();
                canvas_Jersey_Back.renderAll();
                canvas_Shorts_Right.renderAll();
                canvas_Shorts_Left.renderAll();
            }

            $('.removeNameNumber').click(function(){
                var obj = canvas.getActiveObject();
                if (!obj){
                    alert('Please select the element to remove');
                    return '';
                }

                var id = canvas.getActiveObject().get('idNumber');

                if(id == "NumberFront"){
                    $('#NameNumberId').append('<button type="button" id="addFrontNumber" onclick="addFrontNumber();" class="btn btn-primary pull-right btn-sm addMarginLeft"><i class="fa fa-plus" aria-hidden="true"></i> Front Number</button>');
                    canvas.remove(obj);
                    var currentCount = $('#countbtn').val();
                    $('#countbtn').val(currentCount - 1)
                }else if(id == "NumberBack"){
                    $('#NameNumberId').append('<button type="button" id="addBackNumber" onclick="addBackNumber();" class="btn btn-primary pull-right btn-sm addMarginLeft"><i class="fa fa-plus" aria-hidden="true"></i> Back Number</button>');
                    canvas.remove(obj);
                    var currentCount = $('#countbtn').val();
                    $('#countbtn').val(currentCount - 1)
                }else if(id == "LastNameBack"){
                    $('#NameNumberId').append('<button type="button" id="addLastName"  onclick="addLastName();"  class="btn btn-primary pull-right btn-sm addMarginLeft"><i class="fa fa-plus" aria-hidden="true"></i> Lastname</button>');
                    canvas.remove(obj);
                    var currentCount = $('#countbtn').val();
                    $('#countbtn').val(currentCount - 1)
                }else if(id == "NumberLeftShorts"){
                    $('#NameNumberId').append('<button type="button" id="addShortsNumberLeft"  onclick="addShortsNumberLeft();"  class="btn btn-primary pull-right btn-sm addMarginLeft"><i class="fa fa-plus" aria-hidden="true"></i> Left Shorts Number</button>');
                    canvas.remove(obj);
                    var currentCount = $('#countbtn').val();
                    $('#countbtn').val(currentCount - 1)
                }else if(id == "NumberRightShorts"){
                    $('#NameNumberId').append('<button type="button" id="addShortsNumberRight"  onclick="addShortsNumberRight();"  class="btn btn-primary pull-right btn-sm addMarginLeft"><i class="fa fa-plus" aria-hidden="true"></i> Right Shorts Number</button>');
                    canvas.remove(obj);
                    var currentCount = $('#countbtn').val();
                    $('#countbtn').val(currentCount - 1)
                }

                var currentCount = $('#countbtn').val();

                if(currentCount == 0){
                    $("#numberProperties").css({ "display" : "none" });
                    $("#addNumberId").css({ "display" : "none" });
                    $("#enterNumberId").css({ "display" : "block" })
                }
            });
            // END 3RD TAB
            
            // 4TH TAB
            function loadClipartContent(){
                $.ajax({ //create an ajax request to load_page.php
                    type: "GET",
                    url: "{{url('designer/a/tab-clipart-content')}}",
                    dataType: "html", //expect html to be returned
                    success: function(response) {
                        // console.log(response);
                        $('#tab-clipart-content').html('');
                        
                        $('#tab-clipart-content').html(response);
                        $(".clipartColor").blur();
                        
                        // getFeaturedCliparts();
                    }
                });
            }

            $(document).on('a click', '.clipart-category', function(){
				getCliparts($(this).attr('data-id'), $(this).attr('data-type'), $(this).attr('data-title'));
				return false;
			});

            function getCliparts(categoryId, req_type, cat_name){
                $.ajax({ //create an ajax request to load_page.php

                    type: "POST",
                    url: "{{url('designer/a/get-cliparts')}}",
                    data: {
                        'categoryId' : categoryId,
                        'req_type' : req_type,
                        'cat_name' : cat_name
                    },
                    dataType: "html", //expect html to be returned
                    beforeSend:function(xhr){
                        var token = $('meta[name="csrf_token"]').attr('content');

                            if (token) {
                                return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                            }
                            xhr.setRequestHeader( 'X-Requested-With',  'XMLHttpRequest');
                    },
                    success: function(response) {
                        $('#show-clipart-content').html(response).hide().fadeIn('slow');
                    }
                });
            }

            $(document).on('button click', '#btn-close-clipart-properties', function(){
				loadClipartContent();
				onDeSelected();
			});

            $(document).on('a click', '.img-clipart', function() {
				
				var getClipartLink = $(this).attr('data-link');
				// alert($(this).attr('data-link'));
				loadSVGClipart(getClipartLink);
				return false;
			});

            function loadSVGClipart(dataUrl){
                var k = 0;
                var arrayPathId = [];
                var svgUrl = "{{ config('site_config.images_directory') }}cliparts/" + dataUrl;
                fabric.loadSVGFromURL(svgUrl, function(objects, options) {
                var clipart = fabric.util.groupSVGElements(objects, options );
                clipart.set({
                    svgPath: svgUrl,
                    width: clipart.width,
                    height: clipart.height,
                    borderColor: '#71b7f3',
                    cornerColor: '#71b7f3',
                    cornerSize: 10,
                    transparentCorners: false,
                    noScaleCache: false
                    //hasRotatingPoint: false,
                // });
                }).scaleToWidth(100);
                    canvas.add(clipart);
                    canvas.setActiveObject(clipart);
                    canvas.renderAll();
                    var obj = canvas.getActiveObject();
                    $('#clipartProperties').html('');
                    for (var j in obj.paths) {
                        k = k + 1;
                        var id = obj.paths[j].get('id');
                        var fill = obj.paths[j].get('fill');
                        arrayPathId.push({
                            'id' : id,
                            'fill' : fill
                        });
                        
                    }
                    // getClipartProperties(arrayPathId); 
                });
            }

            function getClipartProperties(arrayPathId, randomNumbers) {
                // console.log(arrayPathId);
                $.ajax({ //create an ajax request to load_page.php

                    type: "POST",
                    url: "{{ url('designer/a/clipart-properties') }}",
                    data: {
                        PathId : arrayPathId
                    },
                    dataType: "html", //expect html to be returned
                    beforeSend:function(xhr){
                        var token = $('meta[name="csrf_token"]').attr('content');

                            if (token) {
                                return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                            }
                            xhr.setRequestHeader( 'X-Requested-With',  'XMLHttpRequest');
                    },
                    success: function(response) {
                    //    console.log(response);
                        $('#tab-clipart-content').html('');
                        $('#tab-clipart-content').html(response).hide().fadeIn("slow");
                            
                        loadClipartColor(randomNumbers);
                        colorPickerCustom();
                    }

                });
            }
            // END 4TH TAB
            
            // 5TH TAB
                // for upload image
		    document.getElementById('upload-images').onchange = function handleImage(e) {

                var reader = new FileReader();
                reader.onload = function (event) {
                    //console.log('fdsf');
                    var imgObj = new Image();
                    //console.log(imgObj);
                    imgObj.src = event.target.result;
                    imgObj.onload = function () {
                        // start fabricJS stuff
                        var image = new fabric.Image(imgObj);
                        image.set({
                            top:0,
                            left:0,
                            borderColor: '#71b7f3',
                            cornerColor: '#71b7f3',
                            opacity: 10,
                            cornerSize: 10,
                            transparentCorners: false,
                            // centeredScaling: true,
                            hasControls: true,
                            lockScalingFlip: true,
                            cache: false,
                            // width: 15.6

                        }).scale(0.1);
                        //image.scale(getRandomNum(0.1, 0.25)).setCoords();


                        canvas.add(image);
                        canvas.renderAll(image);
                        canvas.setActiveObject(image);
                        image.bringToFront();
                        image.center();
                        image.setCoords();
                        $('#upload-images').val("");
                    }

                }

                //console.log(e.target.files[0]);
                reader.readAsDataURL(e.target.files[0]);

            }
            // end upload image
            // END 5TH TAB

            //################### C O L O R  P A L E T T E S #######################///
            $("#mainColor").spectrum({
                color: "rgb(255, 255, 255)",
                showInput: true,
                className: "full-spectrum",
                showInitial: true,
                showPalette: true,
                showSelectionPalette: true,
                maxSelectionSize: 6,
                preferredFormat: "rgb",
                localStorageKey: "spectrum.demo",
                
                move: function(color) {

                    var onMoveColor =  color.toHexString(); // #ff0000

                    var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                    for (var i = 0; i < SideAndPath.length; i++) {
                        var sideName = SideAndPath[i]['Side'];
                        var type = SideAndPath[i]['Type'];

                        var mainColorId = type + "_" + sideName + "_" + "Color";
                        var objectId = "objSVG_" + type + "_" + sideName;
                        document.getElementById(mainColorId).setAttribute("fill", onMoveColor);
                        
                    }

                    $('#row-body-gradient').css({
                        'display':'none'
                    });

                    $('#btn-body-gradient').html('');

                    $('#body-color-type').val('Solid');
                },
                
                show: function () {
                    // alert("dadas");
                    // console.log();
                },
                beforeShow: function () {
                    
                },
                hide: function (color) {
                    var onHideColor = color.toHexString(); // #ff0000

                    var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                    for (var i = 0; i < SideAndPath.length; i++) {
                        var sideName = SideAndPath[i]['Side'];
                        var type = SideAndPath[i]['Type'];

                        var mainColorId = type + "_" + sideName + "_" + "Color";

                        var objectId = "objSVG_" + type + "_" + sideName;
                        //document.getElementById(objectId).contentDocument.getElementById(mainColorId).setAttribute("fill", onHideColor);
                        document.getElementById(mainColorId).setAttribute("fill", onHideColor);
                        
                    }

                    $('#row-body-gradient').css({
                        'display':'none'
                    });
                    $('#btn-body-gradient').html('');
                    $('#body-color-type').val('Solid');


                },
                change: function(color) {

                    var onChangeColor =  color.toHexString(); // #ff0000

                    var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                    
                    for (var i = 0; i < SideAndPath.length; i++) {
                        var sideName = SideAndPath[i]['Side'];
                        var type = SideAndPath[i]['Type'];

                        var mainColorId = type + "_" + sideName + "_" + "Color";

                        var objectId = "objSVG_" + type + "_" + sideName;
                        //document.getElementById(objectId).contentDocument.getElementById(mainColorId).setAttribute("fill", onChangeColor);
                        document.getElementById(mainColorId).setAttribute("fill", onChangeColor);
                        
                        
                    }

                    $('#row-body-gradient').css({
                        'display':'none'
                    });
                    $('#btn-body-gradient').html('');
                    $('#body-color-type').val('Solid');

                },
                palette: [
                    ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
                    ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
                    ["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
                    ["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
                    ["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
                    ["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
                ]
            });

            $(".gradientColor").spectrum({
                showInput: true,
                className: "full-spectrum",
                showInitial: true,
                showPalette: true,
                //allowEmpty: true,
                showSelectionPalette: true,
                maxSelectionSize: 6,
                preferredFormat: "rgb",
                localStorageKey: "spectrum.demo",

                move: function(color) {
                    var onMoveColor = color.toHexString(); // #ff0000

                    var gradientId = $(this).attr('id');
                    var dataGradientType = $(this).attr('data-gradient-type');
                    
                    if(dataGradientType == "Body"){
                        var top_gradient_color = $('#Body_Gradient_Color2').val(); // top color
                        var bot_gradient_color = $('#Body_Gradient_Color1').val(); // bottom color 
                        var btnGradientId = "btn-body-gradient";
                    }else{
                        var dataTrimNum = $(this).attr('data-trim-num');
                        var top_gradient_color = $('#Trim_'+dataTrimNum+'_Gradient_Color2').val(); // top color
                        var bot_gradient_color = $('#Trim_'+dataTrimNum+'_Gradient_Color1').val(); // bottom color 
                        var btnGradientId = "btn-trim-"+dataTrimNum+"-gradient";
                    }
                    
                    document.getElementById(btnGradientId).style.background = "linear-gradient("+bot_gradient_color+","+top_gradient_color+")";
                    

                    var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                    for (var i = 0; i < SideAndPath.length; i++) {
                        var sideName = SideAndPath[i]['Side'];
                        var type = SideAndPath[i]['Type'];

                        var objectId = "objSVG_" + type + "_" + sideName;
                        // btn-trim-1-gradient
                        document.getElementById(sideName + "_" + type + "_" + gradientId).setAttribute("stop-color", onMoveColor);
                    }

                },
                
                show: function () {
                    
                    $(this).spectrum("set", $(this).val());

                },
                beforeShow: function () {

                },
                hide: function (color) {
                    var onHideColor = color.toHexString(); // #ff0000

                    var gradientId = $(this).attr('id');

                    var dataGradientType = $(this).attr('data-gradient-type');
                    
                    if(dataGradientType == "Body"){
                        var top_gradient_color = $('#Body_Gradient_Color2').val(); // top color
                        var bot_gradient_color = $('#Body_Gradient_Color1').val(); // bottom color 
                        var btnGradientId = "btn-body-gradient";
                    }else{
                        var dataTrimNum = $(this).attr('data-trim-num');
                        var top_gradient_color = $('#Trim_'+dataTrimNum+'_Gradient_Color2').val(); // top color
                        var bot_gradient_color = $('#Trim_'+dataTrimNum+'_Gradient_Color1').val(); // bottom color 
                        var btnGradientId = "btn-trim-"+dataTrimNum+"-gradient";
                    }
                    
                    document.getElementById(btnGradientId).style.background = "linear-gradient("+bot_gradient_color+","+top_gradient_color+")";
                   
                    var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                    for (var i = 0; i < SideAndPath.length; i++) {
                        var sideName = SideAndPath[i]['Side'];
                        var type = SideAndPath[i]['Type'];

                        var objectId = "objSVG_" + type + "_" + sideName;
                        document.getElementById(sideName + "_" + type + "_" + gradientId).setAttribute("stop-color", onHideColor);
                    }


                },
                
                change: function(color) {

                    var onChangeColor =  color.toHexString(); // #ff0000


                    var gradientId = $(this).attr('id');
                    var dataGradientType = $(this).attr('data-gradient-type');
                    
                    if(dataGradientType == "Body"){
                        var top_gradient_color = $('#Body_Gradient_Color2').val(); // top color
                        var bot_gradient_color = $('#Body_Gradient_Color1').val(); // bottom color 
                        var btnGradientId = "btn-body-gradient";
                    }else{
                        var dataTrimNum = $(this).attr('data-trim-num');
                        var top_gradient_color = $('#Trim_'+dataTrimNum+'_Gradient_Color2').val(); // top color
                        var bot_gradient_color = $('#Trim_'+dataTrimNum+'_Gradient_Color1').val(); // bottom color 
                        var btnGradientId = "btn-trim-"+dataTrimNum+"-gradient";
                    }
                    
                    document.getElementById(btnGradientId).style.background = "linear-gradient("+bot_gradient_color+","+top_gradient_color+")";

                    var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                    for (var i = 0; i < SideAndPath.length; i++) {
                        var sideName = SideAndPath[i]['Side'];
                        var type = SideAndPath[i]['Type'];

                        var objectId = "objSVG_" + type + "_" + sideName;
                        document.getElementById(sideName + "_" + type + "_" + gradientId).setAttribute("stop-color", onChangeColor);
                    }

                },
                palette: [
                    ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
                    ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
                    ["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
                    ["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
                    ["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
                    ["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
                ]
            });

            $(".trimColor").spectrum({
                showInput: true,
                className: "full-spectrum",
                showInitial: true,
                showPalette: true,
                showSelectionPalette: true,
                maxSelectionSize: 6,
                preferredFormat: "rgb",
                localStorageKey: "spectrum.demo",
                move: function(color) {
                    var onMoveColor = color.toHexString(); // #ff0000

                    var trimId = $(this).attr('id');
                    var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                    for (var i = 0; i < SideAndPath.length; i++) {
                        var sideName = SideAndPath[i]['Side'];
                        var type = SideAndPath[i]['Type'];

                        var objectId = "objSVG_" + type + "_" + sideName;
                        try{
                            document.getElementById(type + "_" + sideName + "_" + trimId).setAttribute("fill", onMoveColor);
                        } catch(e){

                        }
                        

                    }

                    var trimCount =  $(this).attr('data-trim-num');
                    $('#row-trim-'+trimCount+'-gradient').css({
                        'display':'none'
                    });
                    $('#btn-trim-'+trimCount+'-gradient').html('');
                    $('#trim-'+trimCount+'-color-type').val('Solid');

                },
                show: function () {

                },
                beforeShow: function () {

                },
                hide: function (color) {
                    var onHideColor = color.toHexString(); // #ff0000

                    var trimId = $(this).attr('id');
                    var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                    for (var i = 0; i < SideAndPath.length; i++) {
                        var sideName = SideAndPath[i]['Side'];
                        var type = SideAndPath[i]['Type'];

                        var objectId = "objSVG_" + type + "_" + sideName;
                        
                        try{
                            document.getElementById(type + "_" + sideName + "_" + trimId).setAttribute("fill", onHideColor);
                        } catch(e){

                        }
                    }

                    var trimCount =  $(this).attr('data-trim-num');
                    $('#row-trim-'+trimCount+'-gradient').css({
                        'display':'none'
                    });
                    $('#btn-trim-'+trimCount+'-gradient').html('');
                    $('#trim-'+trimCount+'-color-type').val('Solid');

                },
                change: function(color) {

                    var onChangeColor =  color.toHexString(); // #ff0000

                    var trimId = $(this).attr('id');
                    var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                    for (var i = 0; i < SideAndPath.length; i++) {
                        var sideName = SideAndPath[i]['Side'];
                        var type = SideAndPath[i]['Type'];

                        var objectId = "objSVG_" + type + "_" + sideName;
                        //document.getElementById(objectId).contentDocument.getElementById(trimId).setAttribute("fill", onChangeColor);
                    
                        try{
                            document.getElementById(type + "_" + sideName + "_" + trimId).setAttribute("fill", onChangeColor);
                        } catch(e){

                        }
                    }

                    var trimCount =  $(this).attr('data-trim-num');
                    $('#row-trim-'+trimCount+'-gradient').css({
                        'display':'none'
                    });
                    $('#btn-trim-'+trimCount+'-gradient').html('');
                    $('#trim-'+trimCount+'-color-type').val('Solid');
                },
                palette: [
                    ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
                    ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
                    ["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
                    ["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
                    ["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
                    ["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
                ]
            });
            
            $(".fontColor").spectrum({
                color: "#3a53a4",
                showInput: true,
                className: "full-spectrum",
                showInitial: true,
                showPalette: true,
                //allowEmpty: true,
                showSelectionPalette: true,
                maxSelectionSize: 6,
                preferredFormat: "rgb",
                localStorageKey: "spectrum.demo",
                move: function(color) {
                    //console.log(color);
                    //var onMoveColor = color.toHexString(); // #ff0000
                    var onMoveColor = color;
                    var obj = canvas.getActiveObject();
                    if(obj){
                        obj.setFill(onMoveColor);
                    }
                    canvas.renderAll();
                },
                show: function () {


                },
                beforeShow: function () {

                },
                hide: function (color) {
                    var onHideColor = color.toHexString(); // #ff0000
                    var obj = canvas.getActiveObject();
                    if(obj){
                        obj.setFill(onHideColor);
                    }
                    canvas.renderAll();


                },
                change: function(color) {

                    var onChangeColor =  color.toHexString(); // #ff0000
                    var obj = canvas.getActiveObject();
                    if(obj){
                        obj.setFill(onChangeColor);
                    }
                    canvas.renderAll();

                },
                palette: [
                    ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
                    ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
                    ["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
                    ["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
                    ["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
                    ["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
                ]
            });

            $(".strokeColor").spectrum({
                color: null,
                showInput: true,
                className: "full-spectrum",
                showInitial: true,
                showPalette: true,
                //allowEmpty: true,
                showSelectionPalette: true,
                maxSelectionSize: 6,
                preferredFormat: "rgb",
                localStorageKey: "spectrum.demo",
                move: function(color) {
                    //console.log(color);
                    var onMoveColor = color.toHexString(); // #ff0000
                    //var onMoveColor = color;
                    //console.log(onMoveColor);
                    var obj = canvas.getActiveObject();
                    if(obj){
                        obj.setStroke(onMoveColor);
                    }
                    canvas.renderAll();
                },
                show: function () {


                },
                beforeShow: function () {

                },
                hide: function (color) {
                    var onHideColor = color.toHexString(); // #ff0000
                    //var onHideColor = color;
                    var obj = canvas.getActiveObject();
                    if(obj){
                        obj.setStroke(onHideColor);

                        if(onHideColor == ""){
                            $('.outlineThickness').val(0);
                        }
                    }
                    canvas.renderAll();


                },
                change: function(color) {

                    //var onChangeColor =  color.toHexString(); // #ff0000
                    var onChangeColor =  color;
                    var obj = canvas.getActiveObject();
                    if(obj){
                        obj.setStroke(onChangeColor);
                        if($('.outlineThickness').val() == 0){
                            obj.setStrokeWidth(1);
                            $('.outlineThickness').val(1);
                        }

                        if(onChangeColor == null){
                            $('.outlineThickness').val(0);
                        }
                    }
                    //console.log(color);
                    canvas.renderAll();

                },
                palette: [
                    ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
                    ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
                    ["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
                    ["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
                    ["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
                    ["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
                ]
            });

            function loadPatternColor(){
                $(".patternColor").spectrum({
                    showInput: true,
                    className: "full-spectrum",
                    showInitial: true,
                    showPalette: true,
                    //allowEmpty: true,
                    showSelectionPalette: true,
                    maxSelectionSize: 6,
                    preferredFormat: "rgb",
                    localStorageKey: "spectrum.demo",

                    move: function(color) {
                        var onMoveColor = color.toHexString(); // #ff0000
                        var patternId = $(this).attr('id');
                       
                        var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                        for (var i = 0; i < SideAndPath.length; i++) {
                            var sideName = SideAndPath[i]['Side'];
                            var type = SideAndPath[i]['Type'];
                            
                            var patternColorId = type + "_" + sideName + "_" + patternId;
                            var objectId = "objSVG_" + type + "_" + sideName;
                            try {

                            document.getElementById(patternColorId).setAttribute("fill", onMoveColor);
                            }
                            catch (e) {
                            //console.log(e);
                            }


                        }
                        // $("#gPattern").css('display', 'none');

                        var getDataTrim = $(this).attr('data-trim-num');
                    
                        if(typeof getDataTrim == 'undefined'){
                            $('#body-pattern-color-type').val('Solid');
                            $('#row-body-pattern-gradient').css('display', 'none');
                            $('#btn-body-pattern-gradient').html('');
                        }else{
                            $('#trim-'+getDataTrim+'-pattern-color-type').val('Solid');
                            $('#row-trim-'+getDataTrim+'-pattern-gradient').css('display', 'none');
                            $('#btn-trim-'+getDataTrim+'-pattern-gradient').html('');
                            // btn-trim-1-pattern-grandient
                        }
                        

                    },
                    show: function () {
                        
                    },
                    beforeShow: function () {

                    },
                    hide: function (color) {
                        var onHideColor = color.toHexString(); // #ff0000
                        var patternId = $(this).attr('id');
                        var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                    
                        for (var i = 0; i < SideAndPath.length; i++) {
                            var sideName = SideAndPath[i]['Side'];
                            var type = SideAndPath[i]['Type'];

                            var patternColorId = type + "_" + sideName + "_" + patternId;
                            var mainColorId = type + "_" + sideName + "_" + "Color";

                            var objectId = "objSVG_" + type + "_" + sideName;
                            try {
                            //   document.getElementById(objectId).contentDocument.getElementById(patternId).setAttribute("fill", onHideColor);
                            document.getElementById(patternColorId).setAttribute("fill", onHideColor);
                            }
                            catch (e) {
                            //console.log(e);
                            }


                        }
                        // $("#gPattern").css('display', 'none');
                        var getDataTrim = $(this).attr('data-trim-num');
                    
                        if(typeof getDataTrim == 'undefined'){
                            $('#body-pattern-color-type').val('Solid');
                        }else{
                            $('#trim-'+getDataTrim+'-pattern-color-type').val('Solid');
                        }
                        
                    },
                    change: function(color) {

                        var onChangeColor =  color.toHexString(); // #ff0000

                        var patternId = $(this).attr('id');

                        var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                        for (var i = 0; i < SideAndPath.length; i++) {
                            var sideName = SideAndPath[i]['Side'];
                            var type = SideAndPath[i]['Type'];

                            var patternColorId = type + "_" + sideName + "_" + patternId;
                            var mainColorId = type + "_" + sideName + "_" + "Color";

                            var objectId = "objSVG_" + type + "_" + sideName;
                            try {
                            //  document.getElementById(objectId).contentDocument.getElementById(patternId).setAttribute("fill", onChangeColor);
                                document.getElementById(patternColorId).setAttribute("fill", onChangeColor);
                            }
                            catch (e) {
                            //console.log(e);
                            }
                        }
                        // $("#gPattern").css('display', 'none');
                        var getDataTrim = $(this).attr('data-trim-num');
                    
                        if(typeof getDataTrim == 'undefined'){
                            $('#body-pattern-color-type').val('Solid');
                        }else{
                            $('#trim-'+getDataTrim+'-pattern-color-type').val('Solid');
                        }
                        

                    },
                    palette: [
                        ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
                        ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
                        ["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
                        ["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
                        ["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
                        ["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
                    ]
                });

                $(".patternGradientColor").spectrum({
                    showInput: true,
                    className: "full-spectrum",
                    showInitial: true,
                    showPalette: true,
                    //allowEmpty: true,
                    showSelectionPalette: true,
                    maxSelectionSize: 6,
                    preferredFormat: "rgb",
                    localStorageKey: "spectrum.demo",

                    move: function(color) {
                        var onMoveColor = color.toHexString(); // #ff0000
                        var gradientId = $(this).attr('id');
                        // console.log(gradientId);
                        var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                        for (var i = 0; i < SideAndPath.length; i++) {
                            var sideName = SideAndPath[i]['Side'];
                            var type = SideAndPath[i]['Type'];

                            var objectId = "objSVG_" + type + "_" + sideName;
                            // btn-trim-1-gradient
                            document.getElementById(sideName + "_" + type + "_" + gradientId).setAttribute("stop-color", onMoveColor);
                        }

                    },
                    show: function () {


                    },
                    beforeShow: function () {

                    },
                    hide: function (color) {
                        var onHideColor = color.toHexString(); // #ff0000
                        var gradientId = $(this).attr('id');
                        var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                        for (var i = 0; i < SideAndPath.length; i++) {
                            var sideName = SideAndPath[i]['Side'];
                            var type = SideAndPath[i]['Type'];

                            var mainColorId = type + "_" + sideName + "_" + "Color";

                            var objectId = "objSVG_" + type + "_" + sideName;
                            document.getElementById(sideName + "_" + type + "_" + gradientId).setAttribute("stop-color", onHideColor);

                        }
                    },
                    change: function(color) {

                        var onChangeColor =  color.toHexString(); // #ff0000

                        var gradientId = $(this).attr('id');

                         var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
                
                        for (var i = 0; i < SideAndPath.length; i++) {
                            var sideName = SideAndPath[i]['Side'];
                            var type = SideAndPath[i]['Type'];

                            var mainColorId = type + "_" + sideName + "_" + "Color";

                            var objectId = "objSVG_" + type + "_" + sideName;
                            document.getElementById(sideName + "_" + type + "_" + gradientId).setAttribute("stop-color", onChangeColor);
                        }

                    },
                    palette: [
                        ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"],
                        ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)"],
                        ["rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)"],
                        ["rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)"],
                        ["rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)"],
                        ["rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)"]
                    ]
                });
            }

            function loadClipartColor(randomNumber){
                // console.log(randomNumber);
                $(".clipartColor").spectrum({
                    showInput: true,
                    className: "full-spectrum",
                    showInitial: true,
                    showPalette: true,
                    //allowEmpty: true,
                    showSelectionPalette: true,
                    maxSelectionSize: 6,
                    preferredFormat: "rgb",
                    localStorageKey: "spectrum.demo",

                    move: function(color) {
                        try{
                            var onMoveColor = color.toHexString(); // #ff0000
                            var pathid = $(this).attr('data-id');
                            var getRandomNumber = $(this).attr('data-number');
                            // console.log(getRandomNumber);
                            var obj = canvas.getActiveObject();
                            for (var j in obj.paths) {
                                
                                var id = obj.paths[j].get('id');
                                
                                if(pathid == id && randomNumber == getRandomNumber){
                                    obj.paths[j].setFill(onMoveColor);
                                    canvas.renderAll();
                                }
                            }
                        }catch(e){
                            $('.clipartColor').blur();
                        }

                    },
                    
                    show: function () {
                        

                    },
                    beforeShow: function () {

                    },
                    
                    hide: function (color) {	
                        try{
                            var onHideColor = color.toHexString(); // #ff0000
                            var pathid = $(this).attr('data-id');
                            var getRandomNumber = $(this).attr('data-number');
                            var obj = canvas.getActiveObject();
                            for (var j in obj.paths) {
                                
                                var id = obj.paths[j].get('id');
                                // console.log(onHideColor);
                                if(pathid == id && randomNumber == getRandomNumber){
                                    obj.paths[j].setFill(onHideColor);
                                    // console.log("random number true - hide");

                                    canvas.renderAll();
                                }
                            }
                        }catch(e){
                            $('.clipartColor').blur();
                        }
                        
                    },
                    
                    change: function(color) {
                        try{
                            var onChangeColor =  color.toHexString(); // #ff0000
                            var pathid = $(this).attr('data-id');
                            var getRandomNumber = $(this).attr('data-number');
                            var obj = canvas.getActiveObject();
                            
                            for (var j in obj.paths) {
                                
                                var id = obj.paths[j].get('id');
                                // console.log(onChangeColor);
                                if(pathid == id && randomNumber == getRandomNumber){
                                    obj.paths[j].setFill(onChangeColor);
                                    // console.log("random number true - change");
                                    canvas.renderAll();
                                }
                            }

                        }catch(e){
                            $('.clipartColor').blur();
                        }
                        
                        


                    },
                    palette: [
                        ["rgb(254, 254, 254)", "rgb(0, 0, 0)", "rgb(100, 106, 105)", "rgb(153, 153, 154)", "rgb(189, 187, 187)", "rgb(255, 0, 145)"],
                        ["rgb(255, 175, 190)", "rgb(255, 140, 190))", "rgb(180, 70, 140)", "rgb(125, 45, 60)", "rgb(150, 0, 50)", "rgb(200, 15, 40)"],
                        ["rgb(250, 75, 15)", "rgb(255, 130, 0)", "rgb(255, 180, 25)", "rgb(255, 200, 40)", "rgb(255, 220, 0)", "rgb(250, 235, 95)"],
                        ["rgb(140, 105, 35)", "rgb(165, 225, 0)", "rgb(60, 165, 30)", "rgb(0, 105, 55)", "rgb(45, 80, 50)", "rgb(0, 115, 120)"],
                        ["rgb(0, 155, 180)", "rgb(35, 175, 240)", "rgb(145, 190, 235)", "rgb(0, 95, 160)", "rgb(0, 60, 130)", "rgb(0, 50, 90)"],
                        ["rgb(170, 125, 200)", "rgb(90, 50, 135)", "rgb(100, 30, 100)", "rgb(130, 80, 45)", "rgb(205, 160, 115)", "rgb(255, 190, 120)"]
                    ]
                });
            }
            //###################	E N D  C O L O R  P A L E T T E S #######################//
            

            function myCart(){
                $.ajax({    //create an ajax request to load_page.php

                    type: "GET",
                    url: "{{url('cartcount')}}",
                    dataType: "html",   
                    success: function(response){
                        $("#my-cart-count").html(response);
                    }
                });
            }

            function loadTemplateDesign(){
                var tmpdetails = {!! json_encode($client_design_array[0]->TemplateDesign) !!};
                var obj = jQuery.parseJSON(tmpdetails);
                var SideAndPath = {!! json_encode($templatepaths_arrays) !!};

                ///////////// for mainColor
				var getMainColorType = obj[0].mainColor[0].type;
				if(getMainColorType == "Solid"){
					var setMainColor = obj[0].mainColor[0].solidColor;
                   
                
                    for (var i = 0; i < SideAndPath.length; i++) {
                        var sideName = SideAndPath[i]['Side'];
                        var type = SideAndPath[i]['Type'];

                        var mainColorId = type + "_" + sideName + "_" + "Color";
                       
                        document.getElementById(mainColorId).setAttribute("fill", setMainColor);
                        $("#mainColor").spectrum("set", 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;
                    
                    $('#row-body-gradient').css({
                        'display':'block'
                    });
                    
                    $('#btn-body-gradient').html('<i class="fa fa-2 fa-check" aria-hidden="true"></i>');
                    
                    $('#body-color-type').val('Gradient');

                   
                    document.getElementById('btn-body-gradient').style.background = "linear-gradient("+gradientColor1+","+gradientColor2+")";
                    $('#Offset_Body_Gradient_Color1').val(gradientColorOffset1.replace(/%/g, "") / 10);
                    $('#Offset_Body_Gradient_Color2').val(gradientColorOffset2.replace(/%/g, "") / 10);
                    
                    $("#Body_Gradient_Color1").val(gradientColor1);
                    $("#Body_Gradient_Color2").val(gradientColor2);
             
                    $("#Body_Gradient_Color1").next().parent().children().children().children()[0].setAttribute("style", "background-color:"+gradientColor1);
                    $("#Body_Gradient_Color2").next().parent().children().children().children()[0].setAttribute("style", "background-color:"+gradientColor2);
                    
                    // console.log(gradientColor1, gradientColor2);
                    for (var i = 0; i < SideAndPath.length; i++) {
                        var sideName = SideAndPath[i]['Side'];
                        var type = SideAndPath[i]['Type'];
                        
                        var SVGColorId = type +"_"+sideName+"_"+"Color";
                        var gradientId = sideName + "_" + type + "_Body_Gradient";

                        var gradientPrefix = sideName+"_"+type+"_";
                        var gradientIds = sideName+"_"+type+"_Gradients";

                        edit_loadGradientTemplate(gradientFor, gradientIds, gradientPrefix, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2,trimCount);
                        
                        try {
                            // document.getElementById(objectId).contentDocument.getElementById(SVGColorId).setAttribute("fill", "url(#"+gradientId+")");
                            document.getElementById(SVGColorId).setAttribute("fill", "url(#"+gradientId+")");
                        }catch(e){
                            //error here...
                        }
                    }				
					
                }

                
                ///////////// for patternColor
                try{
                    var getMainBodyPatternId = obj[0].patternColors[0].patternId;
                    if((getMainBodyPatternId != "noPattern") || (getMainBodyPatternId != "")){
                        var pColors = obj[0].patternColors[0].patternColors['length'];
                        if(pColors > 0){ // check if pattern exist
                            var k, arrayPatternColor = [], arrayGradientColors = [];
                            
							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 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;

							temp1 = {};
							temp1['gradientColor1'] = gradientColor1;
							temp1['gradientColor2'] = gradientColor2;
							temp1['gradientColorOffset1'] = gradientColorOffset1;
							temp1['gradientColorOffset2'] = gradientColorOffset2;
							arrayGradientColors.push(temp1);

                            SideAndPath.forEach(function(value) {
                                var sideName = value['Side'];
                                var type = value['Type'];

                                var objectId = "objSVG_" + type + "_" + sideName;
                                var SVGColorId = type +"_"+sideName+"_"+"Color";
                                // console.log(edit_pattern_properties(getMainBodyPatternId), getMainBodyPatternId);
                                // edit_pattern_properties(getMainBodyPatternId);
                                var svgpath = edit_pattern_properties(getMainBodyPatternId).small;
                                // console.log(getMainBodyPatternId)
                                var clipathval = "url(#"+ SVGColorId +"_Clippath_URL)";
                                var svgpatternid = SVGColorId + "_Pattern";
                                var TypeAndSide =  type + "_" + sideName;
                                var gradientColorId = "url(#"+sideName + "_" + type + "_Body_Pattern_Gradient)" ;
                                var gradientPrefix = sideName+"_"+type+"_";
                                var gradientIds = sideName+"_"+type+"_Gradients";
								
							
								
                                if(obj[0].patternColors[0].patternColorType == "Solid"){
									// console.log('Solid');
                                    edit_loadPattern(svgpath, clipathval, svgpatternid, objectId, TypeAndSide, arrayPatternColor);
									edit_set_pattern(getMainBodyPatternId, "Normal", obj[0].patternColors[0].patternColorType, arrayPatternColor, arrayGradientColors);
									
                                }else{
                                    // console.log('Grdeitn');
                                    var gradientFor = "Body_Pattern";
                                    var trimCount = 0;

									edit_set_pattern(getMainBodyPatternId, "Normal", obj[0].patternColors[0].patternColorType, arrayPatternColor, arrayGradientColors);
									
                                    edit_loadGradientTemplate(gradientFor, gradientIds, gradientPrefix, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
                                    
                                    edit_loadPatternGradient(svgpath, clipathval, svgpatternid, objectId, TypeAndSide, gradientColorId);
                        
                                    $('#body-pattern-color-type').val('Gradient');
                                }
                            });

                            $('#body-pattern-name').val(getMainBodyPatternId + ","+ pColors);
                            $('button[data-id = "'+getMainBodyPatternId+'"]').attr("disabled", true);
                            $('button[data-id = "'+getMainBodyPatternId+'"]').html('<i class="fa fa-2 fa-check" aria-hidden="true"></i>');
                            
                        }else{
                            // all overprint
                        }
                    }
                }catch(e){

                }


                // for trims
                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;
                        if(obj[0].Trims[i][trimNum].type == "Solid"){
                            var trim_solid_color = obj[0].Trims[i][trimNum].solidColor;
                            $("#Trim_"+trimCount).spectrum("set", trim_solid_color);

                            SideAndPath.forEach(function(value) {
                                var sideName = value['Side'];
                                var type = value['Type'];

                                var objectId = "objSVG_" + type + "_" + sideName;
                                var SVGColorId = type +"_"+sideName+"_Trim_"+ trimCount;
                                
                                try{
                                    // document.getElementById(objectId).contentDocument.getElementById(SVGColorId).setAttribute("fill", trim_solid_color);
                                   
                                    document.getElementById(SVGColorId).setAttribute("fill", trim_solid_color);
                                }catch(e){
                                    // error here..
                                }
                                
                            });
                        }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";

                            // SideAndPath.forEach(function(value) {
                            //     var sp = value;
                            //     var finalsp = sp.split(',');

                            //     var sideName = finalsp[0];
                            //     var type = finalsp[1];
                            //     var pathLocation = finalsp[2];

                            //     var objectId = "objSVG_" + type + "_" + sideName;
                            //     var SVGColorId = type +"_"+sideName+"_Trim_"+ trimCount;
                            //     var gradientId = sideName + "_" + type + "_Trim_"+trimCount+"_Gradient";

                            //     var gradientPrefix = sideName+"_"+type+"_";
                            //     var gradientIds = sideName+"_"+type+"_Gradients";
                                
                            //     loadGradientTemplate(gradientFor, gradientIds, objectId, gradientPrefix, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
                                
                            //     try {
                            //         document.getElementById(objectId).contentDocument.getElementById(SVGColorId).setAttribute("fill", "url(#"+gradientId+")");
                            //     }catch(e){
                            //         //error here...
                            //     }
                                
                            // });
                        }


                        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){ 
                                    // console.log(pColors);
                                    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);
                                    SideAndPath.forEach(function(value) {
                                        var sideName = value['Side'];
                                        var type = value['Type'];

                                        var objectId = "objSVG_" + type + "_" + sideName;
                                        var SVGColorId = type +"_"+sideName+"_Trim_"+ trimCount;

                                        var svgpath = edit_pattern_properties(getTrimPattern).small;
                                        var clipathval = "url(#"+ SVGColorId +"_Clippath_URL)";
                                        var svgpatternid = SVGColorId + "_Pattern";
                                        var TypeAndSide =  type + "_" + sideName;

                                        var gradientColorId = "url(#"+sideName + "_" + type + "_Trim_"+trimCount+"_Pattern_Gradient)" ;
                                        var gradientPrefix = sideName+"_"+type+"_";
                                        var gradientIds = sideName+"_"+type+"_Gradients";

                                    

                                        if(obj[0].Trims[i][trimNumPattern].patternColorType == "Solid"){
                                            // var patternId = type +"_"+sideName+"_PatternColor"+i;
                                            var sa = document.getElementById(objectId).contentDocument;
                                            var getPatternColor = "red";
                                            
                                            edit_loadPattern(svgpath, clipathval, svgpatternid, objectId, TypeAndSide, 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";
                                            // console.log(gradientColor1);
                                            // var trimCount = 0;
                                            edit_loadGradientTemplate(gradientFor, gradientIds, objectId, gradientPrefix, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
                                            edit_loadPatternGradient(svgpath, clipathval, svgpatternid, objectId, TypeAndSide, gradientColorId);
                                        }
                                    });
                                }
                            }

                        }catch(e){

                        }

                    }
                }
            }

            function edit_loadGradientTemplate(gradientFor, gradientIds, gradientPrefix, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount){
                $.ajax({ //create an ajax request to load_page.php

                    type: "POST",
                    url: "{{ url('/designer/edit/a/edit-gradient-append') }}",
                    data : {
                        gradientFor 	: 	gradientFor,
                        gradientPrefix	: 	gradientPrefix,
                        stop_color_1	: 	gradientColor1,
                        stop_color_2	: 	gradientColor2,
                        offset_1		:	gradientColorOffset1,
                        offset_2		:	gradientColorOffset2,
                        trimCount		: 	trimCount 
                    },
                    beforeSend:function(xhr){
                    var token = $('meta[name="csrf_token"]').attr('content');

                        if (token) {
                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                        }
                        xhr.setRequestHeader( 'X-Requested-With',  'XMLHttpRequest');
                    },
                    success: function(response) {
                    
                        try{
                            var g = document.getElementById(gradientIds);
                            var prevData = $(g).html();
                            $(g).html(response);
                        }catch(e){
                            
                        }
                    
                    }
                });
            }

            function edit_loadPattern(svgpath, clipathval, svgpatternid, visualizerObject, TypeAndSide, getPatternColor){
            
                $.get(svgpath, null, function(data){
                    var svgNode = $("svg", data);
                    var arrPath = [];
                    var docNode = document.adoptNode(svgNode[0]);
                    // console.log(docNode)
                    for(var i = 0 ; i < docNode.querySelectorAll("path")['length'] ; i++){
                        j = i + 1;
                        k = "PatternColor" + j;

                        var pathPatterns = docNode.querySelectorAll("path")[i];
                    
                        // for setting clippath
                        var att = document.createAttribute("clip-path");      
                        att.value = clipathval;
                        pathPatterns.setAttributeNode(att);

                        // for set Pattern Id
                        var getPatternIdFromSVG = TypeAndSide +"_"+ pathPatterns.getAttributeNode('id').value
                        var att1 = document.createAttribute("id");      
                        att1.value = getPatternIdFromSVG;
                        pathPatterns.setAttributeNode(att1);

                        // for PatternColor
                        var patterColor  = document.createAttribute("fill");      
                        patterColor.value = getPatternColor[i][k];
                        pathPatterns.setAttributeNode(patterColor);

                        var s = new XMLSerializer();	
                        var str = s.serializeToString(pathPatterns);
                        
                        arrPath.push(str);
                    }

                    try{
                        var contents = JSON.stringify(arrPath);
                        var con = jQuery.parseJSON(contents);
                        //console.log(con);
                        var countContents = con.length;
                        if(countContents != 0){ // check if content
                            var jContent = $.map(con, function(value) {
                                return(value);
                            });
                            // var t = document.getElementById(visualizerObject);
                            // var m = t.contentDocument.getElementById(svgpatternid);
                            var m = document.getElementById(svgpatternid);
                            // console.log(m);
                            $(m).html(jContent.join(""));

                        }
                    }catch (e){
                        //no errpr
                    }
                

                }, 'xml');
            }

            function edit_pattern_properties(id){
                var data;
                $.ajax({    //create an ajax request to load_page.php
                    type: "POST",
                    url : "{{ url('/designer/edit/a/edit-pattern-properties') }}",
                    data : {
                        patternId : id
                    },
                    async: false,
                    dataType : 'json',
                    beforeSend:function(xhr){
                        var token = $('meta[name="csrf_token"]').attr('content');

                        if (token) {
                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                        }
                        xhr.setRequestHeader( 'X-Requested-With',  'XMLHttpRequest');
                    },
                    success: function(response){
                        // return ;
                        // callback(response.large);
                        data = response;
                        // console.log(response);
                    }
                    
                });

                return data;
                
            }

            function edit_loadPatternGradient(svgpath, clipathval, svgpatternid, visualizerObject, TypeAndSide, getPatternColor){
                console.log(svgpath);
                $.get(svgpath, null, function(data){
                    var svgNode = $("svg", data);
                    // console.log(getPatternColor);
                    var docNode = document.adoptNode(svgNode[0]);
                    var pathPatterns = docNode.querySelectorAll("path")[0];
                    
                    var att = document.createAttribute("clip-path");      
                    att.value = clipathval;
                    pathPatterns.setAttributeNode(att);

                    // for set Pattern Id
                    var getPatternIdFromSVG = TypeAndSide +"_"+ pathPatterns.getAttributeNode('id').value
                    var att1 = document.createAttribute("id");      
                    att1.value = getPatternIdFromSVG;
                    pathPatterns.setAttributeNode(att1);

                    // for PatternColor
                    var patterColor  = document.createAttribute("fill");      
                    patterColor.value = getPatternColor;
                    pathPatterns.setAttributeNode(patterColor);
                
                
                    try{
                        document.getElementById(svgpatternid).append(pathPatterns);

                    }catch (e){
                        //no errpr
                    }
                

                }, 'xml');
            }

            function edit_set_pattern(getId, patternType, patternFor, pcolors, gradientColor){
                $.ajax({    //create an ajax request to load_page.php

                    type: "POST",
                    url: "{{ url('/designer/edit/a/edit-set-pattern') }}",
                    dataType: "html",   //expect html to be returned
                    data: {
                            patternId : getId,
                            patternType: patternType,
                            patternFor: patternFor,
                            pcolors : pcolors,
                            gradientColor: gradientColor
                        },
                    beforeSend:function(xhr){
                        var token = $('meta[name="csrf_token"]').attr('content');

                        if (token) {
                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                        }
                        xhr.setRequestHeader( 'X-Requested-With',  'XMLHttpRequest');
                    },
                    success: function(response){

                        if(getId != 'noPattern'){

                            $("#patternColorChoices").hide().html(response).fadeIn("slow");

                            loadPatternColor();
                            colorPickerCustom();

                        }else{
                            $("#patternColorChoices").html(response);
                            //backToNoPattern();
                        }
                    }
                });
            }
        </script>
    </body>

</html>