@extends('backend.layout')

@section('content')

<div class="panel panel-flat">
	<div class="panel-body" style="padding-top: 0px;">
		<legend class="text-bold mb-0" style="border: none;">
			<div class="row">
				<div class="col-md-6">
					<a href="{{ route('backend.invoice.list') }}" data-popup="tooltip" title="Danh sách dịch vụ khách hàng"><i class="icon-arrow-left7 position-left"></i></a>&nbsp;
					Invoice: <a>#{{$invoice->invoice_code}}</a>
					@if($box)
					- 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>
					@endif
				</div>
				<div class="col-md-6 text-right btn-group">
					@if($invoice->status == 'new')
					<a data-popup="tooltip" title="Huỷ Invoice" style="color:red;" href=""><i class="icon-trash"></i></a>
					@endif
					
					@if( !$invoice->contract && $invoice->status == 'new')
					<a data-popup="tooltip" data-toggle="modal" data-target="#myModal" style="color:blue;" title="Gộp phiếu" href="#"><i class="icon-rotate-cw"></i></a>
					@endif

					@if($invoice->status != 'cancel')
					<a data-popup="tooltip" title="In Phiếu Thu"  style="color:blue;" href="#"><i class="icon-printer"></i></a>
					@endif

					@if($invoice->contract)
					<a href="{{ route('backend.box.get', $invoice->contract->id) }}" class="text-info" title="Xem hợp đồng"><i class="icon-cart"></i></a>
					@endif
				</div>
			</div>
		
		</legend>

		<div class="row">
			<div class="table-responsive" style="min-height:400px;">
				<table class="table table-bordered table-striped">
					<thead>
						<tr>
							<th>STT</th>
							<th>Thiết bị</th>
							<th>Dịch vụ</th>
							<th>Giá</th>
							<th>Vat</th>
							<th>Giảm trừ</th>
							<th>Thành tiền</th>
							<th>Thời gian</th>
							<th>Ngày tạo</th>
							<th>Note</th>
							@if($invoice->status == 'new')
							<th  class="text-center">Action</th>
							@endif
						</tr>
					</thead>

					<tbody>
						@foreach($items as $item)
						<tr>
							<td>{{ $loop->index + 1 }}</td>
							<td>
								@if($item->product && $item->product->mac != null)
								Mac : {{$item->product->mac}}
								@else 
								DeviceId : {{$item->deviceId}}
								@endif
							</td>
							<td>
								@if($item->service)
								{{@$item->service->name}}
								@else 
								Chuyển box
								@endif
							</td>
							<td>{{ number_format($item->price, 0, '.', '.') }}<sup>đ</sup></td>
							<td>{{ number_format($item->vat, 0, '.', '.') }}<sup>đ</sup></td>
							<td>{{ number_format($item->discount, 0, '.', '.') }}<sup>đ</sup></td>
							<td>{{ number_format( ($item->price + $item->vat - $item->discount), 0, '.', '.') }}<sup>đ</sup></td>
							<td>
								@if($item->type == 'contract')
								Từ {{ $item->date_used }} đến {{ $item->expired_date }}
								@endif
							</td>
							<td>{{ $item->created_at }}</td>
							<td>{{ $item->note }}</td>
							@if($invoice->status == 'new')
							<td class="text-center">
								<ul class="icons-list">
                                    <li><a data-placement="bottom" data-popup="tooltip" title="Huỷ items"  style="color:red;" href=""><i class="icon-trash"></i></a></li>
                                </ul>
							</td>
							@endif
						</tr>
						@endforeach
					</tbody>
				</table>
			</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">Gộp Invoice: <b id="box_code">{{ $invoice->invoice_code }}</b></h4>
      </div>
      <!-- Nội dung của modal -->
      <div class="modal-body">
        	<div class="row">
        		<div class="col-md-offset-2 col-md-8">
        			<div class="form-group has-feedback ">
        				<input type="hidden" id="code">
						<input type="text" class="form-control" id="invoice_code" placeholder="Invoice nhận">
					</div>

					<div class="text-center">
						<button type="button" class="btn btn-primary" id="submit">Xác nhận</button>
	        			<button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
					</div>
				</div>
        	</div>
      </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>
		.btn-group a:not(:last-child){
			margin-right: 20px;
		}
		.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: 35%;
		  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;
		}
		.autocomplete-items{
			top: 106%;
		}
	</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();

		$('#submit').click(function() {
			var code = $('#invoice_code').val();
			var fromCode = "{{ $invoice->invoice_code }}";

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

				$.post("{{route('backend.invoice.merge')}}", {_token: _token, to_code: code, from_code : fromCode})
					.done(function(response) {
						$("#myModal .modal-content").LoadingOverlay("hide");

						if(response.status == 1){
							new PNotify({
					            title: 'Thông báo',
					            text: 'Huỷ dịch vụ 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) {
				        $("#myModal .modal-content").LoadingOverlay("hide");
				        new PNotify({
				            title: 'Thông báo',
				            text: 'Lỗi hệ thống!',
				            icon: 'icon-cancel-circle2',
				            type: 'danger'
				        });
				    });
				}else {
					$("#myModal .modal-content").LoadingOverlay("hide");
					 new PNotify({
				            title: 'Thông báo',
				            text: 'Bạn chưa nhập đủ thông tin!',
				            icon: 'icon-bug2',
				            type: 'danger'
				        });
				}
			
		});

		function autocomplete(inp, arr) {
		  var currentFocus;
		  var user_id = "{{ $invoice->user_id }}";

		  inp.addEventListener("input", function(e) {
		      	var a, b, i, val = this.value;
		      	closeAllLists();
		      	if (!val) { return false;}
		      	currentFocus = -1;
		      	a = document.createElement("div");
		      	a.setAttribute("id", this.id + "autocomplete-list");
		      	a.setAttribute("class", "autocomplete-items");
		      	this.parentNode.appendChild(a);
		      	var url_search = "{{ route('backend.invoice.list') }}";
		      	var term = {term : val, _type : 'query'};
		      	var _token 	= $('meta[name="csrf-token"]').attr('content');
		      	var data = { keyword : val, type: 'contract', user_id: user_id};

				$.get(url_search, data, function(arr){

					for (i = 0; i < arr.length; i++) {
						// if (arr[i].address.substr(0, val.length).toUpperCase() == val.toUpperCase()) {
						  b = document.createElement("div");
						  b.innerHTML = "<strong>" + arr[i].invoice_code + " - Khách "+ arr[i].customer?.fullname +"</strong>";
						  b.innerHTML += "<input type='hidden' value='" + arr[i].invoice_code + "'>";
						  b.addEventListener("click", function(e) {
						      inp.value = this.getElementsByTagName("input")[0].value;
						      closeAllLists();
						  });
						  a.appendChild(b);
						// }
					}
				});
                // text: item.address,
                // id: item.address
				
		  	});

			inp.addEventListener("keydown", function(e) {
			      var x = document.getElementById(this.id + "autocomplete-list");
			      if (x) x = x.getElementsByTagName("div");
			      if (e.keyCode == 40) {
			        currentFocus++;
			        addActive(x);
			      } else if (e.keyCode == 38) {
			        currentFocus--;
			        addActive(x);
			      } else if (e.keyCode == 13) {
			        e.preventDefault();
			        if (currentFocus > -1) {
			          if (x) x[currentFocus].click();
			        }
			      }
			});

		  	function addActive(x) {
			    if (!x) return false;
			    removeActive(x);
			    if (currentFocus >= x.length) currentFocus = 0;
			    if (currentFocus < 0) currentFocus = (x.length - 1);
			    x[currentFocus].classList.add("autocomplete-active");
		  	}

		  	function removeActive(x) {
			    for (var i = 0; i < x.length; i++) {
			      x[i].classList.remove("autocomplete-active");
			    }
		  	}

		  	function closeAllLists(elmnt) {
			    var x = document.getElementsByClassName("autocomplete-items");
			    for (var i = 0; i < x.length; i++) {
			      if (elmnt != x[i] && elmnt != inp) {
			        x[i].parentNode.removeChild(x[i]);
			      }
			    }
			  }

		  	document.addEventListener("click", function (e) {
		      	closeAllLists(e.target);
		  	});
		}
		
		var countries = ["Cầu giấy"];
		autocomplete(document.getElementById("invoice_code"), countries);
	</script>
@endpush