$(document).ready(function () {
    // Init
    $('.image-section').hide();
    $('.loader').hide();
    $('#result').hide();

    // Upload Preview
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {

                $('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
//                $('#imagePreview').css('url',  'url(' + e.target.result + ')');
//                $('#imagePreview').css('src',  e.target.result );
//                $('#imagePreview').css('height','auto');
                $('#imagePreview').hide();
                $('#imagePreview').fadeIn(650);
//                $('#img_show').css('background-image', 'url(' + e.target.result + ')')
//                $('#img_show').css('height','100%')
//                $('#imagePreview').css('background-repeat','no-repeat')
//                $('#imagePreview').css('background-size', 'auto')
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#imageUpload").change(function () {
        $('.image-section').show();
        $('#btn-predict').show();
        $('#result').text('');
        $('#result').hide();
//
        readURL(this);
    });



    $('select').on('change', function(e){
//        alert(this.value);
//        alert($('select').find("option:selected").val());
        var sel_model=$('select').find("option:selected").val()
//        var user = $('#inputUsername').val();
//		var pass = $('#inputPassword').val();
//        alert(sel_model);
		$.ajax({
			url: '/selected_model',
//			data: $('form').serialize(),
			data: {sel_model: sel_model},
			type: 'POST',
			success: function(response){
//				console.log(response);
//				alert(response);
			},
			error: function(error){
				console.log(error);
			}
		});
  });

    // Predict
    $('#btn-predict').click(function () {
//        var selected_model=$('select').find("option:selected").val()
        var form_data = new FormData($('#upload-file')[0]);
//        alert('form_data ',form_data)
        // Show loading animation
        $(this).hide();
        $('.loader').show();

        // Make prediction by calling api /predict
        $.ajax({
            type: 'POST',
            url: '/predict',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            async: true,
            success: function (data) {
                // Get and display the result
                $('.loader').hide();
                $('#result').fadeIn(600);
//                $('#result').text(' Result:  ' + data);
                $('#result').html(data)
                console.log('Success!');
            },
        });
    });

});
