@extends('layouts.app')

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

@section('content')
<div class="max-w-7xl mx-auto">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8">
        <div>
            <h2 class="text-4xl font-bold text-white mb-2 tracking-tight">Notificações</h2>
            <p class="text-slate-400">Gerencie suas notificações e dispare transações</p>
        </div>
        <button onclick="openModal()" class="mt-4 sm:mt-0 px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-all duration-200 font-semibold flex items-center space-x-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            <span>Criar Notificação</span>
        </button>
    </div>

    @if(isset($credenciais) && $credenciais->count() == 0)
        <div class="bg-slate-900 border border-yellow-900/50 rounded-lg p-6 mb-6">
            <div class="flex items-start gap-4">
                <div class="w-10 h-10 bg-yellow-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>
                </div>
                <div>
                    <h3 class="text-yellow-300 font-bold mb-1 text-lg">Nenhuma credencial cadastrada</h3>
                    <p class="text-yellow-200/80">Você precisa cadastrar uma credencial antes de criar notificações. <a href="{{ route('credencial') }}" class="font-semibold underline hover:text-yellow-100 transition">Clique aqui para cadastrar</a>.</p>
                </div>
            </div>
        </div>
    @endif

    @if(isset($produtos) && $produtos->count() == 0)
        <div class="bg-slate-900 border border-yellow-900/50 rounded-lg p-6 mb-6">
            <div class="flex items-start gap-4">
                <div class="w-10 h-10 bg-yellow-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>
                </div>
                <div>
                    <h3 class="text-yellow-300 font-bold mb-1 text-lg">Nenhum produto cadastrado</h3>
                    <p class="text-yellow-200/80">Você precisa cadastrar um produto antes de criar notificações. <a href="{{ route('produtos') }}" class="font-semibold underline hover:text-yellow-100 transition">Clique aqui para cadastrar</a>.</p>
                </div>
            </div>
        </div>
    @endif

    @if(isset($notificacoes) && $notificacoes->count() > 0)
        <div class="grid gap-4">
            @foreach($notificacoes as $notificacao)
                <div class="bg-gray-800 rounded-lg p-6 border-l-4
                    @if($notificacao->status === 'concluida') border-green-500
                    @elseif($notificacao->status === 'processando') border-blue-500
                    @elseif($notificacao->status === 'erro') border-red-500
                    @else border-gray-500
                    @endif
                ">
                    <div class="flex items-start justify-between gap-4">
                        <div class="flex-1">
                            <div class="flex items-center gap-3 mb-3">
                                <h3 class="text-lg font-semibold text-white">{{ $notificacao->produto->nome }}</h3>
                                <span class="px-3 py-1 rounded-full text-xs font-medium flex items-center gap-2
                                    @if($notificacao->status === 'concluida') bg-green-900/50 text-green-300
                                    @elseif($notificacao->status === 'processando') bg-blue-900/50 text-blue-300
                                    @elseif($notificacao->status === 'erro') bg-red-900/50 text-red-300
                                    @else bg-gray-700 text-gray-300
                                    @endif
                                ">
                                    @if($notificacao->status === 'processando' && !$notificacao->pausada)
                                        <svg class="animate-spin h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                        </svg>
                                    @endif
                                    {{ ucfirst($notificacao->status) }}
                                </span>
                                @if($notificacao->pausada)
                                    <span class="px-3 py-1 rounded-full text-xs font-medium flex items-center gap-2 bg-yellow-900/50 text-yellow-300">
                                        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        Pausada
                                    </span>
                                @endif
                            </div>

                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                                <div>
                                    <p class="text-xs text-gray-500 mb-1">Token</p>
                                    <p class="text-sm text-gray-300 font-medium">{{ $notificacao->credencial->nome }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500 mb-1">Método</p>
                                    <p class="text-sm text-gray-300 font-medium">{{ $notificacao->metodo_pagamento === 'pix' ? 'PIX' : 'Cartão' }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500 mb-1">Transações</p>
                                    <p class="text-sm text-gray-300 font-medium">{{ $notificacao->quantidade_transacoes }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500 mb-1">Tempo</p>
                                    <p class="text-sm text-gray-300 font-medium">{{ $notificacao->tempo_valor }} {{ $notificacao->tempo_unidade }}</p>
                                </div>
                            </div>

                            @if($notificacao->metodo_pagamento === 'pix')
                                <div class="mb-4">
                                    <p class="text-xs text-gray-500 mb-1">Taxa de Aprovação</p>
                                    <div class="flex items-center gap-3">
                                        <div class="flex-1 bg-gray-700 rounded-full h-2 overflow-hidden">
                                            <div class="bg-green-500 h-full" style="width: {{ $notificacao->taxa_aprovacao }}%"></div>
                                        </div>
                                        <span class="text-sm text-gray-300 font-medium">{{ $notificacao->taxa_aprovacao }}%</span>
                                    </div>
                                </div>
                            @endif

                            @if($notificacao->status === 'processando')
                                <div class="mb-4">
                                    <div class="flex items-center justify-between mb-2">
                                        <p class="text-xs text-gray-500">Progresso de Envio</p>
                                        <p class="text-xs text-blue-400 font-medium">{{ number_format(($notificacao->transacoes_enviadas / $notificacao->quantidade_transacoes) * 100, 1) }}%</p>
                                    </div>
                                    <div class="w-full bg-gray-700 rounded-full h-2 overflow-hidden">
                                        <div class="bg-blue-500 h-full transition-all duration-300" style="width: {{ ($notificacao->transacoes_enviadas / $notificacao->quantidade_transacoes) * 100 }}%"></div>
                                    </div>
                                </div>
                            @endif

                            <div class="flex items-center gap-6 text-sm flex-wrap">
                                <div class="flex items-center gap-2">
                                    <div class="w-2 h-2 bg-blue-500 rounded-full @if($notificacao->status === 'processando') animate-pulse @endif"></div>
                                    <span class="text-gray-400">Enviadas: <span class="text-white font-medium">{{ $notificacao->transacoes_enviadas }}</span></span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                                    <span class="text-gray-400">Aprovadas: <span class="text-white font-medium">{{ $notificacao->transacoes_aprovadas }}</span></span>
                                </div>
                                @if($notificacao->metodo_pagamento === 'pix')
                                    <div class="flex items-center gap-2">
                                        <div class="w-2 h-2 bg-red-500 rounded-full"></div>
                                        <span class="text-gray-400">Reprovadas: <span class="text-white font-medium">{{ $notificacao->transacoes_reprovadas }}</span></span>
                                    </div>
                                @endif
                                <div class="flex items-center gap-2">
                                    <div class="w-2 h-2 bg-gray-500 rounded-full"></div>
                                    <span class="text-gray-400">Faltam: <span class="text-white font-medium">{{ $notificacao->quantidade_transacoes - $notificacao->transacoes_enviadas }}</span></span>
                                </div>
                            </div>

                            <div class="mt-3 flex items-center gap-4 text-xs text-gray-500 flex-wrap">
                                <span>Criada em {{ $notificacao->created_at->format('d/m/Y H:i') }}</span>
                                @if($notificacao->iniciada_em)
                                    <span>Iniciada em {{ $notificacao->iniciada_em->format('d/m/Y H:i') }}</span>
                                @endif
                                @if($notificacao->concluida_em)
                                    <span>Concluída em {{ $notificacao->concluida_em->format('d/m/Y H:i') }}</span>
                                @endif
                            </div>

                            @if($notificacao->status === 'erro')
                                @php
                                    $transacoesComErro = $notificacao->transacoes()->whereNotNull('erro')->get();
                                @endphp
                                @if($transacoesComErro->count() > 0)
                                    <div class="mt-4 p-4 bg-red-900/20 border border-red-600 rounded-lg">
                                        <h4 class="text-sm font-semibold text-red-400 mb-2">Erros nas Transações:</h4>
                                        <div class="space-y-2 max-h-40 overflow-y-auto">
                                            @foreach($transacoesComErro->take(3) as $transacaoErro)
                                                <div class="text-xs text-red-300">
                                                    <span class="font-medium">Order {{ substr($transacaoErro->order_id, 0, 8) }}...</span>: {{ $transacaoErro->erro }}
                                                </div>
                                            @endforeach
                                            @if($transacoesComErro->count() > 3)
                                                <p class="text-xs text-red-400 italic">+ {{ $transacoesComErro->count() - 3 }} outros erros</p>
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            @endif
                        </div>

                        <div class="flex gap-2">
                            @if($notificacao->status === 'pendente')
                                <form method="POST" action="{{ route('notificacao.iniciar', $notificacao) }}">
                                    @csrf
                                    <button type="submit" class="p-2 text-green-400 hover:text-green-300 transition" title="Iniciar processamento">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                    </button>
                                </form>
                            @endif

                            @if($notificacao->status === 'processando')
                                @if($notificacao->pausada)
                                    <form method="POST" action="{{ route('notificacao.retomar', $notificacao) }}" onsubmit="return confirm('Tem certeza que deseja retomar esta notificação?')">
                                        @csrf
                                        <button type="submit" class="p-2 text-green-400 hover:text-green-300 transition" title="Retomar notificação">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            </svg>
                                        </button>
                                    </form>
                                @else
                                    <form method="POST" action="{{ route('notificacao.pausar', $notificacao) }}" onsubmit="return confirm('Tem certeza que deseja pausar esta notificação?')">
                                        @csrf
                                        <button type="submit" class="p-2 text-yellow-400 hover:text-yellow-300 transition" title="Pausar notificação">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            </svg>
                                        </button>
                                    </form>
                                @endif
                            @endif

                            <form method="POST" action="{{ route('notificacao.destroy', $notificacao) }}" onsubmit="return confirm('Tem certeza que deseja excluir esta notificação?{{ $notificacao->status === 'processando' ? ' Ela será pausada antes de ser excluída.' : '' }}')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-2 text-red-400 hover:text-red-300 transition" title="Excluir notificação">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        @if(isset($credenciais) && $credenciais->count() > 0 && isset($produtos) && $produtos->count() > 0)
            <div class="bg-slate-900 border border-slate-800 rounded-xl p-16 text-center">
                <div class="w-24 h-24 bg-slate-800 rounded-xl flex items-center justify-center mx-auto mb-6">
                    <svg class="w-12 h-12 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-white mb-3">Nenhuma notificação criada</h3>
                <p class="text-slate-400 mb-8 max-w-md mx-auto">Crie sua primeira notificação para começar a disparar transações de teste para a Utmify</p>
                <button onclick="openModal()" class="px-8 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-all duration-200 font-semibold inline-flex items-center space-x-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    <span>Criar Primeira Notificação</span>
                </button>
            </div>
        @endif
    @endif
</div>

<div id="notificacaoModal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 overflow-y-auto">
    <div class="bg-slate-900 rounded-xl max-w-2xl w-full p-8 my-8 border border-slate-800 animate-slide-in">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h3 class="text-2xl font-bold text-white mb-1">Criar Notificação</h3>
                <p class="text-slate-400 text-sm">Configure os detalhes da sua notificação</p>
            </div>
            <button onclick="closeModal()" class="text-gray-400 hover:text-white transition p-2 hover:bg-slate-700/50 rounded-lg">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        <form id="notificacaoForm" method="POST" action="{{ route('notificacao.store') }}">
            @csrf

            <div id="formMessage" class="hidden mb-4 p-4 rounded-lg"></div>

            <div class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="credencial_id" class="block text-sm font-semibold text-slate-300 mb-2">Token Umtify</label>
                        <select
                            id="credencial_id"
                            name="credencial_id"
                            required
                            class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 text-white rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500 outline-none transition"
                        >
                            <option value="">Selecione um token</option>
                            @if(isset($credenciais))
                                @foreach($credenciais as $credencial)
                                    <option value="{{ $credencial->id }}">{{ $credencial->nome }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <div>
                        <label for="produto_id" class="block text-sm font-semibold text-slate-300 mb-2">Produto</label>
                        <select
                            id="produto_id"
                            name="produto_id"
                            required
                            class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 text-white rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500 outline-none transition"
                        >
                            <option value="">Selecione um produto</option>
                            @if(isset($produtos))
                                @foreach($produtos as $produto)
                                    <option value="{{ $produto->id }}">{{ $produto->nome }} - R$ {{ number_format($produto->preco, 2, ',', '.') }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>

                <div>
                    <label for="quantidade_transacoes" class="block text-sm font-semibold text-slate-300 mb-2">Quantidade de Transações</label>
                    <input
                        type="number"
                        id="quantidade_transacoes"
                        name="quantidade_transacoes"
                        min="1"
                        required
                        class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 text-white rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500 outline-none transition"
                        placeholder="Ex: 10"
                    >
                </div>

                <div>
                    <label class="block text-sm font-semibold text-slate-300 mb-3">Método de Pagamento</label>
                    <div class="flex gap-4">
                        <label class="flex-1 flex items-center justify-center px-4 py-4 bg-slate-700/30 border-2 border-slate-600 rounded-xl cursor-pointer hover:border-green-500 transition-all">
                            <input type="radio" name="metodo_pagamento" value="pix" class="mr-3 accent-green-500" onchange="toggleTaxaAprovacao()" required>
                            <span class="text-white font-semibold">PIX</span>
                        </label>
                        <label class="flex-1 flex items-center justify-center px-4 py-4 bg-slate-700/30 border-2 border-slate-600 rounded-xl cursor-pointer hover:border-green-500 transition-all">
                            <input type="radio" name="metodo_pagamento" value="credit_card" class="mr-3 accent-green-500" onchange="toggleTaxaAprovacao()" required>
                            <span class="text-white font-semibold">Cartão</span>
                        </label>
                    </div>
                </div>

                <div id="taxaAprovacaoContainer" class="hidden">
                    <label for="taxa_aprovacao" class="block text-sm font-semibold text-slate-300 mb-3">Taxa de Aprovação (%)</label>
                    <div class="space-y-3">
                        <input
                            type="range"
                            id="taxa_aprovacao"
                            name="taxa_aprovacao"
                            min="0"
                            max="100"
                            value="90"
                            class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-green-500"
                            oninput="updateTaxaValue(this.value)"
                        >
                        <div class="flex justify-between text-sm">
                            <span class="text-slate-400">0%</span>
                            <span id="taxaValue" class="text-green-400 font-bold text-lg">90%</span>
                            <span class="text-slate-400">100%</span>
                        </div>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-slate-300 mb-2">Tempo de Envio de Todas as Vendas</label>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <select
                                id="tempo_unidade"
                                name="tempo_unidade"
                                required
                                class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 text-white rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500 outline-none transition"
                            >
                                <option value="minutos">Minutos</option>
                                <option value="horas">Horas</option>
                            </select>
                        </div>
                        <div>
                            <input
                                type="number"
                                id="tempo_valor"
                                name="tempo_valor"
                                min="1"
                                required
                                class="w-full px-4 py-3 bg-slate-700/50 border border-slate-600 text-white rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500 outline-none transition"
                                placeholder="Ex: 5"
                            >
                        </div>
                    </div>
                </div>

                <div class="flex gap-4 pt-6">
                    <button
                        type="button"
                        onclick="closeModal()"
                        class="flex-1 px-6 py-3 bg-slate-800 text-white rounded-lg hover:bg-slate-700 transition-all duration-200 font-semibold"
                    >
                        Cancelar
                    </button>
                    <button
                        type="submit"
                        id="submitButton"
                        class="flex-1 px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-all duration-200 font-semibold"
                    >
                        Criar Notificação
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    function openModal() {
        document.getElementById('notificacaoModal').classList.remove('hidden');
        document.getElementById('formMessage').classList.add('hidden');
    }

    function closeModal() {
        document.getElementById('notificacaoModal').classList.add('hidden');
        document.getElementById('notificacaoForm').reset();
        document.getElementById('formMessage').classList.add('hidden');
    }

    function toggleTaxaAprovacao() {
        const metodoPagamento = document.querySelector('input[name="metodo_pagamento"]:checked');
        const taxaContainer = document.getElementById('taxaAprovacaoContainer');

        if (metodoPagamento && metodoPagamento.value === 'pix') {
            taxaContainer.classList.remove('hidden');
        } else {
            taxaContainer.classList.add('hidden');
        }
    }

    function updateTaxaValue(value) {
        document.getElementById('taxaValue').textContent = value + '%';
    }

    function showMessage(message, isError = false) {
        const messageEl = document.getElementById('formMessage');
        messageEl.textContent = message;
        messageEl.classList.remove('hidden', 'bg-green-900/50', 'text-green-300', 'border-green-600', 'bg-red-900/50', 'text-red-300', 'border-red-600');

        if (isError) {
            messageEl.classList.add('bg-red-900/50', 'text-red-300', 'border', 'border-red-600');
        } else {
            messageEl.classList.add('bg-green-900/50', 'text-green-300', 'border', 'border-green-600');
        }
    }

    document.getElementById('notificacaoForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const submitButton = document.getElementById('submitButton');
        const originalText = submitButton.textContent;

        submitButton.disabled = true;
        submitButton.textContent = 'Criando...';

        try {
            const formData = new FormData(this);

            const response = await fetch('{{ route('notificacao.store') }}', {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
                },
                body: formData
            });

            const data = await response.json();

            if (response.ok) {
                showMessage(data.message || 'Notificação criada com sucesso!');
                this.reset();

                setTimeout(() => {
                    closeModal();
                    atualizarNotificacoes();
                }, 1500);
            } else {
                showMessage(data.message || 'Erro ao criar notificação', true);
            }
        } catch (error) {
            console.error('Erro:', error);
            showMessage('Erro ao criar notificação. Tente novamente.', true);
        } finally {
            submitButton.disabled = false;
            submitButton.textContent = originalText;
        }
    });

    async function atualizarNotificacoes() {
        try {
            const response = await fetch('{{ route('notificacao.list') }}');

            if (response.ok) {
                location.reload();
            }
        } catch (error) {
            console.error('Erro ao atualizar notificações:', error);
        }
    }

    document.getElementById('notificacaoModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeModal();
        }
    });

    @if(isset($notificacoes) && $notificacoes->where('status', 'processando')->where('pausada', false)->count() > 0)
    setInterval(function() {
        atualizarNotificacoes();
    }, 5000);
    @endif
</script>
@endsection