register/marko_unpacked/marko/portal/views/user/dashboard.php

<?php
/**
 * @var $this \yii\web\View
 * @var $user \app\models\UserPublic
 */
$points = $user->getExplorerObjectsSumPoints();
$lg = Yii::$app->language;
?>

<link rel="stylesheet" href="/_public/assets/css/page.css">
<link rel="stylesheet" href="/_public/assets/css/article-module.css">
<link rel="stylesheet" href="/_public/assets/css/user.css">
<style>
    .switch-button {
        width: 300px;
        margin: 20px auto 0;
        text-align: center;
        padding: 10px;
        background: #e9e9e9;
        border-radius: 10px;
        border: 1px solid #e9e9e9;
        cursor: pointer;
    }

    .switch-button .la {
        margin-right: 10px;
    }

    .switch-enable {
        color: green;
    }

    .switch-disable {
        color: darkred;
    }

    .club-card-status {
        display: block;
        text-align: center;
        position: absolute;
        top: calc(50% - 10px);
        width: 100%;
    }

    <?php if($user->club_card == 1): ?>
    .switch-disable {
        display: block
    }

    .switch-enable {
        display: none
    }

    .club-card-status {
        display: none !important;
    }

    <?php else:?>

    .switch-disable {
        display: none;
    }

    .switch-enable {
        display: block;
    }

    .club-card *:not(.club-card-status) {
        opacity: 0;
    }


    <?php endif;?>

    .profile-main-panel {
        display: flex;
        padding-right: 0;
    }

    .profile-main-panel .cwh {
        width: 50%;
    }

    .profile-main-panel .profile-row {
        display: flex;
    }

    .profile-row label {
        font-size: 18px !important;
        width: 250px;
    }

    .list-rows {
        display: flex;
        flex-wrap: wrap;
        width: calc(100% + 10px);
        margin-left: -5px;
    }

    .list-rows .list-row {
        display: flex;
        width: calc(100% / 3 - 26px);
        margin: 5px;
        padding: 8px;
        background: #f1f1f1;
        border-radius: 5px;
    }

    .list-rows .list-row img {
        height: 130px;
        width: 130px;
    }

    .points {
        padding: 5px;
        border-radius: 100%;
        background: var(--color-main-super-dark);
        color: #fff;
        width: 15px;
        height: 15px;
        text-align: center;
        line-height: 15px;
        display: inline-block;

    }

    @media screen and (max-width: 1200px) {
        .page-header {
            display: none;
        }

        .list-rows .list-row {
            width: calc(100% / 2 - 26px);
        }
    }

    @media screen and (max-width: 991px) {
        .profile-main-panel {
            display: block !important;
        }

        .profile-main-panel .cwh {
            width: 100% !important;
        }

        .profile-main-panel {
            padding-right: 20px !important;
        }

        .page-header {
            display: none;
        }

        .main-profile-panel.open .body {
            margin-top: -25px;
            padding-top: 20px;
        }
    }

    @media screen and (max-width: 780px) {


        .list-rows .list-row {
            width: calc(100% - 26px);
        }

        .subscriptions {
            display: block
        }

        .subscriptions .subscription {
            width: 100% !important;
        }

        .tabs-panel {
            display: block !important;
        }

        .tabs-panel .tab-button {
            width: 100%;
            border-radius: 5px;
        }

        .tabs-panel .tab-button.active {
            margin-bottom: 10px;
            margin-top: 10px;
            background: var(--color-main-dark) !important;
            color: #FFFFFF;
        }

        .tabs-panel .tab-button:not(.active) {
            margin-bottom: 10px;
            margin-top: 10px;
            background: #f1f1f1 !important;
            color: #000000;
        }
    }

    @media screen and (max-width: 510px) {


        .profile-main-panel .profile-row {
            display: block !important;
            padding: 10px !important;
        }

        .profile-main-panel .profile-row .input-row {
            width: 100%;
        }

        .club-card {
            width: 100% !important;
            margin-left: 10px;
        }

    }

    @media screen and (max-width: 400px) {
        .switch-button {
            width: calc(100% - 10px);
            height: auto;
            margin-left: 5px;
            margin-right: 5px;
        }
    }

    .selected-collection {
        background: var(--color-main-brigth-ultra-2) !important;
    }
