// source --> https://www.digitalcommunicationsinstitute.com/wp-content/themes/dci/assets/js/main.js?ver=1 
$(document).ready(function() {

  /**
   * height match for: 
   * - DCI alt
   * - program card holder ( posts grid )
   */

  // Create array of DOM elements
  var dom_elements = ['.why-dci-alt .uk-card', '.program-card-holder', '.icon-card-holder'];

  dom_elements.forEach(function(elem) {
    var element = document.querySelector(elem);

    if(element != null && element.length > 0) {
        $(elem).matchHeight({
            byRow   : false,
            property: 'height',
            target  : null,
            remove  : false
        });
    }
  });

  /**
   * wrap the full width submenu of the megamenu
   * with custom div for styling purposes
  */
  var menuSelector = $('div#mega-menu-wrap-primary ul#mega-menu-primary > li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item.mega-menu-item-has-children > .mega-sub-menu')
  menuSelector.wrap("<div class='col-holder'></div>")

  /**
   * add uk-dropcap for single blog post first <p> tag
   */
  $('.single-post .post-content > p:first-child').addClass('uk-dropcap')

  /**
   * submenu items logic for offcanvas
   */

  // go to next menu lvl
  $('.offcanvas-items > .menu-item-has-children > a').on('click', function(e) {
    var self = $(e.target)

    if (!self.hasClass('active-submenu')) {
      e.preventDefault()
      
      // show submenu & prepare all the other elements
      self.addClass('active-submenu')

      self.next('.sub-menu').fadeIn(300)
      self.parents('li').siblings('li').addClass('uk-hidden')

      $('.lang-wrap').addClass('uk-hidden')
      $('.login-logout-wrap').addClass('uk-hidden')
  
      $('.uk-offcanvas-bar .menu-title .init-title').addClass('uk-hidden')
      $('.uk-offcanvas-bar .menu-title .alt-title').text(self.text()).removeClass('uk-hidden')

      $('.menu-title-back-arrow-wrap > span').removeClass('uk-hidden')
    }
  })

  // return to top menu lvl
  $('.back-to-main-menu').on('click', function() {
    var menuLinkItems = $('.offcanvas-items li'),
    menuLinks = $('.offcanvas-items li > a')

    // handle elements
    $('.active-submenu').next('.sub-menu').fadeOut(0)
    
    // class toggle
    menuLinkItems.removeClass('uk-hidden')
    menuLinks.removeClass('active-submenu')
    $('.menu-title-back-arrow-wrap > span').addClass('uk-hidden')
    $('.menu-title .init-title').removeClass('uk-hidden')
    $('.menu-title .alt-title').addClass('uk-hidden')
    $('.lang-wrap').removeClass('uk-hidden')
    $('.login-logout-wrap').removeClass('uk-hidden')

  })
  
})

// Set all variables as UIkit.util
var { once, remove, transition } = UIkit.util

// onload
window.onload = () => {

  // google Map
  window.init_map = init_map

  // toggle active class for hamburger menu
  UIkit.util.on('#offcanvas-push', 'show', function () {
    $('.offcanvas-trigger').addClass('active-bar')
  })
  UIkit.util.on('#offcanvas-push', 'hide', function () {
    $('.offcanvas-trigger').removeClass('active-bar')
  })

  // checkout ajax animation for cart
  $( document.body ).on('update_checkout', function() {
    $('.cart-menu-content').block({
      message: null,
      overlayCSS: {
        background: "#fff",
        opacity   : .6
      }
    })
  }).on('updated_checkout', function() {
    $('.cart-menu-content').unblock()
  })

  // scroll to top setup
  var btnReveal = function () {    
    var btnTop = document.querySelector('.scroll-to-top')
    
    if (window.scrollY >= 300) {
      btnTop.classList.add('is-visible')
    } else {
      btnTop.classList.remove('is-visible')
    }    
  }
  
  window.addEventListener('scroll', btnReveal)

  // Ajax delete product in the cart
  $(document).on('click', '.remove-product', function (e) {
      e.preventDefault()

      // init data
      var product_id  = $(this).attr("data-product_id"),
          cartWrap    = $('.cart-menu-content'),
          product_key = $(this).attr("data-product_key")

      // add loader
    //   cartWrap.block({
    //     message: null,
    //     overlayCSS: {
    //       background: "#fff",
    //       opacity   : .6
    //     }
    //   })

      // send req for removal
      $.ajax({
          type: 'POST',
          dataType: 'json',
          url: dci_ajax.ajaxurl,
          data: {
              action       : "product_remove",
              product_id   : product_id,
              cart_item_key: product_key,  
          },
          
          // product removed
          success: function(response) {
            // return if not any
            if (!response || response.error) {
              return
            }
            
            // return to home if we don't have any items in the cart
            if (response.redir_url) {
              window.location.replace(response.redir_url)
              return
            }

            // update fragments
            var fragments = response.fragments

            if (fragments) {
              $.each(fragments, function(key, value) {
                $(key).replaceWith(value)
              })
            }
            
            // // hide loader
            // cartWrap.unblock()            
          }
      })

  })

  // user details accordion
  var userDetailsAcc = function() {
    // toggle the next accordion on btn clk
    $('.next-user-details-list').on('click', function(e) {
      e.preventDefault()
      currentLi = $(this).parents('.user-details-list-item'),
      nextLi    = currentLi.next()

      currentLi.find('.user-details-content-data-wrap').slideUp(300, 'linear', function() {
        currentLi.addClass('enable-toggle show-checked').removeClass('opened')
        nextLi.addClass('enable-toggle')
      })

      nextLi.find('.user-details-content-data-wrap').slideDown(300, 'linear', function() {
        nextLi.addClass('opened')
      })
    })

    // allow accordion toggling for prev items
    $('.user-details-subtitle-wrap').on('click', function(e) {
      e.preventDefault()

      var liParent = $(this).parents('.user-details-list-item')
      if (liParent.hasClass('enable-toggle')) {
        liParent.find('.user-details-content-data-wrap').slideToggle(300, 'linear', function () {
          liParent.toggleClass('opened')
        })
      }
    })
  }

  userDetailsAcc()

  // toggle 'has-data' class on checkout fields for styling labels
  var toggleHasData = function() {
    $('form.checkout').find('textarea, input').on('change focus input', function(e) {
      var current   = $(e.target),
          eventType = e.handleObj.type
  
      switch (eventType) {
        case 'input':
        case 'focus':
        case 'input':
          if (current.val()) {
            current.parents('p.form-row').addClass('has-data')  
          }
      
          else {
            current.parents('p.form-row').removeClass('has-data') 
          }        
        break;      
      }
    })
  }

  toggleHasData()

  // better UX for error handling on checkout submit
  $('#place_final_order').on('click', function(e) {
    // init data
    var detailsList       = $(this).parents('.user-details-list'),
        stripeEl          = detailsList.find('.StripeElement'),
        billingErr        = detailsList.find('.woocommerce-invalid-required-field'),
        billingData       = {},
        billingFormFields = $('.woocommerce-billing-fields')

        billingData.noValue = false

    // check if billing fields have no value
    $.each(billingFormFields.find('input, textarea'), function (index, value) { 
      var self = $(value)

      if (!self.val()) {
        billingData.noValue = true
      }
    })

    // stripe handling
    if (stripeEl.hasClass('invalid') || stripeEl.hasClass('empty')) {
      setTimeout(() => {
        stripeEl.parents('.user-details-list-item:not(.opened) .user-details-content-data-wrap')
        .slideDown(300, 'linear', function() {
          stripeEl.parents('.user-details-list-item').toggleClass('opened')
        })
      }, 100)
    }

    // billing form handling
    if (billingErr.length || billingData.noValue) {
      setTimeout(() => {
        billingFormFields.parents('.user-details-list-item:not(.opened) .user-details-content-data-wrap')
        .slideDown(300, 'linear', function() {
          billingFormFields.parents('.user-details-list-item').toggleClass('opened')
        })
      }, 100)
    }
  })

}

