@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">
					{{ ( isset($account) ? 'Chỉnh sửa quảng cáo' :'Thêm mới quảng cáo') }}
					<a href="" class="pull-right">Danh sách quảng cáo</a>
					</legend>

					<div class="col-md-12">
                        <div class="form-group @if( @$errors->first('title') != null ) has-error  @endif  has-feedback">
							<label class="control-label col-lg-2 text-semibold">Tiêu đề</label>
							<div class="col-lg-10">
								<input type="text"  autocomplete="off" class="form-control" placeholder="Nhập vào tiêu đề quảng cáo" name="title" value="{{ old('title',@$ads->title)  }}">
								<div class="form-control-feedback">
									@if( @$errors->first('title') != null ) <i class="icon-notification2"></i> @endif
								</div>
								<span class="help-block">{{ @$errors->first('title') }}</span>
							</div>
						</div>
                        <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 quảng cáo</label>
                            <div class="col-lg-10">
                                <select name="type" id="type"  class="form-control select2" data-placeholder="Chọn loại quảng cáo">
                                    <option value="">Chọn loại quảng cáo</option>
                                    <option value="image" @if(@$ads->type=='image') selected="selected"  @endif>Hình ảnh</option>
                                    <option value="video" @if(@$ads->type=='video') selected="selected"  @endif>Video</option>
                                </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 @if( @$errors->first('link_ads') != null ) has-error  @endif  has-feedback">
							<label class="control-label col-lg-2 text-semibold">Đường dẫn</label>
							<div class="col-lg-10">
								<input type="text"  autocomplete="off" class="form-control" placeholder="Nhập vào đường dẫn quảng cáo" name="link_ads" value="{{ old('link_ads',@$ads->link_ads)  }}" >
								<div class="form-control-feedback">
									@if( @$errors->first('link_ads') != null ) <i class="icon-notification2"></i> @endif
								</div>
								<span class="help-block">{{ @$errors->first('link_ads') }}</span>
							</div>
						</div> 

						<div class="form-group @if( @$errors->first('count_click') != null ) has-error  @endif  has-feedback">
							<label class="control-label col-lg-2 text-semibold">Tổng click</label>
							<div class="col-lg-10">
								<input type="number"  autocomplete="off" class="form-control" placeholder="" name="count_click" value="{{ old('count_click',@$ads->count_click)  }}" >
								<div class="form-control-feedback">
									@if( @$errors->first('count_click') != null ) <i class="icon-notification2"></i> @endif
								</div>
								<span class="help-block">{{ @$errors->first('count_click') }}</span>
							</div>
						</div> 

                        <div class="form-group @if( @$errors->first('display_order') != null ) has-error  @endif  has-feedback">
							<label class="control-label col-lg-2 text-semibold">Thứ tự hiển thị</label>
							<div class="col-lg-10">
								<input type="text"  autocomplete="off" class="form-control" placeholder="Nhập vào thứ tự hiển thị quảng cáo" name="display_order" value="{{ old('display_order',@$ads->display_order)  }}" >
								<div class="form-control-feedback">
									@if( @$errors->first('display_order') != null ) <i class="icon-notification2"></i> @endif
								</div>
								<span class="help-block">{{ @$errors->first('display_order') }}</span>
							</div>
						</div>  
                        <div class="form-group has-feedback @if( @$errors->first('type') != null ) has-error  @endif ">
                            <label class="control-label col-lg-2 text-semibold">Vị trí quảng cáo</label>
                            <div class="col-lg-10">
                                <select  name="positions" class="form-control select2" data-placeholder="Chọn loại quảng cáo">
                                    <option value="">Chọn vị trí quảng cáo</option>
                                    {{-- <option value="desktop" @if (@$ads->positions == 'desktop') selected @endif>Quảng cáo cho desktop</option>
                                    <option value="mobile" @if (@$ads->positions == 'mobile') selected @endif>Quảng cáo cho mobile</option>
                                    <option value="video" @if (@$ads->positions == 'video') selected @endif>Quảng cáo trong video</option> --}}
                                    <option value="banner_doc" @if (@$ads->positions == 'banner_doc') selected @endif>Quảng cáo banner dọc (160x600)</option>
                                    <option value="banner_ngang" @if (@$ads->positions == 'banner_ngang') selected @endif>Quảng cáo banner ngang (730x90) </option>
                                    <option value="banner_popup" @if (@$ads->positions == 'banner_popup') selected @endif>Quảng cáo banner giữa (600x400)</option>
                                    <option value="banner_ngang_bottom" @if (@$ads->positions == 'banner_ngang_bottom') selected @endif>Quảng cáo banner ngang ở dưới (730x90)</option>
                                    <option value="banner_ngang_top" @if (@$ads->positions == 'banner_ngang_top') selected @endif>Quảng cáo banner ngang ở trên (730x90)</option>
                                </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 @if( @$errors->first('content') != null ) has-error  @endif  has-feedback  @if(old('type',@$ads->type) != 'image') hidden @endif" id="content_image">
                            <label class="control-label col-lg-2 text-semibold">Hình ảnh quảng cáo</label>
                            <div class="col-lg-10">
                                <div action="{{ route('backend.file.uploadImage') }}" class="dropzone" id="upload-image" style="min-height:220px;"></div>
                                <input type="hidden" name="content" value="{{ old('content',@$ads->content) }}" >
                                <div class="form-control-feedback">
                                    @if( @$errors->first('content') != null ) <i class="icon-notification2"></i> @endif
                                </div>
                                <span class="help-block">{{ @$errors->first('content') }}</span>
                            </div>
                        </div>
					</div>  
                    &nbsp;
              
					<div class="col-md-12 @if( @$errors->first('content') != null ) has-error  @endif  has-feedback  @if(old('type',@$ads->type) != 'video') hidden @endif" id="content_video">

                        <legend class="text-bold">
                            Cài đặt video
                        </legend>
                        <div class="form-group @if( @$errors->first('content') != null ) has-error  @endif  has-feedback">
							<label class="control-label col-lg-2 text-semibold">Link video</label>
							<div class="col-lg-10">
								<input type="text"  autocomplete="off" class="form-control" placeholder="Nhập vào đường dẫn video" name="content" value="{{ old('content',@$ads->content)  }}">
								<div class="form-control-feedback">
									@if( @$errors->first('content') != null ) <i class="icon-notification2"></i> @endif
								</div>
								<span class="help-block">{{ @$errors->first('content') }}</span>
							</div>
						</div>
                        <div class="form-group has-feedback @if( @$errors->first('skipable') != null ) has-error  @endif ">
                            <label class="control-label col-lg-2 text-semibold">Bỏ qua video</label>
                            <div class="col-lg-10">
                                <select name="skipable" class="form-control select2" data-placeholder="Bỏ qua video">
                                    <option value="1" @if(@$ads->skipable== 1) selected="selected"  @endif>Có</option>
                                    <option value="0" @if(@$ads->skipable== 0) selected="selected"  @endif>Không</option>
                                </select>
                                <div class="form-control-feedback">
                                    @if( @$errors->first('skipable') != null )<i class="icon-notification2"></i> @endif
                                </div>
                                <span class="help-block">{{ @$errors->first('skipable') }}</span>
                            </div>
                        </div>  
					</div>  
				</fieldset>

				<div class="text-right">
					<button type="submit" class="btn btn-primary">{{ ( isset($ads) ? 'Cập nhật' :'Thêm mới') }} <i class="icon-file-plus position-right"></i></button>
				</div>
			</form>

		</div>
	</div>
@endsection

@push('styles')
	
@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/uploaders/dropzone.min.js')}}"></script>
	<script>
		$('.select2').select2();

        $(document).ready(function() {
			$('#type').change(function(){
		        var type = $(this).val();
		        if(type == 'image'){
		        	$('#content_image').removeClass('hidden');
		        	$('#content_video').addClass('hidden');
		        }else {
		        	$('#content_image').addClass('hidden');
		        	$('#content_video').removeClass('hidden');
		        }
		    });
		});

		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('content',@$ads->content) != null)
		        var mockFile = { 
                    status: Dropzone.ADDED, 
                    url: '{{ url(old("content",@$ads->content)) }}'
                };

		        this.emit("addedfile", mockFile);

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

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

		};

	</script>	
@endpush