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

{% block section %}
<a href="{{path('trash')}}">Trash</a>
{% endblock %}

{% block body %}
{{parent()}}
   <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" style="padding:5px;">
      <a class="btn btn-danger btn-sm" href="{{ path('trash') }}"><strong><span class="glyphicon glyphicon-trash"></span> TRASH </strong></a>
   </div>

   <div class="panel panel-default" style="padding:5px;">
    <div class="panel-body">
      <div id="filemanager">            
        <table class="table table-hover table-condensed">
            <thead>
                <tr>
                    <th>File</th>
                    <th>Type</th>
                    <th>Origin Folder</th>
                    <th>Last Changes</th>
                    <th>Actions</th>
                </tr>
            </thead>

            <tbody>
            {% for fo in folders %}
                  <tr>
                      <td><img src="{{ asset('../web/images/fm/folder_open.png')}}" width="15px" style="margin-left:5%;margin-right:1%"><a href="{{ path('trash_folder', { 'folder': fo.id }) }}" title="Click to view Folders"> {{ fo }}</a></td>
                      <td>Folder</td>
                      <td>/{{fo.parentfolder}}</td>
              
                      <td>{{fo.lastmodified|date(app.user.dateformat)}}</td>
                      <td>
                          <a class="btn btn-xs btn-default" href="{{path('folders_backtotrash', {'id': fo.id })}}" title="RESTORE FOLDER: {{fo.name}}" >Restore</a>
                          <a class="btn btn-xs btn-default" id="delete-button{{fo.id}}" {#href="{{ path('folders_delete', { 'id': fo.id, 'currentfolder': 1 }) }}"#}>
                          {#<a class="btn btn-xs btn-default" id="deletefolderbutton{{fo.id}}" href="{{ path('folders_delete', { 'id': fo.id, 'currentfolder': 1 }) }}">#}Delete</a>
                      </td>
                  </tr>           
              {% endfor %}
              {#<h5><small>Current folder id:</small> {{currentfolder.id}}</h5>
              <h5><small>Current Parent folder id:</small> {{currentfolderparent}}</h5>#}
              {% if documents == NULL %}
              <tr>
                <td colspan="8">Empty Files</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%"> {{ file.name }}</td>
                        <td>File</td>
                        <td>/{{file.folder}}</td>
                        <td>{{file.lastmodified|date(app.user.dateformat)}}</td>
                        <td>
                            <a href="{{path('document_backtotrash', {'id': file.id }) }}" title="RESTORE FILE: {{file.name}}" class="btn btn-xs btn-default">Restore</a>
                            <a id="delete-buttonfile{{file.id}}" class="btn btn-xs btn-default">Delete</a>
                            {#<a href="{{ path('document_delete', { 'id': file.id }) }}" class="btn btn-xs btn-default">Delete</a>#}
                        </td>
                    </tr>
                {% endfor %}
              {% endif %}
              </tbody>
        </table>
        <hr>
        <a id="empty-trash-button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span> Empty Trash</a>
      </div>
    </div>
  </div>

  {% for fo in folders %}
    <div id="dialog-confirm{{fo.id}}" style="display:none" title="Are You shure?">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
    </div>
  {% endfor %}

  {% for file in documents %}
    <div id="dialog-confirmfile{{file.id}}" style="display:none" title="Are You shure?">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
    </div>
  {% endfor %}
  <div id="dialog-empty-trash" style="display:none" title="Empty Trash">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>All items will be permanently deleted and cannot be recovered. Are you sure to empty trash?</p>
   </div>
{% endblock %}

{% block javascripts %}
  {{parent()}}
  
  <script type="text/javascript">  
    $('#select-all').click(function(event) {   
        if(this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function() {
                this.checked = true;                        
            });
        }else { 
        // Iterate each checkbox 
        $(":checkbox").each(function() { this.checked = false; }); }
    });
  </script>

  {# Confirmation Empty Trash #}
  <script type="text/javascript">
      $(function() {
        $( "#dialog-empty-trash" ).dialog({
          autoOpen: false,
          resizable: false,
          height:140,
          modal: true,
          buttons: {
            "Empty Trash": function() {
              window.location.href="{{ path('trash_empty_trash') }}";
            },
            Cancel: function() {
              $( this ).dialog( "close" );
            }
          }
        });
      });

      $( "#empty-trash-button" )
          .click(function() {
            console.log("clicked");
            $( "#dialog-empty-trash" ).dialog( "open" );
          });
  </script>

  {# Confirmation Delete Folder #}
  <script type="text/javascript">
    {% for fo in folders %}
      $(function() {
        $( "#dialog-confirm{{fo.id}}" ).dialog({
          autoOpen: false,
          resizable: false,
          height:140,
          modal: true,
          buttons: {
            "Delete item": function() {
              window.location.href="{{ path('folders_delete', { 'id': fo.id, 'currentfolder': 1 }) }}";
            },
            Cancel: function() {
              $( this ).dialog( "close" );
            }
          }
        });
      });

      $( "#delete-button{{fo.id}}" )
          .click(function() {
            $( "#dialog-confirm{{fo.id}}" ).dialog( "open" );
          });
    {% endfor %}
  </script>

  {# Confirmation Delete File #}
  <script type="text/javascript">
    {% for file in documents %}
      $(function() {
        $( "#dialog-confirmfile{{file.id}}" ).dialog({
          autoOpen: false,
          resizable: false,
          height:140,
          modal: true,
          buttons: {
            "Delete item": function() {
              window.location.href="{{ path('document_delete', { 'id': file.id }) }}";
            },
            Cancel: function() {
              $( this ).dialog( "close" );
            }
          }
        });
      });

      $( "#delete-buttonfile{{file.id}}" )
          .click(function() {
            $( "#dialog-confirmfile{{file.id}}" ).dialog( "open" );
          });
    {% endfor %}
  </script>
{% endblock %}