@extends('backend.layout')

@section('content')
<p><span class="text-semibold">{{ ($boxs->currentPage() - 1)*10 + 1 }}-{{ ($boxs->currentPage() - 1)*10 + count($boxs) }}</span> trong <span class="text-semibold">{{ $boxs->total() }}</span> bản ghi</p>
<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">
					<div class="row">
						<div class="col-md-11">
							<ul class="nav navbar-nav">
								<li style="width:150px;">
									<input class="form-control" style="margin-top: 3px;" name="mac" placeholder="Địa chỉ Mac" value="{{ @$_GET['mac'] }}">
								</li>
								<li style="width:150px;">
									<select name="customers[]" style="margin-top: 3px;" multiple="multiple"  class="form-control select2 select-size-xs" data-placeholder="Chọn khách hàng">
										@foreach($customers as $cus)
										<option value="{{ $cus->id }}" @if(in_array($cus->id,(array)@$fillCus)) 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 style="width:150px;">
									<select name="resellers[]" style="margin-top: 3px;" multiple="multiple"  class="form-control select2 select-size-xs" data-placeholder="Chọn Đại lý">
										@foreach($resellers as $res)
										<option value="{{ $res->id }}" @if(in_array($res->id,(array)@$fillRes)) selected="selected" @endif>{{ $res->name }}</option>
										@endforeach
									</select>
								</li>
								@endif

								<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 style="width:150px;">
									<select name="address" id="address_box" 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>

								<li style="width:150px;">
									<select name="payment" id="payment" style="margin-top: 3px;" class="form-control select-size-xs select2" data-placeholder="Tình trạng thanh toán">
										<option value="all" @if( isset($_GET['payment']) && $_GET['payment'] == "all") selected @endif>TT Thanh toán</option>
										<option value="1" @if( isset($_GET['payment']) &&  $_GET['payment'] == "1" ) selected @endif>Đã thanh toán</option>
										<option value="0" @if( isset($_GET['payment']) && $_GET['payment'] == "0" ) selected @endif>Chưa thanh toán</option>
									</select>
								<li>
								<li style="width:150px;">
									<select name="status" id="status" style="margin-top: 3px;" class="form-control select-size-xs select2" data-placeholder="Tình trạng hoạt động">
										<option value="all" @if( isset($_GET['status']) &&  $_GET['status'] == "all" ) selected @endif>TT Hoạt động</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 style="width:150px;">
									<div class="input-group" style="margin-top: 3px;">
										<span class="input-group-addon"><i class="icon-calendar22"></i></span>
										<input type="text" name="time" class="form-control daterange-basic" value="{{ @$_GET['time'] }}" placeholde="Thời gian" style="width:180px;"> 
									</div>
								</li>
							</ul>
						</div>

						<div class="col-md-1">
							<ul class="nav navbar-nav" style="margin-left: 10px;display: flex;flex-direction: row;">
								<li><button type="submit" class="btn btn-sucess" style="padding:10px 12px;border-bottom:1px solid #ccc;"><i class="icon-search4 position-left"></i></button></li>
								<li style="align-items: center;display: flex;"><button style="background:none;border:none;width:100%;text-align:center;padding:10px 12px;" name="file" value="true"><i class=" icon-file-spreadsheet"></i></button></li>
							</ul>
						</div>
					</div>
				</form>
			</div>
		</div>
		
		<div class="clearfix"></div>
		<div class="table-responsive">
			<table class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>STT</th>
						<th>Mac Address</th>
						<th>Loại</th>
						<th style="width: 200px;">Khách hàng</th>
						<th style="width: 80px;">Đại lý</th>
						<th style="width: 120px;">Địa chỉ lắp đặt</th>
						<th style="width: 80px;">Dịch vụ</th>
						<th style="width: 130px;">Giao dịch</th>
						<th style="width: 70px;">Thanh toán</th>
						<th style="width: 70px;">Tình trạng</th>
						<th >Trạng thái</th>
						<th>Ngày kích hoạt</th>
						<th>Ngày gia hạn</th>
						@if(\Auth::user()->type == "admin")<th>Ngày tính tiền</th>@endif
						<th>Ngày hết hạn</th>
						<th>Note</th>
					</tr>
				</thead>
				<tbody>
					@if($boxs != null)
					@foreach($boxs as $stt => $user)
					<tr data-toggle="collapse" data-target="#next{{$stt}}">
						<td>{{ ($boxs->currentPage() - 1)*$boxs->perPage() + $stt + 1  }}</td>
						<td><a href="{{ route('backend.box.get',$user->id) }}" class="text-blue">{{ mb_strtoupper($user->mac_address) }}</a></td>
						<td>
							@if($user->type == 'renew')
								Gia hạn
							@elseif( $user->type == "cancel" )
								Huỷ
							@else 
								Mở mới
							@endif
						</td>
						<td>
							- <a target="_blank" href="#" class="text-blue">{{ @$user->customer->fullname }}</a> <br/>
							- {{ @$user->customer->address }} <br/>
							@if(@$user->customer->phone != null)- {{ @$user->customer->phone }}@endif
						</td>
						<td>{{ @$user->customer->user->name }}</td>
						<td>{{ $user->address }}</td>
						<td><a target="_blank" href="{{ route('backend.service.get',$user->service_id) }}" class="text-blue">{{ $user->service->name }}</a></td>
						<td>
							<b>Giá: </b>{{ number_format($user->price,0,'.','.') }}<br/>
							<b>VAT: </b> {{$user->vat}}% <br/>
							<b>Chiết khấu: </b> {{ number_format($user->discount,0,'.','.') }} <br>
							<b>Đặt cọc: </b>{{ number_format($user->deposit,0,'.','.') }}
							<hr style="margin:5px 0px;">
							<b>Tổng: {{ into_money($user->price,$user->vat,$user->discount,$user->deposit) }}</b>
						</td>
						<td> @if($user->type_payment == 1) Theo tháng @else Theo dịch vụ @endif </td>
						<td> @if($user->payment == 1) Đã thanh toán @else Chưa thanh toán @endif</td>
						<td>
							@if( $user->deleted_at )
								<a href="javascript:void(0);" class="label label-danger">Đã xoá</a>
							@elseif( $user->canceled )
								<a href="javascript:void(0);" class="label label-warning">Đã huỷ</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">Hoạt động</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">Dừng</a>
									@endif
								@else
									<a href="javascript:void(0);"  class="label label-danger">Hết hạn</a>
								@endif
							@endif
						</td>
						<td> 
							{{ date('Y-m-d',strtotime($user->created_at)) }}
						</td>
						<td class="">
							@if($user->type == 'renew') 
							{{ date('Y-m-d',strtotime($user->updated_at))  }}
							@endif
						</td>
						<td> 
							@if(\Auth::user()->type == "admin")
							{{ $user->date_price != null ? date('Y-m-d',strtotime($user->date_price)) : ''}}
							<a style="color: rgb(76, 175, 80); margin-right: 10px;" data-date="{{$user->date_price}}" data-id="{{$user->id}}" data-mac="{{ $user->mac_address }}" class="editCode" href="javascript:void(0);"><i class="icon-pencil"></i></a>
							@endif
						</td>
						<td class="">{{ date('Y-m-d',strtotime($user->expired_date)) }}</td>
						<td>{{ $user->description }}</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($appends)->links() }}	
			</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">Cập nhật ngày tính tiền cho box : <b id="box_mac"></b></h5>
			</div>

			<div class="modal-body">
				<div class="clearfix"></div>
				<div class="form-group has-feedback has-error">
					<label class="control-label col-lg-3 text-semibold">Ngày tính tiền</label>
					<div class="col-lg-9">
						<input type="hidden" name="id" id="id_mac" value="">
						<input class="form-control" type="date" name="date_price" id="date_price" value="">
					</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')
	<style>
		.modal-dialog {
		  height: 100%;
		  width: 100%;
		  display: flex;
		  align-items: center;
		}

		.modal-content {
		  margin: 0 auto;
		}
		.modal-open .modal{
			background: #000000a3;
		}
		.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,.select2-selection--multiple .select2-search--inline .select2-search__field{
			width:200px !important;
		}

		.select2-selection--multiple .select2-search--inline .select2-search__field{
			padding:5px 0px !important;
		}
		.select2-container--open .select2-dropdown--below{ min-width:200px;  }
	</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/pickers/pickadate/picker.date.js')}}"></script> -->
	<script src="{{ URL::asset('backend/global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
	<script>
		$('.select2').select2();
		// Basic initialization
	    $('.daterange-basic').daterangepicker({
	    	@if(isset($start))
	    	startDate: moment( '' ),
	    	@else
	    	startDate: moment().subtract(1, 'months'),
	    	@endif

	    	@if(isset($end))
	    	endDate: moment( '' ),
	    	@else
	    	endDate: moment(),
	    	@endif
	    	
	        applyClass: 'bg-slate-600',
	        cancelClass: 'btn-default',
	        'locale' : {
	        	"separator": " -> ",
	        	"format": "YYYY-MM-DD",
	        	"applyLabel": "Áp dụng",
		        "cancelLabel": "Huỷ",
		        "fromLabel": "Từ",
		        "toLabel": "Đến",
		        "customRangeLabel": "Custom",
		        "daysOfWeek": [
		            "CN",
		            "T2",
		            "T3",
		            "T4",
		            "T5",
		            "T6",
		            "T7"
		        ],
		        "monthNames": [
		            "Tháng 1",
		            "Tháng 2",
		            "Tháng 3",
		            "Tháng 4",
		            "Tháng 5",
		            "Tháng 6",
		            "Tháng 7",
		            "Tháng 8",
		            "Tháng 9",
		            "Tháng 10",
		            "Tháng 11",
		            "Tháng 12"
		        ],
	        }
	    });

	    @if(@$_GET['time'] == null)
	    $('.daterange-basic').val('');
	    @endif

		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
		                    }
		                })
		            };
		        }
		    }
		});

		//----------------------------------------------
		var _token 	= $('meta[name="csrf-token"]').attr('content');

		var urlDate = "{{ route('backend.box.date') }}";

		$('.editCode').click(function(e) {
			e.preventDefault();
			$('#box_mac').text($(this).data('mac'));
			$('#id_mac').val($(this).data('id'));
			$('#date_price').val($(this).data('date'));
			$('#modal_animation').modal('show');
			$('#date_price').focus();
		});

		$('#save').click(function(e) {
			e.preventDefault();
			var id = $("#id_mac").val();
			var date_price = $("#date_price").val();
			var data = {date_price: date_price, id: id, _token: _token};

			$.post(urlDate, data, function(result){
                $('#modal_animation').modal('toggle');
                location.reload();
            });
		});
		
		// ---------------
		// 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ắt hoạt động dịch vụ: '+name;
 	// 		var elem 	= $(this);

 	// 		// console.log(status);
 	// 		// alert(status);
 	// 		var label = 'Tắt box';
		// 	if(status == 'true'){
		// 		label = 'Bật box';
		// 		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');
  //               	}

  //               });

	 //        })
		// });

		
	</script>
@endpush