

<?php $__env->startSection('title', 'Notificações'); ?>

<?php $__env->startSection('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>

    <?php 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="<?php echo e(route('credencial')); ?>" class="font-semibold underline hover:text-yellow-100 transition">Clique aqui para cadastrar</a>.</p>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <?php 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="<?php echo e(route('produtos')); ?>" class="font-semibold underline hover:text-yellow-100 transition">Clique aqui para cadastrar</a>.</p>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <?php if(isset($notificacoes) && $notificacoes->count() > 0): ?>
        <div class="grid gap-4">
            <?php $__currentLoopData = $notificacoes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $notificacao): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="bg-gray-800 rounded-lg p-6 border-l-4
                    <?php if($notificacao->status === 'concluida'): ?> border-green-500
                    <?php elseif($notificacao->status === 'processando'): ?> border-blue-500
                    <?php elseif($notificacao->status === 'erro'): ?> border-red-500
                    <?php else: ?> border-gray-500
                    <?php 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"><?php echo e($notificacao->produto->nome); ?></h3>
                                <span class="px-3 py-1 rounded-full text-xs font-medium flex items-center gap-2
                                    <?php if($notificacao->status === 'concluida'): ?> bg-green-900/50 text-green-300
                                    <?php elseif($notificacao->status === 'processando'): ?> bg-blue-900/50 text-blue-300
                                    <?php elseif($notificacao->status === 'erro'): ?> bg-red-900/50 text-red-300
                                    <?php else: ?> bg-gray-700 text-gray-300
                                    <?php endif; ?>
                                ">
                                    <?php if($notificacao->status === 'processando'): ?>
                                        <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>
                                    <?php endif; ?>
                                    <?php echo e(ucfirst($notificacao->status)); ?>

                                </span>
                            </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"><?php echo e($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"><?php echo e($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"><?php echo e($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"><?php echo e($notificacao->tempo_valor); ?> <?php echo e($notificacao->tempo_unidade); ?></p>
                                </div>
                            </div>

                            <?php 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: <?php echo e($notificacao->taxa_aprovacao); ?>%"></div>
                                        </div>
                                        <span class="text-sm text-gray-300 font-medium"><?php echo e($notificacao->taxa_aprovacao); ?>%</span>
                                    </div>
                                </div>
                            <?php endif; ?>

                            <?php 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"><?php echo e(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: <?php echo e(($notificacao->transacoes_enviadas / $notificacao->quantidade_transacoes) * 100); ?>%"></div>
                                    </div>
                                </div>
                            <?php 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 <?php if($notificacao->status === 'processando'): ?> animate-pulse <?php endif; ?>"></div>
                                    <span class="text-gray-400">Enviadas: <span class="text-white font-medium"><?php echo e($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"><?php echo e($notificacao->transacoes_aprovadas); ?></span></span>
                                </div>
                                <?php 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"><?php echo e($notificacao->transacoes_reprovadas); ?></span></span>
                                    </div>
                                <?php 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"><?php echo e($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 <?php echo e($notificacao->created_at->format('d/m/Y H:i')); ?></span>
                                <?php if($notificacao->iniciada_em): ?>
                                    <span>Iniciada em <?php echo e($notificacao->iniciada_em->format('d/m/Y H:i')); ?></span>
                                <?php endif; ?>
                                <?php if($notificacao->concluida_em): ?>
                                    <span>Concluída em <?php echo e($notificacao->concluida_em->format('d/m/Y H:i')); ?></span>
                                <?php endif; ?>
                            </div>

                            <?php if($notificacao->status === 'erro'): ?>
                                <?php
                                    $transacoesComErro = $notificacao->transacoes()->whereNotNull('erro')->get();
                                ?>
                                <?php 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">
                                            <?php $__currentLoopData = $transacoesComErro->take(3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $transacaoErro): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <div class="text-xs text-red-300">
                                                    <span class="font-medium">Order <?php echo e(substr($transacaoErro->order_id, 0, 8)); ?>...</span>: <?php echo e($transacaoErro->erro); ?>

                                                </div>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            <?php if($transacoesComErro->count() > 3): ?>
                                                <p class="text-xs text-red-400 italic">+ <?php echo e($transacoesComErro->count() - 3); ?> outros erros</p>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            <?php endif; ?>
                        </div>

                        <?php if($notificacao->status !== 'processando'): ?>
                            <form method="POST" action="<?php echo e(route('notificacao.destroy', $notificacao)); ?>" onsubmit="return confirm('Tem certeza que deseja excluir esta notificação?')">
                                <?php echo csrf_field(); ?>
                                <?php echo method_field('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>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    <?php else: ?>
        <?php 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>
        <?php endif; ?>
    <?php 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 method="POST" action="<?php echo e(route('notificacao.store')); ?>">
            <?php echo csrf_field(); ?>

            <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>
                            <?php if(isset($credenciais)): ?>
                                <?php $__currentLoopData = $credenciais; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $credencial): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($credencial->id); ?>"><?php echo e($credencial->nome); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            <?php 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>
                            <?php if(isset($produtos)): ?>
                                <?php $__currentLoopData = $produtos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $produto): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($produto->id); ?>"><?php echo e($produto->nome); ?> - R$ <?php echo e(number_format($produto->preco, 2, ',', '.')); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            <?php 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"
                        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');
    }

    function closeModal() {
        document.getElementById('notificacaoModal').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 + '%';
    }

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

    <?php if(isset($notificacoes) && $notificacoes->where('status', 'processando')->count() > 0): ?>
    setInterval(function() {
        location.reload();
    }, 5000);
    <?php endif; ?>
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\H\Desktop\Notificação\resources\views/notificacao.blade.php ENDPATH**/ ?>