@extends('layouts.app')

<style>
    .pdf-container {
        margin: 150px auto;
        padding: 20px;
        max-width: 1000px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        text-align: center;
        background: #08BABB;
    
    }

    #pdf-canvas {
        border-radius: 8px;
    }

    canvas {
        border: 1px solid #ddd;
    }

    .navigation {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-top: 30px;
    }

    .navigation button {
        padding: 6px 14px;
        font-size: 14px;
        background-color: #0A1F2E;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .navigation button:disabled {
        background-color: #EBEBE4;
    }

    .page-info {
        font-size: 14px;
        color: #0A1F2E;
        font-weight: bold;
    }

    /* PDF Viewer Section Styles */
    .pdf-viewer-section {
        margin: 40px 0;
        padding: 0 15px;
    }

    .pdf-viewer-card {
        background: #08BABB;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        color: white;
        position: relative;
        overflow: hidden;
    }

    .pdf-viewer-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        animation: shimmer 3s ease-in-out infinite;
    }

    @keyframes shimmer {
        0%, 100% { transform: rotate(0deg); }
        50% { transform: rotate(180deg); }
    }

    .pdf-viewer-header {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        position: relative;
        z-index: 2;
    }

    .pdf-icon {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .pdf-icon i {
        font-size: 24px;
        color: #fff;
    }

    .pdf-info {
        flex: 1;
    }

    .pdf-title {
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 8px;
        color: #fff;
    }

    .pdf-description {
        font-size: 1rem;
        opacity: 0.9;
        margin: 0;
        line-height: 1.5;
    }

    .pdf-viewer-actions {
        text-align: center;
        position: relative;
        z-index: 2;
    }

    .btn-pdf-viewer, .btn-pdf-download {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 24px;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
    }

    .btn-pdf-viewer {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border-color: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
    }

    .btn-pdf-viewer:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        color: white;
        text-decoration: none;
    }

    .btn-pdf-download {
        background: rgba(46, 204, 113, 0.8);
        color: white;
        border-color: rgba(46, 204, 113, 0.5);
    }

    .btn-pdf-download:hover {
        background: rgba(46, 204, 113, 1);
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(46, 204, 113, 0.3);
        color: white;
        text-decoration: none;
    }

    .btn-pdf-viewer i, .btn-pdf-download i {
        font-size: 1.1rem;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .pdf-viewer-card {
            padding: 20px;
        }

        .pdf-viewer-header {
            flex-direction: column;
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-icon {
            margin-right: 0;
            margin-bottom: 15px;
        }

        .pdf-title {
            font-size: 1.2rem;
        }

        .pdf-description {
            font-size: 0.9rem;
        }

        .pdf-viewer-actions {
            flex-direction: column;
            gap: 10px;
        }

        .btn-pdf-viewer, .btn-pdf-download {
            justify-content: center;
            padding: 10px 20px;
            font-size: 0.9rem;
        }
    }
</style>
@section('content')

    <div class="container landing-section">
        <div class="row">
            <div class="col-12 col-lg-8 offset-lg-2">
                <div class="mb-5">
                    <div class="back-button">
                        <a href="{{ route('news-room') }}">
                            <span class="fas fa-arrow-left"></span> Back
                        </a>
                    </div>
                </div>

                <div class="">
                    <div class="mb-5 text-left">
                        <span class="fas fa-calendar"></span> {{ $news->date}}
                        <span class="read-time"><i> 5 min read</i></span>
                    </div>
                    <h4 class="text-left w-75 mb-3">
                        {{ $news->title }}
                    </h4>
                </div>

                <div class="my-5">
                     <img src="{{ $news->image_url }}" 
                            alt={{ $news->title }}}">
                </div>

                {!! $news->body !!}


                @if ($news->pdf)
                    <div class="pdf-viewer-section">
                        <div class="pdf-viewer-card">
                            <div class="pdf-viewer-header">
                                <div class="pdf-icon">
                                    <i class="fas fa-file-pdf"></i>
                                </div>
                                <div class="pdf-info">
                                    <h6 class="pdf-title">PDF Document Available</h6>
                                    <p class="pdf-description">View this article in our interactive PDF reader</p>
                                </div>
                            </div>
                            <div class="pdf-viewer-actions">
                                <a href="@pdfViewerUrl($news->pdf, $news->title, route('news.details', $news->id))" 
                                   class="btn btn-pdf-viewer" >
                                    <i class="fas fa-eye"></i>
                                    <span>View PDF</span>
                                </a>
                            </div>
                        </div>
                    </div>
                @endif



                <div class="d-flex justify-content-between align-items-center mt-6">
                    <p class="mb-0 fw-bold">Share</p>
                    <div class="footer-socials d-flex">
                        <span class="fa-brands fa-facebook-square mx-1"></span>
                        <span class="fa-brands fa-linkedin mx-1"></span>
                        <span class="fa fa-envelope mx-1" style="cursor: pointer"></span>
                    </div>
                </div>
                <hr class="m-0">

            </div>
        </div>


        <div class="container" style="margin:150px 0px;">
            <h5 class="all-news-class p-3">More News</h5>
            <div class="row all-news-class" id="all-news-id">
                @unless (empty($news))
                    @foreach ($randomNews as $newsDetail)
                        <div class="col-md-12 col-lg-4">
                            <div class="news-room-container">
                                <div class="news-box">
                                    <img src="{{ url(str_replace('assets/', '', $newsDetail->image_url)) }}" alt="News Image">
                                    <div class="overlay">
                                        <span>Business</span>
                                    </div>
                                </div>
                                <div class="news-room-text">
                                    <p class="news-room-title">
                                        <a href="{{ route('news.details', $newsDetail->id) }}">{{ $newsDetail->title }}</a>
                                    </p>
                                    <div class="news-meta">
                                        <p class="news-room-date">{{ $newsDetail->date }}</p>
                                        {{-- <div class="read-more">Read more</div> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endunless
            </div>

            {{-- <div class="row all-news-btn">
                <div class="col-12 center">
                    <button class="btn btn-default btn-pbg" id="load-more-button" onclick="loadNews()">Load More</button>
                </div>
            </div> --}}

        </div>


    </div>


    <script>
        const url = "{{ $news->pdf }}";
        let pdfDoc = null;
        let currentPage = 1;

        const canvas = document.getElementById('pdf-canvas');
        const context = canvas.getContext('2d');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const pageInfo = document.getElementById('page-info');

        // Load PDF
        const loadingTask = pdfjsLib.getDocument(url);

        loadingTask.promise.then(function(pdf) {
            pdfDoc = pdf;
            renderPage(currentPage);
            updateNavigation();
        }).catch(function(error) {
            console.error('Error while loading PDF: ', error);
        });

        function renderPage(pageNum) {
            pdfDoc.getPage(pageNum).then(function(page) {
                const scale = 1; // Adjust zoom level
                const viewport = page.getViewport({
                    scale: scale
                });

                canvas.height = viewport.height;
                canvas.width = viewport.width;

                // Render page to canvas
                page.render({
                    canvasContext: context,
                    viewport: viewport
                });

                pageInfo.textContent = `Page ${pageNum} of ${pdfDoc.numPages}`;
            });
        }

        // Previous page
        prevBtn.addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                renderPage(currentPage);
                updateNavigation();
            }
        });

        // Next page
        nextBtn.addEventListener('click', () => {
            if (currentPage < pdfDoc.numPages) {
                currentPage++;
                renderPage(currentPage);
                updateNavigation();
            }
        });

        // Update navigation buttons
        function updateNavigation() {
            prevBtn.disabled = currentPage <= 1;
            nextBtn.disabled = currentPage >= pdfDoc.numPages;
        }
    </script>

@stop