@extends('layouts.customer')

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Notifications</h1>
        @if(isset($notifications) && $notifications->count())
        <form method="POST" action="{{ route('customer.notifications.markAllRead') }}">
            @csrf
            @method('PATCH')
            <button type="submit" class="text-sm text-[#0D6B58] hover:underline font-medium">Mark All as Read</button>
        </form>
        @endif
    </div>

    @if(isset($notifications) && $notifications->count())
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 divide-y divide-gray-50">
        @foreach($notifications as $notification)
        <div class="px-6 py-4 hover:bg-gray-50 transition {{ $notification->read_at ? '' : 'bg-[#0D6B58]/5' }}">
            <div class="flex items-start space-x-4">
                <div class="w-10 h-10 rounded-full flex-shrink-0 flex items-center justify-center
                    @if(($notification->data['type'] ?? '') === 'transaction') bg-emerald-100
                    @elseif(($notification->data['type'] ?? '') === 'security') bg-rose-100
                    @elseif(($notification->data['type'] ?? '') === 'account') bg-blue-100
                    @else bg-gray-100 @endif">
                    @if(($notification->data['type'] ?? '') === 'transaction')
                    <svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
                    </svg>
                    @elseif(($notification->data['type'] ?? '') === 'security')
                    <svg class="w-5 h-5 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                    </svg>
                    @elseif(($notification->data['type'] ?? '') === 'account')
                    <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                    </svg>
                    @else
                    <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                    </svg>
                    @endif
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between">
                        <p class="text-sm font-semibold text-gray-900">{{ $notification->data['title'] ?? 'Notification' }}</p>
                        <span class="text-xs text-gray-400 flex-shrink-0 ml-2">{{ $notification->created_at->diffForHumans() }}</span>
                    </div>
                    <p class="text-sm text-gray-500 mt-1">{{ $notification->data['message'] ?? '' }}</p>
                    @if(!$notification->read_at)
                    <form method="POST" action="{{ route('customer.notifications.markRead', $notification->id) }}" class="mt-2">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="text-xs text-[#0D6B58] hover:underline">Mark as read</button>
                    </form>
                    @endif
                </div>
            </div>
        </div>
        @endforeach
    </div>

    @if($notifications->hasPages())
    <div class="mt-6">
        {{ $notifications->links() }}
    </div>
    @endif
    @else
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-12 text-center">
        <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
        </svg>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">No Notifications</h3>
        <p class="text-gray-500 text-sm">You're all caught up! New notifications will appear here.</p>
    </div>
    @endif

</div>
@endsection