@extends('layouts.admin')

@section('title', 'Notifications')

@section('content')
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3>Notifications</h3>
        <button id="markAllReadBtn" class="btn btn-sm btn-success">Mark All as Read</button>
    </div>

    <div id="notificationsList">
        @forelse ($notifications as $notification)
            <div class="card mb-2 notification-item {{ $notification->status == '1' ? 'bg-light' : 'border-primary' }}" data-id="{{ $notification->id }}">
                <div class="card-body">
                    <strong>{{ ucfirst($notification->notification_type) }}</strong>
                    <p class="mb-1">{{ $notification->description }}</p>
                    <small class="text-muted">{{ $notification->created_at->diffForHumans() }}</small>

                  @if($notification->status == 0)
    <button class="btn btn-sm btn-outline-primary float-end markReadBtn">Mark as Read</button>
@endif
                </div>
            </div>
        @empty
            <p>No notifications found.</p>
        @endforelse
    </div>

    <div class="mt-3">
        {{ $notifications->links() }}
    </div>
</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){

    // Mark single notification as read
  $(document).on('click', '.markReadBtn', function(e) {
    e.preventDefault();

    let card = $(this).closest('.notification-item');
    let id = card.data('id');

    $.ajax({
        url: "{{ url('admin/notifications') }}/" + id + "/read",
        method: "POST",
        data: {_token: "{{ csrf_token() }}"},
        success: function(response) {
            if(response.success) {
                // Update UI
                card.removeClass('border-primary').addClass('bg-light');
                card.find('.markReadBtn').remove();

                // Show SweetAlert
                Swal.fire({
                    icon: 'success',
                    title: 'Notification Updated',
                    text: 'This notification has been marked as read.',
                    confirmButtonText: 'OK'
                });
            } else {
                // Optional: handle failure
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to update notification.',
                    confirmButtonText: 'OK'
                });
            }
        },
        error: function() {
            // Optional: handle AJAX error
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Something went wrong!',
                confirmButtonText: 'OK'
            });
        }
    });
});

   $('#markAllReadBtn').click(function(e){
    e.preventDefault();

    $.ajax({
        url: "{{ route('admin.notifications.readAll') }}",
        method: "POST",
        data: {_token: "{{ csrf_token() }}"},
        success: function(response) {
            if(response.success) {
                // Update UI
                $('.notification-item').removeClass('border-primary').addClass('bg-light');
                $('.markReadBtn').remove();

                // Show SweetAlert success
                Swal.fire({
                    icon: 'success',
                    title: 'All Notifications Updated',
                    text: 'All notifications have been marked as read.',
                    confirmButtonText: 'OK'
                });
            } else {
                // Optional: handle failure
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to update notifications.',
                    confirmButtonText: 'OK'
                });
            }
        },
        error: function() {
            // Optional: handle AJAX error
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Something went wrong!',
                confirmButtonText: 'OK'
            });
        }
    });
});


});
</script>
@endpush