<?php
date_default_timezone_set('Asia/Kolkata');
$op = get_option('print_Options_option_name');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php the_title("Print | "); ?></title>

<?php
// ✅ Fonts path (from plugin folder)
$plugin_base = plugin_dir_url(dirname(__FILE__));
$fonts_base  = $plugin_base . 'assest/fonts/';
?>

<!-- ✅ Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&family=Ramabhadra&display=swap" rel="stylesheet">

<style>
@font-face {
  font-family: 'JIMS';
  src: url('<?php echo esc_url($fonts_base . "JIMS-Regular.woff2"); ?>') format('woff2'),
       url('<?php echo esc_url($fonts_base . "JIMS-Regular.woff"); ?>') format('woff'),
       url('<?php echo esc_url($fonts_base . "JIMS Regular.otf"); ?>') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ramabhadra';
  src: url('<?php echo esc_url($fonts_base . "Ramabhadra-Regular.woff2"); ?>') format('woff2'),
       url('<?php echo esc_url($fonts_base . "Ramabhadra-Regular.ttf"); ?>') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Base Fonts ===== */
html, body.print-body, .news-details-print, article {
  font-family: 'JIMS', "Noto Sans Telugu", sans-serif !important;
  font-weight: 400;
  background: white;
  margin: 0;
  padding: 0;
}
	
body.print-body p {
  font-size: 20px;
  line-height: 1.2;
  word-spacing: 0.1px;
  letter-spacing: 0.1px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  margin-bottom: 1px;
  color: #000000;
}

/* ===== Headline ===== */
h2.p-title {
  font-family: 'Ramabhadra', sans-serif !important;
  font-weight: 500 !important;
  text-align: center;
  color: red !important;
  line-height: 1.4;
  margin: 10px 0;
  font-size: clamp(28px, 3.2vw + 10px, 60px);
}
@media (max-width: 768px) {
  h2.p-title {
    font-size: clamp(40px, 10vw + 12px, 90px);
    line-height: 1.45;
  }
}

@media (max-width: 600px) {
  .content-center {
    margin: 10px !important;
    padding: 15px 10px !important;
  }
  .content-center::before {
    top: -5px !important; left: -5px !important;
    right: -5px !important; bottom: -5px !important;
  }
  .time.p-date {
    font-size: 18px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
}

/* ===== Date + Editor ===== */
.time.p-date {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: #2F4F4F;
  color: #fff;
  padding: 6px 12px;
  font-size: 18px;
  font-family: 'JIMS', sans-serif;
  flex-wrap: nowrap;
}
.time.p-date > div {
  white-space: nowrap;
  text-align: center;
}

/* ===== Outer Container (Green border outside) ===== */
.content-center {
  text-align: center;
  margin: 60px auto;
  background: white;
  padding: 30px 25px;
  max-width: 920px;
  border-radius: 8px;
  position: relative;
}

/* visible green outline using pseudo element */
.content-center::before {
  content: "";
  position: absolute;
  top: -10px; left: -10px; right: -10px; bottom: -10px;
  border: 8px solid #106634;
  border-radius: 10px;
  pointer-events: none;
}

/* ===== Export-only overrides (clean capture) ===== */
.exporting .content-center {
  box-shadow: none !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  padding: 25px !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  border: 1px solid #f5f5f5 !important;
}
.exporting .content-center::before { display: none !important; }

/* ===== Misc ===== */
.news-details-print { padding: 10px; }
.print-copyright { text-align: center; font-size: 22px; margin: 10px; }
.print-float {
  position: fixed;
  bottom: 30px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}
.print-float-buttons {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
#epaperCols {
  font-family: 'JIMS', sans-serif;
  font-size: 32px;
  padding: 16px 24px;
  border-radius: 16px;
  border: 2px solid #ccc;
  background: #fff;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
a.btn {
  border-radius: 16px;
  padding: 20px 40px;
  font-size: 36px;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  transition: opacity 0.2s;
}
a.btn:hover { opacity: 0.85; }
a.btn.red { background: #e53935; }
a.btn.green { background: #2e7d32; }
a.btn img { max-height: 40px; filter: brightness(0) invert(1); }
@media print {
  .no-print, .no-print * { display: none !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  body.print-body { width: 100% !important; }
  .content-center { margin: 0 !important; padding: 10px !important; max-width: 100% !important; width: 100% !important; box-shadow: none !important; border-radius: 0 !important; }
  .content-center::before { border: 4px solid #106634 !important; top: -4px !important; left: -4px !important; right: -4px !important; bottom: -4px !important; }
  h2.p-title { font-size: clamp(28px, 3.2vw + 10px, 60px) !important; margin: 6px 0 !important; }
  body.print-body p { font-size: 20px !important; line-height: 1.2 !important; margin-bottom: 1px !important; }
  .time.p-date { font-size: 18px !important; padding: 6px 12px !important; }
  .print-copyright { font-size: 22px !important; }
  img { width: 100% !important; height: auto !important; }
  .news-details-print { column-gap: 12px !important; }
}

/* ===== Column Dropdown Style ===== */
#epaperCols {
  font-family: 'JIMS', sans-serif;
  font-size: 32px;
  padding: 16px 24px;
  border-radius: 16px;
  border: 2px solid #ccc;
  background: #fff;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* ===== Hide ads inside print page ===== */
body.print-page-noads .adsbygoogle,
body.print-page-noads ins.adsbygoogle,
body.print-page-noads .ad,
body.print-page-noads .ad-container,
body.print-page-noads .ad-banner,
body.print-page-noads .wp_ad,
body.print-page-noads iframe[src*="google"],
body.print-page-noads [id^="ad-"],
body.print-page-noads [class*="ad-"],
body.print-page-noads .googleslot,
body.print-page-noads .google-ad {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

/* 🟩 Prevent Ads inside Green Border */
.print-area ins.adsbygoogle,
.print-area iframe,
.print-area .google-auto-placed,
.print-area .adsbygoogle,
.print-area [id*="google_ads_iframe"],
.print-area .ad,
.print-area .ad-container {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================
   ✅ FIX 1 & 2: Image overlap + column fit
   ============================================ */
.news-details-print img {
  width: 100% !important;
  height: auto !important;
  float: none !important;
  clear: both !important;
  display: block !important;
  margin: 10px 0 !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}

/* Image ని wrap చేసే figure/div కూడా column లోనే ఉండాలి */
.news-details-print figure,
.news-details-print .wp-caption,
.news-details-print .wp-block-image {
  break-inside: avoid !important;
  width: 100% !important;
  display: block !important;
}

/* ============================================
   ✅ FIX 3: Content పక్కకి వెళ్ళకుండా
   ============================================ */
.news-details-print {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

</style>

<?php wp_head(); ?>
</head>

<body class="print-body">
<div id="epaper_ss" style="background:white!important;">
  <div class="content-center">

    <img src="<?php echo esc_url($op['header_banner_0']); ?>" alt="Logo" style="max-width:100%;height:auto;image-rendering:-webkit-optimize-contrast;">

    <div class="time p-date">
      <div>Date of Publish : <?php echo get_the_date("d F Y, g:i a"); ?></div>
      <div>Editor : <?php echo esc_html( $op['editor_name_5'] ?? 'Editor' ); ?></div>
    </div>

    <h2 class="p-title"><?php the_title(); ?></h2>

    <?php if ($op['design_3'] == "online"): ?>
      <center><img src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>" alt=""></center>
    <?php endif; ?>

    <div id="my-element" class="news-details-print print-container">
      <?php
        global $post;
        setup_postdata( $post );

        // Thumbnail for epaper mode
        $thumb_url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
        if ( $thumb_url ) {
            echo '<img src="' . esc_url( $thumb_url ) . '" style="width:100%;height:auto;display:block;margin:10px 0;">';
        }

        // Post content
        the_content();
      ?>
    </div>

    <div class="print-copyright">
      <hr>
      <?php if ($op['editor_information_1']): ?>
        <p><?php echo html_entity_decode($op['editor_information_1']); ?></p>
      <?php endif; ?>
      <strong><?php echo $op['copyright_2'] ?: 'Copyright © '.esc_html(date('Y')).' '.esc_html(get_bloginfo('name')).'. All rights reserved.'; ?></strong>
    </div>
  </div>
</div>

<!-- ✅ Floating Buttons -->
<div class="print-float no-print">
  <select id="epaperCols">
    <option value="2">2 Columns</option>
    <option value="3">3 Columns</option>
  </select>
  <div class="print-float-buttons">
    <a href="#" class="btn red" onclick="window.print()">
      <img src="https://cdn-icons-png.flaticon.com/512/3022/3022251.png"> Print
    </a>
    <a href="#" id="print_news" onclick="download_NewsNow()" class="btn green">
      <img src="https://cdn-icons-png.flaticon.com/512/4208/4208397.png"> Save
    </a>
  </div>
</div>

<?php wp_footer(); ?>

<script>
(function(){
  var select = document.getElementById('epaperCols');
  var newsEl = document.querySelector('.news-details-print');
  var bodyEl = document.querySelector('body.print-body');
  var baseWidth = 210;
  var defaultCols = 2;

  function applyCols(val) {
    val = parseInt(val) || defaultCols;
    if(newsEl) {
      newsEl.style.columnCount = val;
      newsEl.style.WebkitColumnCount = val;
      newsEl.style.MozColumnCount = val;
    }
    // body width set చేయడం తీసేశాను — print లో / mobile లో problem చేస్తుంది
  }

  var saved = null;
  try { saved = localStorage.getItem('print_epaper_cols'); } catch(e){}
  if(saved && select) select.value = saved;
  applyCols(saved || defaultCols);

  if (select) {
    select.addEventListener('change', function(e){
      var v = e.target.value;
      try { localStorage.setItem('print_epaper_cols', v); } catch(err){}
      setTimeout(function(){
        try {
          var href = window.location.href.split('#')[0].split('?')[0];
          window.location.replace(href + '?_col_ts=' + Date.now());
        } catch(ex) {
          window.location.reload();
        }
      }, 200);
    });
  }

  window.download_NewsNow = function() {
    var node = document.getElementById('epaper_ss');
    if(!node) {
      alert('No content found.');
      return;
    }

    if(typeof domtoimage === 'undefined') {
      alert('Export library not loaded. Using browser Print (Ctrl+P).');
      window.print();
      return;
    }

    var colVal = select ? select.value : defaultCols;
    applyCols(colVal);

    document.body.classList.add('exporting');

    setTimeout(function(){
      var origRect = node.getBoundingClientRect();
      var width = Math.ceil(origRect.width);
      var height = Math.ceil(origRect.height);

      var cloned = node.cloneNode(true);
      cloned.style.boxSizing = 'border-box';
      cloned.style.margin = '0';
      cloned.style.width = width + 'px';
      cloned.style.height = height + 'px';
      cloned.style.background = '#ffffff';

      var wrap = document.createElement('div');
      wrap.style.position = 'fixed';
      wrap.style.left = '-99999px';
      wrap.style.top = '0';
      wrap.style.width = width + 'px';
      wrap.style.height = height + 'px';
      wrap.style.overflow = 'visible';
      wrap.appendChild(cloned);
      document.body.appendChild(wrap);

      var scale = 3;

      var opts = {
        width: Math.round(width * scale),
        height: Math.round(height * scale),
        bgcolor: '#ffffff',
        quality: 1,
        style: {
          transform: 'scale(' + scale + ')',
          transformOrigin: 'top left',
          width: width + 'px',
          height: height + 'px',
          background: '#ffffff'
        }
      };

      domtoimage.toPng(cloned, opts)
        .then(function(dataUrl){
          var link = document.createElement('a');
          link.download = 'News-<?php echo intval(get_the_ID()); ?>-ePaper-HD.png';
          link.href = dataUrl;
          document.body.appendChild(link);
          link.click();
          link.remove();
        })
        .catch(function(err){
          console.error('domtoimage error', err);
          alert('Export failed. Try a lower scale or use Print. See console for details.');
        })
        .finally(function(){
          setTimeout(function(){
            try { wrap.remove(); } catch(e){}
            document.body.classList.remove('exporting');
          }, 300);
        });

    }, 160);
  };
})();
</script>

<script>
document.addEventListener('DOMContentLoaded', function(){
  function applyMobileTitleSize(){
    var title = document.querySelector('.p-title');
    if (!title) return;
    var w = window.innerWidth || document.documentElement.clientWidth;
    if (w <= 600) {
      title.style.fontSize = '75px';
      title.style.lineHeight = '1.25';
    } else {
      title.style.removeProperty('font-size');
      title.style.removeProperty('line-height');
    }
  }

  applyMobileTitleSize();

  var resizeTimer;
  window.addEventListener('resize', function(){
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(applyMobileTitleSize, 120);
  }, { passive: true });
});
</script>
</body>
</html>