<?php $page = 'familia'; include('header.php'); ?>
<body class="hold-transition layout-top-nav">
<div class="wrapper">
  <div class="preloader flex-column justify-content-center align-items-center">
    <img class="animation__shake" src="images/logo/<?php echo $rows[9]['valor']; ?>" alt="AdminLTELogo" height="60" width="60">
  </div>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
        <!-- SELECT2 EXAMPLE -->
        <div class="col-md-6">
        <div class="card card-default">
          <div class="card-header">
            <h3 class="card-title">Modo de Pagamento</h3>

            <div class="card-tools">
              <button type="button" class="btn btn-tool" data-card-widget="collapse">
                <i class="fas fa-minus"></i>
              </button>
              <button type="button" class="btn btn-tool" data-card-widget="remove">
                <i class="fas fa-times"></i>
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <div class="row">
            <div class="col-md-3" style="text-align: -webkit-center;">
              <div class="form-group margem">
                  <div class="wrapper-image">
                      <div class="image-container">
                          <i class="fas fa-image"></i>
                      </div>
                      <label for="file" class="camera-icon">
                      <i class="fas fa-camera"></i>
                      </label>
                      <input type="file" id="file" name="file" accept="image/*" hidden>
                  </div>
              </div>
            </div>
              <div class="col-md-9">
                <div class="form-group" style="margin-bottom: 0;">
                  <small class="required">Nome</small>
                  <input type="text" class="form-control" id="nome" name="nome" placeholder="Nome" title="Nome" required>
                  <small>Mensagem de erro</small>
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                  <small class="not-required">Nota</small>
                  <textarea name="nota" id="nota" class="form-control" placeholder="Nota..." rows="4"></textarea>
                  <small>Mensagem de erro</small>
                </div>
              </div>
              <div class="col-md-6"></div>
              <div class="col-md-6">
                <div class="form-group">
                    <button type="submit" name="btn-submit" id="btn-submit" class="btn btn-block btn-primary" >Cadastrar Modo de Pagamento</button>
                </div>
              </div>
              <!-- /.col -->
            </div>
            <!-- /.row -->
          </div>
          <!-- /.card-body -->
          <div class="card-footer">
            Cadastro dos Modos de Pagamento.
          </div>
        </div>
        </div>
        </div>
        <!-- /.card -->
      </div>
      <!-- /.container-fluid -->
    </section>
  </div>
  <!-- /.content-wrapper -->
  <?php include('footer.php'); ?>
</body>
</html>
<script src="./validation/modoPagamento.js"></script>
<script>

$(document).ready(function(){
  formModoPagamentoButton();
});

$(document).on("click", "#btn-submit", function(e){
  e.preventDefault();
  if(nome.value != ''){
    let img = $("#file")[0].files;
    modoPagamento(img);
  }
});

function foto(identificador, img){
    let form_data = new FormData();
    form_data.append('id', identificador);
    form_data.append('imagem', img[0]);

    $.ajax({
      url: "includes/create/fotoModoPagamento.inc.php",
      type: "post",
      data: form_data,
      cache: false,
      contentType: false,
      processData: false,
      success: function(data){
        console.log(data);
      }
    });
}

function modoPagamento(img){
  $.ajax({
        url: "includes/create/modoPagamento.inc.php",
        type: "post",
        data: {
          nome: nome.value,
          nota: nota.value
      },
      success: function(data){
        swal.fire({
          title: "Cadastro efectuado com sucesso!",
          text: "Modo de Pagamento "+ nome.value +" cadastrado!",
          confirmButtonText: 'Confirmar',
          icon: "success",
        }).then(() => {
          if(img[0] != null){
            foto(data, img);
          }
        });
        nome.value = "";
        nome.className = "form-control";
        nota.value = "";
        nota.className = "form-control";
      },
      error: function(data){
        swal.fire({
          title: "Erro ao Cadastrar nome!",
          text: "Erro ao Cadastrar nome: "+ nome.value +" !",
          confirmButtonText: 'Confirmar',
          icon: "error",
      });
      }
    }).done(function(data){
        console.log(data);
    });
}
</script>
