@extends('backend.layout')

@section('content')
<div class="row">
	<div class="col-md-12">
		<p style="margin: 0px; padding: 5px 0px;"><span class="text-semibold">{{ ($boxs->currentPage() - 1)*10 + 1 }}-{{ ($boxs->currentPage() - 1)*10 + $boxs->count() }}</span> trong <span class="text-semibold">{{ $boxs->total() }}</span> bản ghi.</p>
		<div class="panel panel-flat">

			<div class="navbar navbar-default navbar-xs fillter padding-0" style="">
				<form action="" method="GET">
				<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">Bộ lọc <i class="icon-circle-down2"></i></a>
						<a style="float: right;" class="btn text-right" data-popup="tooltip" title="Thêm mới" href="{{ route('backend.box.new') }}"><i class="icon-plus3 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>
						<a style="float: right;" class="color-black btn" data-popup="tooltip" title="Huỷ lọc" href="{{ route('backend.box.list') }}"><i class="icon-cross position-left"></i></a>
					</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="keyword" placeholder="Từ khoá..." value="{{ @$_GET['keyword'] }}"  autocomplete="off">
							</li>

							<li>
								<select name="service_id" id="service" style="margin-top: 3px;" class="form-control select-size-xs select2" data-placeholder="Dịch vụ" data-allow-clear="true">
									<option value="">Tất cả</option>
									@foreach($groups as $group)
									<optgroup label="{{ $group->name }}">
										@foreach($group->services as $service)
										<option value="{{ $service->id }}" @if(@$_GET['service_id'] == $service->id) selected="selected"  @endif>{{ $service->name }}</option>
										@endforeach
									</optgroup>
									@endforeach
								</select>
							</li>

							<li>
								<select name="status" id="status" style="margin-top: 3px;" class="form-control select-size-xs select2"  data-allow-clear="true" data-placeholder="Trạng thái">
									<option value="">Trạng thái</option>
									<option value="1" @if( isset($_GET['status']) &&  $_GET['status'] == "1" ) selected @endif>Hoạt động</option>
									<option value="0" @if( isset($_GET['status']) &&  $_GET['status'] == "0" ) selected @endif>Tạm dừng</option>
									<option value="2" @if( isset($_GET['status']) && $_GET['status'] == "2" ) selected @endif>Hết hạn</option>
									<option value="3" @if( isset($_GET['status']) &&  $_GET['status'] == "3" ) selected @endif>Đã huỷ</option>
									<option value="4" @if( isset($_GET['status']) &&  $_GET['status'] == "4" ) selected @endif>Sắp hết hạn</option>
								</select> 
							</li>

							<li>
								<select name="payment" id="payment" style="margin-top: 3px;" class="form-control select-size-xs select2"  data-allow-clear="true" data-placeholder="Thanh toán">
									<option value="">Thanh toán</option>
									<option value="pending" @if( isset($_GET['payment']) &&  $_GET['payment'] == "pending" ) selected @endif>Đang chờ</option>
									<option value="pay" @if( isset($_GET['payment']) &&  $_GET['payment'] == "pay" ) selected @endif>Đã thanh toán</option>
									<option value="cancel" @if( isset($_GET['payment']) && $_GET['payment'] == "cancel" ) selected @endif>Đã huỷ</option>
								</select> 
							</li>


							<li>
								<select name="customer_id" data-allow-clear="true" style="margin-top: 3px;" class="form-control select2 select-size-xs" data-placeholder="Khách hàng">
									<option value="">Khách hàng</option>
									@foreach($customers as $cus)
									<option value="{{ $cus->id }}" @if(@$_GET['customer_id'] == $cus->id) selected="selected" @endif>{{ $cus->fullname }} - {{ $cus->address }}</option>
									@endforeach
								</select>
							</li>

							@if( \Auth::user()->hasRole('admin') || \Auth::user()->hasRole('roots') || \Auth::user()->hasRole('accountant') || \Auth::user()->hasRole('resellers') )
							<li>
								<select name="agency_id" style="margin-top: 3px;" data-allow-clear="true" class="form-control select2 select-size-xs" data-placeholder="Đại lý">
									<option value="">Đại lý</option>
									@foreach($resellers as $res)
									<option value="{{ $res->id }}" @if(@$_GET['agency_id'] == $res->id) selected="selected" @endif>{{ $res->name }}</option>
									@endforeach
								</select>
							</li>
							@endif

							<li>
								<select name="address" id="address_box" data-allow-clear="true" style="margin-top: 3px;" class="form-control select-size-xs" data-placeholder="Địa chỉ lắp đặt">
									<option value="">Tất cả</option>
									@if(@$appends['address'] != null)
									<option value="{{$appends['address']}}" selected>{{ $appends['address'] }}</option>
									@endif
								</select>
							</li>

						</ul>

						<div class="navbar-right hidden-xs">
							<a class="color-black btn" data-popup="tooltip" title="Huỷ lọc" href="{{ route('backend.box.list') }}"><i class="icon-cross position-left"></i></a>
							<button data-popup="tooltip" title="Lọc" type="submit" class="btn btn-sucess"><i class="icon-search4 position-left"></i></button>
							<a class="btn color-black" data-popup="tooltip" title="Thêm mới" href="{{ route('backend.box.new') }}"><i class="icon-plus3 position-left"></i></a>
						</div>
				</div>
				</form>
			</div>
			
			<div class="clearfix"></div>
			<div class="table-responsive" style="min-height:400px;">
				<table class="table table-bordered table-striped">
					<thead>
						<tr>
							<th width="30">STT</th>
							<th>Mã hợp đồng</th>
							<th class="text-center" style="min-width: 100px;">Thiết bị</th>
							<th style="min-width: 120px;">Địa chỉ lắp đặt</th>
							<th style="min-width: 120px;">Khách hàng</th>
							<th style="min-width: 120px;">Dịch vụ</th>
							<th>Invoice Code</th>
							<th>Lắp đặt</th>
							<th>Quy cách</th>
							<th style="min-width: 80px;">Ngày Active</th>
							<th style="min-width: 80px;">Ngày tính tiền</th>
							<th style="min-width: 80px;">Hết hạn</th>
							
							<th>Launcher</th>
							<th>Trạng thái</th>
							<th style="width: 60px;" class="text-center">Action</th>
						</tr>
					</thead>
					<tbody>
						@if($boxs != null)
						@foreach($boxs as $stt => $user)
						<tr>
							<td class="text-center" >{{ ($boxs->currentPage() - 1)*$boxs->perPage() + $stt + 1  }}</td>
							<td class="text-center">
								<a data-popup="tooltip" title="Click vào để xem lịch sử gia hạn"  style="color:blue;" href="{{ route('backend.box.renewed',$user->id) }}">
									<b class="code" >{{ $user->code }}</b> &nbsp;
								</a>
							</td>
							<td class="relative listDevice">
								<a href="{{ route('backend.device.list', $user->code) }}" data-popup="tooltip" title="Quản lý thiết bị sử dụng">
									<p style="margin-bottom: 0px;" class="text-center">{{ $user->devices->count() }}</p>
								</a>
								
								<div style="">
									<h5 class="text-norwap">Danh sách thiết bị</h5>
									<table class="table table-bordered">
										<tr>
											<th>STT</th>
											<th>deviceId</th>
											<th>Mac</th>
										</tr>
									
										@foreach($user->devices as $key => $dev)
										<tr>
											<td>{{ $key + 1 }}</td>
											<td>{{ $dev->deviceId }}</td>
											<td>{{ @$dev->store->mac }}</td>
										</tr>
										@endforeach
									</table>
								</div>
								
								
							</td>
							<td>{{ $user->address }}</td>
							<td>
								@if($user->customer)
								- <a target="_blank" href="#" class="text-blue">{{ $user->customer->fullname }}</a> <br/>
								- {{ $user->customer->address }}

								@if($auth->id != $user->customer->user->id && $auth->type != "admin")
								 <br>Đại lý: <b>{{$user->customer->user->name}}</b>
								@endif
								@endif
							</td>
							<td><a target="_blank" href="{{ route('backend.service.get',$user->service_id) }}" class="text-blue">{{ $user->service->name }}</a></td>
							<td> <a href="{{ route('backend.invoice.get', $user->invoice->id) }}">{{ $user->invoice_code }}</a> </td>
							<td>{{@$user->install->name}}</td>
							<td>{{ $user->type == "new" ? 'Mở mới' : 'Gia hạn'}}</td>
							<td> {{ date('Y-m-d',strtotime($user->created_at)) }} </td>
							<td> {{ $user->date_used ?  date('Y-m-d',strtotime($user->date_used)) : null}} </td>
							<td> {{ date('Y-m-d',strtotime($user->expired_date)) }} </td>
							<!-- <td> 	
								<a href="javascript:void(0);" class="label label-{{@$user->invoiceItem->status}}">{{ @$user->invoiceItem->status }}</a>
							</td> -->
							<td>
								{{ config('vod.launchers.'.$user->launcher) }}
							</td>
							<td>
								@if( $user->deleted_at )
									<a href="javascript:void(0);" class="label label-danger">Deleted</a>
								@elseif( $user->canceled )
									<a href="javascript:void(0);" class="label label-warning">Cancel</a>
								@else 
									@if( (strtotime($user->expired_date)) > time() )
										@if($user->status == 1)
										<a href="javascript:void(0);" data-action="false" data-id="{{ $user->id }}" data-name="{{$user->mac_address}}"  class="label label-success active-package">Play</a>
										@else
										<a href="javascript:void(0);" data-action="true" data-id="{{ $user->id }}" data-name="{{$user->mac_address}}"  class="label label-default active-package">Pause</a>
										@endif
									@else
										<a href="javascript:void(0);"  class="label label-danger">End</a>
									@endif
								@endif

								@if($user->device_id != null)
									<br/><br/>
									<a href="javascript:void(0);" data-customer="{{ @$user->customer->fullname }}
								- {{ @$user->customer->address }}" data-box="{{@$user->mac_address}}" data-url="{{ route('backend.box.resetDevice', $user->id) }}"   class="reset-device label label-rounded label-primary">Reset Device</a>
								@endif
							</td>

							<td class="text-norwap">
								@if($auth->id == @$user->customer->user->id || $auth->type == "admin")
								<ul class="icons-list list-inline" style=" white-space: nowrap;">
									@if($user->type != 'cancel' )
									<li class="list-item pr-5"><a data-popup="tooltip" title="Sửa"  style="color:#4caf50;" href="{{ route('backend.box.get',$user->id) }}"><i class="icon-pencil"></i></a></li>
									<li class="list-item pr-5"><a data-popup="tooltip" title="Xếp kênh"  style="color:#4caf50;" href="{{ route('backend.sort_chanel.list',$user->code) }}"><i class="icon-tv"></i></a></li>
									<li class="list-item pr-5"><a data-code="{{ $user->code }}" data-popup="tooltip" title="Huỷ" data-toggle="modal" data-target="#myModal" class="destroy" style="color:#611919;" data-href="{{ route('backend.box.cacel',$user->id) }}"><i class="icon-cancel-circle2"></i></a></li>
									@endif
								</ul>
								@endif
							</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;">
					{{ $boxs->appends(@$_GET)->links() }}	
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade right" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- Header của modal -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title text-center" id="myModalLabel">Huỷ dịch vụ: <b id="box_code"></b></h4>
      </div>
      <!-- Nội dung của modal -->
      <div class="modal-body">
        	<div class="row">
        		<div class="col-md-offset-2 col-md-8">
        			<div class="form-group has-feedback ">
        				<input type="hidden" id="code">
						<textarea class="form-control" id="note" placeholder="Nhập lý do đóng dịch vụ"></textarea>
						<br>
						<label>
							Thu hồi thiết bị
							<input type="checkbox" id="deviceBack" class="switchery-primary">	
						</label>
					</div>

					<div class="text-center">
						<button type="button" class="btn btn-primary" id="submit">Huỷ</button>
	        			<button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
					</div>
				</div>
        	</div>
      </div>
     
    </div>
  </div>
