@extends('admin.layouts.app')

@section('title', 'Nova 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>
                        Nova Notificação
                    </h1>
                    <p class="text-muted mb-0">Crie uma nova notificação para usuários</p>
                </div>
                <div>
                    <a href="{{ route('admin.notificacoes.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i>
                        Voltar
                    </a>
                </div>
            </div>
        </div>
    </div>

    <form action="{{ route('admin.notificacoes.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <div class="row">
            <!-- Formulário Principal -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Informações da Notificação</h3>
                    </div>
                    <div class="card-body">
                        <!-- Título -->
                        <div class="form-group">
                            <label for="titulo">Título <span class="text-danger">*</span></label>
                            <input type="text" 
                                   class="form-control @error('titulo') is-invalid @enderror" 
                                   id="titulo" 
                                   name="titulo" 
                                   value="{{ old('titulo') }}" 
                                   maxlength="255"
                                   required>
                            @error('titulo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Máximo 255 caracteres. Seja claro e objetivo.
                            </small>
                        </div>

                        <!-- Mensagem -->
                        <div class="form-group">
                            <label for="mensagem">Mensagem <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('mensagem') is-invalid @enderror" 
                                      id="mensagem" 
                                      name="mensagem" 
                                      rows="5"
                                      maxlength="1000"
                                      required>{{ old('mensagem') }}</textarea>
                            @error('mensagem')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Descreva detalhadamente a notificação. Máximo 1000 caracteres.
                            </small>
                        </div>

                        <!-- Ações (Links) -->
                        <div class="form-group">
                            <label>Ações da Notificação</label>
                            <div id="acoes-container">
                                <div class="acao-item mb-3">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <input type="text" 
                                                   class="form-control" 
                                                   name="link_acoes[0][label]" 
                                                   placeholder="Texto do botão (ex: Ver detalhes)"
                                                   maxlength="50">
                                        </div>
                                        <div class="col-md-5">
                                            <input type="url" 
                                                   class="form-control" 
                                                   name="link_acoes[0][url]" 
                                                   placeholder="https://exemplo.com/link">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" 
                                                    class="btn btn-danger btn-sm" 
                                                    onclick="removerAcao(this)"
                                                    style="display:none;">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="adicionarAcao()">
                                <i class="fas fa-plus"></i> Adicionar Ação
                            </button>
                            <small class="form-text text-muted">
                                Opcional. Adicione botões de ação à notificação.
                            </small>
                        </div>

                        <!-- Agendamento -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="agendar_para">Agendar para</label>
                                    <input type="datetime-local" 
                                           class="form-control @error('agendar_para') is-invalid @enderror" 
                                           id="agendar_para" 
                                           name="agendar_para" 
                                           value="{{ old('agendar_para') }}">
                                    @error('agendar_para')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">
                                        Deixe vazio para enviar imediatamente.
                                    </small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="expira_em">Expira em</label>
                                    <input type="datetime-local" 
                                           class="form-control @error('expira_em') is-invalid @enderror" 
                                           id="expira_em" 
                                           name="expira_em" 
                                           value="{{ old('expira_em') }}">
                                    @error('expira_em')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">
                                        A notificação será removida após esta data.
                                    </small>
                                </div>
                            </div>
                        </div>

                        <!-- Imagem -->
                        <div class="form-group">
                            <label for="imagem">Imagem da Notificação</label>
                            <input type="file" 
                                   class="form-control-file @error('imagem') is-invalid @enderror" 
                                   id="imagem" 
                                   name="imagem" 
                                   accept="image/*">
                            @error('imagem')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Formatos aceitos: JPG, PNG, GIF. Tamanho máximo: 2MB.
                            </small>
                        </div>

                        <!-- Pré-visualização -->
                        <div class="form-group">
                            <label>Pré-visualização</label>
                            <div id="preview-container" class="border rounded p-3" style="min-height: 100px; background-color: #f8f9fa;">
                                <p class="text-muted text-center">
                                    <i class="fas fa-eye"></i>
                                    Preencha os campos para ver a pré-visualização
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Configurações Laterais -->
            <div class="col-md-4">
                <!-- Destinatário -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h3 class="card-title">Destinatário</h3>
                    </div>
                    <div class="card-body">
                        <!-- Usuário Específico -->
                        <div class="form-group">
                            <label for="user_id">Usuário</label>
                            <select class="form-control @error('user_id') is-invalid @enderror" 
                                    id="user_id" 
                                    name="user_id">
                                <option value="">Selecione um usuário (opcional)</option>
                                @foreach($usuarios as $usuario)
                                <option value="{{ $usuario->id }}" 
                                        {{ old('user_id') == $usuario->id ? 'selected' : '' }}>
                                    {{ $usuario->name }}
                                    @if($usuario->tipo_usuario !== 'cliente')
                                        - {{ ucfirst($usuario->tipo_usuario) }}
                                    @endif
                                </option>
                                @endforeach
                            </select>
                            @error('user_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Deixe vazio para notificação geral.
                            </small>
                        </div>

                        <!-- Loja -->
                        @if(auth()->user()->hasRole('super_admin'))
                        <div class="form-group">
                            <label for="loja_id">Loja</label>
                            <select class="form-control @error('loja_id') is-invalid @enderror" 
                                    id="loja_id" 
                                    name="loja_id">
                                <option value="">Todas as lojas</option>
                                @foreach($lojas as $loja)
                                <option value="{{ $loja->id }}" 
                                        {{ old('loja_id') == $loja->id ? 'selected' : '' }}>
                                    {{ $loja->nome }}
                                </option>
                                @endforeach
                            </select>
                            @error('loja_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Configurações de Exibição -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h3 class="card-title">Configurações</h3>
                    </div>
                    <div class="card-body">
                        <!-- Tipo -->
                        <div class="form-group">
                            <label for="tipo">Tipo <span class="text-danger">*</span></label>
                            <select class="form-control @error('tipo') is-invalid @enderror" 
                                    id="tipo" 
                                    name="tipo" 
                                    required>
                                <option value="">Selecione o tipo</option>
                                <option value="info" {{ old('tipo') === 'info' ? 'selected' : '' }}>
                                    <i class="fas fa-info-circle"></i> Informativo
                                </option>
                                <option value="sucesso" {{ old('tipo') === 'sucesso' ? 'selected' : '' }}>
                                    <i class="fas fa-check-circle"></i> Sucesso
                                </option>
                                <option value="alerta" {{ old('tipo') === 'alerta' ? 'selected' : '' }}>
                                    <i class="fas fa-exclamation-triangle"></i> Alerta
                                </option>
                                <option value="erro" {{ old('tipo') === 'erro' ? 'selected' : '' }}>
                                    <i class="fas fa-times-circle"></i> Erro
                                </option>
                                <option value="sistema" {{ old('tipo') === 'sistema' ? 'selected' : '' }}>
                                    <i class="fas fa-cog"></i> Sistema
                                </option>
                            </select>
                            @error('tipo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Prioridade -->
                        <div class="form-group">
                            <label for="prioridade">Prioridade <span class="text-danger">*</span></label>
                            <select class="form-control @error('prioridade') is-invalid @enderror" 
                                    id="prioridade" 
                                    name="prioridade" 
                                    required>
                                <option value="">Selecione a prioridade</option>
                                <option value="baixa" {{ old('prioridade') === 'baixa' ? 'selected' : '' }}>
                                    <i class="fas fa-arrow-down"></i> Baixa
                                </option>
                                <option value="media" {{ old('prioridade') === 'media' ? 'selected' : '' }}>
                                    <i class="fas fa-minus"></i> Média
                                </option>
                                <option value="alta" {{ old('prioridade') === 'alta' ? 'selected' : '' }}>
                                    <i class="fas fa-arrow-up"></i> Alta
                                </option>
                                <option value="urgente" {{ old('prioridade') === 'urgente' ? 'selected' : '' }}>
                                    <i class="fas fa-exclamation-triangle"></i> Urgente
                                </option>
                            </select>
                            @error('prioridade')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Ícone -->
                        <div class="form-group">
                            <label for="icone">Ícone (opcional)</label>
                            <input type="text" 
                                   class="form-control @error('icone') is-invalid @enderror" 
                                   id="icone" 
                                   name="icone" 
                                   value="{{ old('icone') }}"
                                   placeholder="fas fa-bell">
                            @error('icone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Classe CSS do ícone (ex: fas fa-bell)
                            </small>
                        </div>
                    </div>
                </div>

                <!-- Ações -->
                <div class="card">
                    <div class="card-body">
                        <button type="submit" class="btn btn-primary btn-block">
                            <i class="fas fa-save"></i> Criar Notificação
                        </button>
                        <a href="{{ route('admin.notificacoes.index') }}" 
                           class="btn btn-secondary btn-block">
                            <i class="fas fa-times"></i> Cancelar
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
let contadorAcoes = 1;

// Adicionar nova ação
function adicionarAcao() {
    const container = document.getElementById('acoes-container');
    const novaAcao = document.createElement('div');
    novaAcao.className = 'acao-item mb-3';
    novaAcao.innerHTML = `
        <div class="row">
            <div class="col-md-5">
                <input type="text" 
                       class="form-control" 
                       name="link_acoes[${contadorAcoes}][label]" 
                       placeholder="Texto do botão"
                       maxlength="50">
            </div>
            <div class="col-md-5">
                <input type="url" 
                       class="form-control" 
                       name="link_acoes[${contadorAcoes}][url]" 
                       placeholder="https://exemplo.com/link">
            </div>
            <div class="col-md-2">
                <button type="button" 
                        class="btn btn-danger btn-sm" 
                        onclick="removerAcao(this)">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    `;
    container.appendChild(novaAcao);
    contadorAcoes++;
    
    // Mostrar botão de remover na primeira ação se houver mais de uma
    atualizarBotoesRemover();
}

// Remover ação
function removerAcao(botao) {
    const acaoItem = botao.closest('.acao-item');
    acaoItem.remove();
    atualizarBotoesRemover();
}

// Atualizar visibilidade dos botões de remover
function atualizarBotoesRemover() {
    const botoesRemover = document.querySelectorAll('.acao-item .btn-danger');
    const acoes = document.querySelectorAll('.acao-item');
    
    // Mostrar botões de remover apenas se houver mais de uma ação
    botoesRemover.forEach(botao => {
        botao.style.display = acoes.length > 1 ? 'block' : 'none';
    });
}

// Atualizar pré-visualização
function atualizarPreview() {
    const titulo = document.getElementById('titulo').value || 'Título da Notificação';
    const mensagem = document.getElementById('mensagem').value || 'Mensagem da notificação aparecerá aqui...';
    const tipo = document.getElementById('tipo').value || 'info';
    const prioridade = document.getElementById('prioridade').value || 'media';
    
    const preview = document.getElementById('preview-container');
    
    const tipos = {
        'info': { icon: 'fas fa-info-circle', color: 'primary' },
        'sucesso': { icon: 'fas fa-check-circle', color: 'success' },
        'alerta': { icon: 'fas fa-exclamation-triangle', color: 'warning' },
        'erro': { icon: 'fas fa-times-circle', color: 'danger' },
        'sistema': { icon: 'fas fa-cog', color: 'secondary' }
    };
    
    const prioridades = {
        'baixa': { badge: 'secondary', text: 'Baixa' },
        'media': { badge: 'info', text: 'Média' },
        'alta': { badge: 'warning', text: 'Alta' },
        'urgente': { badge: 'danger', text: 'Urgente' }
    };
    
    const tipoInfo = tipos[tipo] || tipos.info;
    const prioridadeInfo = prioridades[prioridade] || prioridades.media;
    
    preview.innerHTML = `
        <div class="d-flex align-items-start">
            <div class="mr-3">
                <i class="${tipoInfo.icon} fa-2x text-${tipoInfo.color}"></i>
            </div>
            <div class="flex-grow-1">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <h6 class="mb-0 font-weight-bold">${titulo}</h6>
                    <span class="badge badge-${prioridadeInfo.badge} badge-sm">${prioridadeInfo.text}</span>
                </div>
                <p class="mb-2 text-muted">${mensagem}</p>
                <small class="text-muted">Agora</small>
            </div>
        </div>
    `;
}

// Listeners para atualização da pré-visualização
document.getElementById('titulo').addEventListener('input', atualizarPreview);
document.getElementById('mensagem').addEventListener('input', atualizarPreview);
document.getElementById('tipo').addEventListener('change', atualizarPreview);
document.getElementById('prioridade').addEventListener('change', atualizarPreview);

// Inicializar
document.addEventListener('DOMContentLoaded', function() {
    atualizarBotoesRemover();
    atualizarPreview();
    
    // Validação de datas
    const agendarPara = document.getElementById('agendar_para');
    const expiraEm = document.getElementById('expira_em');
    
    if (agendarPara && expiraEm) {
        agendarPara.addEventListener('change', function() {
            if (this.value) {
                expiraEm.min = this.value;
            } else {
                expiraEm.removeAttribute('min');
            }
        });
    }
});
</script>
@endsection