{{-- MODAL: Acompanhamento --}}
<div class="modal-header conteudo-modal-header">
    <h5
        style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin:0;color:var(--dm-text-muted);">
        <span style="color:#e6ab09;font-family:'Courier New',monospace;">#{{ $chamado->id }}</span>
        &nbsp;·&nbsp; {{ $chamado->types->name }}
        <span style="font-weight:400;margin-left:.4rem;">— Acompanhamento</span>
    </h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
        style="color:var(--dm-text-muted);opacity:1;font-size:1.2rem;line-height:1;">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="modal-body row g-0" style="min-height:300px;">

    {{-- ── ESQUERDA: Formulário ── --}}
    <div class="col-md-6 conteudo-col-left" style="display:flex;flex-direction:column;">

        <div class="conteudo-col-header">
            <span
                style="font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--dm-text-muted);">
                <i class="bi bi-chat-right-dots me-1"></i> Adicionar acompanhamento
            </span>
        </div>

        <form action="{{ route('acompadmin', ['type' => 'acompanhamento']) }}" method="post"
            enctype="multipart/form-data" style="flex:1;display:flex;flex-direction:column;padding:1rem;gap:.75rem;">
            @csrf
            <input type="hidden" name="id" value="{{ $chamado->id }}">

            <div>
                <label
                    style="font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--dm-text-muted);display:block;margin-bottom:.3rem;">
                    Mensagem
                </label>
                <div class="rt-wrap">
                    <div class="rt-toolbar">
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'b')" title="Negrito"><b>B</b></button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'i')" title="Itálico" style="font-style:italic">I</button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'u')" title="Sublinhado"><u>U</u></button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'s')" title="Riscado"><s>S</s></button>
                        <div class="rt-sep"></div>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'code')" title="Código" style="font-family:monospace;font-size:.65rem">&lt;/&gt;</button>
                        <div class="rt-sep"></div>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'ul')" title="Lista com marcadores"><i class="bi bi-list-ul"></i></button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'ol')" title="Lista numerada"><i class="bi bi-list-ol"></i></button>
                    </div>
                    <div contenteditable="true" data-name="msg" data-placeholder="Descreva o acompanhamento..."></div>
                    <input type="hidden" name="msg">
                </div>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem;">
                <div>
                    <label
                        style="font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--dm-text-muted);display:block;margin-bottom:.3rem;">
                        Destinatário
                    </label>
                    <input type="email" name="email" value="{{ $chamado->email }}"
                        style="width:100%;background:var(--dm-surface-2);border:1px solid var(--dm-border);color:var(--dm-text);border-radius:6px;padding:.45rem .7rem;font-size:.82rem;outline:none;">
                </div>
                <div>
                    <label
                        style="font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--dm-text-muted);display:block;margin-bottom:.3rem;">
                        Cópia (Cc)
                    </label>
                    <input type="email" name="copia" placeholder="Cc..."
                        style="width:100%;background:var(--dm-surface-2);border:1px solid var(--dm-border);color:var(--dm-text);border-radius:6px;padding:.45rem .7rem;font-size:.82rem;outline:none;">
                </div>
            </div>

            <div style="margin-top:.6rem;">
                <label
                    style="display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .75rem;background:var(--dm-surface-2);border:1px solid var(--dm-border);border-radius:8px;color:var(--dm-text);font-size:.82rem;cursor:pointer;">
                    <input type="checkbox" name="internal_note" value="1"
                        style="width:1rem;height:1rem;flex-shrink:0;">
                    <span title="Não envia email; visível apenas para técnicos/admin">Nota interna</span>
                </label>
            </div>

            <div>
                <label
                    style="font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--dm-text-muted);display:block;margin-bottom:.3rem;">
                    <i class="bi bi-calendar-event me-1"></i> Planejar para
                </label>
                <input type="date" name="time_to_resolve"
                    style="width:100%;background:var(--dm-surface-2);border:1px solid var(--dm-border);color:var(--dm-text);border-radius:6px;padding:.45rem .7rem;font-size:.82rem;outline:none;">
            </div>

            <div>
                <div style="display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem;">
                    <span style="font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--dm-text-muted);">
                        <i class="bi bi-paperclip me-1"></i> Anexos
                    </span>
                    <span style="font-size:.65rem;font-weight:400;color:var(--dm-text-muted);">(Opcional)</span>
                    <i class="bi bi-info-circle" title="Suporta múltiplos arquivos. Tamanho máximo por arquivo: 5MB."
                        style="color:#7da8f5;font-size:.75rem;cursor:default;flex-shrink:0;"></i>
                </div>

                {{-- Dropzone --}}
                <div id="acomp-dropzone-{{ $chamado->id }}"
                    style="border:1.5px dashed var(--dm-border);border-radius:8px;padding:1rem;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;">
                    <i class="bi bi-cloud-arrow-up" style="font-size:1.6rem;color:var(--dm-text-muted);display:block;margin-bottom:.35rem;"></i>
                    <div style="font-size:.82rem;color:var(--dm-text);font-weight:500;">
                        Clique em <strong>"Anexos"</strong> ou arraste arquivos aqui
                    </div>
                    <div style="font-size:.72rem;color:var(--dm-text-muted);margin-top:.2rem;">
                        Formatos aceitos: PDF, JPG, PNG, DOC, DOCX, XLS, XLSX, TXT
                    </div>
                    <div style="font-size:.7rem;color:var(--dm-text-muted);margin-top:.1rem;">
                        Tamanho máximo por arquivo: 5MB
                    </div>
                </div>
                <input type="file" id="acomp-attach-{{ $chamado->id }}" name="attachment[]" multiple hidden
                    accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip,.rar,.ppt,.pptx,.csv">

                {{-- Lista de arquivos selecionados --}}
                <div id="acomp-file-list-{{ $chamado->id }}" style="display:none;margin-top:.6rem;">
                    <div style="font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--dm-text-muted);margin-bottom:.35rem;">
                        Arquivo(s) anexado(s)
                    </div>
                    <div id="acomp-file-cards-{{ $chamado->id }}" style="display:flex;flex-direction:column;gap:.35rem;"></div>
                </div>
            </div>

            <div style="margin-top:auto;padding-top:.5rem;">
                <button type="submit" class="saas-btn primary gg"
                    style="width:100%;justify-content:center;padding:.55rem;">
                    <i class="bi bi-send me-1"></i> Enviar
                </button>
            </div>
        </form>
    </div>

    {{-- ── DIREITA: Detalhes do chamado ── --}}
    <div class="col-md-6" style="display:flex;flex-direction:column;">

        @include('admin.modal.page_content._detalhes_header', ['chamado' => $chamado])

        @include('admin.modal.page_content._chamado_header', ['chamado' => $chamado])

        <div style="flex:1;overflow-y:auto;">

            @include('admin.modal.page_content._payload_cards', ['chamado' => $chamado])

            <div class="conteudo-date-footer">
                Aberto em <strong>{{ date('d/m/Y H:i', strtotime($chamado->date_creation)) }}</strong>
            </div>
        </div>
    </div>

