@if (!empty($teacher) && $messagePaginator->isNotEmpty())

    {{-- <div class="text-right mb-3 all-is-read" style="cursor: pointer;font-weight:500">全部標記為已讀</div> --}}

    @foreach ($messagePaginator as $message)
        @include('.frontend.template.teacher.message.box',[
        'message' => $message
        ])
    @endforeach

    @if ($messagePaginator->hasPages())
        <div class="d-flex justify-content-around">
            <div class="col-6 col-md-2">
                <a href="{{ $messagePaginator->previousPageUrl() . '#message' }}">
                    <div class="btn btn-primary border-radius-10 px-3 py-1">
                        上一頁
                    </div>
                </a>
            </div>
            @if ($messagePaginator->hasMorePages())
                <div class="col-6 col-md-2">
                    <a href="{{ $messagePaginator->nextPageUrl() . '#message' }}">
                        <div class="btn btn-primary border-radius-10 px-3 py-1">
                            下一頁
                        </div>
                    </a>
                </div>
            @endif
        </div>
    @endif
@else
    <div class="messaige-box mb-5">
        沒有新信息
    </div>
@endif

<style>
    span.red-dot.is_read {
        background-color: #414042;
    }

</style>

<script>
    $(document).ready(function() {
        $(".all-is-read").click(function() {
            let url = "{{ route('.api.teacher.profile.message.status.update.all') }}";
            $.get(url).then(req => {
                $(".red-dot").addClass('is_read');

                updateIsNewMesssageTotal();
            });
        });

        $(".red-dot").click(function(e) {
            e.stopPropagation();
            return;

            let message_id = $(this).data('message_id');

            if ($(this).hasClass('is_read')) {
                $(this).removeClass('is_read');
                updateMessageReadStatus(message_id, false);
            } else {
                $(this).addClass('is_read');
                updateMessageReadStatus(message_id, true);
            }
        });

        $('.messaige-box').click(function(){
            if($(this).data('redirect-url')){
                location.href = $(this).data('redirect-url')
            }
        });
    });

    function updateMessageReadStatus(message_id, is_read) {
        let url = "{{ route('.api.teacher.profile.message.status.update') }}";
        $.get(url + '?message_id=' + message_id + '&&is_read=' + is_read).then(req => {
            updateIsNewMesssageTotal();
        });
    }
</script>