<style>

.bg-success {
  background-color: #c1ead5 !important;
}

.card-header {
  border-radius: 33px !important;
}

#color_blank, #color_blank a, #color_blank span, #color_blank strong, #color_blank b, #color_blank p{
    color:#fff !important;
}

 #color_blank span{
text-shadow: 1px 1px #639720;
}

#color_blank .widget-subheading {
  font-weight: bold;
  opacity: 1;
  text-shadow: 1px 1px #3f1e25;
}

.fixed-sidebar .app-main .app-main__outer {
  z-index: 9;
  padding-left: 0 !important;
}


</style>

<!-- Content -->

<div class="app-main__outer">


<div class="app-main__inner">

<div class="app-page-title">

<div class="page-title-wrapper">
<div class="page-title-heading">
<div class="page-title-icon">
<i class="metismenu-icon pe-7s-rocket"></i>
</div>
<div>Dashboard - Paginas
<div class="page-title-subheading"><a href="admin-dashboard">Voltar para o Dashboard</a></div>
</div>
</div>


<div class="page-title-heading" style="position:absolute;right: 0;">
<div style="float: right;margin: 0 50px;">CONFIGURAÇÃO
<div class="page-title-subheading">Clique ao lado para ver o Tutorial!</div>
</div>
<div class="page-title-icon">
<a href="javascript:void(0)" data-toggle="modal" data-target=".bd-example-modal-lg"><i class="pe-7s-config"> </i></a>
</div>

</div>

</div>
</div> 


<div class="tabs-animation">
    
<div class="col-md-6" style="float:left">

<div class="col-md-12 col-lg-12">


<div class="main-card mb-3 card">
<div class="card-body" >

<table style="width: 100%;" id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Origem</th>
<th>Instância</th>
<th>ID</th>
<th>Option</th>
<th>Script</th>
</tr>
</thead>

<tbody id="ajaxtable">

{instancias}

</tbody>
<tr>
<th>Origem</th>
<th>Instância</th>
<th>ID</th>
<th>Option</th>
<th>Script</th>
</tr>

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

</div>

</div>

<div class="col-md-6" style="float:left">
    
<div class="tab-content">


<div class="tab-content">
<div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="main-card mb-3 card">
<div class="card-body">

<div id="smartwizard">

<ul class="forms-wizard">
<li id="etapa1">
<em>1</em><span>Instância</span>
</li>
<li id="etapa2">
<em>2</em><span>Mapeamento</span>
</li>
<li id="etapa3">
<em>3</em><span>Concluído</span>
</li>
</ul>


<div class="form-wizard-content">

<div id="step-1" class="active" style="display:block">

<div class="form-row">
<div class="col-md-6">
<div class="position-relative form-group">
<label for="exampleEmail55">ORIGEM</label>
<input name="config_script_origem" id="config_script_origem" placeholder="Origem" type="text" class="form-control" value="{set_origem}">
</div>
</div>

<div class="col-md-6">
<div class="position-relative form-group">
<label for="exampleEmail55">NOME DA INSTÂNCIA</label>
<input name="config_script_name" id="config_script_name" placeholder="Nome" type="text" class="form-control" value="{set_instancia}">
</div>
</div>
</div>

</div>

<div id="step-2">
<div id="accordion" class="accordion-wrapper mb-3">
<div class="card">
<div id="headingOne" class="card-header">
<button type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="text-left m-0 p-0 btn btn-link btn-block">
<span class="form-heading">SETUP<p> Track Inputs</p></span>
</button>
</div>
<div data-parent="#accordion" id="collapseOne" aria-labelledby="headingOne" class="collapse show">
<div class="card-body">



<div class="form-row">
<div class="col-md-4">
<div class="position-relative form-group" style="line-height: 71px;">
<strong>FORM</strong>
</div>
</div>
<div class="col-md-4">
<div class="position-relative form-group">
<label for="exampleState">ID</label>
<input name="config_form_id" id="config_form_id" type="text" class="form-control" value="{set_form_id}">
</div>
</div>

<div class="col-md-4">
<div class="position-relative form-group">
<label for="exampleZip">CLASS</label>
<input name="config_form_class" id="config_form_class" type="text" class="form-control" value="{set_form_class}">
</div>
</div>

