$(document).ready(function () {

    listarPersonaTest();
    initInputs();
    init(); // METODOS CRUD
    MyValidate();
    filtrarPersona();

    $('#btn_agregar_persona').on('click', function () {
        limpiarInputs();
    });

});

var codigoPersona;

function init() {
    listarPersona();
    registrarPersona();
    editarPersona();
}

function listarPersonaTest() {
    $.ajax({
        url: '../PersonaServlet?accion=listarPersonaTest',
        type: 'POST',
        beforeSend: function (xhr) {
//            console.log('Antes de...');
        }, success: function (data, textStatus, jqXHR) {
            console.log(data);
//            var personas = data.data.personas;
//            for (var i = 0; i < personas.length; i++) {
//                var persona = personas[i];
//                console.log(persona.apellidos);
//            }
////            console.log("listadoTest");
        }, complete: function (jqXHR, textStatus) {
//            console.log('Siempre ejecutará esta función');
        }
    });
}

function registrarPersona() {
    $('#btn_registrar_persona').on('click', function () {

        var validator = $('#form_registrar_persona').validate({

            rules: {
                txt_numero_documento: {required: true, digits: true, minlength: 8, maxlength: 8},
                txt_apellidos: {required: true, lettersonly: true, maxlength: 50},
                txt_nombres: {required: true, lettersonly: true, maxlength: 50},
                txt_edad: {required: true, digits: true, maxlength: 2},
                txt_correo: {required: true, email: true, maxlength: 50}
            },
            messages: {
                txt_numero_documento: {required: "Ingresar número de documento.", minlength: "Ingresar 8 dígitos.", maxlength: "Ingresar 8 dígitos.", digits: "Ingresar solo números."},
                txt_apellidos: {required: "Ingresar apellidos.", maxlength: "Ingresar 50 letras como máximo.", lettersonly: "Ingresar solo letras"},
                txt_nombres: {required: "Ingresar nombres.", maxlength: "Ingresar 50 letras como máximo.", lettersonly: "Ingresar solo letras"},
                txt_edad: {required: "Ingresar edad.", maxlength: "Ingresar 2 dígitos como máximo", digits: "Ingresar solo números"},
                txt_correo: {required: "Ingresar correo.", maxlength: "Ingresar 50 letras como máximo.", email: "Ingresar un correo válido"}
            }
        });

        var estado = validator.form();
        if (estado) {
            var json = {
                dni: $('#txt_numero_documento').val().trim(),
                apellidos: $('#txt_apellidos').val().trim(),
                nombres: $('#txt_nombres').val().trim(),
                edad: $('#txt_edad').val().trim(),
                correo: $('#txt_correo').val().trim()
            };

            $.ajax({
                type: 'POST',
                url: '../PersonaServlet?accion=registrarPersona',
                dataType: 'json',
                data: {json: JSON.stringify(json)},
                beforeSend: function (xhr) {
                    console.log('cargando...');
                },
                success: function (data, textStatus, jqXHR) {
                    console.log(data);
                    var status = data.status;
                    if (status) {
                        imprimirAlerta('Correcto!', data.message, 'success');
//                        var table = $('#tabla_persona').DataTable();
//                        table.ajax.reload();
                        recargarTabla();
                        $('#modal_registrar_persona').modal('hide');
                    } else {
                        imprimirAlerta('Error!', data.message, 'error');
                    }

                },
                complete: function (jqXHR, textStatus) {

                }
            });

        }

    });
}

function editarPersona() {
    $('#btn_editar_persona').on('click', function () {

        var validator = $('#form_editar_persona').validate({

            rules: {
                txt_apellidos_editar: {required: true, lettersonly: true, maxlength: 50},
                txt_nombres_editar: {required: true, lettersonly: true, maxlength: 50},
                txt_edad_editar: {required: true, digits: true, maxlength: 2},
                txt_correo_editar: {required: true, email: true, maxlength: 50}
            },
            messages: {
                txt_apellidos_editar: {required: "Ingresar apellidos.", maxlength: "Ingresar 50 letras como máximo.", lettersonly: "Ingresar solo letras"},
                txt_nombres_editar: {required: "Ingresar nombres.", maxlength: "Ingresar 50 letras como máximo.", lettersonly: "Ingresar solo letras"},
                txt_edad_editar: {required: "Ingresar edad.", maxlength: "Ingresar 2 dígitos como máximo", digits: "Ingresar solo números"},
                txt_correo_editar: {required: "Ingresar correo.", maxlength: "Ingresar 50 letras como máximo.", email: "Ingresar un correo válido"}
            }
        });

        var estado = validator.form();

        if (estado) {
            var json = {
                apellidos: $('#txt_apellidos_editar').val().trim(),
                nombres: $('#txt_nombres_editar').val().trim(),
                edad: $('#txt_edad_editar').val().trim(),
                correo: $('#txt_correo_editar').val().trim(),
                codigo: codigoPersona
            };
            $.ajax({
                type: 'POST',
                url: '../PersonaServlet?accion=editarPersona',
                dataType: 'json',
                data: {json: JSON.stringify(json)},
                beforeSend: function (xhr) {
                    console.log('cargando...');
                },
                success: function (data, textStatus, jqXHR) {
                    console.log(data);
                    var status = data.status;
                    if (status) {
                        imprimirAlerta('Correcto!', data.message, 'success');
                        recargarTabla();
                        $('#modal_editar_persona').modal('hide');
                    } else {
                        imprimirAlerta('Error!', data.message, 'error');
                    }
                },
                complete: function (jqXHR, textStatus) {
                }
            });
        }
    });
}

