var countries_postpago = [];
var countries_prepago = [];
var plan_id = "";
var country_name = "";
var cliente = "";


function isButtonAble(){

  var phone = document.getElementById("num_phone").value;

      if(phone != "" && phone.length == 8){
          document.getElementById("send-form").classList.remove("disabled-btn");
      }else{
          document.getElementById("send-form").classList.add("disabled-btn");
      }
}


function cancelEventPhone(e) {
  if (document.getElementById("num_phone").value.length >= 8) {
      if (e.keyCode != 8) {
          e.preventDefault();
      }
  } else {
      return true;
  }
}


function validatePhoneRequest(e) {
  var elem = e.target;
  if (this.value.length == 8) {
      elem.addEventListener("keydown", cancelEventPhone);
  }
}

function getCountryPostpago(){
  fetch("https://apis.libertycr.com/api/mvcr186/countries?plan_id=2")
    .then(response => response.json())
    .then(result => {
      result.data.forEach(function(element, index) {
         countries_postpago.push(element.pais);
      });
    })
  .catch(err => console.log(err))

  
}

function getCountryPrepago(){
  fetch("https://apis.libertycr.com/api/mvcr186/countries?plan_id=1")
  .then(response => response.json())
  .then(result => {
    result.data.forEach(function(element, index) {
      countries_prepago.push(element.pais);
   });
  })
  .catch(err => console.log(err))
  
}


