@extends('layouts.backBase')

@section('css')
{!! HTML::style('css/back/panel.css') !!}
{!! HTML::style('css/back/homeSlider.css') !!}
{!! HTML::style('css/back/dropZone.min.css') !!}
@stop

@section('body')
{!! HTML::script('js/back/custom.js') !!}
@stop

@section('content')
<h3>Slider</h3>
<hr>

<div id="slider-viewer" class="slider-viewer hidden">
   @include('includes.sliderHome')
   <div style="margin-top: 50px;">
      <button id="close-slider-viewer" class="btn btn-default center-block">Cerrar</button>
   </div>
</div>
<div class="row">
   <div class="col-md-12">
      <div class="btn-group">
         <button class="btn btn-default btn-warning" id="preview"> Vista Previa</button>
         <button type="button" class="btn btn-default dropdown-toggle btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Nuevo Elemento <span class="caret"></span>
         </button>
         <ul class="dropdown-menu">
            <li><a href="#">- Curso</a></li>
            <li><a href="#">- Cita</a></li>
         </ul>
         <span data-toggle="tooltip" data-placement="right" title="Cree un elemento para el slider">
            <i class="fa fa-question-circle" style="font-size: 20px; vertical-align: baseline;"></i>
         </span>
      </div>
   </div>
</div>
<div class="row" style="margin-top: 50px;"></div>
<div class="col-md-12">
   @foreach( $slider as $sliderItem )
   <div class="row well {{ $sliderItem->getType() }}">
      @if ( $sliderItem->getType()=='course' )
      <div class="col-md-7">
         <h3>Tipo: Curso </h3>
         @endif
         @if ( $sliderItem->getType()=='quote' )
         <div class="col-md-12">
            <h3>Tipo: Cita </h3>
            @endif
            <div class="author"><h4>Autor: {{ $sliderItem->getAuthor() }}</h4></div>
            <div class="title1"><h4>Texto1: {{ $sliderItem->getTitle1() }}</h4></div>
            <div class="title2"><h4>Texto2: {{ $sliderItem->getTitle2() }}</h4></div>
            <div class="title3"><h4>Texto3: {{ $sliderItem->getTitle3() }}</h4></div>
            <div class="url"><h4>Url: </h4><a target="_blank" href='{{ $sliderItem->getUrl() }}'>{{ $sliderItem->getUrl() }}</a></div>
         </div>
         <div class="col-md-5 photo">
            <img src='{{ asset( $sliderItem->getPhoto() )}}' class='image-for-viewer img-responsive'>
         </div>
      </div>
      @endforeach
   </div>
   <h1>Zona de subida de fotos</h1>
   {!! Form::open(['route'=> 'file.store', 'method' => 'POST', 'files'=>'true', 'id' => 'my-dropzone' , 'class' => 'dropzone']) !!}
   <div class="dz-message" style="height:200px;">
      Arrastre sus fotos aqui
   </div>
   <div class="dropzone-previews"></div>
   <button type="submit" class="btn btn-success" id="submit">Save</button>
   {!! Form::close() !!}

   <!--{!! Form::open(array('route'=>'panel/social/project/add', 'method'=>'POST', 'files'=>true)) !!}
   {!! Form::label('title1', 'Título 1', ['class' => 'control-label'] ) !!}
   {!! Form::text('title1', 'Prueba', ['class' => 'form-control']) !!}
   {!! Form::submit('Guardar',['class' => 'btn btn-default']) !!}
   {!! Form::close() !!}-->

   @stop
   @section('scripts')
   {!! Minify::javascript('/js/back/form.js')->withFullUrl() !!}
   {!! Minify::javascript('/js/back/dropzone.min.js')->withFullUrl() !!}
   <script>
      $('#preview').click(function () {
         $('#slider-viewer').toggleClass('hidden');
      });
      $('#close-slider-viewer').click(function () {
         $('#slider-viewer').toggleClass('hidden');
      });

      Dropzone.options.myDropzone = {
         autoProcessQueue: false,
         uploadMultiple: true,
         maxFilezise: 10,
         maxFiles: 1,
         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",
                    myDropzone.processQueue.bind(myDropzone)
                    );
         }
      };

   </script>
   @stop