<?php require_once "retornaCpf.php";?>
  <script type="text/javascript" src="login/js/mask.js"></script>
  <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
  <script>

  </script>
  <h1 class="text-center" style="margin-top: 25px;">Forneça as informações sobre seu artigo</h1><br/><br/><br/>
  <form id="subscriptionForm" action="uploadscript.php" method="post" enctype="multipart/form-data" class="text-center">
    <label for="nomeArtigo">Nome do Artigo</label>
    <input type="text" name="nomeArtigo" id="nomeArtigo" class="form-control"><br/><br/>
    <h1 style="margin-bottom:35px;">Adicionar Autores</h1>
    <p>Click, segure e arraste o ícone <span><img class="order" src="images/order.png" alt="ícone de ordenar" width="30px" height="30px"></span> para ordenar.</p>
    <p>Click no ícone <span><img class="order" src="images/add.png" alt="ícone de adicionar" width="30px" height="30px"></span> para adicionar um autor.</p>
    <p>Click no ícone <span><img class="order" src="images/remove.png" alt="ícone de remover" width="30px" height="30px"></span> para remover um autor.</p>
    <br/><br/>

    <a onclick="addAutor();"><img src="images/add.png" alt="ícone de adicionar" width="30px" height="30px"></a>

    <br/><br/>
    <!-- <a style="margin-left: 1px; margin-right:30px; color: white;" class="btn btn-primary addAutor" onclick="addAutor();">+</a></br> -->

    <div id="autores" style="width: 95%; display: flex; flex-wrap: wrap; justify-content:center;">      
      <div id="child" style="width: 100%; display: flex; flex-wrap: wrap; margin-bottom:10px; align-items: stretch; justify-content: space-around;">
        
        <textarea class="nome_autor rounded" placeholder="Autor1" name="autor1"><?php echo $name ?></textarea>
        <input class="cpfautor rounded" type="text" name="cpfautor1" id="cpfautor1" value=<?php echo $cpf ?> onload="javascript: fMasc( this, mCPF );">
        <textarea class="miniautor rounded" type="textarea" name="miniautor1" id="miniautor1" placeholder="Minicurriculum do autor 1"></textarea>
        <input class="emailautor rounded" type="text" name="emailautor1" id="emailautor1" value=<?php echo $email ?>>
        <div>
          <img class="order" src="images/order.png" alt="ícone de ordenar" width="30px" height="30px">
          <a onclick="addAutor();"><img src="images/add.png" alt="ícone de adicionar" width="30px" height="30px"></a>
          <a onclick="removeAutor(this.parentElement);"><img src="images/remove.png" alt="ícone de remover" width="30px" height="30px"></a>
        </div>
      </div> 
    </div>
    </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 = '';
      }
    });

    let i = 2;

    Sortable.create(autores,{
      handle: ".order",
      animation: 150,
      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}`);
        });       
        $(cpf).each(function(index){
          $(this).attr('name', `cpfautor${index+1}`);
          $(this).attr('placeholder', `CPF do autor${index+1}`);
        });       
        $(mini).each(function(index){
          $(this).attr('name', `miniautor${index+1}`);
          $(this).attr('placeholder', `Minicurriculum do autor${index+1}`);
        });       
        $(email).each(function(index){
          $(this).attr('name', `emailautor${index+1}`);
          $(this).attr('placeholder', `E-mail do autor${index+1}`);
        });       

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

        
      }
    });
      
    function addAutor(){
      
      autor = `<div id="child" style="width: 100%; display: flex; flex-wrap: wrap; margin-bottom:10px; align-items: stretch; justify-content: space-around;">
      <textarea class="nome_autor rounded" type="text" placeholder="Autor${i}" name="autor${i}"></textarea>
      <input class="cpfautor rounded" type="text" name="cpfautor${i}" id="cpfautor${i}" placeholder="CPF do autor ${i}" onload="javascript: fMasc( this, mCPF );">
      <textarea class="miniautor rounded" type="text" name="miniautor${i}" id="miniautor${i}" placeholder="Minicurriculum do autor ${i}"></textarea>
      <input class="emailautor rounded" type="text" name="emailautor${i}" id="emailautor${i}" placeholder="E-mail do autor ${i}">
      <div>
          <img class="order" src="images/order.png" alt="ícone de ordenar" width="30px" height="30px">
          <a onclick="addAutor();"><img src="images/add.png" alt="ícone de adicionar" width="30px" height="30px"></a>
          <a onclick="removeAutor(this.parentElement);"><img src="images/remove.png" alt="ícone de remover" width="30px" height="30px"></a>
      </div>
      </div>`;

      
      $('#autores').append(autor);
      i++;
    }

    function removeAutor(e) {
      e.parentElement.remove();
      i--;
    }
    function removeCpf(e) {
      e.parentElement.remove();
      i--;
    }

  </script>


