@extends('backend.layout')

@section('content')
<div class="row">
	<div class="panel panel-flat">
		<div class="panel-body" style="padding-top: 10px;">
			<fieldset>
				<legend class="text-bold">
					<div class="row">
						<div class="col-md-6">
								<a href="{{ route('backend.box.get', $box->id) }}" data-popup="tooltip" title="Danh sách dịch vụ khách hàng"><i class="icon-arrow-left7 position-left"></i></a>&nbsp;
								Mã hợp đồng: <a href="{{ route('backend.box.get', $box->id) }}">{{ $box->code }}</a>
								&nbsp;&nbsp;- Khách hàng: <b>{{ $box->customer->fullname }}</b>
								&nbsp;&nbsp;- Đại lý: <b>{{ $box->customer->user->name }}</b>
								&nbsp;&nbsp;- Sử dụng: <b>{{ $box->devices->count() }}</b>
							</div>
						<div class="col-md-6">
							@if(!$box->canceled)
							<a class="pull-right text-success" data-popup="tooltip" title="Thêm mới thiết bị"  style="color:blue;" href="{{ route('backend.device.new', $box->code) }}"><i class="icon-plus3 position-left"></i></a>
							@endif
						</div>
					</div>
				
				</legend>
			</fieldset>
		
			<div class="clearfix"></div>
			<div class="table-responsive">
				<table class="table text-nowrap table-bordered table-striped">
					<thead>
						<tr>
							<th>STT</th>
							<th>DeviceId</th>
							<th>Mac</th>
							<th>Hình thức</th>
							<th>App</th>
							<th>Thiết bị</th>
							<th>Vị trí</th>
							<th>Lời chào</th>
							<th>Trạng thái</th>
							<th>Ngày thêm</th>	
							<th class="text-center" style="width: 80px;">Action</th>
						</tr>
					</thead>
					<tbody>
						@if($devices != null)
						@foreach($devices as $stt => $device)
						<tr>
							<td>{{ $stt + 1  }}</td>
							<td>{{ $device->deviceId }}</td>
							<td>{{ @$device->store->mac }}</td>
							<td>{{ config('itv.use_type.'.$device->type) }}</td>
							<td>{{ $device->app ? $device->app.'-'.$device->version : 'Chưa cập nhật' }}</td>
							<td>{{ config('itv.flatform.'.$device->flatform) }}</td>
							<td>{{ $device->address }}</td>
							<td>{{ $device->mes }}</td>
							<td>
								@if( $box->deleted_at )
									<a href="javascript:void(0);" class="label label-danger">Đã xoá</a>
								@elseif( $box->canceled )
									<a href="javascript:void(0);" class="label label-warning">Đã huỷ</a>
								@else 
									@if( (strtotime($box->expired_date)) > time() )
										@if($box->status == 1)
											@if($device->status)
											<span href="javascript:void(0);"  class="label label-success active-package">Hoạt động</span>
											@else
											<span href="javascript:void(0);" class="label label-default active-package">Đang dừng</span>
											@endif
										@else
										<a href="javascript:void(0);" data-action="true" data-id="{{ $box->id }}" data-name="{{$box->mac_address}}"  class="label label-default active-package">Dừng hợp đồng</a>
										@endif
									@else
										<a href="javascript:void(0);"  class="label label-danger">Hết hạn</a>
									@endif
								@endif

								
							</td>
							<td>{{ $device->created_at->format('Y-m-d') }}</td>
							<td class="text-center">
								<a href="{{route('backend.device.get', ['code' => $box->code, 'id' => $device->id])}}" data-popup="tooltip" title="Cập nhật lời chào"><i class="icon-pencil"></i></a>&nbsp;&nbsp;
								@if($device->type == "other")
								<a href="{{route('backend.device.delete', ['code' => $box->code, 'id' => $device->id])}}" data-popup="tooltip" title="Xoá thiết bị" onclick="return confirm('Bạn có chắc chắn muốn huỷ thiết bị này {{ $device->deviceId }}?');"><i class="icon-trash"></i></a>
								@else
								<a data-toggle="modal" data-id="{{$device->id}}" deviceId="{{ $device->deviceId }}" mac="{{ @$device->store->mac }}" class="recovery" data-target="#myModal" data-url="{{route('backend.device.recovery', ['code' => $box->code, 'id' => $device->id])}}" data-popup="tooltip" title="Thu hồi thiết bị"><i class="icon-database-arrow"></i></a>
								@endif
							</td>
						</tr>
						@endforeach
						@endif
					</tbody>
				</table>
				<div class="clear-fix" style="border-top:1px solid #ccc;"></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">Dừng dịch vụ DeviceId: <b id="deviceId"></b> - Mac: <b id="mac"></b></h4>
      </div>
      <!-- Nội dung của modal -->
      <div class="modal-body">
        	<div class="row">
        		<div class="col-md-3">
        			<input type="hidden" id="itemId">
        			<input type="hidden" id="url">

        			<div class="form-group has-feedback ">
        				<div class="form-group has-feedback">
							<div class="checkbox checkbox-switchery">
								<label>
									<input type="checkbox" id="error" class="switchery-primary">	
									Báo hỏng
								</label>
							</div>
							<div class="form-control-feedback">
								<!-- <i class="icon-notification2"></i> -->
							</div>
							<span class="help-block"></span>
						</div>
        			</div>
				</div>
				<div class="col-md-3">
        			<div class="form-group has-feedback ">
        				<div class="form-group has-feedback">
							<div class="checkbox checkbox-switchery">
								<label>
									<input type="checkbox" id="back" class="switchery-primary">	
									Về kho
								</label>
							</div>
							<div class="form-control-feedback">
								<!-- <i class="icon-notification2"></i> -->
							</div>
							<span class="help-block"></span>
						</div>
        			</div>
				</div>
				<div class="col-md-6">
        			<div class="form-group has-feedback ">
						<input type="" class="form-control" id="note" placeholder="Lý do đóng dịch vụ" name="">
					</div>
				</div>
        	</div>
      </div>
      <!-- Footer của modal -->
      <div class="modal-footer">
      	<button type="button" class="btn btn-primary" id="submit">Cập nhật</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
      </div>
    </div>
  </div>
</div>


@endsection

@push('styles')
	<style type="text/css">
		@media screen and (max-width: 768px){
			.label-list .navbar-right{
				position: absolute;
				top: 0px;
				right: -10px;
			}
		}
		.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/styling/switchery.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>

	<script type="text/javascript">

		$(document).ready(function() {
			$('.select2').select2();

			$('.multiselect').multiselect({
				enableFiltering: true,
            	// filterBehavior: 'value'
            	nonSelectedText: 'Chọn nhóm quản trị'
			});
			
			var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery-primary'));

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

			$('.recovery').click(function() {
				$('#deviceId').text($(this).attr('deviceId'));
				$('#mac').text($(this).attr('mac'));
				$('#itemId').val($(this).attr('data-id'));
				$('#url').val($(this).attr('data-url'));
			});

			$('#submit').click(function() {
				var error = $('#error').prop('checked');
				var back  = $('#back').prop('checked');
				var note  = $('#note').val();
				var id = $('#itemId').val();
				var url = $('#url').val();

				$("#myModal .modal-content").LoadingOverlay('show');

				$.post(url, {_token: _token, error: error, id: id, note: note, back: back}, function(result){
					$("#myModal .modal-content").LoadingOverlay("hide");
				    location.reload();
	            });

				// post
			});

		});
	</script>
@endpush