@page "/result"
@using Otchinslator.Components.Layout
@layout OtchislenieLayout
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]

<PageTitle>Уже почти | Отчислятор 3000</PageTitle>

<dialog id="printModal" class="modal modal-bottom sm:modal-middle">
    <div class="modal-box">
        <h3 class="text-lg font-bold">Есть проблема...</h3>
        <p class="py-4 font-bold text-center">К сожалению отправить или распечатать заявление нельзя.</p>
        <img src="/img/write.png" class="h-80 my-4 mx-auto" alt=""/>
        <p class="text-center">Вам нужно написать его от руки, сфотографировать и отправить замдиректора по учебной работе на почту.</p>
        <div class="modal-action justify-center">
            <form method="dialog">
                <button class="btn btn-primary">Ок</button>
            </form>
        </div>
    </div>
</dialog>

<div class="relative">
    <div
        class="text-center font-bold text-4xl md:text-5xl w-max absolute left-1/2 -top-1/4 transform -translate-x-1/2 italic">
        <br>Заявление готово
    </div>
    <div id="pdfrenderer">
        <object data="/getStatement" type="application/pdf" class="w-96 sm:w-[32rem] h-[30rem] rounded-2xl text-center">
            <p>Не удалось отобразить заявление</p>
            <button id="alterRender" class="btn btn-primary my-2">использовать альтернативную отрисовку</button>
            <p>или откойте в браузере на основе Firefox</p>
        </object>
    </div>
    <div class="join w-full mt-4 flex gap-2">
        <a href="/" class="relative btn btn-primary rounded-full flex-grow-0 w-[3rem] h-[3rem]">
            <img class="absolute p-3" src="img/exit.svg" alt=""/>
        </a>
        <button onclick="printModal.showModal()" class="btn btn-primary rounded-full flex-grow w-30">
            Печать
        </button>
        <a id="downloadPDF" target="_blank" href="/getStatement"
           class="btn btn-primary bg-base-200 border-base-200 rounded-full flex-grow-0 w-[3rem]">
            @* Скачать PDF *@
            <div class="absolute rounded-full w-12 h-12">
                <img class="p-3" src="img/pdf.svg" alt=""/>
            </div>
        </a>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script>
    const alterRenderButton = document.getElementById('alterRender');
    alterRenderButton.addEventListener('click', alterRender);

    function alterRender() {
        const pdfrenderer = document.getElementById('pdfrenderer');
        const url = '/getStatement';
        pdfrenderer.innerHTML = '<canvas id="pdf-canvas" class="w-96 rounded-2xl"></canvas>';
        pdfjsLib.getDocument(url).promise.then(function (pdf) {
            pdf.getPage(1).then(function (page) {
                const viewport = page.getViewport({scale: 1});

                const canvas = document.getElementById('pdf-canvas');
                const context = canvas.getContext('2d');
                canvas.width = viewport.width;
                canvas.height = viewport.height;

                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        });
    }
</script>