@extends('user.layouts.app')

@section('title', 'الإشعارات')

@php
    $notificationsStyle = $siteConfig['ui']['notifications_style'] ?? 'default';
@endphp

@section('css')
    @if($notificationsStyle === 'minimal')
        <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/notifications-minimal.css') }}">
    @else
        <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/notifications.css') }}">
    @endif
    <style>
        [x-cloak] { display: none !important; }
    </style>
@endsection

@section('content')
    @if($notificationsStyle === 'minimal')
        {{-- Minimal Style (Mega/Kaiali) --}}
        @include('user.notifications.partials._minimal', [
            'notifications' => $notifications,
            'unreadCount' => $unreadCount,
            'requiredNotifications' => $requiredNotifications
        ])
    @else
        {{-- Default Style --}}
        @include('user.notifications.partials._default', [
            'notifications' => $notifications,
            'unreadCount' => $unreadCount,
            'requiredNotifications' => $requiredNotifications
        ])
    @endif
@endsection

@section('js')
<script>
function notificationsManager() {
    return {
        loading: false,
        filter: 'all',
        unreadCount: {{ $unreadCount }},
        readNotifications: new Set(),

        init() {
            @foreach($notifications as $notification)
                @if($notification->is_read)
                    this.readNotifications.add({{ $notification->id }});
                @endif
            @endforeach
        },

        async markAsRead(notificationId) {
            if (this.loading || this.readNotifications.has(notificationId)) return;

            this.loading = true;

            try {
                const response = await fetch(`{{ url('/user/notifications') }}/${notificationId}/mark-as-read`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                const data = await response.json();

                if (!data.error) {
                    this.readNotifications.add(notificationId);
                    this.unreadCount = Math.max(0, this.unreadCount - 1);
                    this.showToast('success', data.message || 'تم تمييز الإشعار كمقروء');
                    this.updateNavBadge();
                    this.updateItemUI(notificationId);
                } else {
                    throw new Error(data.message);
                }
            } catch (error) {
                console.error('Error:', error);
                this.showToast('error', 'حدث خطأ في تمييز الإشعار');
            } finally {
                this.loading = false;
            }
        },

        async markAllAsRead() {
            if (this.loading || this.unreadCount === 0) return;

            this.loading = true;

            try {
                const response = await fetch('{{ route('user.notifications.mark-all-as-read') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                const data = await response.json();

                if (!data.error) {
                    @foreach($notifications as $notification)
                        this.readNotifications.add({{ $notification->id }});
                    @endforeach

                    this.unreadCount = 0;
                    this.showToast('success', data.message || 'تم تمييز جميع الإشعارات كمقروءة');
                    this.updateNavBadge();
                    this.updateAllItemsUI();
                } else {
                    throw new Error(data.message);
                }
            } catch (error) {
                console.error('Error:', error);
                this.showToast('error', 'حدث خطأ في تمييز الإشعارات');
            } finally {
                this.loading = false;
            }
        },

        updateItemUI(id) {
            const item = document.querySelector(`[data-id="${id}"]`);
            if (item) {
                item.classList.remove('unread');
                item.classList.add('read');
                item.setAttribute('data-unread', 'false');
            }
        },

        updateAllItemsUI() {
            document.querySelectorAll('.notification-item.unread, .notif-item.unread').forEach(item => {
                item.classList.remove('unread');
                item.classList.add('read');
                item.setAttribute('data-unread', 'false');
            });
        },

        updateNavBadge() {
            const badges = document.querySelectorAll('.notification-badge');
            badges.forEach(badge => {
                badge.textContent = this.unreadCount;
                badge.style.display = this.unreadCount > 0 ? '' : 'none';
            });
        },

        showToast(type, message) {
            if (typeof Swal !== 'undefined') {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true
                });

                Toast.fire({
                    icon: type,
                    title: message
                });
            }
        }
    }
}
</script>
@endsection