@extends('front.layouts.app')

@section('content')

<div class="container-fluid detail-page">
    <div class="row">
        <div class="col-md-2">
            @include('front.partials.sidebar')
        </div>

        <div class="col-md-10">
            <div class="container mt-5">
                <div class="col-md-10 mx-auto bg-white rounded shadow-3">
                    <h1 class="font-bold p-4 ps-5" style="font-size: 30px;">Notifications</h1>
                    <div class="col-md-10 mx-auto">
                        <ul class="list-group pb-3" id="notificationList">
                            @foreach ($notifications as $notification)
                                @if (array_key_exists('post_id', $notification->data))  <!-- Check if 'post_id' exists in notification data -->
                                    <a class="text-decoration-none" data-notification-id="{{ $notification->id }}" href="{{ route('showReel', $notification->data['post_id']) }}">
                                @else
                                    <a class="text-decoration-none" data-notification-id="{{ $notification->id }}" href="{{ route('viewUser', $notification->data['follower_id']) }}">
                                @endif
                                    <li class="list-group-item {{ $notification->read_at ? '' : 'list-group-item-primary' }}">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="d-flex align-items-center">
                                                <img src="{{ $notification->data['user_img'] ? asset('assets/'.$notification->data['user_img']) : asset('assets/front/dummy.jpg') }}" class="profile_img" alt="" style="width:50px; border-radius:50%;">
                                                <p class="ms-2 mb-0">{{ $notification->data['message'] }}</p>
                                            </div>
                                            <small>{{ $notification->created_at->diffForHumans() }}</small>
                                        </div>
                                        @if ($notification->type === 'comment' || $notification->type === 'message')
                                        <div class="mt-2">
                                            <p>{{ $notification->data['comment'] ?? $notification->data['content'] }}</p>
                                        </div>
                                        @endif
                                    </li>
                                </a>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    // document.addEventListener('DOMContentLoaded', function () {
    //     fetch('{{ url("notifications/mark-as-read") }}', {
    //         method: 'POST',
    //         headers: {
    //             'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    //             'Content-Type': 'application/json'
    //         }
    //     }).then(() => {
    //         document.getElementById('notification-count').innerText = 0;
    //     });
    // });
    
    $(document).ready(function() {
        // Handle click on individual notification
        $('#notificationList').on('click', 'a', function(e) {
            // e.preventDefault();  // Prevent the default link behavior
    
            const notificationId = $(this).data('notification-id');
            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            const notifyUrl = `{{ url('/notifications/${notificationId}/mark-as-read') }}`;
            // Send AJAX request to mark the specific notification as read
            $.ajax({
                url: notifyUrl,
                type: 'POST',
                data: {
                    _token: csrfToken
                },
                success: function(response) {
                    // If successful, mark the notification as read visually
                    if (response.success) {
                        // Remove the 'list-group-item-primary' class (mark as read)
                        $(this).removeClass('list-group-item-primary');
    
                        // // Optionally, update notification count
                        // let currentCount = parseInt($('#notifCount').text());
                        // $('#notifCount').text(currentCount - 1);  // Decrement count by 1
                    }
                },
                error: function() {
                    alert('Error marking notification as read.');
                }
            });
        });
    });
</script>
@endsection