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

{% block stylesheets %}
    {{parent()}}
    <link href="{{ asset('tablesorter/css/theme.ice.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('tablesorter/css/filter.formatter.css') }}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
{% endblock %}

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

{% block body %}
{% spaceless %}    
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading"><h5><small>RM: </small>Manage Enterprise Members</h5></div>
            <div class="panel-body">    
                <small class="pull-right">*Click on a member to modify.</small>
                <br>
                <br>
                
                <div class="margin-neo table-responsive" style="display:none" id="test">
                    <div id="colaborapager" class="pager">
                      <form>
                        <input type="button" class="btn btn-default btn-xs first" value="&lt;&lt;" />
                        <input type="button" class="btn btn-default btn-xs prev" value="&lt;" />
                        <input type="text" class="pagedisplay"/>
                        <input type="button" value="&gt;" class="btn btn-default btn-xs next" />
                        <input type="button" value="&gt;&gt;" class="btn btn-default btn-xs last" />
                        <select class="btn btn-default btn-xs pagesize">
                          <option selected="selected"  value="10">10</option>
                          <option value="20">20</option>
                          <option value="30">30</option>
                          <option value="40">40</option>
                        </select>
                        <button type="button" class="btn btn-default btn-xs btn-primary reset">Reset Search</button>
                      </form>
                    </div>

                    <table class="colaboratable tablesorter-ice">
                        <colgroup>
                            <col style="width: 2%" />
                            <col style="width: 20%" />
                            <col style="width: 20%" />
                            <col style="width: 20%" />
                            <col style="width: 5%" />
                            {#<col style="width: 18%" />#}
                        </colgroup>

                        <thead>
                            <tr>
                                <td>Avatar</td>
                                <td data-placeholder="Search Member">Member</td>
                                <td data-placeholder="Search Email">Email</td>                            
                                <td class="filter-select">Profile</td>
                                <td>Actions</td>
                                {#<th>Date</th>#}
                            </tr>
                        </thead>
                        <tbody>
                            {% for result in result %}
                                <tr>
                                    <td align="center">
                                    {% if result.webservice['picturepath'] is defined %}
                                    <img src="{{colaboraserver}}/../{{result.webservice['picturepath']}}" height="15px" width="15px">
                                    {% endif %}
                                    </td>
                                    <td align="center">
                                        <a href="{{ path('resources_manager_members_edit', { 'id': result.user.id }) }}">
                                        <strong> 
                                        <p>{% if result.webservice['name'] is defined %}{{ result.webservice['name'] }}{% endif %}{% if result.webservice['lastnames'] is defined %} {{ result.webservice['lastnames'] }}{% endif %}</p>
                                        </strong>
                                        </a>

                                    </td>
                                    <td align="center">{{ result.webservice['email'] }}</td>
                                    <td align="center"><center><strong>{{ result.user.profile }}</strong></center></td>
                                    <td align="center">
                                    <select onchange="javascript:location.href = this.value;">
                                      <option>Actions</option>
                                      <option></option>
                                      <option value="{{ path('resources_manager_members_edit', { 'id': result.user.id }) }}">Edit</option>
                                      <option value="#">Delete</option>
                                    </select>
                                    {#<td>Jan 1, 2014</td>#}
                                </tr>
                            {% endfor %}
                                {# FAKE DATA #}
                                {#{% for i in 0..20 %}
                                    <tr>
                                        
                                        <td align="center"><img src="{{colaboraserver}}/../{{result[0].webservice['picturepath']}}" height="15px" width="15px"></td>
                                        <td align="center"><a href="#"><strong>{{i}}Member Name</a></strong></td>
                                        <td align="center">email@{{i}}email.com</td>
                                        <td align="center"><strong>Professional Profile</strong></td>
                                        <td align="center">
                                            <select onchange="javascript:location.href = this.value;">
                                                <option>Actions</option>
                                                <option></option>
                                                <option value="#">Edit</option>
                                                <option value="#">Delete</option>
                                            </select>
                                        </td>
                                        <td>Jul 10, 2014 8:14 AM</td>
                                    </tr>
                                {% endfor %}#}
                        </tbody>
                    </table>
                </div>

            <a href="#" class="export btn btn-default">Export Table data into Excel</a>
            
            </div>
        </div>
    </div>
    <hr>
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">RM: Invite New Members</div>
            <div class="panel-body">
                        {#<p>Add new members...</p>#}
                        <form id="nothing" name="nothing" method="post" action="{{path('invitation_request')}}">
                            <input type="text" name="tags" id="tags" class="tagfield" value="">
                            <br>
                            <button type="submit" class="btn btn-primary">Send Invitation</button>    
                        </form>
                        <br>
                        
                        <small>* Enter user emails separated by comas</small>
                        
            </div>
        </div>
    </div>
{% endspaceless %}
{% endblock %}


{% block javascripts %}
{{parent()}}
        
    {# COLABORA TABLE #}
    <script type ="text/javascript">
        $(function() {
          $(".colaboratable")
            .tablesorter({
              theme : 'blue',
              // this is the default setting
              cssChildRow: "colaboratable-childRow",
              showProcessing: true,

              // initialize zebra and filter widgets
              widgets: ["zebra", "filter", "pager"],

              headers: {
                // disable sorting of the first column (we start counting at zero)
                    0: {
                    sorter: false,
                    },
                    4: {
                    sorter: false,
                    }
              },

              widgetOptions: {
                // output default: '{page}/{totalPages}'
                // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
                pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})', // '{page}/{totalPages}'
                pager_removeRows: false,
                filter_reset : '.reset',


                // include child row content while filtering, if true
                filter_childRows  : true,
                // class name applied to filter row and each input
                filter_cssFilter  : 'colaboratable-filter',
                // search from beginning
                filter_startsWith : false,
                // Set this option to false to make the searches case sensitive 
                filter_ignoreCase : true,

                // Delay in milliseconds before the filter widget starts searching; This option prevents searching for
                // every character while typing and should make searching large tables faster.
                filter_searchDelay : 300,
                filter_formatter : {
                        0: function(){

                        },
                        4: function(){

                        },
                        // Rank
                        /*0 : function($cell, indx){
                          return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
                            delayed : true,
                            valueToHeader : false,
                            cellText : 'Rank:',
                            compare : [ '=', '>=', '<=' ],
                            selected : 2, // zero-based index of compare starting selected value
                            // jQuery UI slider options
                            value : 100,
                            min : 0,
                            max : 100
                          });
                        },

                        // Age
                        1 : function($cell, indx){
                          return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
                            delayed : false,
                            valueToHeader : false,
                            exactMatch : false,
                            allText : 'all', // this is ignored when compare is not empty
                            compare : [ '=', '>=', '<=' ],
                            selected : 1,
                            // jQuery UI slider options
                            value : 1,
                            min : 1,
                            max : 65
                          });
                        },

                        // Total
                        2 : function($cell, indx){
                          return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
                            delayed : false,
                            valueToHeader : false,
                            // jQuery UI slider options
                            values : [1, 160],
                            min : 1,
                            max : 160
                          });
                        },

                        // Discount
                        3 : function($cell, indx){
                          return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
                            delayed : true,
                            addToggle : false,
                            exactMatch : true,
                            compare : [ '', '=', '>=', '<=' ],
                            selected : 2,
                            // jQuery UI spinner options
                            min : 0,
                            max : 45,
                            value : 1,
                            step : 1
                          });
                        },

                        // Date (one input)
                        4 : function($cell, indx){
                          return $.tablesorter.filterFormatter.uiDateCompare( $cell, indx, {
                            cellText : 'Dates', // text added before the input
                            compare : [ '', '=', '>=', '<=' ],
                            selected : 3,
                            // jQuery UI datepicker options
                            // defaultDate : '1/1/2014', // default date
                            changeMonth : true,
                            changeYear : true

                          });
                        },*/

                        // Date (two inputs)
                        5 : function($cell, indx){
                          return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
                            // from : '08/01/2013', // default from date
                            // to   : '1/18/2014',  // default to date
                            changeMonth : true,
                            changeYear : true
                          });
                        }
                }
              }//endWidgetOptions
            }
            
            /*.tablesorterPager({
                container: $("#pager")
            })*/
            );

          // hide child rows
          $('.colaboratable-childRow td').hide();

          // Toggle child row content (td), not hiding the row since we are using rowspan
          // Using delegate because the pager plugin rebuilds the table after each page change
          // "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
          $('.colaboratable').delegate('.toggle', 'click' ,function(){

            // use "nextUntil" to toggle multiple child rows
            // toggle table cells instead of the row
            $(this).closest('tr').nextUntil('tr.colaboratable-hasChildRow').find('td').toggle();

            return false;
          });


          // Toggle widgetFilterChildRows option
          $('button.toggle-option').click(function(){
            var c = $('.tablesorter')[0].config.widgetOptions,
            o = !c.filter_childRows;
            c.filter_childRows = o;
            $('.state').html(o.toString());
            // update filter; include false parameter to force a new search
            $('table').trigger('search', false);
            return false;
          });
        });
        $("#test").show();
        
        /*$('.export').on('click', function(){
            var csv = [];
            console.log("click");
            // find only visible rows; we're ignoring filtered/hidden rows
            $('table').find('tbody tr:visible').find('td').each(function(){
                csv.push( $(this).text() );
            });
            // do what you want with the csv data here
            console.log(csv);
            $('textarea').val( csv.join(',') )
        });*/
    </script>

    {# COLABORA TABLE EXPORT #}
    <script type="text/javascript">
        $(document).ready(function () {
            function exportTableToCSV($table, filename) {

            
            var $rows = $table.find('tr:has(td):visible'),

                // Temporary delimiter characters unlikely to be typed by keyboard
                // This is to avoid accidentally splitting the actual contents
                tmpColDelim = String.fromCharCode(11), // vertical tab character
                tmpRowDelim = String.fromCharCode(0), // null character

                // actual delimiter characters for CSV format
                colDelim = '","',
                rowDelim = '"\r\n"',

                // Grab text from table into CSV formatted string
                csv = '"' + $rows.map(function (i, row) {
                    var $row = $(row),
                        $cols = $row.find('td');

                    return $cols.map(function (j, col) {
                        var $col = $(col),
                            text = $col.text();

                        return text.replace('"', '""'); // escape double quotes

                    }).get().join(tmpColDelim);

                }).get().join(tmpRowDelim)
                    .split(tmpRowDelim).join(rowDelim)
                    .split(tmpColDelim).join(colDelim) + '"',

                // Data URI
                csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

                

            $(this)
                .attr({
                'download': filename,
                    'href': csvData,
                    'target': '_blank'
            });
        }
            // This must be a hyperlink
            $(".export").on('click', function (event) {
                // CSV
                console.log("exportem");
                exportTableToCSV.apply(this, [$('#test>table'), 'export.csv']);
                
                // IF CSV, don't do event.preventDefault() or return false
                // We actually need this to be a typical hyperlink
            });
        });
    </script>

    {# COLABORA TAGSINPUT #}
    <script type="text/javascript">
        $(function(){
          $('#tags').tagsInput({
           'height':'90px',
           'width':'220px',
           'interactive':true,
           'defaultText':'Emails',
           'onAddTag':function(tag){
             console.log("Added a tag: " + tag)
           },
           'onRemoveTag':function(tag){
             console.log("Removed a tag: " + tag);
           },
           'removeWithBackspace':true,
           'minChars':2,
           'maxChars':30,
           'placeholderColor':'#777'
          });
        });
    </script>
{% endblock %}