function autocomplete(inp, arr) {
    /*the autocomplete function takes two arguments,
    the text field element and an array of possible autocompleted values:*/
    var currentFocus;
    /*execute a function when someone writes in the text field:*/
    inp.addEventListener("input", function(e) {
        var a, b, i, val = this.value;
        /*close any already open lists of autocompleted values*/
        closeAllLists();
        if (!val) { return false;}
        currentFocus = -1;
        /*create a DIV element that will contain the items (values):*/
        a = document.createElement("DIV");
        a.setAttribute("id", this.id + "autocomplete-list");
        a.setAttribute("class", "autocomplete-items");
        /*append the DIV element as a child of the autocomplete container:*/
        this.parentNode.appendChild(a);
        /*for each item in the array...*/
        for (i = 0; i < arr.length; i++) {
          /*check if the item starts with the same letters as the text field value:*/
          if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
            /*create a DIV element for each matching element:*/
            b = document.createElement("DIV");
            /*make the matching letters bold:*/
            b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
            b.innerHTML += arr[i].substr(val.length);
            /*insert a input field that will hold the current array item's value:*/
            b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
            /*execute a function when someone clicks on the item value (DIV element):*/
                b.addEventListener("click", function(e) {
                /*insert the value for the autocomplete text field:*/
                inp.value = this.getElementsByTagName("input")[0].value;
                /*close the list of autocompleted values,
                (or any other open lists of autocompleted values:*/
                closeAllLists();
            });
            a.appendChild(b);
          }
        }
    });
    /*execute a function presses a key on the keyboard:*/
    inp.addEventListener("keydown", function(e) {
        var x = document.getElementById(this.id + "autocomplete-list");
        if (x) x = x.getElementsByTagName("div");
        if (e.keyCode == 40) {
          /*If the arrow DOWN key is pressed,
          increase the currentFocus variable:*/
          currentFocus++;
          /*and and make the current item more visible:*/
          addActive(x);
        } else if (e.keyCode == 38) { //up
          /*If the arrow UP key is pressed,
          decrease the currentFocus variable:*/
          currentFocus--;
          /*and and make the current item more visible:*/
          addActive(x);
        } else if (e.keyCode == 13) {
          /*If the ENTER key is pressed, prevent the form from being submitted,*/
          e.preventDefault();
          if (currentFocus > -1) {
            /*and simulate a click on the "active" item:*/
            if (x) x[currentFocus].click();
          }
        }
    });
    function addActive(x) {
      /*a function to classify an item as "active":*/
      if (!x) return false;
      /*start by removing the "active" class on all items:*/
      removeActive(x);
      if (currentFocus >= x.length) currentFocus = 0;
      if (currentFocus < 0) currentFocus = (x.length - 1);
      /*add class "autocomplete-active":*/
      x[currentFocus].classList.add("autocomplete-active");
    }
    function removeActive(x) {
      /*a function to remove the "active" class from all autocomplete items:*/
      for (var i = 0; i < x.length; i++) {
        x[i].classList.remove("autocomplete-active");
      }
    }
    function closeAllLists(elmnt) {
      /*close all autocomplete lists in the document,
      except the one passed as an argument:*/
      var x = document.getElementsByClassName("autocomplete-items");
      for (var i = 0; i < x.length; i++) {
        if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }
  /*execute a function when someone clicks in the document:*/
  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
  });
  }

  // IF NICARAGUA = COUNTRY NAME 

  var subtitle_nicafull = "";
  var subtitle_nica = "";
  var subtitle_nicames = "";
  var text_tarifa_dia_nica = "Tarifa";
  var text_tarifa_noche_nica = "Tarifa";
  var asterisco_nica = "";
  var tarifa_dia_icon = "";
  
  function isNicaragua(){
      if(country_name === "Nicaragua" && $("#postpago_check").prop("checked")){
        subtitle_nicafull = "Todos operador Nicaragua.";
        subtitle_nica = "Solo aplica números TIGO.";
        subtitle_nicames = "Solo aplica números TIGO.";
        text_tarifa_dia_nica = "Tarifa de día<sup>1</sup>";
        text_tarifa_noche_nica  = "Tarifa de noches y fines de semana<sup>2</sup>";
        asterisco_nica = "*";
        tarifa_dia_icon = "/documents/297305827/297662798/sol.png/aeb8ca8d-7d80-451a-ac90-6519de64b3d1?t=1678285896122";
        
      }else if(country_name === "Nicaragua"){
        text_tarifa_dia_nica = "Tarifa de día<sup>1</sup>";
        text_tarifa_noche_nica  = "Tarifa de noches y fines de semana<sup>2</sup>";
        asterisco_nica = "*";  
        tarifa_dia_icon = "/documents/297305827/297662798/sol.png/aeb8ca8d-7d80-451a-ac90-6519de64b3d1?t=1678285896122";
      }else{
         subtitle_nicafull = "";
         subtitle_nica = "";
         subtitle_nicames = "";
         text_tarifa_dia_nica = "Tarifa";
         text_tarifa_noche_nica = "Tarifa";
         asterisco_nica = "";
         tarifa_dia_icon = "/documents/297305827/297662798/tlf.png/61f37ea0-667a-40f7-8976-dc6d529ca82d?t=1678285896578";
      }  
  }

  // Get Country Info Cards 
  // get Tarifas

  function getTarifas(data){
    var html = `<li class="header-card">Minutos</li>`;
    var tarifa_dia = "";
    var tarifa_noche = "";
    var tarifa_llamadota = "";
    if(data.tarifa_x_minutos != null){
      tarifa_dia = `
      <li class="tarifa--dia">
        <img src="${tarifa_dia_icon}" alt="Tarifa Dia" class="icon-card">
        <span class="text-detail">
            <p>${text_tarifa_dia_nica}</p>
            <p><strong>¢<span class="price">${data.tarifa_x_minutos}</span>/min</strong></p>
        </span>
      </li>` ;
    }
    if(data.tarifa_noches_fines != null){
      tarifa_noche = `
      <li class="tarifa--noche">
          <img src="/documents/297305827/297662798/luna.png/e89876df-4a6e-4436-a6f5-c6118ecaaded?t=1678285895675" alt="Tarifa Noche" class="icon-card">
          <span class="text-detail">
              <p>${text_tarifa_noche_nica}</p>
              <p><strong>¢<span class="price">${data.tarifa_noches_fines}</span>/min</strong></p>
          </span>
      </li>
      `
    } 
    if(data.tarifa_llamadota != null){
      tarifa_llamadota = `
      <li class="tarifa--llamadota">
          <img src="/documents/297305827/297662798/tlf.png/61f37ea0-667a-40f7-8976-dc6d529ca82d?t=1678285896578" alt="llamadota" class="icon-card">
          <span class="text-detail">
              <p>Tarifa Llamadota<sup>3</sup><br><span style="font-size:16px">Llamá hasta 8 minutos a números TIGO Nicaragua por:</span></p>
              <p><strong>¢<span class="price">${data.tarifa_llamadota}</span></strong></p>
          </span>
      </li>
      `
    }
    html = html + tarifa_dia + tarifa_noche + tarifa_llamadota;
    return html;
  }



  function llamadotaDL(){

  }




  // get paquetes 

  function getPaquetes(data){
    var html ="";
    var paquete_1 = "";
    var paquete_2 = "";
    var paquete_3 = "";
    if(data.paquete_01_nombre != null){
      paquete_1 = `
        <div class="card--paquetes">
          <ul>
              <li class="header-card">${data.paquete_01_nombre}<span class="subtitle_nica">${subtitle_nicafull}</span></li>
              <li class="paquete--minutes"><ion-icon name="call-outline" role="img" class="md hydrated" aria-label="call outline"></ion-icon><strong>${data.paquete_01_minutos} para llamar</strong></li>
              <li class="paquete--price">¢${data.paquete_01_precio} <br> <span class="vigencia--text-small">${data.paquete_01_vigencia}</span> </li>
              <li><a href="#" onclick="openContratar(event,'${data.paquete_01_precio}','${data.paquete_01_keyword}')" data-costo="" data-keyword="" class="btn-liberty contratar-btn"><span>Contratar</span></a></li>
          </ul>
      </div>
      `
    }

    if(data.paquete_02_nombre != null){
      paquete_2 = `
        <div class="card--paquetes">
          <ul>
              <li class="header-card">${data.paquete_02_nombre}<span class="subtitle_nica">${subtitle_nica}</span></li>
              <li class="paquete--minutes"><ion-icon name="call-outline" role="img" class="md hydrated" aria-label="call outline"></ion-icon><strong>${data.paquete_02_minutos} para llamar</strong></li>
              <li class="paquete--price">¢${data.paquete_02_precio} <span class="vigencia--text-small">${data.paquete_02_vigencia}</span> </li>
              <li><a href="#" onclick="openContratar(event,'${data.paquete_02_precio}','${data.paquete_02_keyword}')" class="btn-liberty contratar-btn"><span>Contratar</span></a></li>
          </ul>
      </div>

      <span class="swipe-mobile" style="display:none"> <img src="/documents/297305827/297662798/drag.png/83b91e13-bad7-42bc-a1d9-e80491f9aaac?t=1678285896427" alt="swipe"> </span>
      `
    }

    if(data.paquete_03_nombre != null){
      paquete_3 = `
        <div class="card--paquetes">
          <ul>
              <li class="header-card">${data.paquete_03_nombre}<span class="subtitle_nica">${subtitle_nicames}</span></li>
              <li class="paquete--minutes"><ion-icon name="call-outline" role="img" class="md hydrated" aria-label="call outline"></ion-icon><strong>${data.paquete_03_minutos} para llamar</strong></li>
              <li class="paquete--price">¢${data.paquete_03_precio} <span class="vigencia--text-small">${data.paquete_03_vigencia}</span></li>
              <li><a href="#" onclick="openContratar(event,'${data.paquete_03_precio}','${data.paquete_03_keyword}')" class="btn-liberty contratar-btn"><span>Contratar</span></a></li>
          </ul>
      </div>
      `
    }

    html = paquete_1 + paquete_2 + paquete_3;
    return html;
  }


  function isSms(data){
    var style = "";
    if(data == null){
      style="display:none";
    }
    return style;
  }

  function isTarifaCond(data){
    var html = "";
    if(data != null){
      html = data;
    }

    return html;
  }

  function isPaqCond(data){
    var html = "";
    if(data != null){
      html = "Consideraciones para Paquetes: <br> " + data;
    }

    return html;
  }

  function isPaquetes(data){
    var html= "";
    if (data.paquete_01_nombre !== null){
      html = ""
    }else{
      html = "no-paquetes"
    }
    return html;
  }
 
