{{-- MODAL: Spy (envio para fornecedor Spy) --}}
<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;">— Spy Nobreaks</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-battery-charging me-1" style="color:#4f7942;"></i> Enviar para Spy
            </span>
        </div>

        <form action="{{ route('acompadmin', ['type' => 'spy']) }}" 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 }}">
            <input type="hidden" name="suppliers_id" value="8">

            <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;">
                    Complemento do chamado
                </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="complemento" data-placeholder="Descreva mais detalhes sobre o chamado..."></div>
                    <input type="hidden" name="complemento">
                </div>
            </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-paperclip me-1"></i> Anexar arquivo
                </label>
                <label for="imagem-spy" class="saas-btn"
                    style="cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;">
                    <i class="bi bi-paperclip"></i> Escolher arquivo
                </label>
                <input type="file" id="imagem-spy" name="imagem" multiple
                    style="display:none;">
                <span id="spy-file-name" style="font-size:.75rem;color:var(--dm-text-muted);margin-left:.5rem;"></span>
            </div>

            <div style="margin-top:auto;padding-top:.5rem;">
                <button type="submit" class="saas-btn gg"
                    style="width:100%;justify-content:center;padding:.55rem;background:#4f7942!important;color:#fff!important;border-color:#4f7942!important;">
                    <i class="bi bi-battery-charging me-1"></i> Enviar para Spy
                </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>

<div class="modal-footer conteudo-modal-footer">
    <div>
        @include('admin.modal._status_badge', ['chamado' => $chamado])
    </div>
</div>

<script>
    (function () {
        var input = document.getElementById('imagem-spy');
        var label = document.getElementById('spy-file-name');
        if (input && label) {
            input.addEventListener('change', function () {
                label.textContent = this.files.length > 0
                    ? Array.from(this.files).map(function (f) { return f.name; }).join(', ')
                    : '';
            });
        }
    })();
</script>