@extends('layouts.main')




@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">
    <x-page-header
        back-link="{{ '../'}}"
    >
        VIEWING RECIPIENTS FOR NOTIFICATION {{ $notification->title }}
    </x-page-header>

    <div class="d-flex justify-content-end gap-3 mb-3">
        <form id="recipients-form" style="display: contents">
            <x-ui.search-field placeholder="SEARCH RECIPIENT"/>
            <x-ui.select.filter
                name="read_status"
                id="readStatus"
                :options="$read_status"
            ></x-ui.select.filter>
        </form>
    </div>

    <div id="listDataContainer">
         @include('management-notifications.partials.recipients-list')
    </div>
    </div>
@endsection

@push('scripts-stack')
    <script defered>
        $s = jQuery.noConflict()
        $s(document).ready(function () {
            setAjaxFilters("{{route(Route::currentRouteName(), ['notification_id' => $notification->id])}}", 'recipients-form')
        });
    </script>
@endpush