<?php

include("_global.php");
//include("add-ons/Pixel.php");

$decline_link = $configs->path . "confirmation.php?customerId=" . $_GET["customerId"] . "&orderId=" . $_GET["orderId"] . "&declined=1";

// if (isset($_SESSION["added_upsell"]) && $_SESSION["added_upsell"] == true) {
//     header("Location: " . $configs->path . "confirmation.php");
// }

?>
<!doctype html>
<html>
<head>
   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
   <title><?php echo $configs->page_title; ?></title>
   <meta name="description" content="<?php echo $configs->step1_name; ?>" />

   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <meta http-equiv="content-language" content="en-us" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   <meta name="HandheldFriendly" content="true" />
   <meta name="viewport" content="width=device-width,user-scalable=no" />
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

   <link rel="shortcut icon" type="image/x-icon" href="<?php echo $configs->root_path . "/assets/brand/favicon.png"; ?>">
   <!-- google fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com/">
   <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&amp;display=swap" rel="stylesheet">
   <!-- CSS -->
   <link rel="stylesheet" href="<?php echo $configs->root_path . "/assets/css/loading.css"; ?>">

   <!-- Bootstrap CSS -->
   <link href="<?php echo $configs->root_path . "/assets/css/upsells/app.css"; ?>" rel="stylesheet">
   <link rel="stylesheet" href="<?php echo $configs->root_path . "/assets/css/upsells/bootstrap.min.css"; ?>">
   <link rel="stylesheet" href="<?php echo $configs->root_path . "/assets/css/upsells/custom.css"; ?>">
   <link rel="stylesheet" href="<?php echo $configs->root_path . "/assets/css/upsells/responsive.css"; ?>">
   <?php include_once('./sentry.php'); ?>
   <style>
      .capsule-benefits {
         margin-bottom: 20px !important;
      }

      .capsule-benefits p {
         margin: 0;
      }

      .capsule-benefits p:before {
         content: '✓';
      }
   </style>
