@extends('backend.layout')

@section('content')
<div class="row">
	<div class="col-md-12">
		<div class="panel panel-flat">
			<form action="" method="GET">
				<div class="navbar navbar-default navbar-xs fillter padding-0" style="padding-right:0px;">
					<ul class="nav navbar-nav no-border visible-xs-block">
						<li>
							<a style="float: left;" class="text-left collapsed" data-toggle="collapse" data-target="#navbar-filter"><i class="icon-more"></i></a>
							
							<a style="float: right;" class="btn text-right" data-popup="tooltip" title="Thêm mới thiết bị" href="{{ route('backend.resellers.new') }}"><i class="icon-plus3 position-left"></i></a>
							<a style="float: right;" class="color-black btn" data-popup="tooltip" title="Huỷ lọc" href="{{ route('backend.resellers.list') }}"><i class="icon-stop position-left"></i></a>
							<button style="float: right;" data-popup="tooltip" title="Lọc" type="submit" class="btn btn-sucess text-right"><i class="icon-search4 position-left"></i></button>
						</li>
					</ul>

					<div class="navbar-collapse collapse" id="navbar-filter">
						
							<ul class="nav navbar-nav">
								<li>
									<input class="form-control" style="margin-top: 3px;" name="name" placeholder="Họ tên, SĐT, email..." >
								</li>
								<li>
									<div class="input-group" style="margin-top: 3px;" title="Sắp sếp theo thời gian">
										<span class="input-group-addon"><i class="icon-sort-time-desc"></i></span>
										<select class="form-control" name="sort" title="Sắp sếp theo thời gian">
											<option value="">Sắp sếp</option>
											<option value="ASC">Tăng dần</option>
											<option value="DESC">Giảm dần</option>
										</select>
									</div>	
								</li>

							</ul>

							<div class="navbar-right hidden-xs">
								<ul class="nav navbar-nav">
									<li><button data-popup="tooltip" title="Lọc" type="submit" class="btn btn-sucess" style="padding:10px 12px;border-right:1px solid #ccc;"><i class="icon-search4 position-left"></i></button></li>
									<li class="pull-right"><a data-popup="tooltip" title="Thêm mới" href="{{ route('backend.resellers.new') }}"><i class="icon-plus3 position-left"></i></a></li>
								</ul>
							</div>
						</form>
					</div>
				</div>
			</form>

			<div class="table-responsive">
				<table class="table text-nowrap" id="ageny">
					<thead>
						<tr>
							<th>#ID</th>
							<th>Họ tên</th>
							<th>Tên đăng nhập</th>
							<th>Email</th>
							<th>Phone</th>
							<th>Đơn hàng</th>
							<th>Thiết bị</th>
							<th>Khách hàng</th>
							<th>Đại lý</th>
							@if(\Auth::user()->type == 'admin')
							<th></th>
							<th>Trạng thái</th>
							<th class="text-center" style="width: 100px;">Action</th>
							@endif
						</tr>
					</thead>
					<tbody>
						@if($users != null)
						@foreach($users as $stt => $user)
						<tr data-tt-id="{{$user->id}}" @if($user->boss_id) data-tt-parent-id="{{$user->boss_id}}" @endif>
							<td>
								<span class="label bg-blue">#{{$user->id}}</span>
							</td>
							<td><span class="text-muted"><a href="{{ route('backend.resellers.get',$user->id) }}"> {{ $user->name }}</a></span></td>
							<td>{{ $user->{'user_name'} }}</td>
							<td>{{ $user->email }}</td>
							<td>{{ $user->phone }}</td>
							<td>{{ $user->boxs->count() }}</td>
							<td>
								<ul>
									<li>Đặt cọc: {{$user->devices->where('use','coc')->count()}}</li>
									<li>Mượn: {{$user->devices->where('use','muon')->count()}}</li>
								</ul>
							</td>
							<td>{{ $user->customers->count() }}</td>
							<td>
								@if($user->is_boss)
									{{$user->childs->count()}} đại lý
								@elseif(!$user->boss_id)
									<span style="cursor: pointer;" data-toggle="modal" data-id="{{$user->id}}" data-name="{{ $user->name }}" data-target="#modal_animation" class="label bg-blue boss">Chọn tổng</span>
								@endif
							</td>

							@if(\Auth::user()->type == 'admin')
							<td>
								
								@if($user->is_boss)
									<a href="javascript:void(0);" data-update="{{$user->is_boss}}" data-name="{{$user->name }}" data-url="{{ route('backend.resellers.update', $user->id) }}" class="label bg-danger update">Huỷ</a>
								@elseif($user->boss_id)
									<a href="javascript:void(0);"  data-name="{{$user->name }}" data-url="{{route('backend.resellers.removeBoss', $user->id)}}" class="label bg-orange removeBoss">Xoá tổng</a>
								@else 
									<a href="javascript:void(0);" data-update="{{$user->is_boss}}" data-name="{{$user->name }}" data-url="{{ route('backend.resellers.update', $user->id) }}" class="label bg-blue update">Nâng cấp</a>
								@endif
								
							</td>

							<td>
								@if($user->active)
								<span class="label bg-blue">Active</span>
								@else
								<span class="label bg-red">Block</span>
								@endif
							</td>

							<td class="text-center">
								<ul class="icons-list">
						            <li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-menu7"></i> <span class="caret"></span></a>
										<ul class="dropdown-menu dropdown-menu-right">
											@if($user->is_boss)
											<li style="margin-right:10px;"><a href="{{ route('backend.resellers.child',$user->id) }}" class="text-blue"><i class="icon-users"></i> Đại lý con</a></li> 
											@endif
											<li style="margin-right:10px;"><a href="{{ route('backend.intro.list',$user->id) }}" class="text-blue"><i class="icon-media"></i> Hình ảnh</a></li> 
											<li style="margin-right:10px;"><a href="{{ route('backend.resellers.get',$user->id) }}" class="text-blue"><i class="icon-pencil7"></i> Chỉnh sửa</a></li> 
											<li><a onclick="return confirm('Bạn có chắc chắn muốn xoá Admin {{ $user->name }}?');" style="color:red;" href="{{ route('backend.resellers.delete',$user->id) }}"><i class="icon-trash"></i> Xoá</a></li>

										</ul>
									</li>
								</ul>
							</td>
							@endif
						</tr>
						@endforeach
						@endif
					</tbody>
				</table>
				<div class="clear-fix" style="border-top:1px solid #ccc;"></div>
			</div>
		</div>
	</div>
		
