{% extends 'fmBundle::layout.html.twig' %}

{% block stylesheets %}
    <!-- Force latest IE rendering engine or ChromeFrame if installed -->
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <![endif]-->
    <link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
    <link rel="stylesheet" href="{{ asset('css/jqueryupload/jquery.fileupload.css')}}">
    <link rel="stylesheet" href="{{ asset('css/jqueryupload/jquery.fileupload-ui.css')}}">
    
    <noscript><link rel="stylesheet" href="{{ asset('css/jqueryupload/jquery.fileupload-noscript.css')}}"></noscript>
    <noscript><link rel="stylesheet" href="{{ asset('css/jqueryupload/jquery.fileupload-ui-noscript.css')}}"></noscript>
{% endblock %}

{% block section %}
    <a href="{{path('massive_upload')}}">Massive Upload</a>
{% endblock %}

{% block body %}
{{parent()}}
    <div class="container">    
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
              <div class="btn-group pull-right">
                <a href="{{path('fm')}}" class="btn btn-sm btn-primary">Back to File Manager</a>
              </div>  
            </div>
        </div>      
        <hr>
        {#<div class="panel panel-default">
            <div class="panel-heading">Massive Upload v0.1</div>
            <div class="panel-body">
                <input id="fileupload2" type="file" name="files[]" data-url="{{ oneup_uploader_endpoint('fm') }}" multiple />
            </div>
        </div>#}

        <!-- The file upload form used as target for the file upload widget -->
        <form id="fileupload" action="{{ oneup_uploader_endpoint('fm') }}" method="POST" enctype="multipart/form-data">
            <div class="panel panel-default">
                <div class="panel-heading">
                Massive Upload
                <p class="pull-right">Current folder: <input type="text" id="folderinput" value="" readonly></p>
                </div>
                <div class="panel-body">
                    <!-- Redirect browsers with JavaScript disabled to the origin page -->
                    <noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
                    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                    <div class="row fileupload-buttonbar">
                        <div class="col-md-7">
                            <!-- The fileinput-button span is used to style the file input field as button -->
                            <span class="btn btn-md btn-default fileinput-button">
                                <i class="glyphicon glyphicon-plus"></i>
                                <span>Add files...</span>
                                <input type="file" name="files[]" data-url="{{ oneup_uploader_endpoint('fm') }}" multiple>
                            </span>
                            <span id="opener" class="btn btn-md btn-default">
                                <i class="glyphicon glyphicon-folder-open"></i>
                                <span> Choose Destination Folder</span>
                            </span>
                            <span>
                                
                            </span>
                            <button type="submit" class="btn btn-success start">
                                <i class="glyphicon glyphicon-upload"></i>
                                <span>Start upload</span>
                            </button>
                            <button type="reset" class="btn btn-danger cancel">
                                <i class="glyphicon glyphicon-ban-circle"></i>
                                <span>Cancel upload</span>
                            </button>
                            <span class="fileupload-process"></span>
                            
                            <div class="folder-active margin-neo" id="choosefolder">
                                <select id="folder" name="folder" required>
                                    {% for folder in folders %}
                                        <option name="{{folder.name}}" value="{{folder.id}}">{{folder.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                        </div>
                        
                        <!-- The global progress state -->
                        <div class="col-md-3 fileupload-progress fade">
                            <!-- The global progress bar -->
                            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                            </div>
                            <!-- The extended global progress state -->
                            <div class="progress-extended">&nbsp;</div>
                        </div>
                    </div>
                <hr>
                <div style="border:2px dashed #CCC;height:auto; text-align:center; margin:10px 10px 10px 10px;
                padding: 20px 10px 10px 10px";>
                    <p>Drag & Drop Files here...</p>
                
                
                
                <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
                </div>
                </div>
                

                <div class="panel-footer"></div>
            </div>
        </form>
    </div>
    
    <!-- The blueimp Gallery widget -->
    {#<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
        <div class="slides"></div>
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
    </div>#}

    {% verbatim %}
        <script id="template-upload" type="text/x-tmpl">
            {% for (var i=0, file; file=o.files[i]; i++) { %}
                <tr class="template-upload fade">
                    <td align="center">
                        <span class="preview"></span>
                    </td>
                    <td>
                        <p class="name">{%=file.name%}</p>
                        <strong class="error"></strong>
                    </td>
                    <td>
                        <p class="size">Processing...</p>
                        <div class="progress"></div>
                    </td>
                    <td align="center">
                        {% if (!i && !o.options.autoUpload) { %}
                            <button class="btn btn-xs start" disabled>Start</button>
                        {% } %}
                        {% if (!i) { %}
                            <button class="btn btn-xs cancel">Cancel</button>
                        {% } %}
                    </td>
                </tr>
            {% } %}
        </script>

        <!-- The template to display files available for download -->
        <script id="template-download" type="text/x-tmpl">
            
            {% for (var i=0, file; file=o.files[i]; i++) { 
                %}
                <tr class="template-download fade">
                    <td>
                        <span class="preview">
                            {% if (file.thumbnailUrl) { %}
                                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                            {% } %}
                        </span>
                    </td>
                    <td>
                        <p class="name">
                            <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                        </p>
                        {% if (file.error) { %}

                            <div><span class="error">Success</span> </div>
                        {% } %}
                    </td>
                    <td>
                        <span class="size">{%=o.formatFileSize(file.size)%}</span>
                    </td>
                    
                </tr>
            {% } %}
        </script>
    {% endverbatim %}

    <div id="dialog" title="Choose Folder" style="display:none">
        <div id="tree"></div>
    </div>

{% endblock %}

{% block javascripts %}
    {{parent()}}
    {#<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>#}

    {#<script type="text/javascript" src="https://rawgithub.com/blueimp/jQuery-File-Upload/master/js/vendor/jquery.ui.widget.js"></script>
    
    <script type="text/javascript" src="https://rawgithub.com/blueimp/jQuery-File-Upload/master/js/jquery.iframe-transport.js"></script>
    
    <script type="text/javascript" src="https://rawgithub.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script>#}

    <!-- The Templates plugin is included to render the upload/download listings -->
    {#<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>#}
    <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
    <script src="{{asset('js/jqueryupload/vendor/jquery.ui.widget.js')}}"></script>
    
    <!-- The Templates plugin is included to render the upload/download listings -->
    <script src="http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
    
    <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
    <script src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js"></script>
    
    <!-- The Canvas to Blob plugin is included for image resizing functionality -->
    <script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
    
    <!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
    <!-- blueimp Gallery script -->
    <script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
    
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="{{asset('js/jqueryupload/jquery.iframe-transport.js')}}"></script>
    
    <!-- The basic File Upload plugin -->
    <script src="{{asset('js/jqueryupload/jquery.fileupload.js')}}"></script>
    
    <!-- The File Upload processing plugin -->
    <script src="{{asset('js/jqueryupload/jquery.fileupload-process.js')}}"></script>
    
    <!-- The File Upload image preview & resize plugin -->
    <script src="{{asset('js/jqueryupload/jquery.fileupload-image.js')}}"></script>
    
    <!-- The File Upload audio preview plugin -->
    <script src="{{asset('js/jqueryupload/jquery.fileupload-audio.js')}}"></script>
    
    <!-- The File Upload video preview plugin -->
    <script src="{{asset('js/jqueryupload/jquery.fileupload-video.js')}}"></script>
    
    <!-- The File Upload validation plugin -->
    <script src="{{asset('js/jqueryupload/jquery.fileupload-validate.js')}}"></script>
    
    <!-- The File Upload user interface plugin -->
    <script src="{{asset('js/jqueryupload/jquery.fileupload-ui.js')}}"></script>
    
    <script type="text/javascript">
        $(document).ready(function() {
            $('#fileupload').fileupload({
            });
        });
    </script>

    
    {# Choose Folder to massive action #}
    <script type="text/javascript">
      $(function() {
        $( "#dialog" ).dialog({
          autoOpen: false,
          show: {
            //effect: "blind",
            //duration: 1000
          },
          hide: {
            //effect: "explode",
            //duration: 1000
          }
        });
     
        $( "#opener" ).click(function() {
          $( "#dialog" ).dialog( "open" );
        });
      });
    </script>

    <script type="text/javascript">
        $("#folder").attr('hidden','hidden');
        $("#folder").children().each(
                    function() {
                        if (this.value == 1){
                            $(this).attr('selected','selected');
                        }
                    });
        var datajson = [{{rootfolder.printTreeJson|raw}}];
        $('#tree').tree({
            data: datajson,
            dragAndDrop: true,
            autoOpen: 0,
        });
    </script>

    {# Displays Tree to select current folder #}
    <script type="text/javascript">
        $('#tree').bind(
            'tree.click',
            function(event) {
                // The clicked node is 'event.node'
                var node = event.node;
                //console.log(node.name);

                $("#folderinput").val(node.name); 
                
                $("#folder").children().each(
                    function() {
                        if (this.value == node.id){
                            $(this).attr('selected','selected');
                            console.log(this.value);
             
                        }
                    })
            }
        );
    </script>
{% endblock %}