@extends('layouts.backend')

@section('title')
	@lang('backend.slider_views.page_title')
@endsection

@section('styles')
	{!! Html::style(asset('assets/back/css/dropzone.css')) !!}
@endsection

@section('content')
<header class="main-header clearfix">
	<ol class="breadcrumb">
		<li>
            <i class="fa fa-image"></i>
			<a href="{{route('posts.index')}}">{{$post->title}}</a>
		</li>
		<li>
			<a href="{{route('slider.index', $post->id)}}">
			@lang('backend.slider_views.page_title')</a>
		</li>
	</ol>
</header>
<div class="row">
	<div class="col-md-12">
		<article class="widget">
			<header class="widget__header">
				<h3 class="widget__title">@lang('backend.slider_views.up')</h3>
				<div class="widget__config" style="margin:0">
					<a data-toggle="tooltip" title="@lang('backend.buttons.back')" 
					href="{{route('slider.index', $post->id)}}">
					<i class="fa fa-mail-reply" aria-hidden="true"></i></a>
				</div>
			</header>
			@include('backend.partials.success')
			@include('backend.partials.errors')
			<div class="widget__content">
				{!! Form::open([
					'route' => ['slider.save'],
            		'method' => 'POST',
            		'id' => 'my-dropzone',
            		'files' => 'true',
            		'class' => 'dropzone',
            	]) !!}
            		{!! Form::hidden('post_id', $post->id) !!}
					<div class="dz-message" style="height:200px;">
                        @lang('backend.ph.dropfiles')
                    </div>
                    <div class="dropzone-previews"></div>
					<button class="btn btn-dark" type="submit" id="submit">
						<!-- class="submit_form" -->
						@lang('backend.buttons.upload')
					</button>
					<div class="clearfix"></div>
				{!! Form::close() !!}
			</div>
		</article><!-- /widget -->
	</div>
</div>
@endsection
@section('scripts')
{!! Html::script(asset('assets/back/js/dropzone.js')) !!}
<script>
    Dropzone.options.myDropzone = {
        autoProcessQueue: false, // para no subir los archivos automaticamente
        uploadMultiple: true,
        maxFilezise: 10,
        parallelUploads:4,
        maxFiles: 4,
        
        init: function() {
            var submitBtn = document.querySelector("#submit");
            myDropzone = this;
            
            submitBtn.addEventListener("click", function(e){
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });
            this.on("addedfile", function(file) {
                //alert("file uploaded");
            });
            
            this.on("complete", function(file) {
                myDropzone.removeFile(file);
            });

            this.on("success", function(data){
            	myDropzone.processQueue.bind(myDropzone);
                //se quitan posibles mensajes de error anteriores
			   	$('#errors').html('');
			   	$('#message-errors').fadeOut();
			   	if(data.xhr.response == '1'){
			   		// se muestran los mensajes de exito
					$("#response .hide-msj").fadeIn();
			   	}else{
			   		// se quitan los posibles mensajes de exito
		   			$(".hide-msj").fadeOut();
		   			// se muestra el mensaje de error del file
		   			$('#errors').html('');
		   			$('#message-errors').fadeIn();
		   			$('#errors').html(data.xhr.response);
			   	}
            });

            this.on("error", function(data) {
            	//console.log(data.xhr.response);
            	// se quitan los posibles mensajes de exito
	   			$(".hide-msj").fadeOut();
	   			// se muestra el mensaje de error del file
	   			$('#errors').html('');
	   			$('#message-errors').fadeIn();
	   			$('#errors').html("¡Error!");
            });
        }
    };
</script>
@endsection