@extends('frontend.layouts.UserMain')

<title>{{ translate('Humsafar - Events') }}</title>


@section('content')

<section class="flex-1 w-full relative">

    <div class="flex items-start w-full">
        <div class="flex-1 bg-white">
            @include('frontend.user.layouts.header')

            <div class="w-full px-6 pb-[60px] xl:pb-32">
                <div style="z-index: 999;" id="notification-container" class="fixed top-25 right-5 space-y-4 z-50"></div>
                @foreach($pages as $page)
                    <div class="text-black mt-5">
                        <h3 class="text-[22px] sm:text-2xl lg:text-3xl xl:text-[36px] font-semibold mb-2">{{ $page->title }}</h3>
                        <p class="text-xs md:text-sm xl:mt-0 lg:text-base font-normal">{!! $page->content !!}</p>
                    </div>
                @endforeach
            </div>

        </div>
    </div>


</section>
@endsection


@push('scripts')

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    

<script src="https://cdn.ably.com/lib/ably.min-1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        const currentUserId = {{ auth()->id() }};
        const notificationContainer = document.getElementById('notification-container');

        // Initialize Ably
        const ably = new Ably.Realtime('{{ env('ABLY_KEY') }}');
        const notificationChannel = ably.channels.get(`notifications.${currentUserId}`);

        console.log(`Subscribed to Ably channel: notifications.${currentUserId}`);

        // Function to format the time based on the user's local timezone
        function formatTime(createdAt) {
            const createdTime = new Date(createdAt);
            return createdTime.toLocaleTimeString([], {
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false // Removes AM/PM
            });
        }

        // Function to get relative time (like "x minutes ago")
        function getTimeAgo(createdAt) {
          
            const createdTime = new Date(createdAt);
            const now = new Date();
            const secondsAgo = Math.floor((now - createdTime) / 1000);

            if (secondsAgo < 60) {
                return `${secondsAgo} seconds ago`;
            } else if (secondsAgo < 3600) {
                const minutesAgo = Math.floor(secondsAgo / 60);
                return `${minutesAgo} minutes ago`;
            } else if (secondsAgo < 86400) {
                const hoursAgo = Math.floor(secondsAgo / 3600);
                return `${hoursAgo} hours ago`;
            } else {
                const daysAgo = Math.floor(secondsAgo / 86400);
                return `${daysAgo} days ago`;
            }
        }

        // Function to create notification element
        function createNotificationElement(notification) {
            const formattedTime = formatTime(notification.created_at); // Call formatTime
            const timeAgo = getTimeAgo(notification.created_at); // Call getTimeAgo

            const notificationElement = document.createElement('div');
            notificationElement.classList.add('notification-item');

            const closeButton = document.createElement('span');
            closeButton.textContent = '×';
            closeButton.classList.add('close-btn');
            closeButton.onclick = function () {
                markAsRead(notification.id);
                notificationElement.remove();
            };

            notificationElement.innerHTML = `
                <p style="color: white; font-size:14px; padding-right:20px;">${notification.message}</p>
                <span style="color: white; font-size: 0.8em;">
                    ${formattedTime} (${timeAgo})
                </span>
            `;

            notificationElement.appendChild(closeButton);
            return notificationElement;
        }

        // Mark notification as read
        function markAsRead(notificationId) {
            axios.patch(`{{ url('/notifications/') }}/${notificationId}/read`)
                .then(response => {
                    console.log('Notification marked as read:', response.data);
                })
                .catch(error => console.error("Error marking notification as read:", error));
        }

        // Handle new notifications from Ably channel
        notificationChannel.subscribe('new-notification', (message) => {
            // Convert the created_at time to a JavaScript Date object
            const createdAt = new Date(message.data.created_at);

            // Format the created_at time based on the user's local timezone
            const formattedTime = createdAt.toLocaleString([], {
                weekday: 'short',
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                hour: 'numeric',
                minute: 'numeric',
                second: 'numeric',
                hour12: true // This will show AM/PM if you need it
            });

            console.log("New notification received:", message.data);

            const newNotification = createNotificationElement(message.data);
            notificationContainer.appendChild(newNotification);

            setTimeout(() => {
                markAsRead(message.data.id);  // Mark notification as read
                newNotification.remove();      // Remove notification element
            }, 10000);  // 10 seconds
        });

        // Fetch existing notifications from API
        axios.get('{{ route('notifications.index') }}')
            .then(response => {
                const notifications = response.data.notifications;

                if (!Array.isArray(notifications)) {
                    throw new Error("Notifications data is not an array");
                }

                notifications.forEach(notification => {
                    if (notification && notification.id) {
                        const existingNotification = createNotificationElement(notification);
                        notificationContainer.appendChild(existingNotification);

                        // Automatically mark as read and close after 10 seconds
                        setTimeout(() => {
                            markAsRead(notification.id);  // Mark notification as read
                            existingNotification.remove(); // Remove notification element
                        }, 10000);  // 10 seconds
                    } else {
                        console.error("Invalid notification data", notification);
                    }
                });
            })
            .catch(error => {
                console.error("Error fetching notifications:", error);
            });
    });
</script>




<style>
    @media (max-width: 768px) {
    .text-black.mt-5 {
        margin-top: 90px !important;
    }
    }

    .notification-item {
    background-color: #3576AF;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    position: relative;
}
.close-btn {
    position: absolute;
    top: -6px;
    font-size: 21px;
    right: 3px;
    cursor: pointer;
    color: rgb(245 245 245);
}
</style>
@endpush