// initialize and add the google map
function init_map() {
  // Get map element
  var map_element = document.getElementById('g_map');

  if( map_element != null ) {
      // The location of central office
      var central_office = { lat: 44.82358309969818, lng: 20.462073481683262 };

      // Map style
      var map_style = [
          {
              "featureType": "water",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "#d3d3d3"
                  }
              ]
          },
          {
              "featureType": "transit",
              "stylers": [
                  {
                      "color": "#808080"
                  },
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "road.highway",
              "elementType": "geometry.stroke",
              "stylers": [
                  {
                      "visibility": "on"
                  },
                  {
                      "color": "#b3b3b3"
                  }
              ]
          },
          {
              "featureType": "road.highway",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "#ffffff"
                  }
              ]
          },
          {
              "featureType": "road.local",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "visibility": "on"
                  },
                  {
                      "color": "#ffffff"
                  },
                  {
                      "weight": 1.8
                  }
              ]
          },
          {
              "featureType": "road.local",
              "elementType": "geometry.stroke",
              "stylers": [
                  {
                      "color": "#d7d7d7"
                  }
              ]
          },
          {
              "featureType": "poi",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "visibility": "on"
                  },
                  {
                      "color": "#ebebeb"
                  }
              ]
          },
          {
              "featureType": "administrative",
              "elementType": "geometry",
              "stylers": [
                  {
                      "color": "#a7a7a7"
                  }
              ]
          },
          {
              "featureType": "road.arterial",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "#ffffff"
                  }
              ]
          },
          {
              "featureType": "road.arterial",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "#ffffff"
                  }
              ]
          },
          {
              "featureType": "landscape",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "visibility": "on"
                  },
                  {
                      "color": "#efefef"
                  }
              ]
          },
          {
              "featureType": "road",
              "elementType": "labels.text.fill",
              "stylers": [
                  {
                      "color": "#696969"
                  }
              ]
          },
          {
              "featureType": "administrative",
              "elementType": "labels.text.fill",
              "stylers": [
                  {
                      "visibility": "on"
                  },
                  {
                      "color": "#737373"
                  }
              ]
          },
          {
              "featureType": "poi",
              "elementType": "labels.icon",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "poi",
              "elementType": "labels",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "road.arterial",
              "elementType": "geometry.stroke",
              "stylers": [
                  {
                      "color": "#d6d6d6"
                  }
              ]
          },
          {
              "featureType": "road",
              "elementType": "labels.icon",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {},
          {
              "featureType": "poi",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "#dadada"
                  }
              ]
          }
      ]

      // The map, centered at central office
      var map = new google.maps.Map(document.getElementById("g_map"), {
          zoom: 13,
          center: central_office,
          disableDefaultUI: true,        
          styles : map_style
      });

      // The marker, positioned at central office
      const marker = new google.maps.Marker({
          position: central_office,
          map: map,
          // icon: icon_url,
      });
  }
};