<x-app-layout>
    <x-slot name="css">
        <style>
            .row.notification-bg {
                background: #f5f3f0;
                padding-top: 30px;
            }

            button.close.my-auto {
                top: 30% !important;
            }

            .notification-read {
                opacity: .50;
            }

            .col-md-12.notification-unread {
                cursor: pointer;
            }
        </style>
    </x-slot>
    <div class="page-header row">
        <div class="page-title col-12 d-flex mt-4 pr-4">
            <h3 class="my-auto">{{ __('common.notification.name') }}</h3>
        </div>
    </div>

    <div class="row notification-bg">
        @if (sizeOf($data) > 0)
            @foreach ($data as $notification)
                <div class="col-md-12 {{ $notification->is_read == 1 ? 'notification-read' : 'notification-unread' }}"
                    data-id="{{ $notification->id }}" data-href="{{ route('cafe.order-history.show', encrypt($notification->reference_id)) }}">
                    <div class="alert alert-light alert-dismissible fade show d-flex" role="alert">

                        <div class="my-auto mr-3 d-flex">
                            <svg width="65" height="65" viewBox="0 0 96 96" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <rect width="96" height="96" rx="48" fill="#C0987C" fill-opacity="0.4" />
                                <g clip-path="url(#clip0_1234_2466)">
                                    <path
                                        d="M62.8769 46.8692C64.4901 43.9992 64.8972 40.6058 64.0085 37.4357C63.1199 34.2655 61.0083 31.5783 58.1383 29.965C55.2683 28.3517 51.875 27.9447 48.7048 28.8333C45.5347 29.722 42.8474 31.8336 41.2341 34.7036C34.1376 47.3285 26.6993 47.8942 26.6993 47.8942L59.1634 66.1426C59.1634 66.1426 55.7803 59.4941 62.8769 46.8692Z"
                                        fill="#6A442E" stroke="#6A442E" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path
                                        d="M41.9962 65.9867C41.3718 66.3551 40.6617 66.553 39.9368 66.5606C39.2119 66.5682 38.4977 66.3853 37.8658 66.03C37.2339 65.6748 36.7064 65.1598 36.3361 64.5366C35.9658 63.9134 35.7657 63.2039 35.7559 62.479"
                                        stroke="#6A442E" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </g>
                                <defs>
                                    <clipPath id="clip0_1234_2466">
                                        <rect width="49.6552" height="49.6552" fill="white"
                                            transform="translate(38.5229 14.1924) rotate(29.3407)" />
                                    </clipPath>
                                </defs>
                            </svg>
                        </div>

                        <div class="my-auto">
                            <strong><a href="{{ route('cafe.order-history.show', encrypt($notification->reference_id)) }}">{{ $notification->title }}</a></strong><br>
                            {{ $notification->description }}
                            <p>{{ $notification->date }}</p>
                            <div class="my-auto">
                                <button type="button" class="close my-auto notification-delete" data-dismiss="alert"
                                    aria-label="Close" data-deleteid="{{ $notification->id }}">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        @else
        <div class="col-12 mb-3">
            <p class="text-center" style="color: var(--coffee-dark); font-weight:bold;">{{ __('common.notification.noNotification') }}</p>
        </div>
        @endif
    </div>
    <x-slot name="script">
        <script>
            $('.notification-unread').on('click', function() {
                let notificationId = $(this).data('id');
                let routeRedirect = $(this).data('href');
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    }
                });
                $.ajax({
                    type: 'POST',
                    url: '{{ route('cafe.notification.read') }}',
                    data: {
                        id: notificationId
                    },
                    success: function(response) {
                        if (response.success) {
                            window.location.href = routeRedirect;
                            // location.reload(true);
                        } else {
                            location.reload(true);
                        }
                    }
                });
            });

            $('.notification-delete').on('click', function(event) {
                event.stopPropagation();
                var notificationId = $(this).data('deleteid');
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    }
                });
                $.ajax({
                    type: 'POST',
                    url: '{{ route('cafe.notification.delete') }}',
                    data: {
                        id: notificationId
                    },
                    success: function(response) {
                        if (response.success) {
                            location.reload(true);
                        } else {
                            location.reload(true);
                        }
                    }
                });
            });
        </script>
    </x-slot>
</x-app-layout>