var arrayLote = [];
var arrayCad = [];
var arrayInc = [];
/////////////////////////////////////////////////////////////////////////////////////
function validateEmail(email) { var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); }
/////////////////////////////////////////////////////////////////////////////////////
function check_btn() {
  /////////////////////////////////////////////////////////////////////////////////////
  var client_name = $('#client_name').val(); if (!(client_name.length > 0)) { $('#crear_incidencia').addClass('disabled'); $('#client_name').css('border', '2px solid red'); return 0; }
  var num_pedido = $('#num_pedido').val(); if (!(num_pedido.length > 0)) { $('#crear_incidencia').addClass('disabled'); $('#num_pedido').css('border', '2px solid red'); return 0; }
  var email = $('#email').val(); if (!(validateEmail(email))) { $('#crear_incidencia').addClass('disabled'); $('#email').css('border', '2px solid red'); return 0; }
  var whatsapp = $('#whatsapp').val(); if (!(whatsapp.length > 0)) { $('#crear_incidencia').addClass('disabled'); $('#whatsapp').css('border', '2px solid red'); return 0; }
  var descripcion = $('#descripcion').val(); if (!(descripcion.length > 0)) { $('#crear_incidencia').addClass('disabled'); $('#descripcion').css('border', '2px solid red'); return 0; }
  var tipo_incidencia = $('#tipo_incidencia').val(); if (tipo_incidencia == 'falso') { $('#crear_incidencia').addClass('disabled'); $('#tipo_incidencia').css('border', '2px solid red'); return 0; }
  /////////////////////////////////////////////////////////////////////////////////////
  $('#crear_incidencia').removeClass('disabled');
  /////////////////////////////////////////////////////////////////////////////////////
  return 0;
  /////////////////////////////////////////////////////////////////////////////////////
}
/////////////////////////////////////////////////////////////////////////////////////
$(document).on('ready', function () {
  /////////////////////////////////////////////////////////////////////////////////////
  $('.form-field-input').change(function(){ var actv = $(this).val(); if(actv.length > 0){ $(this).addClass('form-field-filled').css('border',''); }else{ $(this).removeClass('form-field-filled'); } check_btn(); });
  $(document).on('keydown', '.live-search-form-field', function (e) { if (e.which == 13) { if ($(this).val().length > 0) { var search = $(this).val().replace(/ /g, "+").toLowerCase(); var win = window.open('https://www.petmarkt.com.mx/search?type=product&q=' + search, '_blank'); win.focus(); } } });
  $(document).on('click', '.live-search-button', function () { if ($('.live-search-form-field').val().length > 0) { var search = $('.live-search-form-field').val().replace(/ /g, "+").toLowerCase(); var win = window.open('https://www.petmarkt.com.mx/search?type=product&q=' + search, '_blank'); win.focus(); } else { $('.live-search-form-field').css('border', '2px solid red'); setTimeout(function () { $('.live-search-form-field').css('border', ''); }, 5000); } });
  /////////////////////////////////////////////////////////////////////////////////////
});
/////////////////////////////////////////////////////////////////////////////////////
$(document).on('click', '#crear_incidencia', function () {
  /////////////////////////////////////////////////////////////////////////////////////
  var objeto = {};
  var actual_classes = $(this).attr('class');
  var client_name = $('#client_name').val(); objeto['client_name'] = client_name;
  var num_pedido = $('#num_pedido').val(); objeto['order'] = num_pedido;
  var email = $('#email').val(); objeto['email'] = email;
  var whatsapp = $('#whatsapp').val(); objeto['whatsapp'] = whatsapp;
  var descripcion = $('#descripcion').val(); objeto['description'] = descripcion;
  var tipo_incidencia = $('#tipo_incidencia').val(); objeto['type'] = tipo_incidencia;
  switch($('#tipo_incidencia').val()) {
    case 'Producto equivocado':
    case 'Producto faltante':
    case 'Producto de mas':
      if(arrayInc.length == 0){$('#response').html('<p>Favor de cargar las imagenes solicitadas.</p>'); return 0; }
      objeto['img_lote'] = 'N/A';
      objeto['img_caducidad'] = 'N/A';
      objeto['img_incidencia'] = arrayInc.toString();
      break;
    case 'Producto contaminado / caducado':
      if(arrayInc.length == 0 && arrayCad.length == 0 && arrayLote.length == 0){$('#response').html('<p>Favor de cargar las imagenes solicitadas.</p>'); return 0; }
      objeto['img_lote'] = arrayLote[0];
      objeto['img_caducidad'] = arrayCad[0];
      objeto['img_incidencia'] = arrayInc.toString();
      break;
    case 'Empaque o producto dañado':
      if(arrayInc.length == 0 && arrayLote.length == 0){$('#response').html('<p>Favor de cargar las imagenes solicitadas.</p>'); return 0; }
      objeto['img_lote'] = arrayLote[0];
      objeto['img_caducidad'] = 'N/A';
      objeto['img_incidencia'] = arrayInc.toString();
      break;
    case 'Entrega detenida':
    case 'Falsa entrega':
      objeto['img_lote'] = 'N/A';
      objeto['img_caducidad'] = 'N/A';
      objeto['img_incidencia'] = 'N/A';
    break;
    default:
      $('#response').html('<p>Favor de seleccionar el tipo de incidencia.</p>'); return 0;
  }
  console.log('objeto ==> ', objeto);
  /////////////////////////////////////////////////////////////////////////////////////
  if (validateEmail(email)) {
    if (!(actual_classes.includes('disabled'))) {
      $.post(
        'https://app.petmarkt.com.mx/api/incidencias',
        objeto,
        function (data) {
          if (data.status === 'error') {
            $('#response').html('<h3>Algo salió mal mientras ingresabamos tu incidencia, intenta de nuevo mas tarde</h3>');
          } else {
            $('#incidencia_form').html(`
              <h3 class="account-page-title">¡Gracias!</h3>
              <p>Tu incidencia ${data.data.id} para la orden: ${num_pedido} ha sido enviada con éxito.</p>
              <p>En menos de 24 horas hábiles te contactará nuestro equipo de atención a clientes</p>
            `);
          }
        });
      return 1;
    } else {
      $('#response').html('<p>Verifica los datos ingresados</p>');
    }
  } else {
    $('#response').html('<p>Verifica el correo ingresado</p>');
    $('#email').css('border', '2px solid red');
  }
  /////////////////////////////////////////////////////////////////////////////////////
});
/////////////////////////////////////////////////////////////////////////////////////

