{% extends "base.html.twig" %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/buttons.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/select.bootstrap.min.css')}}">
    <style type="text/css">
    	
    	#menuTop {
            margin-top: 20px;
        }
        
        .header-title {
    		font-size: 20px !important;
    		font-weight: normal;
    	}

    	#main_table {
    	    border: none !important;
    	    text-align: left;
    	    font-weight: normal;
    	    font-size: 12px;
    	}

        .scroll {
            overflow-y: hidden;
            overflow-x: scroll;
            width: 100%;
        }

    	.trimText {
    	    max-width: 250px;
    	    overflow: hidden;
    	    text-overflow: ellipsis;
    	    white-space: nowrap;
    	    cursor: pointer; 
    	}

    	.cursor {
    	    cursor: pointer; 
    	}

        input[type="text"].input-sm {
            width: 100% !important;
        }

    </style>
{% endblock %}



{% block dashboard %}
	<div class="{% block dashboardClass %}container{% endblock %}">
		<div id="content" class="row">
			<div class="col-lg-12 col-md-12 page-header">
	        	<span class="header-title text-muted">
	        		<i class="{% block headerIcon %}fa fa-cog fa-lg{% endblock %}"></i>
	        		<i>{% block headerTitle %}{% endblock %}</i>
	        	</span>
                <span class="pull-right text-primary">
                    <a href="{{paths.main}}"><i class="fa fa-home fa-lg"></i> Inicio</a>
                </span>
			</div>

            {% block contentModule %}
                {% block defaultContentModule %}
                    
                <div class="col-lg-12 col-md-12">
                    {% if headers is not empty %}
                    <div class="scroll">   
                        <table id="main_table" class="table table-bordered nowrap" width="100%">
                            <thead>
                                {% for header in headers %}
                                    <th>{{header|humanize}}</th>
                                {% endfor %}
                            </thead>
                            <tbody></tbody>
                            <tfoot>
                                {% for header in headers %}
                                    <th></th>
                                {% endfor %}
                            </tfoot>
                        </table>
                    {% else %}
                        <a href="{{paths.add}}"><i class="fa fa-plus"></i> Agregar configuración</a>
                    {% endif %}
                    </div>
                </div>
                {% endblock %}
                {% block customContentModule %}{% endblock %}
            {% endblock %}
		</div>	
	</div>
	
{% endblock %}

