<!DOCTYPE html>
<html>
	<head>

		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>CREW | Dashboard</title>
		<!-- Tell the browser to be responsive to screen width -->
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<meta name="csrf_token" content="{{ csrf_token() }}" />
		<!-- Bootstrap 3.3.6 -->
		<link rel="stylesheet" href="{{asset('/public/bower_components/AdminLTE/bootstrap/css/bootstrap.min.css')}}">
		<!-- Font Awesome -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
		<!-- Ionicons -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
		<!-- Theme style -->
		<link rel="stylesheet" href="{{asset('/public/bower_components/AdminLTE/dist/css/AdminLTE.min.css')}}">
		<!-- AdminLTE Skins. Choose a skin from the css/skins
		folder instead of downloading all of them to reduce the load. -->
		<link rel="stylesheet" href="{{asset('/public/bower_components/AdminLTE/dist/css/skins/_all-skins.min.css')}}">
		<!-- iCheck -->
		<link rel="stylesheet" href="{{asset('/public/bower_components/AdminLTE/plugins/iCheck/flat/blue.css')}}">
		<!-- Date Picker -->
		<link rel="stylesheet" href="{{asset('/public/bower_components/AdminLTE/plugins/datepicker/datepicker3.css')}}">
		<!-- Daterange picker -->
		<link rel="stylesheet" href="{{asset('/public/bower_components/AdminLTE/plugins/daterangepicker/daterangepicker.css')}}">
		<!-- bootstrap wysihtml5 - text editor -->
		<link rel="stylesheet" href="{{asset('/public/bower_components/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css')}}">
		<!-- Select2 -->
		<link href="{{asset('/public/bower_components/AdminLTE/plugins/select2/select2.min.css')}}" rel="stylesheet" />
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
		
		<style>
			.skin-black-light .wrapper, .skin-black-light .main-sidebar, .skin-black-light .left-side{
				background-color: #222d32;
			}

			.skin-black-light .sidebar-menu>li:hover>a, 	.skin-black-light .sidebar-menu>li.active>a{
				color: #fff;
				background: #1e282c;
				border-left-color: #fff;
			}
			.skin-black-light .sidebar-menu>li.header{
				color: #4b646f;
    			background: #1a2226;
			}
			.skin-black-light .sidebar a{
				 color: rgb(184, 199, 206);
			}
			.skin-black-light .user-panel>.info, .skin-black-light .user-panel>.info>a {
				color: #fff;
			}
			.skin-black-light .sidebar-menu>li>.treeview-menu{
				margin: 0 1px;
    			background: #2c3b41;
			}
			.skin-black-light .treeview-menu>li.active>a, .skin-black-light .treeview-menu>li>a:hover{
				color: #fff;
			}
			.skin-black .treeview-menu>li>a{
			    color: #8aa4af;
			}
			.box.box-custom-color{
				border-top-color: #222d32;
			}

			.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img, .product-center{
				margin: auto;
			}
			.sports-border{
				border:1px solid #e2e2e2;
				padding: 5px;
				margin-bottom:20px;
			}
			.sport-edit-btn{
				margin-top:5px;
			}
			
			#prev-img{
				height: 300px;
				width: 300px;
				overflow:hidden;
				object-fit: contain;
				border: 1px solid #e2e2e2;
				padding: 2px;

			}

			/* #prev-img{
				height: 300px;
				width: 300px;
				overflow:hidden;
				object-fit: contain;
				border: 1px solid #e2e2e2;
				padding: 2px;

			} */

			#prev-print-template{
				height: 300px;
				width: 600px;
				overflow:hidden;
				object-fit: contain;
				border: 1px solid #e2e2e2;
				padding: 2px;
			}
			
			#label-suggest-upload{
				color: red;
			}

			/* for add template step by step design*/
			.wizard {
			    margin: 20px auto;
			    background: #fff;
			    margin-top: -38px;
			}

		    .wizard .nav-tabs {
		        position: relative;
		        margin: 40px auto;
		        margin-bottom: 0;
		        border-bottom-color: #e0e0e0;
		    }

		    .wizard > div.wizard-inner {
		        position: relative;
		    }

			.connecting-line {
			    height: 2px;
			    background: #e0e0e0;
			    position: absolute;
			    width: 65%;
			    margin: 0 auto;
			    left: 0;
			    right: 0;
			    top: 50%;
			    z-index: 1;
			}

			.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
			    color: #555555;
			    cursor: default;
			    border: 0;
			    border-bottom-color: transparent;
			}

			span.round-tab {
			    width: 70px;
			    height: 70px;
			    line-height: 70px;
			    display: inline-block;
			    border-radius: 100px;
			    background: #fff;
			    border: 2px solid #e0e0e0;
			    z-index: 2;
			    position: absolute;
			    left: 0;
			    text-align: center;
			    font-size: 25px;
			}
			span.round-tab i{
			    color:#555555;
			}
			.wizard li.active span.round-tab {
			    background: #fff;
			    border: 2px solid #5bc0de;
			    
			}
			.wizard li.active span.round-tab i{
			    color: #5bc0de;
			}

			span.round-tab:hover {
			    color: #333;
			    border: 2px solid #333;
			}

			.wizard .nav-tabs > li {
			    width: 33.33333333333333%;
			}

			.wizard li:after {
			    content: " ";
			    position: absolute;
			    left: 46%;
			    opacity: 0;
			    margin: 0 auto;
			    bottom: 0px;
			    border: 5px solid transparent;
			    border-bottom-color: #5bc0de;
			    transition: 0.1s ease-in-out;
			}

			.wizard li.active:after {
			    content: " ";
			    position: absolute;
			    left: 46%;
			    opacity: 1;
			    margin: 0 auto;
			    bottom: 0px;
			    border: 10px solid transparent;
			    border-bottom-color: #5bc0de;
			}

			.wizard .nav-tabs > li a {
			    width: 70px;
			    height: 70px;
			    margin: 20px auto;
			    border-radius: 100%;
			    padding: 0;
			}

		    .wizard .nav-tabs > li a:hover {
		        background: transparent;
		    }

			.wizard .tab-pane {
			    position: relative;
			    padding-top: 20px;
			}

			.wizard h3 {
			    margin-top: 0;
			}

			@media( max-width : 585px ) {

			    .wizard {
			        width: 90%;
			        height: auto !important;
			    }

			    span.round-tab {
			        font-size: 16px;
			        width: 50px;
			        height: 50px;
			        line-height: 50px;
			    }

			    .wizard .nav-tabs > li a {
			        width: 50px;
			        height: 50px;
			        line-height: 50px;
			    }

			    .wizard li.active:after {
			        content: " ";
			        position: absolute;
			        left: 35%;
			    }
			}
			/*end*/

			.custom-panel-footer.panel-footer{
				padding: 2px 2px;
			}
			.custom-panel-body.panel-body{
				padding: 10px;
			}
			.obj-container{
				height:254px; 
				width:100%; 
				margin:auto;
			}


			/*add pattern Select custom css*/
			.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{

				border-radius: 0;
				border-color: #d2d6de;
			}

			.select2-container--default .select2-selection--multiple{
				border-radius: 0;
				border-color: #d2d6de;
			}

			.select2-container--default.select2-container--focus .select2-selection--multiple{
				border-color: #d2d6de;
			}

			.select2-container--default .select2-selection--multiple .select2-selection__choice{
				background-color: #3c8dbc;
				border: 1px solid #3c8dbc;
			    border-radius: 2px;
			    cursor: default;
			    float: left;
			    margin-right: 5px;
			    margin-top: 5px;
			    padding: 0 5;
			}

			.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{

			    color: #c5c5c5;
			    margin-right: 5px;
			}
			/*end add pattern Select custom css*/

			#template-img-preview{
				height: 300px;
				width: 300px;
				overflow:hidden;
				object-fit: contain;
				border: 1px solid #e2e2e2;
				padding: 2px;

			}

			/*listview*/
			div.list-group-item {
			    height:auto;
			    min-height:190px;
			}
			
			div.list-group-item.active small {
			    color:#fff;
			}
			.stars {
			    margin:20px auto 1px;    
			}

			/*.img-print-preview{
				min-height: 250px;
				height: 250px;
				width: 350px;
			}*/

			#homepage-logo{
				margin-top: 120px;
			}

			.no-record{
				color: #bbbbbb;
			}

		</style>

	</head>

	<body id="bodyId_" class="sidebar-mini wysihtml5-supported skin-black">
		<div class="wrapper">

            <!-- Header -->
            @include('main_layouts.header')

            <!-- Sidebar -->
            @include('main_layouts.sidebar')

	    		<!-- Content Wrapper. Contains page content -->
				@yield('content')

			<!-- Footer -->
			@include('main_layouts.footer')
		</div>
		<!-- ./wrapper -->

		<!-- jQuery 2.2.3 -->
		<script src="{{asset('/public/bower_components/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js')}}"></script>
		<!-- jQuery UI 1.11.4 -->
		<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
		<!-- Bootstrap 3.3.6 -->
		<script src="{{asset('/public/bower_components/AdminLTE/bootstrap/js/bootstrap.min.js')}}"></script>

		<!-- daterangepicker -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
		<script src="{{asset('/public/bower_components/AdminLTE/plugins/daterangepicker/daterangepicker.js')}}"></script>
		<!-- datepicker -->
		<script src="{{asset('/public/bower_components/AdminLTE/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
		<!-- Bootstrap WYSIHTML5 -->
		<script src="{{asset('/public/bower_components/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js')}}"></script>
		<!-- Slimscroll -->
		<script src="{{asset('/public/bower_components/AdminLTE/plugins/slimScroll/jquery.slimscroll.min.js')}}"></script>
		<!-- FastClick -->
		<script src="{{asset('/public/bower_components/AdminLTE/plugins/fastclick/fastclick.js')}}"></script>
		<!-- AdminLTE App -->
		<script src="{{asset('/public/bower_components/AdminLTE/dist/js/app.min.js')}}"></script>
		<!-- AdminLTE dashboard demo (This is only for demo purposes)
	    <script src="{{asset('/bower_components/AdminLTE/dist/js/pages/dashboard.js')}}"></script>-->
		<!-- AdminLTE for demo purposes -->
		<script src="{{asset('/public/bower_components/AdminLTE/dist/js/demo.js')}}"></script>

		<!-- Select2 -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
		<!-- validate jquery -->
		<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

		<script>

			function readURL(input) {
				if (input.files && input.files[0]) {
					var reader = new FileReader();

					reader.onload = function (e) {
						$('#prev-img')
							.attr('src', e.target.result);
					};

					reader.readAsDataURL(input.files[0]);
				}
			}

			function loadPrintTemplate(input) {
				if (input.files && input.files[0]) {
					var reader = new FileReader();

					reader.onload = function (e) {
						$('#prev-print-template')
							.attr('src', e.target.result);
					};

					reader.readAsDataURL(input.files[0]);
				}
			}

			function templateThumbnailPreview(input) {
				if (input.files && input.files[0]) {
					var reader = new FileReader();

					reader.onload = function (e) {
						$('#template-img-preview')
							.attr('src', e.target.result);
					};

					reader.readAsDataURL(input.files[0]);
				}
			}

			function loadSVG(input) {
				console.log();
				if (input.files && input.files[0]) {
					var reader = new FileReader();

					reader.onload = function (e) {
						document.getElementById($(input).attr("data-id")).setAttribute('data', e.target.result);
					};

					reader.readAsDataURL(input.files[0]);
				}
			}
			
			function clearTemplateImg(){
				$('#tempateImage').val("");
				$('#template-img-preview').attr('src', "{{asset('/public/images/no-image.jpg')}}");
			}

			function clearImg(){
				$('#previewImg').val("");
				$('#prev-img').attr('src', "{{asset('/public/images/no-image.jpg')}}");
			}

			function clearImgEdit(path){
				$('#previewImg').val("");
				$('#prev-img').attr('src', path);
			}

			function cancelButton(){
				history.back(-1);

			}

			$(document).ready(function(){

				sportsNameSelect();
				getTemplateType();
				getPattern();
				getTemplateCode();

				setTimeout(function(){
					getPatternPost(); 
				}, 3000);
		
				//Initialize tooltips
			    $('.nav-tabs > li a[title]').tooltip();
			    
			    //Wizard
			    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

			        var $target = $(e.target);
			    
			        if ($target.parent().hasClass('disabled')) {
			            return false;
					}
					
			    });

			    // $(".next-step").click(function (e) {
			    //     var $active = $('.wizard .nav-tabs li.active');
			    //     //alert($active);
			    //     $active.next().removeClass('disabled');
			    //     nextTab($active);
			    // });

			    $(".prev-step").click(function (e) {
			        var $active = $('.wizard .nav-tabs li.active');
			        prevTab($active);
			    });
				
				//##############
				$("#_addSportsName").on('keyup',function(){
					var getsportName = $(this).val();
					getsportName = getsportName.replace(/\s+/g, '-').toLowerCase(); //new object assigned to var str
					$("#generatedUrl").val(getsportName);
				});

				$("#frmAddSports").validate({
					rules: {
						sportsName: {
							required: true
						},
						generatedUrl: {
							required: true
						},
						previewImg: {
							required: true
						}
					},
					messages: {},
					errorPlacement: function(error, element) {
						var placement = $(element).data('error');
						if (placement) {
							$(placement).append(error)
						}else {
							error.insertAfter(element);
						}
					},
					submitHandler: submitNewSports
				});
				/* validation */
				
				function submitNewSports(){
					$.ajax({
						type: "POST",
						url: "{{url('admin/sports/save')}}", // admin/sports/save
						data: new FormData($('#frmAddSports')[0]),
						processData: false,
						contentType: false,
						beforeSend: function(xhr){
							$("#saveSportsBtn").attr('disabled', true);
                        	$("#saveSportsBtn").html('Saving &nbsp; <img src="{{url('public/images/ajax-loader.gif')}}">');

							var token = $('meta[name="csrf_token"]').attr('content');
	                        if (token) {
	                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
	                        }

	                    },
						success: function (data) {
							// $('#bodyId_').focus();
							$("html, body").animate({ scrollTop: 0 }, "slow");
							$("#saveNewSportsMsg").html(data).fadeIn().delay(3000).fadeOut();
							$("#saveSportsBtn").attr('disabled', false);
                        	$("#saveSportsBtn").html('Save');
							$("#frmAddSports").get(0).reset();
							 clearImg(); // for preview image
						}
					});
					return false;
				}

				$("#frmUpdateSports").validate({
					rules: {
						sportsName: {
							required: true
						},
						generatedUrl: {
							required: true
						}
					},
					messages: {},
					errorPlacement: function(error, element) {
						var placement = $(element).data('error');
						if (placement) {
							$(placement).append(error)
						}else {
							error.insertAfter(element);
						}
					},
					submitHandler: submitUpdateSports
				});
				/* validation */
				
				function submitUpdateSports(){
					$.ajax({
						type: "POST",
						url: "{{url('admin/sports/update')}}", // admin/sports/save
						data: new FormData($('#frmUpdateSports')[0]),
						processData: false,
						contentType: false,
						beforeSend: function(xhr){
							$("#updateSportsBtn").attr('disabled', true);
                        	$("#updateSportsBtn").html('Updating &nbsp; <img src="{{url('public/images/ajax-loader.gif')}}">');

							var token = $('meta[name="csrf_token"]').attr('content');
	                        if (token) {
	                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
	                        }

	                    },
						success: function (data) {
							// $('#bodyId_').focus();
							$("html, body").animate({ scrollTop: 0 }, "slow");
							$("#updateSportsMsg").html(data).fadeIn().delay(2000).fadeOut(function(){

								window.location = "{{url('/admin/sports/edit')}}" + "/" + $('#generatedUrl').val();
							});

							$("#updateSportsBtn").attr('disabled', false);
                        	$("#updateSportsBtn").html('Update');
						}
					});
					return false;
				}

				$("#frmAddPrintTemplate").validate({
					rules: {
						templateType: {
							required: true
						},
						templateSize: {
							required: true
						},
						preview_print_template: {
							required: true
						}
					},
					messages: {},
					errorPlacement: function(error, element) {
						var placement = $(element).data('error');
						if (placement) {
							$(placement).append(error)
						}else {
							error.insertAfter(element);
						}
					},
					submitHandler: submitAddPrintTemplate
				});
				/* validation */
				
				function submitAddPrintTemplate(){
					$.ajax({
						type: "POST",
						url: "{{url('admin/print-template/save')}}", // admin/sports/save
						data: new FormData($('#frmAddPrintTemplate')[0]),
						processData: false,
						contentType: false,
						beforeSend: function(xhr){

							var token = $('meta[name="csrf_token"]').attr('content');
	                        if (token) {
	                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
	                        }

	                    },
						success: function (data) {
							// $('#bodyId_').focus();
							$("html, body").animate({ scrollTop: 0 }, "slow");
							$("#savePrintTemplateMsg").html(data).fadeIn().delay(2000).fadeOut(function(){

								location.reload();
							});
						}
					});
					return false;
				}

				$("#frmTemplate").validate({
					rules: {
						templateCode: {
							required: true
						},
						sportName: {
							required: true
						},
						templateName: {
							required: true
						},
						templateType: {
							required: true
						},
						numberOfTrims: {
							required: true,
							number: true
						},
						addPattens: {
							required: true
						},
						tempateImage: {
							required: true
						},
						svgJerseyFront: {
							required: true
						},
						svgJerseyBack: {
							required: true
						},
						svgShortRight: {
							required: true
						},
						svgShortLeft: {
							required: true
						}
					},
					messages: {},
					errorPlacement: function(error, element) {
						var placement = $(element).data('error');
						if (placement) {
							$(placement).append(error)
						} else {
							error.insertAfter(element);
						}
					}
				});

				$("#frmEditTemplate").validate({
					rules: {
						templateCode: {
							required: true
						},
						sportName: {
							required: true
						},
						templateName: {
							required: true
						},
						templateType: {
							required: true
						},
						numberOfTrims: {
							required: true,
							number: true
						},
						addPattens: {
							required: true
						}
					},
					messages: {},
					errorPlacement: function(error, element) {
						var placement = $(element).data('error');
						if (placement) {
							$(placement).append(error)
						}else {
							error.insertAfter(element);
						}
					}
				});
			}); // end document ready 
			
			//saving new template
			$('#stepOneNextBtn').click(function() {
		        
		        if($("#frmTemplate").valid()){
			       	var $active = $('.wizard .nav-tabs li.active');
				    $active.next().removeClass('disabled');
				    nextTab($active);
		        }
		        $('#getSkins').val($('#_addPatterns').val());
		    });

		    $('#stepTwoNextBtn').click(function() {
		        
		        if($("#frmTemplate").valid()){
			       	var $active = $('.wizard .nav-tabs li.active');
				    $active.next().removeClass('disabled');
				    nextTab($active);
		        }
		    });

		    $('#submitTemplateBtn').click(function() {
		        // var data = new FormData($('#frmTemplate')[0]);
		     	 if (!confirm('Are you sure you want to save?')) return false;
		        // console.log(data);


		        $.ajax({
					type: "POST",
					url: "{{url('admin/templates/save')}}", // admin/sports/save
					data: new FormData($('#frmTemplate')[0]),
					processData: false,
					contentType: false,
					beforeSend: function(xhr){
						var token = $('meta[name="csrf_token"]').attr('content');
                        if (token) {
                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                        }

                    },
					success: function (data) {
						$('#bodyId_').focus();
						// $("#saveTemplateMsg").html(data);
						$("html, body").animate({ scrollTop: 0 }, "slow");
						
						$("#saveTemplateMsg").html(data).fadeIn().delay(2000).fadeOut(function(){

							location.reload();
						});

						$("#submitTemplateBtn").attr('disabled', false);
					}
				});
				return false;
		    });
		    //end saving new template

		    //edit template 
		    $('#stepOneNextBtn_Edit').click(function() {
		        
		        if($("#frmEditTemplate").valid()){
			       	var $active = $('.wizard .nav-tabs li.active');
				    $active.next().removeClass('disabled');
				    nextTab($active);
		        }
		        $('#skinsEdit').val($('#addPatterns_').val());
		    });

		    $('#stepTwoNextBtn_Edit').click(function() {
		        
		        if($("#frmEditTemplate").valid()){
			       	var $active = $('.wizard .nav-tabs li.active');
				    $active.next().removeClass('disabled');
				    nextTab($active);
		        }
		    });

		    $('#submitTemplateBtn_Edit').click(function() {
		        // var data = new FormData($('#frmTemplate')[0]);
		     	 if (!confirm('Are you sure you want to save changes?')) return false;
		        // console.log(data);
		       
		        $.ajax({
					type: "POST",
					url: "{{url('admin/templates/update')}}", // admin/sports/save
					data: new FormData($('#frmEditTemplate')[0]),
					processData: false,
					contentType: false,
					beforeSend: function(xhr){
						var token = $('meta[name="csrf_token"]').attr('content');
                        if (token) {
                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                        }

                    },
					success: function (data) {
						$('#bodyId_').focus();
						// $("#saveTemplateMsg").html(data);
						$("html, body").animate({ scrollTop: 0 }, "slow");
						
						$("#saveTemplateMsg").html(data).fadeIn().delay(2000).fadeOut(function(){

							location.reload();
						});
						// $("#saveTemplateMsg").html(data);
						$("#submitTemplateBtn_Edit").attr('disabled', false);
					}
				});
				return false;
		    });
		    //end template

			function nextTab(elem) {
			    $(elem).next().find('a[data-toggle="tab"]').click();
			}
			
			function prevTab(elem) {
			    $(elem).prev().find('a[data-toggle="tab"]').click();
			}
		
			function sportsNameSelect(){
                $.ajax({    //create an ajax request to load_page.php
                    type: "GET",
                    url: "{{url('admin/sports/sportsname')}}",
                    dataType: "html",   //expect html to be returned
                    success: function(response){

                        $('select[id="sportName"]').html(response);
					//console.log(response);
                    }
                });
            }

            function getTemplateCode(){
                $.ajax({    //create an ajax request to load_page.php
                    type: "GET",
                    url: "{{url('admin/templates/getlastid')}}",
                    dataType: "html",   //expect html to be returned
                    success: function(response){

                    	$('#templateCode').val(response);
                        //console.log();
                    }
                });
            }

            function getTemplateType(){
                $.ajax({    //create an ajax request to load_page.php
                    type: "GET",
                    url: "{{url('admin/templates/type')}}",
                    dataType: "html",   //expect html to be returned
                    success: function(response){

                        $('select[id="templateType"]').html(response);
					//console.log(response);
                    }
                });
            }

            function getPattern(){
           
                $.ajax({    //create an ajax request to load_page.php
                    type: "GET",
                    url: "{{url('admin/pattern/get')}}",
                    dataType: "html",   //expect html to be returned
                    success: function(response){

						$('select[name="addPattens"]').html(response);
						// console.log(response);
                        //$(".select2").select2();

                        $("#_addPatterns").select2({
					  		//placeholder: "Select something!!",
						    width: "100%",
					      	allowClear: true,
						    templateResult: patternSetValue,
					      	escapeMarkup: function (m) {
								return m;
							}
						});
					// console.log(patternSetValue);
                    }
                });
            }

            function getPatternPost(){
           		var vals = $('#skinsEdit').val();
				var res = vals.split(",");
				console.log(res);
                $.ajax({    //create an ajax request to load_page.php
                    type: "post",
                    url: "{{url('admin/pattern/get/withvalue')}}",
                    data : {
                    	patterns : res
                    },
                    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);
                        }

                    },
                    success: function(response){

                    	// console.log(response);
                        $('select[name="addPattens"]').html(response);
                        //$(".select2").select2();

                        $("#addPatterns_").select2({
					  		//placeholder: "Select something!!",
						    width: "100%",
					      	allowClear: false,
						    templateResult: patternSetValue,
					      	escapeMarkup: function (m) {
								return m;
							}
						});
					//console.log(response);
                    }
                });
            }

            function patternSetValue (option) {
				  var optimage = $(option.element).data('img'); 
				  
				//console.log(optimage);
		      
				if (!option.id) {
		      		return option.text; 
		     	}
				var ob = '<img src="'+optimage+'" height="30px;" /> <span style="margin-left:10px;">' + option.text + '</span>'; // replace image source with option.img (available in JSON)
		      console.log(ob);
				return ob;
			}

			$(document).on('select change', '.getURL', function() {
				//alert($(this).val());
				$.ajax({
					type: "POST",
					url: "{{url('admin/templates/id')}}" + "/" + $(this).val(), // admin/sports/save
					data:{
                            id : $(this).val()
                        },
                    dataType: "html",
					beforeSend: function(xhr){

						var token = $('meta[name="csrf_token"]').attr('content');
						if (token) {
							return xhr.setRequestHeader('X-CSRF-TOKEN', token);
						}
					},
					success: function (response) {
						$("#displayTemplates").html(response);
						//console.log(response);
					}
				});
			});

			function getskinvalue(){
				var vals = $('#skinsEdit').val();
				var res = vals.split(",");
			}
			
		</script>

	</body>
</html>