$( "#tipo_incidencia" ).change(function() {
  switch(this.value) {
    case 'Producto equivocado':
    case 'Producto faltante':
    case 'Producto de mas':
      $('#full_drags_conteiner').show();
      $('.drags_container').hide();
      $('#drag_inc').show();
      break;
    case 'Producto contaminado / caducado':
      $('#full_drags_conteiner').show();
      $('.drags_container').show();
      $('#drag_inc').show();
      $('#drag_cad').show();
      break;
    case 'Empaque o producto dañado':
      $('#full_drags_conteiner').show();
      $('.drags_container').show();
      $('#drag_inc').show();
      $('#drag_cad').hide();
      $(".lote_container").css("justify-content", "center");
      break;
    case 'Entrega detenida':
    case 'Falsa entrega':
      $('#full_drags_conteiner').hide();
      $('.drags_container').hide();
      $('#drag_inc').hide();
    break;
    default:
      return;
  }
});

let loteCounter = 0;

$('#drag_lote').on('dragenter', (e) => {
  e.preventDefault();
  e.stopPropagation();
  loteCounter++;
  if (e.originalEvent.dataTransfer?.items && e.originalEvent.dataTransfer.items.length > 0) {
    $('#overlay_lote').show();
  }
});

$('#drag_lote').on('dragleave', (e) => {
  e.preventDefault();
  e.stopPropagation();
  loteCounter--;
  if (loteCounter > 0) return;
  $('#overlay_lote').hide();
});

$("#drag_lote, #drag_cad, #drag_inc").on("dragover", (e) => {
  e.preventDefault();
  e.stopPropagation();
});