function consultarPaquetesDL(){

}
  

  function getCountryInfo(plan){
    openLoading();
    $(".country_section").remove();
    country_name = $("#search_country").val();
    var resultado_destino = "";
    fetch(`https://apis.libertycr.com/api/mvcr186/tarifa?plan_id=${plan}&country=${country_name}`)
  .then(response => response.json())
  .then(result => {
     if (result.result == true){
                // CHECK IF COUNTRY IS NICARAGUA 
                isNicaragua();

                $(".search_section")[0].insertAdjacentHTML('afterend',`
                <section class="country_section">
                <h3 class="country_name">${result.data.pais}</h3>
                <p>Las tarifas están en Colones, incluyen IVA, impuestos 911 y Cruz Roja.</p>
                <div class="tab-selector ${isPaquetes(result.data)}" onclick="tabSelector(event)">
                    <span class="selector first-option"></span>
                    <span class="custom-tabs selector--tarifa selected-tab">Tarifas</span>
                    <span class="custom-tabs selector--paquetes" onclick="consultarPaquetesDL()">Packs</span>
                </div>    
                    <div class="tarifas--box">
                        <div class="container-tables-parent">
                          <div class="container-tables">
                            <div class="card-tarifas minutes--card">
                                <ul>
                                  ${getTarifas(result.data)}
                                </ul>
                            </div>
                            <div class="card-tarifas messages--card" style="${isSms(result.data.tarifa_sms)}">
                                <ul>
                                    <li class="header-card">Mensajes</li>
                                    <li class="tarifa--sms">
                                        <img src="/documents/297305827/297662798/mensaje.png/04a0a9f7-68a7-42cf-8c14-adc57e9584ce?t=1678285896266" alt="Envio SMS" class="icon-card">
                                        <span class="text-detail">
                                            <p>Envío de SMS</p>
                                            <p><strong>¢<span class="price">${result.data.tarifa_sms}</span>c/u</strong></p>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                          </div>
                          <span class="swipe-mobile" style="display:none"> <img src="/documents/297305827/297662798/drag.png/83b91e13-bad7-42bc-a1d9-e80491f9aaac?t=1678285896427" alt="swipe"> </span>
                        </div>
                        <div class="text-center box-content max-md" style="padding-top:0px">
               
                            <small>
                                ${isTarifaCond(result.data.tarifa_cond)}
                            </small>
                        </div>
                    </div>
                    <div class="paquetes--box" style="display:none">
                        <div class="container-tables-parent">
                          <div class="container-tables">
                              ${getPaquetes(result.data)}
                          </div>
                        </div>
                        <span class="swipe-mobile" style="display:none"> <img src="/documents/297305827/297662798/drag.png/83b91e13-bad7-42bc-a1d9-e80491f9aaac?t=1678285896427" alt="swipe"> </span>
                        <div class="text-center box-content max-md" style="padding-top:0px">
                            <small>
                                
                                ${isPaqCond(result.data.paquete_01_cond)}
                            </small>
                        </div>
                    </div>
            </section>
            `);
            setTimeout(() => {
              closePop();
              $("html, body").animate({
                scrollTop:$("section.country_section").offset().top-(150)
                },900,"swing")

                /* DL RESULTADO PAIS */
              
            }, 1000);

            resultado_destino = "Destino disponible";
     }else{
        closePop();
        setTimeout(() => {
          openPop(event,".pop__error_country_not_found");
        }, 500);
        
        resultado_destino = "Destino no disponible";
        
     }
    cliente = $(".input_check input:checked").val();

  })
  .catch(err => console.log(err))
   
    
  }

  function tabSelector(event){

    var target = event.target;

    if($(target).hasClass("selected-tab") != true){

      if($(target).hasClass("selector--tarifa")){
        $(".selector--tarifa").addClass("selected-tab");
        $(".selector").removeClass("second-option");
        $(".selector").addClass("first-option");
        $(".selector--paquetes").removeClass("selected-tab");
        $(".paquetes--box").fadeOut();
        setTimeout(() => {
          $(".tarifas--box").fadeIn();
        }, 500);
        
        
      }else{
        $(".selector--paquetes").addClass("selected-tab");
        $(".selector--tarifa").removeClass("selected-tab");
        $(".selector").addClass("second-option");
        $(".selector").removeClass("first-option");
        $(".tarifas--box").fadeOut();
        setTimeout(() => {
          $(".paquetes--box").fadeIn();
        }, 500);
      }
      
    }
  }

  function activateScroll(){


        $(".container-tables").each(function(index, element) {
            var numberPlans = element.children.length;
            var widthContainer = "";

       
            

            if(numberPlans > 1){
              if(window.matchMedia("(min-width: 480px)").matches){
                widthContainer = (350 * numberPlans) + 50 + "px";
              }else{
                widthContainer  = (300 * numberPlans) + 20 + "px";
              }
  
              $(element).css("min-width", widthContainer);
              $(element).parent(".container-tables-parent").css("overflow-x","auto");

              if(window.matchMedia("(max-width:600px)").matches){
                $("span.swipe-mobile").show();
              }else{
                $("span.swipe-mobile").hide();
              }
              


            }else{
              $(element).css("min-width", "");
              $(element).parent(".container-tables-parent").css("overflow-x",""); 
              $("span.swipe-mobile").hide();
            }
        });
 
        

}

  function initialDeploy(){
    getCountryPostpago();
    getCountryPrepago();
  
  }

  function openLoading(){
    $("section#pop-form").fadeIn();
      $(".modal-background-plan--form").fadeIn();
      $(".loading--modal").fadeIn();
      

  }
  function openPop(event, pop_name){
    if(event != null){
      event.preventDefault();
    }
    
    $("section#pop-form").fadeIn();
    $(".modal-background-plan--form").fadeIn();
    $(".form-container").fadeIn();
    $(pop_name).fadeIn();
  }

  function closePop(){
    $("section#pop-form").fadeOut();
    $(".modal-background-plan--form").fadeOut();
    $(".form-container").fadeOut();
    $(".pop__condiciones, .pop__contratar, .pop__success, .pop__llamadota, .pop__error, .pop__error_country_not_found, .loading--modal").fadeOut();
  }
  var costo_dl ="";
  var keyword_dl ="";
  function openContratar(event, costo, keyword){
    event.preventDefault();
    costo_dl = costo;
    keyword_dl = keyword;
    if(keyword.includes("NICAMINIWEB")){
      $(".contratar__name").text("NICAMINI");
    }else{
      $(".contratar__name").text(keyword);
    }
    
    openPop(event,".pop__contratar");

  }

  function contratarPaquete(){
    closePop();
    openLoading();
    var phone = $("#num_phone").val();
    var keyword = $(".contratar__name").text();
    var price = $("span.contratar__price").text();
    indigitall.setExternalCode(phone, function(device) {
      console.log("INDIGITALL: Phone updated");  
     },(error) => { 
         console.log("INDIGITALL: Phone not updated"); 
  });
    fetch(`https://apis.libertycr.com/api/mvcr186/sms_confirmation?num_phone=${phone}&package=${keyword}`, {
      method: 'POST'
    })
    .then(response => response.json())
    .then(result => {
      if(result.result = true){
            $.get("//apis.libertycr.com/api/crypt/tel/" + phone).done(function (e) {
              window.dataLayer.push({
                  'event': 'activation',
                  'phoneId': e, //Dynamic Value
                  'ecommerce': {
                    'currencyCode': 'CRC',
                    'purchase': {
                      'actionField': {
                        'id': keyword_dl, //Dynamic Value
                        'affiliation': 'Costa Rica + Liberty CR', 
                        'revenue': costo_dl, //Dynamic Value Ex. 10.90
                        'tax':'', //Empty
                        'shipping': '', //Empty
                        'coupon': '' //Empty
                      },
                      'products': [{                            // List of productFieldObjects
                        'name': keyword_dl, //Dynamic Value
                        'id': keyword_dl, // Dynamic Value
                        'price': costo_dl, //Dynamic Value
                        'brand': 'Liberty CR', 
                        'category': 'Residential/Mobile/0P-PrePaid-Activation', 
                        'variant': '', //Empty
                        'quantity': '1'
                      }]
                    }
                  }
                });
          });
              
        
        setTimeout(() => {
          closePop();
          openPop(event,".pop__success");
        }, 1000);
        
      }else{
        
        setTimeout(() => {
          closePop();
          openPop(event,".pop__error");
        }, 1000);
        
      }

    })
    .catch(err => console.log(err))
     
      
    
  
  }

  function activatePromo(hash) {

    openLoading();

    $.ajax({
        method: 'POST',
        url: "https://apis.libertycr.com/api/mvcr186/activation",
        data: {
            "hash": hash
        }

    }).done(function (response) {
        data = response;
        closePop();

        if (response.result ==  false) {
          openPop(event,".pop__error");
        } else {
            openPop(event,".pop__success");

            
        }

    });

}


