<template>
    <li class="dropdown notification-list">
        <a class="nav-link dropdown-toggle  waves-effect waves-light" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
            <i class="fe-bell noti-icon"></i>
            <span class="badge badge-danger rounded-circle noti-icon-badge" v-if="notifications.length !== 0">{{ notifications.length }}</span>
        </a>
        <div class="dropdown-menu dropdown-menu-right dropdown-lg">
            <!-- item-->
            <div class="dropdown-item noti-title">
                <h5 class="m-0">اعلانات</h5>
            </div>
            <div class="alert alert-secondary rounded-0" v-if="notifications.length === 0">اعلان جدید وجود ندارد</div>
            <div class="slimscroll noti-scroll" v-else>
                <!-- item-->
                <a href="javascript:void(0);" class="dropdown-item notify-item" @click="markAsRead(notification)" v-for="notification in notifications">
                    <div class="notify-icon bg-soft-primary text-primary">
                        <i class="mdi mdi-comment-account-outline"></i>
                    </div>
                    <p class="notify-details">{{ notification.data.title }}
                        <small class="text-muted">{{ notification.data.text }}</small>
                    </p>
                </a>
            </div>
        </div>
    </li>
</template>

<script>
    export default {
        props: ['notifications'],
        methods: {
            markAsRead(notification){
                axios.get('/panel/notifications/read?id=' + notification.id).then(response => {
                    window.location.href = notification.data.url
                })
            }
        }
    }
</script>