<?php
// os_detalhe.php — Detalhe completo da OS (COM WHATSAPP INTEGRADO - VERSÃO FINAL DINÂMICA)
$pageActive = 'ordens';
require_once __DIR__ . '/functions.php';
require_once __DIR__ . '/auth.php';
requireLogin();

$id = (int)($_GET['id'] ?? 0);
$os = getOSById($id);
if (!$os) { header('Location: ordens.php'); exit; }

// ══════════════════════════════════════════
//  HELPERS DE UPLOAD
// ══════════════════════════════════════════

/** Garante que a pasta de uploads da OS existe e é gravável */
function garantirPastaOS(int $osId): string {
    $dir = __DIR__ . "/uploads/fotos_os/{$osId}";
    if (!is_dir($dir)) {
        if (!mkdir($dir, 0755, true)) {
            throw new RuntimeException("Não foi possível criar a pasta: $dir");
        }
    }
    if (!is_writable($dir)) {
        throw new RuntimeException("Pasta sem permissão de escrita: $dir");
    }
    return $dir;
}

/**
 * Salva um único arquivo de imagem e retorna o caminho relativo.
 */
function salvarUmaFoto(array $file, int $osId, string $prefix): string {
    $nome_original = $file['name'] ?? '';
    $ext = strtolower(pathinfo($nome_original, PATHINFO_EXTENSION));

    if ($ext === '' || strlen($ext) > 5) {
        $mime = $file['type'] ?? '';
        $mimeMap = [
            'image/jpeg'  => 'jpg',
            'image/jpg'   => 'jpg',
            'image/png'   => 'png',
            'image/webp'  => 'webp',
            'image/gif'   => 'gif',
            'image/heic'  => 'jpg',
            'image/heif'  => 'jpg',
        ];
        $ext = $mimeMap[$mime] ?? '';
    }

    $extOk = ['jpg','jpeg','png','webp','gif'];
    if (!in_array($ext, $extOk)) {
        $handle = fopen($file['tmp_name'], 'rb');
        $magic  = $handle ? bin2hex(fread($handle, 4)) : '';
        if ($handle) fclose($handle);
        if (str_starts_with($magic, 'ffd8ff')) { $ext = 'jpg'; }
        elseif (str_starts_with($magic, '89504e47')) { $ext = 'png'; }
        elseif (str_starts_with($magic, '47494638')) { $ext = 'gif'; }
        elseif (str_starts_with($magic, '52494646')) { $ext = 'webp'; }
        else {
            throw new RuntimeException("Formato de imagem não suportado");
        }
    }
    if ($ext === 'jpeg') $ext = 'jpg';

    if ($file['size'] > 15 * 1024 * 1024) {
        throw new RuntimeException("Arquivo muito grande (máx. 15 MB)");
    }
    if (!is_uploaded_file($file['tmp_name'])) {
        throw new RuntimeException("Arquivo de upload inválido");
    }
    $dir  = garantirPastaOS($osId);
    $nome = $prefix . '_' . date('YmdHis') . '_' . substr(bin2hex(random_bytes(4)), 0, 8) . '.' . $ext;
    $dest = $dir . '/' . $nome;
    if (!move_uploaded_file($file['tmp_name'], $dest)) {
        throw new RuntimeException("Falha ao salvar imagem em: $dest");
    }
    return "uploads/fotos_os/{$osId}/{$nome}";
}

// ══════════════════════════════════════════
//  PROCESSAR POST
// ══════════════════════════════════════════
$msgFlash  = '';
$erroFlash = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (!verifyCsrf($_POST['csrf_token'] ?? '')) die('CSRF inválido');
    $action = trim($_POST['action'] ?? '');

    if (in_array($action, ['atualizar','concluir','cancelar'])) {
        $desc    = trim($_POST['descricao_servico'] ?? '');
        $solucao = trim($_POST['solucao']           ?? '');
        $tecId   = (int)($_POST['tecnico_id'] ?? 0) ?: null;
        $agenda  = trim($_POST['agendamento'] ?? '');
        $agendaTs= $agenda ? date('Y-m-d H:i:s', strtotime($agenda)) : null;

        if ($action === 'cancelar') {
            pdo()->prepare("UPDATE ordens_servico SET status='CANCELADA', data_fechamento=NOW() WHERE id=?")->execute([$id]);
            $msgFlash = 'OS cancelada.';
        } else {
            $novoStatus = $action === 'concluir' ? 'CONCLUIDA' : trim($_POST['status'] ?? $os['status']);
            $fechamento = $action === 'concluir' ? ', data_fechamento=NOW()' : '';
            pdo()->prepare("UPDATE ordens_servico SET descricao_servico=?, solucao=?, status=?, tecnico_id=?, agendamento=? $fechamento WHERE id=?")->execute([$desc, $solucao, $novoStatus, $tecId, $agendaTs, $id]);
            $msgFlash = $action === 'concluir' ? '✓ OS concluída com sucesso!' : '↻ OS atualizada!';
            
            // Notificar supervisor automaticamente se OS for concluída
            if ($action === 'concluir') {
                try {
                    $stmtSup = pdo()->query("SELECT id, nome, whatsapp FROM supervisores WHERE ativo = 1");
                    $supervisores = $stmtSup->fetchAll();
                    foreach ($supervisores as $sup) {
                        try {
                            pdo()->prepare("INSERT INTO notificacoes (usuario_id, titulo, mensagem, tipo, cor, icone, link) 
                                SELECT u.id, 'OS Concluída', CONCAT('OS {$os['numero_os']} - {$os['cliente_nome']} foi concluída'), 
                                'info', '#10b981', '✅', 'os_detalhe.php?id={$id}'
                                FROM usuarios u 
                                WHERE u.whatsapp = ? OR u.telefone = ? LIMIT 1")
                                ->execute([$sup['whatsapp'], $sup['whatsapp']]);
                        } catch (Exception $e) {}
                    }
                } catch (Exception $e) {}
            }
        }
    }

    if ($action === 'add_material') {
        $matId = (int)($_POST['material_id'] ?? 0);
        $qtd   = max(1, (int)($_POST['quantidade'] ?? 1));
        $obs   = trim($_POST['obs_material'] ?? '');

        if ($matId <= 0) {
            $erroFlash = 'Selecione um material.';
        } else {
            try {
                pdo()->prepare("INSERT INTO materiais_usados_os (os_id, material_id, quantidade_usada, observacoes) VALUES (?, ?, ?, ?) ON DUPLICATE KEY UPDATE quantidade_usada = quantidade_usada + VALUES(quantidade_usada), observacoes = COALESCE(NULLIF(VALUES(observacoes),''), observacoes)")->execute([$id, $matId, $qtd, $obs ?: null]);
                $msgFlash = "✓ Material adicionado — estoque deduzido!";
            } catch (PDOException $e) {
                $erroFlash = 'Erro ao registrar material: ' . $e->getMessage();
            }
        }
    }

    if ($action === 'rem_material') {
        $muId = (int)($_POST['mu_id'] ?? 0);
        if ($muId > 0) {
            pdo()->prepare("DELETE FROM materiais_usados_os WHERE id=? AND os_id=?")->execute([$muId, $id]);
            $msgFlash = '↩ Material removido — estoque reposto!';
        }
    }

    if ($action === 'upload_fotos') {
        $tipoFoto  = ($_POST['foto_tipo'] ?? 'SERVICO') === 'OLT' ? 'OLT' : 'SERVICO';
        $descFoto  = trim($_POST['foto_desc'] ?? '');
        $prefix    = $tipoFoto === 'OLT' ? 'olt' : 'servico';
        $countOk   = 0;
        $countErr  = 0;
        $errosUpload = [];

        $files = $_FILES['fotos_os'] ?? [];
        if (empty($files) || empty($files['name'])) {
            $erroFlash = 'Nenhum arquivo recebido. Verifique o formulário.';
        } else {
            if (!is_array($files['name'])) {
                $files = array_map(fn($v) => [$v], $files);
            }
            $total = count($files['name']);
            for ($i = 0; $i < $total; $i++) {
                if ($files['error'][$i] !== UPLOAD_ERR_OK) {
                    $countErr++;
                    $errosUpload[] = "Arquivo #{$i}: erro de upload código {$files['error'][$i]}";
                    continue;
                }
                try {
                    $arq = [
                        'name'     => $files['name'][$i],
                        'tmp_name' => $files['tmp_name'][$i],
                        'size'     => $files['size'][$i],
                    ];
                    $caminho = salvarUmaFoto($arq, $id, $prefix);
                    $descFinal = $descFoto ?: ($tipoFoto === 'OLT' ? 'Foto OLT/CTO' : 'Foto do serviço');

                    try {
                        pdo()->prepare("INSERT INTO fotos_os (os_id, caminho_arquivo, descricao, tipo) VALUES (?, ?, ?, ?)")->execute([$id, $caminho, $descFinal, $tipoFoto]);
                    } catch (PDOException $eInner) {
                        pdo()->prepare("INSERT INTO fotos_os (os_id, caminho_arquivo, descricao) VALUES (?, ?, ?)")->execute([$id, $caminho, $descFinal]);
                    }
                    $countOk++;
                } catch (RuntimeException $e) {
                    $countErr++;
                    $errosUpload[] = $e->getMessage();
                }
            }

            if ($countOk > 0 && $countErr === 0) {
                $msgFlash = "✓ {$countOk} foto(s) enviada(s) com sucesso!";
            } elseif ($countOk > 0) {
                $msgFlash = "✓ {$countOk} foto(s) salva(s). ⚠ {$countErr} com erro.";
            } else {
                $erroFlash = 'Nenhuma foto foi salva. ' . implode(' | ', $errosUpload);
            }
        }
    }

    if ($action === 'del_foto') {
        $fotoId = (int)($_POST['foto_id'] ?? 0);
        if ($fotoId > 0) {
            $row = pdo()->prepare("SELECT caminho_arquivo FROM fotos_os WHERE id=? AND os_id=?");
            $row->execute([$fotoId, $id]);
            $foto = $row->fetch();
            if ($foto) {
                $path = __DIR__ . '/' . ltrim($foto['caminho_arquivo'], '/');
                if (file_exists($path)) @unlink($path);
                pdo()->prepare("DELETE FROM fotos_os WHERE id=?")->execute([$fotoId]);
                $msgFlash = 'Foto excluída.';
            }
        }
    }

    $redir = "os_detalhe.php?id=$id";
    if ($msgFlash)  $redir .= '&msg='  . urlencode($msgFlash);
    if ($erroFlash) $redir .= '&erro=' . urlencode($erroFlash);
    header("Location: $redir");
    exit;
}

