@extends('user.layouts.v_template')

@section('style')
    <style>
        body {
            background: #eef2ff;
        }

        /*
                |------------------------------------------------------------------
                | WRAPPER
                |------------------------------------------------------------------
                */

        .reader-wrapper {
            padding: 50px 0;
        }

        /*
                |------------------------------------------------------------------
                | HEADER
                |------------------------------------------------------------------
                */

        .reader-header {

            background:
                linear-gradient(135deg,
                    #1d4ed8,
                    #2563eb);

            border-radius: 24px;

            padding: 40px;

            color: white;

            position: relative;

            overflow: hidden;

            box-shadow:
                0 10px 30px rgba(37, 99, 235, 0.25);
        }

        .reader-header::before {

            content: '';

            position: absolute;

            width: 250px;
            height: 250px;

            background:
                rgba(255, 255, 255, 0.08);

            border-radius: 50%;

            top: -100px;
            right: -70px;
        }

        .badge-reader {

            display: inline-block;

            padding: 8px 16px;

            border-radius: 999px;

            background:
                rgba(255, 255, 255, 0.15);

            font-size: 13px;

            margin-bottom: 20px;
        }

        .reader-title {

            font-size: 38px;

            font-weight: 700;

            margin-bottom: 15px;

            line-height: 1.3;
        }

        .reader-desc {

            font-size: 15px;

            line-height: 1.8;

            max-width: 850px;

            opacity: 0.95;
        }

        /*
                |------------------------------------------------------------------
                | PDF READER
                |------------------------------------------------------------------
                */

        .pdf-reader {

            margin-top: 30px;

            background: white;

            border-radius: 24px;

            overflow: hidden;

            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.08);
        }

        /*
                |------------------------------------------------------------------
                | TOOLBAR
                |------------------------------------------------------------------
                */

        .pdf-toolbar {

            background: #111827;

            padding: 18px 25px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            flex-wrap: wrap;

            gap: 15px;
        }

        .toolbar-left,
        .toolbar-right {

            display: flex;

            align-items: center;

            gap: 12px;

            flex-wrap: wrap;
        }

        .toolbar-text {

            color: white;

            font-size: 14px;

            font-weight: 500;
        }

        .pdf-btn {

            border: none;

            background: #2563eb;

            color: white;

            padding: 10px 16px;

            border-radius: 12px;

            cursor: pointer;

            font-size: 14px;

            font-weight: 600;

            transition: 0.2s;

            text-decoration: none;
        }

        .pdf-btn:hover {

            transform: translateY(-2px);

            background: #1d4ed8;

            color: white;
        }

        /*
                |------------------------------------------------------------------
                | BODY
                |------------------------------------------------------------------
                */

        .pdf-body {

            background: #dbeafe;

            padding: 30px;

            display: flex;

            justify-content: center;

            overflow: auto;
        }

        #pdf-render {

            background: white;

            border-radius: 16px;

            box-shadow:
                0 4px 20px rgba(0, 0, 0, 0.12);

            max-width: 100%;
        }

        #pdf-render {

            image-rendering: auto;

            max-width: 100%;

            height: auto;
        }

        /*
                |------------------------------------------------------------------
                | FOOTER
                |------------------------------------------------------------------
                */

        .pdf-footer {

            padding: 18px 25px;

            border-top: 1px solid #e5e7eb;

            display: flex;

            justify-content: space-between;

            align-items: center;

            flex-wrap: wrap;

            gap: 15px;
        }

        .footer-info {

            color: #6b7280;

            font-size: 14px;
        }

        /*
                |------------------------------------------------------------------
                | MOBILE
                |------------------------------------------------------------------
                */

        @media(max-width:768px) {

            .reader-header {

                padding: 28px;
            }

            .reader-title {

                font-size: 26px;
            }

            .pdf-toolbar {

                flex-direction: column;

                align-items: stretch;
            }

            .toolbar-left,
            .toolbar-right {

                justify-content: center;
            }

            .pdf-body {

                padding: 12px;
            }

            .pdf-footer {

                flex-direction: column;

                text-align: center;
            }
        }
    </style>
@endsection

