@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">
						<div class="row">
							<div class="col-md-6">
								<a href="{{ route('backend.box.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;
								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">
								<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>
								<a target="_blank" href="{{ route('backend.invoice.get', $box->invoice->id) }}" style="margin-right: 20px;" class="pull-right text-info" data-popup="tooltip" title="Xem hoá đơn"><i class="icon-coins position-left"></i></a>
								<a class="pull-right" data-popup="tooltip" style="margin-right: 20px;" title="Click vào để xem lịch sử gia hạn"  style="color:blue;" href="{{ route('backend.box.renewed',$box->id) }}"><i class="icon-rotate-cw position-left"></i></a>
								<a class="pull-right text-success" data-popup="tooltip" style="margin-right: 20px;" title="Danh sách thiết bị"  style="color:blue;" href="{{ route('backend.device.list', $box->code) }}"><i class="icon-mobile position-left"></i></a>
							</div>
						</div>
					
					</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-10">
									<input type="text" class="form-control" readonly 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>

							<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-12 col-md-10">
									<select name="customer_id" id="list_user" disabled 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>

							<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('date_used') != 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" @if( Auth::user()->hasRole('resellers') ) disabled="true" @endif placeholder="Nhập giá trị hợp đồng" name="date_used" value="{{ old('date_used',date('Y-m-d', strtotime($box->date_used)) ) }}">
									<div class="form-control-feedback">
										@if( @$errors->first('date_used') != null ) <i class="icon-notification2"></i> @endif
									</div>
									<span class="help-block"></span>
								</div>
							</div>

							<div class="form-group row @if( @$errors->first('expired_date') != null ) has-error  @endif  has-feedback">
								<label class="control-label col-lg-2 ">Hạn sử dụng</label>
								<div class="col-lg-10">
									<input type="date" class="form-control" @if( Auth::user()->hasRole('resellers') ) disabled="true" @endif placeholder="Nhập giá trị hợp đồng" name="expired_date" value="{{ old('expired_date',date('Y-m-d', strtotime($box->expired_date)))  }}">
									<div class="form-control-feedback">
										@if( @$errors->first('expired_date') != null ) <i class="icon-notification2"></i> @endif
									</div>
									<span class="help-block"></span>
								</div>
							</div>

							<div class="form-group row has-feedback ">
								<label class="control-label col-lg-2 ">Token API</label>
								<div class="col-lg-10">
									<textarea class="form-control" readonly>{{ @$_token }}</textarea>
									<span class="help-block"></span>
								</div>
							</div>

						</div>

						<div class="col-md-6">
							<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 }}" @if($ins->id == old('installed',@$box->installed) ) selected="selected" @endif>{{ $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" @if( Auth::user()->hasRole('resellers') ) disabled="true" @endif 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 class="form-group row has-feedback @if( @$errors->first('launcher') != null ) has-error  @endif ">
								<label class="control-label col-lg-2 ">Launcher</label>
								<div class="col-lg-10">
									<select name="launcher" class="form-control select2"  data-allow-clear="true"  data-placeholder="Chọn màn hình chính">
										@foreach( config('vod.launchers') as $la => $name )
										<option value="{{$la}}" @if(old('launcher',@$box->launcher) == $la ) selected="selected" @endif>{{$name}}</option>
										@endforeach
									</select>
									<div class="form-control-feedback">
										@if( @$errors->first('launcher') != 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ú...">{{ 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 class="form-group row has-feedback @if( @$errors->first('note') != null ) has-error  @endif ">
								<label class="control-label col-lg-2 ">Options</label>
								<div class="col-lg-10">
									<div style="display: flex;" class="list-switch">
										<div class="checkbox checkbox-switchery">
											<label>
												<input type="checkbox" name="options[app]" data-name="app" class="switchery-primary" value="1" @if(@$options['app'] == 1) checked="checked" @endif>	
												Apps
											</label>
										</div>
										<div class="checkbox checkbox-switchery">
											<label>
												<input type="checkbox" name="options[service]" data-name="service" class="switchery-primary" value="1" @if(@$options['service'] == 1) checked="checked" @endif>	
												Services
											</label>
										</div>
										<div class="checkbox checkbox-switchery">
											<label>
												<input type="checkbox" name="options[explore]" data-name="explore" class="switchery-primary" value="1" @if(@$options['explore'] == 1) checked="checked" @endif>	
												Explore
											</label>
										</div>
										<div class="checkbox checkbox-switchery">
											<label>
												<input type="checkbox" name="options[netflix]" data-name="netflix" class="switchery-primary" value="1" @if(@$options['netflix'] == 1) checked="checked" @endif>	
												Netflix
											</label>
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>
				</fieldset>
				<div class="clearfix"></div>
				<fieldset class="content-group">
					<legend class="text-bold text-center">
					Cấu hình dịch vụ
					</legend>
					<div class="form-group">
						<label class="control-label col-lg-2 text-semibold">&nbsp; </label>
						<div class="col-lg-10">
							<div style="display: flex;" class="list-switch">
								@foreach($cates as $cate)
								<div class="checkbox checkbox-switchery">
									<label>
										<input type="checkbox" name="options[{{$cate->id}}]" data-name="{{$cate->id}}" data-action="services" class="switchery-primary" value="1" @if(@$options[$cate->id] == 1) checked="checked" @endif>	
										{{ $cate->name }}
									</label>
								</div>
								@endforeach
							</div>
						</div>
					</div>
				</fieldset>
				@if(!$box->canceled)
				<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>
				@endif
			</form>
		</div>
	</div>
</div>
@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;
		}
		.list-switch > div{
			margin-right: 20px;
		}
		.list-switch{
			align-items: flex-end;
		    flex-direction: row;
		    flex-wrap: wrap;
		}
	</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();

			var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery-primary'));
			var contract_code = '{{$box->code}}';
			var urlOptionService = "{{ route('backend.box.optionService') }}";

			elems.forEach(function(html) {
			  	var switchery = new Switchery(html);
			  	html.addEventListener('click', function() {
			  		$('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 name = $(this).attr('data-name');

				  	data = {name:name, code : contract_code, _token: _token};

				  	$.post(urlOptionService, data, function(result){
	                	$('body').unblock();
	                });
				});
			});

			$('#show-adDevice').click(function() {
				$('#add-device').removeClass('hide');
			});

			$('#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