// ══════════════════════════════════════════
//  DADOS DA PÁGINA
// ══════════════════════════════════════════
$msgFlash  = $_GET['msg']  ?? '';
$erroFlash = $_GET['erro'] ?? '';

$os        = getOSById($id);
$tecnicos  = getTecnicos();
$isFechada = in_array($os['status'], ['CONCLUIDA','CANCELADA']);
$pageTitle = $os['numero_os'];
$usuario   = usuarioLogado();

// Materiais usados
$stmtMat = pdo()->prepare("SELECT mu.id, mu.quantidade_usada, mu.observacoes, m.id AS mat_id, m.nome AS mat_nome, m.unidade, m.quantidade_estoque FROM materiais_usados_os mu JOIN materiais m ON m.id = mu.material_id WHERE mu.os_id = ? ORDER BY mu.data_registro");
$stmtMat->execute([$id]);
$matList = $stmtMat->fetchAll();

$todosMat = getMateriais();

// Fotos
$stmtFotos = pdo()->prepare("SELECT * FROM fotos_os WHERE os_id = ? ORDER BY tipo, data_envio DESC");
$stmtFotos->execute([$id]);
$todasFotos = $stmtFotos->fetchAll();

$fotosServico = array_values(array_filter($todasFotos, fn($f) => ($f['tipo'] ?? 'SERVICO') === 'SERVICO'));
$fotosOLT     = array_values(array_filter($todasFotos, fn($f) => ($f['tipo'] ?? '') === 'OLT'));

// Fachada do cliente
$stmtFachada = pdo()->prepare("SELECT caminho_arquivo FROM clientes_fotos WHERE cliente_id=? AND tipo='INSTALACAO' ORDER BY data_envio DESC LIMIT 1");
$stmtFachada->execute([$os['cliente_id']]);
$fotoFachada = $stmtFachada->fetchColumn();

// Buscar supervisores ativos para WhatsApp
$supervisores = [];
try {
    $stmtSup = pdo()->query("SELECT id, nome, whatsapp, cargo FROM supervisores WHERE ativo = 1 ORDER BY nome");
    $supervisores = $stmtSup->fetchAll();
} catch (Exception $e) {}

// Telefone do supervisor (legado)
$supervisorTel = preg_replace('/\D/', '', getConfig('supervisor_whatsapp', ''));

// Log de envios WhatsApp
$enviosLog = [];
try {
    $stmtLog = pdo()->prepare("SELECT * FROM wa_envios_log WHERE os_id = ? ORDER BY enviado_em DESC LIMIT 10");
    $stmtLog->execute([$id]);
    $enviosLog = $stmtLog->fetchAll();
} catch (Exception $e) {}

// ══════════════════════════════════════════
//  CONFIGURAÇÕES CLICKSERVICE
// ══════════════════════════════════════════
$waConfig = [
    'api_url' => 'https://clickservice.com.br/api/v1/messages.php',
    'api_key' => getConfig('clickservice_apikey', ''),
    'instancia' => getConfig('clickservice_instancia', ''),
];

// Tenta obter a chave da sessão se não estiver no banco
if (empty($waConfig['api_key'])) {
    $waConfig['api_key'] = 'csk_bba68d40ba2e47bf1e76345b76b2bf9ebbb330d2'; // Fallback — conexão ativa (16981546365)
}

// ══════════════════════════════════════════
//  CONSTRUIR MENSAGEM DO RELATÓRIO
// ══════════════════════════════════════════
$matLinhas = [];
foreach ($matList as $m) {
    $matLinhas[] = "  • {$m['mat_nome']}: {$m['quantidade_usada']} {$m['unidade']}";
}
$matTexto = $matLinhas ? implode("\n", $matLinhas) : "  (nenhum material registrado)";

// Base URL para links absolutos
$proto = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS']!=='off') ? 'https' : 'http';
$baseUrl = $proto . '://' . ($_SERVER['HTTP_HOST'] ?? 'localhost');
$baseUrl .= '/mkt/';

$linksServico = [];
foreach ($fotosServico as $f) {
    $linksServico[] = $baseUrl . ltrim($f['caminho_arquivo'], '/');
}
$linksOLT = [];
foreach ($fotosOLT as $f) {
    $linksOLT[] = $baseUrl . ltrim($f['caminho_arquivo'], '/');
}
$linkFachada = $fotoFachada ? $baseUrl . ltrim($fotoFachada, '/') : null;

