@php
$recip   = (int) $chamado->users_id_recipient;
$hasAuth = in_array($recip, [56, 59]);
$hasReply = $recip !== 57;
$isRh    = $recip === 57;
$title   = $chamado->types?->name ?? ($isRh ? 'Recursos Humanos' : 'Chamado');
$previewId = 'ajax-modal-preview';
$attachId  = 'ajax-modal-attach';
$clipId    = 'ajax-modal-clip';
$chatId    = 'ajax-modal-chat';
$cfg = [
    'previewId' => $previewId,
    'attachId'  => $attachId,
    'clipId'    => $clipId,
    'chatId'    => $chatId,
    'hasAuth'   => $hasAuth,
    'hasReply'  => $hasReply,
    'isRh'      => $isRh,
];
@endphp

<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; {{ $title }}
    </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:340px;">

    {{-- LEFT: Chat / Aprovação --}}
    <div class="col-md-6 conteudo-col-left">
        <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> Acompanhamentos
            </span>
        </div>

        @if ($hasAuth && $chamado->auth == 'check')
            <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1rem;text-align:center;">
                <p style="color:var(--dm-text-muted);font-size:.85rem;">Este chamado requer sua autorização para prosseguir.</p>
                <div class="text-aprovar hidden" style="width:100%;">
                    <form action="{{ route('chamados.formatt') }}" method="post">
                        @csrf
                        <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,'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>
                            <div contenteditable="true" data-name="comment" data-placeholder="(Opcional) - Descreva suas observações..."></div>
                            <input type="hidden" name="comment">
                        </div>
                        <input type="hidden" value="{{ $chamado->id }}" name="id">
                        <input type="hidden" id="ajax-modal-status" name="status">
                        <div class="text-center my-3">
                            <a class="btn btn-secondary" id="ajax-cancela-aprovar">Voltar</a>
                            <button class="btn btn-warning" id="ajax-enviar-aprovar" type="submit"></button>
                        </div>
                    </form>
                </div>
                <div class="btn-aprovar d-flex" style="gap:.5rem;">
                    <a type="button" class="saas-btn ajax-aprova reject" title="Rejeitar" data-value="2"
                        style="color:#e05252!important;border-color:#5e1c1c;">
                        <i class="bi bi-x mr-1"></i> Rejeitar
                    </a>
                    <a type="button" class="saas-btn ajax-aprova accept" title="Aprovar" data-value="1"
                        style="color:#22c97b!important;border-color:#1c5e3a;">
                        <i class="bi bi-check mr-1"></i> Aprovar
                    </a>
                </div>
                <span style="font-size:.75rem;color:var(--dm-text-muted);max-width:280px;">
                    Após a aprovação o chamado será enviado ao setor responsável.
                </span>
            </div>
        @else
            <div class="chat-container" id="{{ $chatId }}"
                style="height:320px;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem;">
                @include('pages.acompanhamento._chat_messages')
            </div>

            @if ($chamado->status === \App\Enums\ChamadoStatus::Solucionado)
                <div style="text-align:center;padding:1rem;color:#22c97b;font-size:.82rem;">
                    <i class="bi bi-check-circle mr-1"></i> Chamado solucionado
                </div>
            @elseif ($chamado->validacaoPendente)
                @include('pages.acompanhamento._validacao_form', ['chamado' => $chamado])
            @elseif ($hasReply)
                @include('pages.acompanhamento._reply_form')
            @endif
        @endif
    </div>

    {{-- RIGHT: Detalhes --}}
    <div class="col-md-6" style="display:flex;flex-direction:column;">
        @if ($isRh)
            <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-people me-1"></i> Recursos Humanos
                </span>
            </div>
            <div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;">
                <i class="bi bi-people" style="font-size:2.5rem;color:#a855f7;opacity:.5;margin-bottom:1rem;"></i>
                <p style="color:var(--dm-text-muted);font-size:.85rem;margin-bottom:1.5rem;max-width:260px;">
                    Para visualizar os detalhes deste chamado de RH, acesse a área de Recursos Humanos.
                </p>
                <a href="{{ route('rh.pre_contratacoes.acompanhamento') }}"
                    class="saas-btn" style="color:#a855f7!important;border-color:#5b2e87;">
                    <i class="bi bi-arrow-right-circle mr-1"></i> Ir para RH
                </a>
                <div class="conteudo-date-footer" style="margin-top:1.5rem;">
                    Aberto em <strong>{{ date('d/m/Y H:i', strtotime($chamado->date_creation)) }}</strong>
                </div>
            </div>
        @else
            @include('admin.modal.page_content._detalhes_header', ['chamado' => $chamado, 'tipoLabel' => $title])
            @include('admin.modal.page_content._chamado_header', ['chamado' => $chamado])
            <div style="flex:1;overflow-y:auto;" id="ajax-modal-detalhes">
                @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>
        @endif
    </div>

