@extends('layouts.app')

@section('title', __('Notifications'))

@push('css')
    <style> .pagination { justify-content: center!important; } </style>
@endpush

@section('content')
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-auto">
                <h2 class="page-title">
                    {{ __("Notifications") }}
                </h2>
            </div>
            <div class="col-auto ml-auto d-print-none">
                <div class="btn-list">
                    <a href="javascript:void(0)" class="btn btn-primary markAllRead">
                        {{ __('Mark All as Read') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="divide-y-4">

                @if($notifications->count() == 0)
                    <div class="text-muted" style="font-size: 12px">{{ __('No Notifications!') }}</div>
                @endif
                @foreach($notifications as $notification)
                    <div class="notification-item">
                        <div class="row">
                            <div class="col">
                                <div>
                                    {!! $notification->data['title'] !!}
                                </div>
                                @if($notification->data['subtitle'] ?? null)
                                    <div class="text-muted">{{ $notification->data['subtitle'] }}</div>
                                @endif
                                <div class="small text-muted">{{ $notification->created_at->format('M d, Y - h:i A') }} ({{ $notification->created_at->diffForHumans(null, false, false, 2) }})</div>
                            </div>
                            <div class="col-auto align-self-center">
                                <a class="btn btn-icon btn-warning" href="{{ $notification->data['url'] }}?read={{ $notification->id }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
                                </a>
                                @if($notification->unread())
                                    <a class="btn btn-icon btn-primary" onclick="readNotification(this, '{{ $notification->id }}')" href="javascript:void(0)" title="{{ __('Mark As Read') }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
                                    </a>
                                @endif

                                <a class="btn btn-icon btn-danger deleteNotification" href="javascript:void(0)" data-notification-id="{{ $notification->id }}" title="{{ __('Delete') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="4" y1="7" x2="20" y2="7" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>
                                </a>
                            </div>

                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-12">
            <div class="text-xs-center">
                {!! $notifications->links() !!}
            </div>
        </div>
    </div>
@stop

@push('script')
    <script !src="">

        $('.deleteNotification').click(function(){
            let btn = this;
            $(btn).btnloading();
            $.confirm({
                title: '{{ __('Are you sure?') }}',
                content: '{{ __("You won't be able to revert this!") }}',
                type: 'red',
                buttons: {
                    close: function () {
                        $(btn).btnreset();
                    },
                    Delete: {
                        text: 'Delete',
                        btnClass: 'btn-danger',
                        action: function(){
                            axios.post('{{ route('notifications.delete') }}', {
                                notificationID: $(btn).data('notification-id')
                            }).then(function(r){
                                $(btn).closest('.notification-item').remove();
                                notify('success', r.data.message);
                            }).catch(function(e){
                                notify('error', e.response.data.message);
                            })
                        }
                    }
                }
            });
        });

        $('.markAllRead').click(function(){
            let btn = this;
            $(btn).btnloading();
            $.confirm({
                title: '{{ __('Are you sure?') }}',
                content: '{{ __("You won't be able to revert this!") }}',
                type: 'red',
                buttons: {
                    close: function () {
                        $(btn).btnreset();
                    },
                    Delete: {
                        text: 'Mark All as Read',
                        btnClass: 'btn-danger',
                        action: function(){
                            axios.post('{{ route('notifications.read.all') }}').then(function(r){
                                notify('success', r.data.message);
                                setTimeout(function (){
                                    location.reload();
                                }, 1000);
                            }).catch(function(e){
                                notify('error', e.response.data.message);
                                $(btn).btnreset();
                            });
                        }
                    }
                }
            });
        });
    </script>
@endpush