@extends('admin.master')
@section('head')
	<link rel="stylesheet" type="text/css" href="{{ URL::asset('assets')}}/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css"/>
@endsection
@section('content')

	<!-- BEGIN CONTENT -->
	<div class="page-content-wrapper">
		<div class="page-content">

			<!-- BEGIN PAGE HEADER-->
			<h3 class="page-title">
				دسته بندی ها
			</h3>
			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-home"></i>
						<a href="">
							داشبورد
						</a>
						<i class="fa fa-angle-left"></i>
					</li>
					<li>
						<a href="#">
							دسته بندی ها
						</a>

					</li>
				</ul>
			</div>
			<!-- END PAGE HEADER-->

			<!-- BEGIN PAGE CONTENT-->
			<div class="row">

				<!-- BEGIN create new/edit category form-->
				<div class="col-md-5">
					<!-- BEGIN new category PORTLET-->
					<form method="post" action="" id="catform" onsubmit="return catForm()">
						<input type="hidden" name="_token"   value="{{ csrf_token() }}" />
						<input type="hidden" name="catid" id="catid"   value="" />
						<input type="hidden" name="lang" id="lang"   value="{{$lang}}" />
					<div class="portlet light bg-inverse">
						<div class="portlet-title">
							<div class="caption font-blue">
								<span aria-hidden="true" class="icon-pencil"></span>
									<span class="caption-subject bold uppercase">
									دسته جدید
									</span>
							</div>
							<div class="tools">
								<a href="" class="collapse">
								</a>
								<a href="" class="reload">
								</a>
								<a href="" class="fullscreen">
								</a>
								<a href="" class="remove">
								</a>
							</div>
						</div>
						<div class="portlet-body form">
							<div  >
								<div class="form-body">
									<div class="form-group">
										<label class="control-label ">
											انتخاب دسته اصلی
										</label>
											<div class="input-group">
												<span class="input-group-addon">
												<i class="fa fa-user"></i>
												</span>
												<select id="maincat" name="maincat"  class="form-control " data-placeholder="">
													<option value="0">
														انتخاب کنید
													</option>
													@foreach($maincat as $mc)
															@if($mc->cat_parent === 0)
															<option value="{{$mc->cat_id}}">
																{{$mc->cat_view}}
															</option>
																@endif
														@endforeach
												</select>
											</div>
											<!-- /input-group -->
										<p class="help-block">
											انتخاب دسته اصلی اجباری است.
										</p>
									</div>
									<div class="form-group">
										<label class="control-label ">
										نام دسته مادر
										</label>
										<div class="input-group">
												<span class="input-group-addon">
												<i class="fa fa-user"></i>
												</span>
											<select name="subcat" id="subcat" class="form-control " data-placeholder="">
												<option value="">
											ندارد
												</option>
											</select>
										</div>
										<p class="help-block">
											دسته‌ها برخلاف برچسب‌ها می‌توانند سلسله مراتب داشته باشند. به طور مثال شما می‌توانید یک دسته به نام موسیقی داشته باشید و برای آن دسته، زیر دسته‌هایی مانند موسیقی ایرانی و یا موسیقی غربی تعریف کنید.
										</p>
									</div>
									<div class="form-group">
										<label>
											نام دسته
										</label>
										<div class="input-group">
											<span class="input-group-addon">
											<i class="fa fa-envelope"></i>
											</span>
											<input id="catview" name="catview"  type="text" class="form-control" placeholder="">
										</div>
										<p class="help-block">
											در سایت با این نام نمایش داده می‌شود.
										</p>
									</div>
									<div class="form-group">
										<label>
										نامک
										</label>
										<div class="input-group">
											<span class="input-group-addon">
											<i class="fa fa-envelope"></i>
											</span>
											<input name="catname" id="catname"  type="text" class="form-control" placeholder="">

										</div>
										<p class="help-block">
											نامک نسخه لاتین واژه است که در نشانی‌ها (URLs)‌ استفاده می‌شود. برای نامگذاری فقط از حروف،‌ ارقام و خط تیره استفاده کنید. نمایش فقط با حروف کوچک خواهد بود.
										</p>
									</div>
									<div class="form-group row " style="">
										<label class="col-md-12">
											توضیح
										</label>
										<div class="col-md-12">
												<textarea id="desc" name="desc"  type="text"   class="form-control rtl text-right autosizeme" rows="4" placeholder=""></textarea>
											<p class="help-block">
												توضیحات به صورت پیش فرض مهم نیستند،
											</p>
										</div>
									</div>
									<div class="form-group row " style="">

											<div class="col-md-3">
												<div id="fileinput" class="fileinput fileinput-new" data-provides="fileinput">
													<div class="input-group input-large">
														<div class="form-control uneditable-input input-fixed input-medium" data-trigger="fileinput">
															<i class="fa fa-file fileinput-exists"></i>&nbsp; <span class="fileinput-filename">
														</span>
														</div>
														<span class="input-group-addon btn default btn-file">
													<span class="fileinput-new">
													انتخاب تصویر
													  </span>
													<span class="fileinput-exists">
													تعویض </span>
													<input type="file" name="image">
													</span>
														<a href="javascript:;" class="input-group-addon btn red fileinput-exists" data-dismiss="fileinput">
															حذف</a>
													</div>
												</div>
											</div>

									</div>
									<div class="clearfix row">
										<div class="col-md-4 ">
											<a id="submitedit" onclick="sendedit()" class="btn btn-success btn-block " style="display: none">
											ثبت تغییرات
											</a>
											<a id="submitnew" onclick="send()" class="btn btn-success btn-block">
											افزودن دسته تازه
											</a>
										</div>
										<div class="col-md-4 ">
											<a id="editcancel" onclick="editcancel()" class="btn btn-danger btn-block" style="display: none">
												لغو
											</a>
											<a id="cancel" onclick="cancel()" class="btn btn-danger btn-block" style="">
										لغو
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- END new category PORTLET-->
						<input type="hidden" name="status" value="actives">
					</form>
				</div>
				<!-- END create new/edit category form-->

				<!-- BEGIN category list-->
				<div class="col-md-7">
					<!-- BEGIN category list PORTLET-->
					<div class="portlet light bg-inverse" id="catportlet">
						<div class="portlet-title">
							<div class="caption font-blue">
								<span aria-hidden="true" class="icon-list"></span>
									<span class="caption-subject bold uppercase">
								لیست دسته بندی ها
									</span>
							</div>
							<div class="tools">
								<a href="javascript:;" class="collapse">
								</a>
								<a href="javascript:;" class="reload">
								</a>
								<a href="javascript:;" class="remove">
								</a>
							</div>
						</div>
						<div class="portlet-body">
							<div style="padding-right: 0 !important;" class="col-md-3 form-group">

								<div class="col-md-9"> <label>تعداد:</label>
									<div class="input-group">
                                                   <span class="input-group-addon">
                                                   <i class="fa fa-list"></i>
                                                     </span>
										<select onchange="loadcategory()" id="count-pro"  class=" input-sm form-control"  tabindex="1">
											<option   value="5">5</option>
											<option selected value="10">10</option>
											<option value="20">20</option>
										</select>
									</div>
								</div>
							</div>
							<div style="padding-right: 0 !important;" class="col-md-4 form-group">

								<div class="col-md-11"> <label>
										فیلتر بر اساس:
									</label>
									<div class="input-group">
                                                   <span class="input-group-addon">
                                                   <i class="fa fa-list"></i>
                                                     </span>
										<select onchange="loadcategory()" id="status" class=" input-sm form-control"  tabindex="1">
											<option value="">
												همه
											</option>
											<option selected value="actives">
												فعال
											</option>
											<option value="deactive">
												غیرفعال
											</option>
										</select>
									</div>
								</div>
							</div>
							<div style="padding-left: 0 !important;" class="col-md-4 col-md-offset-1  form-group">

								<div class="col-md-12"><label>جستجو:</label>
									<div class="input-group">
												<span class="input-group-addon">
												<i class="fa fa-search"></i>
												</span>
										<input type="text" onkeyup="loadcategory(this.value)" id="search-pro" class="form-control input-sm" placeholder="جستجو">
									</div>
								</div>
							</div>
							<div class="table-scrollable">
								<table class="table table-striped table-bordered table-advance table-hover">
									<thead>
									<tr>
										<th>
											<i class="fa fa-briefcase"></i>
										نام دسته
										</th>
										<th class="hidden-xs">
											<i class="fa fa-user"></i>
									نام دسته مادر
										</th>
										<th>
											<i class="fa fa-shopping-cart"></i>
											نام دسته اصلی
										</th>
										<th>
										</th>
									</tr>

									</thead>
									<tbody id="catlist">
									</tbody>
								</table>

							</div>
							<div class="row">
								<div class="col-xs-12">
									<div id="pagination-pro" class="text-center"></div>
								</div>
							</div>
							<p id="inf-p"></p>
						</div>
					</div>
					<!-- END category list PORTLET-->
				</div>
				<!-- END category list-->

			</div>
			<!-- END PAGE CONTENT-->

		</div>
	</div>
	<!-- END CONTENT -->