</div>{{-- /modal-body --}}

<div class="modal-footer conteudo-modal-footer">
    @include('pages.acompanhamento._status_badge', [
        'hasAuth'   => $hasAuth,
        'inFooter'  => true,
        'validacao' => $chamado->validacaoAtual,
    ])
</div>

<script>
(function () {
    var chat  = document.getElementById('{{ $chatId }}');
    var input = document.getElementById('{{ $attachId }}');
    var prev  = document.getElementById('{{ $previewId }}');
    var clip  = document.getElementById('{{ $clipId }}');

    if (chat) { chat.scrollTop = chat.scrollHeight; }

    if (input && prev) {
        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' },
        };
        input.addEventListener('change', function (e) {
            prev.innerHTML = '';
            Array.from(e.target.files).forEach(function (file) {
                var wrap = document.createElement('div');
                wrap.style.cssText = 'display:inline-flex;flex-direction:column;align-items:center;vertical-align:top;';
                if (file.type.startsWith('image/')) {
                    var img = document.createElement('img');
                    img.src = URL.createObjectURL(file);
                    img.style.cssText = 'width:52px;height:52px;object-fit:cover;border-radius:5px;border:1px solid var(--dm-border);';
                    wrap.appendChild(img);
                } else {
                    var ext = file.name.split('.').pop().toLowerCase();
                    var ft  = iconMap[ext] || { cls: 'bi-file-earmark', color: '#aaa' };
                    var box = document.createElement('div');
                    box.style.cssText = 'width:52px;height:52px;border-radius:5px;border:1px solid var(--dm-border);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--dm-surface-2);';
                    box.innerHTML = '<i class="bi ' + ft.cls + '" style="font-size:1.5rem;color:' + ft.color + ';"></i>' +
                        '<span style="font-size:.42rem;font-weight:700;color:var(--dm-text-muted);margin-top:1px;">' + ext.toUpperCase() + '</span>';
                    wrap.appendChild(box);
                    var fname = document.createElement('div');
                    fname.style.cssText = 'width:52px;font-size:.48rem;color:var(--dm-text-muted);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;';
                    fname.title = file.name;
                    fname.textContent = file.name;
                    wrap.appendChild(fname);
                }
                prev.appendChild(wrap);
            });
            if (clip) clip.style.color = e.target.files.length > 0 ? '#7da8f5' : '';
        });
    }

    // Aprovação — handlers locais para não depender dos handlers estáticos do scripts.js
    document.querySelectorAll('.ajax-aprova').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var statusEl = document.getElementById('ajax-modal-status');
            var enviarEl = document.getElementById('ajax-enviar-aprovar');
            if (statusEl) statusEl.value = btn.getAttribute('data-value');
            if (enviarEl) enviarEl.textContent = btn.getAttribute('title');
            document.querySelector('.text-aprovar')?.classList.remove('hidden');
            document.querySelector('.btn-aprovar')?.classList.add('hidden');
        });
    });
    var cancelaBtn = document.getElementById('ajax-cancela-aprovar');
    if (cancelaBtn) {
        cancelaBtn.addEventListener('click', function () {
            document.querySelector('.text-aprovar')?.classList.add('hidden');
            document.querySelector('.btn-aprovar')?.classList.remove('hidden');
        });
    }
})();
</script>