$( "#article_limit_type_0" ).click(function() {
    $('#article-limita-date').css('display','block');
    $('#article-limita-quanti').css('display',"none");
    $('#article_limit_quantite').val('');
});

$( "#article_limit_type_1" ).click(function() {
    $('#article-limita-date').css('display','none');
    $('#article-limita-quanti').css('display',"block");
    $('#article_limit_date').val('');
});



if(typeof pathArticleUplodImageAdd !== 'undefined'){
    
    uploderImagesArticle();
    
}

function uploderImagesArticle(){

    let cropper;
    let base64Default;
    let base64Detail1;
    let base64Detail2;
    let base64Detail3;
    let base64Detail4;


    $( "#resize-image" ).click(function() {

        let typeImage = $("#imgPreviewCropper").attr("data-type-img");
        
        if(typeImage == "default"){
            
            base64Default = $("#imgPreviewCropper").cropper('getCroppedCanvas', {width: 438, height: 240}).toDataURL('image/jpeg', 1);
            $('#img-preview-default').attr('src', base64Default);
        }
        $('#cropperModal').modal('hide');
    });

/***************************************************************************** */

    $("#upload_image_default").on('change', function(e) {
        const file = e.target.files[0];
        
        if (file) {
            let reader = new FileReader();
           
            reader.onload = function (event) {
                
                $("#imgPreviewCropper").attr("src", event.target.result);
                $("#imgPreviewCropper").attr("data-type-img", "default"); 

                var image = new Image();
                image.src = reader.result;
                image.onload = function() {

                    if(image.width != 438){
                        $('#imgPreviewCropper').cropper('destroy');

                        cropper = $("#imgPreviewCropper").cropper({
                                        minContainerWidth: 438,
                                        minContainerHeight: 240,
                                        minCropBoxWidth: 438,
                                        minCropBoxHeight: 240,
                                        zoomable: true,
                                        dragMode: 'move',
                                    });
                        
                        $('.modal-dialog').css({'max-width':"476px"});
                        $('#cropperModal').modal('show');
                    }else{
                        base64Default = event.target.result;
                        $("#img-preview-default").attr("src", event.target.result);
                    }
                };
            };
            reader.readAsDataURL(file);
            $("#progress-bar-default").css({'width':"0%"});
            $("#progress-bar-default").empty().append("0%");
        }
    });
    


    $( "#submit-image-default" ).click(function() {
        $.ajax({
            url: pathArticleUplodImageAdd,
            type: 'POST',
            data: {type:'default', image64:base64Default},
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function(evt) {
                        var percent = (evt.loaded / evt.total) * 100;
                        $("#progress-bar-default").css({'width': percent + "%"});
                        $("#progress-bar-default").empty().append(percent + "%");
                    }, false);
                }
                return xhr;
            },
            success: function() {
                $("#progress-bar-default").empty().append("Terminer");
            }
        });
    });

/****************************************************************************** */


$("#upload_image_detail1").on('change', function(e) {

    const file = e.target.files[0];

    if (file) {
        let reader = new FileReader();
        
        reader.onloadend = function (event) {

            $("#img-preview-detail1").attr("src", event.target.result);
          
            base64Detail1 = event.target.result;
        };
        reader.readAsDataURL(file);

        $("#progress-bar-detail1").css({'width':"0%"});
        $("#progress-bar-detail1").empty().append("0%");
    }
});



$( "#submit-image-detail1" ).click(function() {
    $.ajax({
        url: pathArticleUplodImageAdd,
        type: 'POST',
        data: {type:'detail1', image64:base64Detail1},
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
                xhr.upload.addEventListener('progress', function(evt) {
                    var percent = (evt.loaded / evt.total) * 100;
                    $("#progress-bar-detail1").css({'width': percent + "%"});
                    $("#progress-bar-detail1").empty().append(percent + "%");
                }, false);
            }
            return xhr;
        },
        success: function() {
            $("#progress-bar-detail1").empty().append("Terminer");
        }
    });
});




    /******************************************************************************** */


    $("#upload_image_detail2").on('change', function(e) {

        const file = e.target.files[0];

        if (file) {
            let reader = new FileReader();
            
            reader.onloadend = function (event) {

                $("#img-preview-detail2").attr("src", event.target.result);
            
                base64Detail2 = event.target.result;

                //console.log(base64Detail2);
            };
            reader.readAsDataURL(file);

            $("#progress-bar-detail2").css({'width':"0%"});
            $("#progress-bar-detail2").empty().append("0%");
        }
    });



    $( "#submit-image-detail2" ).click(function() {
        $.ajax({
            url: pathArticleUplodImageAdd,
            type: 'POST',
            data: {type:'detail2', image64:base64Detail2},
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function(evt) {
                        var percent = (evt.loaded / evt.total) * 100;
                        $("#progress-bar-detail2").css({'width': percent + "%"});
                        $("#progress-bar-detail2").empty().append(percent + "%");
                    }, false);
                }
                return xhr;
            },
            success: function() {
                $("#progress-bar-detail2").empty().append("Terminer");
            }
        });
    });


    /*********************************************************************** */

    $("#upload_image_detail3").on('change', function(e) {

        const file = e.target.files[0];

        if (file) {
            let reader = new FileReader();
            
            reader.onloadend = function (event) {

                $("#img-preview-detail3").attr("src", event.target.result);
              
                base64Detail3 = event.target.result;
            };
            reader.readAsDataURL(file);

            $("#progress-bar-detail3").css({'width':"0%"});
            $("#progress-bar-detail3").empty().append("0%");
        }
    });



    $( "#submit-image-detail3" ).click(function() {
        $.ajax({
            url: pathArticleUplodImageAdd,
            type: 'POST',
            data: {type:'detail3', image64:base64Detail3},
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function(evt) {
                        var percent = (evt.loaded / evt.total) * 100;
                        $("#progress-bar-detail3").css({'width': percent + "%"});
                        $("#progress-bar-detail3").empty().append(percent + "%");
                    }, false);
                }
                return xhr;
            },
            success: function() {
                $("#progress-bar-detail3").empty().append("Terminer");
            }
        });
    });


/**************************************************************************** */

    $("#upload_image_detail4").on('change', function(e) {

        const file = e.target.files[0];

        if (file) {
            let reader = new FileReader();
            
            reader.onloadend = function (event) {

                $("#img-preview-detail4").attr("src", event.target.result);
              
                base64Detail4 = event.target.result;

                //console.log(base64Detail4);
            };
            reader.readAsDataURL(file);

            $("#progress-bar-detail4").css({'width':"0%"});
            $("#progress-bar-detail4").empty().append("0%");
        }
    });



    $( "#submit-image-detail4" ).click(function() {
        $.ajax({
            url: pathArticleUplodImageAdd,
            type: 'POST',
            data: {type:'detail4', image64:base64Detail4},
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function(evt) {
                        var percent = (evt.loaded / evt.total) * 100;
                        $("#progress-bar-detail4").css({'width': percent + "%"});
                        $("#progress-bar-detail4").empty().append(percent + "%");
                    }, false);
                }
                return xhr;
            },
            success: function() {
                $("#progress-bar-detail4").empty().append("Terminer");
            }
        });
    });


}