<?php
/*
* Plugin-Name: Product Designer App
* Plugin-URI: https://productdesignerapp.com
* Author: productdesignerapp
* Page: Dashboard
*/

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="row" v-if="langs.menu != undefined">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ul class="topbar-menu d-flex align-items-center">
                    <li class="dropdown notification-list">
                        <a class="nav-link dropdown-toggle waves-effect waves-light arrow-none px-2 position-relative d-flex align-items-center" href="javascript:void(0)" @click="showNocation = !showNocation">
                            <i class="material-icons material-symbols-outlined font-22">notifications</i>
                            <span class="badge bg-danger rounded-circle noti-icon-badge" v-if="notification.new.length">{{ notification.new.length }}</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg p-0" :class="showNocation ? 'show' : ''">
                            <div class="p-2 border-top-0 border-start-0 border-end-0 border-dashed border">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h6 class="m-0 font-16 fw-semibold">{{ langs.dashboard.notification }}</h6>
                                    </div>
                                    <div class="col-auto">
                                        <a href="javascript:void(0);" @click="showNocation = false">
                                            <i class="material-icons material-symbols-outlined font-22 text-danger">close</i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="px-2 pb-2 overflow-y-auto overflow-x-hidden" style="max-height: 300px;">
                                <template v-if="notification.new.length">
                                    <h5 class="text-muted font-13 fw-normal mt-2">{{ langs.dashboard.new_notification }}</h5>
                                    <button type="button" class="dropdown-item p-0 notify-item card unread-noti shadow-none mb-1" v-for="(noti, nid) in notification.new" :key="nid">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0">
                                                    <div class="notify-icon bg-primary">
                                                        <img :src="pluginUrl +'admin/assets/images/logo-menu.png'" alt="PDA" class="mw-100 mh-100 p-2">
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1 text-truncate ms-2">
                                                    <h5 class="noti-item-title fw-semibold font-14">{{ noti.title }} <small class="fw-normal text-muted ms-1">{{ noti.date }}</small></h5>
                                                    <small class="noti-item-subtitle text-muted" v-html="noti.msg"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </button>
                                </template>

                                <template v-if="notification.old.length">
                                    <h5 class="text-muted font-13 fw-normal mt-2">{{ langs.dashboard.notification }}</h5>
                                    <button type="button" class="dropdown-item p-0 notify-item card shadow-none mb-1" v-for="(noti, nid) in notification.old" :key="nid">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0">
                                                    <div class="notify-icon bg-primary">
                                                        <img :src="pluginUrl +'admin/assets/images/logo-menu.png'" alt="PDA" class="mw-100 mh-100 p-2">
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1 text-truncate ms-2">
                                                    <h5 class="noti-item-title fw-semibold font-14">{{ noti.title }} <small class="fw-normal text-muted ms-1">{{ noti.date }}</small></h5>
                                                    <small class="noti-item-subtitle text-muted" v-html="noti.msg"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </button>
                                </template>

                                <h5 class="text-danger text-center font-13 fw-normal mb-0" v-if="notification.new.length == 0 && notification.old.length == 0">{{ langs.dashboard.notification_not_found }}</h5>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <h4 class="page-title">{{ langs.menu.dashboard }}</h4>
        </div>
    </div>
</div>