</div>

<script>
// Dropzone de anexos
(function () {
    var cid      = {{ $chamado->id }};
    var input    = document.getElementById('acomp-attach-' + cid);
    var dropzone = document.getElementById('acomp-dropzone-' + cid);
    var fileList = document.getElementById('acomp-file-list-' + cid);
    var cards    = document.getElementById('acomp-file-cards-' + cid);
    if (!input || !dropzone) return;

    var selectedFiles = [];

    var iconMap = {
        'pdf':  { cls: 'bi-file-earmark-pdf',        color: '#e74c3c' },
        'doc':  { cls: 'bi-file-earmark-word',        color: '#2b7cd3' },
        'docx': { cls: 'bi-file-earmark-word',        color: '#2b7cd3' },
        'xls':  { cls: 'bi-file-earmark-excel',       color: '#1d7044' },
        'xlsx': { cls: 'bi-file-earmark-excel',       color: '#1d7044' },
        'ppt':  { cls: 'bi-file-earmark-ppt',         color: '#d04727' },
        'pptx': { cls: 'bi-file-earmark-ppt',         color: '#d04727' },
        'txt':  { cls: 'bi-file-earmark-text',        color: '#aaa'    },
        'csv':  { cls: 'bi-file-earmark-spreadsheet', color: '#1d7044' },
        'zip':  { cls: 'bi-file-earmark-zip',         color: '#f0b429' },
        'rar':  { cls: 'bi-file-earmark-zip',         color: '#f0b429' },
    };

    function formatBytes(bytes) {
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1048576) return (bytes / 1024).toFixed(0) + ' KB';
        return (bytes / 1048576).toFixed(2) + ' MB';
    }

    function syncInput() {
        var dt = new DataTransfer();
        selectedFiles.forEach(function (f) { dt.items.add(f); });
        input.files = dt.files;
    }

    function renderCards() {
        cards.innerHTML = '';
        fileList.style.display = selectedFiles.length ? '' : 'none';

        selectedFiles.forEach(function (file, idx) {
            var ext   = file.name.split('.').pop().toLowerCase();
            var isImg = file.type.startsWith('image/');
            var ft    = iconMap[ext] || { cls: 'bi-file-earmark', color: '#9aa4b2' };

            var card = document.createElement('div');
            card.style.cssText = 'display:flex;align-items:center;gap:.65rem;padding:.5rem .65rem;background:var(--dm-surface-2);border:1px solid var(--dm-border);border-radius:7px;';

            var iconBox = document.createElement('div');
            iconBox.style.cssText = 'flex-shrink:0;width:36px;height:36px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:var(--dm-surface);';
            if (isImg) {
                var thumb = document.createElement('img');
                thumb.src = URL.createObjectURL(file);
                thumb.style.cssText = 'width:36px;height:36px;object-fit:cover;border-radius:5px;';
                iconBox.appendChild(thumb);
            } else {
                iconBox.innerHTML = '<i class="bi ' + ft.cls + '" style="font-size:1.3rem;color:' + ft.color + ';"></i>';
            }
            card.appendChild(iconBox);

            var info = document.createElement('div');
            info.style.cssText = 'flex:1;min-width:0;';
            info.innerHTML =
                '<div style="font-size:.8rem;font-weight:500;color:var(--dm-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="' + file.name + '">' + file.name + '</div>' +
                '<div style="font-size:.7rem;color:var(--dm-text-muted);margin-top:.1rem;">' + formatBytes(file.size) + '</div>';
            card.appendChild(info);

            var btn = document.createElement('button');
            btn.type = 'button';
            btn.style.cssText = 'flex-shrink:0;background:none;border:none;cursor:pointer;color:#e74c3c;font-size:.75rem;display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .4rem;border-radius:4px;transition:background .15s;white-space:nowrap;';
            btn.innerHTML = '<i class="bi bi-trash3"></i> Remover';
            btn.onmouseover = function () { this.style.background = 'rgba(231,76,60,.1)'; };
            btn.onmouseout  = function () { this.style.background = 'none'; };
            btn.addEventListener('click', function () {
                selectedFiles.splice(idx, 1);
                syncInput();
                renderCards();
                if (!selectedFiles.length) dropzone.style.borderColor = '';
            });
            card.appendChild(btn);

            cards.appendChild(card);
        });
    }

    function addFiles(fileArr) {
        Array.from(fileArr).forEach(function (f) {
            if (f.size > 5 * 1024 * 1024) { alert('"' + f.name + '" excede 5MB e não foi adicionado.'); return; }
            var dup = selectedFiles.some(function (x) { return x.name === f.name && x.size === f.size; });
            if (!dup) selectedFiles.push(f);
        });
        syncInput();
        renderCards();
        dropzone.style.borderColor = selectedFiles.length ? '#7da8f5' : '';
    }

    dropzone.addEventListener('click', function () { input.click(); });
    input.addEventListener('change', function () { addFiles(input.files); });

    dropzone.addEventListener('dragover', function (e) {
        e.preventDefault();
        dropzone.style.borderColor = '#7da8f5';
        dropzone.style.background  = 'rgba(125,168,245,.06)';
    });
    dropzone.addEventListener('dragleave', function () {
        dropzone.style.borderColor = selectedFiles.length ? '#7da8f5' : '';
        dropzone.style.background  = '';
    });
    dropzone.addEventListener('drop', function (e) {
        e.preventDefault();
        dropzone.style.background = '';
        addFiles(e.dataTransfer.files);
    });
})();
</script>

