@extends('backend.layout')

@section('content')
<div class="row">
	
	<div class="panel panel-flat">

		<div class="navbar navbar-default navbar-xs fillter" style="padding-left:20px;padding-right:0px;">
			<ul class="nav navbar-nav no-border visible-xs-block">
				<li><a class="text-center collapsed" data-toggle="collapse" data-target="#navbar-filter"><i class="icon-menu7"></i></a></li>
			</ul>

			<div class="navbar-collapse collapse" id="navbar-filter">
				<form action="" method="GET">
					<p class="navbar-text">Tổng đại lý: <a href="javascript:void(0);" onclick="copyText()" id="copyText">{{ $user->name }}</a></p>
				</form>
				<div class="navbar-right">
					<ul class="nav navbar-nav">
						<li> <a href="#" data-toggle="modal" class="boss" data-id="{{$user->id}}" data-name="{{ $user->name }}" data-target="#modal_animation"><i class="icon-plus3 position-left"></i> Thêm đại lý con</a> </li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="clearfix"></div>
		<div class="table-responsive">
			<table class="table text-nowrap table-bordered table-striped">
				<thead>
					<tr>
						<th>#ID</th>
						<th>Đại lý</th>
						<th>Boxs</th>
						<th>Khách hàng</th>
						<th>Trạng thái</th>	
						<th>Ngày tạo</th>
						<th class="text-center" style="width: 100px;">Action</th>
					</tr>
				</thead>
				<tbody>
					@if($user->childs->count() > 0)
						@foreach($user->childs as $child)
						<tr>
							<td><span class="label bg-blue">#{{$child->id}}</span></td>
							<td>{{ $child->name }}</td>
							<td>{{ $child->boxs->count() }}</td>
							<td>{{ $child->customers->count() }}</td>
							<td>
								@if($child->active)
									<span class="label bg-blue">Hoạt động</span>
								@else
									<span class="label bg-red">Đã khoá</span>
								@endif
							</td>

							<td>{{  date('Y-m-d',strtotime($child->created_at)) }}</td>
							<td>
								<a href="javascript:void(0);"  data-name="{{$child->name }}" data-url="{{route('backend.resellers.removeBoss', $child->id)}}" class="label bg-orange removeBoss"><i class="icon-trash"></i></a>
							</td>
						</tr>
						@endforeach
					@endif
				</tbody>
			</table>
			<div class="clear-fix" style="border-top:1px solid #ccc;"></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ý con: <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="boss_id" value="">
						<select name="payment" id="id_agent" class="form-control select2"  data-allow-clear="true"  data-placeholder="Chọn đại lý con">
							<option value=""></option>
							@foreach($childs as $child)
							<option value="{{$child->id}}">{{ $child->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">Thêm</button>
			</div>
		</div>
	</div>
</div>

@endsection

@push('styles')
<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;
	}
</style>
@endpush

@push('scripts')
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>

	<script type="text/javascript">

		$(document).ready(function() {
			$('.select2').select2();
			var _token 	= $('meta[name="csrf-token"]').attr('content');

			$(".boss").click(function() {
				var id = $(this).data('id');
				var name = $(this).data('name');

				$('#boss_id').val(id);
				$('#child').text(name);
				console.log(id,name);
			});

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

				if(!id){
					new PNotify({
				            title: 'Lỗi',
				            text: 'Chưa chọn đạ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();

	                });

		        })
			});
		});

		function copyText() {
			/* Get the text field */
			var copyText = $("#copyText");
			window.prompt("Copy to clipboard: Ctrl+C, Enter", copyText.html());
		}
	</script>
@endpush