@extends('layouts.v2.frontend-user-backend')


@section('content')
<style>
    @media (max-width: 768px) {
        .notifications-form {
            height: 380px;
            overflow-y: auto;
        }
    }
</style>  
<div class="multiple-form delivery-details">
    <h4>Notifications</h4>
    <p></p> 


      <div class="notifications-form mt-4">

            @forelse ($notifications as $notification)
                @if (!$notification->read_at)
                    <!-- Unread Notification -->
                    <div class="alert alert-success d-flex align-items-center justify-content-between border-0" role="alert">
                        <div>
                            <h6 class="mb-1">{{ $notification->data['title'] }}</h6>
                            <p class="mb-0">{{ $notification->data['content'] }}</p>
                        </div>
                        <form method="POST" action="{{ route('notifications.read', $notification->id) }}">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-outline-read">Read</button>
                        </form>
                    </div>
                @else
                    <!-- Read Notification -->
                    <div class="alert alert-secondary  d-flex align-items-center justify-content-between" role="alert">
                        <div>
                            <h6 class="mb-1">{{ $notification->data['title'] }}</h6>
                            <p class="mb-0">{{ $notification->data['content'] }}</p>
                        </div>
                        <div>
                        <form method="POST" action="{{ route('notifications.unread', $notification->id) }}" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-outline">Unread</button>
                        </form>
                        <form method="POST" action="{{ route('notifications.delete', $notification->id) }}" class="d-inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-outline">Delete</button>
                        </form>
                        </div>
                    </div>
                @endif
            @empty
                <!-- No Notifications -->
                <div class="alert alert-success border-0" role="alert">
                    No notifications available.
                </div>
            @endforelse
    
        <!-- Pagination Links -->
        <div class="mt-5">
            {{ $notifications->links('vendor.pagination.bootstrap-5') }}
        </div>
            





        <div class="table-container d-none">
          <div id="orderHistoryTableContainer" class="table-responsive-sm table-responsive-md">
            <table class="table-box delivery-detailsss" data-toggle="table" data-search="true">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Content</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($notifications as $notification)
                        <tr>
                            <td>{{ $notification->data['title'] }}</td>
                            <td>{{ $notification->data['content'] }}</td>
                            <td>{{ $notification->read_at ? 'Read' : 'Unread' }}</td>
                            <td>
                                @if (!$notification->read_at)
                                    <form method="POST" action="{{ route('notifications.read', $notification->id) }}">
                                        @csrf
                                        <button type="submit" class="btn btn-primary btn-sm">Mark as Read</button>
                                    </form>
                                @else
                                    <button disabled>Read</button>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4">No notifications available.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
          </div>
        </div>
      </div>

</div>
@endsection