@extends('frontend.layouts.app')
@section('meta_title', $edition->title . ' - ?-?????')
@section('content')
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold mb-1">{{ $edition->title }}</h2>
            <p class="text-muted mb-0">{{ bangla_date($edition->edition_date) }}</p>
        </div>
        <div class="d-flex gap-2">
            @if($previous)<a href="{{ route('epaper.show', $previous->edition_date->format('Y-m-d')) }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left"></i> ??????????</a>@endif
            @if($next)<a href="{{ route('epaper.show', $next->edition_date->format('Y-m-d')) }}" class="btn btn-outline-secondary btn-sm">??????? <i class="bi bi-arrow-right"></i></a>@endif
            @if($edition->pdf_file)<a href="{{ $edition->pdf_url }}" class="btn btn-danger btn-sm" download><i class="bi bi-download"></i> PDF</a>@endif
            <button class="btn btn-outline-danger btn-sm" onclick="toggleFullscreen()"><i class="bi bi-fullscreen"></i></button>
        </div>
    </div>

    <!-- Flipbook Viewer -->
    <div class="epaper-viewer bg-dark rounded p-4 mb-4" id="epaperViewer">
        <div class="text-center mb-3">
            <button class="btn btn-sm btn-light me-1" onclick="prevPage()"><i class="bi bi-chevron-left"></i></button>
            <span class="text-white mx-3" id="pageInfo">?????? ? / {{ $edition->pages->count() }}</span>
            <button class="btn btn-sm btn-light me-1" onclick="nextPage()"><i class="bi bi-chevron-right"></i></button>
            <button class="btn btn-sm btn-light ms-2" onclick="zoomIn()"><i class="bi bi-zoom-in"></i></button>
            <button class="btn btn-sm btn-light" onclick="zoomOut()"><i class="bi bi-zoom-out"></i></button>
        </div>
        <div class="text-center overflow-auto" id="pageContainer">
            @if($edition->pages->count())
            <img src="{{ $edition->pages->first()->image_url }}" alt="Page 1" class="img-fluid epaper-page" id="currentPage" style="max-height:70vh;transition:transform .3s;">
            @else
            <p class="text-white py-5">???? ?????? ?????? ??????</p>
            @endif
        </div>
    </div>

    <!-- Page Thumbnails -->
    @if($edition->pages->count() > 1)
    <div class="d-flex flex-wrap gap-2 justify-content-center">
        @foreach($edition->pages as $i => $pg)
        <img src="{{ $pg->image_url }}" alt="Page {{ $pg->page_number }}" class="rounded border cursor-pointer" style="width:60px;height:80px;object-fit:cover;cursor:pointer;" onclick="goToPage({{ $i }})" loading="lazy">
        @endforeach
    </div>
    @endif
</div>
@endsection
@section('scripts')
<script>
const pages = @json($edition->pages->pluck('image_url'));
let currentPageIdx = 0, scale = 1;
function updatePage(){document.getElementById('currentPage').src=pages[currentPageIdx];document.getElementById('pageInfo').textContent='?????? '+(currentPageIdx+1)+' / '+pages.length;}
function nextPage(){if(currentPageIdx<pages.length-1){currentPageIdx++;updatePage();}}
function prevPage(){if(currentPageIdx>0){currentPageIdx--;updatePage();}}
function goToPage(i){currentPageIdx=i;updatePage();}
function zoomIn(){scale=Math.min(scale+0.2,3);document.getElementById('currentPage').style.transform='scale('+scale+')';}
function zoomOut(){scale=Math.max(scale-0.2,0.5);document.getElementById('currentPage').style.transform='scale('+scale+')';}
function toggleFullscreen(){const el=document.getElementById('epaperViewer');if(!document.fullscreenElement){el.requestFullscreen();}else{document.exitFullscreen();}}
document.addEventListener('keydown',function(e){if(e.key==='ArrowRight')nextPage();if(e.key==='ArrowLeft')prevPage();});
</script>
@endsection