@extends('layouts.front-end.app')

@section('title', translate('Offers Catalog'))

@push('css_or_js')
    <style>

        .flipbook {
            width: 100%;
            height: 100%;
        }
        header {
            position: relative;
            z-index: 10;
        }

    </style>
    <link href="https://cdn.jsdelivr.net/npm/page-flip@2.0.7/src/Style/stPageFlip.min.css" rel="stylesheet">

@endpush

@section('content')
    <div class="py-3 rtl text-align-direction" style="max-width: 1300px; margin: auto">
        <h2 class="text-center py-4 fs-24 font-semi-bold text-capitalize">{{ app()->getLocale() == 'ar' ? 'مجلة العروض' : 'Offers Catalog' }}</h2>

        @if(isset($catalog) && $catalog != null)
            <div class="card p-3">
                <div class="row align-items-center">
                    <div class="col-lg-6 text-start">
                        <div class="mx-2 d-inline">
                            <a href="{{route('home')}}">
                                <img alt="home" src="{{ asset('assets/front-end/img/icons/home.png') }}"
                                     width="24" height="24">
                            </a>
                        </div>
                        <div class="mx-2 d-inline">
                            <img id="email-pdf" alt="email" src="{{ asset('assets/front-end/img/icons/email_.png') }}" width="24"
                                 height="24" style="cursor:pointer;">
                        </div>
                        <div class="mx-2 d-inline">
                            <img id="print-pdf" alt="print" src="{{ asset('assets/front-end/img/icons/print.png') }}"
                                 width="24" height="24" style="cursor:pointer;">
                        </div>
                        <div class="mx-2 d-inline">
                            <img id="download-pdf" alt="download"
                                 src="{{ asset('assets/front-end/img/icons/download.png') }}" width="24" height="24"
                                 style="cursor:pointer;">
                        </div>
                    </div>
                    <div class="col-lg-6 text-end">
                        <div class="controls">
                            <button id="next-page" class="btn btn--primary font-bold">{{__('Next')}}</button>

                            <select class="form-control w-auto d-inline-block mx-3" id="page-select"></select>

                            <button id="prev-page" class="btn btn-warning font-bold">{{__('Previous')}}</button>
                        </div>
                    </div>

                    <div class="home_headerleft">
                        <div class="home_leftIcon">
                            <div class="home_headerIconWrap">
                                <div class="home_headerIconAction">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="loading-overlay" style="
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.8);
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden"></span>
                </div>
            </div>
            <div>
                <div id="flipbook" class="flipbook"></div>
            </div>




        @endif

    </div>
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/page-flip@2.0.7/dist/js/page-flip.browser.min.js"></script>




    @if(!empty($catalog))
        <script>
            var pdfUrl = "{{ url('storage/catalog/' . json_decode($catalog['value'])->image_name) }}?v=" + new Date().getTime();

            const pdfjsLib = window['pdfjs-dist/build/pdf'];
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.worker.min.js';

            const pageFlip = new St.PageFlip(document.getElementById("flipbook"), {
                width: 500,
                height: 700,
                size: "stretch",
                minWidth: 315,
                maxWidth: 1000,
                minHeight: 420,
                maxHeight: 1350,
                drawShadow: true,
                flippingTime: 800,
                useMouseEvents: true,
                startZIndex: 0,
                autoSize: true,
                maxShadowOpacity: 0.5,
                showCover: false,
                mobileScrollSupport: true
            });

            pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
                let loadPage = pageNum => {
                    return pdf.getPage(pageNum).then(page => {
                        const viewport = page.getViewport({ scale: 2 });
                        const canvas = document.createElement("canvas");
                        canvas.width = viewport.width;
                        canvas.height = viewport.height;
                        const context = canvas.getContext("2d");

                        return page.render({
                            canvasContext: context,
                            viewport: viewport
                        }).promise.then(() => canvas.toDataURL());
                    });
                };

                let promises = [];
                for (let i = 1; i <= pdf.numPages; i++) {
                    promises.push(loadPage(i));
                }

                Promise.all(promises).then(imageUrls => {
                    pageFlip.loadFromImages(imageUrls);

                    document.getElementById('loading-overlay').style.display = 'none';

                    // Populate the select box with page pairs
                    const select = document.getElementById("page-select");
                    const totalPages = imageUrls.length;

                    for (let i = 0; i < totalPages; i += 2) {
                        const option = document.createElement("option");
                        const startPage = i + 1;
                        const endPage = Math.min(i + 2, totalPages);

                        option.value = i; // index to jump to
                        option.text = `Pages ${startPage}-${endPage}`;
                        select.appendChild(option);
                    }
                    // Go to next page
                    document.getElementById("next-page").addEventListener("click", () => {
                        pageFlip.flipNext();
                    });

                    // Go to previous page
                    document.getElementById("prev-page").addEventListener("click", () => {
                        pageFlip.flipPrev();
                    });
                    // Jump to selected page pair when changed
                    select.addEventListener("change", function () {
                        pageFlip.flip(parseInt(this.value));
                    });

                    // Keep select box synced with current page
                    pageFlip.on("flip", (e) => {
                        const pageIndex = pageFlip.getCurrentPageIndex();
                        const currentPair = Math.floor(pageIndex / 2);
                        select.selectedIndex = currentPair;
                    });
                });


            });

            $("#print-pdf").click(function () {
                var win = window.open(pdfUrl, '_blank');
                win.print();
            });

            $("#download-pdf").click(function () {
                var link = document.createElement("a");
                link.href = pdfUrl;
                link.download = "Offers_Catalog.pdf";
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });

            $("#email-pdf").click(function() {
                var subject = encodeURIComponent("Check out this PDF!");
                var body = encodeURIComponent("Here is the link to view the PDF:\n\n" + pdfUrl);
                window.location.href = `mailto:?subject=${subject}&body=${body}`;
            });

        </script>
    @endif
@endpush