$(function () {
    $("#frm-tradein").validate();

    $("#Continue").prop("disabled", true);
    grecaptcha.ready(function() {
        $("#Continue").prop("disabled", false);
    });

    $("#Continue").click(function () {
        if (captcha_public !== "undefined" && captcha_public) {
            grecaptcha.execute(captcha_public, { action: 'tradein' }).then(function(token) {
                document.getElementById("response").value = token;
                
                var $btn = $("#Continue");
                var originalText = $btn.html();
                $btn.prop("disabled", true);
                $btn.html('<i class="fa fa-spinner fa-spin"></i> Sending...');
                
                var frm = $("#frm-tradein");
                if (!frm.valid()) {
                    $btn.prop("disabled", false);
                    $btn.html(originalText);
                    return false;
                }
                if ($("#response").val() === "") {
                    alert('Error Validating. Please contact Customer Support');
                    $btn.prop("disabled", false);
                    $btn.html(originalText);
                    return false;
                }
                $.ajax({
                    url: '/trade_in.php',
                    type: 'POST',
                    data: frm.serialize(),
                    success: function (msg) {
                        window.location = "/trade_in.php?thankyou";
                        return false;
                    },
                    error: function (xhr, status, error) {
                        console.log(xhr);
                        if (xhr.status === 403) {
                            alert("Access Forbidden. This email address is not allowed.");
                        } else if (xhr.responseText === "captcha") {
                            alert("Error Validating. Please contact Customer Support");
                        } else {
                            alert("Please check the fields and confirm all required information is entered.");
                        }
                        $btn.prop("disabled", false);
                        $btn.html(originalText);
                        return false;
                    }
                });
                return false;
            });
        }
    });

    $("#Trade,#Sell").change(function () {
        if($("#Trade").is(':checked'))
            $("#trade-notes").show();
        else
            $("#trade-notes").hide();
    });


    $("#tradein").validate({
        messages: {
            box: "Please select one.",
            manual: "Please select one.",
            warranty: "Please select one.",
            accessories: "Please select one.",
            original_owner: "Please select one.",
            watch_condition: "Please select one.",
            strap_condition: "Please select one.",
            mechanical: "Please select one.",
            polished: "Please select one."
        }
        ,
        errorPlacement: function (error, element) {
            if (element.attr('type') === 'radio') {
                error.insertBefore(element.closest('.form-group'));
            } else {
                error.insertAfter(element);
            }
        }

    });

    $("#warranty_yes,#warranty_no").change(function(){
        var warranty_date = $("#warranty_date");
        warranty_date.rules("remove");
        if(this.value==="Yes") {
            warranty_date.rules("add", {required: true});
        }
    });

    $("#commit").click(function(){
        var $btn = $(this);
        var originalText = $btn.html();
        var frm = $("#tradein");
        if (!frm.valid())
            return false;
        grecaptcha.execute('6LeEsJUUAAAAADqYgDJ4DBnBcWmJ-G2q5BOYaTr1', { action: 'tradein' }).then(function(token) {
            document.getElementById("response").value = token;
            $("#Continue").prop("disabled", true);
            $btn.html('<i class="fa fa-spinner fa-spin"></i> Submitting...');
            $.ajax({
                url: '/trade_in_step2.php',
                type: 'POST',
                data: frm.serialize(),
                success: function (msg) {
                    window.location = "/trade_in_step2.php?thankyou";
                    return false;
                },
                error: function (xhr, status, error) {
                    if (xhr.status === 403) {
                        alert("Access Forbidden. This email address is not allowed.");
                    }
                    else if (xhr.responseText === "captcha")
                        alert("Captcha was not clicked.");
                    else if (xhr.responseText === "unknown")
                        alert("There was an error with your submission <br />Please call our customer service at +1845-357-8300.");
                    else
                        alert("Please check the fields and confirm all required information is entered.");
                    Recaptcha.reload();
                    $("#Continue").prop("disabled", false);
                    $btn.html(originalText);
                    return false;
                }
            });
        });
        return false;
    });
/*
    $.validator.messages.required = '';
    $.validator.messages.equalTo = '(Values do not match)';
    $.validator.messages.email = '(Invalid email address)';
*/
    $("#watch_condition-option").change(function () {
        $("#watch_condition-radio" + $(this).val()).prop('checked', true);
    });
    $("[id^=watch_condition-radio]").change(function() {
        $("#watch_condition-option").val($(this).val());
    });

    $("#strap_condition-option").change(function () {
        $("#strap_condition-radio" + $(this).val()).prop('checked', true);
    });
    $("[id^=strap_condition-radio]").change(function() {
        $("#strap_condition-option").val($(this).val());
    });

    $("#select-files").click(function () {
        $("#file-select").trigger('click');
    });

    // Assigned to variable for later use.
    var form = $('.direct-upload');
    var filesUploaded = [];

    // Place any uploads within the descending folders
    // so ['test1', 'test2'] would become /test1/test2/filename
    var folders = [];

    form.fileupload({
        url: form.attr('action'),
        type: form.attr('method'),
        datatype: 'xml',
        add: function (event, data) {
            // Show warning message if your leaving the page during an upload.
            window.onbeforeunload = function () {
                return 'You have unsaved changes.';
            };

            // Give the file which is being uploaded it's current content-type (It doesn't retain it otherwise)
            // and give it a unique name (so it won't overwrite anything already on s3).
            var file = data.files[0];
            if (!(/\.(gif|jpg|jpeg|tiff|png|bmp)$/i).test(file.name)) {
                alert('You must select an image file only');
                return false;
            }

            if (file.size > 50000000) {
                alert('The file must me under 50MB');
                return false;
            }
            $("#Continue").prop("disabled",true);
            var filename = Date.now() + '.' + file.name.split('.').pop();
            form.find('input[name="Content-Type"]').val(file.type);
            form.find('input[name="key"]').val((folders.length ? folders.join('/') + '/' : '') + filename);

            // Actually submit to form to S3.
            data.submit();

            // Show the progress bar
            // Uses the file size as a unique identifier
            var bar = $('<div class="progress" data-mod="'+file.size+'"><div class="bar"></div></div>');
            $('.progress-bar-area').append(bar);
            bar.slideDown('fast').delay(1000).fadeOut(1000);
        },
        progress: function (e, data) {
            // This is what makes everything really cool, thanks to that callback
            // you can now update the progress bar based on the upload progress.
            var percent = Math.round((data.loaded / data.total) * 100);
            $('.progress[data-mod="'+data.files[0].size+'"] .bar').css('width', percent + '%').html(percent+'%');
        },
        fail: function (e, data) {
            // Remove the 'unsaved changes' message.
            window.onbeforeunload = null;
            $('.progress[data-mod="'+data.files[0].size+'"] .bar').css('width', '100%').addClass('red').html('');
            $("#Continue").prop("disabled",false);
        },
        done: function (event, data) {
            window.onbeforeunload = null;
            $("#file-txt").hide();
            // Upload Complete, show information about the upload in a textarea
            // from here you can do what you want as the file is on S3
            // e.g. save reference to your server using another ajax call or log it, etc.
            var timeStampInMs = window.performance && window.performance.now && window.performance.timing && window.performance.timing.navigationStart ? window.performance.now() + window.performance.timing.navigationStart : Date.now();
            timeStampInMs = "TS" + timeStampInMs;
            var original = data.files[0];
            var txt;
            console.log(data);
            try {
                var s3Result = data.result.documentElement.childNodes;
                txt = s3Result[0].textContent;
            }
            catch (ex) {
                txt = "";
            }
            $("#uploaded_files").val($("#uploaded_files").val() + "|" + txt);
            //$("#file-images").html($("#file-images").html() + "<img id='"+timeStampInMs+"' onclick='remove(\"" + s3Result[0].innerHTML + "\", \"" + timeStampInMs + "\");' height='50px' src='" + s3Result[0].innerHTML +"'>");
            $("#file-images").html($("#file-images").html() + '<div id="' + timeStampInMs + '" onclick="remove(\''+txt+'\', \''+ timeStampInMs +'\')" class="upload-img"><img src="' + txt + '" height="50px"><button type="button" class="btn btn-link"><span class="glyphicon glyphicon-remove"></span></button></div>');
            $("#Continue").prop("disabled",false);
        }
    });

});

function remove(file, id) {
    if(confirm("Remove Image?")) {
        document.getElementById(id).outerHTML = '';
        $("#uploaded_files").val($("#uploaded_files").val().replace("|" + file, ""));
    }
}