{% block javascripts %}
	<script src="{{ asset('datatables/moment.min.js') }}"></script>
	<script src="{{ asset('datatables/js/datatables.min.js') }}"></script>
	<script src="{{ asset('datatables/js/jquery.dataTables.min.js') }}"></script>
	<script src="{{ asset('datatables/js/dataTables.bootstrap.min.js') }}"></script>
	<script src="{{ asset('datatables/js/dataTables.buttons.min.js') }}"></script>
	<script src="{{ asset('datatables/js/buttons.bootstrap.min.js') }}"></script>
	<script src="{{ asset('datatables/js/buttons.flash.min.js') }}"></script>
	<script src="{{ asset('datatables/js/buttons.html5.min.js') }}"></script>
	<script src="{{ asset('datatables/js/buttons.colVis.min.js') }}"></script>
	<script src="{{ asset('datatables/js/dataTables.select.min.js') }}"></script>
	<script src="{{ asset('datatables/js/jszip.min.js') }}"></script>
	<script src="{{ asset('datatables/js/datetime-moment.js') }}"></script>
	<script>

        function generateFilters(table) {

            table.columns().every(function() {

                var data = this.data(),
                    uniq = data.unique(),
                    dataLength = data.length,
                    uniqLength = uniq.length,
                    sample = data[0],
                    maxPerColumn = uniq.sort(function(a, b) {
                                    if (a == null || b == null) {
                                        return 0;
                                    }
                                    return b.length-a.length;
                                }),
                    maxLength = maxPerColumn[0] != null ? maxPerColumn[0].length : 0;
                
                if (uniqLength !== 1 ) {

                    if (dataLength == uniqLength || !isNaN(sample) || maxLength > 50) {
                        
                        generateInputFilter(this);
                    } else {
                        
                        generateSelectFilter(this);
                    } 
                }
                  
            });
        }

        function generateSelectFilter(column) {

            var  footer = $( column.footer() ),
                 select = $('<select class="input-sm"><option value=""></option></select>').appendTo(footer),
                 values = column.data().unique().sort();

            select.change(function() {
                
                var criterio = $.fn.dataTable.util.escapeRegex( $(this).val() );
                column.search( criterio ? '^'+criterio+'$' : '', true, false ).draw();   
            });

            for (var i = 0; i < values.length; i++) {
                
                select.append(
                    $('<option/>').text(values[i]).val(values[i])
                );
            }
        }

        function generateInputFilter(column) {

            var  footer = $( column.footer() ),
                 input  = $('<input/>').attr('type', 'text').addClass('form-control input-sm').appendTo(footer);

            input.keyup(function() {
               
                var value = $(this).val();

                if (column.search() !== value) {

                    column.search(value).draw();
                }
            });
        }

	</script>
    {% block defaultJS %}
    <script>
        $.fn.dataTable.moment('DD/MM/YYYY');
        $.fn.dataTable.moment('MM/YYYY');

        var table  = '',
            $table = $('#main_table');

        table = $table.DataTable({
            ajax: "{{ paths.get }}",
            sAjaxDataProp: '',
            rowId: 'id',
            select: {
                style: 'single'
            },
            lengthMenu: [ [ 25, 50, 75, 100, 200, -1 ], [ 25, 50, 75, 100, 200, 'Todos' ] ],
            dom: '<"row"<"col-lg-5 col-md-5" B><"col-lg-3 col-md-2" l><"col-lg-4 col-md-3" f>>rt<"row"<"col-lg-8 col-md-8" p><"col-lg-4 col-md-4" i>>',
            columns: [
                {% for header in headers if headers is not empty %}
                    {data: '{{header}}'},
                {% endfor %}
            ],
            columnDefs: [
                { targets: [0], visible: false }
            ],
            order: [[1, 'asc']],
            buttons: [
               {
                   text: '<i class="fa fa-refresh"></i>',
                   action: function() {

                        table.ajax.reload();
                   }
               },
               {
                   extend: 'colvis',
                   text: '<i class="fa fa-th-list"></i>'
               },
               {
                   text: '<i class="fa fa-plus"></i>',
                   action: function() {

                        window.location.assign('{{paths.add}}');
                   }
               },
               {% if paths.edit %}
               {
                   text: '<i class="fa fa-pencil"></i>',
                   className: 'btn-hideable',
                   action: function() {

                        var path = '{{paths.edit}}',
                            id   = table.row( { selected: true } ).id();
                        
                        window.location.assign(path.slice(0,-1) + id);
                   }
               },
               {% endif %}
               {% if paths.delete %}
               {
                   text: '<i class="fa fa-trash"></i>',
                   className: 'btn-hideable',
                   action: function() {

                        var path = '{{paths.delete}}',
                            id   = table.row( { selected: true } ).id();

                        table.buttons('.btn-hideable').disable();

                        $.get(
                            path.slice(0,-1) + id, 
                            function(data) {
                                
                                table.ajax.reload();  
                            }
                        );
                   }
               },
               {% endif %}
            ],
            initComplete: function() {
                
                table.buttons('.btn-hideable').disable();
                generateFilters(table);
            }
        });

        table
        .on('select', function(e, dt, type, indexes) {
            
            table.buttons('.btn-hideable').enable();
        })
        .on('deselect', function(e, dt, type, indexes) {
            
            table.buttons('.btn-hideable').disable();
        });
        
        {% block customJS %}{% endblock %}
    </script>
    {% endblock %}
{% endblock %}