@extends('layouts.app')

@section('title', 'Notification')

@section('page-specific-style')
<link href="{{asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />

<link href="{{asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />

<style>
    .blink {
        border: 2px solid #0D4861; /* Border color and width */
        background-color: #f0f0f0; /* Optional: Slight background color change for contrast */
        padding: 10px; /* Optional: Add some padding to make the border more pronounced */
        border-radius: 5px;
    }
</style>

@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="d-flex justify-content-between align-items-center">
            <h4 class="mb-0">Notifications</h4>
        </div>
    </div>

    <div class="mt-3">
        <div class="row">

            @forelse ($notifications as $item)
            @php
                $type = class_basename($item->type);
            @endphp
            <div class="col-md-4 my-2">
                <div class="d-flex gap-3 note-item bg-white p-3" data-id="{{ $item->id }}">
                    <div class="left d-flex flex-column gap-2 mt-2">
                        {{-- <i class="bx bx-star update-note-start-icon fs-3"
                            role="button"
                            title="Mark as Featured"></i> --}}
                            {{-- <i class="bi bi-pencil-square"></i> --}}
                            @if ($type == 'LeadAccessNotification')
                            {{-- Lead View --}}
                            <i class="bx bx-file-find fs-3"></i>
                            @elseif ($type == 'UserUpdateNotification')
                                {{-- User Role Updated --}}
                                <i class="bx bx-user-check fs-3"></i>
                            @elseif ($type == 'NewUserCreatedNotification')
                                {{-- User Added --}}
                                <i class="bx bx-user-plus fs-3"></i>
                            @endif
                    </div>
                    <div class="right">
                        <div class="note-header">
                            <div class="title">
                                <h4>
                                    @if ($type == 'LeadAccessNotification')
                                    Lead View
                                    @elseif ($type == 'UserUpdateNotification')
                                        User Role Change
                                    @elseif ($type == 'NewUserCreatedNotification')
                                        User Added
                                    @endif
                                </h4>
                            </div>
                        </div>
                        <div class="note-body">
                            <h6 class="text-black fs-5">
                                {!! $item->data['message'] !!}
                            </h6>
                        </div>
                        @if($item->read_at)
                        <div class="note-footer">
                            <span>{{ \Carbon\Carbon::parse($item->read_at)?->format('d M y, H:i a') }}</span>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @empty

            <div class="col-12">
                <div class="alert alert-info" role="alert">
                    No notifications found.
                </div>
            </div>

            @endforelse

        </div>
    </div>
</div>
@endsection

@section('page-specific-script')
<!-- Required datatable js -->
<script src="{{asset('assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>

<script src="{{asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js')}}"></script>

<script>
    $(document).ready(function() {
        var urlParams = new URLSearchParams(window.location.search);
        var notifiableId = urlParams.get('notifiable_id');

        if (notifiableId) {
            // Find the notification with the matching ID
            var notification = $(`[data-id="${notifiableId}"]`);

            if (notification.length) {
                // Add the 'blink' class to highlight and make it blink
                notification.addClass('blink');

                // Optional: Scroll to the highlighted notification
                $('html, body').animate({
                    scrollTop: notification.offset().top
                }, 500);

                setTimeout(function() {
                    notification.removeClass('blink');
                }, 4000);
            }
        }
    });
</script>
@endsection