</div>


<div class="form-row">
<div class="col-md-4">
<div class="position-relative form-group" style="line-height: 71px;">
<strong>NOME</strong>
</div>
</div>
<div class="col-md-4">
<div class="position-relative form-group">
<label for="exampleState">ID</label>
<input name="config_nome_id" id="config_nome_id" type="text" class="form-control" value="{set_nome_id}">
</div>
</div>
<div class="col-md-4">
<div class="position-relative form-group">
<label for="exampleZip">CLASS</label>
<input name="config_nome_class" id="config_nome_class" type="text" class="form-control" value="{set_nome_class}">
</div>
</div>
</div>


<div class="form-row">
<div class="col-md-4">
<div class="position-relative form-group" style="line-height: 71px;">
<strong>EMAIL</strong>
</div>
</div>
<div class="col-md-4">
<div class="position-relative form-group">
<label for="exampleState">ID</label>
<input name="config_email_id" id="config_email_id" type="text" class="form-control"  value="{set_email_id}">
</div>
</div>
<div class="col-md-4">
<div class="position-relative form-group">
<label for="exampleZip">CLASS</label>
<input name="config_email_class" id="config_email_class" type="text" class="form-control"  value="{set_email_class}">
</div>
</div>
</div>


<div class="form-row">
<div class="col-md-4">
<div class="position-relative form-group" style="line-height: 71px;">
<strong>CRM</strong>
</div>
</div>
<div class="col-md-4">
<div class="position-relative form-group">
<label for="exampleState">ID</label>
<input name="config_crm_id" id="config_crm_id" type="text" class="form-control" value="{set_crm_id}">
</div>
</div>
<div class="col-md-4">
<div class="position-relative form-group">
<label for="exampleZip">CLASS</label>
<input name="config_crm_class" id="config_crm_class" type="text" class="form-control" value="{set_crm_class}">
</div>
</div>
</div>


<div class="form-row">
<div class="col-md-4">
<div class="position-relative form-group" style="line-height: 71px;">
<strong>UF</strong>
</div>
</div>
<div class="col-md-4">
<div class="position-relative form-group">
<label for="exampleState">ID</label>
<input name="config_uf_id" id="config_uf_id" type="text" class="form-control" value="{set_uf_id}">
</div>
</div>
<div class="col-md-4">
<div class="position-relative form-group">
<label for="exampleZip">CLASS</label>
<input name="config_uf_class" id="config_uf_class" type="text" class="form-control" value="{set_uf_class}">
</div>
</div>
</div>


<div class="form-row">
<div class="col-md-4">
<div class="position-relative form-group" style="line-height: 71px;">
<strong>BOTÃO DE AÇÃO</strong>
</div>
</div>
<div class="col-md-4">
<div class="position-relative form-group">
<label for="exampleState">ID</label>
<input name="config_bt_id" id="config_bt_id" type="text" class="form-control" value="{set_bt_id}">
</div>
</div>

<div class="col-md-4">
<div class="position-relative form-group">
<label for="exampleZip">CLASS</label>
<input name="config_bt_class" id="config_bt_class" type="text" class="form-control" value="{set_bt_class}">
</div>
</div>

</div>



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

<div id="step-3">
<div class="no-results">
<div class="swal2-icon swal2-success swal2-animate-success-icon">
<div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div>
<span class="swal2-success-line-tip"></span>
<span class="swal2-success-line-long"></span>
<div class="swal2-success-ring"></div>
<div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
<div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div>
</div>
<div class="results-subtitle mt-4">Track Configurada!</div>
<div class="results-title">ID da Track abaixo</div>
<div class="mt-3 mb-3"></div>
<div class="text-center">
<button class="btn-shadow btn-pill btn-wide btn btn-success clipboard-trigger" id="trackid" data-clipboard-text=""></button>
</div>
</div>
</div>

</div>

</div>
<div class="divider"></div>
<input type="hidden" id="id_update" value="{set_id_update}" name="id_update" />
<div class="clearfix" id="pagination"  style="padding: 20px;">
<button type="button" id="next-btn" class="btn-shadow btn-wide float-right btn-pill btn-hover-shine btn btn-primary">Próximo</button>
<button type="button" id="prev-btn" class="btn-shadow float-right btn-wide btn-pill mr-3 btn btn-outline-secondary">Voltar</button>
</div>

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

