$(document).ready(function() {
    $('.main-game-wrapper span[name="chance_balance"]').closest('.text-bold').hide();
    
        const registerPopup = `
        <div class="modal fade modal-theme show" id="register-popup" popup_status="default" role="dialog" style="display: none;" aria-modal="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center" style="padding-top:4rem">
                        <div class="modal-close z-2" data-dismiss="modal" aria-label="Close">
                            <i class="fas fa-times"></i>
                        </div>
                        
                        <div class="d-flex flex-column align-items-center gap-3 mb-4">
                        <img src="/file/images/GRID_SG60_Popup-02.webp" class="img-circle elevation-2" alt="Promo Image" style="width: 100%; height: 100%;">
                        </div>
                        
                        <button id="close" class="btn btn-primary cta" onclick="return hide_popup()">Close</button>
                    </div>
                    <div class="modal-footer flex-column"></div>
                </div>
            </div>
        </div>
    `;
    
    $('body').append(registerPopup);
    
    if (window.location.pathname === '/register') {
        $('#register-popup').modal('show');
    }
    
    // add break line for campaign header
    const targetElements = document.querySelectorAll('.mb-3.text-center');
    targetElements.forEach(element => {
        if (element.textContent.includes('Heat Up Your Summer')) {
            element.innerHTML = `
                Heat Up Your Summer with GR.iD<br>
                Shop, Complete Challenges and Get Rewarded<br>
            `;
        }
    });
    
    // add a table right under the campaign header
      const tableMarkup = `
    <div class="spend-points-wrapper text-center mb-3">
      <table class="spend-points-table">
        <tbody>
          <tr>
            <td>Spend $5 – $15.99</td>
            <td>Earn 15 points</td>
          </tr>
          <tr>
            <td>Spend $16 – $49.99</td>
            <td>Earn 25 points</td>
          </tr>
          <tr>
            <td>Spend $50 and above</td>
            <td>Earn 50 points</td>
          </tr>
        </tbody>
      </table>
    </div>
  `;
  $('h6.mb-3.text-center').after(tableMarkup);
  
    // once the modal’s content is in the DOM, patch that one voucher
  function patchOneVoucher(){
    // select by the series attribute
    var $voucher = $('[series="1RID-072025-205"]');
    if (!$voucher.length) return false;

    // find its description node
    var $desc = $voucher.find('.small.mb-2.text-muted');
    if ($desc.length) {
      $desc.text('terms and conditions apply');
      return true;
    }
    return false;
  }

  $(document).on('shown.bs.modal', '#popup_rewards', function(){
    patchOneVoucher();
  });
});