@extends('backend.layout')

@section('content')
	<div class="panel panel-flat">
		<div class="panel-body" style="padding-top: 0px;">
			<form action="" method="POST">
				{{ csrf_field() }}
				<fieldset class="content-group">
					<legend class="text-bold">
					{{ ( isset($id) ? 'Chỉnh sửa dịch vụ khách hàng' :'Thêm mới dịch vụ khách hàng') }}
					<a href="{{ route('backend.box.list') }}" class="pull-right" data-popup="tooltip" title="Danh sách dịch vụ khách hàng"><i class="icon-list position-left"></i></a>
					</legend>

					<div class="row">
						<div class="col-md-6">
							<div class="form-group row has-feedback @if( @$errors->first('code') != null ) has-error  @endif ">
								<label class="control-label col-md-2 col-xs-12">Mã hợp đồng</label>
								<div class="col-xs-11 col-md-9">
									<input type="text" class="form-control" placeholder="" id="code" name="code" value="{{ old('code',@$box->code) }}">
									<div class="form-control-feedback">
										 @if( @$errors->first('code') != null )<i class="icon-notification2"></i> @endif
									</div>
									<span class="help-block"></span>
								</div>
								<div class="col-xs-1">
									<button class="btn btn-success pull-right" id="generate_code" data-popup="tooltip" title="Tạo mã hợp đồng"><i class="icon-pencil"></i></button>
								</div>
							</div>

							<div class="form-group row has-feedback @if( @$errors->first('customer_id') != null ) has-error  @endif ">
								<label class="control-label col-md-2 col-xs-12 ">Khách hàng</label>
								<div class="col-xs-11 col-md-9">
									<select name="customer_id" id="list_user"  data-allow-clear="true"  class="form-control select2" data-placeholder="Chọn khách hàng">
										<option value="">Chọn khách hàng</option>
										@foreach($customers as $cus)
										<option value="{{ $cus->id }}" @if($cus->id == old('customer_id',@$box->customer_id) ) selected="selected" @endif>{{ $cus->fullname}}</option>
										@endforeach
									</select>
									<div class="form-control-feedback">
										@if( @$errors->first('customer_id') != null )<i class="icon-notification2"></i> @endif
									</div>
									<span class="help-block"></span>
								</div>
								<div class="col-xs-1">
									<button data-popup="tooltip" title="Thêm khách hàng" class="btn btn-success pull-right" id="add_customer" data-target="#modal_form_vertical" data-toggle="modal"><b><i class="icon-user-plus"></i></b></button>
								</div>
							</div>

							<div class="form-group row has-feedback @if( @$errors->first('service_id') != null ) has-error  @endif ">
								<label class="control-label col-lg-2 ">Dịch vụ</label>
								<div class="col-lg-10">
									<select name="service_id"  data-allow-clear="true"  class="form-control select2" {{ (( isset($id) &&  @$box->type != 'cancel')  ? "disabled" : null) }}   id="service" data-placeholder="Chọn dịch vụ">
										<option value="">Chọn dịch vụ</option>
										@foreach($services as $groups)
										<optgroup label="{{ $groups['name'] }}">
											@foreach($groups['val'] as $ser)
											<option value="{{ $ser->id }}" data-price="{{$ser->price}}" group="{{ $groups['name'] }}" @if($ser->id == old('service_id',@$box->service_id) ) selected="selected" @endif>{{ $ser->name }}</option>
											@endforeach
										</optgroup>
										@endforeach
									</select>
									<div class="form-control-feedback">
										@if( @$errors->first('service_id') != null )<i class="icon-notification2"></i> @endif
									</div>
									<span class="help-block"></span>
								</div>
							</div>

							<div class="form-group row @if( @$errors->first('address') != null ) has-error  @endif  has-feedback">
								<label class="control-label col-lg-2 ">Địa chỉ lắp đặt</label>
								<div class="col-lg-10">
									<input type="text"  autocomplete="off" class="form-control" id="inputAddress" placeholder="Địa chỉ lắp đặt" name="address" value="{{ old('address',@$box->address) }}">
									<div class="form-control-feedback">
										@if( @$errors->first('address') != null ) <i class="icon-notification2"></i> @endif
									</div>
									<span class="help-block"></span>
								</div>
							</div>

							<div class="form-group row has-feedback @if( @$errors->first('installed') != null ) has-error  @endif">
								<label class="control-label col-lg-2 ">Lắp đặt</label>
								<div class="col-lg-10">
									<select name="installed" class="form-control select2" data-placeholder="Chọn nhân viên lắp đặt">
										<option value="">Chọn nhân viên lắp đặt</option>
										@foreach($installs as $ins)
										<option value="{{ $ins->id }}" {{ $ins->id == old('installed') ? "selected" : "" }} >{{ $ins->name }}</option>
										@endforeach
									</select>
									<div class="form-control-feedback">
										@if( @$errors->first('installed') != null )<i class="icon-notification2"></i> @endif
									</div>
									<span class="help-block"></span>
								</div>
							</div>

							<div class="form-group row has-feedback @if( @$errors->first('type_payment') != null ) has-error  @endif ">
								<label class="control-label col-lg-2 ">Gia hạn</label>
								<div class="col-lg-10">
									<select name="type_payment" class="form-control select2"  data-allow-clear="true"  data-placeholder="Chọn loại gia hạn">
										<option value="">Chọn loại gia hạn</option>
										<option value="1"  @if(old('type_payment',@$box->type_payment) == 1 ) selected="selected" @endif >Không tự động gia hạn</option>
										<option value="2"  @if(old('type_payment',@$box->type_payment) == 2 ) selected="selected" @endif>Tự động gia hạn</option>
									</select>
									<div class="form-control-feedback">
										@if( @$errors->first('type_payment') != null )<i class="icon-notification2"></i> @endif
									</div>
									<span class="help-block"></span>
								</div>
							</div>

						</div>

						<div class="col-md-6">

							<div class="form-group row @if( @$errors->first('created_at') != null ) has-error  @endif  has-feedback">
								<label class="control-label col-lg-2 ">Ngày sử dụng</label>
								<div class="col-lg-10">
									<input type="date" class="form-control" placeholder="Nhập giá trị hợp đồng" name="created_at" value="{{ old('created_at',date('Y-m-d'))  }}">
									<div class="form-control-feedback">
										@if( @$errors->first('created_at') != null ) <i class="icon-notification2"></i> @endif
									</div>
									<span class="help-block"></span>
								</div>
							</div>

							<!-- <div class="form-group row @if( @$errors->first('price') != null ) has-error  @endif  has-feedback">
								<label class="control-label col-lg-2 ">Thành tiền (VND)</label>
								<div class="col-lg-10">
									<input type="text" class="form-control" placeholder="Nhập giá trị hợp đồng" name="price" value="{{ old('price',@$box->price)  }}">
									<div class="form-control-feedback">
										@if( @$errors->first('price') != null ) <i class="icon-notification2"></i> @endif
									</div>
									<span class="help-block"></span>
								</div>
							</div>

							<div class="form-group row @if( @$errors->first('vat') != null ) has-error  @endif  has-feedback">
								<label class="control-label col-lg-2 ">VAT (%)</label>
								<div class="col-lg-10">
									<input type="text" class="form-control" placeholder="Min: 0, Max: 100" name="vat" value="{{ old('vat',@$box->vat)  }}">
									<div class="form-control-feedback">
										@if( @$errors->first('vat') != null ) <i class="icon-notification2"></i> @endif
									</div>
									<span class="help-block"></span>
								</div>
							</div>

							<div class="form-group row @if( @$errors->first('discount') != null ) has-error  @endif  has-feedback">
								<label class="control-label col-lg-2 ">Chiết khấu (VND)</label>
								<div class="col-lg-10">
									<input type="number" class="form-control" placeholder="Nhập vào giá trị chiết khấu" name="discount" value="{{ old('discount',@$box->discount)  }}">
									<div class="form-control-feedback">
										@if( @$errors->first('discount') != null ) <i class="icon-notification2"></i> @endif
									</div>
									<span class="help-block"></span>
								</div>
							</div> -->


							<div class="form-group row has-feedback @if( @$errors->first('note') != null ) has-error  @endif ">
								<label class="control-label col-lg-2 ">Ghi chú</label>
								<div class="col-lg-10">
									<textarea class="form-control" name="note" placeholder="Ghi chú..." rows="3">{{ old('note',@$box->note) }}</textarea>
									<div class="form-control-feedback">
										@if( @$errors->first('note') != null )<i class="icon-notification2"></i> @endif
									</div>
									<span class="help-block"></span>
								</div>
							</div>
						</div>
					</div>

					<legend class="text-bold">
					Thiết bị sử dụng
					</legend>
					<div class="row">
						<div class="col-md-3">
							<div class="form-group has-feedback @if( @$errors->first('uses') != null ) has-error  @endif ">
								<label class="control-label">Hình thức</label>
								<select name="uses" id="uses" 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>
									<option @if(old('uses',@$box->type_payment) == "other" ) selected="selected" @endif value="other">Khách hàng</option>
								</select>
								<div class="form-control-feedback">
									@if( @$errors->first('note') != null )<i class="icon-notification2"></i> @endif
								</div>
								<span class="help-block"></span>
							</div>
						</div>
						<div class="col-md-3">
							<div class="form-group has-feedback @if( @$errors->first('deviceId') != null ) has-error  @endif ">
								<label class="control-label">DeviceId</label>
								<input type="text" id="deviceOther" name="deviceId" value="{{ old('deviceId', @$box->deviceId) }}" class="form-control" placeholder="Nhập vào deviceId">

								<div id="store" class="hide">
									<select name="deviceId" disabled id="" class="form-control select2"  data-allow-clear="true"  data-placeholder="Chọn device">
										<option value="">Chọn device</option>
										@foreach($devices as $device)
										<option @if(old('deviceId',@$box->deviceId) == $device->deviceId) selected="selected" @endif value="{{$device->deviceId}}">{{$device->name}} - {{ $device->deviceId }} (@if($device->user_id) Kho {{$device->agent->name}} @else Kho Tổng @endif)</option>
										@endforeach
									</select>
								</div>
								
							</div>
						</div>
						<div class="col-md-3">
							<div class="form-group has-feedback @if( @$errors->first('flatform') != null ) has-error  @endif ">
								<label class="control-label">Loại thiết bị</label>
								<select name="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-3">
							<div class="form-group has-feedback @if( @$errors->first('deposit') != null ) has-error  @endif ">
								<label class="control-label">Đặt cọc</label>
								<input type="text" name="deposit" class="form-control" value="{{ old('deposit', @$box->deposit) }}" placeholder="Nhập vào số tiền đặt cọc nếu có">
							</div>
						</div>
					</div>
				</fieldset>

				<div class="text-right">
					<button type="submit" class="btn btn-primary">{{ ( isset($id) ? 'Cập nhật' :'Thêm mới') }} <i class="icon-file-plus position-right"></i></button>
				</div>
			</form>
		</div>
	</div>

	<!-- Vertical form modal -->
	<div id="modal_form_vertical" class="modal modal-vertical-centered" tabindex="-1"  style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h5 class="modal-title">Thêm mới khách hàng</h5>
				</div>

				<form action="#">
					<div class="modal-body">
						@if( \Auth::user()->type == 'admin' )
						<div class="form-group">
							<div class="row">
								<div class="col-sm-12">
									<label class="">Đại lý</label>
									<select id="customer_id" class="form-control select2" data-placeholder="Chọn đại lý">
										<option value="">Chọn đại lý</option>
										@foreach($resellers as $re)
										<option value="{{ $re->id }}" >{{ $re->name }}</option>
										@endforeach
									</select>
								</div>
							</div>
						</div>
						@endif

						<div class="form-group">
							<div class="row">
								<div class="col-sm-6">
									<label>Họ tên</label>
									<input type="text" name="fullname" id="fullname" placeholder="Ex. Nguyễn Văn Thắng" class="form-control">
								</div>

								<div class="col-sm-6">
									<label>Địa chỉ</label>
									<input type="text" name="address" id="address" placeholder="Ex. Nguyễn Hoàng Tôn, Tây Hồ, Hà Nội" class="form-control">
								</div>
							</div>
						</div>

						<div class="form-group">
							<div class="row">
								<div class="col-sm-6">
									<label>Email</label>
									<input type="text" name="fullname" id="email" placeholder="Ex. daihc2011@gmail.com" class="form-control">
								</div>

								<div class="col-sm-6">
									<label>Điện thoại</label>
									<input type="text" name="address" id="phone" placeholder="Ex. 0976805225" class="form-control">
								</div>
							</div>
						</div>
					</div>

					<div class="modal-footer">
						<div class="form-group row">
							<button type="button" class="btn btn-link" data-dismiss="modal">Huỷ</button>
							<button type="submit" class="btn btn-primary" id="add">Thêm mới</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
	<!-- /vertical form modal -->
