{% extends 'ResourcesManagerBundle::layout.html.twig' %}
{% block title %}Resources Manager Profiles{% endblock %}

{% 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">
{% endblock %}

{% block section %}
    <a href="{{path('resources_manager_petitions')}}">Manage Petitions</a>
{% endblock %}

{% block body %}
{{parent()}}
{% spaceless %}
    <div class="row">
        {{ render (controller('ResourcesManagerBundle:Resources:resume'))}}
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-heading">RM: Profile Demand Pending</div>
                <div class="panel-body">
                    <small>* Start Date is the date of resource incorporation.</small>
                </div>
            </div>
        </div>
    </div>   
        {# PROFILE DEMAND PENDING #}
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Pending Demands <span class="glyphicon glyphicon-chevron-down"></span>
                    </a>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="margin-neo table-responsive" style="display:none" id="table1">
                            <table class="colaboratable tablesorter-blue">
                                <thead>
                                    <tr>
                                        <th># Ref</th>
                                        <th class="filter-select">Profile</th>
                                        <th>Request Date</th>
                                        <th>Start Date *</th>
                                        <th data-placeholder="Search Supervisor">Supervisor</th>
                                        <th data-placeholder="Search Project">Project</th>
                                        <th data-placeholder="Search Petitioner">Petitioner</th>
                                        <th class="filter-select">Status</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for demand in demands %}
                                        {% if demand.status =="Pending" %}
                                            <tr>
                                                <td align="center">{{ demand.id }}</td>
                                                <td align="center">{{ demand.profile }}</td>
                                                <td align="center">{{ demand.requestdate|date(app.user.dateformat)}}</td>
                                                <td align="center">{{ demand.startdate|date(app.user.dateformat)}}</td>
                                                {% if is_granted('ROLE_SUPER_STAFF') and demand.supervisor is empty %}
                                                    <td>
                                                    <form id="form" action="{{ path('resources_manager_demand_supervisor', { 'id': demand.id })}}" method="post" {{form_enctype(forms[loop.index0])}}>
                                                        {{form_widget(forms[loop.index0].supervisor)}}
                                                        <button class="btn btn-default btn-success btn-mini" type="submit"><span class="glyphicon glyphicon-ok"></span></button>
                                                    </form>
                                                    </td> 
                                                {% else %}


                                                <td align="center">{{demand.supervisor.employee}}
                                                </td>
                                                {% endif %}

                                                <td><b>{{ demand.project }}</td>
                                                <td align="center"><a href="#" target="_blank">{{ demand.petitioneruser.employee }}</a></td>
                                                {% if demand.status == "Pending" %}
                                                    <td align="center" style="color:blue;">{{ demand.status }}</td>
                                                    {% else %}
                                                {% endif %}
                                                <td><a href="{{ path('resources_manager_demandedit', { 'id': demand.id }) }}"><span class="glyphicon glyphicon-edit"></span> Action</a></td>
                                            </tr>
                                        {% else %}
                                        {% endif %}
                                    {% 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>
            </div>
        </div>    
        
        {# DEMAND HISTORIAL #}
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-heading"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    Historial <span class="glyphicon glyphicon-chevron-down"></span>
                    </a>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="margin-neo table-responsive" style="display:none" id="table2">
                            <table class="colaboratable2 tablesorter-blue">
                                <thead>
                                    <tr>  
                                        <td>#</td>
                                        <td>Ref</td>
                                        <td class="filter-select">Profile</td>
                                        <td data-placeholder="Search Resource">Resource</td>
                                        <td>Request Date</td>
                                        <td data-placeholder="Search Project">Project</td>
                                        <td data-placeholder="Search Petitioner User">Petitioner</td>
                                        <td class="filter-select">Status</td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for demand in demands %}
                                        {% if demand.status == "Pending" %}
                                        {% else %}
                                            <tr>
                                                <td align="center">{{loop.index}}</td>        
                                                <td align="center">{{ demand.id |title }}</td>
                                                <td align="center"><b>{{ demand.profile }}</b></td>
                                                <td align="center">
                                                        <a href=""{#"{{ path('profile_user_index',{ 'username': demand.assigneduser } ) }}" target="_blank"#}>
                                                        {% if demand.assigneduser is empty %}<b style="color:red;">---</b>{% else %}{{ demand.assigneduser.employee }}{% endif %}
                                                        </a>
                                                </td>
                                                <td align="center">{{ demand.requestdate|date(app.user.dateformat)}}</td>
                                                <td align="center">{{ demand.project }}</td>
                                                <td align="center">{{ demand.petitioneruser.employee }}</td>
                                                {% if demand.status == "Declined" %}
                                                    <td align="center" style="color:red;"><b>{{ demand.status }}</b></td>
                                                    {% else %}
                                                        <td align="center" style="color:green;"><b>{{ demand.status }}</b></td>
                                                {% endif %}
                                                <td align="center"><a href="{{ path('resources_manager_demandedit', { 'id': demand.id }) }}"><span class="glyphicon glyphicon-edit"></span> Action</a></td>
                                            </tr>
                                        {% endif %}
                                    {% endfor %}
                                </tbody>
                            </table>

                            <div id="colaborapager2" 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>
            </div>
        </div>
{% endspaceless %}
{% endblock %}


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

    {# COLABORA TABLE 1 #}
    <script type ="text/javascript">
        $(function() {
          $(".colaboratable")
            .tablesorter({
              //theme : 'blue',
              cssChildRow: "colaboratable-childRow",
              showProcessing: true,
              widgets: ["zebra", "filter", "pager"],

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

            widgetOptions: {
                pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})', // '{page}/{totalPages}'
                pager_removeRows: false,

                pager_selectors: {
                    container   : '#colaborapager',
                },
                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(){

                        },
                        1: function(){

                        },
                        
                        2 : 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
                          });
                        },
                        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
                          });
                        },
                        8: function(){

                        },
                }
              }//endWidgetOptions
            }

            );

        });
        $("#table1").show();
    </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 TABLE 2 #}
    <script type ="text/javascript">
        $(function() {
          $(".colaboratable2")
            .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,
                    },
                    1: {
                    sorter: false,
                    },
                    4: {
                    sorter: false,
                    },
                    8: {
                    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,
                
                pager_selectors: {
                    container   : '#colaborapager2',
                },

                filter_reset : '.reset2',


                // 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(){

                        },
                        1: function(){

                        },
                        
                        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
                          });
                        },
                        
                        8: 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)
                        
                }
              }//endWidgetOptions
            }
            /*.tablesorterPager({
                container: $("#pager")
            })*/
            );
        });
        $("#table2").show();
    </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 %}