@extends('backend.layout')

@section('content')
	<div class="panel panel-flat">
		<div class="panel-body">
			<form action="" method="POST">
				{{ csrf_field() }}
				<fieldset class="content-group">
					<legend class="text-bold">
					{{ $title }}
					<a href="{{ route('backend.service-business.list') }}" class="pull-right">Danh sách</a>
					</legend>

					<div class="col-md-8">
						<div class="form-group has-feedback @if( @$errors->first('name') != null ) has-error  @endif ">
							<label class="control-label col-lg-2 text-semibold">Tên dịch vụ</label>
							<div class="col-lg-10">
								<input type="text" class="form-control" placeholder="" name="name" value="{{ old('name',@$user->name)  }}">
								<div class="form-control-feedback">
									 @if( @$errors->first('name') != null ) <i class="icon-notification2"></i> @endif
									</div>
								<span class="help-block">{{ @$errors->first('name') }}</span>
							</div>
						</div>

						<div class="form-group has-feedback @if( @$errors->first('code') != null ) has-error  @endif ">
							<label class="control-label col-lg-2 text-semibold">Mã dịch vụ</label>
							<div class="col-lg-10">
								<input type="text" class="form-control" placeholder="" name="code" value="{{ old('code',@$user->code)  }}">
								<div class="form-control-feedback">
									 @if( @$errors->first('code') != null ) <i class="icon-notification2"></i> @endif
									</div>
								<span class="help-block">{{ @$errors->first('code') }}</span>
							</div>
						</div>

						<div class="form-group has-feedback @if( @$errors->first('cate_id') != null ) has-error  @endif ">
							<label class="control-label col-lg-2 text-semibold">Nhóm dịch vụ</label>
							<div class="col-lg-10">
								<select class="form-control select2" name="cate_id">
									<option value="">Chọn nhóm dịch vụ</option>
									@foreach($cates as $cate)
									<option value="{{$cate->id}}" @if( old('cate_id',@$user->cate_id) == $cate->id ) selected="true" @endif>{{ $cate->name }}</option>
									@endforeach
								</select>
								<div class="form-control-feedback">
									 @if( @$errors->first('cate_id') != null ) <i class="icon-notification2"></i> @endif
									</div>
								<span class="help-block">{{ @$errors->first('cate_id') }}</span>
							</div>
						</div>

						<div class="form-group has-feedback @if( @$errors->first('user_id') != null ) has-error  @endif ">
							<label class="control-label col-lg-2 text-semibold">Đại lý</label>
							<div class="col-lg-10">
								<select class="form-control select2" name="user_id" @if(\Auth::user()->hasRole('resellers') ) readonly="true" @endif>
									<option value="">Chọn đại lý</option>
									@foreach($users as $agent)
									<option value="{{$agent->id}}" @if( old('user_id',@$user->user_id) == $agent->id ||  \Auth::user()->id == $agent->id) selected="true" @endif>{{ $agent->name }}</option>
									@endforeach
								</select>
								<div class="form-control-feedback">
									 @if( @$errors->first('user_id') != null ) <i class="icon-notification2"></i> @endif
									</div>
								<span class="help-block">{{ @$errors->first('user_id') }}</span>
							</div>
						</div>

						<div class="form-group has-feedback @if( @$errors->first('price') != null ) has-error  @endif ">
							<label class="control-label col-lg-2 text-semibold">Giá dịch vụ</label>
							<div class="col-lg-10">
								<input type="text" class="form-control" placeholder="" name="price" value="{{ old('price',@$user->price)  }}">
								<div class="form-control-feedback">
									 @if( @$errors->first('price') != null ) <i class="icon-notification2"></i> @endif
									</div>
								<span class="help-block">{{ @$errors->first('price') }}</span>
							</div>
						</div>

						<div class="form-group has-feedback @if( @$errors->first('contact') != null ) has-error  @endif ">
							<label class="control-label col-lg-2 text-semibold">Liên hệ</label>
							<div class="col-lg-10">
								<input type="text" class="form-control" placeholder="" name="contact" value="{{ old('contact',@$user->contact)  }}">
								<div class="form-control-feedback">
									 @if( @$errors->first('contact') != null ) <i class="icon-notification2"></i> @endif
									</div>
								<span class="help-block">{{ @$errors->first('contact') }}</span>
							</div>
						</div>

						<div class="form-group has-feedback @if( @$errors->first('description') != null ) has-error  @endif ">
							<label class="control-label col-lg-2 text-semibold">Mô tả</label>
							<div class="col-lg-10">
								<textarea type="text" class="form-control" rows="10" placeholder="Ex. Nhập mô tả ở đây" name="description">{{ old('description',@$user->description)  }}</textarea>
								<div class="form-control-feedback">
									@if( @$errors->first('description') != null )<i class="icon-notification2"></i> @endif
								</div>
								<span class="help-block">{{ @$errors->first('description') }}</span>
							</div>
						</div>
					</div>

					<div class="col-md-4">
						<div class="form-group @if( @$errors->first('image') != null ) has-error  @endif  has-feedback">
							<div class="col-lg-12">
								<div action="{{ route('backend.file.uploadImage') }}" class="dropzone" id="upload-image" style="min-height:220px;"></div>
								<input type="hidden" name="image" value="{{ old('image',@$user->image) }}" >
								<div class="form-control-feedback">
									@if( @$errors->first('image') != null ) <i class="icon-notification2"></i> @endif
								</div>
								<span class="help-block">{{ @$errors->first('image') }}</span>
							</div>
						</div>

						<div class="form-group @if( @$errors->first('qr') != null ) has-error  @endif  has-feedback">
							<div class="col-lg-12">
								<div action="{{ route('backend.file.uploadImage') }}" class="dropzone" id="upload-qr" style="min-height:220px;"></div>
								<input type="hidden" name="qr" value="{{ old('qr',@$user->qr) }}" >
								<div class="form-control-feedback">
									@if( @$errors->first('qr') != null ) <i class="icon-notification2"></i> @endif
								</div>
								<span class="help-block">{{ @$errors->first('qr') }}</span>
							</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>