</style>

<!--<script src='https://www.google.com/recaptcha/api.js'></script>-->

<script src='/_public/assets/js/user.js'></script>
<?php

use app\models\Ts;
use app\services\JWT;

/**
 * @var \yii\web\View $this
 */
?>

<div class="content">
    <div class="page-header" style="height: 80px">
        <a href="<?= Yii::$app->goHome() ?>" class="header-logo top-care">
            <?php if (Yii::$app->language == 'en'): ?>
                <img src="/_public/images/logo_en/N-logo-03.png">
            <?php else: ?>
                <img src="/_public/images/logo.png">
            <?php endif; ?>
        </a>
    </div>
    <div class="main-profile-panel top50 open">
        <div class="header-toggle-panel text-uppercase">
            <?= Ts::get(75) ?>
        </div>
        <div class="body">
            <div class="profile-main-panel">
                <div class="cwh top25">
                    <div class="ct text-uppercase title">
                        <?= Ts::get(74) ?>
                    </div>
                    <div class="flex profile-row">
                        <label><?= Ts::get(56) ?></label>
                        <div class="input-row"><input name="full_name" value="<?= $user->full_name ?>"><i
                                    class="la la-pencil edit-profile"></i></div>

                    </div>
                    <div class="flex flex-center">
                        <div class="profile-submit profile-data-submit top25 inactive"><?= Ts::get(76) ?></div>
                    </div>
                    <div class="profile-row top25">
                        <label>E-mail</label>
                        <div class="input-row font-bold"
                             style="padding-top: 7px; color: var(--color-main)"><?= $user->email ?></div>
                    </div>
                    <div class="profile-row top25">
                        <label style="line-height: 20px"><?= Ts::get(198) ?></label>
                        <div class="input-row" style="padding-top: 8px">
                            <?php if ($user->has_double_auth): ?>
                                <a style="color: #000000" href="?da=off"><?= Ts::get(205) ?></a>
                            <?php else: ?>
                                <div style="color: darkred"><?= Ts::get(217) ?></div>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="profile-row top25">
                        <label style="line-height: 20px"><?= Ts::get(220) ?></label>
                        <div class="input-row" style="padding-top: 8px">
                            <?php if ($user->has_newsletter): ?>
                                <a style="color: #000000" href="?na=off"><?= Ts::get(205) ?></a>
                            <?php else: ?>
                                <a style="color: #000000" href="?na=on"><?= Ts::get(206) ?></a>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="profile-row top25">
                        <label><?= Ts::get(57) ?></label>
                        <div class="input-row" style="padding-top: 8px">
                            <a style="color: #66882b; font-weight: bold; cursor: pointer"
                               onclick="ui.openPasswordChangeForm()"><?= Ts::get(204) ?></a>
                        </div>
                    </div>
                    <div class="password-change-form">
                        <div class="close" onclick="ui.closePasswordChangeForm()"></div>
                        <div class="flex profile-row">
                            <label><?= Ts::get(209) ?></label>
                            <div class="input-row"><input type="password" name="old_password" value=""></div>
                        </div>
                        <div class="flex profile-row">
                            <label><?= Ts::get(210) ?></label>
                            <div class="input-row"><input type="password" name="password" value=""></div>
                        </div>

                        <div class="flex profile-row">
                            <label class="password-strength-label" style="line-height: 15px"><?= Ts::get(195) ?></label>
                            <div class="password-strength">
                                <div class="weak unused"></div>
                                <div class="middle unused"></div>
                                <div class="strong unused"></div>
                            </div>
                        </div>
                        <div class="flex profile-row">
                            <label style="line-height: 15px"><?= Ts::get(58) ?></label>
                            <div class="input-row"><input type="password" name="password_confirm" value=""></div>
                        </div>
                        <div class="flex flex-center">
                            <div class="change-password-submit profile-submit top25 inactive"
                                 style="pointer-events: auto; cursor: pointer"><?= Ts::get(211) ?></div>
                        </div>
                    </div>
                </div>
                <div class="cwh top25">
                    <div class="ct text-uppercase title no-padding">
                        <?= Ts::get(77) ?>
                    </div>
                    <div class="club-card">
                        <div class="top">
                            <?php if (Yii::$app->language == 'en'): ?>
                                <img src="/_public/images/logo_en/N-logo-03.png">
                            <?php else: ?>
                                <img src="/_public/images/logo.png">
                            <?php endif; ?>
                        </div>
                        <div class="club-card-title"><?= Ts::get(82) ?></div>
                        <div class="club-card-owner"><?= $user->full_name ?></div>
                        <div class="bottom">
                            <span class="font-bold"><?= $points ?></span>
                            <?= $points == 1 ? Ts::get(239) : Ts::get(83) ?>
                        </div>
                        <div class="club-card-status"><?= Ts::get(243) ?></div>
                    </div>
                    <div class="club-card-button">
                        <div class="switch-button switch-disable"><i class="la la-ban"></i><?= Ts::get(242) ?></div>
                        <div class="switch-button switch-enable"><i class="la la-ban"></i><?= Ts::get(241) ?></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tabs-panel top25">
        <div data-tab="subscriptions" class="tab-button"><?= Ts::get(78) ?></div>
        <div data-tab="shopping" class="tab-button"><?= Ts::get(79) ?></div>
        <div data-tab="favourites" class="tab-button"><?= Ts::get(80) ?></div>
        <div data-tab="points" class="tab-button ct"><?= Ts::get(81) ?></div>
    </div>
    <div class="tab-content-panel top25"></div>
