<?php
$idArt = $_POST['idArt'];
header ('Content-type: text/html; charset=UTF-8');
?>
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <title>Área do autor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
    
  </head>

<body style="width: 100%; margin: 0 auto; background-color: #ededed;">

<?php
      $host = "localhost"; // Host name
      $user = "area_root"; // Mysql username
      $password = "Legiao123*"; // Mysql password
      $db_name = "area_poisson"; // Database name
      $conn = mysqli_connect($host,$user,$password,$db_name);
    
      $mysqli = new mysqli($host, $user, $password, $db_name);
    
      mysqli_query($connect, "SET character_set_results = 'utf8', character_set_client = 'utf8', character_set_connection = 'utf8', character_set_database = 'utf8', character_set_server = 'utf8'");
    
      if(mysqli_connect_errno()){
          die("Conexão falhou: ".mysqli_connect_errno());
      }
    
      $sql = "SELECT * FROM myblob WHERE id = '$idArt'";
      
      mysqli_set_charset($conn, 'utf8');
    
      $result = mysqli_query($conn,$sql);

      $data = mysqli_fetch_assoc($result);

      /* var_dump($data); */
    ?>
    <nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">POISSON</span>
  <a href="https://area.editorapoisson.com.br/area-clientes/index.php" style="float: right;" class="btn btn-primary">Voltar para o início</a>
</nav>
<div id="container" style="width: 73%; margin: 0 auto;">

  <h4 class="text-center" style="margin-top: 25px;"><?php echo $data['nome_artigo'];?></h4><br/><br/>
  <form action="alterarscript.php" method="post" enctype="multipart/form-data" class="text-center">
    <input type="hidden" name="id" id="id" value="<?php echo $idArt;?>">
    <input type="text" name="nomeArtigo" id="nomeArtigo" class="form-control"value=<?php echo $data['nome_artigo'];?>><br/><br/>
    <h1 >Autores</h1></br>
    <h2 style="margin-bottom:37px;" ></h2>

    <div id="autores" style="display: flex; flex-wrap: wrap; justify-content: center; width: 100%; background-color: white; border: 2px solid #98b827; border-radius: 35px !important; padding: 25px;">

    <?php
    
      for ($i=1; $i <= 15; $i++) { 
        if(!empty($data['autor'.$i])){
          $autor = $data['autor'.$i];
          echo "<div id='child' style='margin-bottom:10px; width: 100%;'>
            
           <input class='nome_autor form-control' type='text' name='autor".$i."' id='autor".$i."' value='".$data['autor'.$i]."' placeholder='Nome do autor'>
           <input class='cpfautor form-control' type='text' name='cpfautor".$i."' id='cpfautor1' value='".$data['cpfautor'.$i]."' placeholder='CPF do autor' style='margin-left: 3px;'> 
           <textarea class='miniautor form-control' type='text' name='miniautor".$i."' id='miniautor".$i."' value='".$data['miniautor'.$i]."' placeholder='Minicurrículo do autor' style='margin-left: 3px;'></textarea> 
           <input class='emailautor form-control' type='text' name='emailautor".$i."' id='emailautor".$i."' value='".$data['emailautor'.$i]."' placeholder='E-mail do autor' style='margin-left: 3px;'>
           
           </div>";
        }        
      }
    ?>
    </div>
    <a style="margin-top: 10px; color: white;" class="btn btn-primary" onclick="addAutor();">Adicionar autor</a>
    </br>
    </br>
    <h4>CUIDADO! Caso envie um novo arquivo, este substituirá o antigo. Deixe em branco caso não queira alterar.</h4><br/><br/>
    <input type="file" name="file" id="file"/><br/><br/>
    <button type="submit" name="submit" class="btn btn-primary">Enviar Artigo</button>
  </form>
  <p></p>
  <br/>
  <br/>

  <script>
  
        $('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    
      switch (ext) {
        case 'doc':
        case 'docx':
        case 'pdf':
        case 'rar':
        case 'zip':
            $('#uploadButton').attr('disabled', false);
            break;
        default:
            alert('O arquivo precisa estar no formato word (doc, docx)');
            this.value = '';
      }
    });

      size = $('#autores').children().length;

      i = size;

      console.log(i);

      /* Sortable.create(autores,{
        onEnd: function(evt) {
          var itemEl = evt.item;
          let oldIdx = evt.oldIndex;
          let idx = evt.newIndex;

          var autores = document.getElementsByClassName('nome_autor');
          var cpf = document.getElementsByClassName('cpfautor');
          var mini = document.getElementsByClassName('miniautor');
          var email = document.getElementsByClassName('emailautor');
          

          $(autores).each(function(index){
            $(this).attr('name', `autor${index+1}`);
            $(this).attr('placeholder', `Autor${index+1}`);
            console.log(this);
          });       
          $(cpf).each(function(index){
            $(this).attr('name', `cpfautor${index+1}`);
            
            console.log(this);
          });       
          $(mini).each(function(index){
            $(this).attr('name', `miniautor${index+1}`);
            
            console.log(this);
          });       
          $(email).each(function(index){
            $(this).attr('name', `emailautor${index+1}`);
            
            console.log(this);
          });       

          $(`#nome_autor${oldIdx+1}`).attr('placeholder', `Autor ${i+1}`);

          
        }
      }); */
      
    function addAutor(){
      
      i++;

      autor = `<div id="child" style="margin-bottom:10px;">
      <label for='autor${i}'>Novo autor</label><br/>
      <input type="text" name="autor${i}" id="autor${i}" placeholder="Nome do autor ${i}">
      <input type="text" name="cpfautor${i}" id="cpfautor${i}" placeholder="CPF do autor ${i}" style="margin-left: 3px;">
      <input type='text' name='miniautor".$i."' id='miniautor".$i."' placeholder='Minicurrículo do autor' style='margin-left: 3px;'>
      <input type='text' name='emailautor".$i."' id='emailautor".$i."' placeholder='E-mail do autor' style='margin-left: 3px;'>
      <a id="remove" style="margin-left: 1px; margin-right:30px; color: white;" class="btn btn-primary" onclick="removeAutor(this);">x</a>
      </div>`;

      
      $('#autores').append(autor);

      
      
    }

    function removeAutor(e) {
      e.parentElement.remove();
      i--;
    }
    function removeCpf(e) {
      e.parentElement.remove();
      i--;
    }
  </script>
 </div>
</body>
</html>

