BBnepal-Accounts/application/views/student/my-notifications.php

<style type="text/css">
    .w-95 {
    width: 95%;
}
</style>
<main class="common_margin" id="main">
    <div class="main-inner-content w-95">
    <div class="class-head">
        <h3 class="common-heading">Notification</h3>
    </div>
        <div class=" row cal-assinment-new mb-5" style="margin: 0;">
            <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>
        <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><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="notif_content">
                    <?php if(isset($result)) { ?>
                        <div class="noti-wrap-sec-right-inner">
                        <?php 

                            $originalDate = $result[0]['created_at'];
                            $newDate = date("d-m-Y", strtotime($originalDate));
                            $newTime = date("h:i", strtotime($originalDate));

                         ?>

                        <p class="dis-notif-title"><?php echo $result[0]['notification_title']?></p>
                        <p class="dis-notif-datetime"><?php echo $newDate ?>, <?php echo $newTime ?></p>
                    </div>
                    <div class="noti-para-sec">

                        <p class="dis-notif-desc"><?php echo $result[0]['description']?></p>
                    </div>
                    <?php } ?>
                    </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);
               
            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>