@extends('template.basic.layouts.master') 


@section('content')
<div class="flex flex-col flex-grow  min-h-screen">
    <div class="container mx-auto w-full lg:w-5/6 px-4 py-6">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
                <div class="flex-1">
                    <h3 class="text-lg">
                        <a href="{{ route('user.settings.index') }}"
                            class="inline-flex items-center  text-white hover:text-white">
                            <i class="bi bi-arrow-left mr-2"></i> Back
                        </a>
                    </h3>
                </div>
                <div class="flex-1 text-center text-xl font-normal text-white">Notifications</div>
                <div class="flex-1"></div>
            </div>

    <!-- Notification Container -->
    <div class="flex-1 px-6 py-6 space-y-6">

        <!-- Notification Card -->
        <div class=" rounded-xl shadow-lg p-6 space-y-6">
            <!-- Header with Icon and Unread Count -->
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="w-6 h-6 text-orange-500">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12.02 20.53c-2.33 0-4.66-.37-6.87-1.11-.84-.29-1.48-.88-1.76-1.65-.29-.77-.19-1.62.27-2.38l1.15-1.91c.24-.4.46-1.2.46-1.67V8.92c0-3.72 3.03-6.75 6.75-6.75s6.75 3.03 6.75 6.75v2.89c0 .46.22 1.27.46 1.68l1.14 1.9c.43.72.51 1.59.22 2.38a2.72 2.72 0 0 1-1.71 1.65c-2.2.74-4.53 1.11-6.86 1.11zm0-16.86c-2.89 0-5.25 2.35-5.25 5.25v2.89c0 .73-.3 1.81-.67 2.44l-1.15 1.91c-.22.37-.28.76-.15 1.09.12.34.42.6.83.74a20 20 0 0 0 12.79 0c.36-.12.64-.39.77-.75s.1-.75-.1-1.08l-1.15-1.91c-.38-.65-.67-1.72-.67-2.45V8.92c0-2.9-2.35-5.25-5.25-5.25z"/>
                            <path d="M13.88 3.94c-.07 0-.14-.01-.21-.03-.29-.08-.57-.14-.84-.18-.85-.11-1.67-.05-2.44.18-.28.09-.58 0-.77-.21a.742.742 0 0 1-.14-.78 2.724 2.724 0 0 1 2.55-1.74c1.14 0 2.14.68 2.55 1.74.1.27.05.57-.14.78-.15.16-.36.24-.56.24zM12.02 22.81c-.99 0-1.95-.4-2.65-1.1-.7-.7-1.1-1.66-1.1-2.65h1.5c0 .59.24 1.17.66 1.59.42.42 1 .66 1.59.66 1.24 0 2.25-1.01 2.25-2.25h1.5c0 2.07-1.68 3.75-3.75 3.75z"/>
                        </svg>
                    </div>
                    <span class="text-orange-500 font-semibold text-sm uppercase tracking-wide">Notifications</span>
                </div>

                <div class="bg-gray-700 px-3 py-1 rounded-full text-gray-400 text-xs font-medium">
                    {{$unreadCount}}
                </div>
            </div>

            <!-- Notification List -->
            <div class="space-y-4">
                @forelse($notifications as $notify)
                    <a href="{{ route('user.notify.read', hash_of($notify->id)) }}" class="block">
                        <div class="flex items-center p-4 bg-gray-700 rounded-xl hover:bg-gray-600 transition">
                            <div class="w-6 h-6 text-gray-300">
                                <svg viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M12.07 21.98c-1.41 0-2.83-.54-3.9-1.61l-4.53-4.53a5.548 5.548 0 0 1-1.61-4.17l.24-5.01c.11-2.39 2-4.28 4.4-4.4l5-.24c1.56-.07 3.07.51 4.17 1.61l4.53 4.53a5.535 5.535 0 0 1 0 7.81l-4.39 4.39a5.504 5.504 0 0 1-3.91 1.62z"/>
                                    <path d="M9.5 12.75c-1.79 0-3.25-1.46-3.25-3.25S7.71 6.25 9.5 6.25s3.25 1.46 3.25 3.25-1.46 3.25-3.25 3.25zm0-5c-.96 0-1.75.79-1.75 1.75s.79 1.75 1.75 1.75 1.75-.79 1.75-1.75-.79-1.75-1.75-1.75zm3.5 10c-.19 0-.38-.07-.53-.22a.754.754 0 0 1 0-1.06l4-4c.29-.29.77-.29 1.06 0 .29.29.29.77 0 1.06l-4 4c-.15.15-.34.22-.53.22z"/>
                                </svg>
                            </div>
                            <div class="ml-3 flex-1">
                                <p class="text-gray-100 text-sm font-normal">{{ data_get($notify->data,'data') }}</p>
                                <p class="text-gray-400 text-xs mt-1">{{ calculate_relative_time($notify->created_at) }}</p>
                            </div>
                        </div>
                    </a>
                @empty
<div class="flex flex-col items-center justify-center py-14 px-6 text-center">
    <!-- Illustration -->
    <div class="w-40 h-40 mb-6 opacity-80">
        <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="100" cy="100" r="90" fill="#1f2937"/>
            <path d="M60 85h80v10H60zM60 110h50v10H60z" fill="#374151"/>
            <circle cx="75" cy="60" r="12" fill="#4b5563"/>
            <circle cx="125" cy="60" r="12" fill="#4b5563"/>
        </svg>
    </div>

    <h3 class="text-gray-200 text-lg font-semibold">No Notifications Yet</h3>
    <p class="text-gray-400 mt-2 max-w-xs">
        You’re all caught up! New alerts and updates will appear here when available.
    </p>

    <!-- Optional refresh button -->
    <button 
        onclick="location.reload()" 
        class="mt-6 px-5 py-2.5 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm text-gray-200 transition"
    >
        Refresh
    </button>
</div>

                @endforelse
            </div>

            <!-- Pagination -->
            <div class="mt-6">
                {{$notifications->links()}}
            </div>
        </div>
    </div>
    </div>
</div>
@endsection