@extends('adminlte::page')

@section('title', 'Notifications')

@section('content_header')
    <h1><i class="fas fa-bell"></i> Notifications</h1>
@stop

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">All Notifications</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-sm btn-success" onclick="markAllAsRead()">
                    <i class="fas fa-check-double"></i> Mark All as Read
                </button>
            </div>
        </div>
        <div class="card-body">
            @if($notifications->count() > 0)
                <div class="list-group">
                    @foreach($notifications as $notification)
                        <div class="list-group-item {{ $notification->is_read ? '' : 'list-group-item-warning' }}">
                            <div class="d-flex w-100 justify-content-between">
                                <h5 class="mb-1">
                                    @if($notification->type == 'success')
                                        <i class="fas fa-check-circle text-success"></i>
                                    @elseif($notification->type == 'info')
                                        <i class="fas fa-info-circle text-info"></i>
                                    @elseif($notification->type == 'warning')
                                        <i class="fas fa-exclamation-triangle text-warning"></i>
                                    @else
                                        <i class="fas fa-times-circle text-danger"></i>
                                    @endif
                                    {{ $notification->title }}
                                </h5>
                                <small>{{ $notification->created_at->diffForHumans() }}</small>
                            </div>
                            <p class="mb-1">{{ $notification->message }}</p>
                            <div class="mt-2">
                                @if(!$notification->is_read)
                                    <button class="btn btn-sm btn-primary" onclick="markAsRead({{ $notification->id }})">
                                        <i class="fas fa-check"></i> Mark as Read
                                    </button>
                                @endif
                                <button class="btn btn-sm btn-danger" onclick="deleteNotification({{ $notification->id }})">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            </div>
                        </div>
                    @endforeach
                </div>
                
                <div class="mt-3 d-flex justify-content-center">
                    <nav aria-label="Page navigation">
                        <ul class="pagination pagination-sm">
                            {{-- Previous --}}
                            @if ($notifications->onFirstPage())
                                <li class="page-item disabled">
                                    <span class="page-link" style="font-size: 0.75rem; padding: 0.25rem 0.35rem; line-height: 1;">&laquo;</span>
                                </li>
                            @else
                                <li class="page-item">
                                    <a class="page-link" href="{{ route('notifications.index', ['page' => $notifications->currentPage() - 1]) }}" style="font-size: 0.75rem; padding: 0.25rem 0.35rem; line-height: 1;">&laquo;</a>
                                </li>
                            @endif

                            {{-- Page Numbers --}}
                            @foreach ($notifications->getUrlRange(1, $notifications->lastPage()) as $page => $url)
                                @if ($page == $notifications->currentPage())
                                    <li class="page-item active">
                                        <span class="page-link" style="font-size: 0.75rem; padding: 0.25rem 0.35rem; line-height: 1;">{{ $page }}</span>
                                    </li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ route('notifications.index', ['page' => $page]) }}" style="font-size: 0.75rem; padding: 0.25rem 0.35rem; line-height: 1;">{{ $page }}</a>
                                    </li>
                                @endif
                            @endforeach

                            {{-- Next --}}
                            @if ($notifications->hasMorePages())
                                <li class="page-item">
                                    <a class="page-link" href="{{ route('notifications.index', ['page' => $notifications->currentPage() + 1]) }}" style="font-size: 0.75rem; padding: 0.25rem 0.35rem; line-height: 1;">&raquo;</a>
                                </li>
                            @else
                                <li class="page-item disabled">
                                    <span class="page-link" style="font-size: 0.75rem; padding: 0.25rem 0.35rem; line-height: 1;">&raquo;</span>
                                </li>
                            @endif
                        </ul>
                    </nav>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-bell-slash fa-3x text-muted mb-3"></i>
                    <p class="text-muted">No notifications yet</p>
                </div>
            @endif
        </div>
    </div>

    {{-- <!-- Footer -->
    <footer>
        <p>Developed By: <strong>Shahril Mohd Isa</strong> | Year: <strong>{{ date('Y') }}</strong></p>
    </footer> --}}
@stop

@section('css')
    <style>
        html, body {
            height: 100%;
        }

        .wrapper {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .content-wrapper {
            flex: 1;
        }

        footer {
            margin-top: auto;
            border-top: 1px solid #e0e0e0;
            padding: 20px 0;
            text-align: center;
            color: #999;
            font-size: 0.9rem;
        }

        footer p {
            margin: 0;
        }

        /* Pagination styling - make buttons smaller - OVERRIDE ADMINLTE */
        .pagination {
            margin-top: 20px !important;
            gap: 5px !important;
        }

        .pagination .page-link {
            padding: 0.3rem 0.5rem !important;
            font-size: 0.8rem !important;
            line-height: 1.2 !important;
            min-width: auto !important;
            height: auto !important;
        }

        .pagination .page-link svg {
            width: 12px !important;
            height: 12px !important;
            max-width: 12px !important;
            max-height: 12px !important;
        }

        .pagination .page-item.active .page-link {
            background-color: #007bff !important;
            border-color: #007bff !important;
        }

        /* Make previous/next arrows smaller */
        .pagination .page-link span {
            font-size: 0.8rem !important;
            display: inline !important;
        }

        .pagination .page-link i {
            font-size: 0.8rem !important;
        }

        /* Override button sizing */
        .page-link {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
    </style>
@stop

@section('js')
    <script>
        function markAsRead(id) {
            $.ajax({
                url: "{{ url('notifications') }}/" + id + "/read",
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        location.reload();
                    }
                }
            });
        }

        function markAllAsRead() {
            $.ajax({
                url: "{{ route('notifications.readAll') }}",
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'All notifications marked as read',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            location.reload();
                        });
                    }
                }
            });
        }

        function deleteNotification(id) {
            Swal.fire({
                title: 'Are you sure?',
                text: "This notification will be deleted!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ url('notifications') }}/" + id,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.success) {
                                location.reload();
                            }
                        }
                    });
                }
            });
        }
    </script>
@stop