@extends('admin.layouts.app')

@section('title', 'Detalhes da Notificação')

@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ção
                    </h1>
                    <p class="text-muted mb-0">Detalhes completos da notificação</p>
                </div>
                <div>
                    @can('notificacoes.edit')
                    <a href="{{ route('admin.notificacoes.edit', $notificacao) }}" class="btn btn-warning">
                        <i class="fas fa-edit"></i> Editar
                    </a>
                    @endcan
                    <a href="{{ route('admin.notificacoes.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Voltar
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Notificação Principal -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">Notificação</h3>
                        <div class="btn-group btn-group-sm">
                            @if(!$notificacao->lida)
                            <button class="btn btn-success" onclick="marcarComoLida(true)">
                                <i class="fas fa-check"></i> Marcar como Lida
                            </button>
                            @else
                            <button class="btn btn-warning" onclick="marcarComoLida(false)">
                                <i class="fas fa-undo"></i> Marcar como Não Lida
                            </button>
                            @endif
                            @can('notificacoes.delete')
                            <button class="btn btn-danger" onclick="confirmarExclusao()">
                                <i class="fas fa-trash"></i> Excluir
                            </button>
                            @endcan
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Cabeçalho da Notificação -->
                    <div class="d-flex align-items-start mb-4">
                        <div class="mr-3">
                            @switch($notificacao->tipo)
                                @case('info')
                                    <i class="fas fa-info-circle fa-3x text-primary"></i>
                                    @break
                                @case('sucesso')
                                    <i class="fas fa-check-circle fa-3x text-success"></i>
                                    @break
                                @case('alerta')
                                    <i class="fas fa-exclamation-triangle fa-3x text-warning"></i>
                                    @break
                                @case('erro')
                                    <i class="fas fa-times-circle fa-3x text-danger"></i>
                                    @break
                                @case('sistema')
                                    <i class="fas fa-cog fa-3x text-secondary"></i>
                                    @break
                                @default
                                    <i class="fas fa-bell fa-3x text-primary"></i>
                            @endswitch
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h4 class="mb-0">{{ $notificacao->titulo }}</h4>
                                <div>
                                    @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
                                </div>
                            </div>
                            <p class="text-muted mb-2">{{ $notificacao->mensagem }}</p>
                            
                            <!-- Ações -->
                            @if($notificacao->link_acoes && count($notificacao->link_acoes) > 0)
                            <div class="mt-3">
                                <h6>Ações disponíveis:</h6>
                                @foreach($notificacao->link_acoes as $acao)
                                    @if(isset($acao['label']) && isset($acao['url']))
                                    <a href="{{ $acao['url'] }}" class="btn btn-primary btn-sm mr-2 mb-2" target="_blank">
                                        {{ $acao['label'] }}
                                        <i class="fas fa-external-link-alt"></i>
                                    </a>
                                    @endif
                                @endforeach
                            </div>
                            @endif
                        </div>
                    </div>

                    <!-- Imagem da Notificação -->
                    @if($notificacao->imagem)
                    <div class="mb-4">
                        <h6>Imagem:</h6>
                        <img src="{{ asset('storage/' . $notificacao->imagem) }}" 
                             alt="Imagem da notificação" 
                             class="img-fluid rounded border">
                    </div>
                    @endif

                    <!-- Timestamps -->
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Criada em:</h6>
                            <p>{{ $notificacao->created_at->format('d/m/Y H:i:s') }}</p>
                            <p class="text-muted small">{{ $notificacao->created_at->diffForHumans() }}</p>
                        </div>
                        
                        @if($notificacao->lida_em)
                        <div class="col-md-6">
                            <h6>Lida em:</h6>
                            <p>{{ $notificacao->lida_em->format('d/m/Y H:i:s') }}</p>
                            <p class="text-muted small">{{ $notificacao->lida_em->diffForHumans() }}</p>
                        </div>
                        @endif
                    </div>

                    <!-- Agendamento e Expiração -->
                    @if($notificacao->agendar_para || $notificacao->expira_em)
                    <div class="row">
                        @if($notificacao->agendar_para)
                        <div class="col-md-6">
                            <h6>Agendada para:</h6>
                            <p>{{ $notificacao->agendar_para->format('d/m/Y H:i:s') }}</p>
                            <p class="text-muted small">{{ $notificacao->agendar_para->diffForHumans() }}</p>
                        </div>
                        @endif
                        
                        @if($notificacao->expira_em)
                        <div class="col-md-6">
                            <h6>Expira em:</h6>
                            <p>{{ $notificacao->expira_em->format('d/m/Y H:i:s') }}</p>
                            <p class="text-muted small">{{ $notificacao->expira_em->diffForHumans() }}</p>
                        </div>
                        @endif
                    </div>
                    @endif

                    <!-- Status Atual -->
                    <div class="mt-4">
                        <h6>Status:</h6>
                        @if(!$notificacao->lida)
                            <span class="badge badge-warning">Não Lida</span>
                        @else
                            <span class="badge badge-success">Lida</span>
                        @endif
                        
                        @if($notificacao->expira_em && $notificacao->expira_em < now())
                            <span class="badge badge-secondary ml-2">Expirada</span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Historial de Interações -->
            <div class="card mt-4">
                <div class="card-header">
                    <h3 class="card-title">Historial</h3>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        <!-- Criação -->
                        <div class="timeline-item">
                            <i class="fas fa-plus bg-primary"></i>
                            <div class="timeline-item-content">
                                <span class="time">
                                    <i class="fas fa-clock"></i> {{ $notificacao->created_at->format('H:i') }}
                                </span>
                                <h6 class="timeline-header">Notificação criada</h6>
                                <div class="timeline-body">
                                    A notificação foi criada e programada para entrega.
                                </div>
                            </div>
                        </div>

                        <!-- Status de Leitura -->
                        @if($notificacao->lida_em)
                        <div class="timeline-item">
                            <i class="fas fa-eye bg-success"></i>
                            <div class="timeline-item-content">
                                <span class="time">
                                    <i class="fas fa-clock"></i> {{ $notificacao->lida_em->format('H:i') }}
                                </span>
                                <h6 class="timeline-header">Notificação lida</h6>
                                <div class="timeline-body">
                                    O usuário visualizou esta notificação.
                                </div>
                            </div>
                        </div>
                        @endif

                        <!-- Agendamento -->
                        @if($notificacao->agendar_para && $notificacao->agendar_para > $notificacao->created_at)
                        <div class="timeline-item">
                            <i class="fas fa-clock bg-info"></i>
                            <div class="timeline-item-content">
                                <span class="time">
                                    <i class="fas fa-clock"></i> {{ $notificacao->agendar_para->format('H:i') }}
                                </span>
                                <h6 class="timeline-header">Notificação entregue</h6>
                                <div class="timeline-body">
                                    Notificação entregue conforme programado.
                                </div>
                            </div>
                        </div>
                        @endif

                        <!-- Expiração -->
                        @if($notificacao->expira_em && $notificacao->expira_em < now())
                        <div class="timeline-item">
                            <i class="fas fa-times bg-secondary"></i>
                            <div class="timeline-item-content">
                                <span class="time">
                                    <i class="fas fa-clock"></i> {{ $notificacao->expira_em->format('H:i') }}
                                </span>
                                <h6 class="timeline-header">Notificação expirada</h6>
                                <div class="timeline-body">
                                    A notificação atingiu sua data de expiração e foi removida.
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar com Informações -->
        <div class="col-md-4">
            <!-- Informações Gerais -->
            <div class="card mb-4">
                <div class="card-header">
                    <h3 class="card-title">Informações</h3>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <td><strong>ID:</strong></td>
                            <td>{{ $notificacao->id }}</td>
                        </tr>
                        <tr>
                            <td><strong>Tipo:</strong></td>
                            <td>
                                @switch($notificacao->tipo)
                                    @case('info') Info @break
                                    @case('sucesso') Sucesso @break
                                    @case('alerta') Alerta @break
                                    @case('erro') Erro @break
                                    @case('sistema') Sistema @break
                                @endswitch
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Prioridade:</strong></td>
                            <td>{{ ucfirst($notificacao->prioridade) }}</td>
                        </tr>
                        <tr>
                            <td><strong>Status:</strong></td>
                            <td>
                                @if(!$notificacao->lida)
                                    Não Lida
                                @else
                                    Lida
                                @endif
                            </td>
                        </tr>
                        @if($notificacao->icone)
                        <tr>
                            <td><strong>Ícone:</strong></td>
                            <td><i class="{{ $notificacao->icone }}"></i> {{ $notificacao->icone }}</td>
                        </tr>
                        @endif
                    </table>
                </div>
            </div>

            <!-- Destinatário -->
            <div class="card mb-4">
                <div class="card-header">
                    <h3 class="card-title">Destinatário</h3>
                </div>
                <div class="card-body">
                    @if($notificacao->user)
                        <div class="d-flex align-items-center mb-3">
                            <div class="avatar mr-3">
                                <img src="{{ $notificacao->user->avatar_url ?? asset('img/user-placeholder.png') }}" 
                                     alt="{{ $notificacao->user->name }}" 
                                     class="rounded-circle" 
                                     style="width: 40px; height: 40px;">
                            </div>
                            <div>
                                <h6 class="mb-0">{{ $notificacao->user->name }}</h6>
                                <small class="text-muted">{{ ucfirst($notificacao->user->tipo_usuario) }}</small>
                                @if($notificacao->user->email)
                                <br>
                                <small class="text-muted">{{ $notificacao->user->email }}</small>
                                @endif
                            </div>
                        </div>
                        
                        @if($notificacao->user->loja)
                        <p><strong>Loja:</strong> {{ $notificacao->user->loja->nome }}</p>
                        @endif
                    @else
                        <p><strong>Destinatário:</strong> Notificação geral</p>
                        
                        @if($notificacao->loja)
                        <p><strong>Loja:</strong> {{ $notificacao->loja->nome }}</p>
                        @else
                        <p><strong>Loja:</strong> Todas as lojas</p>
                        @endif
                    @endif
                </div>
            </div>

            <!-- Estatísticas -->
            <div class="card mb-4">
                <div class="card-header">
                    <h3 class="card-title">Estatísticas</h3>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <h4 class="text-primary">{{ $notificacao->created_at->diffInDays() }}</h4>
                            <small class="text-muted">Dias desde criação</small>
                        </div>
                        <div class="col-6">
                            <h4 class="text-success">
                                @if($notificacao->lida_em)
                                    {{ $notificacao->created_at->diffInMinutes($notificacao->lida_em) }}
                                @else
                                    -
                                @endif
                            </h4>
                            <small class="text-muted">Minutos até leitura</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Ações Rápidas -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Ações Rápidas</h3>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        @can('notificacoes.edit')
                        <a href="{{ route('admin.notificacoes.edit', $notificacao) }}" 
                           class="btn btn-warning btn-block">
                            <i class="fas fa-edit"></i> Editar Notificação
                        </a>
                        @endcan
                        
                        @if(!$notificacao->lida)
                        <button class="btn btn-success btn-block" onclick="marcarComoLida(true)">
                            <i class="fas fa-check"></i> Marcar como Lida
                        </button>
                        @else
                        <button class="btn btn-warning btn-block" onclick="marcarComoLida(false)">
                            <i class="fas fa-undo"></i> Marcar como Não Lida
                        </button>
                        @endif
                        
                        <a href="{{ route('admin.notificacoes.create') }}" 
                           class="btn btn-primary btn-block">
                            <i class="fas fa-plus"></i> Nova Notificação
                        </a>
                        
                        <a href="{{ route('admin.notificacoes.index') }}" 
                           class="btn btn-secondary btn-block">
                            <i class="fas fa-list"></i> Todas as Notificações
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </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><strong>{{ Str::limit($notificacao->titulo, 50) }}</strong></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>
function marcarComoLida(lida) {
    $.ajax({
        url: `/admin/notificacoes/{{ $notificacao->id }}/toggle-status`,
        type: 'POST',
        data: {
            _token: $('meta[name="csrf-token"]').attr('content'),
            lida: lida
        },
        success: function(response) {
            // Recarregar página para ver mudança
            location.reload();
        },
        error: function(xhr) {
            alert('Erro ao atualizar status: ' + xhr.responseJSON.message);
        }
    });
}

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

function executarExclusao() {
    $.ajax({
        url: `/admin/notificacoes/{{ $notificacao->id }}`,
        type: 'DELETE',
        data: {
            _token: $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            // Redirecionar para lista
            window.location.href = '/admin/notificacoes';
        },
        error: function(xhr) {
            alert('Erro ao excluir notificação: ' + xhr.responseJSON.message);
        }
    });
}
</script>
@endsection

@section('styles')
<style>
.timeline {
    position: relative;
    margin: 20px 0;
    padding: 0 0 0 50px;
}

.timeline:before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-item .timeline-item-content {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    border-left: 3px solid #007bff;
    margin-left: 30px;
}

.timeline-item .timeline-header {
    margin-bottom: 5px;
    color: #495057;
}

.timeline-item .timeline-body {
    color: #6c757d;
}

.timeline-item .timeline-header .time {
    font-size: 12px;
    color: #adb5bd;
}

.timeline-item .timeline-header .time i {
    margin-right: 2px;
}
</style>
@endsection