register/marko_unpacked/marko/portal/views/user/ticket-details.php

<?php

use app\models\OrderBooking;
use app\services\JWT;

$id = $_GET['id'] ?? null;

$user = \app\services\Auth::getUser();
$lg = Yii::$app->language;
$message = [
    'ticket_for' => [
        'bg' => 'Билет за',
        'en' => 'Ticket for',
    ],
    'bookings' => [
        'bg' => 'Резервации',
        'en' => 'Bookings'
    ],
    'ticket_type' => [
        'bg' => 'вид билет',
        'en' => 'ticket type',
    ],
    'event_date' => [
        'bg' => 'дата на събитието',
        'en' => 'event date',
    ],
    'ticket' => [
        'bg' => 'билет',
        'en' => 'ticket'
    ],
    'ticket_count' => [
        'bg' => 'Брой лица, които могат да посетят събитието с този билет',
        'en' => 'Number of people who can attend the event with this ticket'
    ],
    'print_ticket' => [
        'bg' => 'Разпечатай билета',
        'en' => 'Print ticket'
    ],
    'event_venue' => [
        'bg' => 'Място на събитието',
        'en' => 'Event venue'
    ],
    'order_id' => [
        'en' =>'Order ID',
        'bg' => 'Номер на поръчката'
    ]
];


if ($id):
    $b = OrderBooking::findOne($id);

    ?>
    <style>
        body {
            background: #FFFFFF;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 18px;
        }

        #qrcode {
            margin: 0 auto;
            height: 200px;
            width: 200px;
            margin-top: 50px;
        }

        .order-sub-item {
            text-align: center;
            width: calc(100% - 20px);
            max-width: 350px;
            margin: 50px auto 0;
            padding: 10px;
        }

        .order-sub-item-title {
            margin-bottom: 20px;
            font-size: 22px;
        }

        .order-sub-item .type {
            margin-bottom: 10px;
        }

        .ticket-header img {
            width: 350px;
            margin: 50px auto 0;
            display: block;
            transform: translateX(-20px);
        }

        .print-ticket-button {
            color: #FFFFFF;
            background: #6F602E;
            padding: 20px;
            width: 200px;
            text-align: center;

            position: absolute;
            bottom: 50px;
            left: calc(50% - 100px);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
            cursor: pointer;
            border-radius: 5px;
        }

        .print-ticket-button img {
            width: 18px;
            margin-right: 10px;
            transform: translateY(5px);
        }
    </style>
    <input id="data" value="<?= $b->getHashedId() ?>" type="hidden">
    <div class="print-ticket-button" onclick="printTicket()"><img
                src="/_public/images/printing.png"><?= $message['print_ticket'][$lg] ?></div>

    <div id="ticket" style="max-width: 350px; width: 100%; margin: 0 auto; font-family: 'Arial',sans-serif">
        <div class="ticket-header">
            <?php if ($lg == 'bg'): ?>
                <img src="/_public/images/logo-b.png"
                     style="display: block; width: 350px; margin: 50px auto 0; transform: translateX(-10px)">
            <?php else: ?>
                <img src="/_public/images/logo_en/N-logo-02.png"
                     style="display: block; width: 350px; margin: 50px auto 0; transform: translateX(-10px)">
            <?php endif; ?>
        </div>
        <div id="qrcode" style="width: 200px; height: 200px; margin: 50px auto 0"></div>
        <div class="order-sub-item" style="text-align: center; margin-top: 50px">
            <div class="order-sub-item-title" style="margin-bottom: 10px; font-size: 22px"><?= $message['order_id'][$lg] ?>: <?= $b->order_id ?></div>
            <div class="order-sub-item-title"
                 style="margin-bottom: 20px; font-size: 22px"><?= $message['ticket_for'][$lg] . ': "' . $b->event->title(Yii::$app->language) . '"' ?></div>




            <div class="type" style="margin-bottom: 10px"><b style="color: grey"><?= $message['ticket_type'][$lg] ?></b>: <?= $b->{'name_' . $lg} ?>
                - <?= $b->single_price ?> лв.
            </div>
            <div class="type" style="margin-bottom: 10px"><b
                        style="color: grey"><?= $message['ticket_count'][$lg] ?></b>: <?= $b->tickets_count ?>
            </div>
            <div class="type" style="margin-bottom: 10px"><b
                        style="color: grey"><?= $message['event_date'][$lg] ?></b>: <?= $b->formatedHtmlDate() ?>
            </div>
            <div class="type"><b
                        style="color: grey"><?= $message['event_venue'][$lg] ?></b>:
                <div><?= $lg == 'bg' ? $b->event->location : $b->event->ts_en_location ?></div>
            </div>
        </div>
    </div>

    <script src="/_public/plugins/qrcode/qrcode.min.js"></script>
    <script>
        function generateQRCode() {
            const data = document.getElementById("data").value;
            const qrcode = new QRCode(document.getElementById("qrcode"), {
                text: data,
                width: 200,
                height: 200,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
        }

        generateQRCode()


        function printTicket() {
            // Get the target div element by its ID
            const targetDiv = document.getElementById('ticket');

            // Clone the target div element and all of its children
            const clonedDiv = targetDiv.cloneNode(true);

// Get all of the style sheets that are applied to the current document
            const styleSheets = document.styleSheets;

// Iterate through each style sheet and add its rules to the cloned div
            for (let i = 0; i < styleSheets.length; i++) {
                const rules = styleSheets[i].cssRules;
                for (let j = 0; j < rules.length; j++) {
                    clonedDiv.style.cssText += rules[j].cssText;
                }
            }

// Create a new hidden iframe
            const printFrame = document.createElement('iframe');
            printFrame.setAttribute('style', 'position:absolute;width:0;height:0;left:-500px;top:-500px;');
            document.body.appendChild(printFrame);

// Add the cloned div to the new iframe
            printFrame.contentDocument.body.appendChild(clonedDiv);

// Print the contents of the new iframe
            printFrame.contentWindow.print();

// Remove the iframe from the document
            document.body.removeChild(printFrame);
        }

    </script>
<?php else: ?>
<?php endif; ?>