@endsection

@push('styles')
	<style type="text/css">
		select[readonly].select2 + .select2-container {
		  pointer-events: none;
		  touch-action: none;

		  .select2-selection {
		    background: #eee;
		    box-shadow: none;
		  }

		  .select2-selection__arrow,
		  .select2-selection__clear {
		    display: none;
		  }
		}
		.dz-image img{
			max-width: 300px;
			height: auto;
			object-fit: contain;
		}
		.dz-details{
			display: none;
		}
		.dz-remove{
			margin-top: 5px !important;
		}
	</style>
@endpush

@push('scripts')
	<script src="{{ URL::asset('backend/global_assets/js/plugins/uploaders/dropzone.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script>
		$('.select2').select2();
		Dropzone.prototype.defaultOptions.dictRemoveFile = "Xoá";
		Dropzone.options.uploadImage = {
			    paramName: "file", // The name that will be used to transfer the file
			    maxFilesize: 1, // MB
			    maxFiles: 1,
			    acceptedFiles: 'image/*',
			    addRemoveLinks: true,
			    dictDefaultMessage: 'Click vào đây để tải lên hình ảnh',
			    autoProcessQueue: true,
			    headers: {
			        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			    },
			    init: function() {
			        this.on('addedfile', function(file){
			            if (this.fileTracker) {
			            this.removeFile(this.fileTracker);
			        }
			            this.fileTracker = file;
			        });

			        @if(old('image',@$user->image) != null)
			        var mockFile = { 
	                    status: Dropzone.ADDED, 
	                    url: '{{ url(old("image",@$user->image)) }}'
	                };

			        this.emit("addedfile", mockFile);

	                // And optionally show the thumbnail of the file:
	                this.emit("thumbnail", mockFile, '{{ url(old("image",@$user->image)) }}');

	                this.files.push(mockFile);
			        @endif
			    },
			    success: function (file, response) {
			        $('input[name=image]').val(response.file);
			    }
			};

		Dropzone.options.uploadQr = {
			    paramName: "file", // The name that will be used to transfer the file
			    maxFilesize: 1, // MB
			    maxFiles: 1,
			    acceptedFiles: 'image/*',
			    addRemoveLinks: true,
			    dictDefaultMessage: 'Click vào đây để tải lên qr',
			    autoProcessQueue: true,
			    headers: {
			        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			    },
			    init: function() {
			        this.on('addedfile', function(file){
			            if (this.fileTracker) {
			            this.removeFile(this.fileTracker);
			        }
			            this.fileTracker = file;
			        });

			        @if(old('qr',@$user->qr) != null)
			        var mockFile = { 
	                    status: Dropzone.ADDED, 
	                    url: '{{ url(old("qr",@$user->qr)) }}'
	                };

			        this.emit("addedfile", mockFile);

	                // And optionally show the thumbnail of the file:
	                this.emit("thumbnail", mockFile, '{{ url(old("qr",@$user->qr)) }}');

	                this.files.push(mockFile);
			        @endif
			    },
			    success: function (file, response) {
			        $('input[name=qr]').val(response.file);
			    }
			};
	</script>
@endpush