// 						ACCOUNT NAVBAR
// ========================================================
// ========================================================

      window.onload = function() {
        if(window.location.hash) {
          let tabID = window.location.hash.replace(/#/g, '');
          let triggerEl = document.getElementById('v-'+ tabID + '-tab');
          let tabTrigger = new bootstrap.Tab(triggerEl);
          let openTab = bootstrap.Tab.getInstance(triggerEl).show();
    
          location.hash = "";
          history.replaceState("", "", location.pathname);
        }
      }
   
      const accountBtns = document.querySelectorAll(".btn-account");
      accountBtns.forEach((accountBtn) => {
        accountBtn.onclick = function(e) {      
          let triggerEl = document.getElementById('v-'+ e.target.id + '-tab');
          let tabTrigger = new bootstrap.Tab(triggerEl);
          let openTab = bootstrap.Tab.getInstance(triggerEl).show();

          let myOffCanvas = document.getElementById('offcanvasRight');
          let openedCanvas = bootstrap.Offcanvas.getInstance(myOffCanvas);
          openedCanvas.hide();

          window.scrollTo({
            top: 0,
            behavior: 'smooth'
          });

          location.hash = "";
          history.replaceState("", "", location.pathname);
        }
      })
    
// 						      SWIPER
// ========================================================
// ========================================================


window.addEventListener("load", onLoadSwiper);

	function onLoadSwiper(e){
		enableSwiper();
		window.addEventListener("resize", enableSwiper);
	}

const enableSwiper = function() {
  const addSwiper =  document.querySelector('.slider-cards');

  if (window.innerWidth < 991.98) {	
   
   addSwiper.classList.add("swiper");
   addSwiper.firstElementChild.classList.add("swiper-wrapper");
  
   console.log(addSwiper);
   //swiper
  var sliderCards = new Swiper ('.slider-cards', {
    slidesPerView: 1,	  
    spaceBetween: 30,
    centeredSlides: true,
    breakpoints: {
        767: {
            slidesPerView: 1,
        }
    },
    keyboardControl: true,
    grabCursor: true,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
  });
  } else {
    addSwiper.classList.remove("swiper");
   addSwiper.firstElementChild.classList.remove("swiper-wrapper");
  }
};


// 			          	BUTTONS EDIT
// ========================================================
// ========================================================

const changeDetails = document.getElementById('v-user-details');
const changeBtns = changeDetails.querySelectorAll('.btn-change-content');
changeBtns.forEach((changeBtn) => {
  changeBtn.onclick = function(e){
    const getIdEl = changeBtn.getAttribute('for');
    const changeContent = document.getElementById(getIdEl);

    if (changeBtn.firstElementChild.textContent === "Change") {
      changeContent.removeAttribute("disabled");   
      document.body.classList.add('blackBackground'); 
      changeBtn.classList.add('activeContent');
      changeContent.classList.add('activeContent'); 
      changeBtn.firstElementChild.textContent ='Save new';  
    } else {

      if(changeContent.id === 'changeEmail') {
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        var invalid = "Invalid Email Address";
        var correct = "Correct Email Address"
      } else if (changeContent.id === 'changePassword') {
        var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/
        var invalid = "Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters";
        var correct = "Correct Password"
      } else {
        var reg =/^(.{1,})$/;
        var invalid = "Invalid";
        var correct = "Correct"
      } 
      
      if(reg.test(changeContent.value) == false) {
          alert(invalid);
      } else {
        alert(correct);
        changeBtn.firstElementChild.textContent = 'Change';
        document.body.classList.remove('blackBackground'); 
        changeBtn.classList.remove('activeContent');
        changeContent.classList.remove('activeContent');  
        changeContent.setAttribute("disabled", "");
      } 
    }
    
    
  }
})



document.querySelectorAll('.changeInformation').forEach((changeInfo) => {

  const changeInfoBtns = changeInfo.querySelectorAll('.btn-change-info');
  const changeElements = changeInfo.querySelectorAll('.contentText');

  
  changeInfoBtns.forEach((changeInfoBtn) => {
    changeInfoBtn.onclick = function(e){
    if (changeInfoBtn.firstElementChild.textContent === "Edit" || changeInfoBtn.firstElementChild.textContent === "") {
      changeInfoBtn.firstElementChild.textContent ='Save new';  

      changeInfoBtn.classList.add('activeContent');      
      changeElements.forEach((changeEl) => {
        changeEl.removeAttribute("disabled");       
        changeEl.classList.add('activeContent');     
        if(changeEl.hasAttribute("contentEditable")) {
          changeEl.contentEditable = "true";  
        }
        
      });
      document.body.classList.add('blackBackground');
    } else {
      
      changeElements.forEach((changeEl) => {

        var inputName = changeEl.getAttribute('name');
        var inputValue = changeEl.getAttribute('value');
        var inputChangeContnt = changeEl.value;
        
        if(inputName === 'Phone number') {
          var reg = /^(\()?\d{3}(\))?(-|\s)?\d{3}(-|\s)\d{4}$/;
          var invalid = "Invalid phone number. Correct format is 123-456-7890";
        } else if (inputName === 'birth') {
          var reg = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
          var invalid = "Invalid date. Correct format is DD/MM/YYYY";
        } else if (inputName === 'Card Number') {
          var reg = /\b(?:\d{4}[ -]?){3}(?=\d{4}\b)/gm;
          var invalid = "Invalid card number. Correct format is 0000 0000 0000 0000";
        } else if (inputName === 'EXP Date') {
          var reg = /^(0?[1-9]|1[012])[\/\-]\d{2}$/;
          var invalid = "Invalid date. Correct format is MM/YY";
        } else {
          var reg =/^(.{1,})$/;
          var invalid = "Invalid";
        } 


        if(reg.test(changeEl.value) == false) {
          alert(invalid);
        } 
        else {
          console.log(inputChangeContnt);
          changeInfoBtn.firstElementChild.textContent = 'Edit';
          document.body.classList.remove('blackBackground'); 
          changeInfoBtn.classList.remove('activeContent');
          changeEl.classList.remove('activeContent');  
          changeEl.setAttribute("disabled", "");

          if (inputName === 'Card Number') {
            const subst = `**** **** **** `;
            const valueCard = inputChangeContnt.replace(reg, subst);
            changeEl.value = inputChangeContnt.replace(reg, subst);
            changeEl.setAttribute('value', valueCard);
            changeEl.style.letterSpacing = '5px';            
          } else {
            changeEl.setAttribute('value', inputChangeContnt);
          }
        } 

      })     
    }    
  }
})




//input - width - fit content

changeElements.forEach((changeEl) => {
  let first;
  let hide = changeEl.previousElementSibling;  
  while (hide) {
    if (hide.classList.contains('hide')) {
      first = hide;      
      resize();
      changeEl.addEventListener("input", resize);
      function resize() {
        first.textContent = changeEl.value;
        changeEl.style.width = first.offsetWidth + "px";
      }
      break;      
    }   
    hide = hide.previousElementSibling;
  }
  
})
})

//add new card
const addNewCard = document.querySelectorAll('.button-add-card');

addNewCard.forEach((newCard) => {
  newCard.onclick = function(e) {

    const el = document.createElement('div');
      el.classList.add('swiper-slide', 'changeInformation');
      const cardWraper = 
      '<div class="d-flex flex-wrap flex-lg-nowrap mb-4 pb-lg-2 justify-content-center justify-content-lg-start">'
        +'<div class="payment-item credit-card credit-card-mastercard position-relative overflow-hidden rounded-3 p-4 me-lg-4 d-inline-block">'
          + '<div class="text-end mb-5 position-relative z-index_3">'
            + '<img src="assets/images/Pay-Logos/Mastercard-logo.svg" alt="" height="20">'	
					+ "</div>"									
					+ '<div class="mb-5">'
            + '<p class="text-xxs text-600 lh-1 text-uppercase mb-2">CARD NUMBER</p>'									
						+	'<input type="text" name="Card Number" class="contentText p-0 border-0 bg-transparent text-white credit-card-number text-md text-md-up text-700 lh-1 w-auto" value="0000 0000 0000 9821" pattern="[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}" placeholder="0000 0000 0000 0000" disabled>'								
					+ '</div>'											
					+ '<div class="d-flex justify-content-between">'
            + '<div class="">'			
              +	'<p class="text-xxs text-600 lh-1 text-uppercase mb-2">CARDHOLDER NAME</p>'							
							+ '<input type="text" name="Cardholder Name" class="contentText p-0 border-0 bg-transparent text-white credit-card-name text-md text-md-up text-700 lh-1 text-uppercase" value="John Smith" pattern="[a-zA-Z]+ [a-zA-Z]+" placeholder="Name Surname" disabled>'									
						+'</div>'													
						+'<div class="">'		
              + '<p class="text-xxs text-600 lh-1 text-uppercase mb-2">EXP DATE</p>'								
              + '<input type="text" name="EXP Date" class="contentText p-0 border-0 bg-transparent text-white credit-card-exp-date text-md text-md-up text-700 lh-1 text-uppercase w-75" value="08/23" pattern="[0-9]{2}/[0-9]{2}" placeholder="MM/YY" disabled>'
						+'</div>'										
					+ '</div>'
        +'</div>' 
      + '</div>';
      el.innerHTML  = cardWraper;
      const box = document.querySelector('.slider-cards .flex-nowrap');
      box.appendChild(el);
    
  }
})
{/* <div class="swiper-slide changeInformation">
  <div class="d-flex flex-wrap flex-lg-nowrap mb-4 pb-lg-2 justify-content-center justify-content-lg-start">
    <div class="payment-item credit-card credit-card-visa position-relative overflow-hidden rounded-3 p-4 me-lg-4 d-inline-block">
      <div class="text-end mb-5 position-relative z-index_3">	
        <img src="assets/images/Pay-Logos/Visa_Inc._logo.svg" alt="" height="20">
      </div>
      <div class="mb-5">
        <p class="text-xxs text-600 lh-1 text-uppercase mb-2">CARD NUMBER</p>
        <input type="text" name="Card Number" class="contentText p-0 border-0 bg-transparent text-white credit-card-number text-md text-md-up text-700 lh-1 w-auto" value="0000 0000 0000 9821" pattern="[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}" placeholder="0000 0000 0000 0000" disabled>
        
      </div>					
      <div class="d-flex justify-content-between">	
        <div class="">
          <p class="text-xxs text-600 lh-1 text-uppercase mb-2">CARDHOLDER NAME</p>
          <input type="text" name="Cardholder Name" class="contentText p-0 border-0 bg-transparent text-white credit-card-name text-md text-md-up text-700 lh-1 text-uppercase" value="John Smith" pattern="[a-zA-Z]+ [a-zA-Z]+" placeholder="Name Surname" disabled>
          
        </div>
        <div class="">
          <p class="text-xxs text-600 lh-1 text-uppercase mb-2">EXP DATE</p>
          <input type="text" name="EXP Date" class="contentText p-0 border-0 bg-transparent text-white credit-card-exp-date text-md text-md-up text-700 lh-1 text-uppercase w-75" value="08/23" pattern="[0-9]{2}/[0-9]{2}" placeholder="MM/YY" disabled>
          
        </div>
      </div>
    </div>													
    <div class="mt-4 mt-lg-0 btn-group d-flex d-lg-block">
      <button class="text-lg-start text-decoration-underline text-white text-600 text-xs lh-1 d-block mb-lg-4 btn-change-info btn-lg-link px-2 px-lg-0 me-2 me-lg-0">
        <span class="changeText">Edit</span> &nbsp;card <span class="d-none d-lg-inline">informations</span>
      </button>
      <button class="text-lg-start text-decoration-underline text-white text-600 text-xs lh-1 d-block removeButton btn-lg-link px-2 px-lg-0 ms-2 ms-lg-0">Remove <span class="d-none d-lg-inline">this</span> card</button>															
    </div>		
  </div>										
</div> */}