@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">Bộ lọc:</p>
					<ul class="nav navbar-nav">
						<li>
							<input class="form-control" style="margin-top: 3px;" name="name" placeholder="Tên danh mục" value="{{ @$_GET['name'] }}">
						</li>
						<li>
							<select name="packages[]" style="margin-top: 3px;" class="form-control select2 select-size-xs" multiple="multiple" data-placeholder="Chọn Packages">
								@foreach($packages as $pack)
								<option value="{{ $pack->id }}" @if(in_array($pack->id,(array)@$fillPack)) selected="selected" @endif>{{ $pack->name }}</option>
								@endforeach
							</select>
						</li>
						<li>
							<select name="groups[]" style="margin-top: 3px;" multiple="multiple"  class="form-control select2 select-size-xs" data-placeholder="Chọn nhóm">
								@foreach($groups as $group)
								<option value="{{ $group->id }}" @if(in_array($group->id,(array)@$fillGroup)) selected="selected" @endif>{{ $group->name }}</option>
								@endforeach
							</select>
						</li>
						<li>
							<select name="options[]" style="margin-top: 3px;" multiple="multiple" class="form-control select2 select-size-xs" data-placeholder="Chọn Options">
								@foreach($options as $optfil)
								<option value="{{ $optfil['code'] }}" @if(in_array($optfil['code'],(array)@$fillOpt)) selected="selected" @endif>{{ $optfil['name'] }}</option>
								@endforeach
							</select>
						</li>
					</ul>

					<div class="navbar-right">
						<ul class="nav navbar-nav">
							<li><button type="submit" class="btn btn-sucess" style="padding:10px 12px;border-right:1px solid #ccc;"><i class="icon-search4 position-left"></i>Lọc</button></li>
							<li class="pull-right"><a href="{{ route('backend.service.new') }}"><i class="icon-plus3 position-left"></i> Thêm mới</a></li>
						</ul>
					</div>
				</form>
			</div>
		</div>
		<p class="pull-right"><span class="text-semibold">{{ ($users->currentPage() - 1)*10 + 1 }}-{{ ($users->currentPage() - 1)*10 + count($users) }}</span> trong <span class="text-semibold">{{ $users->total() }}</span> bản ghi</p>
		<div class="clearfix"></div>
		<div class="table-responsive">
			<table class="table text-nowrap">
				<thead>
					<tr>
						<th>STT</th>
						<th>Dịch vụ</th>
						<th>Code</th>
						<th>Nhóm</th>
						<th>Packages</th>
						<th>Đơn giá</th>
						<th>USD</th>
						<th>USD <br> (vi.itvjp.com)</th>
						<th>Thời gian <br> sử dụng</th>
						<th>Options</th>
						<th>Trạng thái</th>
						<th class="text-center" style="width: 100px;">Action</th>
					</tr>
				</thead>
				<tbody>
					@if($users != null)
					@foreach($users as $stt => $user)
					<tr>
						<td>{{ ($users->currentPage() - 1)*$users->perPage() + $stt + 1  }}</td>
						<td><a href="{{ route('backend.service.get',$user->id) }}" class="text-blue">{{ $user->name }}</a></td>
						<td>{{ $user->code }}</td>
						<td>
							<a target="_blank" href="{{ route('backend.group.get',$user->group->id) }}">{{ $user->group->name }}</a>
						</td>

						<td>
							@if($user->packages != null)
							<ul>
							@foreach($user->packages as $pack)
							<li><a target="_blank" href="{{ route('backend.package.get',$pack->id) }}">{{ $pack->name }}</a><br/></li>
							@endforeach
							</ul>
							@endif
						</td>
						
						<td> {{ number_format($user->price,0,'.','.') }} </td>	
						<td> {{ (float)$user->usd }} <sup>$</sup> </td>
						<td> {{ (float)$user->vi_usd }} <sup>$</sup> </td>
						<td> {{ $user->using_day == 0 ? '7 ngày' :  $user->using_day.' tháng'}}</td>	

						<td>
							@foreach($options as $opt)
							<div class="checkbox checkbox-switchery">
								<label>
									<input type="checkbox" data-id="{{ $user->id }}" data-code="{{ $user->code }}"  data-name='{{ $user->name }}' data-opname="{{ $opt['name'] }}" name="options[]" class="switchery-primary" value="{{ $opt['code'] }}" @if(in_array($opt['code'],(array)json_decode($user->options,true))) checked="checked" @endif>	
									{{ $opt['name'] }}
								</label>
							</div>
							@endforeach
						</td>

						<td>
							@if($user->status == 1)
							<a href="javascript:void(0);" data-action="false" data-id="{{ $user->id }}" data-name="{{$user->name}}"  class="label label-success active-package">Hoạt động</a>
							@else
							<a href="javascript:void(0);" data-action="true" data-id="{{ $user->id }}" data-name="{{$user->name}}"  class="label label-default active-package">Dừng</a>
							@endif
						</td>
						
						<td class="text-center">
							<ul class="icons-list">
								<li style="margin-right:10px;"><a href="{{ route('backend.service.get',$user->id) }}" class="text-blue"><i class="icon-pencil7"></i></a></li> 

								<li><a title="Xoá" data-popup="tooltip" onclick="return confirm('Bạn có chắc chắn muốn xoá dịch vụ này {{ $user->name }}?');" style="color:red;margin-right:5px;" href="{{ route('backend.service.delete',$user->id) }}"><i class="icon-trash"></i></a></li>
							</ul>
						</td>
					</tr>
					@endforeach
					@endif
				</tbody>
			</table>
			<div class="clear-fix" style="border-top:1px solid #ccc;"></div>
			<div style="padding:10px 15px;text-align:center;">
				{{ $users->links() }}	
			</div>
		</div>
	</div>