function listarPersona() {
    var txt_criterio_busqueda = $('#txt_criterio_busqueda').val().trim();

    var tabla_persona = $('#tabla_persona').DataTable({
        language: {
            paginate: {'next': '&rarr; ', 'previous': ' &larr;'},
            emptyTable: 'No hay registros'
        },
        ajax: {
            url: '../PersonaServlet?accion=listarPersona',
            type: 'POST',
            dataType: 'json',
            data: {
                search: txt_criterio_busqueda
            }
        },
        processing: true,
        serverSide: true,
        responsive: true,
        iDisplayLength: 10,
        bSort: false,
        bInfo: false,
        searching: false,
        bLengthChange: false,
        bFilter: false,

        aaSorting: [],
        ordering: false,
        scrollX: false,
        ScrollCollapse: true,

        columns: [
            {data: "codigo"},
            {data: "dni"},
            {
                data: null,
                render: function (data, type, row) {
                    return data.apellidos + ", " + data.nombres;
                }
            },
            {data: "edad", className: 'text-center'},
            {data: "correo"},
            {
                data: "estado",
                className: 'text-center',
                render: function (data, type, row) {
                    return data === "1" ? '<span class="label label-success">activo</span>' : '<span class="label label-danger">inactivo</span>';
                }
            },
            {
                data: null,
                className: 'text-center',
                render: function (data, type, row) {
                    return data.estado === "1" ? '<ul class="icons-list"><li title="Editar" data-toggle="modal" data-target="#modal_editar_persona" class="text-primary-600"><a href="#" class="editarPersona"><i class="icon-pencil7"></i></a></li><li title="Desactivar" class="text-success-600"><a href="#" class="desactivarPersona"><i class="icon-switch2"></i></a></li></ul>' : '<ul class="icons-list"><li title="Editar" data-toggle="modal" data-target="#modal_editar_persona" class="text-primary-600"><a href="#" class="editarPersona"><i class="icon-pencil7"></i></a></li><li title="Activar" class="text-danger-600"><a href="#" class="activarPersona"><i class="icon-switch2"></i></a></li></ul>';
                }
            }
        ],
        fnRowCallback: function (row, data, displayIndex, displayIndexFull) {

        },
        fnPreDrawCallback: function (settings) {
        },
        fnDrawCallback: function (settings) {

        },
        createdRow: function (row, data, dataIndex) {

        },
        initComplete: function (settings, json) {

        }
    });
}

$('#tabla_persona tbody').on('click', '.editarPersona', function () {
    var data_row = $('#tabla_persona').DataTable().row($(this).parents('tr')).data();
    console.log(data_row);
    codigoPersona = '';
    $('#txt_numero_documento_editar').val(data_row.dni);
    $('#txt_apellidos_editar').val(data_row.apellidos);
    $('#txt_nombres_editar').val(data_row.nombres);
    $('#txt_edad_editar').val(data_row.edad);
    $('#txt_correo_editar').val(data_row.correo);
    codigoPersona = data_row.codigo;
});

$('#tabla_persona tbody').on('click', '.desactivarPersona', function () {

    var data_row = $('#tabla_persona').DataTable().row($(this).parents('tr')).data();
    var json = {
        codigo: data_row.codigo
    };

    swal({
        title: "¿Estás seguro?",
        text: "¿Desea desactivar a " + data_row.apellidos + ", " + data_row.nombres + " ?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#EF5350",
        confirmButtonText: "Si!",
        cancelButtonText: "No!",
        closeOnConfirm: false,
        closeOnCancel: true
    },
        function (isConfirm) {
            if (isConfirm) {
                $.ajax({
                    url: '../PersonaServlet?accion=desactivarPersona',
                    type: 'POST',
                    dataType: 'json',
                    data: {json: JSON.stringify(json)},
                    beforeSend: function (xhr) {
                    },
                    success: function (data, textStatus, jqXHR) {
                        console.log(data);
                        var status = data.status;
                        if (status) {
                            imprimirAlerta('Desactivado!', data_row.apellidos + ', ' + data_row.nombres + ' fue desactivado con exito!', 'success');
                            recargarTabla();
                        } else {
                            imprimirAlerta('Error!', data.message, 'error');
                        }

                    }
                });
            }
        });

});

