<form action="index.php?ToDo=attpreco" name="News" method="post">
  <div class="BodyContainer">
    <div class="row">
        <div id="OrdersStatus" style="display: block; ">{{Msg|safe}}</div>
        <div class="panel-body">
          <div class="form-group">
            <div class="col-md-6">
              <div class="form-group">
                  <label for="tipo">Passo 1 - Selecione as opções</label>
                  <select class="form-control" id="tipo" name="tipo" onchange="optionCheck()">
                    <option value="0">Selecione</option>
                    <option value="1">Atualizar todos Produtos da loja </option>
                    <option value="2">Atualizar Apenas Categoria selecionada</option>
                     <option value="3">Atualizar Apenas Marcas selecionadas</option>
                  </select>
              </div>
      
              <div id="HideCat" style="display: none;">
                <div class="form-group">
                  <label>Passo 2 - Selecione a Categoria</label>
                    <select id="idcat" name="idcat" class="form-control" style="width:160px;" onchange="optionCat()">
                      <option value="0">Selecione</option>
                      {{idcatloja|safe}}
                    </select>
                </div>
              </div>
              <div id="HideMarca" style="display: none;">
                <div class="form-group">
                  <label>Passo 2 - Selecione a Marca</label>
                    <select id="idmarca" name="idmarca" class="form-control" style="width:160px;" onchange="optionMarca()">
                      <option value="0">Selecione</option>
                      {{idmarcaloja|safe}}
                    </select>
                </div>
              </div>
              
              <div id="Hidetipoa" style="display: none;">
                <div class="form-group">
                    <label for="tipo2">Selecione tipo de Alteração</label>
                    <select class="form-control" id="tipo2" name="tipo2" onchange="optionCheck2()">
                      <option value="0">Selecione</option>
                      <option value="1">Alterar preços em % </option>
                      <option value="2">Alterar preços em R$</option>
                    </select>
                </div>
              </div>

              <div id="HidePor" style="display: none;">
                <div class="form-group" >
                  <label >Valor em % - Apenas Número:</label>
                  <input type="number" id="porc" name="porc" class="form-control" >
                  <small class="form-text text-muted">Digite 10 para Aumentar os preços em 10% <br>Digite -10 para diminuir os preços em 10%</small>
                </div>
              </div>

              <div id="HideReal" style="display: none;">
                <div class="form-group" >
                  <label >Valor em R$ - Apenas Número:</label>
                  <input type="number" id="real" name="real" class="form-control" step="0.01" >
                  <small class="form-text text-muted">Digite 10.00 para Acrescentar R$10,00 junto ao preço<br>Digite -10.00 para diminuir R$10,00</small>
                </div>
              </div>


              <div id="HideAtt" style="display: none;">
                <center><button type="submit" name="acao" class="btn btn-default">Atualizar Preços</button></center>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="templates/Assets/js/jquery-3.1.1.min.js?"></script>
  <script>
    function optionCheck(){
      var option = document.getElementById("tipo").value;
      if(option == "1"){
        document.getElementById("HideCat").style.display ="none";
        document.getElementById("HideMarca").style.display ="none";
        document.getElementById("Hidetipoa").style.display ="";
        document.getElementById("HideAtt").style.display ="none";
      }
      if(option == "2"){
        document.getElementById("HideCat").style.display ="";
         document.getElementById("HideMarca").style.display ="none";
        document.getElementById("Hidetipoa").style.display ="none";
         document.getElementById("HideAtt").style.display ="none";
      } 
      if(option == "3"){
        document.getElementById("HideCat").style.display ="none";
         document.getElementById("HideMarca").style.display ="";
        document.getElementById("Hidetipoa").style.display ="none";
         document.getElementById("HideAtt").style.display ="none";
      }       
    }

    function optionCheck2(){
      var option = document.getElementById("tipo2").value;
      if(option == "1"){
        document.getElementById("HidePor").style.display ="";
        document.getElementById("HideReal").style.display ="none";
        document.getElementById("HideAtt").style.display ="";
      }
      if(option == "2"){
        document.getElementById("HidePor").style.display ="none";
        document.getElementById("HideReal").style.display ="";
        document.getElementById("HideAtt").style.display ="";
      }       
    }


    function optionCat(){
      var option = document.getElementById("idcat").value;
      if(option == "0"){
        document.getElementById("HidePor").style.display ="none";
        document.getElementById("HideReal").style.display ="none";
        document.getElementById("Hidetipoa").style.display ="none";
        document.getElementById("HideAtt").style.display ="none";
      }else{
        document.getElementById("Hidetipoa").style.display ="";
      }
    }
    function optionMarca(){
      var option = document.getElementById("idmarca").value;
      if(option == "0"){
        document.getElementById("HidePor").style.display ="none";
        document.getElementById("HideReal").style.display ="none";
        document.getElementById("Hidetipoa").style.display ="none";
        document.getElementById("HideAtt").style.display ="none";
      }else{
        document.getElementById("Hidetipoa").style.display ="";
      }
    }
  </script>
</form>