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

{% block stylesheets %}
    {{parent()}}
    
    <link href="{{ asset('tablesorter/css/theme.blue.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">

    <style>
         td {
            text-align: center;
         }
     </style>
{% endblock %}


{% block section %}Employees{% endblock %}

{% block body -%}
{{parent()}}
{% spaceless %}
    {# TABLE EMPLOYEES #}
    <div class="panel panel-default">
        <div class="panel-heading">
            Employees
        </div>

        <div class="panel-body">
            <table class="colaboratable tablesorter-blue">
                <thead>
                    <tr>
                        <td>Employee</td>
                        <td class="filter-select">Department</td>
                        <td class="filter-select">Professional Profile</td>
                        <td class="filter-select">Role</td>
                        <td class="filter-select">Birth Place</td>
                        <td class="filter-select">Gender</td>
                        <td>Actions</td>
                    </tr>
                </thead>
                <tbody>
                    {% for entity in entities %}
                        <tr>
                            <td>{{entity.name|title}} {{entity.middlenames|title}} {{entity.lastnames|title}}</td>
                            <td>{{entity.department}}</td>
                            <td>{{entity.profile}}</td>
                            <td>{{entity.role}}</td>
                            <td>{{entity.birthplace}}</td>
                            <td>{{entity.gender}}</td>
                            <td>
                                <a class="btn btn-xs btn-default" href="{{ path('hrm_show_employee', { 'id': entity.id }) }}">show</a>
                                <a class="btn btn-xs btn-default" href="{{ path('hrm_edit_employee', { 'id': entity.id }) }}">edit</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <div id="colaborapager" class="pager">
                <div class="form-group">
                <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="button" value="&gt;" class="btn btn-default btn-xs next" />
                    <input type="button" value="&gt;&gt;" class="btn btn-default btn-xs last" />
                    <input type="text" class="pagedisplay btn btn-default btn-xs"/>
                    <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-info btn-xs reset">Reset Search</button>            
                </form>
                </div>
            </div>
        </div>
    </div>
    
    {#<div class="tete">
        <iframe src="http://www.patatap.com/" style="border: 3px solid blue; width:100%;"></iframe></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)
                    6: {
                    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 : {
                        6: 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)
                        9 : 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>
{% endblock %}