BBnepal-Accounts/application/views/teacher/teacher-notification.php

<main class="common_margin" id="main">
    <div class="main-inner-content" style="width:100%;     position: relative;">
        <h3 class="common-heading">Notification</h3>

        
        <div class=" row cal-assinment-new flex-column mb-5" style="margin: 0 !important;">
            <div class="po-calendar d-inline mt-3 mb-3" style="width: 30%;">
                <input type="text" class="form-control" placeholder="Select a date" id="nepali-datepicker">
                <i class="fas fa-calendar-alt cal-icon"></i>
            </div>
            
            <p class="mb-2">Note : To view different months notification, please select the required month and any day</p>
            <hr>
            <div class="noti-wrap-sec">

                <div class="noti-wrap-sec-left" id="notifications-container">
                    <?php if(isset($result)) {?>
                        <?php foreach ($result as $key => $value) { 
                            $originalDate = $result[$key]['created_at'];
                            $newDate = date("d-m-Y", strtotime($originalDate));
                            $newTime = date("h:i", strtotime($originalDate));
                            if($key == 0) {
                                echo '<div class="content-exam-box-one notif-active">';
                            } else {
                                echo '<div class="content-exam-box-one">';
                            }
                            ?>
                            <div class="content-box-one-inner">
                                <div class="content-right-side">
                                    <h6 class="exs-notif-title"><?php echo $result[$key]['notification_title']?></h6>
                                </div>
                            </div>
                            <div class="content-mid-text">
                                <p class="exs-notif-desc"><?php echo substr($result[$key]['description'], 0, 90)?>...</p>
                            </div>
                            <div class="content-last-sec">
                                <li><b>Date : <span class="exs-notif-date"><?php echo $newDate ?></span></b></li>
                                <li><b>Time : <span class="exs-notif-time"><?php echo $newTime ?></span></b></li>
                                <li style="text-align:right;"><input type="button" value="view details" onClick="displaySelectedNotification(event, <?php echo $result[$key]['notification_id']?>)" class="view-detail-notify"></li>
                            </div>
                        </div>
                    <?php } 
                } else {
                    echo '<p> There are no notifications for this month </p>';
                }?>
            </div>
            <div class="noti-wrap-sec-right">
                <div class="noti-wrap-sec-right-inner">
                    <p class="dis-notif-title"></p>
                    <p class="dis-notif-datetime"></p>
                </div>
                <div class="noti-para-sec">
                    <p class="dis-notif-desc"></p>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    // Notification Module

    $('#nepali-datepicker').nepaliDatePicker({
        language : 'english',
        ndpYear: true,
        ndpMonth: true,
        ndpYearCount: 10,
        onChange: function(data) {
            console.log(typeof data.object.month)
            let month = data.object.month;
            let YM = data.object.year + '-' + month;
            monthNotification(YM);
        }
    });

    const monthNotification = function(date) {
        let nContainer = $('#notifications-container');
        let dateArr = JSON.stringify(date.split('-'));
        $.ajax({
            url : 'ajax_displayNotificationByDate',
            data : {dateArr : dateArr},
            type : 'POST',
            async : false,
            success: function(data){

                let result = JSON.parse(data);

                if(result == 'failed') {
                    nContainer.empty();
                    nContainer.append('<p> You have no Notification for this month </p>');
                } else {
                    nContainer.empty();
                    $.each(result, function(iresultndex, value) {
                        nContainer.append(value);
                    });
                }          

            }
        });
    }

    const displaySelectedNotification = function(e, id) {

        $('.content-exam-box-one').removeClass('notif-active');
        e = e || window.event;

        var target = e.srcElement || e.target;

        while (target && target.className !== "content-exam-box-one") {
            target = target.parentNode;
        }
        target.classList.add('notif-active');
        let notifDesc = '';

        $.ajax({
            url : 'ajax_getNotificationDescription',
            data : {notifid : id},
            type : 'POST',
            async : false,
            success: function(data){

                let result = JSON.parse(data);

                console.log(result);

                if(result == 'failed') {
                    let notifDesc = target.querySelector('.exs-notif-desc').textContent;
                } else {
                    notifDesc = result['description'];
                }          

            }
        });

        let notifTitle = target.querySelector('.exs-notif-title').textContent;

        let notifTime = target.querySelector('.exs-notif-time').textContent;
        let notifDate = target.querySelector('.exs-notif-date').textContent;

        $('.dis-notif-title').text(notifTitle);
        $('.dis-notif-desc').text(notifDesc);
        $('.dis-notif-datetime').text(notifDate + ', ' + notifTime);


    }
</script>