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

@section('content')

<div class="flex flex-col min-h-screen bg-[#181a20] text-gray-200">

    <!-- Top Bar -->
    <div class="flex items-center px-6 py-4 border-b border-gray-700 bg-[#181a20]">
        <a href="{{ route('user.notifications.index') }}" class="w-8 h-8 flex items-center justify-center">
            <svg width="28" height="28" fill="#EAECEF" viewBox="0 0 20 20">
                <path d="M7.975 15.683a.618.618 0 0 1-.442-.183l-5.058-5.058a.629.629 0 0 1 0-.884L7.533 4.5a.629.629 0 0 1 .884 0 .629.629 0 0 1 0 .883L3.8 10l4.617 4.617a.629.629 0 0 1 0 .883.605.605 0 0 1-.442.183z"/>
                <path d="M17.083 10.625H3.058A.63.63 0 0 1 2.433 10a.63.63 0 0 1 .625-.625h14.025a.63.63 0 0 1 .625.625.63.63 0 0 1-.625.625z"/>
            </svg>
        </a>

        <h1 class="text-xl font-semibold ml-4">Notification</h1>
    </div>

    <!-- Main Content -->
    <div class="flex-1 px-6">

        <!-- Notification Header -->
        <div class="flex items-center justify-between bg-[#1f2128] border border-gray-700 p-4 rounded-lg mt-8 shadow-md">

            <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-500" viewBox="0 0 24 24" fill="#f36a3d">
                    <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.11z"/>
                    <path d="M12.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>

                <span class="text-orange-500 font-semibold text-sm">
                    <a href="{{ route('user.notifications') }}">Notifications</a>
                </span>
            </div>

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

        <!-- Notification Details -->
        <div class="bg-[#1f2128] border border-gray-700 rounded-lg mt-6 p-6 shadow-xl">

            <h2 class="text-lg font-semibold mb-3">
                {{ data_get($notification->data , 'title') }}
            </h2>

            <p class="text-sm font-semibold text-gray-300 mb-3">
                {{ data_get($notification->data , 'data') }}
            </p>

            <div class="bg-black bg-opacity-40 p-4 rounded-md text-sm whitespace-pre-wrap leading-relaxed">
                {{ data_get($notification->data , 'message') }}
            </div>

        </div>

        <div class="h-16"></div>
    </div>

</div>

@endsection