{% extends "VacacionVacacionBundle:Default:base-modulos.html.twig" %}

{% block headerIcon %}fa fa-users text-primary{% endblock %}
{% block headerTitle %}Datos del Personal{% endblock %}

{% block contentModule %}
	<div class="col-lg-12 col-md-12">
	   	<table id="main_table" class="table table-bordered nowrap" width="100%">
	   		<thead>
	   			<th>Signum</th>
                <th>HRMS</th>
                <th>Nombre</th>
	   			<th>Apellido</th>
	   			<th>Correo</th>
	   			<th>CM</th>
	   			<th>Fecha Ingreso</th>
	   			<th>Mes Tope</th>
                <th>{{'ticketDetail.status' | trans}}</th>
	   		</thead>
	   		<tbody></tbody>
	   		<tfoot>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tfoot>
	   	</table>
	</div>
{% endblock %}

{% block modalContent %}
    <form method="POST">
        <div class="form-group">
            <label>Signum</label>
            <input id="signum" name="signum" type="text" class="form-control input-sm">
        </div>

        <div class="form-group">
            <label>HRMS</label>
            <input id="hrms" name="hrms" type="text" class="form-control input-sm">
        </div>

        <div class="form-group">
            <label>Nombre</label>
            <input id="name" name="name" type="text" class="form-control input-sm">
        </div>

        <div class="form-group">
            <label>Apellido</label>
            <input id="lastName" name="lastName" type="text" class="form-control input-sm">
        </div>

        <div class="form-group">
            <label>Correo</label>
            <input id="email" name="email" type="text" class="form-control input-sm">
        </div>

        <div class="form-group">
            <label>Fecha Ingreso</label>
            <div class='input-group date'>
                <input id="fechaIngreso" name="fechaIngreso" type='text' class="form-control input-sm">
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>

        <div class="form-group">
            <label>CM</label>
            <select class="form-control input-sm" id="cm" name="cm">
                <option value=""></option>
                {% for item in items %}
                    <option value="{{ item.id }}">{{ item.name }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="checkbox text-center">
            <label>
                <input id="isActive" name="isActive" type="checkbox" value="1" checked>
                Activo
            </label>
        </div>
                        
        <div class="form-group">
            <button id="send" type="button" class="btn btn-primary btn-block" data-add="{{ path('vacacion_personal_add')}}" data-edit="{{ path('vacacion_personal_edit', {'id': 1})}}">Enviar</button>
        </div>
    </form>
{% endblock %}

{% block customJS %}

<script>

    $(document).ready(function() {

        $.fn.dataTable.moment('DD/MM/YYYY');
        $.fn.dataTable.moment('MM/YYYY');

        var table   = '',
        	flagAdd = false,
        	formErr = false,
        	$table  = $('#main_table'),
        	$modal  = $('#myModal')
        	$send   = $('#send'),
        	$form   = $('form');

        $('#fechaIngreso').parent().datetimepicker({
        	format: 'YYYY/MM/DD',
        	useCurrent: false,
        	allowInputToggle: true
        });

        table = $table.DataTable({
            ajax: "{{ path('vacacion_getPersonal') }}",
            sAjaxDataProp: '',
            rowId: 'id',
            select: {
 			    style: 'single'
 			},
            order: [[3, 'asc']],
            columns: [
            	{
                    data: 'signum'
                },
                {
                    data: 'hrms'
                },
                {
            		data: 'name'
            	},
            	{
            		data: 'lastName'
            	},
            	{
            		data: 'email'
            	},
            	{
            		data: 'cm.name'
                },
            	{
            		data: 'fechaIngreso.timestamp', render: function(data) {
            			return moment(data, 'X').format('DD/MM/YYYY')
            		}
            	},
            	{
            		data: 'fechaTope.timestamp', render: function(data) {
            			return moment(data, 'X').format('MM/YYYY')
            		}
            	},
                {
                    data: 'isActive', type: 'html', render: function(data) {
                        
                        if (data == 1) {
                            return '<strong class="text-success">Activo</strong>';
                        }
                        return '<strong class="text-danger">Inactivo</strong>';
                    }
                },
            ],
            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>>',
        	buttons: [
        	   {
        	       text: '<i class="fa fa-user-plus"></i>',
        	       action: function() {

        	            flagAdd = true;
        	            $modal.find('#modal-title').text('Agregar');
        	            $modal.modal('show');
        	       }
        	   },
        	   {
        	       text: '<i class="fa fa-pencil"></i>',
        	       action: function() {

        	            flagAdd = false;
        	            $modal.find('#modal-title').text('Editar');
        	            $modal.modal('show');
        	       }
        	   },
        	   {
        	       extend: 'colvis',
        	       text: '<i class="fa fa-th-list"></i>'
        	   },
               {
                   extend: 'excel',
                   text: '<i class="fa fa-file-excel-o"></i>',
                   filename: 'data_personal'
               }
        	],
        	initComplete: function() {

        	    table.button(1).disable();
                generateFilters(table);
        	}
        });

        table
        .on( 'select', function ( e, dt, type, indexes ) {
            
            table.button(1).enable();
        } )
        .on( 'deselect', function ( e, dt, type, indexes ) {
            
            table.button(1).disable();
        } );

        $modal.on({
         		
            'shown.bs.modal': function(event) { 

         		$('#signum').focus();
                $('#isActive').prop('checked', true);

         		if (!flagAdd) {

         			repopulate(
         				$form, 
         				table.row( { selected: true } ).data()
         			);
         		} 
        	},

        	'hidden.bs.modal': function() {
        			
        	  	if ( formErr ) {
        	  			
        	  		cleanForm($form, true);	
        	  	} else {
        	  			
        	  		emptyForm($form);
        	  	} 
        	}
        });

        $send.click(function(event) {
        		
        	if (validForm($form)) {
        			
        		formErr = false;

        		$.post(
        			flagAdd ? $send.data('add') : $send.data('edit').slice(0,-1) + table.row( { selected: true } ).id(),
        			$form.serialize(), 
        			function(data, textStatus, xhr) {
        					
        				if (data == 1) {
        					$modal.modal('hide');
        					table.ajax.reload();
        				}
        			}
        		);
        	} else {
        			
        		formErr = true;
        	}
        });	
    });

</script>
{% endblock %}