$(document).ready(function() {
  if (typeof btns_after_row_loginmenu !== 'undefined') {
  	let inject_html = '<div id="row-injected-after-loginmenu" class="d-flex flex-column gap-3">';
    for (let i = 0; i < btns_after_row_loginmenu.length; i++) {
      const btn = btns_after_row_loginmenu[i];
      inject_html += '<a href="'+btn[2]+'" class="btn btn-lg flex-fill '+btn[3]+'" onclick="'+btn[4]+'" id="'+btn[0]+'">'+btn[1]+'</a>';
    }
  	inject_html += '</div>';
  	$('#row-loginmenu').after(inject_html);
  }

});
  // Menambahkan Google Font Poppins
let linkFont = document.createElement('link');
linkFont.rel = 'stylesheet';
linkFont.href = 'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap';
document.head.appendChild(linkFont);

// Menambahkan CSS
let style = document.createElement('style');
style.innerHTML = `
  body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #121212;
    color: #fff;
  }

  .modal-popup-wrapper-csm {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99999 !important;
    top: 0;
    left: 0;
    background: rgba(16, 53, 3, 0.27);
    visibility: hidden;
    opacity: 0;
    transition: all 0.25s ease-in-out;
  }
  .modal-popup-wrapper-csm.open {
    opacity: 1;
    visibility: visible;
  }
  .modal-popup-csm {
    width: 80%;
    background-color: #333;
    border-radius: 10px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    opacity: 0;
    transition: all 0.5s ease-in-out;
  }
  .modal-popup-wrapper-csm.open .modal-popup-csm {
    opacity: 1;
  }
  .content-popup-csm {
    background: #222;
    border: 2px solid #fff;
    padding: 20px;
    border-radius: 10px;
  }
  .btn-footer-close-popup-csm {
    padding: 10px 5px;
    background: #fff;
    color: #000;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
  }
  .progress {
    width: 90%;
    margin: 20px auto;
    height: 25px;
    border-radius: 10px;
    background-color: #eee;
    border: 1px solid #ddd;
    position: relative;
    overflow: hidden;
    display: none;
  }
  .bar {
    width: 0%;
    height: 100%;
    background-color: rgb(43, 194, 83);
  }
`;
document.head.appendChild(style);

// Menambahkan HTML untuk Modal
let modalHTML = `
  <div class="modal-popup-wrapper-csm">
    <div class="modal-popup-csm">
      <div class="content-popup-csm">
        <div class="title_choose_server">Pilih Server:</div>
        <select id="opt_choose_server">
          <option value="Vietnam">Vietnam (210.215.26.11)</option>
          <option value="Kamboja">Kamboja (62.197.146.20)</option>
          <option value="Indonesia">Indonesia (103.105.186.34)</option>
          <option value="Singapore">Singapore (219.87.12.87)</option>
          <option value="Laos">Laos (194.169.168.23)</option>
          <option value="Filipina">Filipina (111.15.96.41)</option>
          <option value="Thailand">Thailand (101.115.86.131)</option>
          <option value="Hongkong">Hongkong (156.146.45.112)</option>
          <option value="Korea">Korea (171.205.16.27)</option>
          <option value="Malaysia">Malaysia (219.93.181.103)</option>
          <option value="Jepang">Jepang (103.106.127.55)</option>
          <option value="China">China (1.51.255.4)</option>
          <option value="Macau">Macau (62.197.154.25)</option>
          <option value="Australia">Australia (101.97.52.42)</option>
          <option value="Myanmar">Myanmar (103.101.19.239)</option>
        </select>
        <div class="btn-footer-close-popup-csm" onclick="connect_server()">CONNECT</div>
        <div class="btn-footer-close-popup-csm btn_close_csm" href="javascript:;">TUTUP</div>
        <div id="progess_connect" class="progress">
          <div class="bar"></div>
        </div>
      </div>
    </div>
  </div>
`;

document.body.insertAdjacentHTML('beforeend', modalHTML);

// Menambahkan JavaScript untuk membuka dan menutup modal serta connect server
document.addEventListener("DOMContentLoaded", function(event) {
  const savedServer = localStorage.getItem("server_now");
  if (savedServer !== null) {
    document.querySelector("#opt_choose_server").value = savedServer;
  }
});

function open_modal_csm() {
  document.querySelector('.modal-popup-wrapper-csm').classList.add('open');
}

function close_modal_csm() {
  document.querySelector('.modal-popup-wrapper-csm').classList.remove('open');
}

document.querySelectorAll('.btn_close_csm').forEach(button => {
  button.addEventListener('click', close_modal_csm);
});

function connect_server() {
  const server = document.querySelector("#opt_choose_server").value;
  localStorage.setItem("server_now", server);
  document.querySelector(".progress .bar").style.width = '0%';
  document.querySelector(".progress").style.display = 'block';

  setTimeout(() => {
    let progress = 0;
    const interval = setInterval(() => {
      if (progress < 100) {
        progress += 10;
        document.querySelector(".progress .bar").style.width = progress + '%';
      } else {
        clearInterval(interval);
        setTimeout(() => {
          alert('Berhasil terhubung ke Server ' + server);
          document.querySelector(".progress").style.display = 'none';
        }, 500);
      }
    }, 200);
  }, 1000);
}