@extends('layouts.digitar')

@section('content')
    <div class="the-box rounded">
        <h1>Central de Notificações</h1>
        <div class="row" style="margin-bottom: 10px;">
            <link rel="stylesheet" href="{{ asset('assets/css/notification.css') }}">
            <div class="notification-container container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="mark-all-btn">
                            <a href="#" class="btn btn-success" id="mark-all-read" title="Marcar todas como lidas">
                                <i class="fa fa-check"></i> Marcar todas como lidas
                            </a>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label for="filter-type">Filtrar por Tipo:</label>
                                <select id="filter-type" class="form-control">
                                    <option value="">Todos</option>
                                    <option value="tramitacao">Tramitação</option>
                                    <option value="protocolo">Protocolo</option>
                                    <option value="assinatura">Assinatura</option>
                                    <option value="votacao">Votação</option>
                                </select>
                            </div>
                        </div>
                        <br />

                        <div class="notification-card">
                            <div class="notification-header text-center">
                                <h4 style="margin: 0; font-weight: 600;"></h4>
                                <small class="d-block mt-1" style="font-size: 16px;">Você tem <strong id="unread-count"
                                        style="color:red;">{{ $unreadCount }}</strong>
                                    notificação{{ $unreadCount != 1 ? 'es' : '' }} não
                                    lida{{ $unreadCount != 1 ? 's' : '' }}</small>
                            </div>

                            <div class="table-responsive">
                                <table class="table-hover notification-table table">
                                    <thead>
                                        <tr>
                                            <th class="text-center" style="width: 60%;">Tipo de Processo</th>
                                            <th class="text-center" style="width: 20%;">Status</th>
                                            <th class="text-center" style="width: 20%;">Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($notifications as $n)
                                            @php
                                                $data = $n->data;
                                                $title = $data['title'] ?? 'Nova notificação';
                                                $message = $data['message'] ?? '';
                                                $itemLabel = $data['item_label'] ?? '';
                                                $itemType = $data['item_type'] ?? '';
                                                $actionLabel = $data['action_label'] ?? 'Abrir';
                                                $actionLink = $data['action_link'] ?? ($data['link'] ?? '#');
                                                $isRead = $n->read_at != null;
                                            @endphp
                                            <tr data-notification-id="{{ $n->id }}"
                                                data-type="{{ $data['type'] ?? 'default' }}"
                                                class="{{ $isRead ? '' : 'unread' }}">
                                                <td data-label="Tipo de Processo">
                                                    <div class="notification-content">
                                                        <span class="notification-icon">
                                                            <i class="fa fa-file-text-o"></i>
                                                        </span>
                                                        <div>
                                                            <a class="notification-link" href="{{ $data['link'] ?? '#' }}">
                                                                {{ $title }}
                                                            </a>
                                                            @if ($itemType || $itemLabel)
                                                                <div class="small" style="margin-top: 4px; font-weight: 600;">
                                                                    {{ $itemType }}{{ $itemType && $itemLabel ? ': ' : '' }}{{ $itemLabel }}
                                                                </div>
                                                            @endif
                                                            @if ($message)
                                                                <div class="text-muted small" style="margin-top: 6px;">
                                                                    {{ $message }}
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    @if (!$isRead)
                                                        <div class="text-muted small mt-2">
                                                            <i class="fa fa-clock-o"></i> Recebida em:
                                                            {{ \Carbon\Carbon::parse($n->created_at)->format('d/m/Y H:i') }}
                                                        </div>
                                                    @endif
                                                </td>
                                                <td data-label="Status" class="text-center">
                                                    <span
                                                        class="status-badge {{ $isRead ? 'badge-read' : 'badge-unread' }} toggle-notification"
                                                        data-id="{{ $n->id }}"
                                                        data-read="{{ $isRead ? 'true' : 'false' }}">
                                                        {{ $isRead ? 'Lida' : 'Não Lida' }}
                                                    </span>
                                                </td>
                                                <td data-label="Ações" class="text-center">
                                                    <a class="btn btn-sm btn-info"
                                                        href="{{ $actionLink }}"
                                                        style="margin-right: 6px;">
                                                        {{ $actionLabel }}
                                                    </a>
                                                    <button class="btn btn-sm btn-danger delete-notification"
                                                        data-id="{{ $n->id }}"
                                                        data-url="{{ route('notifications.destroy', $n->id) }}"
                                                        title="Excluir notificação">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3">
                                                    <div class="empty-notifications">
                                                        <i class="fa fa-bell-slash"></i>
                                                        <h4>Nenhuma notificação encontrada</h4>
                                                        <p>Quando houver novas notificações, elas aparecerão aqui.</p>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            @if ($notifications->hasPages())
                                <div class="pagination-container text-center">
                                    {{ $notifications->links() }}
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Scripts --}}

    <script>
        $('#filter-type').change(function() {
            var selectedType = $(this).val();

            $('.notification-table tbody tr').each(function() {
                var rowType = $(this).data('type');

                if (!selectedType || rowType === selectedType) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });

        $(document).ready(function() {
            $('.toggle-notification').click(function() {
                var badge = $(this);
                var notificationId = badge.data('id');
                var isCurrentlyRead = badge.data('read') === 'true';

                $.ajax({
                    url: '/notifications/toggle/' + notificationId,
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            // Atualizar a badge
                            if (isCurrentlyRead) {
                                badge.removeClass('badge-read').addClass('badge-unread');
                                badge.text('Não Lida');
                                badge.data('read', 'false');

                                // Adicionar classe unread à linha
                                badge.closest('tr').addClass('unread');

                                // Adicionar informação de data
                                badge.closest('tr').find('td:first').append(
                                    '<div class="text-muted small mt-2"><i class="fa fa-clock-o"></i> Recebida em: {{ date('d/m/Y H:i') }}</div>'
                                );
                            } else {
                                badge.removeClass('badge-unread').addClass('badge-read');
                                badge.text('Lida');
                                badge.data('read', 'true');

                                // Remover classe unread da linha
                                badge.closest('tr').removeClass('unread');

                                // Remover informação de data
                                badge.closest('tr').find('.text-muted').remove();
                            }

                            // Atualizar contador
                            $('#unread-count').text(response.unread_count);
                        }
                    },
                    error: function() {
                        alert('Ocorreu um erro ao alterar o status da notificação.');
                    }
                });
            });

            // Funcionalidade para excluir notificação
            $('.delete-notification').click(function() {
                var button = $(this);
                var notificationId = button.data('id');
                var url = button.data('url');

                if (confirm('Tem certeza que deseja excluir esta notificação?')) {
                    $.ajax({
                        url: url,
                        method: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                // Verificar se a notificação não foi lida para atualizar o contador
                                var isUnread = button.closest('tr').hasClass('unread');

                                // Remover a linha da notificação
                                button.closest('tr').fadeOut(300, function() {
                                    $(this).remove();

                                    // Atualizar contador se a notificação não estava lida
                                    if (isUnread) {
                                        var countElement = $('#unread-count');
                                        var count = parseInt(countElement.text());
                                        if (count > 0) {
                                            countElement.text(count - 1);
                                        }
                                    }

                                    // Verificar se não há mais notificações
                                    if ($('.notification-table tbody tr').length ===
                                        0) {
                                        $('.notification-table tbody').append(
                                            '<tr><td colspan="3"><div class="empty-notifications"><i class="fa fa-bell-slash"></i><h4>Nenhuma notificação encontrada</h4><p>Quando houver novas notificações, elas aparecerão aqui.</p></div></td></tr>'
                                        );
                                    }
                                });
                            }
                        },
                        error: function() {
                            alert('Ocorreu um erro ao excluir a notificação.');
                        }
                    });
                }
            });

            // Funcionalidade para marcar todas como lidas
            $('#mark-all-read').click(function(e) {
                e.preventDefault();

                // Encontrar todas as notificações não lidas
                var unreadNotifications = $('.badge-unread');
                if (unreadNotifications.length === 0) {
                    alert('Todas as notificações já estão marcadas como lidas.');
                    return;
                }

                if (confirm('Tem certeza que deseja marcar todas as notificações como lidas?')) {
                    // Fazer requisição para cada notificação não lida
                    var processed = 0;

                    unreadNotifications.each(function() {
                        var badge = $(this);
                        var notificationId = badge.data('id');

                        $.ajax({
                            url: '/notifications/toggle/' + notificationId,
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                // Atualizar a badge
                                badge.removeClass('badge-unread').addClass(
                                    'badge-read');
                                badge.text('Lida');
                                badge.data('read', 'true');

                                // Remover classe unread da linha
                                badge.closest('tr').removeClass('unread');

                                // Remover informação de data
                                badge.closest('tr').find('.text-muted').remove();

                                processed++;

                                if (processed === unreadNotifications.length) {
                                    $('#unread-count').text('0');
                                }
                            },
                            error: function() {
                                processed++;
                                console.error('Erro ao marcar notificação como lida');
                            }
                        });
                    });
                }
            });
        });
    </script>
@endsection