@extends('layouts.seller')

@section('title', 'All Notifications')

@section('content')
<div class="page-header">
    <div>
        <h3 class="page-title">All Notifications</h3>
        <p class="text-muted mb-0">View all your notifications</p>
    </div>
    <button class="btn btn-light" onclick="markAllAsRead()">
        <i class="bi bi-check-all me-1"></i> Mark All Read
    </button>
</div>

<div class="card">
    <div class="card-body p-0">
        @forelse($notifications as $notification)
            <div class="notification-item d-flex align-items-start p-4 border-bottom {{ !$notification->is_read ? 'bg-light' : '' }}">
                <div class="notification-icon rounded-circle bg-{{ $notification->icon_color }}-subtle text-{{ $notification->icon_color }} p-3 me-3">
                    <i class="bi {{ $notification->icon_class }} fs-5"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <h6 class="mb-1 fw-bold">{{ $notification->title }}</h6>
                        <small class="text-muted">{{ $notification->created_at->diffForHumans() }}</small>
                    </div>
                    <p class="mb-2 text-muted">{{ $notification->body }}</p>
                    <div class="d-flex gap-2">
                        @if($notification->action_url)
                            <a href="{{ route('notifications.read', $notification) }}" class="btn btn-sm btn-primary">
                                View <i class="bi bi-arrow-right ms-1"></i>
                            </a>
                        @endif
                        @if(!$notification->is_read)
                            <form action="{{ route('notifications.read', $notification) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-outline-secondary">Mark Read</button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <div class="text-center py-5 text-muted">
                <i class="bi bi-bell-slash fs-1 d-block mb-3 opacity-25"></i>
                <h5>No Notifications</h5>
                <p class="mb-0">You're all caught up!</p>
            </div>
        @endforelse
    </div>
    
    @if($notifications->hasPages())
        <div class="card-footer bg-white">
            {{ $notifications->links() }}
        </div>
    @endif
</div>

<script>
function markAllAsRead() {
    fetch('{{ route("notifications.mark-all-read") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    });
}
</script>
@endsection