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

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

@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="pdf-container" class="row">
                <div class="col-lg-6 col-6">
                    <canvas id="pdf-canvas-1" style="width: 100%!important;"></canvas>
                </div>
                <div class="col-lg-6 col-6">
                    <canvas id="pdf-canvas-2" style="width: 100%!important;"></canvas>
                </div>
            </div>




        @endif

    </div>
@endsection

@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.min.js"></script>

    @if(!empty($catalog))
        <script>
            pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.worker.min.js";

            var pdfUrl = "{{ url('storage/catalog/' . json_decode($catalog['value'])->image_name) }}?v=" + new Date().getTime();
            console.log("Loading PDF from:", pdfUrl); // Debugging

            var pdfDoc = null,
                pageNum = 1,
                canvas1 = document.getElementById("pdf-canvas-1"),
                canvas2 = document.getElementById("pdf-canvas-2"),
                ctx1 = canvas1.getContext("2d"),
                ctx2 = canvas2.getContext("2d");

            function renderPage(num, canvas, ctx) {
                pdfDoc.getPage(num).then(function (page) {
                    var viewport = page.getViewport({scale: 1.5});
                    canvas.width = viewport.width;
                    canvas.height = viewport.height;

                    var renderContext = {
                        canvasContext: ctx,
                        viewport: viewport
                    };
                    page.render(renderContext);
                }).catch(() => {
                    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear if page doesn't exist
                });
            }

            function renderPages() {
                renderPage(pageNum, canvas1, ctx1);
                if (pageNum + 1 <= pdfDoc.numPages) {
                    renderPage(pageNum + 1, canvas2, ctx2);
                } else {
                    ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
                }


            }

            function populatePageSelector() {
                let select = $("#page-select");
                select.empty();
                for (let i = 1; i <= pdfDoc.numPages; i += 2) {
                    select.append(`<option value="${i}">${i} - ${i + 1 > pdfDoc.numPages ? pdfDoc.numPages : i + 1}</option>`);
                }
            }

            $("#prev-page").click(function () {
                if (pageNum > 1) {
                    pageNum -= 2;
                    if (pageNum < 1) pageNum = 1;
                    renderPages();
                    $("#page-select").val(pageNum);
                }
            });

            $("#next-page").click(function () {
                if (pageNum + 1 < pdfDoc.numPages) {
                    pageNum += 2;
                    renderPages();
                    $("#page-select").val(pageNum);
                }
            });

            $("#page-select").change(function () {
                pageNum = parseInt($(this).val());
                renderPages();
            });

            $("#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}`;
            });

            pdfjsLib.getDocument({
                url: pdfUrl,
                disableStream: true,
                disableAutoFetch: true,
                disableRange: true
            }).promise.then(function (pdf) {
                pdfDoc = pdf;
                $("#page-count").text(pdf.numPages);
                renderPages();
                populatePageSelector();
            }).catch(function (error) {
                console.error("Error loading PDF:", error);
            });

        </script>
    @endif
@endpush