<script>
(function () {
    var cid       = {{ $chamado->id }};
    var hint      = document.getElementById('acomp-char-hint-' + cid);
    var dropzone  = document.getElementById('acomp-dropzone-' + cid);
    var form      = dropzone ? dropzone.closest('form') : null;
    var editor    = form ? form.querySelector('[contenteditable][data-name="msg"]') : null;
    var submitBtn = form ? form.querySelector('button[type="submit"].gg') : null;

    function getLen() {
        return editor ? editor.innerText.replace(/[\s ]+/g, ' ').trim().length : 0;
    }

    if (submitBtn) {
        submitBtn.addEventListener('click', function (e) {
            if (getLen() < 3) {
                e.preventDefault();
                e.stopPropagation();
                var wrap = form.querySelector('.rt-wrap');
                if (wrap) {
                    wrap.style.boxShadow = '0 0 0 2px #e05260';
                    setTimeout(function () { wrap.style.boxShadow = ''; }, 1500);
                }
                if (hint) hint.style.color = '#e05260';
                showNotif('error', 'Mensagem muito curta', 'Mínimo de 3 caracteres obrigatórios.');
            }
        });
    }
})();
</script>

<div class="modal-footer conteudo-modal-footer">
    <div>
        @include('admin.modal._status_badge', ['chamado' => $chamado])
    </div>
    {{-- Ações --}}
    @include('admin.modal._acoes-dropdown', ['chamado' => $chamado])
</div>