var textoCuerpoPopupModal; var tituloPopupModal; var popupModal; var imgPreview; var btnFileUpload; var divDatePicker;
var iptFecha; var hdfNumeroUsuario; var iptNumeroEmpleado; var iptNumeroAutorizacion; var errorFileUpload; var iptFileUploadRequerido;
var cajaLoaderCodigo; var contenedorLoaderCodigo; var loaderCodigo; var ajaxUpload; var btnCancelarSubida;
var hdfPesoMaximoSubirArchivo; var canvasFile; var nameFile; var typeFile;

$(document).on('mousedown touchstart', function (e) {
    if ($(e.target).closest('.datepicker').length == 0) {
        $('.datepicker').hide();
    }
});


$(document).ready(function () {

    hdfPesoMaximoSubirArchivo = $("#hdfPesoMaximoSubirArchivo");
    btnCancelarSubida = $("#btnCancelarSubida");
    cajaLoaderCodigo = $("#cajaLoaderCodigo");
    contenedorLoaderCodigo = $("#contenedorLoaderCodigo");
    loaderCodigo = $("#loaderCodigo");

    MostrarLoaderCodigo(false);
    MostrarLoader(true);

    iptFileUploadRequerido = $("#iptFileUploadRequerido");
    errorFileUpload = $("#errorFileUpload");
    iptNumeroAutorizacion = $("#iptNumeroAutorizacion");
    iptFecha = $("#iptFecha");
    divDatePicker = $("#divDatePicker");
    btnFileUpload = $("#btnFileUpload");
    imgPreview = $("#imgPreview");
    textoCuerpoPopupModal = $("#textoCuerpoPopupModal");
    tituloPopupModal = $("#tituloPopupModal");
    popupModal = $("#popupModal");

    imgPreview.off('click').on('click', function () {
        PrepararFileUpload();
        btnFileUpload.click();
    });

    $("form").validator();
    divDatePicker.datepicker({
        format: "dd/mm/yyyy",
        language: "es",
        orientation: "bottom auto",
        autoclose: true,
        showOnFocus: true,
        enableOnReadOnly: true
    });

    iptFecha.click(function () {
        $('.datepicker').show();
    });
    btnCancelarSubida.click(function () { ajaxUpload.abort(); });
    MostrarLoader(false);
});

function PrepararFileUpload() {
    btnFileUpload.fileupload({
        maxNumberOfFiles: 1,
        disableImageResize: false,
        dataType: 'json',
        autoUpload: false,
        add: function (e, data) {
            var archivo = data.files[0];
            var extensionArchivo = archivo.name.split('.').pop().toLowerCase();
            if ($.inArray(extensionArchivo, ['gif', 'png', 'jpg', 'jpeg', 'ico']) == -1) {
                PreparPopupParaErrorValidacionArchivo("Error extensión archivo", "Extensión de archivo no válida, por favor adjunte una imagen.");
                popupModal.modal({ keyboard: false, backdrop: 'static' });
            }
            else {
                var size = archivo.size / (1024 * 1024);
                if (size <= hdfPesoMaximoSubirArchivo.val()) {
                    iptFileUploadRequerido.val(archivo.name);
                    CargarImagenPreview(data);
                    $("form").validator('validate');
                }
                else {
                    PreparPopupParaErrorValidacionArchivo("Error tamaño de archivo", "Debe seleccionar una imagen con un tamaño menor a " + hdfPesoMaximoSubirArchivo.val() + " megas.");
                    popupModal.modal({ keyboard: false, backdrop: 'static' });
                }

            }
        }
    });
}

function EnviarArchivo_click() {
    var noExistenCamposRequeridosSinLlenar = !($("form").validator('validate').data('bs.validator').hasErrors());
    if (noExistenCamposRequeridosSinLlenar) {
        btnCancelarSubida.removeAttr('disabled');
        sendFiles();
    }
    return false;
}

function CargarImagenPreview(data) {
    if (data.files && data.files[0]) {
        MostrarLoader(true);
        var reader = new FileReader();
        reader.onload = function (e) {
            imgPreview.attr('src', e.target.result);

            var img = new Image();
            img.src = e.target.result;
            img.onload = function () {
                // CREATE A CANVAS ELEMENT AND ASSIGN THE IMAGES TO IT.
                canvas = document.createElement("canvas");
                var value = 50;
                var MAX_WIDTH = 950;
                var MAX_HEIGHT = 950;
                var width = img.width;
                var height = img.height;

                if (width > height) {
                    if (width > MAX_WIDTH) {
                        height *= MAX_WIDTH / width;
                        width = MAX_WIDTH;
                    }
                } else {
                    if (height > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / height;
                        height = MAX_HEIGHT;
                    }
                }
                // RESIZE THE IMAGES ONE BY ONE.
                img.width = width; //(img.width * value) / 100
                img.height = height; //(img.height * value) / 100

                var ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0, img.width, img.height);
                nameFile = data.files[0].name;
                typeFile = data.files[0].type;

                MostrarLoader(false);

            }

        }

        reader.readAsDataURL(data.files[0]);
    }
}