$('#drag_lote').on('drop', (e) => {
  e.preventDefault();
  e.stopPropagation();
  loteCounter = 0;
  $('#overlay_lote').hide();

  let files = e.originalEvent.dataTransfer.files;
  if (arrayLote.length == 0) {
    $('#loader').css('display', 'block');
    var formData = new FormData();
    formData.append("path", files[0]);
    formData.append("destPath", "incidencias");
    $.ajax({
      url: 'https://app.petmarkt.com.mx/api/storage/upload/image',
      type: "POST",
      data: formData,
      contentType: false,
      cache: false,
      processData: false,
      success: function (data) {
        if (data.status === "error") {
          $("#response").html(
            "<h3>Algo salió mal al intentar cargar tu imagen, intentalo de nuevo.</h3>"
          );
        } else {
          arrayLote.push(data.data[0].url);
          $('#lotePreview').css('display', 'block');
          $("#loteTrash").attr("img-name", data.data[0].name);
          imgPreview(files[0], "#lotePreview", "#add_lote", "#loteTrash");
        }
        $('#loader').css('display', 'none');
      },
    });
  }

});

let cadCounter = 0;

$('#drag_cad').on('dragenter', (e) => {
  e.preventDefault();
  e.stopPropagation();
  cadCounter++;
  if (e.originalEvent.dataTransfer?.items && e.originalEvent.dataTransfer.items.length > 0) {
    $('#overlay_cad').show();
  }
});

$('#drag_cad').on('dragleave', (e) => {
  e.preventDefault();
  e.stopPropagation();
  cadCounter--;
  if (cadCounter > 0) return;
  $('#overlay_cad').hide();
});

$('#drag_cad').on('drop', (e) => {
  e.preventDefault();
  e.stopPropagation();
  cadCounter = 0;
  $('#overlay_cad').hide();

  let files = e.originalEvent.dataTransfer.files;
  if (arrayCad.length == 0) {
    $('#loader').css('display', 'block');
    var formData = new FormData();
    formData.append("path", files[0]);
    formData.append("destPath", "incidencias");
    $.ajax({
      url: 'https://app.petmarkt.com.mx/api/storage/upload/image',
      type: "POST",
      data: formData,
      contentType: false,
      cache: false,
      processData: false,
      success: function (data) {
        if (data.status === "error") {
          $("#response").html(
            "<h3>Algo salió mal al intentar cargar tu imagen, intentalo de nuevo.</h3>"
          );
        } else {
          arrayCad.push(data.data[0].url);
          $('#cadPreview').css('display', 'block');
          $("#cadTrash").attr("img-name", data.data[0].name);
          imgPreview(files[0],'#cadPreview','#add_cad','#cadTrash');
        }
        $('#loader').css('display', 'none');
      },
    });
  }
});

let incCounter = 0;

$('#drag_inc').on('dragenter', (e) => {
  e.preventDefault();
  e.stopPropagation();
  incCounter++;
  if (e.originalEvent.dataTransfer?.items && e.originalEvent.dataTransfer.items.length > 0) {
    $('#overlay_inc').show();
  }
});

$('#drag_inc').on('dragleave', (e) => {
  e.preventDefault();
  e.stopPropagation();
  incCounter--;
  if (incCounter > 0) return;
  $('#overlay_inc').hide();
});

$('#drag_inc').on('drop', (e) => {
  e.preventDefault();
  e.stopPropagation();
  incCounter = 0;
  $('#overlay_inc').hide();


  let files = e.originalEvent.dataTransfer.files;
  $('#loader').css('display', 'block');
  uploadImgInc(files[0]);
});

function imgPreview(file, querySelector, preview, trash){
  $(`${preview}`).hide();
  $(`${trash}`).show();
	objectURL = URL.createObjectURL(file);
	$(`${querySelector}`).css("background", `url(${objectURL})no-repeat center center`);
}

function deleteImg (name){
  $.ajax({
		url: 'https://app.petmarkt.com.mx/api/storage/delete/image',
		type: "POST",
    dataType: 'json',
    contentType: 'application/json',
		data: JSON.stringify({'name':name}),
		success: function(data) {
			if (data.status === 'error') {
        $('#response').html('<h3>Algo salió mal al intentar borrar la imagen, intentalo de nuevo.</h3>');
      }
		}
	});
}

$('#loteTrash').on('click', () => {
  $('#file_lote').val('');
  $('#add_lote').show();
  $('#loteTrash').hide();
  $('#lotePreview').css('display', 'none');
  deleteImg($('#loteTrash').attr('img-name'))
  arrayLote = [];
});

$('#cadTrash').on('click', () => {
  $('#file_cad').val('');
  $('#add_cad').show();
  $('#cadTrash').hide();
  $('#cadPreview').css('display', 'none');;
  deleteImg($('#cadTrash').attr('img-name'))
  arrayCad = [];
});