@endsection

@push('styles')
	<style>
		.modal-vertical-centered {
	         display: flex;
	         align-items: center;
	    }
		.form-group{
			margin-bottom: 0px;
		}
		.modal .form-group{
			margin-bottom: 10px !important;
		}
		.legend{
			margin-bottom: 10px;
		}
		.autocomplete {
			/*the container must be positioned relative:*/
			position: relative;
			display: inline-block;
		}
		.autocomplete-items {
			position: absolute;
			border: 1px solid #d4d4d4;
			border-bottom: none;
			border-top: none;
			z-index: 99;
			/*position the autocomplete items to be the same width as the container:*/
			top: 100%;
			left: 0;
			right: 0;
			margin-left: 10px;
    		margin-right: 10px;
    		margin-top: -7px;
		}
		.autocomplete-items div {
			padding: 10px;
			cursor: pointer;
			background-color: #fff;
			border-bottom: 1px solid #d4d4d4;
		}
		.autocomplete-items div:hover {
			/*when hovering an item:*/
			background-color: #e9e9e9;
		}
		.autocomplete-active {
			/*when navigating through the items using the arrow keys:*/
			background-color: DodgerBlue !important;
			color: #ffffff;
		}
	</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>
		$(document).ready(function() {
			$('.select2').select2();

			$('#uses').on("select2:select", function(e) { 
				if( $(this).val() == 'coc' || $(this).val() == 'muon'){
					$('#store').removeClass('hide');
					$('#deviceOther').addClass('hide');
					$('#deviceOther').attr('disabled', true);
					$('#store select').attr('disabled', false);
				}else {
					$('#store').addClass('hide');
					$('#deviceOther').removeClass('hide');
					$('#store select').attr('disabled', true);
					$('#deviceOther').attr('disabled', false);
				}
			});

			$('#generate_code').click(function(e) {
				e.preventDefault();
				$.post('{{ route("backend.box.createCode") }}', { _token: _token}, function(result){
					$('#code').val(result.code);
				});
			});

			$('#add_customer').click(function(e) {
				e.preventDefault();
			});

			$('#add').click(function(e) {
				e.preventDefault();

				var fullname	= $('#fullname').val();
				var address 	= $('#address').val();
				var phone 		= $('#phone').val();
				var email		= $('#email').val();

				if(!fullname || !address ) alert('Bạn phải nhập vào đầy đủ thông tin');

				var customer_id = null;
				@if(\Auth::user()->type == 'admin')
				customer_id = $('#customer_id').val();
				if(!customer_id) alert('Bạn chưa chọn đại lý');
				@endif

				if(fullname && address){
					$('body').block({
			            message: '<i class="icon-spinner4 spinner"></i>',
			            overlayCSS: {
			                backgroundColor: '#1B2024',
			                opacity: 0.85,
			                cursor: 'wait'
			            },
			            css: {
			                border: 0,
			                padding: 0,
			                backgroundColor: 'none',
			                color: '#fff'
			            }
			        });

					var url = '{{ route("backend.customer.postNew") }}';
			        data = {fullname: fullname, address: address, _token: _token, customer_id: customer_id, email: email, phone: phone};

				  	$.post(url, data, function(result){
				  		$('#modal_form_vertical').modal('toggle');
	                	$('body').unblock();
	                	$('#list_user').prepend('<option value="'+result.id+'" selected="selected">'+result.fullname+" - "+result.address+'</option>');
	                	$('.select2').select2();
	                });
				}

			});
		});

		function autocomplete(inp, arr) {
		  /*the autocomplete function takes two arguments,
		  the text field element and an array of possible autocompleted values:*/
		  var currentFocus;
		  /*execute a function when someone writes in the text field:*/
		  inp.addEventListener("input", function(e) {
		      	var a, b, i, val = this.value;

		      	/*close any already open lists of autocompleted values*/
		      	closeAllLists();
		      	if (!val) { return false;}
		      	currentFocus = -1;
		      	/*create a DIV element that will contain the items (values):*/
		      	a = document.createElement("DIV");
		      	a.setAttribute("id", this.id + "autocomplete-list");
		      	a.setAttribute("class", "autocomplete-items");
		      	/*append the DIV element as a child of the autocomplete container:*/
		      	this.parentNode.appendChild(a);
		      	/*for each item in the array...*/
		      	var url_search = "{{ route('backend.box.address') }}";
		      	var term = {term : val, _type : 'query'};
		      	var _token 	= $('meta[name="csrf-token"]').attr('content');
		      	var data = { _token: _token, term : term};

				$.post(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].address.substr(0, val.length) + "</strong>";
						  b.innerHTML += arr[i].address.substr(val.length);
						  b.innerHTML += "<input type='hidden' value='" + arr[i].address + "'>";
						  b.addEventListener("click", function(e) {
						      inp.value = this.getElementsByTagName("input")[0].value;
						      closeAllLists();
						  });
						  a.appendChild(b);
						// }
					}
				});
                // text: item.address,
                // id: item.address
				
		  });
		  /*execute a function presses a key on the keyboard:*/
		  inp.addEventListener("keydown", function(e) {
		      var x = document.getElementById(this.id + "autocomplete-list");
		      if (x) x = x.getElementsByTagName("div");
		      if (e.keyCode == 40) {
		        /*If the arrow DOWN key is pressed,
		        increase the currentFocus variable:*/
		        currentFocus++;
		        /*and and make the current item more visible:*/
		        addActive(x);
		      } else if (e.keyCode == 38) { //up
		        /*If the arrow UP key is pressed,
		        decrease the currentFocus variable:*/
		        currentFocus--;
		        /*and and make the current item more visible:*/
		        addActive(x);
		      } else if (e.keyCode == 13) {
		        /*If the ENTER key is pressed, prevent the form from being submitted,*/
		        e.preventDefault();
		        if (currentFocus > -1) {
		          /*and simulate a click on the "active" item:*/
		          if (x) x[currentFocus].click();
		        }
		      }
		  });
		  function addActive(x) {
		    /*a function to classify an item as "active":*/
		    if (!x) return false;
		    /*start by removing the "active" class on all items:*/
		    removeActive(x);
		    if (currentFocus >= x.length) currentFocus = 0;
		    if (currentFocus < 0) currentFocus = (x.length - 1);
		    /*add class "autocomplete-active":*/
		    x[currentFocus].classList.add("autocomplete-active");
		  }
		  function removeActive(x) {
		    /*a function to remove the "active" class from all autocomplete items:*/
		    for (var i = 0; i < x.length; i++) {
		      x[i].classList.remove("autocomplete-active");
		    }
		  }
		  function closeAllLists(elmnt) {
		    /*close all autocomplete lists in the document,
		    except the one passed as an argument:*/
		    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]);
		      }
		    }
		  }
		  /*execute a function when someone clicks in the document:*/
		  document.addEventListener("click", function (e) {
		      closeAllLists(e.target);
		  });
		}
		
		var countries = ["Cầu giấy"];
		autocomplete(document.getElementById("inputAddress"), countries);

	</script>
@endpush