text: function newBook(book) {
      const div = document.createElement('div');
      div.className = 'column is-4';
      div.innerHTML = `
          <div class="card is-shady">
              <div class="card-image">
                  <figure class="image is-4by3">
                      <img
                          src="${book.photo}"
                          alt="${book.name}"
                          class="modal-button"
                      />
                  </figure>
              </div>
              <div class="card-content">
                  <div class="content book" data-id="${book.id}">
                      <div class="book-meta">
                          <p class="is-size-4">R$${book.price.toFixed(2)}</p>
                          <p class="is-size-6">Disponível em estoque: ${book.quantity}</p>
                          <h4 class="is-size-3 title">${book.name}</h4>
                          <p class="subtitle">${book.author}</p>
                      </div>
                      <div class="field has-addons">
                          <div class="control">
                              <input class="input" type="text" placeholder="Digite o CEP" />
                          </div>
                          <div class="control">
                              <a class="button button-shipping is-info" data-id="${book.id}"> Calcular Frete </a>
                          </div>
                      </div>
                      <button class="button button-buy is-success is-fullwidth" data-id="${book.id}">Comprar</button>
                  </div>
              </div>
          </div>`;
      return div;
  }
  
  function ConsultarQuantidade(id, i) {
      fetch('http://localhost:3000/product/'+id)
          .then((data) => {
              if (data.ok) {
                  return data.json();
              }
              throw data.statusText;
          })
          .then((data) => {
              if (data.quantity > 0) {
                  $(".button-buy")[i].removeAttribute("disabled", "");
              }
              else{
                  $(".button-buy")[i].setAttribute("disabled", "");
              }
          })
          .catch((err) => {
              swal('Erro', 'Erro ao listar os produtos', 'error');
              console.error(err);
          }
      );
  }
  
  function AtualizarEstoque(id){
      fetch('http://localhost:3000/product/' + id + '/buy')
          .then((data) => {
              if(data.ok){
                  return data.json();
              }
              throw data.statusText;
          })
          .then(() => {
              swal('Compra de livro', 'Sua compra foi realizada com sucesso', 'success')
                  .then(() => {
                      location.reload();
                  });
          })
          .catch((err) => {
              swal('Erro', 'Ocorreu um erro ao prosseguir com a compra: ' + err, 'error');
          })
  }
  
  function calculateShipping(id, cep) {
      fetch('http://localhost:3000/shipping/' + cep)
          .then((data) => {
              if (data.ok) {
                  return data.json();
              }
              throw data.statusText;
          })
          .then((data) => {
              swal('Frete', `O frete é: R$${data.value.toFixed(2)}`, 'success');
          })
          .catch((err) => {
              swal('Erro', 'Erro ao consultar frete', 'error');
              console.error(err);
          }
      );
  }
  
  document.addEventListener('DOMContentLoaded', function () {
      const books = document.querySelector('.books');
  
      fetch('http://localhost:3000/products')
          .then((data) => {
              if (data.ok) {
                  return data.json();
              }
              throw data.statusText;
          })
          .then((data) => {
              if (data) {
                  data.forEach((book) => {
                      books.appendChild(newBook(book));
                  });
  
                  for(i = 0; i < data.length; i++){
                      ConsultarQuantidade(data[i]["id"], i)
                  }
  
                  document.querySelectorAll('.button-buy').forEach((btn) => {
                      btn.addEventListener('click', (e) => {
                          const idProduct = e.target.getAttribute('data-id');
                          
                          AtualizarEstoque(idProduct);
                      });
                  });
                  
                  document.querySelectorAll('.button-shipping').forEach((btn) => {
                      btn.addEventListener('click', (e) => {
                          const id = e.target.getAttribute('data-id');
                          const cep = document.querySelector(`.book[data-id="${id}"] input`).value;
                          calculateShipping(id, cep);
                      });
                  });              
              }
          })
          .catch((err) => {
              swal('Erro', 'Erro ao listar os produtos', 'error');
              console.error(err);
          });
  });
  