@extends('backend.layout')

@section('content')

<div class="row">
	
	<div class="panel panel-flat">

		<div class="navbar navbar-default navbar-xs" 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">
					<p class="navbar-text">Bộ lọc:</p>
					<ul class="nav navbar-nav">
						<li>
							<input class="form-control" style="margin-top: 3px;" name="keyword" placeholder="Deviceid" value="{{ @$_GET['keyword'] }}">
						</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.device_resellers.list') }}"><i class="icon-cancel-circle2 position-left"></i></a>
					</div>
				</form>
			</div>
		</div>

        <div class="table-responsive" style="max-height:509px;">
            <table class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>STT</th>
						<th>Name</th>
						<th>Loại thiết bị</th>
						<th>DeviceID</th>
						<th>Mac</th>
                        <th>Dịch vụ</th>
                        <th>Tình trạng</th>
						<th class="text-center" style="width: 100px;">Action</th>
					</tr>
				</thead>
				<tbody>
                    @foreach ($products as $product)
                        <tr>
                            <td>{{$product->id}}</td>
                            <td>{{$product->name}}</td>
                            <td>{{$product->cate->name}}</td>
                            <td>{{$product->deviceId}}</td>
                            <td>{{$product->mac}}</td>
							<td>
								@if(isset($product->used->invoiceitem->service->name))
									<a target="_blank" class="text-blue">{{ $product->used->invoiceitem->service->name}}</a>
								@else
									<span class="text-red">Không tìm thấy dịch vụ</span>
								@endif
							</td>
                               
                            <td>
								<span class="label label-{{$product->status}}">{{ config('itv.device.status.'.$product->status) }}</span>
							</td>
                            <td>
								@if (isset($product->used->invoiceitem->service->name))
									<a data-toggle="modal" data-id="{{$product->id}}" deviceId="{{ $product->deviceId }}" mac="{{ @$product->mac }}" data-url="{{route('backend.device_resellers.recovery', ['id' => $product->id])}}" class="recovery" data-target="#myModal"  data-popup="tooltip" title="Dừng dịch vụ thiết bị"><i class="icon-database-arrow"></i></a>
								@else
									<a data-toggle="modal" data-id="{{$product->id}}" deviceId="{{ $product->deviceId }}" mac="{{ @$product->mac }}" data-url="{{route('backend.device_resellers.updateStatusUseWProduct', ['id' => $product->id])}}" class="text-warning updatestatususe" data-target= "#myModal1"><i class="icon-database-arrow"></i></a>
								@endif

								@if (!isset($product->used->invoiceitem->service->name) && $product->use == 'back' || $product->status == 'fail')
									<a data-popup="tooltip" title="Hoàn tác" href="{{ route('backend.device_resellers.fix',$product->id) }}"   onclick="return confirm('Are you sure fix device?')" class="text-primary"><i class="icon-hammer-wrench"></i></a>
								@endif
                            </td>

                        </tr>
                    @endforeach
				</tbody>
			</table>
			<div class="clear-fix" style="border-top:1px solid #ccc;"></div>
			<div style="padding:10px 15px;text-align:center;">
			
			</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">Dừng dịch vụ</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" 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">Cập nhật tình trạng: <b id="deviceId1"></b> - Mac: <b id="mac1"></b></h4>
        </div>
        <!-- Nội dung của modal -->
        <div class="modal-body">
              <div class="row">
                  	<div class="col-md-6">
                      <input type="hidden" id="itemId1">
                      <input type="hidden" id="url1">
  
                      	<div class="form-group has-feedback ">
                          	<div class="form-group has-feedback">
                              	<div class="checkbox checkbox-switchery">
                                  <label>
                                      <input type="checkbox" id="error1" 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-6">
                      <div class="form-group has-feedback ">
                          <div class="form-group has-feedback">
                              <div class="checkbox checkbox-switchery">
                                  <label>
                                      <input type="checkbox" id="back1" 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>
        </div>
        <!-- Footer của modal -->
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="submit1">Cập nhật</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
        </div>
      </div>
    </div>
</div>
@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/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
			});

			$('.updatestatususe').click(function() {
				$('#deviceId1').text($(this).attr('deviceId'));
				$('#mac1').text($(this).attr('mac'));
				$('#itemId1').val($(this).attr('data-id'));
				$('#url1').val($(this).attr('data-url'));
			});

			$('#submit1').click(function() {
			var error1 = $('#error1').prop('checked');
			var back1  = $('#back1').prop('checked');
			var note  = $('#note').val();
			var id = $('#itemId1').val();
			var url1 = $('#url1').val();
			$("#myModal1 .modal-content").LoadingOverlay('show');
			$.post(url1, {_token: _token, error: error1, id: id, back: back1}, function(result){
				$("#myModal1 .modal-content").LoadingOverlay("hide");
				location.reload();
			});

			// post
			});

		});
	</script>
@endpush