@endsection

@section('script')
	<script type="text/javascript" src="{{ URL::asset('assets')}}/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>
	<script src="{{ URL::asset('admin')}}/paginate/simple-bootstrap-paginator.js"></script>
{{--ajax auto load--}}
<script>
	$(document).ready(function(){
		loadcategory();
	})
</script>
{{--create and save new category --}}
<script>
	function loadcategory(){
		var lang= $('input[name="lang"]').val();
		var status=$('#status :selected').val();
		var cou=$('#count-pro :selected').text();
		var paginate=$('#pagination-pro ul.pagination li.active').text();
		var searchpro= $('#search-pro').val();
		Metronic.blockUI({
			target: '#catportlet',
			animate: true
		});
		$.ajax({
			type:'get',
			data: {catlist: searchpro ,
				page :paginate,
				cou:cou,
				status:status
			},
			url:'{{url('')}}/post/category/'+lang,
			success: function(data){
				 obj=JSON.parse(data);
				var to=cou*paginate;
				var from=to+1-cou;
				$('#catlist').empty();
				for(i=0;i<obj[0].length;i++){

						var active='<tr> ' +
								'<td class="highlight"> ' +
								'<div class="success"> </div> <a href="javascript:;">'+obj[0][i].cat_view+'</a> </td> '+
								'<td class="hidden-xs">'+obj[0][i].mother+'</td> '+
								'<td class="hidden-xs"> ' +obj[0][i].maincat +'</td>'+
								'<td><div class="btn-group btn-group-solid">'+
								'<a type="button" onclick="deactive('+obj[0][i].cat_id+')" class="btn default btn-xs red"><i class="icon-close"></i>  </a>'+
								'<a  onclick="edit('+obj[0][i].cat_id+')" type="button" class="btn default btn-xs purple"><i class="icon-note"></i></a>'+
								'</div></td>'+
								'</tr>';
						var deactive='<tr> ' +
								'<td class="highlight"> ' +
								'<div class="danger"> </div> <a href="javascript:;">'+obj[0][i].cat_view+'</a> </td> '+
								'<td class="hidden-xs">'+obj[0][i].mother+'</td> '+
								'<td class="hidden-xs">' +obj[0][i].maincat +' </td>'+
								'<td><div class="btn-group btn-group-solid">'+
								'<a type="button" onclick="active('+obj[0][i].cat_id+')" class="btn default btn-xs green"><i class="icon-check"></i>  </a>'+
								'<a  onclick="edit('+obj[0][i].cat_id+')" type="button" class="btn default btn-xs purple"><i class="icon-note"></i></a>'+
								'</div></td>'+
								'</tr>';

						if(obj[0][i].cat_status=='actives'){
							$('#catlist').append(active);
						}
						else {
							$('#catlist').append(deactive);
						}

				}
				Metronic.unblockUI('#catportlet');
				var div = Math.floor(obj[1]/cou);
				var rem = obj[1] % cou;
				if(rem>0){
					div=div+1;
				}
				var to=cou*paginate;
				var from=to+1-cou;
				$('#inf-p').empty();
				$('#inf-p').append('نمایش '+from+' تا '+to+'از'  +obj[1]+ 'رکورد ');
				pag1.simplePaginator('setTotalPages', div);
				$("#catform")[0].reset();
			}
		}).error(function(e){
			console.log(e.responseText)
		})
	}
	$('#pagination-pro ').click(function() {
		loadcategory('')
	});

	function send(){
		var lang= $('input[name="lang"]').val();
		var data = new FormData($("#catform")[0]);
		console.log(data);
		$.ajax({
			headers:{
				'X-CSRF-TOKEN': $('input[name="_token"]').val()
			},
			type:'post',
			url:'{{url('/ajax/category/new1')}}',
			cache: false,
			data:data ,
			contentType:false,
			processData:false,
			success: function(data){
				if($('#maincat').val()!= 0 && $('#catname').val()!= '' ){
					toastr.success('عملیات شما با موفقیت انجام شد.');
				}
				if($('#maincat').val() == 0){
					toastr.error('انتخاب دسته اصلی الزامی است.');
				}
				if($('#catname').val() == ''){
					toastr.error('انتخاب نامک الزامی است.');
				}
				$('#postid').val(data);
				loadcategory()
			}
		}).error(function(e){
			console.log(e.responseText)
		})
	}
