@extends('admin.layouts.app')

@section('title', 'Notificações')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">
                        <i class="fas fa-bell text-primary"></i>
                        Notificações
                    </h1>
                    <p class="text-muted mb-0">Gerencie todas as notificações do sistema</p>
                </div>
                <div>
                    <a href="{{ route('admin.notificacoes.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i>
                        Nova Notificação
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Estatísticas -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="h4 mb-0">{{ $stats['total'] }}</div>
                            <div>Total</div>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-bell fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="h4 mb-0">{{ $stats['nao_lidas'] }}</div>
                            <div>Não Lidas</div>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-envelope fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="h4 mb-0">{{ $stats['urgentes'] }}</div>
                            <div>Urgentes</div>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-exclamation-triangle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="h4 mb-0">{{ $stats['hoje'] }}</div>
                            <div>Hoje</div>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-calendar-day fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.notificacoes.index') }}">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Buscar</label>
                            <input type="text" class="form-control" name="busca" 
                                   value="{{ request('busca') }}" 
                                   placeholder="Título ou mensagem...">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Status</label>
                            <select class="form-control" name="status">
                                <option value="">Todos</option>
                                <option value="nao_lida" {{ request('status') === 'nao_lida' ? 'selected' : '' }}>
                                    Não Lidas
                                </option>
                                <option value="lida" {{ request('status') === 'lida' ? 'selected' : '' }}>
                                    Lidas
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Prioridade</label>
                            <select class="form-control" name="prioridade">
                                <option value="">Todas</option>
                                <option value="baixa" {{ request('prioridade') === 'baixa' ? 'selected' : '' }}>
                                    Baixa
                                </option>
                                <option value="media" {{ request('prioridade') === 'media' ? 'selected' : '' }}>
                                    Média
                                </option>
                                <option value="alta" {{ request('prioridade') === 'alta' ? 'selected' : '' }}>
                                    Alta
                                </option>
                                <option value="urgente" {{ request('prioridade') === 'urgente' ? 'selected' : '' }}>
                                    Urgente
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Tipo</label>
                            <select class="form-control" name="tipo">
                                <option value="">Todos</option>
                                <option value="info" {{ request('tipo') === 'info' ? 'selected' : '' }}>Info</option>
                                <option value="sucesso" {{ request('tipo') === 'sucesso' ? 'selected' : '' }}>Sucesso</option>
                                <option value="alerta" {{ request('tipo') === 'alerta' ? 'selected' : '' }}>Alerta</option>
                                <option value="erro" {{ request('tipo') === 'erro' ? 'selected' : '' }}>Erro</option>
                                <option value="sistema" {{ request('tipo') === 'sistema' ? 'selected' : '' }}>Sistema</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Data</label>
                            <div class="input-group">
                                <input type="date" class="form-control" name="data_inicio" 
                                       value="{{ request('data_inicio') }}" placeholder="De">
                                <input type="date" class="form-control" name="data_fim" 
                                       value="{{ request('data_fim') }}" placeholder="Até">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        @if(auth()->user()->hasRole('super_admin'))
                        <div class="form-group">
                            <label>Loja</label>
                            <select class="form-control" name="loja_id">
                                <option value="">Todas as lojas</option>
                                @foreach($lojas as $loja)
                                <option value="{{ $loja->id }}" {{ request('loja_id') == $loja->id ? 'selected' : '' }}>
                                    {{ $loja->nome }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        @endif
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Usuário</label>
                            <select class="form-control" name="user_id">
                                <option value="">Todos os usuários</option>
                                @foreach($usuarios as $usuario)
                                <option value="{{ $usuario->id }}" {{ request('user_id') == $usuario->id ? 'selected' : '' }}>
                                    {{ $usuario->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Por página</label>
                            <select class="form-control" name="per_page">
                                <option value="15" {{ request('per_page') == 15 ? 'selected' : '' }}>15</option>
                                <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                                <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                                <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <div class="btn-group w-100">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> Filtrar
                                </button>
                                <a href="{{ route('admin.notificacoes.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Limpar
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Lista de Notificações -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                Notificações ({{ $notificacoes->total() }})
            </h3>
        </div>
        <div class="card-body p-0">
            @if($notificacoes->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Status</th>
                            <th>Prioridade</th>
                            <th>Título</th>
                            <th>Usuário</th>
                            <th>Tipo</th>
                            <th>Criado</th>
                            <th width="120">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($notificacoes as $notificacao)
                        <tr class="{{ !$notificacao->lida ? 'table-active' : '' }}">
                            <td>
                                @if(!$notificacao->lida)
                                    <span class="badge badge-warning">Não Lida</span>
                                @else
                                    <span class="badge badge-success">Lida</span>
                                @endif
                            </td>
                            <td>
                                @switch($notificacao->prioridade)
                                    @case('baixa')
                                        <span class="badge badge-secondary">Baixa</span>
                                        @break
                                    @case('media')
                                        <span class="badge badge-info">Média</span>
                                        @break
                                    @case('alta')
                                        <span class="badge badge-warning">Alta</span>
                                        @break
                                    @case('urgente')
                                        <span class="badge badge-danger">Urgente</span>
                                        @break
                                @endswitch
                            </td>
                            <td>
                                <strong>{{ Str::limit($notificacao->titulo, 40) }}</strong>
                                <br>
                                <small class="text-muted">{{ Str::limit($notificacao->mensagem, 60) }}</small>
                                @if($notificacao->imagem)
                                    <br><i class="fas fa-image text-muted"></i>
                                @endif
                            </td>
                            <td>
                                @if($notificacao->user)
                                    {{ $notificacao->user->name }}
                                    <br>
                                    <small class="text-muted">{{ ucfirst($notificacao->user->tipo_usuario) }}</small>
                                @else
                                    <span class="text-muted">Geral</span>
                                @endif
                            </td>
                            <td>
                                @switch($notificacao->tipo)
                                    @case('info')
                                        <i class="fas fa-info-circle text-info"></i> Info
                                        @break
                                    @case('sucesso')
                                        <i class="fas fa-check-circle text-success"></i> Sucesso
                                        @break
                                    @case('alerta')
                                        <i class="fas fa-exclamation-triangle text-warning"></i> Alerta
                                        @break
                                    @case('erro')
                                        <i class="fas fa-times-circle text-danger"></i> Erro
                                        @break
                                    @case('sistema')
                                        <i class="fas fa-cog text-secondary"></i> Sistema
                                        @break
                                @endswitch
                            </td>
                            <td>
                                {{ $notificacao->created_at->format('d/m/Y H:i') }}
                                <br>
                                <small class="text-muted">{{ $notificacao->created_at->diffForHumans() }}</small>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="{{ route('admin.notificacoes.show', $notificacao) }}" 
                                       class="btn btn-outline-primary" title="Ver">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    @can('notificacoes.edit')
                                    <a href="{{ route('admin.notificacoes.edit', $notificacao) }}" 
                                       class="btn btn-outline-warning" title="Editar">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    @endcan
                                    @can('notificacoes.delete')
                                    <button class="btn btn-outline-danger" 
                                            onclick="confirmarExclusao({{ $notificacao->id }})" title="Excluir">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="text-center py-5">
                <i class="fas fa-bell fa-3x text-muted mb-3"></i>
                <h4 class="text-muted">Nenhuma notificação encontrada</h4>
                <p class="text-muted">
                    @if(request()->anyFilled(['busca', 'status', 'prioridade', 'tipo']))
                        Tente ajustar os filtros de busca.
                    @else
                        Nenhuma notificação foi criada ainda.
                    @endif
                </p>
                <a href="{{ route('admin.notificacoes.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Criar Primeira Notificação
                </a>
            </div>
            @endif
        </div>
        
        @if($notificacoes->hasPages())
        <div class="card-footer">
            {{ $notificacoes->appends(request()->query())->links() }}
        </div>
        @endif
    </div>
</div>

<!-- Modal de Confirmação de Exclusão -->
<div class="modal fade" id="modalExclusao" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar Exclusão</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Tem certeza que deseja excluir esta notificação?</p>
                <p class="text-danger"><small>Esta ação não pode ser desfeita.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-danger" onclick="executarExclusao()">
                    <i class="fas fa-trash"></i> Excluir
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
let notificacaoParaExcluir = null;

function confirmarExclusao(id) {
    notificacaoParaExcluir = id;
    $('#modalExclusao').modal('show');
}

function executarExclusao() {
    if (!notificacaoParaExcluir) return;
    
    $.ajax({
        url: `/admin/notificacoes/${notificacaoParaExcluir}`,
        type: 'DELETE',
        data: {
            _token: $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            $('#modalExclusao').modal('hide');
            
            // Recarregar página para atualizar lista
            location.reload();
        },
        error: function(xhr) {
            alert('Erro ao excluir notificação: ' + xhr.responseJSON.message);
        }
    });
}

// Toggle de status (marcar como lida/não lida)
function toggleStatus(notificacaoId, lida) {
    $.ajax({
        url: `/admin/notificacoes/${notificacaoId}/toggle-status`,
        type: 'POST',
        data: {
            _token: $('meta[name="csrf-token"]').attr('content'),
            lida: lida
        },
        success: function(response) {
            // Recarregar para ver mudança
            location.reload();
        },
        error: function(xhr) {
            alert('Erro ao atualizar status: ' + xhr.responseJSON.message);
        }
    });
}

// Auto-refresh a cada 30 segundos para notificações pendentes
setInterval(function() {
    // Verificar se há novas notificações não lidas
    $.get('/admin/notificacoes/pendentes')
     .done(function(data) {
         if (data.count > 0) {
             // Mostrar toast ou atualizar badge
             atualizarBadgeNotificacoes(data.count);
         }
     });
}, 30000);

function atualizarBadgeNotificacoes(count) {
    // Implementar lógica para mostrar toast ou atualizar badge
    console.log(`${count} novas notificações`);
}
</script>
@endsection