@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.device.list', $box->code) }}" 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('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',@$device->flatform) == "tv-box" ) selected="selected" @endif value="tv-box">TV box</option>
									<option @if(old('flatform',@$device->flatform) == "tv" ) selected="selected" @endif value="tv">Smart Tivi</option>
									<option @if(old('flatform',@$device->flatform) == "phone" ) selected="selected" @endif value="phone">Phone</option>
									<option @if(old('flatform',@$device->flatform) == "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', $device->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', $device->mes) }}" placeholder="Nhập vào vị trí lắp đặt">
							</div>
						</div>
						<div class="col-md-2">
							<div class="form-group has-feedback @if( @$errors->first('mes') != null ) has-error  @endif ">
								<label class="control-label">&nbsp;</label>
								<button type="submit" class="btn btn-primary form-control">{{ ( isset($id) ? 'Cập nhật' :'Thêm mới') }} <i class="icon-file-plus position-right"></i></button>
							</div>
						</div>
					</div>
				</fieldset>

			</form>
		</div>
	</div>

</div>
@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