$('#file_lote').on('change', (event) => {
  $('#loader').css('display', 'block');
  const input = event.target;
	if(!input.files.length) return;
  if (arrayLote.length == 0) {
    var formData = new FormData();
    formData.append("path", input.files[0]);
    formData.append("destPath", "incidencias");
    $.ajax({
      url: 'https://app.petmarkt.com.mx/api/storage/upload/image',
      type: "POST",
      data: formData,
      contentType: false,
      cache: false,
      processData: false,
      success: function (data) {
        if (data.status === "error") {
          $("#response").html(
            "<h3>Algo salió mal al intentar cargar tu imagen, intentalo de nuevo.</h3>"
          );
        } else {
          arrayLote.push(data.data[0].url);
          $('#lotePreview').show();
          $("#loteTrash").attr("img-name", data.data[0].name);
          imgPreview(
            input.files[0],
            "#lotePreview",
            "#add_lote",
            "#loteTrash"
          );
        }
        $('#loader').css('display', 'none');
      },
    });
  }
});

$('#file_cad').on('change', (event) => {
  $('#loader').css('display', 'block');
  const input = event.target;
	if(!input.files.length) return;
  if (arrayCad.length == 0) {
    var formData = new FormData();
    formData.append("path", input.files[0]);
    formData.append("destPath", "incidencias");
    $.ajax({
      url: 'https://app.petmarkt.com.mx/api/storage/upload/image',
      type: "POST",
      data: formData,
      contentType: false,
      cache: false,
      processData: false,
      success: function (data) {
        if (data.status === "error") {
          $("#response").html(
            "<h3>Algo salió mal al intentar cargar tu imagen, intentalo de nuevo.</h3>"
          );
        } else {
          arrayCad.push(data.data[0].url);
          $('#cadPreview').show();
          $("#cadTrash").attr("img-name", data.data[0].name);
          imgPreview(input.files[0], "#cadPreview", "#add_cad", "#cadTrash");
        }
        $('#loader').css('display', 'none');
      },
    });
  }
});

function uploadImgInc (file) {
  if(arrayInc.length == 0){
    $( "#photos_inc" ).removeClass( "photos_container" );
    $( "#photos_inc" ).addClass( "photos_container_inc" );
  }
  var formData = new FormData();
    formData.append("path", file);
    formData.append("destPath", "incidencias");
    $.ajax({
      url: 'https://app.petmarkt.com.mx/api/storage/upload/image',
      type: "POST",
      data: formData,
      contentType: false,
      cache: false,
      processData: false,
      success: function (data) {
        if (data.status === "error") {
          $("#response").html(
            "<h3>Algo salió mal al intentar cargar tu imagen, intentalo de nuevo.</h3>"
          );
        } else {
          var idRand = Math.floor(Math.random() * 1000);
          arrayInc.push(data.data[0].url);
          objectURL = URL.createObjectURL(file);
          $("#photos_inc").append(`<div id="img${idRand}" class="photos_previw photos_preview_inc">
                                    <div class="img_preview" style="background: url(${objectURL}) no-repeat center center;"></div>
                                    <a onclick="deleteImgInc('${data.data[0].name}', '${data.data[0].url}', 'img${idRand}')" class="icon" style="display:block;"><i class="fas fa-times-circle icon__img"></i></a>
                                  </div>`);
        }
        $('#loader').css('display', 'none');
      },
    });
}

$('#file_inc').on('change', (event) => {
  const input = event.target;
	if(!input.files.length) return;
  $('#loader').css('display', 'block');
  uploadImgInc(input.files[0]);
});

function deleteImgInc(name, url, id){
  $.ajax({
		url: 'https://app.petmarkt.com.mx/api/storage/delete/image',
		type: "POST",
    dataType: 'json',
    contentType: 'application/json',
		data: JSON.stringify({'name':name}),
		success: function(data) {
			if (data.status === 'error') {
        $('#response').html('<h3>Algo salió mal al intentar borrar la imagen, intentalo de nuevo.</h3>');
      } else {
        var indice = arrayInc.indexOf(url);
        arrayInc.splice(indice, 1);
        $(`#${id}`).hide();
        if(arrayInc.length == 0) {
          $( "#photos_inc" ).addClass( "photos_container" );
          $( "#photos_inc" ).removeClass( "photos_container_inc" );
        }
      }
		}
	});
}