</div>

<div id="modal_animation" class="modal" data-backdrop="false">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h5 class="modal-title">Chọn đại lý tổng cho đại lý: <b id="child"></b> </h5>
			</div>

			<div class="modal-body">
				<div class="clearfix"></div>
				<div class="form-group has-feedback has-error">
					<div class="col-lg-12">
						<input type="hidden" name="id" id="id_agent" value="">
						<select name="payment" id="boss_id" class="form-control select2"  data-allow-clear="true"  data-placeholder="Chọn tình trạng thanh toán">
							<option value=""></option>
							@foreach($boss as $it)
							<option value="{{$it->id}}">{{ $it->name }}</option>
							@endforeach
						</select>
					</div>
				</div>
			</div>

			<div class="modal-footer">
				<button type="button" class="btn btn-link" data-dismiss="modal">Huỷ</button>
				<button type="button" class="btn btn-primary" id="save">Cập nhật</button>
			</div>
		</div>
	</div>
</div>
	<!-- /invoice grid options -->
@endsection

@push('styles')
	<link href="{{ URL::asset('treejs/css/jquery.treetable.css') }}" rel="stylesheet" type="text/css">
	<!-- <link href="{{ URL::asset('treejs/css/jquery.treetable.theme.default.css') }}" rel="stylesheet" type="text/css"> -->
	<style>
		.pnotify-center {
		   right: calc(50% - 150px) !important;
		   top: calc(50% - 150px) !important;
		}
		.modal-dialog {
		  height: 100%;
		  width: 100%;
		  display: flex;
		  align-items: center;
		}

		.modal-content {
		  margin: 0 auto;
		  width: 400px;
		}
		.modal-open .modal{
			background: #000000a3;
		}
		.table>tbody>tr>td, .table>thead>tr>th{
			padding: 12px 10px;
		}
	</style>
