@extends('admin.layout.main')
@section('title',$header['title'])
@section('content')
<!-- Main content -->
<section class="content">
   <div class="container-fluid">
      <!-- Timelime example  -->
      <div class="row">
         <div class="col-md-12">
            <!-- The time line -->
            <div class="card">
               <div class="notify-btn">
                  <div class="view-btn">
                      <button class="btn btn-success btn-sm readAllNotification" data-id="all">Read All</button>
                  </div>
                  <div class="delete-btn">
                     <button class="btn btn-danger btn-sm deleteNotification" data-id="all">Delete</button>
                  </div>
               </div>
               <br>
               <div class="timeline">
                  <!-- timeline time label -->
                     <div class="time-label">
                        <label for="" class="select-notify">Select all</label>
                        <input type="checkbox" class="form-check-input check-notify all-check-notify notificationSelect" id="deleteAllCheckbox" data-id="all"> 
                     </div>
               
               </div>
               <div class="readmore-btn">
                   <a id="notification_readMore" href="javascript:void(0)" onclick="getNotificationListPage()" data-page="" class="btn btn-primary btn-sm">Read More</a>
               </div>
            </div>
         </div>
         <!-- /.col -->
      </div>
   </div>
   <!-- /.timeline -->
</section>
<!-- /.content -->
<!-- /.content-wrapper -->
@endsection
@section('js')
<script>
   var nextpageUrl="1";
   var deleteNotificationData=[];
   getNotificationListPage();
   
   function getNotificationListPage() {
       
       $('#deleteAllCheckbox').prop('checked', false);
       if(deleteNotificationData.length==0){
            $(".deleteNotification").attr("disabled", true);
       }
       
       if(nextpageUrl=="1"){
        notifyUrl='{{ route("admin.notificationEntity.getNotification") }}';
       }else{
           notifyUrl=nextpageUrl;
       }
       $.ajax({
           url: notifyUrl,
           type: 'GET',
           dataType: 'JSON',
           success: function (response) {
               
               $( response['data'] ).each(function( index,notification ) {
                   
                   var notificationStatus="notificationread btn-warning";
                   var read_class="unread-box";
                   var read_status_text="eye-slash";
                   if(notification["read_status"]=="0"){
                   var notificationStatus="notificationunread";    
                   var read_class="";
                   var read_status_text="eye";
                   }
                   
                   var html='<div id="notification_id_main_'+notification["notification_id"]+'">'+
                     '<input type="checkbox" class="form-check-input check-notify notificationSelect" data-id="'+notification["notification_id"]+'" id="notification_id'+notification["notification_id"]+'">'+
                     '<div class="timeline-item '+read_class+'">'+
                        '<h3 class="timeline-header">'+
                           '<img class="bg-blue icon-notify" src="'+notification["image"]+'" alt="">'+
                           notification["web_text"]+'<span class="time" title="'+notification['dateTime']+'"><i class="fas fa-clock"></i> '+notification["time"]+'</span>'+
                        '</h3>'+
                        '<div class="timeline-footer">'+
                           '<a href="javascript:void(0)" class="btn btn-primary btn-sm btn-sm btn-icon-notify '+notificationStatus+'" data-id='+notification["notification_id"]+'><i class="fas fa-'+read_status_text+'"></i></a>'+
                           '  <a class="btn btn-danger btn-sm btn-sm btn-icon-notify deleteNotification" data-id="'+notification["notification_id"]+'"><i class="fas fa-trash"></i></a>'+
                        '</div>'+
                     '</div>'+
                  '</div>';
//                  
                    $('.timeline').append(html);
   
               });
                              
               if(response['next_page_url']!=null){
                    nextpageUrl=response['next_page_url'];
               }else{
                   $('#notification_readMore').hide();
               }
           },
           error: function (error) {
               console.log(error);
           },
       });
   }
   
   // set detele data into array
   $(document).on("click", ".notificationSelect", function() {
        var notificationId=$(this).attr('data-id');
        let isChecked = $(this)[0].checked;
        
        if(notificationId=="all"){
            
            if(isChecked){
                document.querySelectorAll('.notificationSelect').forEach(function(currentNotification) {
                    
                    $('#'+currentNotification.getAttribute("id")).prop('checked',true);
                    var data_id = currentNotification.getAttribute("data-id");
                    if(data_id!="all"){
                        deleteNotificationData.push(data_id);
                    }
                });
            }else{
                $('.notificationSelect').prop('checked',false);
                deleteNotificationData=[];
            }
            
        }else{
            if(isChecked){
                deleteNotificationData.push(notificationId);
            }else{
                deleteNotificationData.splice($.inArray(notificationId, deleteNotificationData), 1);
            }
        }
        
        if(deleteNotificationData.length==0){
             $('.deleteNotification').attr('disabled', true);
        }else{
            $(".deleteNotification").attr("disabled", false);
        }
   });
   
   $(document).on("click", ".deleteNotification", function() {
       isAll=$(this).attr('data-id');
        data=[$(this).attr('data-id')];
        if(data=="all"){
            data=deleteNotificationData;
        }
        if (data.length === 0) {
            return;
        }
        $.ajax({
            url: '{{ route("admin.notificationEntity.deleteNotification") }}',
            type: 'POST',
            data: {
                notification_id: data,
                _token: "{{csrf_token()}}"
            },
            dataType: 'JSON',
            success: function (response) {
                $(data).each(function( index,value ) {
                    $("#notification_id_main_"+value).fadeOut(500, function() { $(this).remove(); });
                    deleteNotificationData.splice($.inArray(value, deleteNotificationData), 1);
                });
                getNotificationList();
                var notificationSelectCount = $('.notificationSelect').length;
                if(notificationSelectCount<=1){
                    deleteNotificationData=[];
                    getNotificationListPage();
                }
                if(isAll=="all"){
                    var Toast1 = Swal.mixin({
                    showCloseButton: true,
                    showConfirmButton: false,
                    });
                    Toast1.fire({
                        icon: 'success',
                        title: "<strong>Success</strong>",
                        text: "Notification Deleted Successfully",
                    })
                }
            },
            error: function (error) {
                console.log(error);
            },
        });
        
    });
</script>
@append