var table = new DataTable('#carrComposite', {
    processing: true,
    serverSide: true,
    ajax: {
        url: "{{ route('composite.ajax') }}",
        data: function(data){
            data.num_usuario_sel    = '{{ $talento_escol_detalhes->id }}';
        }
    },
    columns: [
        { "data": "seleciona_talento_composite", "name": "seleciona_talento_composite", "title": ""},
        { "data": "cartao", "name": "cartao", "title": ""},
        { "data": "nome_arquivo", "name": "nome_arquivo", "title": "Arquivo"},
        { "data": "dimensao_altura", "name": "dimensao_altura", "title": "Altura"},
        { "data": "dimensao_largura", "name": "dimensao_largura", "title": "Largura"},
        { "data": "tamanho_img", "name": "tamanho_img", "title": "Tamanho"},
        { "data": "created_by", "name": "created_by", "title": "Criado Por"},
        { "data": "created_at", "name": "created_at", "title": "Criado Às"},
        { "data": "updated_by", "name": "updated_by", "title": "Atualizado Por"},
        { "data": "updated_at", "name": "updated_at", "title": "Atualizado Às"},
        { "data": "action", "name": "action", "title": ""},
    ],
    language: {
        url: 'https://cdn.datatables.net/plug-ins/1.11.3/i18n/pt_br.json',
    },
});

var cropper;
var image = document.getElementById('cropImgEdit');
var previewImage = document.getElementById('mc-cover');

$('#addComposite').on('shown.bs.modal', function () {
    cropper = new Cropper(image, {
        aspectRatio: 2.5/3,
        viewMode: 1,
        autoCropArea: 1,
        ready: function() {
            updatePreview();
        },
        crop: function() {
            updatePreview();
        }
    });
}).on('hidden.bs.modal', function () {
    // Destruir o cropper quando o modal for fechado
    cropper.destroy();
    cropper = null;
    previewImage.src = '';
});

function updatePreview() {
    // Gerar o canvas do preview
    var canvas = cropper.getCroppedCanvas({
        width: 200,  // Defina o tamanho do preview como desejar
        height: 200,
    });
    previewImage.src = canvas.toDataURL('image/png');
}

function capturarCompo() {
    // Seleciona a div que será capturada
    const elementoParaCapturar = document.getElementById('result-add-composite');

    // Usa html2canvas para capturar a div
    html2canvas(elementoParaCapturar).then(function(canvas) {
        // Limpa a área de resultado para exibir a nova imagem
        document.getElementById('resultFinalComposite').innerHTML = '';

        // Adiciona a imagem gerada dentro da div de resultado
        document.getElementById('resultFinalComposite').appendChild(canvas);


        // Salvar Composite 
        var form_data = new FormData();

        var imgCompoFinal = canvas.toDataURL("image/png"); //imgCompoFinal is data:image/png;base64
        imgCompoFinal = imgCompoFinal.replace('data:image/png;base64,', '');

        var num_usuario_sel = '{{ $talento_escol_detalhes->id }}'
        var respRegistroNum = '{{ auth()->user()->id }}';

        form_data.append('_token', "{{ csrf_token() }}");
        form_data.append('num_usuario_sel', num_usuario_sel);
        form_data.append('imgCompoFinal', imgCompoFinal);
        form_data.append('respRegistroNum', respRegistroNum);
        
        $.ajax({
            url: '{{ route('talentos.composite_salvar') }}',
            dataType: 'text',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            beforeSend: function () {
                $("#result-salvar-composite").html("<img class='img' height='50' src='/storage/padrao/carregando.gif'/>");
            },
            success: function(data){
                $("#result-salvar-composite").html(data);
                recar_table();
            }
        });

    });
}

function cropImage(divDestino) {
    var croppedImage = cropper.getCroppedCanvas().toDataURL("image/png");

    document.getElementById(divDestino).src = croppedImage;
}

function fotoSelCropper(caminho_img) {
    cropper.destroy();
    
    var img_cropper = '../../storage/'+caminho_img;

    $('#cropImgEdit').attr('src', img_cropper);

    var image = document.getElementById('cropImgEdit');

    var posicao =  $('#compoSelAtivo').val();

    if(posicao == 1){
        cropper = new Cropper(image, {
            aspectRatio: 2.5/3,
            viewMode: 1,
            autoCropArea: 1,
            ready: function() {
                updatePreview();
            },
            crop: function() {
                updatePreview();
            }
        });
    } else if(posicao == 2 || posicao == 3){
        cropper = new Cropper(image, {
            aspectRatio: 4/6,
            viewMode: 1,
            autoCropArea: 1,
            ready: function() {
                updatePreview();
            },
            crop: function() {
                updatePreview();
            }
        });
    } else{

    }
}

function atualizaCropper(posicao, divDestino, divPreview) {
    previewImage = document.getElementById(divPreview);

    $('#compoSelAtivo').val(posicao);

    cropper.destroy();
    cropper = null;

    if(posicao == 1){
        cropper = new Cropper(image, {
            aspectRatio: 2.5/3,
            viewMode: 1,
            autoCropArea: 1,
            ready: function() {
                updatePreview();
            },
            crop: function() {
                updatePreview();
            }
        });
    } else if(posicao == 2 || posicao == 3){
        cropper = new Cropper(image, {
            aspectRatio: 4/6,
            viewMode: 1,
            autoCropArea: 1,
            ready: function() {
                updatePreview();
            },
            crop: function() {
                updatePreview();
            }
        });
    } else{

    }

    $('#carrFotoComposite').modal('show');

    $('#cropImageBtn').attr('data-posicao', posicao);
    $('#cropImageBtn').attr('data-div_destino', divDestino);
    $('#cropImageBtn').attr('onclick', "cropImage('"+divDestino+"')");
    $('#cropImageBtn').html('<i class="bi bi-camera-fill"></i> Salvar Imagem (Posição 0'+posicao+')');
    
}

