<?php $__env->startSection('title', $siteName . ' — ' . $newspaper->publish_date->format('d M Y')); ?>
<?php $__env->startSection('meta_description', 'Read ' . $newspaper->publish_date->format('d M Y') . ' edition of ' . $siteName); ?>

<?php $__env->startPush('styles'); ?>
<style>
/* ════════════════════════════════════════════════════════
   READER  —  80% newspaper  |  20% right sidebar
════════════════════════════════════════════════════════ */
.main-content { padding: 0 !important; display: flex !important; flex-direction: column !important; }

.reader-shell { display: flex; flex-direction: column; flex: 1; }

/* ── Two-column body ──────────────────────────────────── */
.r-body { display: flex; align-items: flex-start; }

/* ── LEFT  80% — newspaper page ──────────────────────── */
.r-paper {
    flex: 1;
    min-width: 0;
    background: #d0c8b8;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* page panels */
.r-page-panel { display: none; width: 100%; }
.r-page-panel.active { display: block; }

.r-zoom-target { transform-origin: top left; transition: transform .2s ease; }

.r-page-wrap {
    position: relative;
    background: #fff;
    box-shadow: 2px 0 12px rgba(0,0,0,.18);
    overflow: hidden;
    width: 100%;
}
.r-page-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

.r-page-title {
    text-align: center; padding: 6px 0;
    font-family: 'Playfair Display',serif; font-size:.82rem;
    color:#fff; text-transform:uppercase; letter-spacing:1px;
    background:#2c2c2c;
}

/* ── RIGHT  20% — sidebar (calendar + ad) ────────────── */
.r-sidebar {
    width: 210px;
    flex-shrink: 0;
    background: #fff;
    border-left: 1px solid #ddd;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Calendar widget */
.cal-widget { font-family:'Inter',sans-serif; }
.cal-head-label {
    font-size:.62rem; font-weight:700; text-transform:uppercase;
    letter-spacing:1.4px; color:#999; border-bottom:2px solid #c0392b;
    padding-bottom:6px; margin-bottom:8px;
    display:flex; align-items:center; gap:5px;
}
.cal-nav {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:8px;
}
.cal-nav-btn {
    background:none; border:1px solid #e0e0e0; border-radius:4px;
    width:24px; height:24px; cursor:pointer; font-size:.75rem;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s;
}
.cal-nav-btn:hover { background:#fdf0e0; border-color:#c0392b; color:#c0392b; }
.cal-month-title { font-size:.78rem; font-weight:700; color:#1a1a2e; }
.cal-weekdays {
    display:grid; grid-template-columns:repeat(7,1fr);
    text-align:center; margin-bottom:4px;
}
.cal-weekdays span { font-size:.55rem; font-weight:700; color:#bbb; padding:2px 0; }
.cal-days { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-day {
    aspect-ratio:1; border-radius:4px; font-size:.68rem;
    display:flex; align-items:center; justify-content:center;
    cursor:default; color:#ccc;
}
.cal-day.has-edition {
    background:#fdf6ea; color:#333; cursor:pointer; font-weight:600;
    border:1px solid #f0e0c0; text-decoration:none;
    transition:background .15s;
}
.cal-day.has-edition:hover { background:#f5d5b0; border-color:#c0392b; color:#c0392b; }
.cal-day.today { background:#c0392b !important; color:#fff !important; border-color:#c0392b !important; font-weight:700; }
.cal-day.empty { cursor:default; }

/* Ad slot */
.r-ad-slot {
    background:#f8f8f8; border:1px dashed #ddd; border-radius:6px;
    min-height:120px; display:flex; align-items:center; justify-content:center;
    font-family:'Inter',sans-serif; font-size:.7rem; color:#bbb;
    text-align:center; flex-direction:column; gap:6px; padding:10px;
    overflow:hidden;
}
.r-ad-slot--filled {
    background:none; border:none; border-radius:0;
    padding:0; min-height:0; display:block;
}
.r-ad-slot--filled img { width:100%; height:auto; display:block; }
.r-ad-slot--filled a  { display:block; }

/* ── Hotspot overlay ──────────────────────────────────── */
.hotspot-area {
    position: absolute;
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid transparent;
    background: rgba(192,57,43,0);
    transition: background .2s, border-color .2s;
    z-index: 10;
}
.hotspot-area:hover {
    background: rgba(192,57,43,.13);
    border-color: rgba(192,57,43,.8);
}
.hotspot-area::before {          /* pulsing dot */
    content: '';
    position: absolute; top: 5px; left: 5px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #c0392b;
    animation: hs-dot 2s infinite;
}
@keyframes  hs-dot {
    0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.7); }
    50%      { box-shadow: 0 0 0 6px rgba(192,57,43,0); }
}

/* ════════════════════════════════════════════════════════
   ARTICLE POPUP  —  transparent overlay canvas viewer
════════════════════════════════════════════════════════ */
.hs-overlay {
    display: none;
    position: fixed; inset: 0;
    z-index: 9999;
    flex-direction: column;
    background: rgba(0,0,0,.82);
}
.hs-overlay.open { display: flex; }

/* Floating close button — top-right corner */
.hs-close-btn {
    position: fixed; top: 14px; right: 18px; z-index: 10000;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
    color: #fff; border-radius: 6px; padding: 6px 14px;
    font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 500;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: background .15s;
}
.hs-close-btn:hover { background: rgba(192,57,43,.75); border-color: #c0392b; }

.hs-body {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; align-items: center;
    background: transparent;
    padding-top: 50px;
}
.hs-loading {
    flex: 1; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 12px;
    color: #c0c0c0; font-family: 'Inter', sans-serif; font-size: .85rem;
}
.hs-spinner {
    width: 36px; height: 36px;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: #c0392b;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes  spin { to { transform: rotate(360deg); } }
#hsCropCanvas { display: block; max-width: 100%; height: auto; box-shadow: 0 8px 40px rgba(0,0,0,.6); }

.hs-bottombar {
    background: rgba(20,20,40,.88); padding: 9px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-shrink: 0; border-top: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(6px);
}
.hs-bottombar-left { display: flex; align-items: center; gap: 8px; }
.hs-zoomlabel { font-family:'Inter',sans-serif; font-size:.72rem; color:#8892b0; }
.hs-zoom-btn {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    color: #ccc; border-radius: 4px; width: 28px; height: 28px;
    cursor: pointer; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.hs-zoom-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.hs-readmore-btn {
    background: #c0392b; color: #fff; border: none; border-radius: 5px;
    padding: 7px 18px; font-family: 'Inter', sans-serif;
    font-size: .82rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s; white-space: nowrap;
}
.hs-readmore-btn:hover { background: #a93226; color: #fff; }
.hs-readmore-btn.hidden { display: none; }

/* ── Page number strip ──────────────────────────────── */
.r-page-strip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: #f7f7f7;
    border-bottom: 1px solid #e5e5e5;
    flex-wrap: wrap;
}
.r-pg-num {
    min-width: 34px; height: 30px;
    padding: 0 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: .8rem; font-weight: 700;
    cursor: pointer; color: #374151;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.r-pg-num:hover { background: #f0f0f0; border-color: #aaa; }
.r-pg-num.active { background: #c0392b; color: #fff; border-color: #c0392b; }
.r-pg-arrow {
    height: 30px; padding: 0 10px;
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 4px;
    font-size: .8rem; font-family: 'Inter', sans-serif;
    cursor: pointer; color: #374151;
    display: flex; align-items: center; gap: 4px;
    transition: background .15s;
}
.r-pg-arrow:hover { background: #f0f0f0; }
.r-pg-arrow:disabled { opacity: .35; cursor: default; }

/* ── mobile responsive ────────────────────────────────── */

@media (max-width: 768px) {
    .r-sidebar { display: none; }
    .r-paper { padding: 10px 8px; }
}
</style>
<?php $__env->stopPush(); ?>





<?php $__env->startSection('content'); ?>
<div class="reader-shell">

    
    <div class="r-body">

        
        <div class="r-paper" id="rPaper">

            
            <?php if($newspaper->pages->count() > 1): ?>
            <div class="r-page-strip">
                <button id="btnPrevPage" type="button" class="r-pg-arrow" disabled>
                    <i class="bi bi-chevron-left"></i> পূর্ববর্তী
                </button>
                <?php $__currentLoopData = $newspaper->pages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <button type="button"
                            class="r-pg-num page-nav-link <?php echo e($loop->first ? 'active' : ''); ?>"
                            data-page="<?php echo e($page->page_number); ?>">
                        <?php echo e($page->page_number); ?>

                    </button>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                <button id="btnNextPage" type="button" class="r-pg-arrow">
                    পরবর্তী <i class="bi bi-chevron-right"></i>
                </button>
            </div>
            <?php else: ?>
            
            <button id="btnPrevPage" type="button" style="display:none" disabled></button>
            <button id="btnNextPage" type="button" style="display:none" disabled></button>
            <?php endif; ?>

            <?php $__currentLoopData = $newspaper->pages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="r-page-panel <?php echo e($loop->first ? 'active' : ''); ?>"
                     id="panel-<?php echo e($page->page_number); ?>">
                    <?php if($page->title): ?>
                        <div class="r-page-title">
                            Page <?php echo e($page->page_number); ?>: <?php echo e($page->title); ?>

                        </div>
                    <?php endif; ?>
                    <div class="r-zoom-target" id="zt-<?php echo e($page->page_number); ?>">
                        <div class="r-page-wrap">
                            <img src="<?php echo e($page->image_url); ?>"
                                 alt="Page <?php echo e($page->page_number); ?>"
                                 id="img-<?php echo e($page->page_number); ?>">
                            <?php $__currentLoopData = $page->hotspots; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $hotspot): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div class="hotspot-area"
                                     role="button" tabindex="0"
                                     data-title="<?php echo e($hotspot->title); ?>"
                                     data-image="<?php echo e($page->image_url); ?>"
                                     data-x="<?php echo e($hotspot->x_percent); ?>"
                                     data-y="<?php echo e($hotspot->y_percent); ?>"
                                     data-w="<?php echo e($hotspot->width_percent); ?>"
                                     data-h="<?php echo e($hotspot->height_percent); ?>"
                                     data-link-type="<?php echo e($hotspot->link_type); ?>"
                                     data-link-val="<?php echo e($hotspot->link_value); ?>"
                                     aria-label="<?php echo e($hotspot->title ?: 'View article'); ?>"
                                     style="left:<?php echo e($hotspot->x_percent); ?>%;top:<?php echo e($hotspot->y_percent); ?>%;
                                            width:<?php echo e($hotspot->width_percent); ?>%;height:<?php echo e($hotspot->height_percent); ?>%">
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        
        <div class="r-sidebar" id="rSidebar">

            
            <div class="cal-widget">
                <div class="cal-head-label">
                    <i class="bi bi-calendar3"></i> আর্কাইভ
                </div>
                <div class="cal-nav">
                    <button class="cal-nav-btn" id="calPrev" title="আগের মাস">&#8249;</button>
                    <span class="cal-month-title" id="calTitle"></span>
                    <button class="cal-nav-btn" id="calNext" title="পরের মাস">&#8250;</button>
                </div>
                <div class="cal-weekdays">
                    <span>র</span><span>সো</span><span>ম</span>
                    <span>বু</span><span>বৃ</span><span>শু</span><span>শ</span>
                </div>
                <div class="cal-days" id="calDays"></div>
            </div>

            
            <?php
                $ad1 = \App\Models\Setting::get('sidebar_ad_1');
                $ad2 = \App\Models\Setting::get('sidebar_ad_2');
            ?>

            <?php if($ad1): ?>
                <div class="r-ad-slot r-ad-slot--filled"><?php echo $ad1; ?></div>
            <?php else: ?>
                <div class="r-ad-slot">
                    <i class="bi bi-image" style="font-size:1.6rem;opacity:.3"></i>
                    <span>বিজ্ঞাপন ১</span>
                </div>
            <?php endif; ?>

            <?php if($ad2): ?>
                <div class="r-ad-slot r-ad-slot--filled"><?php echo $ad2; ?></div>
            <?php else: ?>
                <div class="r-ad-slot">
                    <i class="bi bi-image" style="font-size:1.6rem;opacity:.3"></i>
                    <span>বিজ্ঞাপন ২</span>
                </div>
            <?php endif; ?>

        </div>
    </div>
</div>


<div class="hs-overlay" id="hsOverlay" role="dialog" aria-modal="true">
    <button class="hs-close-btn" id="hsClose">
        <i class="bi bi-x-lg"></i> Close
    </button>

    <div class="hs-body" id="hsBody">
        <div class="hs-loading" id="hsLoading">
            <div class="hs-spinner"></div>
            <span>Loading article…</span>
        </div>
        <canvas id="hsCropCanvas" style="display:none"></canvas>
    </div>

    <div class="hs-bottombar">
        <div class="hs-bottombar-left">
            <span class="hs-zoomlabel" id="hsZoomPct">100%</span>
            <button class="hs-zoom-btn" id="hsZoomIn"  title="Zoom in"><i class="bi bi-plus"></i></button>
            <button class="hs-zoom-btn" id="hsZoomOut" title="Zoom out"><i class="bi bi-dash"></i></button>
            <button class="hs-zoom-btn" id="hsZoomFit" title="Fit"><i class="bi bi-aspect-ratio"></i></button>
        </div>
        <a href="#" id="hsReadMore" class="hs-readmore-btn hidden" target="_blank" rel="noopener noreferrer">
            <i class="bi bi-box-arrow-up-right"></i> Read More
        </a>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
(function () {
'use strict';

/* ══════════════════════════════════════════════════
   0. CALENDAR ARCHIVE WIDGET
══════════════════════════════════════════════════ */
(function () {
    var availableDates = <?php echo json_encode($allDates, 15, 512) ?>;
    var dateSet = {};
    availableDates.forEach(function(d) { dateSet[d] = true; });

    var currentDate  = '<?php echo e($newspaper->publish_date->format("Y-m-d")); ?>';
    var parts        = currentDate.split('-');
    var calYear      = parseInt(parts[0]);
    var calMonth     = parseInt(parts[1]); // 1-based

    var monthsBn = ['জানুয়ারি','ফেব্রুয়ারি','মার্চ','এপ্রিল','মে','জুন',
                    'জুলাই','আগস্ট','সেপ্টেম্বর','অক্টোবর','নভেম্বর','ডিসেম্বর'];

    function pad(n) { return n < 10 ? '0' + n : '' + n; }

    function renderCalendar() {
        document.getElementById('calTitle').textContent =
            monthsBn[calMonth - 1] + ' ' + calYear;

        var grid     = document.getElementById('calDays');
        grid.innerHTML = '';

        var firstDay = new Date(calYear, calMonth - 1, 1).getDay(); // 0=Sun
        var daysInMonth = new Date(calYear, calMonth, 0).getDate();
        var today    = new Date().toISOString().slice(0, 10);

        // blank cells for days before month start
        for (var i = 0; i < firstDay; i++) {
            var blank = document.createElement('span');
            blank.className = 'cal-day empty';
            grid.appendChild(blank);
        }

        for (var d = 1; d <= daysInMonth; d++) {
            var dateStr = calYear + '-' + pad(calMonth) + '-' + pad(d);
            var el;
            if (dateSet[dateStr]) {
                el = document.createElement('a');
                el.href      = '<?php echo e(url("/newspaper")); ?>/' + dateStr;
                el.className = 'cal-day has-edition' +
                    (dateStr === currentDate ? ' today' : '');
                el.title     = dateStr;
            } else {
                el = document.createElement('span');
                el.className = 'cal-day' + (dateStr === today ? ' today' : '');
            }
            el.textContent = d;
            grid.appendChild(el);
        }
    }

    document.getElementById('calPrev').addEventListener('click', function () {
        calMonth--;
        if (calMonth < 1) { calMonth = 12; calYear--; }
        renderCalendar();
    });
    document.getElementById('calNext').addEventListener('click', function () {
        calMonth++;
        if (calMonth > 12) { calMonth = 1; calYear++; }
        renderCalendar();
    });

    renderCalendar();
})();

/* ══════════════════════════════════════════════════
   1. PAGE SWITCHING
══════════════════════════════════════════════════ */
var currentPage = 1;

function switchPage(num) {
    /* hide old panel */
    var old = document.querySelector('.r-page-panel.active');
    if (old) old.classList.remove('active');

    /* show new panel */
    var panel = document.getElementById('panel-' + num);
    if (!panel) return;
    panel.classList.add('active');
    currentPage = num;

    /* scroll viewer back to top */
    document.getElementById('rPaper').scrollTop = 0;

}

/* ══════════════════════════════════════════════════
   2. ARTICLE CANVAS POPUP
══════════════════════════════════════════════════ */
var overlay  = document.getElementById('hsOverlay');
var hsBody   = document.getElementById('hsBody');
var canvas   = document.getElementById('hsCropCanvas');
var ctx      = canvas.getContext('2d');
var loading  = document.getElementById('hsLoading');
var readMore = document.getElementById('hsReadMore');
var zoomPct  = document.getElementById('hsZoomPct');

var imgCache = {};
var current  = null;
var artZoom  = 0.75;

function renderCanvas(img, x, y, w, h, zoom) {
    var dpr  = window.devicePixelRatio || 1;

    var srcX = img.naturalWidth  * x / 100;
    var srcY = img.naturalHeight * y / 100;
    var srcW = img.naturalWidth  * w / 100;
    var srcH = img.naturalHeight * h / 100;

    /* CSS display size */
    var cssW = Math.round(window.innerWidth * zoom);
    var cssH = Math.round(srcH / srcW * cssW);

    /* Physical pixel budget — draw at full device resolution */
    var physW = Math.round(cssW * dpr);
    var physH = Math.round(cssH * dpr);

    canvas.width  = physW;
    canvas.height = physH;
    canvas.style.width  = cssW + 'px';
    canvas.style.height = cssH + 'px';

    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
    ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, physW, physH);

    canvas.style.display  = 'block';
    loading.style.display = 'none';
    hsBody.scrollTop      = 0;
    zoomPct.textContent   = Math.round(zoom * 100) + '%';
}

function openPopup(hs) {
    var title    = hs.dataset.title    || '';
    var imageUrl = hs.dataset.image;
    var x        = parseFloat(hs.dataset.x);
    var y        = parseFloat(hs.dataset.y);
    var w        = parseFloat(hs.dataset.w);
    var h        = parseFloat(hs.dataset.h);
    var linkType = hs.dataset.linkType || '';
    var linkVal  = hs.dataset.linkVal  || '';

    artZoom  = 0.75;
    current  = { imageUrl: imageUrl, x: x, y: y, w: w, h: h };

    canvas.style.display      = 'none';
    loading.style.display     = 'flex';

    overlay.classList.add('open');
    document.body.style.overflow = 'hidden';

    /* Read More */
    var href = '';
    if (linkType === 'url'    && linkVal) href = linkVal;
    if (linkType === 'page'   && linkVal) href = '#panel-' + linkVal;
    if (linkType === 'anchor' && linkVal) href = '#' + linkVal;

    if (href) {
        readMore.href = href;
        readMore.classList.remove('hidden');
        if (linkType === 'url') {
            readMore.setAttribute('target', '_blank');
            readMore.onclick = null;
        } else {
            readMore.removeAttribute('target');
            readMore.onclick = function (e) {
                e.preventDefault();
                closePopup();
                if (linkType === 'page') switchPage(parseInt(linkVal, 10));
            };
        }
    } else {
        readMore.classList.add('hidden');
    }

    /* draw */
    if (imgCache[imageUrl]) {
        renderCanvas(imgCache[imageUrl], x, y, w, h, artZoom);
    } else {
        var tmp = new Image();
        tmp.onload = function () {
            imgCache[imageUrl] = tmp;
            if (overlay.classList.contains('open')) {
                renderCanvas(tmp, x, y, w, h, artZoom);
            }
        };
        tmp.src = imageUrl;
    }
}

function closePopup() {
    overlay.classList.remove('open');
    document.body.style.overflow = '';
    current = null;
}

function reZoom(z) {
    artZoom = Math.min(4, Math.max(0.5, z));
    if (current && imgCache[current.imageUrl]) {
        renderCanvas(imgCache[current.imageUrl],
            current.x, current.y, current.w, current.h, artZoom);
    }
}

document.getElementById('hsZoomIn').onclick  = function () { reZoom(artZoom + 0.25); };
document.getElementById('hsZoomOut').onclick = function () { reZoom(artZoom - 0.25); };
document.getElementById('hsZoomFit').onclick = function () { reZoom(1); };
document.getElementById('hsClose').addEventListener('click', closePopup);
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closePopup(); });

/* pinch zoom on mobile */
var pinch0 = null;
hsBody.addEventListener('touchstart',  function (e) {
    if (e.touches.length === 2)
        pinch0 = Math.hypot(e.touches[1].clientX - e.touches[0].clientX,
                            e.touches[1].clientY - e.touches[0].clientY);
}, { passive: true });
hsBody.addEventListener('touchmove', function (e) {
    if (e.touches.length !== 2 || !pinch0) return;
    var d = Math.hypot(e.touches[1].clientX - e.touches[0].clientX,
                       e.touches[1].clientY - e.touches[0].clientY);
    reZoom(artZoom * (d / pinch0));
    pinch0 = d;
}, { passive: true });

/* wire hotspots */
document.querySelectorAll('.hotspot-area').forEach(function (hs) {
    hs.addEventListener('click', function (e) { e.stopPropagation(); openPopup(this); });
    hs.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openPopup(this); }
    });
});

/* ══════════════════════════════════════════════════
   4. NAVBAR PAGE LINKS
══════════════════════════════════════════════════ */
var btnPrevPage  = document.getElementById('btnPrevPage');
var btnNextPage  = document.getElementById('btnNextPage');
var totalPages   = <?php echo e($newspaper->pages->count()); ?>;

function updatePageNavBtns() {
    if (btnPrevPage) btnPrevPage.disabled = (currentPage <= 1);
    if (btnNextPage) btnNextPage.disabled = (currentPage >= totalPages);
}

if (btnPrevPage) {
    btnPrevPage.addEventListener('click', function () {
        if (currentPage > 1) switchPage(currentPage - 1);
    });
}
if (btnNextPage) {
    btnNextPage.addEventListener('click', function () {
        if (currentPage < totalPages) switchPage(currentPage + 1);
    });
}

document.querySelectorAll('.page-nav-link').forEach(function (a) {
    a.addEventListener('click', function (e) {
        e.preventDefault();
        switchPage(parseInt(this.dataset.page, 10));
    });
});

/* keep navbar active state + prev/next buttons in sync with switchPage */
var _origSwitch = switchPage;
switchPage = function (num) {
    _origSwitch(num);
    document.querySelectorAll('.page-nav-link').forEach(function (a) {
        a.classList.toggle('active', parseInt(a.dataset.page, 10) === num);
    });
    updatePageNavBtns();
};

updatePageNavBtns();

})();
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/boguraj1/public_html/epaper/resources/views/frontend/reader.blade.php ENDPATH**/ ?>