document.addEventListener("DOMContentLoaded", function(event) {
  /* CARGA INICIAL */

    initialDeploy();

    window.addEventListener("resize" , function(){
      activateScroll();
    });

  


    

    /* VALIDATE SEARCH */
    $.getScript("//resources.libertycr.com/js/jquery.validate.min.js", function() {
         /* $("search_form").validate({
            rules: {
              check_buscador : {
                required: true
              }
            },
            messages: {
              check_buscador:{
                required: "Seleccioná Postpago o Prepago"
              }
            }
          });*/
      
          $("#prepago_check, #postpago_check").change(function(){
            /* CARGAD DE PAISES */
            if($("#prepago_check").prop("checked")){
              autocomplete($("#search_country")[0], countries_prepago);
              plan_id=1;
            }

            if($("#postpago_check").prop("checked")){
              autocomplete($("#search_country")[0], countries_postpago);
              plan_id=2;
            }

            if($("#prepago_check").prop("checked") ||  $("#postpago_check").prop("checked")){
              $("input#search_country").removeClass("disabled-input");
            }else{
              $("input#search_country").addClass("disabled-input");
            }
        });
      
        $("input#search_country").keyup(function(){
          if($("input#search_country").val().length != 0 ){
            $("#search_btn").removeClass("disabled-btn");
          }else{
            $("#search_btn").addClass("disabled-btn");
          }
        }) 
    });

    /* TAB SELECTOR */

    $(".selector--tarifa, .selector--paquetes").click(function(e){
       tabSelector();
    })

    
    /* SEARCH COUNTRY */

    $("#search_btn").click( function(e){
       getCountryInfo(plan_id);
      setTimeout(() => {
         activateScroll();
      }, 500);
      
    });

    /* CLOSE MODAL */

    $("a.cierrePop, .close-modal, .close-modal-btn").click(function(e){
      e.preventDefault();
      closePop();
    })

    /* FORM VALIDATE */

    document.getElementById("num_phone").addEventListener("keyup", validatePhoneRequest, false);
    document.getElementById("num_phone").addEventListener("keyup", isButtonAble);

    /* CONTRATAR */

    $("#send-form").click(function(e){
      e.preventDefault();
      contratarPaquete();
    })


    /* ACTIVACION HASH */

    var hash = window.location.href.split("clic=")[1];
    if (hash != undefined) {
        activatePromo(hash);
    }


    /* SCROLL HERO */
  
    $("a.btn-hero").click(function(e){
      e.preventDefault();
      $("html, body").animate({
        scrollTop:$(".search_section").offset().top-(150)
        },900,"swing")
    })
 
    

  });