{{-- resources/views/notifications/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Notifications - Todo Reminder')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-bell me-2"></i>Notifications</h2>
    {{-- @if($notifications->where('is_read', false)->count() > 0)
        <button type="button" class="btn btn-outline-primary" id="mark-all-read-btn">
            <i class="bi bi-check-all me-2"></i>Mark All as Read
        </button>
    @endif --}}
</div>

@if($notifications->count() > 0)
    <div class="list-group">
        @foreach($notifications as $notification)
            <div class="list-group-item {{ !$notification->is_read ? 'list-group-item-light border-start border-primary border-3' : '' }}">
                <div class="d-flex w-100 justify-content-between align-items-start">
                    <div class="flex-grow-1">
                        <div class="d-flex align-items-center mb-2">
                            <i class="bi bi-bell-fill text-primary me-2"></i>
                            <h6 class="mb-0">{{ $notification->title }}</h6>
                            @if(!$notification->is_read)
                                <span class="badge bg-primary ms-2">New</span>
                            @endif
                        </div>
                        <p class="mb-2">{{ $notification->message }}</p>
                        @if($notification->todo)
                            <div class="mb-2">
                                <a href="{{ route('todos.show', $notification->todo) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye me-1"></i>View Todo
                                </a>
                            </div>
                        @endif
                        <small class="text-muted">
                            <i class="bi bi-clock me-1"></i>
                            {{ $notification->created_at->diffForHumans() }}
                        </small>
                    </div>
                    {{-- <div class="ms-3">
                        @if(!$notification->is_read)
                            <button type="button" class="btn btn-sm btn-outline-success mark-read-btn" 
                                    data-notification-id="{{ $notification->id }}">
                                <i class="bi bi-check me-1"></i>Mark as Read
                            </button>
                        @endif
                        <button type="button" class="btn btn-sm btn-outline-danger ms-1 delete-notification-btn" 
                                data-notification-id="{{ $notification->id }}">
                            <i class="bi bi-trash me-1"></i>Delete
                        </button>
                    </div> --}}
                </div>
            </div>
        @endforeach
    </div>

    {{-- Pagination --}}
    <div class="d-flex justify-content-center mt-4">
        {{ $notifications->links() }}
    </div>
@else
    <div class="text-center py-5">
        <i class="bi bi-bell-slash text-muted" style="font-size: 4rem;"></i>
        <h4 class="text-muted mt-3">No Notifications</h4>
        <p class="text-muted">You don't have any notifications yet.</p>
        <a href="{{ route('todos.index') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-2"></i>Create Your First Todo
        </a>
    </div>
@endif

{{-- Delete Confirmation Modal --}}
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Notification</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this notification? This action cannot be undone.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirm-delete-btn">Delete</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let notificationToDelete = null;

    // Mark single notification as read
    document.querySelectorAll('.mark-read-btn').forEach(function(button) {
        button.addEventListener('click', function() {
            const notificationId = this.getAttribute('data-notification-id');
            const buttonElement = this;
            const listItem = buttonElement.closest('.list-group-item');
            
            fetch(`/notifications/${notificationId}/mark-read`, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    // Remove the button and badge
                    buttonElement.remove();
                    const badge = listItem.querySelector('.badge');
                    if(badge) badge.remove();
                    
                    // Remove styling for unread notification
                    listItem.classList.remove('list-group-item-light', 'border-start', 'border-primary', 'border-3');
                    
                    // Show success message
                    showToast('Notification marked as read', 'success');
                    
                    // Update mark all button visibility
                    updateMarkAllButton();
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showToast('Failed to mark notification as read', 'error');
            });
        });
    });

    // Mark all notifications as read
    const markAllBtn = document.getElementById('mark-all-read-btn');
    if(markAllBtn) {
        markAllBtn.addEventListener('click', function() {
            fetch('/notifications/mark-all-read', {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    // Remove all mark as read buttons and badges
                    document.querySelectorAll('.mark-read-btn').forEach(btn => btn.remove());
                    document.querySelectorAll('.badge').forEach(badge => badge.remove());
                    document.querySelectorAll('.list-group-item').forEach(item => {
                        item.classList.remove('list-group-item-light', 'border-start', 'border-primary', 'border-3');
                    });
                    
                    // Hide mark all button
                    markAllBtn.style.display = 'none';
                    
                    showToast('All notifications marked as read', 'success');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showToast('Failed to mark all notifications as read', 'error');
            });
        });
    }

    // Delete notification
    document.querySelectorAll('.delete-notification-btn').forEach(function(button) {
        button.addEventListener('click', function() {
            notificationToDelete = this.getAttribute('data-notification-id');
            const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            deleteModal.show();
        });
    });

    const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
    if(confirmDeleteBtn) {
        confirmDeleteBtn.addEventListener('click', function() {
            if(notificationToDelete) {
                fetch(`/notifications/${notificationToDelete}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if(data.success) {
                        // Remove the notification from DOM
                        const notificationElement = document.querySelector(`.delete-notification-btn[data-notification-id="${notificationToDelete}"]`).closest('.list-group-item');
                        notificationElement.style.transition = 'opacity 0.3s';
                        notificationElement.style.opacity = '0';
                        
                        setTimeout(() => {
                            notificationElement.remove();
                            
                            // Check if no notifications left
                            if(document.querySelectorAll('.list-group-item').length === 0) {
                                location.reload();
                            }
                            
                            updateMarkAllButton();
                        }, 300);
                        
                        const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
                        deleteModal.hide();
                        showToast('Notification deleted successfully', 'success');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showToast('Failed to delete notification', 'error');
                    const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
                    deleteModal.hide();
                });
            }
        });
    }

    function updateMarkAllButton() {
        const unreadCount = document.querySelectorAll('.mark-read-btn').length;
        const markAllBtn = document.getElementById('mark-all-read-btn');
        if(markAllBtn && unreadCount === 0) {
            markAllBtn.style.display = 'none';
        }
    }

    function showToast(message, type) {
        const toastClass = type === 'success' ? 'bg-success' : 'bg-danger';
        const toastHtml = `
            <div class="toast align-items-center text-white ${toastClass} border-0" role="alert">
                <div class="d-flex">
                    <div class="toast-body">${message}</div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            </div>
        `;
        
        // Add toast container if not exists
        let toastContainer = document.getElementById('toast-container');
        if(!toastContainer) {
            toastContainer = document.createElement('div');
            toastContainer.id = 'toast-container';
            toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
            document.body.appendChild(toastContainer);
        }
        
        const toastElement = document.createElement('div');
        toastElement.innerHTML = toastHtml;
        const toast = toastElement.firstElementChild;
        toastContainer.appendChild(toast);
        
        const bsToast = new bootstrap.Toast(toast);
        bsToast.show();
        
        // Remove toast element after it's hidden
        toast.addEventListener('hidden.bs.toast', function() {
            toast.remove();
        });
    }
});
</script>
@endpush