</script>

<script>
	var pag1 = $('#pagination-pro').simplePaginator({
		totalPages: 1,
		pageChange: function(page) {
			$('#content').empty().text('Page is ' + page);
		}
	});
</script>

{{--connect two dropdowns--}}
<script>
	$('#maincat').on('change', function(e){
		var maincat = e.target.value;
		$.ajax({
			type:'get',
			url:'{{ url('/ajax/post/maincat/maincat') }}',
			data:{maincat:maincat},
			success: function(data){
		
				obj=JSON.parse(data);
				$('#subcat').empty();
				$('#subcat').append('<option value="'+maincat+'">' +
						'انتخاب کنید...' +
						'</option>');
				console.log(obj.length);
				for (i=0; i<obj.length;i++){
					$('#subcat').append('<option value="'+obj[i].cat_id+'">'+obj[i].cat_view+'</option>');
	}
			}
		}).error(function(e){
			console.log(e.responseText)
		})
	});
</script>

{{--deactive function--}}
<script>
	function deactive(id){
		var lang= $('input[name="lang"]').val();
		$.ajax({
			type:'get',
			{{--url:'{{url('/post/category')}}',--}}
			url:'{{url('')}}/post/category/'+lang,
			data:{deactiveid:id} ,
			success: function(data){
				toastr.success('عملیات شما با موفقیت انجام شد.');
				loadcategory()
			}
		}).error(function(e){
			console.log(e.responseText)
		})
	}
