@extends('layouts.app')
@section('title', 'Notifications')
@section('content')

<div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
    <div>
        <h1 class="h3 mb-1">Notifications</h1>
        <p class="text-muted mb-0">
            {{ $unreadCount > 0 ? $unreadCount . ' unread' : "You're all caught up." }}
        </p>
    </div>
    @if($unreadCount > 0)
        <form method="POST" action="{{ route('notifications.read-all') }}">
            @csrf @method('PATCH')
            <button type="submit" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-check-all me-2"></i>Mark all as read
            </button>
        </form>
    @endif
</div>

<div class="card border-0">
    <div class="card-body p-0">
        @if($notifications->isEmpty())
            <div class="text-center py-5">
                <i class="bi bi-bell-slash" style="font-size:2rem;color:var(--soil-brown)"></i>
                <p class="text-muted mt-3 mb-0">
                    No notifications yet. We'll let you know when something about your crop plans changes.
                </p>
            </div>
        @else
            @foreach($notifications as $notification)
            @php
                $iconMap = [
                    'info'     => ['icon' => 'bi-info-circle', 'color' => '#3d6b8c'],
                    'warning'  => ['icon' => 'bi-exclamation-triangle', 'color' => '#c9a227'],
                    'critical' => ['icon' => 'bi-exclamation-octagon', 'color' => '#a13d2e'],
                ];
                $sev = $iconMap[$notification->severity] ?? $iconMap['info'];
            @endphp
            <div class="d-flex gap-3 p-3 border-bottom {{ !$notification->is_read ? 'bg-warning bg-opacity-10' : '' }}">
                <i class="bi {{ $sev['icon'] }} flex-shrink-0 mt-1"
                   style="color:{{ $sev['color'] }};font-size:1.1rem"></i>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between gap-2">
                        <strong>{{ $notification->title }}</strong>
                        <span class="text-muted small flex-shrink-0">
                            {{ $notification->created_at->diffForHumans() }}
                        </span>
                    </div>
                    <p class="text-muted mb-1">{{ $notification->message }}</p>
                    <div class="d-flex gap-2">
                        @if($notification->crop_plan_id)
                            <a href="{{ route('crop-plans.show', $notification->crop_plan_id) }}"
                               class="btn btn-sm btn-outline-secondary">
                                <i class="bi bi-arrow-right me-1"></i>View Plan
                            </a>
                        @endif
                        @if(!$notification->is_read)
                            <form method="POST"
                                  action="{{ route('notifications.read', $notification) }}">
                                @csrf @method('PATCH')
                                <button type="submit" class="btn btn-sm btn-link p-0">
                                    Mark as read
                                </button>
                            </form>
                        @else
                            <span class="text-muted small align-self-center">
                                <i class="bi bi-check2 me-1"></i>Read
                            </span>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach

            <div class="p-3">
                {{ $notifications->links() }}
            </div>
        @endif
    </div>
</div>

@endsection