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

{% block section %}
<a href="{{path('fm')}}">File Manager</a>
{% endblock %}

{% block body %}
{{parent()}}
  {# Main Buttons (Upload File, Create Folder, Trash) #}
  <div class="row">
    <div class="col-md-6 col-md-offset-6">
      <div class="btn-group pull-right">
        <a class="btn btn-sm btn-default" href="{{path('massive_upload')}}" title="Massive Upload Files"><span class="glyphicon glyphicon-file"></span> Massive Upload File</a>
        <a class="btn btn-sm btn-default" id="new-file-button" title="Upload Files"><span class="glyphicon glyphicon-file"></span> Upload File</a>
        <a class="btn btn-sm btn-default" id="new-emptyFile-button" title="Create Empty Files"><span class="glyphicon glyphicon-file"></span> Create Empty File</a>
        <a class="btn btn-sm btn-default" id="new-folder-button" title="Create Folder"><span class="glyphicon glyphicon-folder-open"></span> Create Folder</a>
        <a class="btn btn-sm btn-default" href="{{path('trash')}}" title="Trash"><span class="glyphicon glyphicon-trash"></span> Trash</a>
        {#<a class="btn btn-sm btn-default" id="trashbutton" title="Trash"><span class="glyphicon glyphicon-trash"></span> Trash</a>#}
      </div>  
    </div>
  </div>
  <hr>
  {# Navigation Folders Bar #}
  <div class="panel panel-default" style="padding:5px;">
    <a class="btn btn-primary btn-sm" href="{{ path('fm', { 'folder': 1 }) }}"><strong><span class="glyphicon glyphicon-home"></span> Rootfolder </strong></a>
    {% if currentfolder != NULL %}
      {% if currentfolder.parentFolder == NULL %}
      {% else %}
        {% for folder in currentfolder.getNicepath %}
            <strong><a class="btn btn-default btn-sm {% if currentfolder.getNicepath[loop.revindex0] == loop.last %}active{% endif %}" href="{{ path('fm', { 'folder': currentfolder.getNicepath[loop.revindex0].id }) }}">{{currentfolder.getNicepath[loop.revindex0].name}} </a></strong>
        {% endfor %}
      {% endif %}
    {% endif %}
  </div>

  {# Table File Manager #}
  <div class="panel panel-default">
    
      <div class="row">
        <div class="col-xs-3 col-sm-offset-3"></div>
        <div class="col-xs-3 col-sm-offset-3">
          <div class="progress" style="margin-top:10px; margin-right: 10px;">
            <div class="progress-bar progress-bar-danger" style="width: {{100 - availablepercent }}%">
              <span class="sr-only"></span>
            </div>
            <div class="progress-bar progress-bar-success" style="width: {{availablepercent}}%">
              <span class="sr-only"></span>
            </div>  
          </div>
        </div>
      </div>
    
    <div class="panel-body">    
      <div id="filemanager">
          <div class="table-responsive">
            <table class="table table-hover table-condensed">
              <thead>
                  <tr>
                      <th>File</th>
                      <th>Size</th>
                      <th>Type</th>
                      <th>Creation Date</th>
                      <th>Last Changes</th>
                      <th><p class="pull-right">Actions</p></th>
                  </tr>
              </thead>
              <tbody>
                <tr>
                    <td colspan="5">
                    <img src="{{ asset('../web/images/fm/folder_open.png')}}" width="15px">  <a href="{{ path('fm', { 'folder': currentfolderparent }) }}" style="color:black;font-weight:bold;">
                      {% if currentfolder != null %}
                        {% if currentfolder.name == "rootfolder" %}{{currentfolder.name}}{% else %}. .{% endif %}</a></td>
                      {% endif %}
                </tr>
                {% if folders == 0 %}
                {% else %}
                  {% for fo in folders %}       
                      <tr>
                          <td>
                            <img src="{{ asset('../web/images/fm/directory.png')}}" style="margin-left:5%;margin-right:1%" width="15px"> 
                            <a href="{{ path('fm', { 'folder': fo.id }) }}" style="color:black;"><b>{{ fo }}</b></a>
                          </td>
                          <td>{{fo.getNumberOfItems}} item</td>
                          <td>Folder</td>
                          <td>{{fo.creationdate|date}}</td>
                          
                          <td>{{fo.lastmodified|date}}</td>
                          <td align="right">
                              {#% if is_granted('ROLE_WRITER') %#}                               
                                <button class="btn btn-default btn-xs" id="containerFolder-button{{fo.id}}" onclick="renameFolder({{fo.id}})" title="Rename Folder"><span class="glyphicon glyphicon-pencil"></span></button>

                                <button class="btn btn-default btn-xs" id="containerFolder-button{{fo.id}}" onclick="moveFolder({{fo.id}})" title="Move Folder"><span class="glyphicon glyphicon-move"></span></button>

                                <a class="btn btn-default btn-xs" title="ZIP FOLDER" href="{{ path('folders_zip', { 'id': fo.id, 'currentfolder': currentfolder.id }) }}"><span class="glyphicon glyphicon-compressed"></span></a>

                                <button class="btn btn-default btn-xs" id="deletefolderbutton{{fo.id}}" title="Remove Folder"><span class="glyphicon glyphicon-trash"></span></button>
                              {#% endif %#}
                          </td>
                      </tr>
                    
                      <div id="deletefolder{{fo.id}}" style="display:none" title="Delete, {{fo.name}} Folder">
                        <p>Are you shure that you want to Delete Folder <b>{{fo.name}}</b> and <b>ALL</b> {{fo.name}} FILES?</p>
                        <hr>
                        <a class="btn btn-small btn-danger" href="{{ path('folders_totrash', { 'id': fo.id, 'currentfolder': currentfolder.id }) }}">DELETE</a>
                      </div>
                  {% endfor %}
                {% endif %}
                
                {% if documents == NULL and folders == NULL %}
                  <tr>
                    <td colspan="6"><b>No Files or Folders</b></td>
                  </tr>
                {% else %}
                  {% for file in documents %}
                      <tr>
                          <td><img src="{{asset(extimage[loop.index-1])}}" width="15px" style="margin-left:5%;margin-right:1%"> <a class="document" 
                          href="{{ path('download_file', { 'id': file.id}) }}" title="Download {{file.name}}"><b>{{ file.name }}</b></a></td>
                          <td>{% if file.originalfilename is empty %}0 Kb{% else %}{{file.getSize|number_format(1)}} Kb{% endif %}</td>
                          <td>File</td>
                          <td>{{file.creationdate|date}}</td>
                          <td>{{file.lastmodified|date}}</td>
                          <td align="right">
                              {#% if is_granted('ROLE_WRITER') %#}
                                <a class="btn btn-xs btn-default" href="{{ path('download_file', { 'id': file.id}) }}" title="Download File"><span class="glyphicon glyphicon-floppy-save"></span></a>
                                
                                <a class="btn btn-xs btn-default" id="addversionbutton{{file.id}}" href="javascript:void(0)">Versions</a>

                                <button class="btn btn-xs btn-default" id="containerFile-button{{file.id}}" onclick="renameFile({{file.id}})" title="Rename File"><span class="glyphicon glyphicon-pencil"></span></button>

                                <button class="btn btn-xs btn-default" id="containerFile-button{{file.id}}" onclick="moveFile({{file.id}})" title="Move File"><span class="glyphicon glyphicon-move"></span></button>

                                {% if file.originalfilename is empty %}<a class="btn btn-xs btn-default" href="{{ path('empty_document_totrash', { 'id': file.id, 'currentfolder': currentfolder.id }) }}" title="Delete File"><span class="glyphicon glyphicon-trash"></span></a>{% else %}<a class="btn btn-xs btn-default" href="{{ path('document_totrash', { 'id': file.id, 'currentfolder': currentfolder.id }) }}" title="Delete File"><span class="glyphicon glyphicon-trash"></span></a>{% endif %}         
                              {#% endif %#}
                          </td>
                      </tr>
                  {% endfor %}
                {% endif %}
              </tbody>
            </table>
          </div>

          {% for file in documents %}
            <div id="addversion{{file.id}}" style="display:none;" title="New Version, {{file.name}} FILE"> 
                  {% render controller('fmBundle:Document:newVersion', {'id': file.id, 'currentfolder': currentfolder.id}) %}
            </div>           

            <div id="linkfile{{file.id}}" style="display:none;" title="COMING SOON">
                  <p>This feature will be available on <strong>File Manager ver. 2.0</strong></p>
            </div>
          {% endfor %}
      </div>

    </div>
    <div class="panel-footer">
    </div>
  </div>           
  
  {# Upload Document #}
  <div id="file" style="display:none" title="Upload Document">
    {% if currentfolder != NULL %}
        {% render (controller('fmBundle:Document:new', {'currentfolder': currentfolder.id})) %}
    {% endif %}
  </div>

  {# Empty Document #}
  <div id="emptyFile" style="display:none" title="Create Empty Document">
    {% if currentfolder != NULL %}
        {% render (controller('fmBundle:Document:newEmpty', {'currentfolder': currentfolder.id})) %}
    {% endif %}
  </div>

  {# Create NEW Folder #}
  <div id="folder" style="display:none" title="Create Folder">
    {% if currentfolder != NULL %}
      {% render controller('fmBundle:Folders:new', {'currentfolder': currentfolder.id}) %}
    {% endif %}
  </div>
  
  {# TRASH #}
  <div id="trash" style="display:none" title="TRASH">
    trash trash
    {#% render controller('fmBundle:fm:fmTrash') %#}
  </div>
  
  {# Folder Ajax Div #}
  <div id="containerFolder" style="display:none" title="Folder"></div>
  
  {# File Ajax Div #}
  <div id="containerFile" style="display:none" title="File"></div>

{% endblock %}


{% block javascripts %}
  {{parent()}}  

  <script type="text/javascript">
   $(function() {
      var allFields = $( [] ),
      tips = $( ".validateTips" );

      $( "#containerFolder" ).dialog({
        autoOpen: false,
        modal: true,
        buttons: {
          
        },
        close: function() {
          allFields.val( "" ).removeClass( "ui-state-error" );
        }
      });

      $( "#containerFile" ).dialog({
        autoOpen: false,
        modal: true,
        buttons: {
          
        },
        close: function() {
          allFields.val( "" ).removeClass( "ui-state-error" );
        }
      });

      $( "#trash" ).dialog({
        autoOpen: false,
        height: 600,
        width: 800,
        modal: true,
        buttons: {
          
        },
        close: function() {
          allFields.val( "" ).removeClass( "ui-state-error" );
        }
      });

      {% for file in documents %}
        $( "#containerFile-button{{file.id}}" )
          .click(function() {
            $( "#containerFile" ).dialog( "open" );
        });

        $( "#addversion{{file.id}}" ).dialog({
            autoOpen: false,
            height: 650,
            width: 400,
            modal: true,
            buttons: {
              
            },
            close: function() {
              allFields.val( "" ).removeClass( "ui-state-error" );
            }
          });

         $( "#addversionbutton{{file.id}}" )
          .click(function() {
            $( "#addversion{{file.id}}" ).dialog( "open" );
          });

           $( "#linkfile{{file.id}}" ).dialog({
            autoOpen: false,
            height: 150,
            width: 300,
            modal: true,
            buttons: {
              
            },
            close: function() {
              allFields.val( "" ).removeClass( "ui-state-error" );
            }
          });

           $( "#linkfilebutton{{file.id}}" )
            .click(function() {
              $( "#linkfile{{file.id}}" ).dialog( "open" );
            });
      {% endfor %}

      {% for fo in folders %}
        $( "#containerFolder-button{{fo.id}}" )
              .click(function() {
                $( "#containerFolder" ).dialog( "open" );
              });

        $( "#deletefolder{{fo.id}}" ).dialog({
          autoOpen: false,
          height: 200,
          width: 450,
          modal: true,
          buttons: {
            
          },
          close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
          }
        });

       $( "#deletefolderbutton{{fo.id}}" )
        .click(function() {
          $( "#deletefolder{{fo.id}}" ).dialog( "open" );
        });
      {% endfor %}
    });
  </script>

  <script language="javascript" type="text/javascript">
    $(window).load(function() {
      $('#loading').hide();
    });
  </script>

  {# Upload File #}
  <script type="text/javascript">
    $(function() {
      $( "#file" ).dialog({
        autoOpen: false,
        modal: true,
        show: {
          //effect: "bounce",
          //duration: 1000
        },
        hide: {
          //effect: "explode",
          //duration: 1000
        }
      });
   
      $( "#new-file-button" ).click(function() {
        console.log("Upload File");
        $( "#file" ).dialog( "open" );
      });
    });
  </script>

  {# Create Empty File #}
  <script type="text/javascript">
    $(function() {
      $( "#emptyFile" ).dialog({
        autoOpen: false,
        modal: true,
        show: {
          //effect: "bounce",
          //duration: 1000
        },
        hide: {
          //effect: "explode",
          //duration: 1000
        }
      });
   
      $( "#new-emptyFile-button" ).click(function() {
        console.log("Upload File");
        $( "#emptyFile" ).dialog( "open" );
      });
    });
  </script>

  {# Create Folder #}
  <script type="text/javascript">
    $(function() {
      $( "#folder" ).dialog({
        autoOpen: false,
        modal: true,
        show: {
          //effect: "bounce",
          //duration: 1000
        },
        hide: {
          //effect: "explode",
          //duration: 1000
        }
      });
   
      $( "#new-folder-button" ).click(function() {
        console.log("Create Folder");
        $( "#folder" ).dialog( "open" );
      });
    });
  </script>

  {#Rename Folder#}
  <script type="text/javascript">
    function renameFolder(idfolder)
    {
      console.log(idfolder);
      var url = "{{ path('folders_edit', {'id': 'id'}) }}"; 
      url = url.replace("id", idfolder);
      
      $.ajax({
        url: url, 
        type: 'POST', 
        dataType:"html", 
        data: {id: idfolder},
          success: function (response, state) {
                 document.getElementById("containerFolder").innerHTML = response;
                      },
          error: function(peticion, textStatus, errorThrown) { 
            alert("Die");
          }
      });
    }
  </script>
  
  {#Move Folder#}
  <script type="text/javascript">
    function moveFolder(idfolder)
    {
      console.log(idfolder);
      var url = "{{ path('folders_move', {'id': 'id'}) }}"; 
      url = url.replace("id", idfolder);
      
      $.ajax({
        url: url, 
        type: 'POST', 
        dataType:"html", 
        data: {id: idfolder},
          success: function (response, state) {
                  var inner = response;
                  $( "#containerFolder" ).dialog( "open" );
                  //alert(inner);
                  //document.getElementById("containerFolder").html = inner;
                  
                  $('#containerFolder').html(inner);
                  },
          
          error: function(peticion, textStatus, errorThrown) { 
            alert("Die");
          }
      });
    }
  </script>

  {#Download File#}
  <script type="text/javascript">
    function download(file)
    {
     window.location=file;
    }
  </script>

  {# Versions #}

  {#Rename File#}
  <script type="text/javascript">
    function renameFile(iddocument)
    {
      var url = "{{ path('document_edit', {'id': 'id'}) }}"; 
      url = url.replace("id", iddocument);
      
      $.ajax({
        url: url, 
        type: 'POST', 
        dataType:"html", 
        data: {id: iddocument},
          success: function (response, state) {
                 document.getElementById("containerFile").innerHTML = response;
                      },
          error: function(peticion, textStatus, errorThrown) { 
            alert("Die");
          }
      });
    }
  </script>

  {#Move File#}
  <script type="text/javascript">
    function moveFile(iddocument)
    {
      console.log(iddocument);
      var url = "{{ path('document_move', {'id': 'id'}) }}"; 
      url = url.replace("id", iddocument);
      
      $.ajax({
        url: url, 
        type: 'POST', 
        dataType:"html", 
        data: {id: iddocument},
          success: function (response, state) {
                  var inner = response;
                  $( "#containerFile" ).dialog( "open" );
                  //alert(inner);
                  //document.getElementById("containerFolder").html = inner;
                  
                  $('#containerFile').html(inner);
                  },
          
          error: function(peticion, textStatus, errorThrown) { 
            alert("Die");
          }
      });
    }
  </script>

{% endblock %}