@extends('backend.layout')

@section('content')
<div class="row">
	<div class="col-md-12">
		<p style="margin: 0px; padding: 5px 0px;"><span class="text-semibold">{{ ($listDevices->currentPage() - 1)*10 + 1 }}-{{ ($listDevices->currentPage() - 1)*10 + $listDevices->count() }}</span> trong <span class="text-semibold">{{ $listDevices->total() }}</span> bản ghi.</p>
		<div class="panel panel-flat">
			<form action="" method="GET">
				<div class="navbar navbar-default navbar-xs fillter padding-0" style="padding-right:0px;">
					<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="DeviceId or Mac ..." >
								</li>
							</ul>

							<div class="navbar-right hidden-xs">
								<ul class="nav navbar-nav">
									<li>
										<button data-popup="tooltip" title="Lọc" type="submit" class="btn btn-sucess"><i class="icon-search4 position-left"></i></button>
									</li>
									<li>
										<a class="color-black btn" data-popup="tooltip" title="Huỷ lọc" href="{{ route('backend.tmp_devices.list') }}"><i class="icon-cancel-circle2 position-left"></i></a>
									</li>
									
								</ul>
							</div>
						</form>
					</div>
				</div>
			</form>

			<div class="table-responsive" >
				<table class="table text-nowrap table table-bordered table-striped" id="ageny">
					<thead>
						<tr>
							<th>#ID</th>
							<th>DeviceId</th>
							<th>Mac</th>
							<th>Trạng thái</th>
							<th>Người thực hiện</th>
							<th>Ghi chú</th>
							<th class="text-center" style="width: 120px;">Action</th>
						</tr>
					</thead>
					<tbody>
						
						@foreach($listDevices as $listDevice)
						<tr>
							<td>
								<span class="label bg-blue">{{$listDevice->id}}</span>
							</td>
							<td>{{ $listDevice->deviceId }}</td>
							<td>{{ $listDevice->mac_adresss }}</td>
                            <td>

								@if($listDevice->status ==0)
									<span class="label label-success">Mới</span>
								@elseif($listDevice->status ==1)
									<span class="label label-info">Đã chuyển vào kho</span>
								@elseif($listDevice->status ==2)
									<span class="label label-info">Chuyển sang hợp đồng</span>
								@elseif($listDevice->status ==3)
									<span class="label label-danger">Từ chối</span>
								@endif
							</td>
							<td>{{ $listDevice->user_id }}</td>
							<td>{{ $listDevice->note }}</td>
                            <td>
                                <ul class="icons-list" style="padding-left: 10px;">
                                	@if(!$listDevice->device)
									<li style="margin-right:10px;"><a data-mac="{{$listDevice->mac_adresss}}" data-device="{{$listDevice->deviceId}}"  data-id="{{$listDevice->id}}" data-popup="tooltip" title="Thêm vào kho" class="text-info add_w" data-toggle="modal" data-target="#myModal" ><i class="icon-cabinet"></i></a></li>
									<li style="margin-right:10px;"><a data-device="{{$listDevice->deviceId}}"  data-popup="tooltip" title="Thêm vào hợp đồng" class="text-success add_c" data-toggle="modal" data-target="#myModal1" ><i class="icon-cart"></i></a></li>
									@endif
									<li style="margin-right:10px;"><a href="{{ route('backend.tmpdevice.remove', $listDevice->id) }}"   onclick="return confirm('Are you sure remove device?')" data-popup="tooltip" title="Huỷ" class="text-warning add_c" ><i class="icon-cancel-circle2"></i></a></li>
								</ul>
                            </td>
                        </tr>
						@endforeach
					</tbody>
				</table>
				<div class="clear-fix" style="border-top:1px solid #ccc;"></div>
				<div style="padding:10px 15px;text-align:center;">
					{{ $listDevices->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">Thêm thiết bị vào kho tổng : <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 ">
                        <input type="" class="form-control" id="name" placeholder="Tên thiết bị *">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group has-feedback ">
                        <input type="" class="form-control" id="mac" placeholder="Mac adress">
                    </div>
                  </div>
                  <div class="col-md-6">
                      <div class="form-group has-feedback ">
                          <select name="category_id" id="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($cates as $cate)
								<option value="{{ $cate->id }}" @if(@$_GET['category_id'] == $cate->id) selected="selected" @endif>{{ $cate->name }}</option>
								@endforeach
							</select>
                      </div>
                  </div>
                  <div class="col-md-6">
                      <div class="form-group has-feedback ">
                          <input type="" class="form-control" id="note" placeholder="Note" name="note">
                      </div>
                  </div>
              </div>
        </div>
        <!-- Footer của modal -->
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="submit">Nhập kho</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
        </div>
      </div>
    </div>
</div>

<div class="modal fade right" id="myModal1" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" style="top: 30%;" 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">Thêm thiết bị vào hợp đồng : <b id="devc"></b></h4>
        </div>
        <!-- Nội dung của modal -->
        <div class="modal-body">
            <div class="row">
				<form action="" method="POST">
						<div class="col-md-4">
	                      	<div class="form-group has-feedback ">
	                          	<select name="user_id" id="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($users as $user)
									<option value="{{ $user->id }}" @if(@$_GET['user_id'] == $user->id) selected="selected" @endif>{{ $user->name }}</option>
									@endforeach
								</select>
	                      	</div>
	                    </div>
	                    <div class="col-md-4">
	                      	<div class="form-group has-feedback ">
	                          	<select name="customer_id" id="customer_id" style="margin-top: 3px;" data-allow-clear="true" class="form-control select2 select-size-xs" data-placeholder="Khách hàng">
									<option value="">Khách hàng</option>
								</select>
	                      	</div>
	                    </div>
	                    <div class="col-md-4">
	                      	<div class="form-group has-feedback ">
	                          	<select name="contract_code" id="contract_code" style="margin-top: 3px;" data-allow-clear="true" class="form-control select2 select-size-xs" data-placeholder="Hợp đồng *">
									<option value="">Hợp đồng</option>
								</select>
	                      	</div>
	                    </div>

	                     <div class="col-md-4">
	                      	<div class="form-group has-feedback ">
	                          	<select name="flatform" id="flatform" class="form-control select2"  data-allow-clear="true"  data-placeholder="Loại thiết bị">
									<option value="">Chọn loại thiết bị</option>
									<option @if(old('flatform',@$box->type_payment) == "tv-box" ) selected="selected" @endif value="tv-box">TV box</option>
									<option @if(old('flatform',@$box->type_payment) == "tv" ) selected="selected" @endif value="tv">Smart Tivi</option>
									<option @if(old('flatform',@$box->type_payment) == "phone" ) selected="selected" @endif value="phone">Phone</option>
									<option @if(old('flatform',@$box->type_payment) == "other" ) selected="selected" @endif value="other">Khác</option>
								</select>
	                      	</div>
	                    </div>


	                    <div class="col-md-4">
	                      	<div class="form-group has-feedback ">
	                          	<input type="text" class="form-control" id="address" placeholder="Vị trí lắp đặt">
	                      	</div>
	                    </div>
	                    <div class="col-md-4">
	                      	<div class="form-group has-feedback ">
	                          	<input type="text" class="form-control" id="mes" placeholder="Lời chào">
	                      	</div>
	                    </div>
					
				</form>
			</div>
        </div>
        <!-- Footer của modal -->
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="addContract">Thêm vào hợp đồng</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
        </div>
      </div>
    </div>
</div>
	<!-- /invoice grid options -->
@endsection

@push('styles')
	<link href="{{ URL::asset('treejs/css/jquery.treetable.css') }}" rel="stylesheet" type="text/css">
	<!-- <link href="{{ URL::asset('treejs/css/jquery.treetable.theme.default.css') }}" rel="stylesheet" type="text/css"> -->
	<style>

		.pnotify-center {
		   right: calc(50% - 150px) !important;
		   top: calc(50% - 150px) !important;
		}
		.table>tbody>tr>td, .table>thead>tr>th{
			padding: 12px 10px;
		}

		.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('treejs/jquery.treetable.js') }}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script>
		$('.select2').select2();
		$('.add_w').click(function(){
			var deviceID = $(this).data('device')
			$('#dev').text(deviceID);
			idcheck = $(this).data('id');
			$('#mac').val($(this).attr('data-mac'));
		})

        $('#submit').click(function() {
			var id = idcheck;

            var name        = $('#name').val();
			var category_id 		= $('#category_id').val();
			var note 	    = $('#note').val();
			var mac = $('#mac').val();

			if(!name || !category_id ) {
				new PNotify({
			            title: 'Thông báo',
			            text: 'Bạn chưa nhập hết thông tin.',
			            icon: 'icon-cancel-circle2',
			            type: 'dannger'
			        });
				return false;	
			}

            var url = "{{ route('backend.tmpdevice.add', ['id' => '__id__']) }}";
			url = url.replace('__id__', id);
	

			$("body").LoadingOverlay("show");
			$.post(url, {_token: _token, name: name, category_id: category_id, mac: mac, note: note})
				.done(function(response) {
					$("body").LoadingOverlay("hide");

					if(response.status == 1){
						new PNotify({
				            title: 'Thông báo',
				            text: 'Nhập kho 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'
			        });
			    });

		});

		$('.add_c').click(function(){
			var deviceID = $(this).data('device')
			$('#devc').text(deviceID);
		})

		$('#user_id').on('change', function() {
			var user_id = $(this).val();
			$('#customer_id').empty();
			$('#contract_code').empty();

			if(user_id) {
				$.get("{{ route('backend.customer.list') }}", { user_id: user_id }, function(result){
					console.log(result.data);
					if(result.status == 1){
						$('#customer_id').append('<option value="">Khách hàng</option>');
						$.each(result.data, function(index, item) {
					        $('#customer_id').append('<option value="' + item.id + '">' + item.fullname + '</option>');
					    });
					}
					$('#customer_id').trigger('change.select2');
	            });
			}

		});

		$('#customer_id').on('change', function() {
			var customer_id = $(this).val();
			$('#contract_code').empty();

			if(customer_id) {
				$.get("{{ route('backend.box.list') }}", { customer_id: customer_id }, function(result){
					console.log(result.data);
					if(result.status == 1){
						$('#contract_code').append('<option value="">Hợp đồng</option>');
						$.each(result.data, function(index, item) {
					        $('#contract_code').append('<option value="' + item.code + '">' + item.code +' - ' + item.service.name +'</option>');
					    });
					}
					$('#contract_code').trigger('change.select2');
	            });
			}

		});

		$('#addContract').click(function() {
			var code = $('#contract_code').val();
			var uses = 'other';
			var flatform = $('#flatform').val();
			var mes = $('#mes').val();
			var address = $('#address').val();
			var deviceId = $('#devc').text();

			if(code && flatform){
				var urlADD = "{{ route('backend.device.new', ['code' => '__code__']) }}";
				urlADD = urlADD.replace('__code__', code);
		

				$("body").LoadingOverlay("show");
				$.post(urlADD, {_token: _token,deviceId: deviceId, code: code, uses: uses, flatform: flatform, address: address, mes: mes, action : '1'})
					.done(function(response) {
						$("body").LoadingOverlay("hide");

						if(response.status == 1){
							new PNotify({
					            title: 'Thông báo',
					            text: 'Thêm vào hợp đồng thành công.',
					            icon: 'icon-checkmark3',
					            type: 'success'
					        });
					        location.reload();
						}else {
							new PNotify({
					            title: 'Thông báo',
					            text: 'Lỗi hệ thống',
					            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'
				        });
				    });
			}else {
				new PNotify({
		            title: 'Thông báo',
		            text: 'Bạn chưa nhập đủ thông tin cần thiết!',
		            icon: 'icon-cancel-circle2',
		            type: 'danger'
		        });
			}

		});
	</script>
@endpush