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

{% block headerIcon %}fa fa-plane text-primary{% endblock %}
{% block headerTitle %}Control de Vacaciones{% endblock %}

{% block contentModule %}
    <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3">
        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button id="adder" name="adder" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
                    Agregar vacaciones <i class="fa fa-plus"></i>
                </button>
            </div>
            <div class="btn-group">
                <button id="show_search" type="button" class="btn btn-default">
                    Buscar personal <i class="fa fa-search"></i>
                </button>
            </div>
        </div>  
    </div>

    <div id="search_div" class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3" style="display:none">
        <br>
        <div class="input-group">
            <input type="text" class="form-control" id="search_personal" name="search_personal" data-path="{{ path('vacacion_getPersonalControl', {"id":1}) }}" placeholder="Buscar personal..." autofocus>
            <span class="input-group-addon">
                <i class="fa fa-search fa-lg"></i>
            </span>
        </div>
    </div>
    
    <div id="no_result" class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3" style="display:none">
        <br>
        <div class="alert alert-warning">
            <div class="text-center">
                No se han cargado vacaciones
            </div>
        </div>
    </div>

    <div id="progress" class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3" style="display:none">
        <br>
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-success active" role="progressbar" style="width:100%">
                Cargando información...
            </div>
        </div> 
    </div>
     
{% endblock %}

{% block modalTitle %}Control de Vacaciones{% endblock %}

