@extends('layouts.app')

@section('title', 'Notifications')

@section('content')
<div class="bg-white rounded-lg shadow-lg p-4 md:p-6">
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 md:gap-0 mb-4 md:mb-6">
        <h1 class="text-2xl md:text-3xl font-bold text-gray-800">Notifications</h1>
        @if (auth()->user()->notifications()->where('is_read', false)->count() > 0)
            <form action="{{ route('notifications.mark-all-as-read') }}" method="POST">
                @csrf
                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-xs md:text-sm w-full sm:w-auto">
                    Mark All as Read
                </button>
            </form>
        @endif
    </div>

    @if ($notifications->count() > 0)
        <div class="space-y-2 md:space-y-4">
            @foreach ($notifications as $notification)
                <div class="border border-gray-300 rounded-lg p-3 md:p-4 @if (!$notification->is_read) bg-blue-50 @endif">
                    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2 md:gap-3">
                        <div class="flex-1 min-w-0">
                            <p class="text-gray-800 text-sm md:text-base @if (!$notification->is_read) font-semibold @endif break-words">
                                {{ $notification->message }}
                            </p>
                            <p class="text-xs md:text-sm text-gray-500 mt-1 md:mt-2">
                                {{ $notification->created_at->diffForHumans() }}
                            </p>
                            @if ($notification->leaveRequest)
                                <a href="{{ route('leave.show', $notification->leaveRequest) }}" class="text-blue-600 hover:underline text-xs md:text-sm mt-1 md:mt-2 inline-block">
                                    View Leave Request →
                                </a>
                            @endif
                        </div>
                        <div class="flex gap-2 flex-shrink-0">
                            @if (!$notification->is_read)
                                <form action="{{ route('notifications.mark-as-read', $notification) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="text-green-600 hover:text-green-800 text-lg md:text-xl" title="Mark as read">
                                        ✓
                                    </button>
                                </form>
                            @endif
                            <form action="{{ route('notifications.destroy', $notification) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 hover:text-red-800 text-lg md:text-xl" title="Delete\" onclick=\"return confirm('Delete this notification?')\">\n                                    ✕
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        @if ($notifications->hasPages())
            <div class="mt-4 md:mt-6 text-sm\">
                {{ $notifications->links() }}
            </div>
        @endif
    @else
        <div class="bg-gray-50 border border-dashed border-gray-300 rounded-lg p-6 md:p-12 text-center\">
            <p class="text-gray-600 text-sm md:text-lg">No notifications yet.</p>
        </div>
    @endif
</div>
@endsection