@extends('layouts.account')
@section('page-title', 'Notifications')

@section('content')
    <style>
        .notification-item {
            background-color: #e9e9e9;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            margin-top: 2rem;
            padding-top: 2rem;
            width: 50%;
            text-align: center;
        }

        .notification-text {
            font-weight: bold;
        }
        .user-name {
            /* Add styles for the user name container */
            display: flex;
            align-items: center;
            padding-left: 40%;
        }

        .user-name svg {
            /* Add styles for the icon */
            width: 20px;
            height: 20px;
            fill: #ff429e;
            margin-right: 5px;

        }
        .receiver-name {
            margin-top: 5px;
            color: #888;
            font-weight: bold;
        }

        .sender-name {
            margin-top: 5px;
            color: #888;
            font-weight: bold;
        }

    </style>
    <main>
        <div class="container">
            <div id="content">
                @foreach($notifications as $notification)
                    <div class="notification-item">
                        <p class="notification-text">Notification: {{ $notification->notification ?? ''}}</p>
                        <div class="user-name">
                            <span class="receiver-name">{{ $notification->receiver_user->name ?? '' }}</span>
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
                                <style>svg{fill:#ff429e}</style>
                                <path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/>
                            </svg>
                            <span class="sender-name">{{ $notification->sender_user->name ?? '' }}</span>
                        </div>
                    </div>
                @endforeach
                    @if ($unreadMessagesCount > 0)
                        <div class="notification-item">
                            <p class="notification-text">You have {{ $unreadMessagesCount }} unread messages.</p>
                        </div>
                    @endif
            </div>
        </div>
    </main>
@endsection
@section('js')
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url:'{{ route("getNotification") }}',
                type:'get',
                // dataType:'json',
                success:function (response) {
                    if(response != 'error'){
                        $('#content').html(response);
                    }
                }
            });
        });

        setInterval(function(){
            $.ajax({
                url:'{{ route("getNotification") }}',
                type:'get',
                // dataType:'json',
                success:function (response) {
                    if(response != 'error'){
                        console.log("data", response);
                        $('#content').html(response);
                    }
                }
            });
        }, 15000);
    </script>
@endsection