@extends('layouts.base')

@section('content')
<div class="page-inner">
    

    
    <div class="row">
        
        <div class="col-md-12">
            <div class="card"> 
                <div class="card-body">
                    @foreach (Auth::user()->unreadNotifications as $notification)
                    <div class="d-flex {{$notification->id}}">
                        <div class="avatar">
                            @if($notification->type=="App\Notifications\ApprovalAssign")
                            <span class="avatar-title rounded-circle border border-white bg-info">AA</span>
                            @elseif($notification->type=="App\Notifications\ApprovalRejected")
                            <span class="avatar-title rounded-circle border border-white bg-danger">AR</span>
                            @elseif($notification->type=="App\Notifications\ApprovalGranted")
                            <span class="avatar-title rounded-circle border border-white bg-success">AG</span>
                            @endif
                        </div>
                        <div class="flex-1 ml-3 pt-1">
                            <h6 class="text-uppercase fw-bold mb-1">{{$notification->data['title']}} (<small class="text-muted">{{\Carbon\Carbon::parse($notification->created_at)->format('d/m/Y')}} </small>)</h6>
                            <div class="loader loader-sm" id="{{$notification->id}}" style="display:none"></div>
                                <span class="text-muted">{{$notification->data['message']}} [<a href="{{$notification->data['url']}}" target="_blank">View</a>]</span>
                            </div>
                            
                        <div class="float-right">
                            <a href="#" class="notification_link pull-right" data="{{$notification->id}}" style="text-decoration: none;font-size:1.9em;"><span class="text-danger pl-3"><i class="fa fa-times"></i>  </a>
                        </div>
                        
                    </div>
                    <hr class="{{$notification->id}}">
                    {{-- <div class="separator-dashed {{$notification->id}}"></div> --}}
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('custom_scripts')
    <script type="text/javascript">
        $(document).ready(function(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $(".notification_link").on("click",function(){
                
                var notify_id=$(this).attr("data");  
                var t=$(this);  
                $.ajax({
                    url: "/general/notification-read?t=" + new Date().getTime(),
                    type: 'POST',
                    dataType: "text",
                    data: {id:notify_id},
                    cache: false,
                    async: true,
                    timeout: 5000,
                    beforeSend: function() {
                        $("#"+notify_id).show();    
                    },
                    complete: function() {

                    },
                    
                }).done(function(r){
                    if((r.trim()!="0")){
                        var notify_count=r.trim().split("-")[1];
                        $(".notification-count").text(notify_count);
                        $("#"+notify_id).hide();    
                        t.remove();
                        $("."+notify_id).remove();
                    }
                });

            });
        });
    </script>
@endsection