@extends('dashboard.layouts.app')

@section('title', __('dashboard.Notifications'))
@section('page_heading', __('dashboard.Notifications'))

@section('breadcrumb')
<li class="breadcrumb-item text-muted">
    <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
</li>
<li class="breadcrumb-item">
    <span class="bullet bg-gray-500 w-5px h-2px"></span>
</li>
<li class="breadcrumb-item text-muted">{{ __('dashboard.Notifications') }}</li>
@endsection

@section('content')
<div class="card card-flush shadow-sm">
    <div class="card-header bg-light py-5">
        <h3 class="card-title fw-bolder">
            <span class="card-icon me-2">
                <i class="fa fa-bell text-primary"></i>
            </span>
            {{ __('dashboard.Notifications') }}
        </h3>
        <div class="card-toolbar">
            <span class="badge badge-primary fs-7 me-2" id="total-notifications">
                {{ __('dashboard.Total') }}: {{ $totalNotifications }}
            </span>
            <span class="badge badge-success fs-7 me-2" id="displayed-notifications">
                {{ __('dashboard.Displayed') }}: {{ $notifications->count() }}
            </span>
            <button class="btn btn-sm btn-secondary mark-all-read"
                data-url="{{ route('dashboard.notifications.markAllAsRead') }}">
                <i class="bi bi-check-circle-fill fs-2 me-2"></i> {{ __('dashboard.Mark All as Read') }}
            </button>
            <button class="btn btn-sm btn-danger delete-selected" style="display: none;"
                data-url="{{ route('dashboard.notifications.destroySelected') }}">
                <i class="bi bi-trash-fill fs-2 me-2"></i> {{ __('dashboard.Delete Selected') }}
            </button>
            <button class="btn btn-sm btn-outline-danger delete-all"
                data-url="{{ route('dashboard.notifications.destroyAll') }}">
                <i class="bi bi-trash fs-2 me-2"></i> {{ __('dashboard.Delete All') }}
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="form-check mb-4">
            <input class="form-check-input" type="checkbox" value="" id="select-all" />
            <label class="form-check-label fw-bold" for="select-all">
                {{ __('dashboard.Select All') }}
            </label>
        </div>
        <div id="notifications-list">
            @foreach($notifications as $notification)
            <div class="card mb-3 {{ $notification->is_read ? 'bg-light' : '' }}" data-notification-id="{{ $notification->id }}">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="card-title">
                            <input type="checkbox" class="form-check-input notification-checkbox"
                                name="selected_notifications[]" value="{{ $notification->id }}">
                            <a href="{{ route('dashboard.notifications.show', $notification) }}">
                                {{ $notification->title }}
                            </a>
                        </h5>
                        <p class="card-text">{{ $notification->description }}</p>
                        <p class="card-text">
                            <small class="text-muted">
                                {{ $notification->created_at->diffForHumans() }}
                            </small>
                            @if(!$notification->is_read)
                            <span class="badge bg-primary">{{ __('dashboard.New') }}</span>
                            @endif
                        </p>
                    </div>
                    <div>
                        <button class="btn btn-sm btn-icon btn-danger delete-notification"
                            data-url="{{ route('dashboard.notifications.destroy', $notification) }}">
                            <i class="bi bi-trash-fill fs-2"></i>
                        </button>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        @if($notifications->hasMorePages())
        <div class="text-center mt-3">
            <button id="load-more" class="btn btn-primary"
                data-next-page-url="{{ $notifications->nextPageUrl() }}">
                {{ __('dashboard.Load More') }}
            </button>
        </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Mark all notifications as read
        $('.mark-all-read').on('click', function() {
            $.ajax({
                url: $(this).data('url'),
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    _method: 'PATCH'
                },
                success: function(response) {
                    // Update the is_read status and remove 'New' badge
                    $('#notifications-list .card').each(function() {
                        $(this).addClass('bg-light');
                        $(this).find('.badge.bg-primary').remove();
                    });

                    // Update the unread notifications count in the navbar (if available)
                    if ($('#unread-notifications-count').length > 0) {
                        $('#unread-notifications-count').text('0');
                    }

                    toastr.success('{{ __("dashboard.All notifications marked as read.") }}');
                },
                error: function(xhr) {
                    console.error(xhr);
                    alert('{{ __("dashboard.An error occurred while marking all notifications as read.") }}');
                }
            });
        });

        $('#load-more').click(function() {
            var nextPageUrl = $(this).data('next-page-url');
            if (nextPageUrl) {
                $.ajax({
                    url: nextPageUrl,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        $.each(response.notifications.data, function(index, notification) {
                            var notificationHtml = '<div class="card mb-3 ' + (notification.is_read ? 'bg-light' : '') + '" data-notification-id="' + notification.id + '">';
                            notificationHtml += '<div class="card-body d-flex justify-content-between align-items-center">';
                            notificationHtml += '<div>';
                            notificationHtml += '<h5 class="card-title">';
                            notificationHtml += '<input type="checkbox" class="form-check-input notification-checkbox" name="selected_notifications[]" value="' + notification.id + '">';
                            notificationHtml += '<a href="{{ route('dashboard.notifications.show', '') }}/' + notification.id + '">';
                            notificationHtml += notification.title;
                            notificationHtml += '</a>';
                            notificationHtml += '</h5>';
                            notificationHtml += '<p class="card-text">' + notification.description + '</p>';
                            notificationHtml += '<p class="card-text">';
                            notificationHtml += '<small class="text-muted">' + notification.created_at + '</small>';
                            if (!notification.is_read) {
                                notificationHtml += '<span class="badge bg-primary">{{ __("dashboard.New") }}</span>';
                            }
                            notificationHtml += '</p>';
                            notificationHtml += '</div>';
                            notificationHtml += '<div>';
                            notificationHtml += '<button class="btn btn-sm btn-icon btn-danger delete-notification" data-url="{{ route('dashboard.notifications.destroy', '') }}/' + notification.id + '">';
                            notificationHtml += '<i class="bi bi-trash-fill fs-2"></i>';
                            notificationHtml += '</button>';
                            notificationHtml += '</div>';
                            notificationHtml += '</div>';
                            notificationHtml += '</div>';

                            $('#notifications-list').append(notificationHtml);
                        });

                        if (response.notifications.next_page_url) {
                            $('#load-more').data('next-page-url', response.notifications.next_page_url);
                        } else {
                            $('#load-more').hide();
                        }

                        // Update the displayed notifications count
                        var displayedCount = $('#notifications-list .card').length;
                        $('#displayed-notifications').text("{{ __('dashboard.Displayed') }}: " + displayedCount);
                    },
                    error: function(xhr) {
                        console.error(xhr);
                    }
                });
            }
        });

        // Handle individual notification deletion
        $(document).on('click', '.delete-notification', function() {
            var notificationId = $(this).closest('.card').data('notification-id');
            var deleteUrl = $(this).data('url');
            var card = $(this).closest('.card');

            if (confirm('{{ __("dashboard.Are you sure you want to delete this notification?") }}')) {
                $.ajax({
                    url: deleteUrl,
                    type: 'DELETE',
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        card.remove();
                        // Update the total and displayed notifications count
                        var totalCount = parseInt($('#total-notifications').text().split(': ')[1]);
                        $('#total-notifications').text("{{ __('dashboard.Total') }}: " + (totalCount - 1));
                        var displayedCount = $('#notifications-list .card').length;
                        $('#displayed-notifications').text("{{ __('dashboard.Displayed') }}: " + displayedCount);
                    },
                    error: function(xhr) {
                        console.error(xhr);
                        alert('{{ __("dashboard.An error occurred while deleting the notification.") }}');
                    }
                });
            }
        });

        // Handle select all checkbox
        $(document).on('change', '#select-all', function() {
            $('.notification-checkbox').prop('checked', this.checked);
            toggleDeleteSelectedButton();
        });

        // Handle individual checkbox selection
        $(document).on('change', '.notification-checkbox', function() {
            toggleDeleteSelectedButton();
        });

        // Handle delete selected button
        $('.delete-selected').on('click', function() {
            var selectedIds = [];
            $('.notification-checkbox:checked').each(function() {
                selectedIds.push($(this).val());
            });

            if (selectedIds.length > 0 && confirm('{{ __("dashboard.Are you sure you want to delete the selected notifications?") }}')) {
                $.ajax({
                    url: $(this).data('url'),
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        _method: 'DELETE',
                        ids: selectedIds
                    },
                    success: function(response) {
                        // Remove deleted notifications from the list
                        $('.notification-checkbox:checked').each(function() {
                            $(this).closest('.card').remove();
                        });

                        // Update the total and displayed notifications count
                        var totalCount = parseInt($('#total-notifications').text().split(': ')[1]);
                        $('#total-notifications').text("{{ __('dashboard.Total') }}: " + (totalCount - selectedIds.length));
                        var displayedCount = $('#notifications-list .card').length;
                        $('#displayed-notifications').text("{{ __('dashboard.Displayed') }}: " + displayedCount);

                        // Hide the delete selected button
                        toggleDeleteSelectedButton();
                    },
                    error: function(xhr) {
                        console.error(xhr);
                        alert('{{ __("dashboard.An error occurred while deleting the selected notifications.") }}');
                    }
                });
            }
        });

        // Handle delete all button
        $('.delete-all').on('click', function() {
            if (confirm('{{ __("dashboard.Are you sure you want to delete all notifications?") }}')) {
                $.ajax({
                    url: $(this).data('url'),
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        _method: 'DELETE'
                    },
                    success: function(response) {
                        // Remove all notifications from the list
                        $('#notifications-list').empty();

                        // Update the total and displayed notifications count
                        $('#total-notifications').text("{{ __('dashboard.Total') }}: 0");
                        $('#displayed-notifications').text("{{ __('dashboard.Displayed') }}: 0");

                        // Hide the delete selected button
                        toggleDeleteSelectedButton();
                    },
                    error: function(xhr) {
                        console.error(xhr);
                        alert('{{ __("dashboard.An error occurred while deleting all notifications.") }}');
                    }
                });
            }
        });

        // Function to show or hide the delete selected button based on the number of selected checkboxes
        function toggleDeleteSelectedButton() {
            var selectedCount = $('.notification-checkbox:checked').length;
            if (selectedCount > 0) {
                $('.delete-selected').show();
            } else {
                $('.delete-selected').hide();
            }
        }
    });
</script>
@endsection