@extends('layouts.app')

@section('title', 'Notifications')

@section('content')
@php $user = auth()->user(); @endphp
<div class="content">
    <x-content.header
        title="{{trans('menu.notification_title')}}"
        subTitle="{{ $notifications->total() }} {{trans('menu.notification_title')}}" >
        <x-slot:headerRight>
            @if (request()->has('archived') && request()->get('archived') == 1)
                <a href="{{url()->previous()}}" class="btn-tertiary-sm"><span class="hidden lg:inline-block">{{trans('forms.lbl_back')}}</span></a>
            @else
                <a href="{{route('users.notifications.getAll', $user->id)}}?archived=1" class="btn-tertiary-sm"><span class="hidden lg:inline-block">{{trans('forms.lbl_see_archive')}}</span></a>
            @endif
            <button class="btn-secondary-base markAllAsRead" type="button">
                <x-svg-icon icon="icon-check" />
                {!! __('forms.lbl_mark_all_as_read') !!}
            </button>
        </x-slot:headerRight>
    </x-content.header>


    <div class="flex flex-col gap-5">
        @if($notifications->count() > 0)
            <div>
                <div class="flex bg-custom-grey-50 rounded-[8px] w-max items-center p-[8px]">
                    <div class="mr-2">
                        <button class="tabs-btn-box min-w-[84px] showAllNotifications active text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px]">
                            {{ __('forms.lbl_all_notifications') }}
                        </button>
                    </div>
                    <div class="mr-2">
                        <button class="tabs-btn-box min-w-[84px] showUnreadNotifications">
                                {{ __('forms.lbl_unread_notifications') }} ({{ $unread_count }})
                        </button>
                    </div>
                </div>
            </div>
            <div id="selected-count" class="hidden">
                <div class="bg-custom-orange-50 text-custom-grey-600 py-2 px-[7px] rounded-lg flex items-center">
                    <x-svg-icon class="mr-2 selected-bar-close cursor-pointer" icon="icon-close" />

                    <h1 id="show-selected-count" class="text-md-semibold">
                        <span class="selected_items">0</span> {{ trans('forms.lbl_items_selected') }}
                    </h1>

                    <a href="javascript:;"
                        data-uri="{{url('users/notifications')}}"
                        class="btn-folder-delete-all">
                        <x-svg-icon class="ml-6" icon="icon-trash" />
                    </a>
                </div>
            </div>

            <div id="notifications" class="flex flex-col gap-4 relative laravel-pagination">
                @include('notifications.items')
            </div>
        @endif
    </div>
</div>
@endsection


@section('footer-script')
    <script>
        let showOnlyUnread = 0,
            page = 1,
            notifications = [],
            hasMorePages = true,
            loading = false,
            lastTimestamp = null,
            notification_id = {{ request()->user()->id }};
        let is_archive = {{ request()->has('archived') && request()->get('archived') == 1 ? 1 : 0}};

        $('body').on('click', '.markAsRead', function( event ) {
            event.preventDefault();
            PDRequest({
                type: 'DELETE',
                url: `/users/${notification_id}/notifications/${notification.id}`,
                event: event,
                isFlash: true
            })
        });

        $('body').on('click', '.markAllAsRead', function( event ) {
            event.preventDefault();
            PDRequest({
                type: 'POST',
                url: `/users/${notification_id}/notifications/read-all`,
                event: event,
                isFlash: true
            });
        });

        $('body').on('click', '.showUnreadNotifications', function( event ) {
            event.preventDefault();
            showOnlyUnread = 1
            page = 1
            notifications = []
            toggleTab(this)
            loadNotifications( event )
        });

        $('body').on('click', '.showAllNotifications', function( event ) {
            event.preventDefault();
            showOnlyUnread = 0
            page = 1
            notifications = []
            toggleTab(this)
            loadNotifications( event )
        });

        function toggleTab(tab) {
            // Reset all tabs and contents for the second set filter
            $(".showAllNotifications, .showUnreadNotifications").removeClass("active text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px]");

            // Set new active state for the clicked tab in the filter set
            $(tab).addClass("active text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px]");
        }

        function loadNotifications( event ) {
            PDRequest({
                type    : "GET",
                url     : `/users/${notification_id}/notifications/get-all?archived=${is_archive}&page=${page}&unread_only=${showOnlyUnread}`,
                event   : event
            }).then(response => {
                $('#notifications').html(response.message)
            });
        }
    </script>
@endsection