@extends('layouts.app')

@section('title', 'Notifications')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Notifications</h1>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Your recent notifications and alerts</p>
        </div>
        <div class="flex gap-2">
            <button onclick="markAllRead()" class="btn btn-secondary text-sm">
                Mark All as Read
            </button>
            <button onclick="clearAll()" class="btn btn-secondary text-sm">
                Clear All
            </button>
        </div>
    </div>

    <div class="card p-0 overflow-hidden">
        @forelse($notifications as $notification)
        @php
            $colorClasses = [
                'blue' => 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400',
                'green' => 'bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400',
                'red' => 'bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400',
                'yellow' => 'bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-400',
                'orange' => 'bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-400',
                'purple' => 'bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400',
                'gray' => 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400',
            ];
        @endphp
        <div class="flex items-start gap-4 p-4 border-b border-gray-200 dark:border-gray-700 {{ $notification->isUnread() ? 'bg-blue-50/50 dark:bg-blue-900/10' : '' }}">
            <div class="flex-shrink-0 p-3 rounded-full {{ $colorClasses[$notification->color] ?? $colorClasses['blue'] }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $notification->icon_svg }}"/>
                </svg>
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex items-start justify-between gap-2">
                    <div>
                        <p class="font-medium text-gray-900 dark:text-white">{{ $notification->title }}</p>
                        @if($notification->message)
                        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ $notification->message }}</p>
                        @endif
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">{{ $notification->created_at->diffForHumans() }}</p>
                    </div>
                    <div class="flex items-center gap-2">
                        @if($notification->isUnread())
                        <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                        @endif
                        @if($notification->link)
                        <a href="{{ $notification->link }}" onclick="markRead('{{ $notification->id }}')" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">
                            View
                        </a>
                        @endif
                        <button onclick="deleteNotification('{{ $notification->id }}')" class="text-gray-400 hover:text-red-500">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="p-12 text-center">
            <svg class="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
            </svg>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No notifications</h3>
            <p class="text-gray-500 dark:text-gray-400">You're all caught up!</p>
        </div>
        @endforelse
    </div>

    @if($notifications->hasPages())
    <div class="mt-6">
        {{ $notifications->links() }}
    </div>
    @endif
</div>

<script>
function markRead(id) {
    fetch(`/notifications/${id}/read`, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    });
}

function markAllRead() {
    fetch('{{ route("notifications.mark-all-read") }}', {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    }).then(() => location.reload());
}

function deleteNotification(id) {
    fetch(`/notifications/${id}`, {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    }).then(() => location.reload());
}

function clearAll() {
    if (confirm('Are you sure you want to clear all notifications?')) {
        fetch('{{ route("notifications.clear-all") }}', {
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        }).then(() => location.reload());
    }
}
</script>
@endsection