{% block modalContent %}
<div class="row">
    <form method="POST">
    <div class="col-lg-12">
        <div class="form-group">
            <label>Personal</label>
            <select class="form-control input-sm" id="personal" name="personal">
                <option value=""></option>
                {% for persona in personas %}
                    <option value="{{ persona.id }}">{{ persona.lastName }}, {{ persona.name }}</option>
                {% endfor %}
            </select>
        </div>    
    </div>

    <div class="col-lg-6">
        <div class="form-group">
            <label>Inicio</label>
            <div class='input-group date'>
                <input id="fechaIni" name="fechaIni" type='text' class="form-control input-sm">
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="form-group">
            <label>Fin</label>
            <div class='input-group date'>
                <input id="fechaFin" name="fechaFin" type='text' class="form-control input-sm">
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>

    <div class="col-lg-12">
        <div class="form-group">
           <label>Periodo</label>
           <select class="form-control input-sm" id="periodo" name="periodo">
               {% for periodo in periodos %}
                   <option value="{{ periodo.id }}">{{periodo.inicio - 1}}-{{periodo.fin - 1}}</option>
               {% endfor %}
           </select>
        </div>
    </div>

    <div class="col-lg-12">
        <div class="form-group">
           <label>A considerar</label>
           <textarea class="form-control" name="consideracion" id="consideracion" rows="3"></textarea>
        </div>
    </div>

    <div class="col-lg-12">
        <div class="checkbox">
            <label><input type="checkbox" id="adicional" value="">Venta/Indemnización</label>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="form-group">
           <label>Venta</label>
           <select class="form-control input-sm" id="diaVenta" name="diaVenta">
               {% for dia in 0..23 %}
                   <option value="{{ dia }}">{{ dia }}</option>
               {% endfor %}
           </select>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="form-group">
            <label>Indemnización</label>
            <select class="form-control input-sm" id="diaIndemnizacion" name="diaIndemnizacion">
                {% for dia in 0..60 %}
                    <option value="{{ dia }}">{{ dia }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    
    <div class="col-lg-12">
        <div class="form-group">
            <button id="send" type="button" class="btn btn-primary btn-block" data-repop="" data-control="" data-add="{{ path('vacacion_control_add')}}" data-edit="{{ path('vacacion_control_edit', {'id': 1})}}">{{'inbox.add' | trans}}</button>
        </div>
    </div>
    
    <input type="hidden" id="ano" name="ano">
    <input type="hidden" id="mes" name="mes">
    <input type="hidden" id="diaInicio" name="diaInicio">
    <input type="hidden" id="diaFin" name="diaFin">
    </form>
</div> 
{% endblock %}

{% block modalTitleBig %}Carga de Documentos{% endblock %}

{% block modalContentBig %}
<div class="row">
    <div class="col-lg-6">
        <div class="form-group">
            <label>Tipo de Documento</label>
            <select class="form-control input-sm" id="tipoDoc" name="tipoDoc">
                {% for tipo in tipos %}
                    <option value="{{ tipo.id }}">{{ tipo.nombre }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
</div>

<input id="fileExcel" type="file" name="file[]" class="file-loading" data-control="">
    
<div id="loadingFile" class="text-center" style="margin-top: 20px; display: none;">
    <i class="fa fa-spinner fa-lg fa-spin text-primary"></i>&nbsp;
    <strong>Subiendo...</strong>
</div>

<div id="uploadOk" class="text-center" style="margin-top: 20px; display: none;">
    <span class="fa fa-check fa-lg text-success"></span>&nbsp;
    <strong>Listo!</strong>
</div>

<div id="uploadFail" class="text-center" style="margin-top: 20px; display: none;">
    <span class="fa fa-remove fa-lg text-danger"></span>&nbsp;
    <strong>Ocurrió un problema!</strong>
</div>
{% endblock %}

{% block customJS %}

<script>

$(document).ready(function() {

    var table   = '',
        idPers  = '',
        flagAdd = true,
        formErr = false,
        $table  = $('#main_table'),
        $modal  = $('#myModal')
        $send   = $('#send'),
        $form   = $('form')
        $search = $('#search_personal'),
        $noRes  = $('#no_result');

    $('#diaVenta').add($('#diaIndemnizacion')).parent().hide();

    $('#adder').click(function() { flagAdd = true; });

    $('#adicional').change(function(event) {
        
        if ( $(this).is(':checked')) {
            
            $('#diaVenta').add($('#diaIndemnizacion')).parent().show();
        } else {

            $('#diaVenta').add($('#diaIndemnizacion')).parent().hide();
        }
    });

    $('#fechaIni, #fechaFin').parent().datetimepicker({
        format: 'YYYY/M/D',
        useCurrent: false,
        allowInputToggle: true
    });

    $('#fechaFin').focusout(function() {
        
        var d = moment( $(this).val(), 'YYYY/M/D' ),
            c = d.year() - 1 + '-' + d.year();

        $('#periodo').find('option').prop('selected', false).filter(function() {

            return $(this).text() === c;
        }).prop('selected', true);
    });

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

            $('#personal').focus();
            $('#consideracion').val('');
            $('#personal,#ano,#mes').parent().show();

            if (!flagAdd) {
                $('#personal').parent().hide();
                repopulate($form, $send.data('repop'));
            } 
        },

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

    $send.click(function(event) {
            
        var f1 = moment( $('#fechaIni').val(), 'YYYY/M/D' ),
            f2 = moment( $('#fechaFin').val(), 'YYYY/M/D' );

        if ( $('#adicional').is(':checked') && isNaN(f2.year()) ) {
            
            $('#ano').val(f1.year());
            $('#mes').val(f1.month() + 1);
            $('#diaInicio').add($('#diaFin')).val(0);      
        } else {
            if (f1.year() == f2.year() && f1.month() == f2.month()) {

                $('#ano').val(f1.year());
                $('#mes').val(f1.month() + 1);
                $('#diaInicio').val(f1.date());
                $('#diaFin').val(f2.date());
            } else {

                return false;
            }
        }

                $.post(
                    flagAdd ? $send.data('add') : $send.data('edit').slice(0,-1) + $send.data('control'),
                    $form.serialize(), 
                    function(data, textStatus, xhr) {
                            
                        if (data == 1) {
                            $modal.modal('hide');
                        }

                        if (!flagAdd) {

                            getStat(idPers);
                        }
                    }
                );
        }); 

        $search.autocomplete({
            minLength: 2,
            source: function (request, response) {

                $.ajax({
                    url: "{{path('vacacion_getPersonalBy')}}",
                    dataType: "json",
                    beforeSend: function () {

                        $search.next().find('i').removeClass().addClass('fa fa-spinner fa-lg fa-spin text-success');
                    },
                    data: {
                        parameter: request.term
                    },
                    success: function (data) {

                        response(data);
                        $search.next().find('i').removeClass().addClass('fa fa-search fa-lg');
                    }
                });
            },
            select: function (event, ui) {
                
                $search.val(ui.item.signum);
                idPers = ui.item.id; 

                getStat(idPers);

                return false;
            }
        })
            .autocomplete("instance")._renderItem = function (ul, item) {
                
                return $("<li>").append("<a><strong>"+item.signum+"</strong> "+item.name+", "+item.last_name+"</a>").appendTo(ul);
            };

    $('#show_search').click(function(event) {
            
        $div = $('#search_div');

        if ($div.is(':visible')) {

            $div.hide();
        } else {

            $div.show();
            $search.focus();
        }
    });

    $('#fileExcel').fileinput({
        ajaxSettings: {
            beforeSend: function() { 
                $('#loadingFile').fadeIn(); 
            },
        },
        uploadUrl: "{{ path('vacacion_uploadVacacionDoc') }}",
        uploadAsync: false,
        minFileCount: 1,
        maxFileCount: 2,
        overwriteInitial: false,
        uploadExtraData: function() {
            return {
                tipoDoc: $('#tipoDoc').val(),
                idControl: $('#fileExcel').data('control')
            };
        },
        showPreview: true,
        previewFileExtSettings: {
            'doc': function (ext) {
                return ext.match(/(doc|docx)$/i);
            },
            'xls': function (ext) {
                return ext.match(/(xls|xlsx)$/i);
            },
            'ppt': function (ext) {
                return ext.match(/(ppt|pptx)$/i);
            }
        }
    });

    $('#fileExcel').on('filebatchuploaderror', function(event, data, previewId, index) {

        $('#uploadOk').hide();
        $('#loadingFile').hide();
        $('#uploadFail').show(0).delay(10000).hide(0);
    });

    $('#fileExcel').on('filebatchuploadsuccess', function(event, data, previewId, index) {

        $('#uploadFail').hide();
        $('#loadingFile').hide();
        $('#uploadOk').fadeIn();
    });

    function getStat(id) {

        $('#progress').show();
        $('#reporte-meses').remove();

        $.get(
            $search.data('path').slice(0,-1) + id,
            function(data, textStatus, xhr) {
                
                $('#progress').hide();

                if (data == 0) {

                    $noRes.show(0).delay(2000).hide(0);
                    return false;
                }

                $('#content').append(data);

                $('.nav-tabs li').first().addClass('active');
                $('.tab-content div').first().addClass('active');

                $('.edit-month').click(function(event) {
                    
                    $panel  = $(this).closest('.panel'),
                    idPanel = $panel.attr('id'),
                    repop   = {
                        periodo: $panel.find(`#${idPanel}_periodo`).text(),
                        diaIndemnizacion: $panel.find(`#${idPanel}_indemnizacion`).text(),
                        diaVenta: $panel.find(`#${idPanel}_venta`).text(),
                        fechaIni: $panel.find(`#${idPanel}_start`).data('date'),
                        fechaFin: $panel.find(`#${idPanel}_end`).data('date'),
                        consideracion: $panel.find(`#${idPanel}_consideracion`).text(),
                    };
                   
                    $send.data('control', $panel.data('control')).data('repop', repop);
                    flagAdd = false;
                });

                $('.add-doc').click(function(event) {
                    
                    $panel  = $(this).closest('.panel'),
                    idPanel = $panel.attr('id');
                    $('#fileExcel').data('control', $panel.data('control'));
                });

                $('.delete-control').click(function(event) {

                    $.get(
                        $(this).data('path').slice(0,-1) + $(this).closest('.panel').data('control'),
                        function(data, textStatus, xhr) {
                            
                            if (data == 1) {
                                getStat(idPers);
                            }
                        }
                    );
                });
            }
        );            
    }
});  
    
</script>
{% endblock %}