// Monta mensagem
$wa_linhas = [];
$wa_linhas[] = "📋 *RELATÓRIO DE ATENDIMENTO*";
$wa_linhas[] = "━━━━━━━━━━━━━━━━━━━━━━━━━━";
$wa_linhas[] = "🔢 OS: *{$os['numero_os']}*";
$wa_linhas[] = "📌 Tipo: " . labelTipoOS($os['tipo_os']);
$wa_linhas[] = "🏷 Status: " . $os['status'];
$wa_linhas[] = "📅 Abertura: " . fmtData($os['data_abertura']);
if ($os['data_fechamento']) $wa_linhas[] = "✅ Conclusão: " . fmtData($os['data_fechamento']);
$wa_linhas[] = "";
$wa_linhas[] = "👤 *CLIENTE*";
$wa_linhas[] = "Nome: {$os['cliente_nome']}";
$wa_linhas[] = "Tel: {$os['cliente_tel']}";
$wa_linhas[] = "Cidade: {$os['endereco_cidade']}";
$wa_linhas[] = "Plano: {$os['plano']}";
$wa_linhas[] = "";
$wa_linhas[] = "👷 *EXECUÇÃO*";
$wa_linhas[] = "Técnico: " . ($os['tecnico_nome'] ?: 'N/A');
if ($os['protocolo']) $wa_linhas[] = "Protocolo: {$os['protocolo']}";
$wa_linhas[] = "";
if ($os['relato_cliente']) {
    $wa_linhas[] = "📣 *Relato:*";
    $wa_linhas[] = $os['relato_cliente'];
    $wa_linhas[] = "";
}
if ($os['descricao_servico']) {
    $wa_linhas[] = "🔧 *Serviço executado:*";
    $wa_linhas[] = $os['descricao_servico'];
    $wa_linhas[] = "";
}
if ($os['solucao']) {
    $wa_linhas[] = "✔ *Solução aplicada:*";
    $wa_linhas[] = $os['solucao'];
    $wa_linhas[] = "";
}
$wa_linhas[] = "📦 *MATERIAIS UTILIZADOS*";
$wa_linhas[] = $matTexto;
$wa_linhas[] = "";
if ($linkFachada) {
    $wa_linhas[] = "🏠 *Fachada:* " . $linkFachada;
    $wa_linhas[] = "";
}
if ($linksServico) {
    $wa_linhas[] = "📸 *Fotos do serviço (" . count($linksServico) . "):*";
    foreach ($linksServico as $link) $wa_linhas[] = $link;
    $wa_linhas[] = "";
}
if ($linksOLT) {
    $wa_linhas[] = "📡 *Fotos da OLT/CTO (" . count($linksOLT) . "):*";
    foreach ($linksOLT as $link) $wa_linhas[] = $link;
    $wa_linhas[] = "";
}
$wa_linhas[] = "━━━━━━━━━━━━━━━━━━━━━━━━━━";
$wa_linhas[] = "_Enviado por " . $usuario['nome'] . " · " . getConfig('empresa_nome', APP_NAME) . "_";

$waMensagem = implode("\n", $wa_linhas);
$totalFotos = ($linkFachada ? 1 : 0) + count($linksServico) + count($linksOLT);

// Lista de caminhos relativos das fotos (para envio)
$fotosParaEnvio = array_merge(
    $fotoFachada ? [$fotoFachada] : [],
    array_column($fotosServico, 'caminho_arquivo'),
    array_column($fotosOLT, 'caminho_arquivo')
);

require_once __DIR__ . '/includes/header.php';
?>

<style>
/* ── Upload zone ── */
.uz{border:2px dashed var(--border2);border-radius:10px;padding:20px 16px;text-align:center;cursor:pointer;transition:.2s;position:relative}
.uz:hover,.uz.over{border-color:var(--cyan);background:rgba(0,212,255,.05)}
.uz input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.uz-ico{font-size:24px;margin-bottom:5px}
.uz-lbl{font-size:12px;color:var(--muted)}.uz-lbl b{color:var(--text)}
.uz-hint{font-size:10px;color:var(--muted);margin-top:3px;font-family:var(--mono)}

/* ── Fotos grid ── */
.fotos-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fcard{width:96px;height:96px;border-radius:8px;overflow:hidden;border:1px solid var(--border);position:relative;cursor:zoom-in;flex-shrink:0}
.fcard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.fcard:hover img{transform:scale(1.05)}
.fcard-cap{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);font-size:9px;color:#fff;padding:3px 5px;font-family:var(--mono);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fcard-del{position:absolute;top:3px;right:3px;background:rgba(239,68,68,.9);border:none;border-radius:4px;color:#fff;font-size:9px;cursor:pointer;padding:2px 5px;z-index:3;line-height:1}

/* ── Material row ── */
.mat-row{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--card);border:1px solid var(--border);border-radius:8px;margin-bottom:6px}
.mat-nome{flex:1;font-size:12.5px;font-weight:600}
.mat-qtd{font-family:var(--mono);font-size:13px;color:var(--cyan);font-weight:700;white-space:nowrap}
.mat-estoque-tag{font-size:10px;font-family:var(--mono);padding:2px 7px;border-radius:10px;white-space:nowrap}

/* ── Abas foto ── */
.ftab-bar{display:flex;gap:2px;padding:3px;background:var(--card);border-radius:8px;margin-bottom:12px;width:fit-content}
.ftab{padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted);transition:.15s;user-select:none}
.ftab.active{background:var(--card2);color:var(--cyan)}

/* ── Lightbox ── */
#lb{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:9000;display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:20px}
#lb.open{display:flex}
#lb img{max-width:92vw;max-height:80vh;border-radius:10px;object-fit:contain;box-shadow:0 0 60px rgba(0,0,0,.8)}
#lb-close{position:absolute;top:18px;right:22px;font-size:28px;color:#fff;cursor:pointer;background:none;border:none;line-height:1;opacity:.8}
#lb-close:hover{opacity:1}
#lb-cap{font-size:11px;font-family:var(--mono);color:rgba(255,255,255,.55);max-width:600px;text-align:center}