@endpush

@push('scripts')
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{ URL::asset('treejs/jquery.treetable.js') }}"></script>
	<script>
		$(document).ready(function() {
			$('#ageny').treetable();
			$('.multiselect').select2();
			$('.select2').select2();

			var _token 	= $('meta[name="csrf-token"]').attr('content');
			$(".boss").click(function() {
				var id = $(this).data('id');
				var name = $(this).data('name');

				$('#id_agent').val(id);
				$('#child').text(name);
			});

			var urladdBoss = '{{ route("backend.resellers.boss") }}';
			$('#save').click(function() {
				var id = $('#id_agent').val();
				var boss_id = $('#boss_id').val();

				if(!boss_id){
					new PNotify({
				            title: 'Lỗi',
				            text: 'Chưa chọn tổng đại lý.',
				            icon: 'icon-checkmark3',
				            type: 'danger'
				        });

				}else {
					var data = {id: id, boss_id : boss_id, _token : _token};
					$.post(urladdBoss, data, function(result){
	                	// $('.bootbox').modal('toggle');
	                	new PNotify({
				            title: 'Thông báo',
				            text: 'Cập nhật thành công.',
				            icon: 'icon-checkmark3',
				            type: 'success'
				        });

				        location.reload();

	                });
				}
			});


			$(".removeBoss").click(function() {
				var url 	= $(this).data('url');
				var name 	= $(this).data('name');

				var notice = new PNotify({
		            title: name,
		            text: 'Xoá tài khoản khỏi Tổng đại lý?',
		            hide: false,
		            type: 'warning',
		            addclass: 'pnotify-center',
		            confirm: {
		                confirm: true,
		                buttons: [
		                    {
		                        text: 'Cập nhật',
		                        addClass: 'btn btn-sm btn-primary'
		                    },
		                    {	
		                    	text : 'Huỷ',
		                        addClass: 'btn btn-sm btn-link'
		                    }
		                ]
		            },
		            buttons: {
		                closer: false,
		                sticker: false
		            },
		            history: {
		                history: false
		            }
		        })

		        // On confirm
		        notice.get().on('pnotify.confirm', function() {

		            var data = { _token: _token };
	                $.post(url, data, function(result){
	                	// $('.bootbox').modal('toggle');
	                	new PNotify({
				            title: 'Thông báo',
				            text: 'Cập nhật thành công.',
				            icon: 'icon-checkmark3',
				            type: 'success'
				        });

				        location.reload();

	                });

		        })
			});

			$(".update").click(function() {
				var url 	= $(this).data('url');
				var name 	= $(this).data('name');
				var is_boss = $(this).data('update');

				var action = 'Nâng cấp';
				if(is_boss == 1) action = 'Dừng';

				var notice = new PNotify({
		            title: name,
		            text: '<p>'+action+' tài khoản Tổng đại lý <b>'+name+'</b>?</p>',
		            hide: false,
		            type: 'warning',
		            addclass: 'pnotify-center',
		            confirm: {
		                confirm: true,
		                buttons: [
		                    {
		                        text: 'Cập nhật',
		                        addClass: 'btn btn-sm btn-primary'
		                    },
		                    {	
		                    	text : 'Huỷ',
		                        addClass: 'btn btn-sm btn-link'
		                    }
		                ]
		            },
		            buttons: {
		                closer: false,
		                sticker: false
		            },
		            history: {
		                history: false
		            }
		        })

		        // On confirm
		        notice.get().on('pnotify.confirm', function() {

		            var data = { _token: _token };
	                $.post(url, data, function(result){
	                	// $('.bootbox').modal('toggle');
	                	new PNotify({
				            title: 'Thông báo',
				            text: 'Cập nhật thành công.',
				            icon: 'icon-checkmark3',
				            type: 'success'
				        });

				        location.reload();

	                });

		        })
			});
		});
	</script>
@endpush