</script>

{{--active function--}}
<script>
	function active(id){
		var lang= $('input[name="lang"]').val();
		$.ajax({
			type:'get',
			{{--url:'{{url('/post/category')}}',--}}
			url:'{{url('')}}/post/category/'+lang,
			data:{activeid:id} ,
			success: function(data){
				toastr.success('عملیات شما با موفقیت انجام شد.');
				loadcategory()
			}
		}).error(function(e){
			console.log(e.responseText)
		})
	}
</script>

{{--edit function--}}
<script>
	function edit(id){
		var lang= $('input[name="lang"]').val();
		$.ajax({
			type:'get',
			url:'{{url('')}}/post/category/'+lang,
			data:{editid:id} ,
			success: function(data){
				obj=JSON.parse(data);
				console.log(obj[2]);
				var catid=obj[0].cat_id,maincat=obj[1],subcat=obj[0].cat_parent, catview=obj[0].cat_view, catname=obj[0].cat_name, desc=obj[0].desc,image=obj[0].image;
				$('#catview').val(catview);
				$('#catname').val(catname);
				$('#desc').val(desc);
				$("#maincat").val(maincat);
				$(".fileinput-filename").text(image);
				$("#fileinput").removeClass('fileinput-new');
				$("#fileinput").addClass('fileinput-exists');
				$("#catid").val(catid);
				$("#submitedit").css('display','block');
				$("#submitnew").css('display','none');
				$("#subcat").empty();
				for(i=0;i<obj[2].length;i++){
					$("#subcat").append('<option value="'+obj[2][i].cat_id+'">'+obj[2][i].cat_view+'</option>');
				}
				$("#subcat").val(subcat);
			}
		}).error(function(e){
			console.log(e.responseText)
		})
	}
	function sendedit(){
		var lang= $('input[name="lang"]').val();
		var data = new FormData($("#catform")[0]);
		$.ajax({
			headers:{
				'X-CSRF-TOKEN': $('input[name="_token"]').val()
			},
			type:'post',
			url:'{{url('/ajax/category/edit')}}',
			cache: false,
			data:data ,
			contentType:false,
			processData:false,
			success: function(data){
				$('#postid').val(data);
				$("#catform")[0].reset();
				$("#subcat").empty();
				$("#submitedit").css('display','none');
				$("#submitnew").css('display','block');
				$(".fileinput-filename").text('');
				$("#fileinput").removeClass('fileinput-exists');
				$("#fileinput").addClass('fileinput-new');

				loadcategory()

			}
		}).error(function(e){
			console.log(e.responseText)
		})
	}
</script>

	{{--cancel function--}}
	<script>
		function cancel(){
			$("#catform")[0].reset();
			$("#submitedit").css('display','none');
			$("#submitnew").css('display','block');
		}
	</script>

@endsection