@section('content')

    <div class="container reader-wrapper">

        <!-- HEADER -->
        <div class="reader-header">

            <div class="badge-reader">
                Materi Pembelajaran
            </div>

            <div class="reader-title">
                Sistem Refrigerasi dan Troubleshooting AC
            </div>

            <div class="reader-desc">

                Pelajari alur diagnosis, pemeriksaan tekanan,
                analisis kerusakan, serta prosedur troubleshooting
                sistem pendingin secara sistematis dan profesional.

            </div>

        </div>

        <!-- PDF READER -->
        <div class="pdf-reader">

            <!-- TOOLBAR -->
            <div class="pdf-toolbar">

                <div class="toolbar-left">

                    <button class="pdf-btn" onclick="prevPage()">
                        ◀ Prev
                    </button>

                    <div class="toolbar-text">

                        Halaman
                        <span id="page_num">1</span>
                        /
                        <span id="page_count">0</span>

                    </div>

                    <button class="pdf-btn" onclick="nextPage()">
                        Next ▶
                    </button>

                </div>

                <div class="toolbar-right">

                    <button class="pdf-btn" onclick="zoomOut()">
                        -
                    </button>

                    <button class="pdf-btn" onclick="zoomIn()">
                        +
                    </button>

                    <a href="{{ asset('uploads/materi/1779614777.pdf') }}" target="_blank" class="pdf-btn">
                        Fullscreen
                    </a>

                    <a href="{{ asset('uploads/materi/1779614777.pdf') }}" download class="pdf-btn">
                        Download
                    </a>

                </div>

            </div>

            <!-- BODY -->
            <div class="pdf-body">

                <canvas id="pdf-render"></canvas>

            </div>

            <!-- FOOTER -->
            <div class="pdf-footer">

                <div class="footer-info">

                    Gunakan zoom dan navigasi halaman
                    untuk membaca materi dengan nyaman.

                </div>

                <div class="footer-info">

                    PDF Interactive Viewer

                </div>

            </div>

        </div>

    </div>

@endsection

@section('script')

    <!-- PDF JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

    <script>

        /*
        |------------------------------------------------------------------
        | PDF URL
        |------------------------------------------------------------------
        */

        const url =
            "{{ asset('uploads/materi/1779614777.pdf') }}";

        /*
        |------------------------------------------------------------------
        | VARIABLES
        |------------------------------------------------------------------
        */

        let pdfDoc = null;

        let pageNum = 1;

        let scale = 1.4;

        const canvas =
            document.getElementById('pdf-render');

        const ctx =
            canvas.getContext('2d');

        /*
        |------------------------------------------------------------------
        | LOAD PDF
        |------------------------------------------------------------------
        */

        pdfjsLib.getDocument(url).promise
            .then(pdf => {

                pdfDoc = pdf;

                document.getElementById('page_count')
                    .textContent = pdf.numPages;

                renderPage(pageNum);

            });

        /*
        |------------------------------------------------------------------
        | RENDER PAGE
        |------------------------------------------------------------------
        */

        function renderPage(num) {

            pdfDoc.getPage(num)
                .then(page => {

                    /*
                    |----------------------------------------------------------
                    | HIGH DPI / RETINA FIX
                    |----------------------------------------------------------
                    */

                    const outputScale =
                        window.devicePixelRatio || 1;

                    const viewport =
                        page.getViewport({
                            scale: scale
                        });

                    canvas.width =
                        Math.floor(
                            viewport.width * outputScale
                        );

                    canvas.height =
                        Math.floor(
                            viewport.height * outputScale
                        );

                    /*
                    |----------------------------------------------------------
                    | UKURAN TAMPILAN ASLI
                    |----------------------------------------------------------
                    */

                    canvas.style.width =
                        Math.floor(viewport.width) + "px";

                    canvas.style.height =
                        Math.floor(viewport.height) + "px";

                    /*
                    |----------------------------------------------------------
                    | SCALE AGAR TIDAK BURAM
                    |----------------------------------------------------------
                    */

                    const transform =
                        outputScale !== 1
                            ? [outputScale, 0, 0, outputScale, 0, 0]
                            : null;

                    const renderContext = {

                        canvasContext: ctx,

                        transform: transform,

                        viewport: viewport

                    };

                    page.render(renderContext);

                    document.getElementById('page_num')
                        .textContent = num;

                });

        }
        /*
        |------------------------------------------------------------------
        | PREV PAGE
        |------------------------------------------------------------------
        */

        function prevPage() {

            if (pageNum <= 1)
                return;

            pageNum--;

            renderPage(pageNum);

        }

        /*
        |------------------------------------------------------------------
        | NEXT PAGE
        |------------------------------------------------------------------
        */

        function nextPage() {

            if (pageNum >= pdfDoc.numPages)
                return;

            pageNum++;

            renderPage(pageNum);

        }

        /*
        |------------------------------------------------------------------
        | ZOOM IN
        |------------------------------------------------------------------
        */

        function zoomIn() {

            scale += 0.2;

            renderPage(pageNum);

        }

        /*
        |------------------------------------------------------------------
        | ZOOM OUT
        |------------------------------------------------------------------
        */

        function zoomOut() {

            if (scale <= 0.6)
                return;

            scale -= 0.2;

            renderPage(pageNum);

        }

    </script>

@endsection