</head>
<body>
   <div class="header_upsell">
      <div class="container text-center">
         <!-- <div class="offer_tag"><img src="<?php echo $configs->root_path . "/assets/images/tag.png"; ?>" alt=""></div>
         <span><img src="<?php echo $configs->root_path . "/assets/images/bonus_2/2.png"; ?>" alt=""></span> -->
      </div>
   </div>
   <div class="body_content text-center upsell2">
      <div class="container">
         <div class="offer_tag"><img src="<?php echo $configs->root_path . "/assets/images/special-offer-tag.png"; ?>" alt=""></div>
         <h5>Limited-Time Bonus Offer</h5>
         <h1>Boost Your Coffee’s Benefits with Daily Fiber Support — Special BOGO Deal</h1>
         <p>
            For a limited time only, add our best-selling <b>GlucoTrojan™ MegaFiber</b> to your order and get a <b>Buy One, Get One FREE</b> deal. 
            This daily fiber blend works with Hello Healthy Glucose Coffee to support blood sugar control, digestive health, 
            and appetite management.
         </p>   
         <div class="product_wrap clearfix">
            <div class="product_left">
               <span class="badge"><img src="<?php echo $configs->root_path . "/assets/images/badge.png"; ?>" alt=""></span>
               <div class="product_pic"><img src="<?php echo $configs->root_path . "/assets/brand/prod-upsell2.png"; ?>" alt=""></div>
            </div>
            <div class="product_content">
               <h2>OUR BEST SELLING</h2>
               <div class="price_tagD">
                  <!-- <span class="pic1"><img src="<?php echo $configs->root_path . "/assets/images/upsell-2-offer.png"; ?>" alt=""></span> -->
                  <div class="pricepic">Buy 1 <br>Get 1</div>
               </div>
               <div class="pulse">
                  <div class="big_text">TRIPLE-ACTION PREBIOTIC FIBER FORMULA<span></span></div>
               </div>
               <div class="price_area">
                  Claim your bottles today. BOGO Deal.
                  <span>Just $<?php echo number_format((float)$configs->upsells[1]['price_per'], 2, '.', ''); ?></span> 
                  /per bottle!
               </div>
               <p style="font-weight: bold; color: red;">ONLY 45 LEFT IN STOCK!</p>
            </div>
            <div class="capsule-benefits">
               <p>
                  <strong>Helps</strong> flatten glucose spikes.
               </p>
               <p>
                  <strong>Supports </strong> healthy digestion & regularity.
               </p>
               <p>
                  <strong>Promotes </strong> satiety to curb cravings.
               </p> 
               <p>
                  <strong>Works with </strong> your coffee to promote steady energy and balanced metabolism.
               </p>
            </div>
            <div class="sub_text"><strong>SUPPORTS GLUCOSE, GUT & APPETITE</strong></div>
               <p>
                  <?php echo $configs->corporate_name ?> <?php echo $configs->upsells[1]['name'] ?> features a specialized blend of <strong>guar gum, inulin, and fig fruit fiber</strong> that promotes satiety, improves digestion, and helps flatten glucose curves. <br />
                  Whether you're managing weight, supporting insulin sensitivity, or trying to tame cravings — this fiber-based formula works with your body to promote smoother, more consistent energy and metabolic balance.*
               </p>
         </div>
         <div class="left_area">
            <div class="only_text">ONLY 45 LEFT IN STOCK!</div>
            <center><button type="submit" id="submit-checkout" class="checkout_btn pulse" onClick="processUpsell();">YES! ADD MEGAFIBER TO MY ORDER</button></center>
            <p>Backed by the same satisfaction guarantee as your coffee order — try it risk-free.</p>
            <br><br>
            <div class="dont_text">
               <i><img src="<?php echo $configs->root_path . "/assets/images/close.png"; ?>" alt=""></i>
               <span><a href="<?php echo $decline_link; ?>" id="nothanks" style="text-decoration: none;color:#8e8e8e;">No thanks, I don’t want extra blood sugar or digestive support.</a></span>
            </div>
            <div class="pic2"><img src="<?php echo $configs->root_path . "/assets/images/pic4.png"; ?>" alt=""></div>
         </div>
      </div>
   </div>
   <div class="footer text-center">
      <div class="container">
         <ul class="terms-links">
            <li><a href="javascript:void(0);" onclick="openNewWindow('./disclosures/terms.php','modal');">Terms and Conditions |</a></li>
            <li><a href="javascript:void(0);" onclick="openNewWindow('./disclosures/privacy.php','modal');">Privacy Policy |</a></li>
            <li><a href="javascript:void(0);" onclick="openNewWindow('./disclosures/contact.php','modal');">Contact us</a></li>
         </ul>
         <span>
            &copy; <script> var date = new Date(); document.write(date.getFullYear())</script> All Rights Reserved
         </span>
      </div>
   </div>

   <!--popup processing wrapper-->
   <section id="loading-indicator" class="popup-loading-wrapper" style="display: none">
      <div class="popup">
         <img src="<?php echo $configs->root_path . "/assets/images/icon-lock.png"; ?>" alt="" class="lock-image"/>
         <p>Please wait a moment</p>
         <h3>Your Order is Now Being Processed</h3>
         <img src="<?php echo $configs->root_path . "/assets/images/icon-loading.png"; ?>" alt="" class="loading-image"/>
      </div>
   </section>
   <!--end popup processing wrapper-->

   <form method="post" action="<?php echo $configs->path; ?>app/src/add_upsell.php" id="with_upsell_form">
      <input type='hidden' name='token' value='<?php echo $_SESSION["token"]; ?>'>
      <input type="hidden" name="device" value="desktop">
      <input type="hidden" name="customer_id" value="<?php echo $_GET["customerId"]; ?>">
      <input type="hidden" name="previous_order_id" value="<?php echo $_GET["orderId"]; ?>">
      <input type="hidden" name="u_step" value="1">
      <input type="hidden" name="add_upsell" id="add_upsell" value="true">
   </form>

   <script src="<?php echo $configs->root_path . "/assets/js/jquery.min.js"; ?>"></script>
   <script>
      function processUpsell() {
         $('#loading-indicator').css( 'display', 'block' );
         $('#with_upsell_form').submit();
      }
   
      $(document).on('click', '#app_common_modal_close', function() {
         $('#app_common_modal').remove();
      });	

      function openNewWindow(page_url, type, window_name, width, height, top, left, features) {
         if (!type) {
            type = 'popup';
         }
         if (!width) {
            width = 480;
         }
         if (!height) {
            height = 480;
         }
         if (!top) {
            top = 50;
         }
         if (!left) {
            left = 50;
         }
         if (!features) {
            features = 'resizable,scrollbars';
         }

         if (type == 'popup') {
            var settings = 'height=' + height + ',';
            settings += 'width=' + width + ',';
            settings += 'top=' + top + ',';
            settings += 'left=' + left + ',';
            settings += features;

            win = window.open(page_url, window_name, settings);
            win.window.focus();
         } else if (type == 'modal') {
            var html = '';
            html += '<div id="app_common_modal">';
            html += '<div class="app_modal_body"><a href="javascript:void(0);" id="app_common_modal_close">X</a><iframe src="' + page_url + '" frameborder="0"></iframe></div>';
            html += '</div>';

            if (!$('#app_common_modal').length) {

                  $('body').append(html);
            }
            $('#app_common_modal').fadeIn();
         }

      }
   </script>   
</body>
</html>

<section>
   <div class="container vh-100">
      <div class="col-lg-7"></div>
      <div class="col-lg-5 d-flex flex-column justify-content-end">
      <!-- Your content here will be pushed to the bottom -->
         <div>
            Bottom-aligned content
         </div>
      </div>
   </div>
</section>