@extends('layouts.demo10.base')

@section('content')
<div class="container mx-auto p-5">
    <h2 class="text-xl font-semibold mb-4">All Notifications</h2>

    @forelse($notifications as $notification)
    @php
        $isRead = !is_null($notification->read_at);
        $url = $notification->data['url'] ?? '#';
        $separator = Str::contains($url, '?') ? '&' : '?';
        $viewUrl = $url . $separator . 'notification_id=' . $notification->id;
        $canOpenNotification = $url !== '#';
        $itemClasses = $isRead
            ? 'bg-white hover:bg-gray-50'
            : 'bg-blue-50 border-blue-100';
    @endphp

    @if($canOpenNotification)
    <a href="{{ $viewUrl }}" class="mb-3 flex items-center justify-between gap-3 rounded-xl border p-4 transition {{ $itemClasses }}">
    @else
    <button type="button"
            class="mark-as-read-item mb-3 flex w-full items-center justify-between gap-3 rounded-xl border p-4 text-left transition {{ $itemClasses }}"
            data-id="{{ $notification->id }}">
    @endif
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-full overflow-hidden">
                <img class="w-full h-full object-cover" alt="avatar"
                    src="{{ $notification->data['user_avatar'] ?? asset('assets/media/avatars/gray/5.png') }}">
            </div>
            <div class="flex flex-col gap-1">
                <span class="text-sm font-semibold text-gray-800">
                    {{ $notification->data['message'] }}
                </span>
                @if(isset($notification->data['initiator_name']) && auth()->id() != ($notification->data['initiator_id'] ?? 0))
                <span class="text-sm font-semibold text-gray-800">
                    Initiated By: <span style="color: #87AC58;">{{ $notification->data['initiator_name'] }}</span>
                </span>
                @endif
                <span class="text-xs text-gray-500">
                    Submission Id: {{ $notification->id }}
                </span>
                <span class="text-xs text-gray-400">
                    {{ $notification->created_at->diffForHumans() }}
                </span>
            </div>
        </div>

        @if(isset($notification->data['status']))
            <div class="shrink-0">
                <span class="kt-badge kt-badge-sm kt-badge-outline {{ $notification->data['status'] == 'approved' ? 'kt-badge-success' : 'kt-badge-danger' }}">
                    {{ ucfirst($notification->data['status']) }}
                </span>
            </div>
        @endif

    @if($canOpenNotification)
    </a>
    @else
    </button>
    @endif
    @empty
    <div class="px-5 text-sm text-muted-foreground">
        No notifications.
    </div>
    @endforelse

    <div class="grid grid-cols-1 p-5 gap-2.5">
        <a href="/" class="kt-btn kt-btn-outline text-center">
            Back to Dashboard
        </a>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
    $('.mark-as-read-item').click(function(e) {
        e.preventDefault();
        var btn = $(this);
        var notificationId = btn.data('id');

        $.ajax({
            url: '/notifications/read/' + notificationId,
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                btn.removeClass('bg-blue-50 border-blue-100');
                btn.addClass('bg-white hover:bg-gray-50');
            },
            error: function(err) {
                alert('Something went wrong. Try again.');
            }
        });
    });
});
</script>
@endsection