/* ── WhatsApp ── */
.wa-box{background:rgba(37,211,102,.06);border:1px solid rgba(37,211,102,.25);border-radius:12px;padding:18px 20px}
.wa-title{font-size:12px;font-weight:700;color:#25d366;font-family:var(--mono);letter-spacing:1px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.wa-msg{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:11px;font-family:var(--mono);color:var(--muted);white-space:pre-wrap;word-break:break-word;max-height:200px;overflow-y:auto;line-height:1.6}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#25d366;color:#fff;border:none;border-radius:10px;padding:13px 20px;font-family:var(--ui);font-size:14px;font-weight:800;cursor:pointer;width:100%;text-decoration:none;transition:.15s}
.wa-btn:hover:not(:disabled){background:#1ebe5d;transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.15)}
.wa-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none!important}
.wa-status{margin-top:12px;padding:8px;border-radius:8px;text-align:center;font-size:11px}
.wa-status.connected{background:rgba(16,185,129,.1);color:var(--green)}
.wa-status.waiting{background:rgba(245,158,11,.1);color:var(--amber)}
.wa-status.disconnected{background:rgba(239,68,68,.1);color:var(--red)}

/* ── Envio log ── */
.envio-log-item{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:6px;font-size:11px}
.envio-log-status{display:inline-block;padding:2px 8px;border-radius:10px;font-size:9px;font-weight:700;font-family:var(--mono)}
.status-enviado{background:rgba(16,185,129,.12);color:var(--green)}
.status-parcial{background:rgba(245,158,11,.12);color:var(--amber)}
.status-erro{background:rgba(239,68,68,.12);color:var(--red)}
.info-badge{display:inline-flex;align-items:center;gap:4px;background:var(--card2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:10px;font-family:var(--mono);color:var(--muted)}

@keyframes _spin{to{transform:rotate(360deg)}}
.spinner-wa{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:_spin .6s linear infinite}
</style>

<!-- LIGHTBOX -->
<div id="lb">
    <button id="lb-close" onclick="document.getElementById('lb').classList.remove('open')">✕</button>
    <img id="lb-img" src="" alt=""/>
    <div id="lb-cap"></div>
</div>

<!-- TOPBAR -->
<div class="topbar">
    <button class="btn-hamburger" onclick="abrirDrawer()" aria-label="Menu">☰</button>
    <div>
        <div class="page-title"><?= e($os['numero_os']) ?></div>
        <div class="page-sub"><?= labelTipoOS($os['tipo_os']) ?> · <?= e($os['cliente_nome']) ?></div>
    </div>
    <div class="topbar-actions">
        <a href="ordens.php" class="btn btn-ghost">← Voltar</a>
        <a href="cliente_detalhe.php?id=<?= $os['cliente_id'] ?>" class="btn btn-ghost">◎ Cliente</a>
    </div>
</div>

<div class="content">

<?php if ($msgFlash): ?>
    <div class="alert alert-success"><?= e($msgFlash) ?></div>
<?php endif; ?>
<?php if ($erroFlash): ?>
    <div class="alert alert-danger"><?= e($erroFlash) ?></div>
<?php endif; ?>

<!-- STATUS CHIPS -->
<div style="display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap">
    <?= badgeStatus($os['status']) ?>
    <span class="chip"><?= labelTipoOS($os['tipo_os']) ?></span>
    <?php if ($os['protocolo']): ?>
        <span class="chip">Proto: <?= e($os['protocolo']) ?></span>
    <?php endif; ?>
    <?php if (!$isFechada): ?>
        <span class="info-badge">⏱ Aberta há <?= tempoAtras($os['data_abertura']) ?></span>
    <?php endif; ?>
</div>

<!-- ═══════════════════════════════════════════
     GRID PRINCIPAL
════════════════════════════════════════════ -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px">
    <div>
        <div class="section-head"><span class="section-title">◈ Informações</span></div>
        <div class="detail-grid" style="margin-bottom:14px">
            <div class="detail-item">
                <div class="detail-label">CLIENTE</div>
                <div class="detail-val"><a href="cliente_detalhe.php?id=<?= $os['cliente_id'] ?>" style="color:var(--cyan)"><?= e($os['cliente_nome']) ?></a></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">TELEFONE</div>
                <div class="detail-val mono"><?= e($os['cliente_tel']?:'—') ?></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">CIDADE / PLANO</div>
                <div class="detail-val"><?= e($os['endereco_cidade']?:'—') ?> · <?= e($os['plano']?:'—') ?></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">TÉCNICO</div>
                <div class="detail-val"><?= e($os['tecnico_nome']?:'—') ?></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">ABERTURA</div>
                <div class="detail-val mono"><?= fmtData($os['data_abertura']) ?></div>
            </div>
            <?php if ($os['agendamento']): ?>
            <div class="detail-item">
                <div class="detail-label">AGENDAMENTO</div>
                <div class="detail-val mono text-purple"><?= fmtData($os['agendamento']) ?></div>
            </div>
            <?php endif; ?>
            <?php if ($os['data_fechamento']): ?>
            <div class="detail-item">
                <div class="detail-label">FECHAMENTO</div>
                <div class="detail-val mono text-green"><?= fmtData($os['data_fechamento']) ?></div>
            </div>
            <?php endif; ?>
        </div>
        
        <?php if ($os['relato_cliente']): ?>
        <div style="margin-bottom:10px">
            <div class="form-label" style="margin-bottom:5px">RELATO DO CLIENTE</div>
            <div style="background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px;font-size:12.5px;line-height:1.6"><?= nl2br(e($os['relato_cliente'])) ?></div>
        </div>
        <?php endif; ?>
        
        <?php if ($os['descricao_servico']): ?>
        <div style="margin-bottom:10px">
            <div class="form-label" style="margin-bottom:5px">DESCRIÇÃO DO SERVIÇO</div>
            <div style="background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px;font-size:12.5px;line-height:1.6"><?= nl2br(e($os['descricao_servico'])) ?></div>
        </div>
        <?php endif; ?>
        
        <?php if ($os['solucao']): ?>
        <div>
            <div class="form-label" style="margin-bottom:5px">SOLUÇÃO APLICADA</div>
            <div style="background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.2);border-radius:8px;padding:12px;font-size:12.5px;color:var(--green);line-height:1.6"><?= nl2br(e($os['solucao'])) ?></div>
        </div>
        <?php endif; ?>
    </div>

    <div>
        <?php if (!$isFechada): ?>
        <form method="post">
            <input type="hidden" name="csrf_token" value="<?= csrfToken() ?>"/>
            <div class="form-card">
                <div class="form-section-title">✎ ATUALIZAR OS</div>
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label">STATUS</label>
                        <select class="form-select" name="status">
                            <option value="ABERTA" <?= $os['status']==='ABERTA' ?'selected':''?>>Aberta</option>
                            <option value="AGENDADA" <?= $os['status']==='AGENDADA' ?'selected':''?>>Agendada</option>
                            <option value="EM_ANDAMENTO" <?= $os['status']==='EM_ANDAMENTO' ?'selected':''?>>Em Andamento</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">TÉCNICO</label>
                        <select class="form-select" name="tecnico_id">
                            <option value="">—</option>
                            <?php foreach ($tecnicos as $t): ?>
                                <option value="<?= $t['id'] ?>" <?= $t['id']==$os['tecnico_id']?'selected':''?>><?= e($t['nome']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group full">
                        <label class="form-label">AGENDAMENTO</label>
                        <input class="form-input" type="datetime-local" name="agendamento"
                               value="<?= $os['agendamento'] ? date('Y-m-d\TH:i', strtotime($os['agendamento'])) : '' ?>"/>
                    </div>
                    <div class="form-group full">
                        <label class="form-label">DESCRIÇÃO DO SERVIÇO</label>
                        <textarea class="form-textarea" name="descricao_servico" rows="3"><?= e($os['descricao_servico']) ?></textarea>
                    </div>
                    <div class="form-group full">
                        <label class="form-label">SOLUÇÃO APLICADA</label>
                        <textarea class="form-textarea" name="solucao" rows="3"><?= e($os['solucao']) ?></textarea>
                    </div>
                </div>
                <div style="display:flex;gap:8px;margin-top:14px;flex-wrap:wrap">
                    <button type="submit" name="action" value="atualizar" class="btn btn-ghost btn-sm">↻ Salvar</button>
                    <button type="submit" name="action" value="concluir" class="btn btn-success btn-sm" onclick="return confirm('Confirmar conclusão?')">✓ Concluir OS</button>
                    <button type="submit" name="action" value="cancelar" class="btn btn-danger btn-sm" onclick="return confirm('Cancelar esta OS?')">✕ Cancelar</button>
                </div>
            </div>
        </form>
        <?php else: ?>
        <div class="form-card">
            <div class="form-section-title">OS <?= $os['status'] ?></div>
            <?php if ($os['status']==='CONCLUIDA'): ?>
                <div class="alert alert-success" style="margin-bottom:10px">Concluída em <?= fmtData($os['data_fechamento']) ?>.</div>
            <?php else: ?>
                <div class="alert alert-warning" style="margin-bottom:10px">Cancelada em <?= fmtData($os['data_fechamento']) ?>.</div>
            <?php endif; ?>
            <a href="os_form.php?cliente_id=<?= $os['cliente_id'] ?>" class="btn btn-ghost btn-sm">+ Nova OS para este cliente</a>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- ═══════════════════════════════════════════
     MATERIAIS + FOTOS
════════════════════════════════════════════ -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">

    <!-- ─── MATERIAIS ─── -->
    <div>
        <div class="section-head"><span class="section-title">▣ Materiais Utilizados (<?= count($matList) ?>)</span></div>
        
        <?php if (empty($matList)): ?>
            <div style="color:var(--muted);font-size:12px;padding:8px 0">Nenhum material registrado.</div>
        <?php else: foreach ($matList as $m):
            $estq = (int)$m['quantidade_estoque'];
            if ($estq <= 0)           { $estqCor='var(--red)';   $estqTag='SEM ESTOQUE'; $estqBg='rgba(239,68,68,.1)'; }
            elseif ($estq <= 5)       { $estqCor='var(--amber)'; $estqTag=$estq.' un';   $estqBg='rgba(245,158,11,.1)'; }
            else                      { $estqCor='var(--muted)'; $estqTag=$estq.' un';   $estqBg='rgba(90,122,154,.08)'; }
        ?>
            <div class="mat-row">
                <div class="mat-nome"><?= e($m['mat_nome']) ?></div>
                <div class="mat-qtd"><?= $m['quantidade_usada'] ?> <span style="font-size:10px;color:var(--muted)"><?= e($m['unidade']) ?></span></div>
                <div class="mat-estoque-tag" style="color:<?= $estqCor ?>;background:<?= $estqBg ?>">Estq: <?= $estqTag ?></div>
                <?php if (!$isFechada): ?>
                <form method="post" style="flex-shrink:0">
                    <input type="hidden" name="csrf_token" value="<?= csrfToken() ?>"/>
                    <input type="hidden" name="action" value="rem_material"/>
                    <input type="hidden" name="mu_id" value="<?= $m['id'] ?>"/>
                    <button type="submit" class="btn btn-danger btn-xs" onclick="return confirm('Remover e devolver ao estoque?')" title="Remover material">↩</button>
                </form>
                <?php endif; ?>
            </div>
            <?php if ($m['observacoes']): ?>
                <div style="font-size:10px;color:var(--muted);margin:-2px 0 6px 14px;font-family:var(--mono)">→ <?= e($m['observacoes']) ?></div>
            <?php endif; ?>
        <?php endforeach; endif; ?>
        
        <?php if (!$isFechada): ?>
        <div style="margin-top:16px;padding-top:14px;border-top:1px solid var(--border)">
            <div class="form-label" style="margin-bottom:10px">REGISTRAR MATERIAL <span style="color:var(--green);font-size:9px">(baixa automática no estoque)</span></div>
            <form method="post" id="form-mat">
                <input type="hidden" name="csrf_token" value="<?= csrfToken() ?>"/>
                <input type="hidden" name="action" value="add_material"/>
                <div class="form-group" style="margin-bottom:10px">
                    <label class="form-label">MATERIAL</label>
                    <select class="form-select" name="material_id" id="sel-mat" onchange="atualizarEstoque()" required>
                        <option value="">Selecione...</option>
                        <?php foreach ($todosMat as $m):
                            $qtd = (int)$m['quantidade_estoque'];
                            $ico = $qtd === 0 ? ' 🔴' : ($qtd <= (int)$m['alerta_minimo'] ? ' 🟡' : ' 🟢');
                        ?>
                            <option value="<?= $m['id'] ?>" data-estoque="<?= $qtd ?>" data-unidade="<?= e($m['unidade']) ?>">
                                <?= e($m['nome']) ?> — <?= $qtd ?> <?= e($m['unidade']) ?><?= $ico ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px">
                    <div class="form-group">
                        <label class="form-label">QUANTIDADE</label>
                        <input class="form-input" type="number" name="quantidade" id="inp-qtd" value="1" min="1"/>
                    </div>
                    <div class="form-group">
                        <label class="form-label">ESTOQUE ATUAL</label>
                        <div id="estq-display" style="background:var(--card);border:1px solid var(--border);border-radius:7px;padding:9px 12px;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--muted)">—</div>
                    </div>
                </div>
                <div class="form-group" style="margin-bottom:10px">
                    <label class="form-label">OBSERVAÇÃO (opcional)</label>
                    <input class="form-input" type="text" name="obs_material" placeholder="Ex: Fusão ramal #3..."/>
                </div>
                <button type="button" class="btn btn-primary btn-sm" onclick="confirmarMaterial()">▼ Registrar</button>
            </form>
        </div>
        <?php endif; ?>
    </div>

    <!-- ─── FOTOS ─── -->
    <div>
        <div class="section-head"><span class="section-title">📷 Fotos (<?= count($todasFotos) ?>)</span></div>
        
        <div class="ftab-bar">
            <div class="ftab active" id="tab-servico" onclick="abaFoto('servico')">📸 Serviço (<?= count($fotosServico) ?>)</div>
            <div class="ftab" id="tab-olt" onclick="abaFoto('olt')">📡 OLT/CTO (<?= count($fotosOLT) ?>)</div>
        </div>
        
        <div id="aba-servico">
            <?php if (empty($fotosServico)): ?>
                <div style="color:var(--muted);font-size:12px;padding:6px 0">Nenhuma foto do serviço ainda.</div>
            <?php else: ?>
            <div class="fotos-grid">
                <?php foreach ($fotosServico as $f): ?>
                <div class="fcard" onclick="lb('<?= e($f['caminho_arquivo']) ?>','<?= e(addslashes($f['descricao'])) ?>')">
                    <img src="<?= e($f['caminho_arquivo']) ?>" loading="lazy"/>
                    <div class="fcard-cap"><?= e($f['descricao']?:fmtData($f['data_envio'])) ?></div>
                    <?php if (!$isFechada): ?>
                    <form method="post" style="position:absolute;top:3px;right:3px">
                        <input type="hidden" name="csrf_token" value="<?= csrfToken() ?>"/>
                        <input type="hidden" name="action" value="del_foto"/>
                        <input type="hidden" name="foto_id" value="<?= $f['id'] ?>"/>
                        <button class="fcard-del" type="submit" onclick="event.stopPropagation();return confirm('Excluir?')">✕</button>
                    </form>
                    <?php endif; ?>
                </div>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>
        </div>
        
        <div id="aba-olt" style="display:none">
            <?php if (empty($fotosOLT)): ?>
                <div style="color:var(--muted);font-size:12px;padding:6px 0">Nenhuma foto da OLT/CTO ainda.</div>
            <?php else: ?>
            <div class="fotos-grid">
                <?php foreach ($fotosOLT as $f): ?>
                <div class="fcard" onclick="lb('<?= e($f['caminho_arquivo']) ?>','<?= e(addslashes($f['descricao'])) ?>')">
                    <img src="<?= e($f['caminho_arquivo']) ?>" loading="lazy"/>
                    <div class="fcard-cap"><?= e($f['descricao']?:fmtData($f['data_envio'])) ?></div>
                    <?php if (!$isFechada): ?>
                    <form method="post" style="position:absolute;top:3px;right:3px">
                        <input type="hidden" name="csrf_token" value="<?= csrfToken() ?>"/>
                        <input type="hidden" name="action" value="del_foto"/>
                        <input type="hidden" name="foto_id" value="<?= $f['id'] ?>"/>
                        <button class="fcard-del" type="submit" onclick="event.stopPropagation();return confirm('Excluir?')">✕</button>
                    </form>
                    <?php endif; ?>
                </div>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>
        </div>
        
        <div style="margin-top:16px;padding-top:14px;border-top:1px solid var(--border)">
            <div class="form-label" style="margin-bottom:10px">ENVIAR FOTOS</div>
            <form method="post" enctype="multipart/form-data" id="form-fotos">
                <input type="hidden" name="csrf_token" value="<?= csrfToken() ?>"/>
                <input type="hidden" name="action" value="upload_fotos"/>
                <div style="display:flex;gap:16px;margin-bottom:12px">
                    <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer">
                        <input type="radio" name="foto_tipo" value="SERVICO" checked style="accent-color:var(--cyan)"/> 📸 Serviço
                    </label>
                    <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer">
                        <input type="radio" name="foto_tipo" value="OLT" style="accent-color:var(--amber)"/> 📡 OLT / CTO
                    </label>
                </div>
                <input class="form-input" type="text" name="foto_desc" placeholder="Descrição (opcional)" style="margin-bottom:10px"/>
                <div class="uz" id="uz-fotos" ondragover="this.classList.add('over');event.preventDefault()" ondragleave="this.classList.remove('over')" ondrop="dropFotos(event)">
                    <input type="file" name="fotos_os[]" accept="image/jpeg,image/png,image/webp,image/gif" multiple id="inp-fotos" onchange="prevFotos(this)"/>
                    <div class="uz-ico">📷</div>
                    <div class="uz-lbl"><b>Clique ou arraste</b> as fotos aqui</div>
                    <div class="uz-hint">Múltiplas imagens · JPG · PNG · WEBP · Máx. 15 MB cada</div>
                </div>
                <div id="preview-fotos" class="fotos-grid"></div>
                <button type="button" class="btn btn-primary btn-sm" style="margin-top:10px" onclick="submitFotos()">▲ Enviar Fotos</button>
            </form>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════════
     WHATSAPP - RELATÓRIO COMPLETO
════════════════════════════════════════════ -->
<div style="margin-top:22px">
    <div class="section-head">
        <span class="section-title">📱 Enviar Relatório WhatsApp</span>
        <span style="font-size:10px;color:var(--muted);font-family:var(--mono)">ClickService API</span>
    </div>
    
    <div class="wa-box">
        <div class="wa-title">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="#25d366"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12.05 2C6.495 2 2 6.495 2 12.05c0 1.868.514 3.617 1.414 5.122L2 22l4.951-1.39A9.962 9.962 0 0 0 12.05 22c5.555 0 10.05-4.495 10.05-10.05S17.605 2 12.05 2zm0 18.5a8.45 8.45 0 0 1-4.455-1.263l-.318-.19-3.291.923.924-3.222-.208-.331A8.45 8.45 0 0 1 3.5 12.05C3.5 7.327 7.327 3.5 12.05 3.5c4.723 0 8.55 3.827 8.55 8.55 0 4.723-3.827 8.55-8.55 8.55z"/></svg>
            RELATÓRIO COMPLETO
        </div>

        <!-- Preview do relatório -->
        <div style="margin-bottom:14px">
            <div class="form-label" style="margin-bottom:6px;font-size:10px;color:var(--muted)">📄 PREVIEW</div>
            <div class="wa-msg" id="wa-preview"><?= e($waMensagem) ?></div>
        </div>

        <!-- Thumbnails das fotos -->
        <?php if ($totalFotos > 0): ?>
        <div style="margin-bottom:14px">
            <div class="form-label" style="margin-bottom:6px;font-size:10px;color:var(--muted)">📸 FOTOS NO RELATÓRIO (<?= $totalFotos ?>)</div>
            <div style="display:flex;flex-wrap:wrap;gap:6px">
                <?php if ($linkFachada && $fotoFachada): ?>
                <div style="position:relative;cursor:zoom-in" onclick="lb('<?= e($fotoFachada) ?>','Fachada')">
                    <img src="<?= e($fotoFachada) ?>" style="width:68px;height:68px;object-fit:cover;border-radius:7px;border:2px solid #00d4ff"/>
                    <div style="position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:7px;background:rgba(0,0,0,.75);color:#00d4ff;padding:1px 0;border-radius:0 0 5px 5px">🏠</div>
                </div>
                <?php endif; ?>
                <?php foreach ($fotosServico as $f): ?>
                <div style="position:relative;cursor:zoom-in" onclick="lb('<?= e($f['caminho_arquivo']) ?>','<?= e(addslashes($f['descricao'])) ?>')">
                    <img src="<?= e($f['caminho_arquivo']) ?>" style="width:68px;height:68px;object-fit:cover;border-radius:7px;border:2px solid var(--border)"/>
                    <div style="position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:7px;background:rgba(0,0,0,.75);color:#dde8f5;padding:1px 0;border-radius:0 0 5px 5px">📸</div>
                </div>
                <?php endforeach; ?>
                <?php foreach ($fotosOLT as $f): ?>
                <div style="position:relative;cursor:zoom-in" onclick="lb('<?= e($f['caminho_arquivo']) ?>','<?= e(addslashes($f['descricao'])) ?>')">
                    <img src="<?= e($f['caminho_arquivo']) ?>" style="width:68px;height:68px;object-fit:cover;border-radius:7px;border:2px solid var(--amber)"/>
                    <div style="position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:7px;background:rgba(0,0,0,.75);color:var(--amber);padding:1px 0;border-radius:0 0 5px 5px">📡</div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php else: ?>
        <div style="background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.15);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--muted);margin-bottom:12px">
            ℹ Adicione fotos do serviço, OLT ou fachada para incluí-las no relatório.
        </div>
        <?php endif; ?>

        <!-- Seleção de destinatários -->
        <?php if (!empty($supervisores)): ?>
        <div style="margin-bottom:12px">
            <label class="form-label" style="margin-bottom:4px;font-size:11px;color:var(--muted)">👥 DESTINATÁRIO(S)</label>
            
            <?php if (count($supervisores) > 1): ?>
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--muted);margin-bottom:6px">
                <input type="checkbox" id="chk-todos-wa" onchange="toggleTodosSupervisores()">
                <span>📢 Enviar para <b style="color:var(--text)">TODOS</b> os supervisores ativos (<?= count($supervisores) ?>)</span>
            </label>
            <?php endif; ?>
            
            <select class="form-select" id="sel-supervisor-wa" style="margin-bottom:6px">
                <option value="">Selecione um supervisor...</option>
                <?php foreach ($supervisores as $sup): ?>
                <option value="<?= $sup['id'] ?>" data-tel="<?= e($sup['whatsapp']) ?>" data-nome="<?= e($sup['nome']) ?>">
                    <?= e($sup['nome']) ?> (<?= e($sup['cargo'] ?? 'Supervisor') ?>) — <?= e($sup['whatsapp']) ?>
                </option>
                <?php endforeach; ?>
            </select>
            
            <div id="destinatarios-list" style="display:flex;flex-wrap:wrap;gap:4px;margin-top:4px"></div>
            
            <div style="font-size:10px;color:var(--muted);font-family:var(--mono);margin-top:4px" id="destinatario-info">
                Nenhum supervisor selecionado
            </div>
        </div>
        <?php else: ?>
        <div style="margin-bottom:12px">
            <div class="form-group">
                <label class="form-label" style="font-size:11px;color:var(--muted)">📞 TELEFONE DO SUPERVISOR</label>
                <input class="form-input" type="tel" id="tel-destino-wa" 
                       placeholder="17999999999 (DDD + número)"
                       value="<?= e($supervisorTel) ?>"
                       style="font-family:var(--mono);font-size:13px"/>
            </div>
            <?php if (!$supervisorTel): ?>
            <a href="supervisores.php" class="btn btn-ghost btn-xs">⚙ Gerenciar Supervisores</a>
            <?php endif; ?>
        </div>
        <?php endif; ?>

        <!-- Botões de envio -->
        <div style="display:flex;gap:8px;flex-wrap:wrap">
            <button type="button" class="wa-btn" id="btn-enviar-completo" 
                    style="flex:1;min-width:180px;background:#0a8fd1"
                    onclick="enviarRelatorioClickService('completo')">
                📡 Enviar Relatório Completo
                <span style="font-size:10px;opacity:0.7;display:block">
                    texto + <?= $totalFotos ?> foto<?= $totalFotos!=1?'s':'' ?>
                </span>
            </button>
            <button type="button" class="wa-btn" id="btn-enviar-texto" 
                    style="flex:0;background:#6c7a8a;padding:10px 16px;font-size:12px"
                    onclick="enviarRelatorioClickService('texto')">
                📝 Só Texto
            </button>
            <button type="button" class="wa-btn" id="btn-enviar-fotos" 
                    style="flex:0;background:#25d366;padding:10px 16px;font-size:12px"
                    onclick="enviarRelatorioClickService('fotos')"
                    <?= $totalFotos === 0 ? 'disabled style="opacity:0.5;cursor:not-allowed"' : '' ?>>
                📸 Só Fotos (<?= $totalFotos ?>)
            </button>
        </div>

        <!-- Status e progresso -->
        <div id="wa-status" style="margin-top:12px;padding:8px;border-radius:8px;text-align:center;font-size:11px;min-height:20px;font-family:var(--mono);display:none"></div>
        
        <div id="wa-progress" style="display:none;margin-top:10px">
            <div style="background:var(--card2);border-radius:8px;padding:10px 14px">
                <div id="wa-progress-text" style="font-size:11px;color:var(--text);margin-bottom:6px">Preparando...</div>
                <div style="background:var(--border);border-radius:4px;height:5px;overflow:hidden">
                    <div id="wa-progress-bar" style="background:var(--cyan);height:100%;width:0%;transition:width .3s ease"></div>
                </div>
                <div id="wa-progress-detail" style="font-size:9px;color:var(--muted);margin-top:4px"></div>
            </div>
        </div>
        
        <div id="wa-resultado" style="display:none;margin-top:10px"></div>

        <!-- Ações secundárias -->
        <div style="display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;justify-content:center">
            <button type="button" class="btn btn-ghost btn-xs" onclick="copiarMensagem()">📋 Copiar mensagem</button>
            <a href="relatorio_os.php?id=<?= $id ?>" target="_blank" class="btn btn-ghost btn-xs">📄 Relatório HTML</a>
            <?php if ($os['cliente_tel']): ?>
            <a href="https://wa.me/55<?= preg_replace('/\D/', '', $os['cliente_tel']) ?>" target="_blank" class="btn btn-ghost btn-xs" style="color:#25d366">💬 WhatsApp Cliente</a>
            <?php endif; ?>
            <a href="https://clickservice.com.br/painel" target="_blank" class="btn btn-ghost btn-xs" style="color:var(--cyan)">🔌 Painel ClickService</a>
        </div>

        <!-- Histórico de envios -->
        <?php if (!empty($enviosLog)): ?>
        <div style="margin-top:14px;padding-top:14px;border-top:1px solid var(--border)">
            <div style="font-size:10px;color:var(--muted);font-family:var(--mono);letter-spacing:1px;margin-bottom:8px">
                📋 HISTÓRICO DE ENVIOS
            </div>
            <?php foreach (array_slice($enviosLog, 0, 5) as $log): ?>
            <div class="envio-log-item">
                <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px">
                    <span style="font-size:10px;font-family:var(--mono);color:var(--muted)"><?= date('d/m/Y H:i', strtotime($log['enviado_em'])) ?></span>
                    <span class="envio-log-status status-<?= $log['status'] ?? 'enviado' ?>"><?= strtoupper($log['status'] ?? 'ENVIADO') ?></span>
                </div>
                <div style="font-size:10px;color:var(--muted);margin-top:4px">
                    📸 <?= $log['imagens_enviadas'] ?? 0 ?>/<?= $log['total_imagens'] ?? 0 ?> imagens
                    <?php if (!empty($log['erro'])): ?>
                        <span style="color:var(--red)"> — <?= e($log['erro']) ?></span>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>
</div>

</div><!-- /content -->

<script>
// ══════════════════════════════════════════
//  LIGHTBOX
// ══════════════════════════════════════════
function lb(src, cap) {
    document.getElementById('lb-img').src = src;
    document.getElementById('lb-cap').textContent = cap || '';
    document.getElementById('lb').classList.add('open');
}

document.getElementById('lb').addEventListener('click', e => {
    if (e.target === document.getElementById('lb')) document.getElementById('lb').classList.remove('open');
});

document.addEventListener('keydown', e => {
    if (e.key === 'Escape') document.getElementById('lb').classList.remove('open');
});

// ══════════════════════════════════════════
//  ABAS DE FOTOS
// ══════════════════════════════════════════
function abaFoto(aba) {
    const servico = document.getElementById('aba-servico');
    const olt = document.getElementById('aba-olt');
    const tabServico = document.getElementById('tab-servico');
    const tabOlt = document.getElementById('tab-olt');
    
    if (aba === 'servico') {
        servico.style.display = '';
        olt.style.display = 'none';
        tabServico.classList.add('active');
        tabOlt.classList.remove('active');
    } else {
        servico.style.display = 'none';
        olt.style.display = '';
        tabServico.classList.remove('active');
        tabOlt.classList.add('active');
    }
}

// ══════════════════════════════════════════
//  ESTOQUE
// ══════════════════════════════════════════
function atualizarEstoque() {
    const sel = document.getElementById('sel-mat');
    if (!sel) return;
    const opt = sel.options[sel.selectedIndex];
    const estq = parseInt(opt?.dataset?.estoque || '-1');
    const und = opt?.dataset?.unidade || 'un';
    const el = document.getElementById('estq-display');
    
    if (estq < 0 || !opt.value) {
        el.textContent = '—';
        el.style.color = 'var(--muted)';
        return;
    }
    el.textContent = `${estq} ${und}`;
    el.style.color = estq === 0 ? 'var(--red)' : (estq <= 5 ? 'var(--amber)' : 'var(--green)');
    document.getElementById('inp-qtd').max = estq > 0 ? estq : 99999;
}

function confirmarMaterial() {
    const sel = document.getElementById('sel-mat');
    if (!sel.value) {
        alert('Selecione um material.');
        return;
    }
    document.getElementById('form-mat').submit();
}

// ══════════════════════════════════════════
//  UPLOAD DE FOTOS
// ══════════════════════════════════════════
function lerFiles(files, cid) {
    const c = document.getElementById(cid);
    Array.from(files).forEach(f => {
        if (!f.type.startsWith('image/')) return;
        const r = new FileReader();
        r.onload = e => {
            const d = document.createElement('div');
            d.className = 'fcard';
            d.style.cursor = 'default';
            d.innerHTML = `<img src="${e.target.result}"/><div class="fcard-cap">${f.name}</div>`;
            c.appendChild(d);
        };
        r.readAsDataURL(f);
    });
}

function prevFotos(inp) {
    document.getElementById('preview-fotos').innerHTML = '';
    if (inp.files) lerFiles(inp.files, 'preview-fotos');
}

function dropFotos(e) {
    e.preventDefault();
    e.target.closest('.uz').classList.remove('over');
    document.getElementById('preview-fotos').innerHTML = '';
    if (e.dataTransfer.files) lerFiles(e.dataTransfer.files, 'preview-fotos');
}

function submitFotos() {
    const inp = document.getElementById('inp-fotos');
    if (!inp.files || inp.files.length === 0) {
        alert('Selecione ao menos uma foto.');
        return;
    }
    document.getElementById('form-fotos').submit();
}

// ══════════════════════════════════════════
//  WHATSAPP - ENVIO VIA CLICKSERVICE
// ══════════════════════════════════════════
const WA_MSG = <?= json_encode($waMensagem) ?>;
const OS_ID = <?= (int)$id ?>;
const CSRF_TOKEN = <?= json_encode(csrfToken()) ?>;
const FOTOS_RELATIVAS = <?= json_encode(array_values(array_filter(array_merge(
    $fotoFachada ? [$fotoFachada] : [],
    array_column($fotosServico, 'caminho_arquivo'),
    array_column($fotosOLT, 'caminho_arquivo')
))), JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES) ?>;

function toggleTodosSupervisores() {
    const chk = document.getElementById('chk-todos-wa');
    const sel = document.getElementById('sel-supervisor-wa');
    const info = document.getElementById('destinatario-info');
    
    if (chk && chk.checked) {
        sel.disabled = true;
        sel.value = '';
        info.textContent = '📢 Enviando para TODOS os supervisores ativos';
        document.getElementById('destinatarios-list').innerHTML = '';
    } else {
        sel.disabled = false;
        info.textContent = 'Nenhum supervisor selecionado';
    }
}

function getDestinatarios() {
    const chkTodos = document.getElementById('chk-todos-wa');
    const sel = document.getElementById('sel-supervisor-wa');
    const telInput = document.getElementById('tel-destino-wa');
    const destinatarios = [];
    
    if (chkTodos && chkTodos.checked) {
        // Todos os supervisores - coletar do select
        const options = sel.querySelectorAll('option');
        options.forEach(opt => {
            if (opt.value) {
                const tel = opt.dataset.tel;
                if (tel && tel.replace(/\D/g, '').length >= 10) {
                    destinatarios.push(tel.replace(/\D/g, ''));
                }
            }
        });
    } else if (sel && sel.value) {
        const tel = sel.options[sel.selectedIndex]?.dataset?.tel;
        if (tel && tel.replace(/\D/g, '').length >= 10) {
            destinatarios.push(tel.replace(/\D/g, ''));
        }
    } else if (telInput) {
        const tel = telInput.value.replace(/\D/g, '');
        if (tel.length >= 10) {
            destinatarios.push(tel);
        }
    }
    
    return destinatarios;
}

async function enviarRelatorioClickService(modo = 'completo') {
    const destinatarios = getDestinatarios();
    const statusEl = document.getElementById('wa-status');
    const progressEl = document.getElementById('wa-progress');
    const progressBar = document.getElementById('wa-progress-bar');
    const progressText = document.getElementById('wa-progress-text');
    const progressDetail = document.getElementById('wa-progress-detail');
    const resultadoEl = document.getElementById('wa-resultado');
    
    const btns = {
        completo: document.getElementById('btn-enviar-completo'),
        texto: document.getElementById('btn-enviar-texto'),
        fotos: document.getElementById('btn-enviar-fotos')
    };
    
    if (destinatarios.length === 0) {
        statusEl.style.display = '';
        statusEl.className = 'wa-status disconnected';
        statusEl.innerHTML = '⚠ Selecione ao menos um supervisor ou informe um telefone válido.';
        return;
    }
    
    // Desabilita todos os botões
    Object.values(btns).forEach(b => { if (b) b.disabled = true; });
    
    // Configura UI de progresso
    statusEl.style.display = 'none';
    progressEl.style.display = '';
    progressBar.style.width = '0%';
    progressText.textContent = '📋 Preparando relatório...';
    progressDetail.textContent = `${destinatarios.length} destinatário(s)`;
    resultadoEl.style.display = 'none';
    
    const modoLabels = {
        'completo': 'Relatório Completo (texto + fotos)',
        'texto': 'Apenas Texto',
        'fotos': 'Apenas Fotos'
    };
    
    // Simula progresso
    let simProgress = 0;
    const simInterval = setInterval(() => {
        simProgress = Math.min(simProgress + 3, 85);
        progressBar.style.width = simProgress + '%';
        
        if (simProgress < 20) {
            progressText.textContent = '📸 Preparando imagens...';
        } else if (simProgress < 40) {
            progressText.textContent = '📱 Conectando ao ClickService...';
        } else if (simProgress < 60) {
            progressText.textContent = '📤 Enviando ' + modoLabels[modo];
        } else {
            progressText.textContent = '⏳ Aguardando confirmação...';
        }
    }, 400);
    
    try {
        const formData = new FormData();
        formData.append('csrf_token', CSRF_TOKEN);
        formData.append('id', OS_ID);
        formData.append('numeros', JSON.stringify(destinatarios));
        formData.append('texto', WA_MSG);
        formData.append('fotos', JSON.stringify(FOTOS_RELATIVAS));
        formData.append('delay', '3000');
        formData.append('modo', modo);
        
        const resp = await fetch('whatsapp_clickservice.php', {
            method: 'POST',
            body: formData
        });
        
        clearInterval(simInterval);
        progressBar.style.width = '100%';
        
        const data = await resp.json();
        
        if (data.conexao_ativa === false && data.sucessos === 0) {
            progressText.textContent = '⚠ Conexão inativa';
            progressDetail.textContent = 'Conecte o WhatsApp no painel ClickService';
            
            resultadoEl.innerHTML = `
                <div style="background:rgba(239,68,68,.08);border:1px solid var(--red);border-radius:10px;padding:14px;text-align:center">
                    <div style="color:var(--red);font-weight:700;margin-bottom:6px">⚠ Conexão WhatsApp Inativa</div>
                    <div style="font-size:12px;color:var(--muted);margin-bottom:10px">O número não está conectado ao WhatsApp. Escaneie o QR Code no painel.</div>
                    <a href="https://clickservice.com.br/painel" target="_blank" class="btn btn-primary btn-sm">🔌 Conectar Agora</a>
                </div>
            `;
            resultadoEl.style.display = '';
            return;
        }
        
        if (data.sucesso && data.falhas === 0) {
            progressText.textContent = '✅ Envio concluído!';
            let msg = `<div style="background:rgba(16,185,129,.08);border:1px solid var(--green);border-radius:10px;padding:14px">
                <div style="color:var(--green);font-weight:700;font-size:14px;margin-bottom:6px">✅ Relatório enviado com sucesso!</div>
                <div style="font-size:12px;color:var(--muted)">${data.sucessos} mensagem(s) enviada(s) para ${destinatarios.length} destinatário(s)</div>`;
            
            if (data.total_fotos > 0) {
                msg += `<div style="font-size:11px;color:var(--muted);margin-top:4px">📸 ${data.total_fotos} foto(s) incluída(s)</div>`;
            }
            
            // Detalhes por destinatário
            if (data.detalhes && data.detalhes.length > 0) {
                msg += `<div style="margin-top:10px;font-size:10px;color:var(--muted);font-family:var(--mono)">`;
                data.detalhes.forEach(d => {
                    const icone = d.sucesso ? '✅' : '❌';
                    msg += `<div>${icone} ${d.numero}: ${d.mensagem || (d.sucesso ? 'OK' : d.erro || 'Falha')}</div>`;
                });
                msg += `</div>`;
            }
            
            msg += `<div style="margin-top:8px;font-size:9px;color:var(--muted);text-align:center">Enviado via ClickService API</div>`;
            msg += `</div>`;
            resultadoEl.innerHTML = msg;
            resultadoEl.style.display = '';
            statusEl.style.display = 'none';
        } else {
            progressText.textContent = '⚠ Envio parcial';
            const erro = data.detalhes?.find(d => !d.sucesso)?.erro || 'Falha no envio';
            progressDetail.textContent = erro;
            
            resultadoEl.innerHTML = `
                <div style="background:rgba(245,158,11,.08);border:1px solid var(--amber);border-radius:10px;padding:14px;text-align:center">
                    <div style="color:var(--amber);font-weight:700;margin-bottom:4px">⚠ Envio Parcial</div>
                    <div style="font-size:12px;color:var(--muted)">${data.sucessos} enviados, ${data.falhas} falhas</div>
                    <div style="font-size:10px;color:var(--muted);margin-top:4px">${erro}</div>
                </div>
            `;
            resultadoEl.style.display = '';
        }
    } catch (e) {
        clearInterval(simInterval);
        progressText.textContent = '❌ Erro de conexão';
        progressDetail.textContent = e.message || 'Falha ao conectar ao servidor';
        
        resultadoEl.innerHTML = `
            <div style="background:rgba(239,68,68,.08);border:1px solid var(--red);border-radius:10px;padding:14px;text-align:center">
                <div style="color:var(--red);font-weight:700;margin-bottom:4px">❌ Erro</div>
                <div style="font-size:12px;color:var(--muted)">${e.message || 'Não foi possível conectar ao serviço'}</div>
                <div style="font-size:10px;color:var(--muted);margin-top:4px">Verifique sua conexão de internet e tente novamente.</div>
            </div>
        `;
        resultadoEl.style.display = '';
    }
    
    // Restaura botões
    Object.values(btns).forEach(b => { if (b) b.disabled = false; });
    
    // Esconde progresso após 5 segundos se concluído
    setTimeout(() => {
        if (progressBar.style.width === '100%' || resultadoEl.style.display !== 'none') {
            progressEl.style.display = 'none';
        }
    }, 5000);
}

function copiarMensagem() {
    const btn = event.target;
    const orig = btn.textContent;
    const msg = WA_MSG;
    
    if (navigator.clipboard) {
        navigator.clipboard.writeText(msg)
            .then(() => {
                btn.textContent = '✓ Copiado!';
                btn.style.color = 'var(--green)';
                setTimeout(() => { btn.textContent = orig; btn.style.color = ''; }, 2000);
            })
            .catch(() => copiarFallback(msg));
    } else {
        copiarFallback(msg);
    }
}

function copiarFallback(msg) {
    const ta = document.createElement('textarea');
    ta.value = msg;
    ta.style.cssText = 'position:fixed;opacity:0';
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    document.body.removeChild(ta);
    alert('Mensagem copiada!');
}

// ══════════════════════════════════════════
//  INICIALIZAÇÃO
// ══════════════════════════════════════════
document.addEventListener('DOMContentLoaded', function() {
    // Estoque
    const selMat = document.getElementById('sel-mat');
    if (selMat) {
        selMat.addEventListener('change', atualizarEstoque);
        setTimeout(atualizarEstoque, 100);
    }
    
    // Supervisor
    const selSupervisor = document.getElementById('sel-supervisor-wa');
    if (selSupervisor) {
        selSupervisor.addEventListener('change', function() {
            const info = document.getElementById('destinatario-info');
            const chkTodos = document.getElementById('chk-todos-wa');
            
            if (chkTodos && chkTodos.checked) {
                chkTodos.checked = false;
                toggleTodosSupervisores();
            }
            
            if (this.value) {
                const opt = this.options[this.selectedIndex];
                const nome = opt.dataset.nome || 'Supervisor';
                const tel = opt.dataset.tel || '';
                info.textContent = `👤 ${nome} — ${tel}`;
                info.style.color = 'var(--text)';
            } else {
                info.textContent = 'Nenhum supervisor selecionado';
                info.style.color = 'var(--muted)';
            }
        });
    }
});
</script>

<?php require_once __DIR__ . '/includes/footer.php'; ?>