<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: Arial, sans-serif; background: #f1f5f9; color: #1e3a5f; }
        .wrap { max-width: 580px; margin: 32px auto; background: #fff; border-radius: 14px; border: 1px solid #e2e8f0; overflow: hidden; }

        .header { background: #1e3a5f; padding: 24px 28px; }
        .header-top { display: flex; align-items: center; justify-content: space-between; }
        .header h1 { color: #fff; font-size: 17px; margin: 0 0 3px; }
        .header p { color: rgba(255,255,255,0.55); font-size: 12px; }
        .badge-alert { background: rgba(239,68,68,0.2); color: #fca5a5; border: 1px solid rgba(239,68,68,0.4); border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: bold; white-space: nowrap; }
        .badge-warn { background: rgba(245,158,11,0.2); color: #fcd34d; border: 1px solid rgba(245,158,11,0.4); border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: bold; white-space: nowrap; }

        .body { padding: 24px 28px; }
        .section-title { font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
        .section-title.red { color: #ef4444; }
        .section-title.amber { color: #f59e0b; }

        .card { border-radius: 10px; padding: 13px 15px; margin-bottom: 8px; }
        .card.red { background: #fef2f2; border: 1px solid #fecaca; }
        .card.amber { background: #fffbeb; border: 1px solid #fde68a; }
        .card-title { font-size: 14px; font-weight: bold; margin-bottom: 4px; }
        .card-meta { font-size: 12px; color: #64748b; display: flex; flex-wrap: wrap; gap: 10px; }
        .meta-item { display: flex; align-items: center; gap: 4px; }
        .prio { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: bold; }
        .prio-critica { background: #fee2e2; color: #dc2626; }
        .prio-alta    { background: #fef3c7; color: #d97706; }
        .prio-media   { background: #dbeafe; color: #2563eb; }
        .prio-baixa   { background: #f1f5f9; color: #64748b; }
        .date-red   { color: #dc2626; font-weight: bold; }
        .date-amber { color: #d97706; font-weight: bold; }

        .separator { height: 1px; background: #e2e8f0; margin: 20px 0; }

        .cta { text-align: center; margin-top: 20px; }
        .btn { display: inline-block; background: #25b87e; color: #fff; font-weight: bold; font-size: 14px; padding: 12px 28px; border-radius: 10px; text-decoration: none; }

        .footer { background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 14px 28px; font-size: 11px; color: #94a3b8; text-align: center; }
    </style>
</head>
<body>
<div class="wrap">

    <div class="header">
        <div class="header-top">
            <div>
                <h1>Alerta de SLA — OPCON</h1>
                <p>Gerado em <?php echo e(now()->format('d/m/Y \à\s H:i')); ?></p>
            </div>
            <?php if($vencidas->isNotEmpty()): ?>
                <span class="badge-alert"><?php echo e($vencidas->count()); ?> vencida(s)</span>
            <?php elseif($vencemHoje->isNotEmpty()): ?>
                <span class="badge-warn"><?php echo e($vencemHoje->count()); ?> vence hoje</span>
            <?php endif; ?>
        </div>
    </div>

    <div class="body">

        
        <?php if($vencidas->isNotEmpty()): ?>
            <div class="section-title red">⛔ Vencidas (<?php echo e($vencidas->count()); ?>)</div>
            <?php $__currentLoopData = $vencidas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $d): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="card red">
                    <div class="card-title"><?php echo e($d->titulo); ?></div>
                    <div class="card-meta">
                        <span class="meta-item">
                            <span class="prio prio-<?php echo e(strtolower($d->prioridade) === 'crítica' ? 'critica' : strtolower($d->prioridade)); ?>"><?php echo e($d->prioridade); ?></span>
                        </span>
                        <span class="meta-item">👤 <?php echo e($d->responsavel ?? '—'); ?></span>
                        <span class="meta-item">📁 <?php echo e($d->status); ?></span>
                        <span class="meta-item date-red">📅 Venceu em <?php echo e($d->sla_vencimento->format('d/m/Y')); ?></span>
                        <?php if($d->cliente): ?>
                            <span class="meta-item">🏢 <?php echo e($d->cliente); ?></span>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        <?php endif; ?>

        <?php if($vencidas->isNotEmpty() && $vencemHoje->isNotEmpty()): ?>
            <div class="separator"></div>
        <?php endif; ?>

        
        <?php if($vencemHoje->isNotEmpty()): ?>
            <div class="section-title amber">⚠️ Vencem hoje (<?php echo e($vencemHoje->count()); ?>)</div>
            <?php $__currentLoopData = $vencemHoje; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $d): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="card amber">
                    <div class="card-title"><?php echo e($d->titulo); ?></div>
                    <div class="card-meta">
                        <span class="meta-item">
                            <span class="prio prio-<?php echo e(strtolower($d->prioridade) === 'crítica' ? 'critica' : strtolower($d->prioridade)); ?>"><?php echo e($d->prioridade); ?></span>
                        </span>
                        <span class="meta-item">👤 <?php echo e($d->responsavel ?? '—'); ?></span>
                        <span class="meta-item">📁 <?php echo e($d->status); ?></span>
                        <span class="meta-item date-amber">📅 Vence hoje</span>
                        <?php if($d->cliente): ?>
                            <span class="meta-item">🏢 <?php echo e($d->cliente); ?></span>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        <?php endif; ?>

        <div class="cta">
            <a href="<?php echo e(config('app.url')); ?>/kanban" class="btn">Abrir Kanban →</a>
        </div>
    </div>

    <div class="footer">
        OPCON Soluções Contábeis · Este e-mail foi gerado automaticamente · Palmas, TO
    </div>
</div>
</body>
</html>
<?php /**PATH C:\ProjetosWeb\OPCON\resources\views\mail\sla-alerta.blade.php ENDPATH**/ ?>