{% extends 'ProjectManagerBundle::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 title %}PM / Project List{% endblock %}

{% block section %}
<a href="{{path('project_manager_homepage')}}">Project List</a>
{% endblock %}

{% block body  %}
{{parent()}}

<div class="panel panel-default">
  <div class="panel-heading"> Project List
  </div>
  <div class="panel-body">
    <div>Number of projects: {{projects|length}}
    </div>
    <div class="table-responsive">
    <table class="colaboratable tablesorter-blue">
        <thead>
            <tr>
                <td>#</td>
                <td>Code</td>                
                <td>Name</td>                
                <td>Start</td>                
                <td>End</td>
                <td>Enterprises</td>                               
                <td>Budget</td>                
                {#<td>Hours/Man</td>#}
                <td>Country</td>                
                <td class="filter-select">Status</td> 
                <td></td>      
            </tr>
        </thead>
        <tbody>
            {% for project in projects %}
                <tr>
                    <td>{{loop.index}}</td>
                    <td>{{project.project.projectcode}}</td>
                    <td><a href="http://{{project.project.projectlink}}/web/app.php" target="_blank">{{project.project.name}}</a></td>
                    <td>{{project.project.startdate|date(app.user.dateformat) }}</td>
                    <td>{{project.project.enddate|date(app.user.dateformat) }}</td>
                    <td>

                        {% for ent in project.project.ProjectEnterprises %}
                            {#% if ent.enterpriseroleinproject is not null %#}
                                {% if ent.enterpriseroleinproject.name == "Main Client" %}
                                    <strong>{{ent.enterprise.name}}</strong><br>
                                {% elseif ent.enterpriseroleinproject.name == "Main Contractor" %}
                                    <strong>{{ent.enterprise.name}}</strong><br>
                                {% else %}
                                    {{ent.enterprise.name}}<br>
                                {% endif %}
                            {#% endif %#}
                        {% endfor %}                

                    </td>
                    <td>{{project.project.budget}}</td>
                    {#<td>{{project.project.hoursman}}</td>#}
                    <td>{{project.project.country}}</td>
                    <td>{{project.project.status}}</td>
                    <td align="center">
                        <form method="post" action="{{ path('project_manager_show', { 'id': project.project.id }) }}">
                            <select name="actions" onchange='this.form.submit()'>
                            <option value="">Actions</option>
                              <option value="Overview">Overview</option>
                            </select>
                        </form>
                    </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>
{% endblock %}

{% block javascripts %}
{{parent()}}
{# COLABORA TABLE #}
    <script type ="text/javascript">
        $(function() {
          $(".colaboratable")
            .tablesorter({
              theme : 'blue',
              cssChildRow: "colaboratable-childRow",
              showProcessing: true,
              widgets: ["zebra", "filter", "pager"],
              headers: {
                    0: {
                    sorter: false,
                    },
                    9: {
                    sorter: false,
                    },
              },

              widgetOptions: {
                pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})', // '{page}/{totalPages}'
                pager_removeRows: false,
                filter_reset : '.reset',
                filter_childRows  : true,
                filter_cssFilter  : 'colaboratable-filter',
                filter_startsWith : false,
                filter_ignoreCase : true,
                filter_searchDelay : 300,
                filter_formatter : {
                        0: function(){
                        },
                        7: function(){
                        },

                        // Date (two inputs)
                        3 : 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
                          });
                        },
                        4 : 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
                          });
                        },
                        9: function(){
                        },
                }
              }
            }
            );

          $('.colaboratable-childRow td').hide();

          
          $('.colaboratable').delegate('.toggle', 'click' ,function(){
            $(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());
            $('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>

    <script>
        $(function() {
            $( ".date" ).datepicker();
        });
    </script>



    <script>
        var codes = {{ filter.typeaheads[0]|json_encode|raw }};
        var names = {{ filter.typeaheads[1]|json_encode|raw }};

        $( "#form_code" ).autocomplete({source: codes});
        $( "#form_name" ).autocomplete({source: names});
    </script>

  <script>
/*************** Implements autocomplete on all text filter fields ***********************/
  {% for options in filter.typeaheads %}

    var options = {{ options['options']|json_encode|raw }}
    $( "#form_{{options['name']}}" ).autocomplete({source: options});

  {% endfor %}
/**************************************************************************************/
  </script>


{% endblock %}