@php
    $locale = core()->getCurrentLocale();
@endphp

{!! view_render_event('bagisto.shop.layout.header.notifications.before') !!}

<div class="d-inline-block">
    <div class="dropdown notifications">
        <button type="button" class="icon-button" >
            <i class="material-icons" onclick="openNotificationModal();">notifications</i>
            @if ($storeNotifications['notificationsCount'])
                <span class="icon-button__badge">{{ $storeNotifications['notificationsCount'] }}</span>
            @endif
        </button>
    </div>
</div>

<div id="notificationModal" class="modal sensitive-modal">
    <div class="modal-content notifications">
        <ul class="profile-ul-list">
            <div class="dropdown-header">
                <p>{{ __('admin::app.layouts.notifications') . ' (' . $storeNotifications['notificationsCount'] . ')' }}</p>
                <div class="mark-read" onclick="markAsRead()">
                    <img src="{{ asset('vendor/webkul/admin/assets/images/mark-all-as-read.svg') }}" alt="Mark all as read">
                    <p>{{ __('admin::app.settings.notifications.mark-as-read') }}</p>
                </div>
            </div>

            @foreach ($storeNotifications['notifications'] as $notification)
                <a class="dropdown-item" href="{{ route('client.core.notifications.view' , $notification->id) }}">
                    <i class="material-icons">reply</i>
                    <div>
                        <p class="title">{{ 'Store Admin ' . __('admin::app.reply-complaint') }}</p>
                        <time class="date">{{ $notification->created_at->diffForHumans() }}</time>
                    </div>
                </a>
            @endforeach
        </ul>
    </div>
</div>

@push('scripts')
    <script>
        var locale = "{{ $locale->code }}";

        function markAsRead() {
            $.ajax({
                type: 'POST',
                url: '{{ route('core.notifications.mark-as-read') }}',
                data: {
                    _token: '{{ csrf_token() }}',
                    customer_id: '{{ auth('customer')->user()?->id }}',
                },
                success: function(data) {
                    location.reload();
                },
                error: function(xhr, textStatus, errorThrown) {
                    serverErrors = xhr.responseJSON.errors;
                    bootbox.alert({
                        message: serverErrors,
                        centerVertical: true,
                        locale: locale,
                    });
                },
            });
        }

        function openNotificationModal() {
            $('#notificationModal').toggleClass('show');
            $('#account-modal').addClass('hide');
        };

        // hide Search Modal when clicking on other icons
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(() => {
                $('.welcome-content').click(function () {
                    $('#notificationModal').addClass('hide');
                });
            }, 1000);
        });
    </script>
@endpush

{!! view_render_event('bagisto.shop.layout.header.notifications.after') !!}