@extends('user.layouts.v_template')

@section('style')
    <style>
        /*
                                                                                                            |------------------------------------------------------------------
                                                                                                            | 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;
        }

        /*
                                                                            |------------------------------------------------------------------
                                                                            | MATERIAL TABS
                                                                            |------------------------------------------------------------------
                                                                            */

        .material-tabs {

            display: flex;

            gap: 12px;

            padding: 20px 25px;

            background: white;

            border-bottom: 1px solid #e5e7eb;

            flex-wrap: wrap;
        }

        .material-tab {

            border: none;

            padding: 12px 22px;

            border-radius: 999px;

            background: #f3f4f6;

            color: #374151;

            font-weight: 600;

            cursor: pointer;

            transition: .25s;
        }

        .material-tab:hover {

            background: #dbeafe;
        }

        .material-tab.active {

            background: #2563eb;

            color: white;

            box-shadow:
                0 4px 12px rgba(37, 99, 235, .25);
        }

        .material-content {

            display: none;
        }

        .material-content.active {

            display: block;
        }

        .video-container {

            background: #dbeafe;

            padding: 30px;

            display: flex;

            justify-content: center;
        }

        .video-container video {

            width: 100%;

            max-width: 1100px;

            border-radius: 16px;

            background: black;

            box-shadow:
                0 4px 20px rgba(0, 0, 0, .12);
        }

        /*
                                                                                                            |------------------------------------------------------------------
                                                                                                            | 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;
            }

            .material-tabs {
                flex-direction: column;
                align-items: stretch;
                gap: 15px;
            }

            .material-tabs>div {
                text-align: center;
            }
        }
    </style>
@endsection

@section('content')
    <section class="section-top"
        style="background-image: url(assets/img/bg/section-top.png);background-size:cover; background-position: center center;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-xs-12 text-center">
                    <div class="section-top-title">

                        <h1>
                            {{ $materi->judul }}
                        </h1>
                    </div>
                </div><!--- END COL -->
            </div><!--- END ROW -->
        </div><!--- END CONTAINER -->
    </section>

    <div class="container reader-wrapper">

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

            <div class="material-tabs d-flex justify-content-between align-items-center">

                <div>
                    @if ($materi->pdf != null && $materi->video != null)
                        <button class="material-tab active" onclick="switchTab('pdf')" id="tab-pdf">
                            📄 Materi PDF
                        </button>
                    @elseif($materi->pdf != null && $materi->video == null)
                        <button class="material-tab active" id="tab-pdf">
                            📄 Materi PDF
                        </button>
                    @endif

                    @if ($materi->video != null && $materi->pdf == null)
                        <button class="material-tab active" id="tab-video">
                            🎥 Video Pembelajaran
                        </button>
                    @elseif($materi->video != null)
                        <button class="material-tab" onclick="switchTab('video')" id="tab-video">
                            🎥 Video Pembelajaran
                        </button>
                    @endif

                </div>

                <a href="{{ URL::to('/materi') }}" class="material-tab" style="text-decoration:none;">
                    ← Kembali
                </a>

            </div>

            <!-- TOOLBAR -->
            <div id="pdf-content" class="material-content {{ $materi->pdf != null ? 'active' : '' }}">
                <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/' . $materi->pdf) }}" target="_blank" class="pdf-btn">
                            Fullscreen
                        </a>

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

                        <a href="{{ URL::to('/quiz/' . $materi->case_id) }}" class="pdf-btn">
                            Kerjakan Kasus
                        </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>
            @php
                preg_match(
                    '/(?:youtu\.be\/|youtube\.com\/watch\?v=)([^&\?\/]+)/',
                    $materi->video,
                    $matches
                );

                $youtubeId = $matches[1] ?? null;
            @endphp
            <div id="video-content" class="material-content {{ $materi->pdf == null ? 'active' : '' }}">

                <div class="video-container">

                    <iframe width="100%" height="600" src="https://www.youtube.com/embed/{{ $youtubeId }}"
                        title="Video Pembelajaran" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen>
                    </iframe>

                </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/' . $materi->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>
    <script>

        function switchTab(type) {
            document
                .getElementById('pdf-content')
                .classList.remove('active');

            document
                .getElementById('video-content')
                .classList.remove('active');

            document
                .getElementById('tab-pdf')
                .classList.remove('active');

            document
                .getElementById('tab-video')
                .classList.remove('active');

            if (type === 'pdf') {
                document
                    .getElementById('pdf-content')
                    .classList.add('active');

                document
                    .getElementById('tab-pdf')
                    .classList.add('active');
            }
            else {
                document
                    .getElementById('video-content')
                    .classList.add('active');

                document
                    .getElementById('tab-video')
                    .classList.add('active');
            }
        }

    </script>
@endsection