@extends('page.user-dashboard.app')

@section('content_dash')
<div class="space-y-6 p-4 rounded-md md:p-6 bg-white">

    <!-- Page Header -->
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800">{{__('dashboard.notification.title')}}</h1>
        <p class="text-gray-600">{{__('dashboard.notification.subtitle')}}</p>
    </div>

    <!-- Notifications List -->
    <div class=" ">
        <div class=" flex flex-col gap-5 py-2">
            @forelse ($notifications as $notification)
                <div class="p-5 hover:bg-gray-50 hover:shadow-sm transition duration-200 bg-white shadow-md rounded-xl border border-slate-100">
                    <div class="flex items-start justify-between gap-4 sm:flex-row flex-col">
                        <!-- Icon + Content -->
                        <div class="flex items-start gap-3">
                            <!-- Same Icon for all -->
                            <div class="w-12 h-12 flex items-center justify-center bg-gray-200/60 text-gray-600 rounded-full flex-shrink-0 ">
                                <svg width="20" height="16" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M23.208 2.35425C23.1103 1.7009 22.7817 1.10419 22.2818 0.672288C21.7819 0.240385 21.1439 0.00187683 20.4832 0H3.51674C2.85613 0.00187683 2.21805 0.240385 1.71818 0.672288C1.2183 1.10419 0.889719 1.7009 0.791992 2.35425L12 9.60675L23.208 2.35425Z" fill="currentColor"/>
                                    <path d="M12.4072 11.13C12.2859 11.2085 12.1445 11.2502 12 11.2502C11.8555 11.2502 11.7141 11.2085 11.5927 11.13L0.75 4.11452V15.2333C0.750794 15.9668 1.04255 16.6701 1.56124 17.1888C2.07993 17.7075 2.78321 17.9992 3.51675 18H20.4832C21.2168 17.9992 21.9201 17.7075 22.4388 17.1888C22.9575 16.6701 23.2492 15.9668 23.25 15.2333V4.11377L12.4072 11.13Z" fill="currentColor"/>
                                </svg>
                            </div>

                            <!-- Text Content -->
                            <div>
                                <h3 class="font-semibold text-gray-900 text-base md:text-lg line-clamp-1">
                                    {{ $notification->title }}
                                </h3>
                                <div class="text-sm line-clamp-2 text-gray-600 mt-1">
                                    {!! $notification->message !!}
                                </div>
                              <span class="inline-flex items-center text-[13px] text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full mt-2 shadow-sm">
    <!-- Clock SVG -->
    <svg xmlns="http://www.w3.org/2000/svg" 
         class="w-3.5 h-3.5 mr-1 text-blue-500" 
         fill="none" 
         viewBox="0 0 24 24" 
         stroke="currentColor" 
         stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" 
              d="M12 6v6l4 2m6-2a10 10 0 11-20 0 10 10 0 0120 0z" />
    </svg>
    {{ $notification->created_at->diffForHumans() }}
</span>

                            </div>
                        </div>

                        <!-- View Details Button -->
                        <a href="{{route('dashboard.notification.view',$notification->id)}}" 
                           class="px-3 py-2 text-sm font-medium text-white bg-primary hover:bg-primary-dark rounded-lg shadow-sm transition text-center sm:w-fit w-full">
                            Details
                        </a>
                    </div>
                </div>
            @empty
             <div class="flex flex-col items-center justify-center p-12 text-center">
            <img src="{{asset('assets/images/no-order.png')}}" class="w-[100px] mb-3" alt="">
              No notifications available
              
            </a>
        </div>
            @endforelse
        </div>
    </div>
</div>
@endsection