@extends('backend.layout')

@section('content')

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

			<div class="navbar navbar-default navbar-xs fillter padding-0" style="">
				<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.w_product.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.w_product.list') }}"><i class="icon-cancel-circle2 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">
					<form action="" method="GET">
						<ul class="nav navbar-nav">
							<li>
								<input class="form-control" name="keyword" placeholder="Model hoặc mã thiết bị" value="{{ @$_GET['keyword'] }}"  autocomplete="off">
							</li>
							<li>
								<select name="category_id" style="margin-top: 3px;" data-allow-clear="true" class="form-control select2 select-size-xs" data-placeholder="Danh mục">
									<option value="">Danh mục</option>
									@foreach($categories as $cate)
									<option value="{{ $cate->id }}" @if(@$_GET['category_id'] == $cate->id) selected="selected" @endif>{{ $cate->name }}</option>
									@endforeach
								</select>
							</li>
							<li>
								<select name="user_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['user_id'] == $res->id) selected="selected" @endif>{{ $res->name }}</option>
									@endforeach
								</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>
							<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="in" @if( isset($_GET['status']) &&  $_GET['status'] == "in" ) selected @endif>Chưa sử dụng</option>
									<option value="used" @if( isset($_GET['status']) &&  $_GET['status'] == "used" ) selected @endif>Đang dùng</option>
									<option value="fail" @if( isset($_GET['status']) &&  $_GET['status'] == "fail" ) selected @endif>Hỏng</option>
								</select> 
							</li>
							<li>
								<select name="use" id="use" style="margin-top: 3px;" class="form-control select-size-xs select2"  data-allow-clear="true" data-placeholder="Hình thức">
									<option value="">Hình thức</option>
									<option value="store" @if( isset($_GET['use']) &&  $_GET['use'] == "store" ) selected @endif>Kho</option>
									<option value="coc" @if( isset($_GET['use']) &&  $_GET['use'] == "coc" ) selected @endif>Đặt cọc</option>
									<option value="muon" @if( isset($_GET['use']) &&  $_GET['use'] == "muon" ) selected @endif>Mượn</option>
									<option value="sold" @if( isset($_GET['use']) &&  $_GET['use'] == "sold" ) selected @endif>Bán</option>
									<option value="back" @if( isset($_GET['use']) &&  $_GET['use'] == "back" ) selected @endif>Chờ thu hồi</option>
								</select> 
							</li>
							
						</ul>

						<div class="navbar-right hidden-xs">
							<button data-popup="tooltip" title="Lọc" type="submit" class="btn btn-sucess"><i class="icon-search4 position-left"></i></button>
							<a class="color-black btn" data-popup="tooltip" title="Huỷ lọc" href="{{ route('backend.w_product.list') }}"><i class="icon-cancel-circle2 position-left"></i></a>
							<a class="btn text-primary" data-popup="tooltip" title="Thêm mới thiết bị" href="{{ route('backend.w_product.new') }}"><i class="icon-plus3 position-left"></i></a>
						</div>
					</form>
				</div>
			</div>
			
			<div class="clearfix"></div>
			<div class="table-responsive" style="min-height:400px;">
				<table class="table table-bordered table-striped">
					<thead>
						<tr>
							<th>STT</th>
							<th>Loại</th>
							<th>Model</th>
							<th>DeviceId</th>
							<th>Mac</th>
							<th width="120">Kho</th>
							<th width="100">Hiện trạng</th>
							<th style="min-width: 120px;">Địa chỉ lắp đặt</th>
							<th style="min-width: 150px;">Lịch sử</th>
							<th>Ghi chú</th>
							<th style="width: 110px;" class="text-center">Action</th>
						</tr>
					</thead>
					<tbody>
						@if($devices != null)
						@foreach($devices as $stt => $device)
						<tr>
							<td>{{ ($devices->currentPage() - 1)*$devices->perPage() + $stt + 1  }}</td>
							<td>{{ @$device->cate->name }}</td>
							<td>{{ $device->name }}</td>
							<td><b>{{ $device->deviceId }}</b></td>
							<td><b>{{ $device->mac }}</b></td>
							<td>
								@if(!$device->user_id)
									<span class="label label-success">Kho tổng</span>
								@else
									<span class="label label-info">{{$device->agent->name}}</span>
								@endif
							</td>
							<td>
								<span class="label label-{{$device->status}}">{{ config('itv.device.status.'.$device->status) }}</span>
							</td>
							<td>
								@if($device->status == "used")
								{{@$device->customer->name}} - {{@$device->used->address}}
								@endif
							</td>
							<td>
								<ul style="max-height: 55px; overflow-y: auto;">
								@foreach($device->histories as $h)
									<li {{$h->type}}> Ngày {{$h->created_at->format('d-m-Y')}} : @if(!$h->customer_id && !$h->customer_id) <b>#{{$h->agency_id ? $h->agency_id.' -' : 'Tổng -'}}</b> @endif {{ config('itv.use_type.'.$h->type) }}</li>
								@endforeach
								</ul>
							</td>
							<td>{{ $device->note }}</td>

							<td class="action text-norwap">
								
								<ul class="icons-list" style="padding-left: 10px;">
									@if($device->status == "back" || $device->status == "fail" || $device->use == "back")
										<!-- @if($device->user_id) -->
										<li style="margin-right:10px;"><a data-id="{{$device->deviceId}}" data-device="{{$device->deviceId}}" data-popup="tooltip" title="Thu hồi về kho tổng" class="text-warning back_store"><i class="icon-database-arrow"></i></a></li>
										<!-- @endif -->
									@endif 

									@if( $device->user_id == null && $device->status != "fail")
									<li style="margin-right:10px;"><a data-id="{{$device->deviceId}}" data-popup="tooltip" title="Chuyển kho" class="text-success move" data-toggle="modal" data-target="#myModal"><i class="icon-shuffle"></i></a></li>
									<li style="margin-right:10px;"><a data-popup="tooltip" title="Sửa"  href="{{ route('backend.w_product.get',$device->id) }}" class="text-blue"><i class="icon-pencil7"></i></a></li> 
									<li style="margin-right:10px;"><a data-popup="tooltip" title="Xoá"  href="{{ route('backend.w_product.delete',$device->id) }}" onclick="return confirm('Are you sure?')" class="text-danger"><i class="icon-trash"></i></a></li> 
									@endif

									@if($device->status == "fail")
									<li style="margin-right:10px;"><a data-popup="tooltip" title="Fix"  href="{{ route('backend.w_product.fix',$device->id) }}" onclick="return confirm('Are you sure fix device?')" class="text-primary"><i class="icon-hammer-wrench"></i></a></li> 
									@endif
								</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;">
					{{ $devices->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">Chuyển kho thiết bị : <b id="dev"></b></h4>
      </div>
      <!-- Nội dung của modal -->
      <div class="modal-body">
        	<div class="row">
        		<div class="col-md-6">
        			<div class="form-group has-feedback ">
						<select name="customer_id" class="form-control select2" data-allow-clear="true"  id="customer_id" data-placeholder="Chọn kho nhận *">
							<option value="">Chọn kho nhận</option>
							@foreach($resellers as $user)
							<option value="{{$user->id}}">{{ $user->name }}</option>
							@endforeach
						</select>
					</div>
				</div>
				<div class="col-md-6">
        			<div class="form-group has-feedback ">
						<select name="uses" id="type" class="form-control select2" data-allow-clear="true"  data-placeholder="Chọn hình thức *">
							<option value="">Chọn hình thức</option>
							<option @if(old('uses',@$box->type_payment) == "coc" ) selected="selected" @endif value="coc">Đặt cọc</option>
							<option @if(old('uses',@$box->type_payment) == "muon" ) selected="selected" @endif value="muon">Mượn</option>
						</select>
					</div>
				</div>
				<div class="col-md-6">
        			<div class="form-group has-feedback ">
						<input type="" class="form-control" id="contract_code" placeholder="Mã hợp đồng" name="">
					</div>
				</div>
				<div class="col-md-6">
        			<div class="form-group has-feedback ">
						<input type="" class="form-control" id="deposit" placeholder="Tiền đặt cọc nếu có" name="">
					</div>
				</div>
        	</div>
      </div>
      <!-- Footer của modal -->
      <div class="modal-footer">
      	<button type="button" class="btn btn-primary" id="submit">Chuyển kho</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
      </div>
    </div>
  </div>
</div>
	<!-- /invoice grid options -->
@endsection

@push('styles')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
	<style>
		
		.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;
		}
		.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;
		}
		.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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
	<script>
		$('.select2').select2();

		$('.move').click(function() {
			var id = $(this).data("id");
			$('#dev').text(id);
		});

		$('#submit').click(function() {
			var id = $('#dev').text();
			var user_id 	= $('#customer_id').val();
			var type 		= $('#type').val();
			var deposit 	= $('#deposit').val();
			var contract_code = $('#contract_code').val();

			if(!user_id) {
				alert('Bạn chưa chọn kho nhận');
				return false;	
			}

			if(!type){
				alert('Bạn chưa chọn hình thức');
				return false;	
			}

			if(type == 'coc' && !deposit){
				alert('Bạn chưa nhập tiền đặt cọc');
				return false;	
			}

			var url = "{{ route('backend.w_product.move') }}";
			$("body").LoadingOverlay("show");
			$.post(url, {_token: _token, contract_code: contract_code, deviceId: id, type: type, deposit: deposit, user_id: user_id})
			.done(function(response) {
				$("body").LoadingOverlay("hide");

				if(response.status == 1){
					new PNotify({
			            title: 'Thông báo',
			            text: 'Chuyển thành 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) {
		        $("body").LoadingOverlay("hide");
		        new PNotify({
		            title: 'Thông báo',
		            text: 'Lỗi hệ thống!',
		            icon: 'icon-cancel-circle2',
		            type: 'danger'
		        });
		    });

		});

		$('.back_store').click(function() {
			var deviceId = $(this).data("id");

			$.confirm({
		        title: 'Xác nhận!',
		        content: 'Bạn có chắc chắn muốn thu hồi box <b>#'+deviceId+'</b> về kho tổng?',
		        buttons: {
		          'Thu hồi': function() {
			            $("body").LoadingOverlay("show");
			            var url_back = "{{ route('backend.w_product.back') }}";
						$.post(url_back, {_token: _token, deviceId: deviceId }, function(result){
			            	
							$("body").LoadingOverlay("hide");
			            	if(result == 1){
			            		$('#myModal').modal('toggle');
				            	new PNotify({
						            title: 'Thông báo',
						            text: 'Thu hồi box thành công.',
						            icon: 'icon-checkmark3',
						            type: 'success'
						        });
						        location.reload();
			            	}else{
								new PNotify({
						            title: 'Thông báo',
						            text: 'Thu hồi box không thành công.',
						            icon: 'icon-cancel-circle2',
						            type: 'danger'
						        });
			            	}

			            });
		          },
		          hủy: function() {}
		        }
		     });
		});
		
	</script>
@endpush