{% extends '::base.html.twig' %}
{% block menuTop %}
    <div class="col-lg-6 col-xs-12" >
        <div class="container" id="menuTop">
            {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}
        </div>
    </div>
{%endblock %}             

{% block dashboard %}
  <style>

        .fixed-table-header div.header .header{
            margin-right: 17px;
        }

        .fixed-table-container{
            height: 652px; 
            // padding-bottom: 41px;
            width: 100%;
        }
        .table-hover th{

            color: #fff;
            background-color: #428bca;
            border-color: #204d74;
        }
        .table-hover td, .table-hover th {
            text-align: center;  
        }
        body {
            font-size: 11px;
            font-family: Arial, Helvetica, Sans-Serif;
            line-height: 1.3em;
            margin: 0;
            padding: 0;
            /* background-image: url('../images/background.png'); */
            overflow-x: hidden;
        }

         .fixed-table-toolbar .columns-right {
             margin-top: 58px;
        }
    </style>

    <div class="container" style="width:100%">




        <table data-toggle="table" data-url="{{path('numerosaps_getdata')}}" id="tableSitios"
               data-export-types="['excel']"
               data-show-export="true"  
               data-side-pagination="server" 
               data-pagination="true" data-page-list="[20, 50, 100, All]" 
               data-filter-control="true"
               data-filter-show-clear="true"
               style="width:100%">
            <thead>
                <tr>
                    <th data-field="periodo" data-filter-control="input">Periodo</th>
                    <th data-field="nombre" data-filter-control="select">Tipo Servicio</th>
                    <th data-field="numero" data-filter-control="input">Numero ERC-SAP</th>
                    <th data-field="propietario" data-filter-control="input">Propietario Suministro</th>
                    <th data-field="monto" data-filter-control="input">Monto</th>
                    <th data-field="devolucion" data-filter-control="input">Devolucion</th>
                    <th data-field="retribucion" data-filter-control="input">Retribucion</th>
                    <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">Actions</th>
                </tr>
            </thead>
        </table>
    </div>
    <script >




        function operateFormatter(value, row, index) {
            return [
                '<a class="btn btn-default btn-sm ng-scope"  href="javascript:void(0)" title="Edit">',
                '<i class="glyphicon glyphicon-pencil"></i>',
                '</a>',
                '<a class="btn btn-danger btn-sm ng-scope"  href="javascript:void(0)" title="Desactivar">',
                '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'
            ].join('');
        }

        window.operateEvents = {
            'click .btn-default': function (e, value, row, index) {
                var url = '{{path('numerosaps_edit',{'id':'%%','idproyectos':idproyectos,'idmodule':idmodule})}}';
                url = url.replace("%25%25", row.id);
                window.location = url;
            },
            'click .btn-danger': function (e, value, row, index) {

                console.log(value, row, index, row.id);
            }
        };

    </script>
{% endblock %}