</div>

<script>

    const ui = new UI();
    ui.actions('<?= Yii::$app->language ?>')

    const eButton = document.querySelector('.switch-enable');
    const dButton = document.querySelector('.switch-disable');
    dButton.addEventListener('click', function () {
        fetch('/bg/remote/user-card-disable/').then(() => {
            window.location.reload();
        })
    })
    eButton.addEventListener('click', function () {
        fetch('/bg/remote/user-card-enable/').then(() => {
            window.location.reload();
        })
    })
    <?php if(!empty($_GET['orders'])): ?>
    const shopping = document.querySelector('[data-tab="shopping"]');
    shopping.click();
    <?php else: ?>
    ui.get('.tab-button:first-child').click()
    <?php endif ?>
    function openTicketDetails(e) {
        modal.modalFrame(`/<?= $lg ?>/user/ticket-details/?id=${e.dataset.ticket}`)
    }


    function changeInnerTab(e) {
        if (!e.classList.contains('active')) {
            document.querySelectorAll('.slide-tab').forEach(tab => {
                tab.classList.remove('active')
            })
            document.querySelectorAll('.order-items').forEach(orderItems => {
                orderItems.classList.remove('active')
            })
            e.classList.add('active')

            if (e.classList.contains('tab-subscriptions'))
                document.querySelector('.order-subscriptions').classList.add('active')
            if (e.classList.contains('tab-publications'))
                document.querySelector('.order-publications').classList.add('active')
            if (e.classList.contains('tab-collections'))
                document.querySelector('.order-collections').classList.add('active')
            if (e.classList.contains('tab-bookings'))
                document.querySelector('.order-bookings').classList.add('active')
        }
    }

    function downloadThis(e) {
        const link = e.dataset.href;
        e.classList.add('disabled');
        const loader = e.querySelector('.loader');
        loader.classList.add('loader-active');
        const xhr = new XMLHttpRequest();
        xhr.open('get', link);
        xhr.responseType = 'json';
        xhr.onload = function () {
            const response = xhr.response;
            if (response && response.success) {
                e.classList.remove('disabled');
                loader.classList.remove('loader-active');
                window.location.href = `/<?= $lg ?>/user/collection-download-zip?zipName=${response.zipName}&zipFile=${response.zipFile}&object_dir=${response.object_dir}`
            }
        }
        xhr.send();
    }

    <?php if(!empty($_GET['cid'])):
    $decode = JWT::decode($_GET['cid'], JWT::SECRET_KEY);
    if($decode):
    $collection_id = $decode->cid;?>
    window.addEventListener('DOMContentLoaded', function () {
        const shoppingTab = document.querySelector('[data-tab="shopping"]');
        shoppingTab.click();
        window.history.pushState("", "", '/<?= $lg ?>/user/');
    })


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