</div>


@endsection

@push('styles')
	<style>
		.listDevice div{
			position: absolute;z-index: 999; border: 1px solid #fff; display: none; background: #ccc; padding: 5px;
		}
		.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;
		}
		.select-xs.select2-selection--single{
			height:36px;
		}
		.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: 5px 5px;
			white-space: normal !important;
		}
		.select2-container--open.select2-container--below .select2-selection--multiple, .select2-container--open.select2-container--below .select2-selection--single{
			min-width:200px;
		}
		.select-xs.select2-selection--multiple .select2-search--inline .select2-search__field{
			min-width:200px;
		}
		.select2-selection--multiple .select2-search--inline .select2-search__field{
			padding:5px 0px !important;
			max-width: 200px;
		}
		.select2-container--open .select2-dropdown--below{ min-width:250px;  }
		.modal-header .close {
		    position: absolute;
		    right: 10px;
		    top: 9px;
		    margin-top: 0;
		}
		.modal.right .modal-dialog {
		  position: fixed;
		  margin: auto;
		  min-width: 350px; /* Điều chỉnh độ rộng của modal phù hợp với yêu cầu của bạn */
		  height: 100%;
		  top: 45%;
		  right: -370px; /* Khoảng cách từ phía bên phải màn hình */
		  transition: right 0.3s ease-in-out;
		}

		.modal.right.in .modal-dialog {
		  right: 0;
		}
	</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 src="{{ URL::asset('backend/global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
	<script>
		$(document).ready(function() {
			$('.select2').select2();

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

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

			var url_search = "{{ route('backend.box.address') }}";
			$("#address_box").select2({
			    minimumInputLength: 1,
			    tags: [],
			    ajax: {
			        url: url_search,
			        dataType: 'json',
			        type: "POST",
			        headers : {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			        quietMillis: 10,
			        data: function (term) {
			            return {
			                term: term
			            };
			        },
			        processResults: function (data) {
			            return {
			                results: $.map(data, function (item) {
			                    return {
			                        text: item.address,
			                        id: item.address
			                    }
			                })
			            };
			        }
			    }
			});

			$('.destroy').click(function(){
				var code = $(this).data('code');
				$('#box_code').text(code);
				$('#code').val(code);
			});
			var urlDestroy =  "{{ route('backend.box.destroy') }}";

			$('#submit').click(function() {
				var code = $('#code').val();
				var recovery = $('#deviceBack').prop('checked');
				var note = $('#note').val();

				if(note && code ){
					$("#myModal .modal-content").LoadingOverlay('show');

					$.post(urlDestroy, {_token: _token, code: code, recovery: recovery, note: note})
						.done(function(response) {
							$("#myModal .modal-content").LoadingOverlay("hide");

							if(response.status == 1){
								new PNotify({
						            title: 'Thông báo',
						            text: 'Huỷ dịch vụ công.',
						            icon: 'icon-checkmark3',
						            type: 'success'
						        });
						        location.reload();
							}else {
								new PNotify({
						            title: 'Thông báo',
						            text: response.error,
						            icon: 'icon-cancel-circle2',
						            type: 'danger'
						        });
							}
							
						})
						.fail(function(xhr, status, error) {
					        $("#myModal .modal-content").LoadingOverlay("hide");
					        new PNotify({
					            title: 'Thông báo',
					            text: 'Lỗi hệ thống!',
					            icon: 'icon-cancel-circle2',
					            type: 'danger'
					        });
					    });
					}else {
						$("#myModal .modal-content").LoadingOverlay("hide");
						 new PNotify({
					            title: 'Thông báo',
					            text: 'Bạn chưa nhập lý do!',
					            icon: 'icon-cancel-circle2',
					            type: 'danger'
					        });
					}
				
			});

			//----------------------------------------------
			var _token 	= $('meta[name="csrf-token"]').attr('content');
			
			$('.listDevice').hover(
			    function() {
			        $(this).find('div').show(); 
			    },
			    function() {
			        $(this).find('div').hide(); 
			    }
			);	
			// ---------------
			var url = "{{ route('backend.box.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ạm dừng hoạt động dịch vụ: '+name;
	 			var elem 	= $(this);

	 			// console.log(status);
	 			// alert(status);
	 			var label = 'Tạm dừng';
				if(status == 'true'){
					label = 'Bật';
					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: label,
		                        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');
	                	}

	                });

		        })
			});
		});

		function isNumeric(value) {
		    return /^\d+$/.test(value);
		}
	</script>
@endpush