{% 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">
    	
    	.header-title {
    		font-size: 24px !important;
    		font-weight: normal;
    	}

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

        #menuTop {
            margin-top: 25px;
        }

    	.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;
        }

        .tab-content{
            margin-top: 20px;
        }

        .green{ 
            background-color: #5cb85c !important;
            color: #fff;
        }

    </style>
{% endblock %}

{% block dashboard %}
	<div class="container">
		<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 %}{% endblock %}"></i>
	        		{% block headerTitle %}{% endblock %}
	        	</span>
			</div>

            {% block contentModule %}{% endblock %}
		</div>	
	</div>

    {% block modalModule %}
    <div id="myModal" class="modal" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <i class="fa fa-close"></i>
                    </button>
                    <h1 id="modal-title" class="text-primary text-center">{% block modalTitle %}{% endblock %}</h1>
                </div>
                
                <div class="modal-body">
                    {% block modalContent %}{% endblock %}
                </div>
            </div>
        </div> 
    </div>
    {% endblock %}

    {% block modalModuleBig %}
    <div id="myModalFile" class="modal" role="dialog" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <i class="fa fa-close"></i>
                    </button>
                    <h1 id="modal-title" class="text-primary text-center">{% block modalTitleBig %}{% endblock %}</h1>
                </div>
                
                <div class="modal-body">
                    {% block modalContentBig %}{% endblock %}
                </div>
            </div>
        </div> 
    </div>
    {% endblock %}
	
{% 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 cleanForm($form, emptyFields = false) {

        	$form.find('.form-group').removeClass('has-error');
        	$form.find('.form-control').tooltip('destroy');

        	if (emptyFields) emptyForm($form);
        }

        function emptyForm($form) {

        	$form.find('.form-control').val('');
        }

        function repopulate($form, data) {

        	var inputs = $form.find('.form-control:visible');

        	inputs.each(function(index, el) {
        		
        		var input = $(this),
        			name  = input.prop('name');

        		if ( input.is('select') ) {
                    input.find('option').prop('selected', false);
                    input.find('option').filter(function() {
                        
                        if (typeof data[name] !== 'object') {

                            return $(this).text() === `${data[name]}`;
                        }

                        return $(this).text() === `${data[name].name}`;
                    }).prop('selected', true);

        		} else {
        			if (typeof data[name] !== 'object') {
        				console.log(name);
                        console.log(data[name]);
                        input.val( data[name] );
                    } else {
                        input.val( moment(data[name].timestamp, 'X').format('YYYY/MM/DD') );
                    }
        		}

        	});
        }

        function validForm($form, options) {

        	var inputs  = $form.find('.form-control'),
        		success = true;

        	inputs.each(function(index, el) {
        		
        		var input = $(this),
        			data  = input.data();

                if (input.is(':visible') && !input.is('textarea')) {

        		  success = validInput(input);
        		  if (!success) return false;
                }
        	});

        	return success;
        }

        function validInput($input, type = 'empty', msj = 'Formato incorrecto', place = 'left') {

        	var value = $input.val().trim(),
        		regex = {
        			empty: /.+/,
        			signum: /^[A-Za-zñÑ]{7}$/i,
        			password: /^[0-9]{4}$/,
        			numeric: /^[0-9]{1,}$/,
        			name: null
        		};

        	if ( value.match( regex[type] ) ) {
        		
        		$input.tooltip('destroy');
        		$input.parent().removeClass('has-error');		
        		return true;
        	} else {
        		
        		$input.tooltip('destroy')
        		      .tooltip({ 
        				title: value.length == 0 ? 'Debe llenar el campo' : msj, 
        				placement: place, 
        				trigger: 'manual', 
        				animation: false, 
        				container:'body' })
        		      .tooltip('show')
        		      .parent().addClass('has-error');
        		$input.focus();
        		return false;
        	}
        }

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