function sendFiles(files) {

    $('#progressbar div').css('width', '0%');
    $('#progressbar').show();

    MostrarLoader(true);

    var dataurl = canvas.toDataURL(typeFile);

    var fileData = dataURItoFile(dataurl, nameFile);
    var formdata = new FormData();
    formdata.append(nameFile, fileData, nameFile);
    ajaxUpload = new XMLHttpRequest();

    ajaxUpload.open("POST", urlManejadorArchivo);

    ajaxUpload.upload.addEventListener("progress", progressHandler, false);
    ajaxUpload.addEventListener("load", successHandler, false);
    ajaxUpload.addEventListener("error", errorHandler, false);
    //ajax.addEventListener("load", completeHandler, false);
    ajaxUpload.addEventListener("abort", abortHandler, false);
    ajaxUpload.setRequestHeader('Cache-Control', false);
    MostrarLoader(false);
    MostrarLoaderCodigo(true);
    ajaxUpload.send(formdata);

}

function dataURItoFile(dataURI, fileName) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], { type: mimeString });
}

function abortHandler(data) {
    data.target.abort();
    window.location = "../Puntos/IngresarCodigo.aspx";
}
function cerrarPopup() {
    window.location = '../Puntos/IngresarCodigo.aspx';
}
function errorHandler(data) {
    MostrarLoaderCodigo(false);
    MostrarLoader(false);
    PreparPopupParaError();
    popupModal.modal({ keyboard: false, backdrop: 'static' });
}
function successHandler(data) {
    var huboError = data.target.response.includes("error");
    if (huboError) {
        console.log(data.target.response);
        MostrarLoaderCodigo(false);
        MostrarLoader(false);
        PreparPopupParaError();
        popupModal.modal({ keyboard: false, backdrop: 'static' });
        RefrescarElementos();
    }
    else {
        var idFoto = data.target.response;
        console.log("GUID del archivo " + data.target.response);
        OtorgarPuntosPorVoucher(idFoto);
    }
}

function progressHandler(data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    if (progress >= 95) {
        btnCancelarSubida.attr('disabled', 'true');
    }
    $('#progressbar div').css('width', progress + '%');
    $('#progressbar div').text(progress + '%');
    if (progress >= 100) {
        MostrarLoader(true);
        MostrarLoaderCodigo(false);
    }
}

function OtorgarPuntosPorVoucher(idFoto) {
    var data = { numeroAutorizacion: iptNumeroAutorizacion.val(), idFoto: idFoto, fecha: iptFecha.val() };

    $.ajax({
        type: 'POST',
        url: urlOtorgarPuntos,
        contentType: "application/json; charset=utf-8", dataType: "json",
        data: JSON.stringify(data),
        error: function (xhr, ajaxOptions, thrownError) {
            MostrarLoader(false);
            PreparPopupParaError();
            popupModal.modal({ keyboard: false, backdrop: 'static' });
        },
        beforeSend: function () {
            MostrarLoader(true);
            MostrarLoaderCodigo(false);
        },
        success: function (json) {
            var huboError = json.d.error;
            if (huboError) {
                MostrarLoader(false);
                PreparPopupParaError();
                popupModal.modal({ keyboard: false, backdrop: 'static' });
            }
            else {
                MostrarLoaderCodigo(false);
                MostrarLoader(false);
                PreparPopupParaExito();
                popupModal.modal({ keyboard: false, backdrop: 'static' });
                RefrescarElementos();
            }
        }
    });
}

function PreparPopupParaExito() {
    tituloPopupModal.text("Archivo enviado");
    textoCuerpoPopupModal.text("Su archivo ha sido enviado exitosamente");
}
function PreparPopupParaError() {
    tituloPopupModal.text("Error envío de archivo");
    textoCuerpoPopupModal.text("Hubo un error al enviar el archivo");
}

function PreparPopupParaErrorValidacionArchivo(titulo, cuerpo) {
    tituloPopupModal.text(titulo);
    textoCuerpoPopupModal.text(cuerpo);
}

function RefrescarElementos() {
    var fechaActual = new Date();
    iptFecha.val(fechaActual.getDate() + "/" + (fechaActual.getMonth() + 1) + "/" + fechaActual.getFullYear());
    iptNumeroAutorizacion.val(null);
    imgPreview.attr('src', '../Imagenes/NC-voucher_btn.png');
    iptFileUploadRequerido.val("");
    //    PrepararFileUpload();
}


function MostrarLoaderCodigo(seDebeMostrarLoader) {
    if (seDebeMostrarLoader) {
        contenedorLoaderCodigo.css("display", "block");
        cajaLoaderCodigo.css("display", "block");
        loaderCodigo.css("display", "block");
    }
    else {
        contenedorLoaderCodigo.css("display", "none");
        loaderCodigo.css("display", "none");
        cajaLoaderCodigo.css("display", "none");
    }
}