const table = new DataTable('#carrTalentos', {
    processing: true,
    serverSide: true,
    ajax: {
        url: "{{ route('dashboard.minha_area.ajax') }}",
        data: function(data){
            data.por_nome_filtro            = $('#filtro-por-nome').val()
            data.status_aprovacao_filtro    = $('#filtro-status-aprov').val()
        }
    },
    columns: [
        {
            className: 'dt-control',
            orderable: false,
            data: null,
            defaultContent: ''
        },
        { "data": "nome_artistico", "name": "nome_artistico", "title": "Nome Artístico"},
        { "data": "created_at", "name": "created_at", "title": "Data"},
        { "data": "action", "name": "action", "title": "Aprovar Talento?"},
    ],
    language: {
        url: 'https://cdn.datatables.net/plug-ins/1.11.3/i18n/pt_br.json',
    },
});

// Add event listener for opening and closing details
table.on('click', 'td.dt-control', function (e) {
    let tr = e.target.closest('tr');
    let row = table.row(tr);
 
    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
    }
    else {
        // Open this row
        row.child(format(row.data())).show();
    }
});

function format(d) {
    // console.log(d.data_nasc);

    const data_nasc = new Date(d.data_nasc+'T00:00');
    const data_nasc_conv = dayjs(data_nasc).format('DD/MM/YYYY');

    const carreira_desde = new Date(d.carreira_desde+'T00:00');
    const carreira_desde_conv = dayjs(carreira_desde).format('DD/MM/YYYY');

    var dados_contato = d.contatos_emergencia;
    var contato = dados_contato.split(',');

    var segElemento_contato = "";

    for(var loop_contato=0; loop_contato<contato.length; loop_contato++){
        var contato_detalhes = contato[loop_contato].split('|');

        segElemento_contato += '<div class="col-sm-4">' +
                                    '<h6>Contato '+(loop_contato+1)+':</h6>' +
                                    '<label>Nome do Contato:</label>' +
                                    '<p>'+contato_detalhes[0]+'</p>' +
                                    '<label>Número do Contato:</label>' +
                                    '<p>'+contato_detalhes[1]+'</p>' +
                                    '<label>Parentesco do Contato:</label>' +
                                    '<p>'+contato_detalhes[2]+'</p>' +
                                '</div>';
    }

    // let segElemento_contato = contato.map((part, index) => {
    //     let subArray = part.split('|');
    //     return '<div class="col-sm-4">' +
    //                 '<h6>Contato '+(index+1)+':</h6>' +
    //                 '<label>Nome do Contato:</label>' +
    //                 '<p>'+subArray[0]+'</p>' +
    //                 '<label>Número do Contato:</label>' +
    //                 '<p>'+subArray[1]+'</p>' +
    //                 '<label>Parentesco do Contato:</label>' +
    //                 '<p>'+subArray[2]+'</p>' +
    //             '</div>';
    // }).filter(element => element !== null); // remove elementos nulos se houver

    var detalhes_talento = '';

    // `d` is the original data object for the row
    detalhes_talento += '' +
                    '<div class="row">' +
                        '<div class="row col-sm-12">';

    if(d.foto_rosto == ""){

    } else{
        detalhes_talento += '' +
                        '<div class="col-sm-6 col-md-3 mb-4" align="center">' +
                            '<a data-fancybox="gallery" data-src="../storage/'+d.foto_rosto+'" data-caption="Rosto">' +
                                '<img class="img-fancybox-aprov" src="../storage/'+d.foto_rosto+'" />' +
                                '<figcaption>Rosto</figcaption>' +
                            '</a>' +
                        '</div>';
    }

    if(d.foto_trabalhando == ""){

    } else{
        detalhes_talento += '' +
                        '<div class="col-sm-6 col-md-3 mb-4" align="center">' +
                            '<a data-fancybox="gallery" data-src="../storage/'+d.foto_trabalhando+'" data-caption="Trabalhando">' +
                                '<img class="img-fancybox-aprov" src="../storage/'+d.foto_trabalhando+'" />' +
                                '<figcaption>Trabalhando</figcaption>' +
                            '</a>' +
                        '</div>';
    }

    if(d.foto_perfil == ""){

    } else{
        detalhes_talento += '' +
                        '<div class="col-sm-6 col-md-3 mb-4" align="center">' +
                            '<a data-fancybox="gallery" data-src="../storage/'+d.foto_perfil+'" data-caption="Perfil">' +
                                '<img class="img-fancybox-aprov" src="../storage/'+d.foto_perfil+'" />' +
                                '<figcaption>Perfil</figcaption>' +
                            '</a>' +
                        '</div>';
    }

    if(d.foto_corpo_inteiro == ""){

    } else{
        detalhes_talento += '' +
                        '<div class="col-sm-6 col-md-3 mb-4" align="center">' +
                            '<a data-fancybox="gallery" data-src="../storage/'+d.foto_corpo_inteiro+'" data-caption="Corpo Inteiro">' +
                                '<img class="img-fancybox-aprov" src="../storage/'+d.foto_corpo_inteiro+'" />' +
                                '<figcaption>Corpo Inteiro</figcaption>' +
                            '</a>' +
                        '</div>';
    }

    if(d.foto_meio_corpo == ""){

    } else{
        detalhes_talento += '' +
                        '<div class="col-sm-6 col-md-3 mb-4" align="center">' +
                            '<a data-fancybox="gallery" data-src="../storage/'+d.foto_meio_corpo+'" data-caption="Meio do Corpo">' +
                                '<img class="img-fancybox-aprov" src="../storage/'+d.foto_meio_corpo+'" />' +
                                '<figcaption>Meio do Corpo</figcaption>' +
                            '</a>' +
                        '</div>';
    }

    if(d.video_apresentacao == ""){

    } else{
        detalhes_talento += '' +
                '<div class="col-sm-6 col-md-3 mb-4 thumbnail-container" align="center">' +
                    '<a data-fancybox="gallery" data-src="../storage/'+d.video_apresentacao+'" data-caption="Video de Apresentação 01">' +
                        '<img class="img-fancybox-aprov thumbnail" src="../storage/'+d.foto_rosto+'" />' +
                         '<div class="play-button"></div>' +
                        '<figcaption>Video de Apresentação 01</figcaption>' +
                    '</a>' +
                '</div>';
    }

    if(d.link_video == ""){

    } else{
        detalhes_talento += '' +
                '<div class="col-sm-6 col-md-3 mb-4 thumbnail-container" align="center">' +
                    '<a data-fancybox="gallery" data-src="'+d.link_video+'" data-caption="Video de Apresentação 02">' +
                        '<img class="img-fancybox-aprov thumbnail" src="../storage/'+d.foto_rosto+'" />' +
                        '<div class="play-button"></div>' +
                        '<figcaption>Video de Apresentação 02</figcaption>' +
                    '</a>' +
                '</div>';
    }
    
    detalhes_talento += '' +
            '</div>' +
            '<div class="col-sm-12">' +
                '<h4>Informações Pessoais:</h4>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Nome Completo:</label>' +
                '<p>'+d.name+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>E-mail:</label>' +
                '<p>'+d.email+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Categoria:</label>' +
                '<p>'+d.categoria+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Nome Artístico:</label>' +
                '<p>'+d.nome_artistico+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Sexo:</label>' +
                '<p>'+d.sexo+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Identidade de Gênero:</label>' +
                '<p>'+d.identidade_genero+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Data Nascimento:</label>' +
                '<p>'+data_nasc_conv+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Whatsapp:</label>' +
                '<p>'+d.whatsapp+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Telefone:</label>' +
                '<p>'+d.telefone+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Etnia:</label>' +
                '<p>'+d.etnia+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Nacionalidade:</label>' +
                '<p>'+d.nacionalidade+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>CEP:</label>' +
                '<p>'+d.cep+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Estado:</label>' +
                '<p>'+d.estado+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Cidade:</label>' +
                '<p>'+d.cidade+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Endereço:</label>' +
                '<p>'+d.endereco+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Número:</label>' +
                '<p>'+d.numero+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Complemento:</label>' +
                '<p>'+d.complemento+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Bairro:</label>' +
                '<p>'+d.bairro+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Idiomas:</label>' +
                '<p>'+d.idiomas+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Formação:</label>' +
                '<p>'+d.formacao+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Linkedin:</label>' +
                '<p><a href="'+d.linkedin+'" target="blank">'+d.linkedin+'</a></p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Instagram:</label>' +
                '<p><a href="'+d.instagram+'" target="blank">'+d.instagram+'</a></p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Facebook:</label>' +
                '<p><a href="'+d.facebook+'" target="blank">'+d.facebook+'</a></p>' +
            '</div>' +
            '<div class="col-sm-12">' +
                '<h4>Atributos e Habilidades:</h4>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Altura:</label>' +
                '<p>'+d.altura+' m</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Busto:</label>' +
                '<p>'+d.busto+' m</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Cintura:</label>' +
                '<p>'+d.cintura+' m</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Quadril:</label>' +
                '<p>'+d.quadril+' m</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Peso:</label>' +
                '<p>'+d.peso+' kg</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Sapato:</label>' +
                '<p>'+d.sapato+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Olhos:</label>' +
                '<p>'+d.olhos+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Cabelo:</label>' +
                '<p>'+d.cabelo+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Tom da Pele:</label>' +
                '<p>'+d.tom_pele+'</p>' +
            '</div>' +
            '<div class="col-sm-12">' +
                '<h4>Manequim:</h4>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Altura do Manequim:</label>' +
                '<p>'+d.altura_manequim+'m</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Tamanho da Camiseta:</label>' +
                '<p>'+d.tamanho_camiseta+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Pilota | Dirige:</label>' +
                '<p>'+d.dirige+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Outras Atividades:</label>' +
                '<p>'+d.outras_atividades+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Marcas:</label>' +
                '<p>'+d.marcas+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Possui tatuagem(ns)?</label>' +
                '<p>'+d.tem_tatuagem+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Qual(ais) local(ais) que a(s) tatuagem(ns) está(ão):</label>' +
                '<p>'+d.local_tatuagem+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Tamanho da Tatuagem:</label>' +
                '<p>'+d.tamanho_tatuagem+' m</p>' +
            '</div>' +
            '<div class="col-sm-12">' +
                '<h4>Informações Administrativas:</h4>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Estado Civil:</label>' +
                '<p>'+d.estado_civil+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Categoria da CNH:</label>' +
                '<p>'+d.cnh+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>CPF:</label>' +
                '<p>'+d.cpf+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>RG:</label>' +
                '<p>'+d.rg+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>PIS:</label>' +
                '<p>'+d.pis+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>DRT:</label>' +
                '<p>'+d.drt+'</p>' +
            '</div>' +
            '<div class="col-sm-12">' +
                '<h4>Conta Bancária:</h4>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Banco:</label>' +
                '<p>'+d.banco+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Nome do Outro Banco:</label>' +
                '<p>'+d.outro_banco+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Número da Agência:</label>' +
                '<p>'+d.numero_agencia+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Número da Conta:</label>' +
                '<p>'+d.numero_conta+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Pix:</label>' +
                '<p>'+d.pix+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Tipo da Conta:</label>' +
                '<p>'+d.tipo_conta+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>CPF/ CNPJ:</label>' +
                '<p>'+d.cpf_cnpj+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Nome do Favorecido:</label>' +
                '<p>'+d.nome_favorecido+'</p>' +
            '</div>' +
            '<div class="col-sm-12">' +
                '<h4>Familiares e Procedência:</h4>' +
            '</div>' +
            '<div class="row col-sm-12">' +
                '<label>Contatos de Emergência:</label><br>' +
                segElemento_contato +
            '</div>' +
            '<div class="col-sm-12">' +
                '<h4>Sobre Você:</h4>' +
                '<p>'+d.sobre_voce+'</p>' +
            '</div>' +
            '<div class="col-sm-12">' +
                '<h4>Carreira:</h4>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Desde:</label>' +
                '<p>'+carreira_desde_conv+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Principais Habilidades:</label>' +
                '<p>'+d.carreira_principais_habilidades+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Principais Trabalhos:</label>' +
                '<p>'+d.carreira_principais_trabalhos+'</p>' +
            '</div>' +
            '<div class="col-sm-3">' +
                '<label>Experiências:</label>' +
                '<p>'+d.carreira_experiencias+'</p>' +
            '</div>' +
        '</div>';

        return (detalhes_talento);
}



function carregarTabela() {
    table.draw();
}

function limparFiltros() {
    $("#filtro-por-nome").val("").change();
    $("#filtro-status-aprov").val("2").change();
}