$('#tabla_persona tbody').on('click', '.activarPersona', function () {

    var data_row = $('#tabla_persona').DataTable().row($(this).parents('tr')).data();
    var json = {
        codigo: data_row.codigo
    };

    swal({
        title: "¿Estás seguro?",
        text: "¿Desea activar a " + data_row.apellidos + ", " + data_row.nombres + " ?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#EF5350",
        confirmButtonText: "Si!",
        cancelButtonText: "No!",
        closeOnConfirm: false,
        closeOnCancel: true
    },
        function (isConfirm) {
            if (isConfirm) {
                $.ajax({
                    url: '../PersonaServlet?accion=activarPersona',
                    type: 'POST',
                    dataType: 'json',
                    data: {json: JSON.stringify(json)},
                    beforeSend: function (xhr) {
                    },
                    success: function (data, textStatus, jqXHR) {
                        console.log(data);
                        var status = data.status;
                        if (status) {
                            imprimirAlerta('Activado!', data_row.apellidos + ', ' + data_row.nombres + ' fue activado con exito!', 'success');
                            recargarTabla();
                        } else {
                            imprimirAlerta('Error!', data.message, 'error');
                        }

                    }
                });
            }
        });
});

function initInputs() {

    var txt_correo = $('#txt_correo');
    var txt_correo_editar = $('#txt_correo_editar');

    txt_correo_editar.attr({
        disabled: true
    });
    txt_correo.attr({
        disabled: true
    });
}

function imprimirAlerta(title, text, type) {
    var s_col = "#66BB6A";
    var e_col = "#EF5350";
    var w_col = "#FF7043";
    var btnCol;

    if (type === 'error') {
        btnCol = e_col;
    } else if (type === 'warning') {
        btnCol = w_col;
    } else {
        btnCol = s_col;
    }

    swal({
        title: title,
        text: text,
        confirmButtonColor: btnCol,
        type: type
    });

}

function recargarTabla() {

    $('#tabla_persona').DataTable().destroy();
    listarPersona();
}

function filtrarPersona() {
    // PRIMERA FORMA: CON BOTON
    $('#btn_buscar_criterio').on('click', function () {
        recargarTabla();
    });

    // SEGUNDA FORMA: MIENTRAS SE ESCRIBE
//    $('#txt_criterio_busqueda').keyup(function (e) {
//        recargarTabla();
//    });

    // TERCERA FORMA: PRESIONANDO ENTER
    $('#txt_criterio_busqueda').keyup(function (e) {
        if (e.keyCode === 13) {
            recargarTabla();
        }
    });
}

function limpiarInputs() {
    $('#txt_numero_documento').attr({
        autofocus: true
    });
    $('#txt_numero_documento').val('');
    $('#txt_apellidos').val('');
    $('#txt_nombres').val('');
    $('#txt_edad').val('');
    $('#txt_correo').val('');

}

function MyValidate() {

    function stripHtml(value) {
        // remove html tags and space chars
        return value.replace(/<.[^<>]*?>/g, ' ').replace(/&nbsp;|&#160;/gi, ' ')
            // remove numbers and punctuation
            .replace(/[0-9.(),;:!?%#$'"_+=\/-]*/g, '');
    }

    jQuery.validator.addMethod("lettersonly", function (value, element) {
        return this.optional(element) || /^[a-z\s]+$/i.test(value);
    }, "Solo letras.");

    jQuery.validator.setDefaults({
        debug: true,
        ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
        errorClass: 'validation-error-label',
        successClass: 'validation-valid-label',
        highlight: function (element, errorClass) {
            $(element).removeClass(errorClass);
        },
        unhighlight: function (element, errorClass) {
            $(element).removeClass(errorClass);
        },
        // Different components require proper error label placement
        errorPlacement: function (error, element) {

            // Styled checkboxes, radios, bootstrap switch
            if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container')) {
                if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                    error.appendTo(element.parent().parent().parent().parent());
                } else {
                    error.appendTo(element.parent().parent().parent().parent().parent());
                }
            }

            // Unstyled checkboxes, radios
            else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
                error.appendTo(element.parent().parent().parent());
            }

            // Input with icons and Select2
            else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) {
                error.appendTo(element.parent());
            }

            // Inline checkboxes, radios
            else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                error.appendTo(element.parent().parent());
            }

            // Input group, styled file input
            else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
                error.appendTo(element.parent().parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

}

function initInputs() {

    var txt_numero_documento = $('#txt_numero_documento');
    var txt_apellidos = $('#txt_apellidos');
    var txt_nombres = $('#txt_nombres');
    var txt_edad = $('#txt_edad');
    var txt_correo = $('#txt_correo');
    var dominio_correo = '.TI@SACOOLIVEROS.EDU.PE';

//    txt_correo.attr({
//        disabled: true
//    });




}