@extends(Auth::user()->role === 'store_stuff' ? 'backend.manager.layouts.manager-app' : 'backend.app')

@section('title', 'Notifications')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Notifications</h1>
    </div>
    <div class="ms-auto pageheader-btn">
        @if ($unreadCount > 0)
            <a href="javascript:void(0);" onclick="markAllNotificationsAsRead()" class="btn btn-primary btn-icon text-white me-2">
                <i class="fe fe-check-circle me-1"></i> Mark All as Read
            </a>
        @endif
    </div>
</div>

<div class="card">
    <div class="card-body p-0">
        @forelse ($notifications as $notification)
            <div class="d-flex align-items-center p-3 border-bottom {{ $notification->read() ? '' : 'bg-light' }}" id="notification-{{ $notification->id }}">
                <div class="flex-grow-1 cursor-pointer" onclick="handleNotificationClick('{{ data_get($notification->data, 'link', '#') }}', '{{ $notification->id }}')">
                    <p class="mb-1 text-dark {{ $notification->read() ? '' : 'fw-bold' }}">
                        {{ data_get($notification->data, 'message', data_get($notification->data, 'subject', 'New notification')) }}
                    </p>
                    <small class="text-muted d-block">{{ $notification->created_at?->diffForHumans() }}</small>
                </div>
                @if (!$notification->read())
                    <div class="ms-2">
                        <a href="javascript:void(0);" onclick="event.stopPropagation(); markNotificationAsRead('{{ $notification->id }}')" class="text-muted" title="Mark as read">
                            <i class="fe fe-check-circle fs-16 hover-primary"></i>
                        </a>
                    </div>
                @endif
            </div>
        @empty
            <div class="text-center py-5">
                <i class="fe fe-bell-off fs-40 d-block mb-2 opacity-25 text-muted"></i>
                <p class="text-muted fs-16">No notifications found.</p>
            </div>
        @endforelse
    </div>
    @if ($notifications->hasPages())
        <div class="card-footer">
            {{ $notifications->links() }}
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
    function markNotificationAsRead(id) {
        $.ajax({
            url: "{{ route(Auth::user()->role === 'store_stuff' ? 'store-manager.notifications.markAsRead' : 'notifications.markAsRead', ':id') }}".replace(':id', id),
            type: 'PATCH',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function(resp) {
                if (resp.success) {
                    location.reload();
                }
            }
        });
    }

    function markAllNotificationsAsRead() {
        $.ajax({
            url: "{{ route(Auth::user()->role === 'store_stuff' ? 'store-manager.notifications.markAllAsRead' : 'notifications.markAllAsRead') }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function(resp) {
                if (resp.success) {
                    location.reload();
                }
            }
        });
    }

    function handleNotificationClick(link, id) {
        $.ajax({
            url: "{{ route(Auth::user()->role === 'store_stuff' ? 'store-manager.notifications.markAsRead' : 'notifications.markAsRead', ':id') }}".replace(':id', id),
            type: 'PATCH',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function() {
                window.location.href = link;
            },
            error: function() {
                window.location.href = link;
            }
        });
    }
</script>
@endpush