</div>

</div>
</div>

<script>

   setTimeout(function() {  
       
     
      jQuery('.deleteButton').click(function(){
      
      var clientId = $(this).data('id');  // Pega o ID do cliente do atributo data-id do botão
        
      var userConfirmed = confirm("Você tem certeza que deseja deletar?");

     if (userConfirmed) {
    
     $.ajax({
            url: BASE_URL + 'admin-settings',  // URL do script PHP
            type: 'GET',             // Método HTTP
            dataType: 'json',        // Tipo de dados esperados na resposta
            data: {                  // Dados enviados ao servidor
                script_del: clientId
            },
            success: function(response) {
                tr = '#tr' + clientId;
                jQuery(tr).remove()
                alert(response.msg);  // Alerta com a mensagem de sucesso ou erro
            },
            error: function(xhr, status, error) {
                alert('Ocorreu um erro: ' + error);
            }
        });
     } 
        
    });
    
    
     jQuery('.EditButton').click(function(){
    
    var clientId = $(this).data('id');  // Pega o ID do cliente do atributo data-id do botão
    
    window.location = '?script_edit=' + clientId;
    
     });
     
     
     jQuery('.ModalConfig').click(function(){
     
       var clientId = $(this).data('id');  // Pega o ID do cliente do atributo data-id do botão
       
       jQuery('#copiacode').html(clientId);
     
     });
     
     
    const nextBtn = document.getElementById("next-btn");
    const prevBtn = document.getElementById("prev-btn");
    let currentStep = 1;

    // Função para mostrar/ocultar passos com transição
    function showStep(stepToShow, stepsToHide) {
        setTimeout(function() {
            jQuery(stepToShow).show();
            jQuery(stepsToHide).hide();
        }, 400);
    }

    // Função para obter os valores dos campos de configuração
    function getConfigValues() {
        return {
            config_script_origem: document.getElementById("config_script_origem").value,
			config_script_name: document.getElementById("config_script_name").value,
            nome_id: document.getElementById("config_nome_id").value,
            nome_class: document.getElementById("config_nome_class").value,
            email_id: document.getElementById("config_email_id").value,
            email_class: document.getElementById("config_email_class").value,
            crm_id: document.getElementById("config_crm_id").value,
            crm_class: document.getElementById("config_crm_class").value,
            uf_id: document.getElementById("config_uf_id").value,
            uf_class: document.getElementById("config_uf_class").value,
            config_bt_id: document.getElementById("config_bt_id").value,
            config_bt_class: document.getElementById("config_bt_class").value,
            form_id: document.getElementById("config_form_id").value,
            form_class: document.getElementById("config_form_class").value
        };
    }

    // Função para enviar dados via AJAX para o servidor PHP
    function postConfigData() {
        
	const config = getConfigValues();
        
    var id_update = jQuery('#id_update').val();
    
    if(id_update != ''){
        
         var modo = 'updatescript=new';
           
    }else{
        
        var modo = 'addscript=new';
        
    }
    
        // Montando a query string com os dados dos inputs
        const query = modo +
            '&config_script_origem=' + encodeURIComponent(config.config_script_origem) +
			'&config_script_name=' + encodeURIComponent(config.config_script_name) +
            '&config_nome_id=' + encodeURIComponent(config.nome_id) +
            '&config_nome_class=' + encodeURIComponent(config.nome_class) +
            '&config_email_id=' + encodeURIComponent(config.email_id) +
            '&config_email_class=' + encodeURIComponent(config.email_class) +
            '&config_crm_id=' + encodeURIComponent(config.crm_id) +
            '&config_crm_class=' + encodeURIComponent(config.crm_class) +
            '&config_uf_id=' + encodeURIComponent(config.uf_id) +
            '&config_uf_class=' + encodeURIComponent(config.uf_class) +
            '&bt_action_id=' + encodeURIComponent(config.config_bt_id) + 
            '&bt_action_class=' + encodeURIComponent(config.config_bt_class) + 
            '&id_update=' + id_update + 
            '&config_form_id='  + encodeURIComponent(config.form_id) + 
            '&config_form_class=' + encodeURIComponent(config.form_class);


        // Enviando a requisição AJAX para o PHP
        jQuery.ajax({
            type: 'POST',
            url: BASE_URL + 'admin-settings', // Substitua pelo seu URL PHP
            data: query,
            success: function(d) {
				jQuery('#trackid').attr('data-clipboard-text', d)
                jQuery('#trackid').html(d);
            }
        });
    }

    // Validação do campo origem
    function validateOrigem() {
	
		const config_script_name = document.getElementById("config_script_name").value;
		
		const config_script_origem = document.getElementById("config_script_origem").value;
		
       if(config_script_origem === ""){
		    showStep('#step-1', '#step-2, #step-3');
            alert("Informe a Origem!");
            jQuery('#etapa1').addClass('active');
            jQuery('#etapa2, #etapa3').removeClass('active done');
            return false;	
		}else if(config_script_name === ""){
		    showStep('#step-1', '#step-2, #step-3');
            alert("De um nome para essa Instância!");
            jQuery('#etapa1').addClass('active');
            jQuery('#etapa2, #etapa3').removeClass('active done');
            return false;	
		}
		
		
        jQuery('#etapa1').addClass('done');
        jQuery('#etapa2').addClass('active');
        jQuery('#etapa3').removeClass('active done');
		jQuery('.tab-content > .tab-pane').show()
        return true;
		
    }

    // Função para validar se um dos campos (id ou class) está preenchido
    function validateField(idValue, classValue) {
        return idValue !== '' || classValue !== '';
    }

    // Função para validar os demais campos de mapeamento
    function validateOtherFields() {
        const config = getConfigValues();
        
        
         if (!validateField(config.form_id, config.form_class)) {
            showStep('#step-2', '#step-1, #step-3');
            alert("O campo FORM (ID ou Class) é obrigatório!");
            jQuery('#etapa2').addClass('active');
            jQuery('#etapa1, #etapa3').removeClass('active');
            return false;
        }
        
        // Valida cada par de campo (id e class)
        if (!validateField(config.nome_id, config.nome_class)) {
            showStep('#step-2', '#step-1, #step-3');
            alert("O campo Nome (ID ou Class) é obrigatório!");
            jQuery('#etapa2').addClass('active');
            jQuery('#etapa1, #etapa3').removeClass('active');
            return false;
        }

        if (!validateField(config.email_id, config.email_class)) {
            showStep('#step-2', '#step-1, #step-3');
            alert("O campo Email (ID ou Class) é obrigatório!");
            jQuery('#etapa2').addClass('active');
            jQuery('#etapa1, #etapa3').removeClass('active');
            return false;
        }

        if (!validateField(config.crm_id, config.crm_class)) {
            showStep('#step-2', '#step-1, #step-3');
            alert("O campo CRM (ID ou Class) é obrigatório!");
            jQuery('#etapa2').addClass('active');
            jQuery('#etapa1, #etapa3').removeClass('active');
            return false;
        }

        if (!validateField(config.uf_id, config.uf_class)) {
            showStep('#step-2', '#step-1, #step-3');
            alert("O campo UF (ID ou Class) é obrigatório!");
            jQuery('#etapa2').addClass('active');
            jQuery('#etapa1, #etapa3').removeClass('active');
            return false;
        }

   

        // Se todos os campos estão válidos
        jQuery('#etapa1, #etapa2').addClass('done');
        jQuery('#etapa3').addClass('active');
		jQuery('#pagination').hide()
        postConfigData(); // Chama função AJAX para enviar dados ao servidor
        return true;
    }

    // Manipuladores de eventos para os botões de navegação
    nextBtn.addEventListener("click", function() {
        if (currentStep === 1 && validateOrigem()) {
            currentStep = 2;
            showStep('#step-2', '#step-1, #step-3');
        } else if (currentStep === 2 && validateOtherFields()) {
            currentStep = 3;
            showStep('#step-3', '#step-1, #step-2');
        }
    });

    prevBtn.addEventListener("click", function() {
        if (currentStep === 2) {
            currentStep = 1;
            showStep('#step-1', '#step-2, #step-3');
        } else if (currentStep === 3) {
            currentStep = 2;
            showStep('#step-2', '#step-1, #step-3');
        }
    });

}, 500);


</script>

</div>