{{--
    Partial: cabeçalho "Detalhes do chamado" + botão de copiar.
    Variáveis esperadas:
      $chamado     Model
      $tipoLabel   ?string — rótulo do badge à direita (default: tipo do chamado)

    Reaproveitado por todos os modais que mostram a coluna de detalhes —
    era o mesmo bloco de ~10 linhas copiado em oito arquivos diferentes.

    O botão monta o texto a copiar lendo o que já está renderizado ao lado
    (cabeçalho do solicitante + cards de payload), em vez de duplicar aqui
    a lógica de quais campos o Blade decide mostrar — assim vale pra
    qualquer tipo de chamado. `.closest('.col-md-6')` sobe até a coluna
    inteira, que em todo modal que inclui este partial é o mesmo `<div
    class="col-md-6">` que envolve o cabeçalho do solicitante, os cards e
    o rodapé "Aberto em".
--}}
@php
    $tipoLabel ??= $chamado->types->name ?? 'Solicitação';
@endphp

<div class="conteudo-col-header" style="display:flex;justify-content:space-between;align-items:center;">
    <span style="font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--dm-text-muted);">
        <i class="bi bi-file-text me-1"></i> Detalhes do chamado
    </span>
    <span style="display:flex;align-items:center;gap:.4rem;">
        <button type="button" id="copy-detalhes-{{ $chamado->id }}" title="Copiar detalhes do chamado"
            style="display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;padding:0;border:1px solid var(--dm-border);border-radius:4px;background:transparent;color:var(--dm-text-muted);cursor:pointer;transition:color .12s,border-color .12s;">
            <i class="bi bi-clipboard" style="font-size:.78rem;"></i>
        </button>
        <span style="display:inline-block;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.65px;padding:.18rem .5rem;border-radius:4px;background:rgba(127,127,255,.1);color:var(--dm-text-muted);border:1px solid rgba(127,127,255,.18);white-space:nowrap;">{{ $tipoLabel }}</span>
    </span>
</div>

<style>
#copy-detalhes-{{ $chamado->id }}:hover { color: var(--dm-text); border-color: var(--dm-text-muted); }
</style>

<script>
(function () {
    var btn = document.getElementById('copy-detalhes-{{ $chamado->id }}');
    // O modal pode ser recarregado (nova resposta, etc.) sem que este script
    // rode de novo em alguns fluxos — mas quando roda, evita ligar o mesmo
    // botão duas vezes.
    if (!btn || btn.dataset.copyBound) return;
    btn.dataset.copyBound = '1';

    var coluna = btn.closest('.col-md-6');
    if (!coluna) return;

    btn.addEventListener('click', function () {
        var linhas = ['Chamado #{{ $chamado->id }} — ' + @json($tipoLabel)];

        var papel = function (role) {
            var el = coluna.querySelector('[data-copy-role="' + role + '"]');
            var txt = el ? el.textContent.replace(/\s+/g, ' ').trim() : '';
            return txt === '—' ? '' : txt;
        };

        [['solicitante', 'Solicitante'], ['categoria', 'Categoria'], ['filial', 'Filial'], ['setor', 'Setor']]
            .forEach(function (par) {
                var valor = papel(par[0]);
                if (valor) linhas.push(par[1] + ': ' + valor);
            });

        var cards = coluna.querySelectorAll('.conteudo-payload-card');
        if (cards.length) {
            cards.forEach(function (card) {
                var labelEl = card.querySelector('.conteudo-payload-label');
                if (!labelEl) return;
                var label = labelEl.textContent.replace(/\s+/g, ' ').trim();

                // Itens do ajuste: linha em texto puro por item, já com
                // "Entrada"/"Baixa" por extenso em vez do sinal +/− (que só
                // faz sentido olhando a cor na tela).
                var itensWrap = card.querySelector('[data-copy-itens]');
                if (itensWrap) {
                    var itens = Array.from(itensWrap.querySelectorAll('.copy-item-line'))
                        .map(function (el) { return '  - ' + el.textContent.trim(); });
                    linhas.push('', label + ':', itens.join('\n'));
                    return;
                }

                // Descrição longa: pega o texto completo (escondido atrás do
                // "Ver mais"), não o trecho truncado que está visível.
                var valueEl = card.querySelector('.payload-desc-full') || card.querySelector('.conteudo-payload-value');
                var valor = valueEl ? valueEl.innerText.trim() : '';
                if (!valor) return;

                if (valor.indexOf('\n') >= 0) {
                    linhas.push('', label + ':', valor);
                } else {
                    linhas.push(label + ': ' + valor);
                }
            });
        } else {
            var fallback = coluna.querySelector('.conteudo-payload-fallback');
            if (fallback) linhas.push('', 'Descrição:', fallback.innerText.trim());
        }

        var dataEl = coluna.querySelector('.conteudo-date-footer');
        if (dataEl) linhas.push('', dataEl.textContent.replace(/\s+/g, ' ').trim());

        var texto = linhas.join('\n');

        // Cores originais do botão, pra restaurar depois — `btn.style.color = ''`
        // não devolve o `var(--dm-text-muted)` do atributo `style` original, ele
        // só limpa a propriedade (o texto do atributo já foi sobrescrito pelo
        // primeiro clique), e o botão sobra com a cor padrão preta do navegador.
        var corBase = 'var(--dm-text-muted)';
        var bordaBase = 'var(--dm-border)';

        var feedback = function (ok) {
            var icon = btn.querySelector('i');
            icon.className = ok ? 'bi bi-clipboard-check' : 'bi bi-clipboard-x';
            btn.style.color = ok ? '#22c97b' : '#e05260';
            btn.style.borderColor = ok ? '#22c97b' : '#e05260';

            if (window.showNotif) {
                if (ok) {
                    showNotif('success', 'Copiado!', 'Detalhes do chamado copiados para a área de transferência.');
                } else {
                    showNotif('error', 'Erro ao copiar', 'Não foi possível copiar para a área de transferência.');
                }
            }

            setTimeout(function () {
                icon.className = 'bi bi-clipboard';
                btn.style.color = corBase;
                btn.style.borderColor = bordaBase;
            }, 1400);
        };

        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(texto).then(function () { feedback(true); }).catch(function () { feedback(false); });
        } else {
            var ta = document.createElement('textarea');
            ta.value = texto;
            ta.style.cssText = 'position:fixed;opacity:0;';
            document.body.appendChild(ta);
            ta.select();
            try { document.execCommand('copy'); feedback(true); } catch (e) { feedback(false); }
            document.body.removeChild(ta);
        }
    });
})();
</script>