// Var Globales
ItemCant = 0
subtotal = 0
itemsArray = {}
itemsArraynew = {}

// Ajax Json Original
$.ajax({
  type: 'GET',
  url: 'https://eshop-deve.herokuapp.com/api/v2/orders/1838023508012',
  data: {},
  dataType: 'json',
  headers: {
    'Authorization': 'eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJqNENWdUR6R0RpQTJzeHUwWVlPWW5kaUU0WGtvbnNGYiIsImlhdCI6MTU2NTA0MjE1NDg5N30.7fhKSn_S18AMA8T12Ne1iK_O0yRZvvMd17J7unGGnuwN2MjjxZB306VSDqk3pQ1I-wj3iutJLhVyR3kHWkhxFw'
  },
  success: itemsData
})

// Obtiene datos principales
function itemsData (data) {
  // Muestra el numero de Orden
  $('.orderNumber').html(data.order.number)

  // Selecciona los items del JSON
  itemsArray = data.order.items

  // Mestra los datos
  itemsArray.forEach(item => {
    // Suma la cantidad de Productos
    ItemCant += parseInt(item.quantity)
    $('[cant]').text(ItemCant)
    // Suma los valores Price para dar el Subtotal
    subtotal += parseInt(item.price)
    $('.subtotal').text('$' + subtotal)
    // Muestra en pantalla la lista de productos
    $('[print_table]').append('<div class="card Producto" id=""><div class="card-body"><div class="row d-flex align-items-center"><div class="col-2"> <img style="width: 100%;" class="img" src="' + item.imageUrl + '" alt=""></div><div class="col-10"><div class="row"><div class="col-6"><h5>' + item.sku + '-' + item.name + '</h5><p> Item ID - ' + item.id + '</p></div><div class="col-6 float-right text-right"><h6>Cant. ' + item.quantity + '</h6><h6 class="price">$<span>' + item.price + '</span></h6></div><div class="col-12 text-right options"><hr></div></div></div></div></div></div>')
  })

  // Muestra diferentes datos
  // Cantidad a comprar
  itemsArrayLenght = itemsArray.length

  // Id Siguiente solo visual
  IntitemLeg = parseInt(itemsArrayLenght) - 1
  nextID = parseInt(itemsArray[IntitemLeg].id)
  nextID = nextID + 1

  $('#ItemIDForm').attr('placeholder', nextID)
  $('#ItemIDForm').attr('value', nextID)

  // Identifica las imagenes Nulas y las Remplaza por una Default
  img = $('.img')
  for (let i = 0; i < img.length; i++) {
    long = img[i].src.length

    getURLImg = img[i].src.substring((long - 4), long)
    if (getURLImg == 'null') {
      img[i].src = 'https://www.intuxanadu.com/wp-content/plugins/ajax-search-pro/img/default.jpg'
    }
  }

  // Al gruardar el nuevo producto
  $('.addProductBTN').click(function () {
    // Validacion de Formulario
    if ($('#ItemSku').val() == '') {
      $('#ItemSku').addClass('emptyForm')
      $('#ItemSku').change(function () {
        $('#ItemSku').removeClass('emptyForm')
      })
      const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 1500,
        timerProgressBar: true,
        onOpen: (toast) => {
          toast.addEventListener('mouseenter', Swal.stopTimer)
          toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
      })
      Toast.fire({
        icon: 'warning',
        title: 'Campo vacio - SKU'
      })
    } else if ($('#ItemName').val() == '') {
      $('#ItemName').addClass('emptyForm')
      $('#ItemName').change(function () {
        $('#ItemName').removeClass('emptyForm')
      })
      const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 1500,
        timerProgressBar: true,
        onOpen: (toast) => {
          toast.addEventListener('mouseenter', Swal.stopTimer)
          toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
      })
      Toast.fire({
        icon: 'warning',
        title: 'Campo vacio - Nombre del Producto'
      })
    }else if ($('#ItemCantidad').val() == '') {
      $('#ItemCantidad').addClass('emptyForm')
      $('#ItemCantidad').change(function () {
        $('#ItemCantidad').removeClass('emptyForm')
      })
      const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 1500,
        timerProgressBar: true,
        onOpen: (toast) => {
          toast.addEventListener('mouseenter', Swal.stopTimer)
          toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
      })
      Toast.fire({
        icon: 'warning',
        title: 'Campo vacio - Cantidad'
      })
    } else if ($('#ItemPrice').val() == '') {
      $('#ItemPrice').addClass('emptyForm')
      $('#ItemPrice').change(function () {
        $('#ItemPrice').removeClass('emptyForm')
      })
      const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 1500,
        timerProgressBar: true,
        onOpen: (toast) => {
          toast.addEventListener('mouseenter', Swal.stopTimer)
          toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
      })
      Toast.fire({
        icon: 'warning',
        title: 'Campo vacio - Precio'
      })
    } else {
      // Alerta
      const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        onOpen: (toast) => {
          toast.addEventListener('mouseenter', Swal.stopTimer)
          toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
      })
      Toast.fire({
        icon: 'success',
        title: 'Producto Agregado Correctamente'
      })

      // Values del formulario
      nextIDSTR = nextID.toString()
      NameProduct = $('#ItemName').val()
      CantProduct = parseInt($('#ItemCantidad').val())
      PriceProduct = parseInt($('#ItemPrice').val()) * CantProduct
      SKUProduct = $('#ItemSku').val()

      // Agrega al JSON temporalmente
      itemsArray.push({discount: '0.00', ecartapiUrl: 'https://www.intuxanadu.com/wp-content/plugins/ajax-search-pro/img/default.jpg', fulfillment: {quantity: null, service: 'manual', status: 'fulfilled'},id: nextIDSTR,imageUrl: null,name: NameProduct,price: PriceProduct,productId: nextIDSTR, quantity: CantProduct,requiresShipping: 'true',sku: SKUProduct,tax: null,taxable: 'true',variantId: '7207580008492',vendor: 'oskysfactory'})

      // Agrega Visualmente el articulo
      $('[print_table]').append('<div class="card Producto" id=""><div class="card-body"><div class="row d-flex align-items-center"><div class="col-2"> <img style="width: 100%;" class="img" src="https://www.intuxanadu.com/wp-content/plugins/ajax-search-pro/img/default.jpg" alt=""></div><div class="col-10"><div class="row"><div class="col-6"><h5>' + SKUProduct + '-' + NameProduct + '</h5><p> Item ID - ' + nextIDSTR + '</p></div><div class="col-6 float-right text-right"><h6>Cant. ' + CantProduct + '</h6><h6 class="price">$<span>' + PriceProduct + '</span></h6></div><div class="col-12 text-right options"><hr></div></div></div></div></div></div>')

      // Subtotal a pagar
      ItemCant += CantProduct
      subtotal += PriceProduct

      $('[cant]').text(ItemCant)
      $('.subtotal').text('$' + subtotal)

      // Cierra la ventana de Nuevo Producto
      $('.close').click()

      // Incrementa el ID
      nextID = nextID + 1
      $('#ItemIDForm').attr('placeholder', nextID)
      $('#ItemIDForm').attr('value', nextID)
      $('[cant]').text(ItemCant)

      // Limpia los inputs
      $('#ItemName').val('')
      $('#ItemPrice').val('')
      $('#ItemSku').val('')
      $('#ItemCantidad').val('')

      itemsArraynew = itemsArray
    }
  })

  // Genera la orden de compra
  $('.apagar').click(function () {
    $('.cantidad').text('$' + subtotal)
    if (jQuery.isEmptyObject(itemsArraynew)) {

      // Mestra los datos
      itemsArray.forEach(item => {
        // Suma los valores Price para dar el Subtotal
        subtotal += parseInt(item.price)

        // Muestra en pantalla la lista de productos
        $('.productosPagar').append('<div class="card Producto productoapagar" id=""><div class="card-body"><div class="row d-flex align-items-center"><div class="col-2"> <img style="width: 100%;" class="img" src="' + item.imageUrl + '" alt=""></div><div class="col-10"><div class="row"><div class="col-6"><h5>' + item.sku + '-' + item.name + '</h5><p> Item ID - ' + item.id + '</p></div><div class="col-6 float-right text-right"><h6>Cant. ' + item.quantity + '</h6><h6 class="price">$<span>' + item.price + '</span></h6></div><div class="col-12 text-right options"><hr></div></div></div></div></div></div>')
        $('.pago').on('hidden.bs.modal', function () {
          $('.productoapagar').remove()
        })
      })
    } else {
      // Mestra los datos
      itemsArraynew.forEach(item => {
        // Suma los valores Price para dar el Subtotal
        subtotal += parseInt(item.price)

        // Muestra en pantalla la lista de productos
        $('.productosPagar').append('<div class="card Producto productoapagar" id=""><div class="card-body"><div class="row d-flex align-items-center"><div class="col-2"> <img style="width: 100%;" class="img" src="' + item.imageUrl + '" alt=""></div><div class="col-10"><div class="row"><div class="col-6"><h5>' + item.sku + '-' + item.name + '</h5><p> Item ID - ' + item.id + '</p></div><div class="col-6 float-right text-right"><h6>Cant. ' + item.quantity + '</h6><h6 class="price">$<span>' + item.price + '</span></h6></div><div class="col-12 text-right options"><hr></div></div></div></div></div></div>')
        $('.pago').on('hidden.bs.modal', function () {
          $('.productoapagar').remove()
        })
      })
    }
  })

  // Redirecciona al completar
  $('.pagarProducto').click(function () {
    window.location.href = 'docs.html'
  })
}
