@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.package.list') }}" class="pull-right">Danh sách</a>
					</legend>
					
					<div class="form-group has-feedback @if( @$errors->first('type') != null ) has-error  @endif ">
						<label class="control-label col-lg-2 text-semibold">Loại hướng dẫn</label>
						<div class="col-lg-10">
							<select class="form-control" name="type" required>
								<option value="">Chọn loại</option>
								@foreach(config('itv.type_intro') as $type => $text)
								<option value="{{$type}}" @if(old('type', @$user->type) == $type) selected @endif >{{$text}}</option>
								@endforeach
							</select>
							<div class="form-control-feedback">
								@if( @$errors->first('type') != null )<i class="icon-notification2"></i> @endif
							</div>
							<span class="help-block">{{ @$errors->first('type') }}</span>
						</div>
					</div>

					<div class="form-group has-feedback @if( @$errors->first('value') != null ) has-error  @endif ">
						<label class="control-label col-lg-2 text-semibold">Source</label>
						<div class="col-lg-10">
							<input type="text" class="form-control" required placeholder="Nhập vào đường dẫn" name="value" value="{{ old('source',@$user->value)  }}" required>
							<div class="form-control-feedback">
								 @if( @$errors->first('value',@$user->value) != null ) <i class="icon-notification2"></i> @endif
								</div>
							<span class="help-block">{{ @$errors->first('value') }}</span>
						</div>
					</div>

					<div class="form-group has-feedback @if(@$user->type == 'video') hidden @endif" id="upload">
						<label class="control-label col-lg-2 text-semibold">Ảnh mô tả</label>
						<div class="col-lg-10">
							<div action="{{ route('backend.guide.upload') }}" class="dropzone" id="upload-image" style="min-height:220px;"></div>
						</div>
					</div>

				</fieldset>

				<div class="text-right">
					<button type="submit" class="btn btn-primary">{{ @$id != null ? '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">
		.dz-image img{
			max-width: 150px;
		}
	</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/ui/moment/moment.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
	<script>

		$(document).ready(function() {
			$('select[name=type]').change(function() {
				var type = $(this).val();
				if(type != 'video')
				{
					$('#upload').removeClass('hidden');
				} else {
					$('#upload').addClass('hidden');
				}

				$('input[name=source]').val('');
			});
		});
		// document.addEventListener('DOMContentLoaded', function() {
		    // ------------------------------------
		    Dropzone.options.uploadImage = {
			    paramName: "file", // The name that will be used to transfer the file
			    maxFilesize: 10, // 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('value', @$user->value) != null)
			        var mockFile = { 
	                    status: Dropzone.ADDED, 
	                    url: '{{ url(old("value", @$user->value)) }}'
	                };

			        this.emit("addedfile", mockFile);

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

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

			};
		// });
	</script>
@endpush