@extends('web.layouts.container')

@section('content')
    <section class="inner_header">
        <img src="{{asset('assets/web/images/icons/inner.svg')}}" alt="" class="inner_shap">
        <div class="container">
            <ul class="links">
                <li>
                    <a href="{{LaravelLocalization::getLocalizedURL($lang, route('home'), [], true)}}">{{__('main.home')}}</a>
                </li>
                <li>
                    <a href="#"> {{__('members.notifications')}} </a>
                </li>
            </ul>
            <h4>{{__('members.notifications')}}</h4>
        </div>
    </section>

    <section class="notifications-pg section_padding">
        <div class="container">
            <div class="row justify-content-center">
                @if(count($notifications))
                    <div class="col-md-10 d-flex justify-content-end mb-3"><a href="{{route('user.makeNotificationAsRead').'?make_all_as_read=true'}}" class="make_as_read_link">{{__('members.mark_as_read')}}</a></div>
                @endif
                <div class="col-lg-10 notification_container">
                    @if(count($notifications))
                        @foreach($notifications as $notification)
                            <div class="noti_box notification_item_{{$loop->iteration}}">
{{--                                <div class="icon me-4">--}}
{{--                                    <div class=""><a data-target=".notification_item_{{$loop->iteration}}" href="{{route('user.makeNotificationAsRead', $notification->id)}}" class="make_as_read_link"><i class="fa fa-times fa-2x text-danger"></i></a></div>--}}
{{--                                </div>--}}
                                <div class="icon me-4">
                                    <img src="{{asset('assets/web/images/icons/ringing.png')}}" alt="">
                                </div>
                                <div class="info">
                                    <div class="title">
                                        <h5>{{wordLimit($notification->title, 5)}}</h5>
                                        <span class="date">
                                            <i class="bi bi-calendar2 me-2"></i>
                                            <small>{{date('d M Y/ h:i A', strtotime($notification->created_at))}}</small>
                                        </span>
                                    </div>
                                    <div class="text">{{$notification->message}}</div>
                                </div>
                            </div>
                        @endforeach
                        @else
                        <div class="noti_box">
                            <div class="info d-flex justify-content-center align-items-center">
                                <div class="icon bg-warning">
                                    <img src="{{asset('assets/web/images/icons/ringing.png')}}" alt="">
                                </div>
                                <div class="title">
                                    <h5 class="text-danger m-2">{{__('usersNotifications.no_notifications')}}</h5>
                                </div>
                            </div>
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </section>

@endsection

@section('inner_js')
    <script>
        let noNotification = "{{__('usersNotifications.no_notifications')}}",
            notificationImage = "{{asset('assets/web/images/icons/ringing.png')}}";

        $('.make_as_read_link').click(async function (e) {
            e.preventDefault();
            $(this).attr('disabled', true);
            let url = $(this).attr('href'),
                method = 'get';

            const response=await ajax({
                url,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                $(this).attr('disabled', false);
                toasterError(response.errors);
            }
            if (response.message) {
                // $($(this).data('target')).remove();
                $(this).remove();
                toasterSuccess(response.message);

                let notificationCounter = $('.notification_counter'),
                    counter = parseInt(notificationCounter.html());

                if($(this).data('target') !== undefined){
                    notificationCounter.html(counter-1);
                }

                if($(this).data('target') === undefined){
                    $('.notification_container').html('');
                    notificationCounter.html(0)
                }

                notiBox = $('.notification_container').find('.noti_box');
                if(!notiBox.length){
                    $('.notification_container').html(`
                        <div class="noti_box">
                            <div class="info d-flex justify-content-center align-items-center">
                                <div class="icon bg-warning">
                                    <img src="${notificationImage}" alt="">
                                </div>
                                <div class="title">
                                    <h5 class="text-danger m-2">${noNotification}</h5>
                                </div>
                            </div>
                        </div>`);
                }
            }
        });

    </script>
@endsection