@extends('layouts.vat')

@section('content')

  @if (session('success'))
      <div class="alert alert-success">
          {{ session('status') }}
      </div>
  @endif  
  @if (session('infoms'))
      <div class="alert alert-info">
          {{ session('infoms') }}
      </div>
  @endif
  @if (session('warning'))
      <div class="alert alert-warning">
          {{ session('warning') }}
      </div>
  @endif
  <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="">
                <div class="card-header text-dark font-weight-bold border-0" style="background-color: #fff;">Notification(s)
                  
                 <div class="card-body font-weight-normal">
                    <ul class="list-group">
                      @foreach ($client_notifications->paginate(8) as $notification)
                        <li class="list-group-item mb-2">
                        <a class="notification-item" style="color: black; text-decoration: none;" href="{{route('notifiredirect',['id'=>$notification->id])}}"> 
                         {{$notification->data['data']}}
                         </a>

                         <button type="button" class="btn btn-sm btn-danger float-right" id="dismiss" value=" {{$notification->id}}" style="background: #ff5100; border-color: #fff;">
                           Dismiss
                         </button>
                        </li>
                      @endforeach 
                    </ul>
                 </div>
                 {{$client_notifications->paginate(8)->links()}}

                 <button type="button" class="btn btn-danger btn-sm" id="dismissall" style="background: #ff5100; border-color: #fff;">Dismiss All
                      </button>
                </div> 
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $( document ).ready(function() {

      var count = "{{$count}}";
      if(count < 1) 
      {
        $('#dismissall').hide();
      }  
        
      $(document).on("click","#dismiss",function(){

          var notification_id = $(this).val();
          var _token = $('input[name="_token"]').val();
          //console.log(comment);
          console.log(notification_id); 
          
          $.ajax({
                    url:"{{ route('mark-as-read') }}",
                    method:"POST",
                    data:{id:notification_id, _token:_token},
                    success:function(response)
                    {
                      window.location = "{{ url('/notifications') }}"; 
                    },

                    error: function(error) {
                   console.log(error);
                    
                  }
                
            });
      });

      $(document).on("click","#dismissall",function(){

          var _token = $('input[name="_token"]').val();
        
          $.ajax({
                    url:"{{ route('mark-all') }}",
                    method:"POST",
                    data:{ _token:_token},
                    success:function(response)
                    {
                      window.location = "{{ url('/notifications') }}"; 
                    },

                    error: function(error) {
                   console.log(error);
                    
                  }
                
            });
      });

    });
  </script>
@endsection