@extends('frontend.layouts.master')
@section('content')
    <section class="section border-0 m-0">
        <div class="container-xxl">
            <x-user-panel>
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <div class="card-header bg-white py-3">
                                <h4 class="card-title mb-0">
                                    {{ trans("routes.My Notifications") }}
                                </h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    @forelse ($notifications as $key => $notification)
                                        <div class="col-12 mb-5" id="notification-{{ $notification->id }}">
                                            <a class="text-decoration-none"
                                               href="{{ Helper::getNotificationRoute($notification) }}">
                                                <div class="card alert pt-2"
                                                     style="background: rgba(163, 72, 77, 0.1); border: 2px solid #A3484D; border-radius: 10px;">
                                                    <div class="card-body py-0 px-0">
                                                        <div
                                                            class="row d-flex justify-content-between align-items-center mb-3">
                                                            <div class="col">
                                                                @if($notification['data']['image'] !== null && trim($notification['data']['image']) !== "")
                                                                    <img src="{{ $notification['data']['image'] }}"
                                                                         class="img-fluid rounded-4"
                                                                         alt="{{ $notification['data']['title'] }}"
                                                                         width="100px"/>
                                                                @else
                                                                    <img src="{{ asset('logo/logo.png') }}"
                                                                         class="img-fluid rounded-4"
                                                                         alt="Nice Style Logo"
                                                                         width="50px"/>
                                                                @endif

                                                            </div>
                                                            <div
                                                                class="col {{ LaravelLocalization::getCurrentLocale() == "ar" ? 'text-start' : 'text-end' }}">
                                                                <button class="btn-close"
                                                                        onclick='removeNotification("{{ $notification->id }}")'
                                                                        data-bs-toggle="tooltip"
                                                                        data-bs-animation="false"
                                                                        data-bs-placement="top" title=""
                                                                        data-bs-original-title="{{ trans('routes.Remove notification') }}"></button>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col">
                                                               <p class="text-5 text-primary fw-semibold">
                                                                   {!! $notification['data']['title'] !!}
                                                               </p>
                                                                <p class="text-3 text-dark">
                                                                    {!! $notification['data']['body'] !!}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="col-12">
                                            {{ $notifications->links() }}
                                        </div>
                                    @empty
                                        <div class="row justify-content-center">
                                            <div class="col text-center">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"
                                                     fill="currentColor" class="bi bi-bell text-muted"
                                                     viewBox="0 0 16 16">
                                                    <path
                                                        d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6"/>
                                                </svg>
                                                <p class="text-muted">
                                                    {{ trans("routes.There are no notifications") }}
                                                </p>
                                            </div>
                                        </div>
                                    @endforelse
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
        </div>
        </x-user-panel>
        </div>
    </section>
@endsection

@section('script')
    <script>
        function removeNotification(id) {
            // Perform the AJAX request to remove the notification
            $.ajax({
                url: "{{ route('notifications.destroy') }}"
                , type: 'POST'
                , data: {
                    "_token": "{{ csrf_token() }}"
                    , "id": id
                }
                , success: function (response) {
                    $('#notification-' + id).remove();
                    successNotification("{{ trans('routes.Removed notification successfully') }}");
                }
                , error: function (xhr, status, error) {
                    console.log(error);
                }
            });
        }

    </script>
@endsection