import "jquery-ui";
import 'datatables.net-bs5';

import 'cropperjs/dist/cropper.css';
import "jquery-cropper/dist/jquery-cropper.js";



if(typeof pathUplodImageAdd !== 'undefined'){
    
    uploderImagesAnnonce();
    
}





function uploderImagesAnnonce()
{
    let cropper;
    let base64Home;
    let base64Search;
    let base64Detail1;
    let base64Detail2;
    let base64Detail3;
    let base64Detail4;


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

        let typeImage = $("#imgPreviewCropper").attr("data-type-img");
        
        if(typeImage == "home"){

            base64Home = $("#imgPreviewCropper").cropper('getCroppedCanvas', {width: widthImgAccueil, height: heightImgAccueil}).toDataURL('image/jpeg', 1);

            $('#img-preview-home').attr('src', base64Home);

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


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

    $("#upload_image_accueil").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", "home"); 

                var image = new Image();
                image.src = reader.result;
                image.onload = function() {
                    
                    if(image.width != widthImgAccueil){
                        $('#imgPreviewCropper').cropper('destroy');

                        cropper = $("#imgPreviewCropper").cropper({
                                    minContainerWidth: widthImgAccueil,
                                    minContainerHeight: heightImgAccueil,
                                    minCropBoxWidth: widthImgAccueil,
                                    minCropBoxHeight: heightImgAccueil,
                                    zoomable: true,
                                    dragMode: 'move',
                                });

                        if(largeurAnnonce == 1){
                            $('.modal-dialog').css({'max-width':"476px"});
                        }else if(largeurAnnonce == 2){
                            $('.modal-dialog').css({'max-width':"914px"});
                        }else if(largeurAnnonce == 3){
                            $('.modal-dialog').css({'max-width':"1352px"});
                        }else if(largeurAnnonce == 4){
                            $('.modal-dialog').css({'max-width':"1790px"});
                        }
                                   
                        $('#cropperModal').modal('show');

                    }else{
                        base64Home = event.target.result;
                        $("#img-preview-home").attr("src", event.target.result);
                    }
                };
            };
            reader.readAsDataURL(file);
            $("#progress-bar-accueil").css({'width':"0%"});
            $("#progress-bar-accueil").empty().append("0%");
        }
    });

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


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

    $("#upload_image_search").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", "search"); 

                var image = new Image();
                image.src = reader.result;
                image.onload = function() {
                    if(image.width != widthImgAccueil){
                        $('#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{
                        base64Search = event.target.result;
                        $("#img-preview-search").attr("src", event.target.result);
                    }
                };
            };
            reader.readAsDataURL(file);
            $("#progress-bar-search").css({'width':"0%"});
            $("#progress-bar-search").empty().append("0%");
        }
    });
    


    $( "#submit-image-search" ).click(function() {
        $.ajax({
            url: pathUplodImageAdd,
            type: 'POST',
            data: {type:'search', image64:base64Search},
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function(evt) {
                        var percent = (evt.loaded / evt.total) * 100;
                        $("#progress-bar-search").css({'width': percent + "%"});
                        $("#progress-bar-search").empty().append(percent + "%");
                    }, false);
                }
                return xhr;
            },
            success: function() {
                $("#progress-bar-search").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;

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

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



    $( "#submit-image-detail1" ).click(function() {
        $.ajax({
            url: pathUplodImageAdd,
            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: pathUplodImageAdd,
            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;

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

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



    $( "#submit-image-detail3" ).click(function() {
        $.ajax({
            url: pathUplodImageAdd,
            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: pathUplodImageAdd,
            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");
            }
        });
    });

    
}


$('#dataTableAnnonce').DataTable({
    language: {
      url: '../../assets/json/fr-FR.json',
    },
});