</div>
	<!-- /invoice grid options -->
@endsection

@push('styles')
	<style>
		.pnotify-center {
		   right: calc(50% - 150px) !important;
		   top: calc(50% - 150px) !important;
		}
		.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
			padding:10px 10px;
		}
		.fillter li{
			margin-left:5px;
		}
		.fillter li>span{
			margin-top:3px !important;
		}
	</style>
@endpush

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

		$('.select2').select2({
	        minimumResultsForSearch: Infinity,
	        containerCssClass: 'select-xs'
	    });

		//----------------------------------------------
		var _token 	= $('meta[name="csrf-token"]').attr('content'); 
		var urlUpdateOpt = '{{ route("backend.service.option") }}';

		var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery-primary'));

		elems.forEach(function(html) {
		  	var switchery = new Switchery(html);

		  	html.addEventListener('click', function() {

		  		$('body').block({
		            message: '<i class="icon-spinner4 spinner"></i>',
		            overlayCSS: {
		                backgroundColor: '#1B2024',
		                opacity: 0.85,
		                cursor: 'wait'
		            },
		            css: {
		                border: 0,
		                padding: 0,
		                backgroundColor: 'none',
		                color: '#fff'
		            }
		        });

			  	var checked = $(this).prop('checked');

			  	var nameSer = $(this).attr('data-name');
			  	var id 		= $(this).attr('data-id');
			  	var optCode = $(this).val();
			  	var optName = $(this).attr('data-opname');

			  	data = {id:id,opt_code : optCode, _token: _token};

			  	$.post(urlUpdateOpt, data, function(result){
                	$('body').unblock();
                });
			});
		});
		
		// ---------------
		var url = "{{ route('backend.service.status') }}";
		$('.active-package').on('click', function() {
			var id 		= $(this).attr('data-id');
			var _token 	= $('meta[name="csrf-token"]').attr('content'); 
			var status  = $(this).attr('data-action');
			var name 	= $(this).attr('data-name');

			var title 	= 'Tắt hoạt động dịch vụ: '+name;
 			var elem 	= $(this);

 			// console.log(status);
 			// alert(status);
			if(status == 'true'){
				title = 'Bật hoạt động dịch vụ: '+name;
			}

			var notice = new PNotify({
	            title: title,
	            text: '<p>Bạn chắc chắn với thay đổi này?</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 = {id: id, _token: _token, action : status};
                $.post(url, data, function(result){
                	$('.bootbox').modal('toggle');
                	new PNotify({
			            title: 'Thông báo',
			            text: 'Cập nhật thông tin dịch vụ: '+name+' thành công.',
			            icon: 'icon-checkmark3',
			            type: 'success'
			        });

                	if(result == 1){
                		elem.attr('data-action','false');
                		elem.html('Hoạt động');
                		elem.removeClass('label-default');
                		elem.addClass('label-success');
                	}else{
						elem.attr('data-action','true');
                		elem.html('Dừng');
                		elem.removeClass('label-success');
                		elem.addClass('label-default');
                	}

                });

	        })
		});
	</script>
@endpush