function recar_table() {
    table = $('#carrComposite').DataTable();
    table.destroy();

    table = new DataTable('#carrComposite', {
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('composite.ajax') }}",
            data: function(data){
                data.num_usuario_sel    = '{{ $talento_escol_detalhes->id }}';
            }
        },
        columns: [
            { "data": "seleciona_talento_composite", "name": "seleciona_talento_composite", "title": ""},
            { "data": "cartao", "name": "cartao", "title": ""},
            { "data": "nome_arquivo", "name": "nome_arquivo", "title": "Arquivo"},
            { "data": "dimensao_altura", "name": "dimensao_altura", "title": "Altura"},
            { "data": "dimensao_largura", "name": "dimensao_largura", "title": "Largura"},
            { "data": "tamanho_img", "name": "tamanho_img", "title": "Tamanho"},
            { "data": "created_by", "name": "created_by", "title": "Criado Por"},
            { "data": "created_at", "name": "created_at", "title": "Criado Às"},
            { "data": "updated_by", "name": "updated_by", "title": "Atualizado Por"},
            { "data": "updated_at", "name": "updated_at", "title": "Atualizado Às"},
            { "data": "action", "name": "action", "title": ""},
        ],
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.11.3/i18n/pt_br.json',
        },
    });

    statusDisplayTable();

    $('#escol-acoes').hide();
}

function btnDisplayTable(tipo_view) {
    var new_tipo_view = $("#display-table").val(tipo_view);

    if (tipo_view == 'cartoes') {
        $("#carrComposite").addClass('cards');
        $("#carrComposite thead").addClass('d-none');

        $("#carrComposite").addClass('cards');
        $("#carrComposite thead").addClass('d-none');

        table.column(1).visible(true);
        table.column(2).visible(false);
        table.column(3).visible(false);
        table.column(4).visible(false);
        table.column(5).visible(false);
        table.column(6).visible(false);
        table.column(7).visible(false);
        table.column(8).visible(false);
        table.column(9).visible(false);
        table.column(10).visible(false);
    } else if(tipo_view == 'lista') {
        $("#carrComposite").removeClass('cards');
        $("#carrComposite thead").removeClass('d-none');

        table.column(1).visible(false);
        table.column(2).visible(true);
        table.column(3).visible(true);
        table.column(4).visible(true);
        table.column(5).visible(true);
        table.column(6).visible(true);
        table.column(7).visible(true);
        table.column(8).visible(true);
        table.column(9).visible(true);
        table.column(10).visible(true);
    } else{

    }
}

function statusDisplayTable() {
    var new_tipo_view = $("#display-table").val();

    if (new_tipo_view == 'cartoes') {
        $("#carrComposite").addClass('cards');
        $("#carrComposite thead").addClass('d-none');

        table.column(1).visible(true);
        table.column(2).visible(false);
        table.column(3).visible(false);
        table.column(4).visible(false);
        table.column(5).visible(false);
        table.column(6).visible(false);
        table.column(7).visible(false);
        table.column(8).visible(false);
        table.column(9).visible(false);
        table.column(10).visible(false);
    } else if(new_tipo_view == 'lista') {
        $("#carrComposite").removeClass('cards');
        $("#carrComposite thead").removeClass('d-none');

        table.column(1).visible(false);
        table.column(2).visible(true);
        table.column(3).visible(true);
        table.column(4).visible(true);
        table.column(5).visible(true);
        table.column(6).visible(true);
        table.column(7).visible(true);
        table.column(8).visible(true);
        table.column(9).visible(true);
        table.column(10).visible(true);
    } else{

    }
}

function showTalentoAcoes() {
    if ($('input[name="talentos-composite"]:checked').length > 0) {
        $('#escol-acoes').show();
    } else {
        $('#escol-acoes').hide();
    }
}

function excluirComposite() {
    $.ajaxSetup({
        headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
    });

    var form_data = new FormData();

    var numUsuario      = '{{ $talento_escol_detalhes->id }}';
    var respRegistroNum = '{{ auth()->user()->id }}';

    var array_composite = [];
    $('input[name="talentos-composite"]:checked').each(function() {
        array_composite.push($(this).val());
    });
    var new_array_composite = array_composite.join(',');

    // Exibe os valores selecionados no console
    // console.log(new_array_composite);
    
    form_data.append('_token', "{{ csrf_token() }}");
    form_data.append('numUsuario', numUsuario);
    form_data.append('composite', new_array_composite);
    form_data.append('respRegistroNum', respRegistroNum);

    $.ajax({
        url: '{{ route('talentos.excluir_composite') }}',
        dataType: 'text',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'post',
        beforeSend: function () {
            $("#result-acao-composite").html("<img class='img' style='height:50px;' src='/storage/padrao/carregando.gif'/>");
        },
        success: function(data){
            $("#result-acao-composite").html(data);
            recar_table();
        }
    });

}

function capturarDetalhesCompo() {
    var array_composite_detalhes = [];
    $('input[name="talento-compo-detalhes"]:checked').each(function() {
        array_composite_detalhes.push($(this).val());
    });
    var new_array_composite_detalhes = array_composite_detalhes.join(' ');


    $('#result-talento-detalhes').html(new_array_composite_detalhes);""
}

// mc-cover = 2.5/3
// mc-mosaic1 = 4/6

$('#addComposite').on('shown.bs.modal', function () {
    capturarDetalhesCompo();
});

$(document).ready(function() {
    // Inicio - Carregamento Inicial da Tabela
    statusDisplayTable();
    // Fim - Carregamento Inicial da Tabela

    showTalentoAcoes();
});