@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ __('admin/notifications.all_notifications') }}</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('admin/notifications.dashboard') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/notifications.title') }}</li>
                </ol>
            </div>
        </div>

        <div class="col-lg-12 sticky-menu-bar">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="flex-grow-1 d-flex flex-wrap align-items-center gap-2">
                            <button type="button" onclick="markAllAsRead()" class="btn btn-success">
                                <i class="ri-check-double-line me-1 align-bottom"></i> {{ __('admin/notifications.mark_all_as_read') }}
                            </button>
                            <button type="button"
                                class="btn btn-soft-danger material-shadow-none open-delete-modal"
                                data-bs-toggle="modal"
                                href="#purgeOldNotificationsModal"
                                data-delete-url="{{ route('admin.notifications.purge-old') }}"
                                data-item-name="{{ __('admin/notifications.purge_old_modal_item_name', ['days' => 30]) }}"
                                data-item-type="{{ __('admin/notifications.purge_old_modal_title_suffix') }}">
                                <i class="ri-time-line me-1 align-bottom"></i> {{ __('admin/notifications.purge_old_button', ['days' => 30]) }}
                            </button>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="hstack text-nowrap gap-2">
                                <button class="btn btn-soft-danger material-shadow-none" id="remove-actions" onclick="deleteMultiple()" style="display: none;">
                                    <i class="ri-delete-bin-2-line"></i> {{ __('admin/notifications.delete_selected') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">{{ __('admin/notifications.list_title') }}</h4>
                    <div class="flex-shrink-0">
                        <div class="d-flex gap-2">
                            <button class="btn btn-soft-info btn-sm" onclick="filterNotifications('all')">
                                <i class="ri-notification-line me-1"></i> {{ __('admin/notifications.all') }}
                            </button>
                            <button class="btn btn-soft-warning btn-sm" onclick="filterNotifications('unread')">
                                <i class="ri-notification-badge-line me-1"></i> {{ __('admin/notifications.unread') }}
                            </button>
                            <button class="btn btn-soft-success btn-sm" onclick="filterNotifications('read')">
                                <i class="ri-checkbox-circle-line me-1"></i> {{ __('admin/notifications.read') }}
                            </button>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="text-muted">
                            {{ __('admin/notifications.showing') }} <strong>{{ $notifications->count() }}</strong> {{ __('admin/notifications.of') }} <strong>{{ $notifications->total() }}</strong> {{ __('admin/notifications.notifications_count') }}
                        </div>
                    </div>

                    <div class="table-responsive table-card">
                        <table class="table align-middle table-nowrap table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col" style="width: 50px;">
                                        <div class="form-check">
                                            <input class="form-check-input fs-15" type="checkbox" id="checkAll" value="option">
                                        </div>
                                    </th>
                                    <th scope="col" style="width: 60px;"></th>
                                    <th scope="col">{{ __('admin/notifications.notification') }}</th>
                                    <th scope="col">{{ __('admin/notifications.type') }}</th>
                                    <th scope="col">{{ __('admin/notifications.date') }}</th>
                                    <th scope="col">{{ __('admin/notifications.status') }}</th>
                                    <th scope="col" class="text-end">{{ __('admin/notifications.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($notifications as $notification)
                                <tr class="{{ !$notification->is_read ? 'table-active' : '' }}" data-notification-id="{{ $notification->id }}" data-read="{{ $notification->is_read ? 'true' : 'false' }}">
                                    <th scope="row">
                                        <div class="form-check">
                                            <input class="form-check-input fs-15" type="checkbox" name="chk_child" value="{{ $notification->id }}">
                                        </div>
                                    </th>
                                    <td>
                                        <div class="avatar-xs">
                                            <span class="avatar-title {{ $notification->type == 'success' ? 'bg-success-subtle text-success' : ($notification->type == 'warning' ? 'bg-warning-subtle text-warning' : ($notification->type == 'danger' ? 'bg-danger-subtle text-danger' : 'bg-info-subtle text-info')) }} rounded-circle fs-16">
                                                <i class="{{ $notification->icon ?? 'bx bx-bell' }}"></i>
                                            </span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex flex-column">
                                            <h6 class="mb-1 {{ !$notification->is_read ? 'fw-bold' : '' }}">
                                                {{ $notification->title }}
                                            </h6>
                                            @if(isset($notification->notification_data['message']))
                                            <p class="text-muted mb-0 small">
                                                {!! Str::limit(strip_tags($notification->notification_data['message']), 100) !!}
                                            </p>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $notification->type == 'success' ? 'success' : ($notification->type == 'warning' ? 'warning' : ($notification->type == 'danger' ? 'danger' : 'info')) }}-subtle text-{{ $notification->type == 'success' ? 'success' : ($notification->type == 'warning' ? 'warning' : ($notification->type == 'danger' ? 'danger' : 'info')) }}">
                                            {{ __('admin/notifications.' . $notification->type) }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="text-muted">{{ $notification->created_at->diffForHumans() }}</span>
                                        <br>
                                        <small class="text-muted">{{ $notification->created_at->format('d/m/Y H:i') }}</small>
                                    </td>
                                    <td>
                                        @if($notification->is_read)
                                        <span class="badge bg-success-subtle text-success">
                                            <i class="ri-checkbox-circle-line align-middle me-1"></i> {{ __('admin/notifications.read') }}
                                        </span>
                                        @else
                                        <span class="badge bg-warning-subtle text-warning">
                                            <i class="ri-notification-badge-line align-middle me-1"></i> {{ __('admin/notifications.unread') }}
                                        </span>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        <div class="hstack gap-1 justify-content-end">
                                            @if(!$notification->is_read)
                                            <button class="btn btn-icon btn-soft-success" onclick="markAsRead('{{ $notification->id }}')" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/notifications.mark_as_read') }}">
                                                <i class="ri-check-line"></i>
                                            </button>
                                            @else
                                            <button class="btn btn-icon btn-soft-warning" onclick="markAsUnread('{{ $notification->id }}')" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/notifications.mark_as_unread') }}">
                                                <i class="ri-notification-badge-line"></i>
                                            </button>
                                            @endif
                                            <a href="{{ route('admin.notifications.show', $notification->id) }}" class="btn btn-icon btn-soft-info" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/notifications.view_notification') }}">
                                                <i class="ri-eye-line"></i>
                                            </a>
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/notifications.delete') }}">
                                                <button class="open-delete-modal btn btn-icon btn-soft-danger"
                                                    data-bs-toggle="modal"
                                                    href="#deleteRecordModal"
                                                    data-delete-url="{{ route('admin.notifications.destroy', $notification->id) }}"
                                                    data-item-name="{{ $notification->title }}"
                                                    data-item-type="{{ __('admin/notifications.this_notification') }}"
                                                    id="delete-record-{{ $notification->id }}">
                                                    <i class="ri-delete-bin-line"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center py-5">
                                        <div class="text-muted">
                                            <i class="ri-notification-off-line fs-24 mb-2"></i>
                                            <p class="mb-0">{{ __('admin/notifications.no_notifications') }}</p>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if($notifications->hasPages())
                    <div class="d-flex justify-content-end mt-5">
                        {!! $notifications->links('pagination::bootstrap-5') !!}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<x-admin.delete-modal
    item-type="notification"
    confirm-text="{{ __('admin/notifications.delete_confirm') }}"
    delete-text="{{ __('admin/notifications.delete_text') }}" />

<x-admin.delete-modal
    modal-id="purgeOldNotificationsModal"
    :use-delete-method="false"
    item-type=""
    confirm-text="{{ __('admin/notifications.purge_old_modal_confirm_prefix') }}"
    delete-text="{{ __('admin/notifications.delete_text') }}">
    <input type="hidden" name="days" value="30">
</x-admin.delete-modal>

<x-admin.toast-messages />

@endsection

@push('script')
<script>
    $(document).ready(function() {
        ischeckboxcheck();

        $('#checkAll').on('click', function() {
            var isChecked = this.checked;
            $('input[name="chk_child"]').each(function() {
                this.checked = isChecked;
                if (isChecked) {
                    $(this).closest("tr").addClass("table-active");
                } else {
                    $(this).closest("tr").removeClass("table-active");
                }
            });
            updateRemoveButton();
        });
    });

    function ischeckboxcheck() {
        Array.from(document.getElementsByName("chk_child")).forEach(function(checkbox) {
            checkbox.addEventListener("change", function(e) {
                if (checkbox.checked) {
                    e.target.closest("tr").classList.add("table-active");
                } else {
                    e.target.closest("tr").classList.remove("table-active");
                }
                updateCheckAllState();
                updateRemoveButton();
            });
        });
    }

    function updateCheckAllState() {
        var totalCheckboxes = document.querySelectorAll('input[name="chk_child"]').length;
        var checkedCheckboxes = document.querySelectorAll('input[name="chk_child"]:checked').length;
        var checkAllBox = document.getElementById('checkAll');

        if (checkAllBox) {
            checkAllBox.checked = totalCheckboxes === checkedCheckboxes && totalCheckboxes > 0;
            checkAllBox.indeterminate = checkedCheckboxes > 0 && checkedCheckboxes < totalCheckboxes;
        }
    }

    function updateRemoveButton() {
        var checkedCount = document.querySelectorAll('input[name="chk_child"]:checked').length;
        var removeButton = document.getElementById('remove-actions');

        if (removeButton) {
            removeButton.style.display = checkedCount > 0 ? 'block' : 'none';
        }
    }

    function markAsRead(id) {
        window.adminNotifications.markAsRead(id);
    }

    function markAsUnread(id) {
        window.adminNotifications.markAsUnread(id);
    }

    function markAllAsRead() {
        window.adminNotifications.markAllAsRead();
    }

    function filterNotifications(filter) {
        const rows = document.querySelectorAll('tbody tr[data-notification-id]');
        
        rows.forEach(row => {
            const isRead = row.dataset.read === 'true';
            
            if (filter === 'all') {
                row.style.display = '';
            } else if (filter === 'unread') {
                row.style.display = !isRead ? '' : 'none';
            } else if (filter === 'read') {
                row.style.display = isRead ? '' : 'none';
            }
        });
    }

    function deleteNotification(id) {
        if (confirm('{{ __("admin/notifications.delete_confirm") }}')) {
            fetch(`{{ route('admin.notifications.index') }}/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
            });
        }
    }

    $('#deleteRecordModal').on('hidden.bs.modal', function() {
        var modal = $(this);
        modal.find('form').find('input[name="ids[]"]').remove();
        modal.find('.modal-body p').text('{{ __("admin/notifications.delete_confirm") }}');
        modal.find('#item-name-text-deleteRecordModal').text('');
        modal.find('#item-type-text-deleteRecordModal').text('');
    });

    function deleteMultiple() {
        var selectedIds = [];
        var selectedNames = [];

        document.querySelectorAll('input[name="chk_child"]:checked').forEach(function(checkbox) {
            selectedIds.push(checkbox.value);
            var row = checkbox.closest('tr');
            var firstname = row.cells[3].textContent.trim();
            var lastname = row.cells[4].textContent.trim();
            selectedNames.push(firstname + ' ' + lastname);
        });

        if (selectedIds.length === 0) {
            alert('{{ __("admin/notifications.select_at_least_one") }}');
            return;
        }

        var modal = $('#deleteRecordModal');
        if (modal.length) {
            var itemText = selectedIds.length + ' {{ __("admin/notifications.members_count") }}';
            var confirmText = '{{ __("admin/notifications.delete_multiple_confirm") }} ' + selectedIds.length + ' {{ __("admin/notifications.members") }}';

            modal.find('#item-name-text-deleteRecordModal').text(selectedNames.join(', '));
            modal.find('#item-type-text-deleteRecordModal').text(itemText);
            modal.find('.modal-body p').text(confirmText);
            modal.find('form').attr('action', '{{ route("admin.notifications.destroy-multiple") }}');
            modal.find('form').attr('method', 'POST');

            modal.find('form').find('input[name="ids[]"]').remove();
            selectedIds.forEach(function(id) {
                var input = $('<input>').attr({
                    type: 'hidden',
                    name: 'ids[]',
                    value: id
                });
                modal.find('form').append(input);
            });

            modal.modal('show');

            // console.log("{{ route('admin.notifications.destroy-multiple') }}');
        }
    }
</script>
@endpush