@section('stylesheets')
    <link rel="stylesheet" href="{{asset('css/general-inner.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/index.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/edit.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/general-modal.css')}}" />
@endsection

<div>
    @if (isset($result))
        <p>
            {{ $result['message'] }}
        </p>
    @endif
</div>
<div class="list-box col">
    <div class="list-box--inner">
        <div class="list-box--inner---list">
            <div class="main-info-container">
                <div class="row main-info-container--header-row">
                    <p class="id">ID</p>
                    <p class="category">Category</p>
                    <p class="tag">Tag</p>
                    <p class="title">Title</p>
                    <p class="message">Message</p>
                    <p class="expireat">Expires at</p>
                    <p class="status">Published</p>
                    <p class="action">Action</p>
                </div>
                @foreach($notifications as $notification)
                    <div class=" row main-info-container--row @if ($notification->hasExpired() && $notification->published == 0) expired @endif">
                        <p class="id"><span>{{ $notification->id }}</span></p>
                        <p class="category" title="{{ $notification->notificationCategory()->description }}">{{ $notification->category }}</p>
                        <p class="tag">{{ $notification->tag }}</p>
                        <p class="title">{{$notification->title}}</p>
                        <p class="message">{{$notification->body}}</p>
                        <p class="expireat">{{$notification->expires_at}}</p>
                        <div class="status">
                            @if($notification->published == 0)
                            <div class='red'></div>
                            @else
                            <div class='green'></div>
                            @endif
                        </div>
{{--                        <p>--}}
{{--                            @if($notification->notificationCategory()->pushable)--}}
{{--                                {{ dd($notification->getRecipientsNames(true)) }}--}}
{{--                            @endif--}}
{{--                        </p>--}}
                        <div class="action form">
                            <div class="action-more">
                                <div class="dropdown1">
                                    <img class="dropbtn1 action-more menu-dots" src="{{asset('images/menu.svg')}}">
                                    <div id="myDropdown1" class="dropdown1-content" >
                                        <a onclick="return confirm('{{ __('Are you sure you want to delete?') }}')" class="action-delete"
                                                                                       href="{{ route('notifications.delete', ['notification' => $notification->hash_id]) }}">Delete</a>
                                        @if($notification->published == 0)
                                            <a class="action-update" href="{{route('notifications.update', ['notification' => $notification->hash_id]) }}">Update</a>
                                        @endif
                                        @if ($notification->published == 0 &&!$notification->hasExpired())
                                            <a class="action-publish" href="{{ route('notifications.publish', ['notification' => $notification->hash_id]) }}">Publish</a>
                                        @endif
                                        @if (filled($notification->recipients) && ($notification->published == 1))
                                            <a href="#" class="action-read-by read-by" data-hash_id="{{$notification->hash_id}}"
                                            data-id="{{$notification->id}}" data-bs-toggle="modal" data-bs-target="#readby--{{$notification->id}}"
                                            title="read by">Read By
                                            </a>
                                        @endif
                                        @if($notification->notificationCategory()->pushable)
                                            <a href="#" class="action-recipients recipients" data-hash_id="{{$notification->hash_id}}"
                                            data-id="{{$notification->id}}" data-bs-toggle="modal" data-bs-target="#recipients--{{$notification->id}}"
                                            title="recipients">
                                            Recipients
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @include('superadmin.modals.readby')
                    @include('superadmin.modals.recipients')
                @endforeach
            </div>
        </div>

    </div>
    <div class="pagination-wrapper">
        {{ $notifications->links() }}
    </div>

</div>


@section('javascripts')
    <script>

        $q = jQuery.noConflict();
        $q(document).ready(function () {

            let d = $q('.read-by').on('click', function (e) {
                let msgHash = $q(this).data('hash_id');
                let msgId = $q(this).data('id');

                $q.ajax({
                    method: "GET",
                    url: `{{route('notifications.readby', '')}}/${msgHash}`,
                    data: {
                        '_token': "{{ csrf_token() }}"
                    }
                }).done(function (popup) {

                    const popDiv = $q.parseHTML(popup)
                    $q(`#readby--${msgId} .form-group`).empty().append(popDiv)

                });
            });
        });

    </script>

    <script>

        $q = jQuery.noConflict();
        $q(document).ready(function () {

            let d = $q('.recipients').on('click', function (e) {
                let msgHash = $q(this).data('hash_id');
                let msgId = $q(this).data('id');

                $q.ajax({
                    method: "GET",
                    url: `{{route('notifications.recipients', '')}}/${msgHash}`,
                    data: {
                        '_token': "{{ csrf_token() }}"
                    }
                }).done(function (popup) {
                    const popDiv = $q.parseHTML(popup)
                    $q(`#recipients--${msgId} .form-group`).empty().append(popDiv)

                }).fail(function (textStatus) {

                });
            });
        });

    </script>

    <script>
        window.onclick = function(event) {
            if (event.target.matches('.dropbtn1')) {
                var dropbuttons = document.getElementsByClassName("dropbtn1");
                for (var i = 0; i < dropbuttons.length; i++) {
                    var openDropdown = dropbuttons[i];
                    if (openDropdown.classList.contains('show') && !event.target.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
                event.target.classList.toggle("show");
            }
            if (!event.target.matches('.dropbtn1')) {
                var dropbuttons = document.getElementsByClassName("dropbtn1");
                for (var i = 0; i < dropbuttons.length; i++) {
                    var openDropdown = dropbuttons[i];
                    if (openDropdown.classList.contains('show') && !event.target.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
                // event.target.classList.toggle("show");
            }

        }
    </script>
@endsection