@extends('painel.layouts.dashboard')

@section('title', 'Importador de Dados')

@section('title-dashboard')
Importador de Dados
@endsection

@section('pg-home')
@endsection

@section('content')
@parent

<div class="row">
    <div class="col-md-12">
        <div class="portlet box blue-steel">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-download"></i> Importador de Dados (Migração de Concorrentes)
                </div>
            </div>
            <div class="portlet-body">

                <div class="row" style="display:flex; align-items:flex-end; flex-wrap:wrap;">
                    <div class="col-md-2">
                        <div class="form-group" style="margin-bottom:10px;">
                            <label style="white-space:nowrap;">Plataforma</label>
                            <select id="plataforma" class="form-control">
                                <option value="workcenter">WorkCenter</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group" style="margin-bottom:10px;">
                            <label style="white-space:nowrap;" title="URL de origem (página de transparência do concorrente)">URL de origem (concorrente)</label>
                            <input type="text" id="url_origem" class="form-control" placeholder="https://www.exemplo.gov.br/transparencia">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group" style="margin-bottom:10px;">
                            <label style="white-space:nowrap;">URL de destino (este sistema)</label>
                            <input type="text" id="url_destino" class="form-control" placeholder="https://seudominio.com.br" value="{{ url('/') }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group" style="margin-bottom:10px;">
                            <button type="button" class="btn btn-primary btn-block" onclick="analisarSite();"><i class="fa fa-search"></i> Analisar</button>
                        </div>
                    </div>
                </div>

                <div id="loading_analise" style="display:none;">
                    <i class="fa fa-spinner fa-spin"></i> Analisando site de origem, aguarde...
                </div>

                <div id="erro_analise" class="alert alert-danger" style="display:none;"></div>

                <hr>

                <div id="resultado_modulos" style="display:none;">
                    <h4>Módulos encontrados</h4>
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Módulo</th>
                                <th>Link(s) encontrado(s) na origem</th>
                                <th class="text-aligncenter" style="width:120px;">Status</th>
                                <th class="text-aligncenter" style="width:220px;">Ação</th>
                            </tr>
                        </thead>
                        <tbody id="tabela_modulos"></tbody>
                    </table>

                    <div id="bloco_outros" style="display:none;">
                        <h4>Outros itens encontrados (sem mapeamento automático)</h4>
                        <p class="text-muted">Estes itens não foram reconhecidos automaticamente. Você pode analisá-los manualmente e decidir se algum corresponde a um módulo já existente no sistema.</p>
                        <ul id="lista_outros"></ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script>
var ultimoResultado = null;

function analisarSite(){
    var urlOrigem = $('#url_origem').val();

    if(!urlOrigem){
        alert('Informe a URL de origem.');
        return;
    }

    $('#erro_analise').hide();
    $('#resultado_modulos').hide();
    $('#loading_analise').show();

    $.ajax({
        url: '{{ route("importadorAnalisar") }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            url_origem: urlOrigem
        },
        success: function(resp){
            $('#loading_analise').hide();
            ultimoResultado = resp;
            renderizarModulos(resp);
        },
        error: function(xhr){
            $('#loading_analise').hide();
            var msg = 'Erro ao analisar a URL informada.';
            if(xhr.responseJSON && xhr.responseJSON.erro){
                msg = xhr.responseJSON.erro;
            }
            $('#erro_analise').text(msg).show();
        }
    });
}

function renderizarModulos(resp){
    var tbody = $('#tabela_modulos');
    tbody.empty();

    if(resp.modulos.length === 0){
        tbody.append('<tr><td colspan="4" class="text-aligncenter">Nenhum módulo reconhecido foi encontrado.</td></tr>');
    }

    resp.modulos.forEach(function(mod){
        var linksHtml = mod.links.map(function(l){
            return '<div><a href="'+l.url+'" target="_blank">'+l.texto+'</a></div>';
        }).join('');

        var statusHtml = '<span class="label label-default" id="status_'+mod.modulo+'">Pendente</span>';

        var acaoHtml = '';
        if(mod.suportado){
            acaoHtml = '<select class="form-control input-sm" id="link_escolhido_'+mod.modulo+'" style="margin-bottom:5px;">' +
                mod.links.map(function(l){ return '<option value="'+l.url+'">'+l.texto+'</option>'; }).join('') +
                '</select>' +
                '<button type="button" class="btn btn-success btn-sm btn-block" onclick="migrarModulo(\''+mod.modulo+'\')">Migrar</button>';
        } else {
            acaoHtml = '<span class="text-muted">Migração automática ainda não implementada para este módulo.</span>';
        }

        tbody.append(
            '<tr id="linha_'+mod.modulo+'">' +
                '<td>'+mod.label+'</td>' +
                '<td>'+linksHtml+'</td>' +
                '<td class="text-aligncenter">'+statusHtml+'</td>' +
                '<td>'+acaoHtml+'</td>' +
            '</tr>'
        );
    });

    if(resp.outros && resp.outros.length > 0){
        var lista = $('#lista_outros');
        lista.empty();
        resp.outros.forEach(function(o){
            lista.append('<li><a href="'+o.url+'" target="_blank">'+o.texto+'</a></li>');
        });
        $('#bloco_outros').show();
    } else {
        $('#bloco_outros').hide();
    }

    $('#resultado_modulos').show();
}

function migrarModulo(modulo){
    var urlDestino = $('#url_destino').val();
    var urlModulo = $('#link_escolhido_'+modulo).val();

    if(!urlDestino){
        alert('Informe a URL de destino.');
        return;
    }

    $('#status_'+modulo).removeClass('label-default label-danger label-success').addClass('label-warning').text('Migrando...');

    $.ajax({
        url: '{{ route("importadorMigrar") }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            modulo: modulo,
            url_modulo: urlModulo,
            url_destino: urlDestino
        },
        success: function(resp){
            $('#status_'+modulo).removeClass('label-default label-warning label-danger').addClass('label-success')
                .text('Concluído ('+resp.enviados+'/'+resp.encontrados+')');

            if(resp.erros > 0){
                console.warn('Erros na migração de '+modulo+':', resp.log_erros);
            }
        },
        error: function(xhr){
            $('#status_'+modulo).removeClass('label-default label-warning label-success').addClass('label-danger').text('Erro');
            var msg = 'Erro ao migrar o módulo.';
            if(xhr.responseJSON && xhr.responseJSON.erro){
                msg = xhr.responseJSON.erro;
            }
            alert(msg);
        }
    });
}
</script>
@endsection