@extends('backend.layout')

@section('content')
	<div class="panel panel-flat">
		<div class="navbar navbar-default navbar-xs label-list" style="padding-right:0px;">
			<p class="navbar-text">
				<a href="{{ route('backend.device.list', $box->code) }}" data-popup="tooltip" title="Danh sách thiết bị"><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>
			</p>
		</div>

		<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 thông tin thiết bị' :'Thêm mới thiết bị') }}
					<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-store position-left"></i></a>
					</legend>
					
					<div class="row">
						<div class="col-md-2">
							<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) == "kho" ) selected="selected" @endif value="kho">Kho</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 {{ old('uses') ==  'other' ? '' : 'hide' }}" placeholder="Nhập vào deviceId">

								<div id="store" class="{{ old('uses') ==  'other' ? 'hide' : '' }}">
									<select name="deviceId" {{ old('uses') ==  'other' ? '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 }} ({{ @$device->mac }}) (@if($device->user_id) Kho {{$device->agent->name}} @else Kho Tổng @endif)</option>
										@endforeach
									</select>
								</div>
								
							</div>
						</div>
						<div class="col-md-2">
							<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-2">
							<div class="form-group has-feedback @if( @$errors->first('address') != null ) has-error  @endif ">
								<label class="control-label">Vị trí lắp đặt</label>
								<input type="text" name="address" class="form-control" value="{{ old('address') }}" placeholder="Nhập vào vị trí lắp đặt">
							</div>
						</div>
						<div class="col-md-3">
							<div class="form-group has-feedback @if( @$errors->first('mes') != null ) has-error  @endif ">
								<label class="control-label">Lời chào</label>
								<input type="text" name="mes" class="form-control" value="{{ old('mes') }}" placeholder="Nhập vào vị trí lắp đặt">
							</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>

</div>
	<!-- /vertical form modal -->
@endsection

@push('styles')
	<style>
		@media screen and (max-width: 768px){
			.label-list .navbar-right{
				position: absolute;
				top: 0px;
				right: -10px;
			}
		}
		.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>
		$(document).ready(function() {
			$('.select2').select2();

			$('#uses').on("select2:select", function(e) { 
				if( $(this).val() == 'kho'){
					$('#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);
				}
			});
		});
	</script>
@endpush