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

@section('content_dash')

<div class="space-y-6">

    <!-- Page Header -->
    <div class="flex items-center gap-3 mb-6">
        <!-- Back Button -->
        <a href="{{ route('dashboard.notification') }}" 
           class="p-2 bg-gray-100 border border-slate-200 rounded-full hover:bg-gray-200 transition">
            <svg xmlns="http://www.w3.org/2000/svg" 
                 class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                      d="M15 19l-7-7 7-7" />
            </svg>
        </a>
        <h1 class="text-2xl font-bold text-gray-800">{{__('dashboard.notification.details_title')}}</h1>
    </div>

    <!-- Notification Card -->
    <div class="bg-white border border-slate-100 rounded-lg shadow-md p-6 max-w-3xl mx-auto transition">
        
        <!-- Header -->
        <div class="flex items-center gap-4">
            <!-- Icon -->
            <div class="w-12 h-12 flex items-center justify-center bg-primary/10 text-primary border border-primary/15 rounded-full flex-shrink-0">
                 <svg width="22" height="20" 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>

            <!-- Title & Time -->
            <div class="flex-1">
                <h2 class="text-xl font-semibold text-gray-900">{{ $notification->title }}</h2>
                <span class="inline-flex items-center text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full mt-1">
                    <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">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                              d="M12 6v6l4 2m6-2a10 10 0 11-20 0 10 10 0 0120 0z" />
                    </svg>
                    {{ $notification->created_at->diffForHumans() }}
                </span>
            </div>
        </div>

        <!-- Message Content -->
        <div class="mt-6 text-gray-700 space-y-4 text-sm md:text-base leading-relaxed">
            {!! $notification->message !!}
        </div>

        <!-- Footer Actions -->
        <div class="mt-6 flex flex-wrap justify-end gap-3">
            <a href="{{ route('dashboard.notification') }}" 
               class="px-5 py-2 text-sm font-medium text-primary border border-primary rounded-md hover:bg-primary/5 transition">
                Back to Notifications
            </a>
        
        </div>
    </div>

</div>
@endsection