@if($complementosDisponiveis)
<div class="ct-card ct-full" style="padding:12px;display:grid;gap:10px">
    <div style="display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap">
        <strong style="font-size:12px">Informações adicionais ({{$complementosChamado->count()}})</strong>
        @if(!$formComplementoAberto)<button type="button" class="ct-btn primary" wire:click="abrirComplemento">Adicionar informações</button>@endif
    </div>
    @foreach($complementosChamado as $complemento)
        <div wire:key="complemento-{{$complemento->id}}" style="padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-left:3px solid #f59e0b;border-radius:8px">
            <div style="font-size:11px;color:#64748b;margin-bottom:6px"><b>{{$complemento->usuario_nome}}</b> · {{\Illuminate\Support\Carbon::parse($complemento->created_at)->format('d/m/Y H:i')}}</div>
            <div class="ct-desc" style="overflow-wrap:anywhere">{{$complemento->texto}}</div>
            <div class="ct-files" style="margin-top:8px">
                @foreach($anexosPorComplemento->get($complemento->id, collect()) as $arquivo)
                    <button type="button" class="ct-file" wire:click="baixarAnexo({{$arquivo->id}})">↓ {{$arquivo->nome_original}}</button>
                @endforeach
            </div>
        </div>
    @endforeach
    @if($formComplementoAberto)
        <label class="ct-field">Novas informações
            <textarea wire:model="textoComplemento" maxlength="15000" placeholder="Descreva os detalhes informados pelo cliente ou acrescente informações ao atendimento."></textarea>
            @error('textoComplemento')<small class="ct-error">{{$message}}</small>@enderror
        </label>
        <label class="ct-field">Anexos (opcional)
            <input type="file" wire:model="anexosComplemento" multiple accept=".jpg,.jpeg,.png,.webp,.pdf,.xls,.xlsx,.csv" style="height:auto;padding:8px">
            <small style="text-transform:none">Até 5 arquivos de 10 MB cada: imagens, PDF ou planilhas.</small>
            @error('anexosComplemento')<small class="ct-error">{{$message}}</small>@enderror
            @error('anexosComplemento.*')<small class="ct-error">{{$message}}</small>@enderror
        </label>
        @if($anexosComplemento)<div class="ct-files">@foreach($anexosComplemento as $arquivo)<span class="ct-file">{{$arquivo->getClientOriginalName()}}</span>@endforeach</div>@endif
        <small style="color:#64748b">O complemento ficará visível no histórico para os usuários autorizados deste chamado. A descrição original e a situação do chamado serão mantidas.</small>
        <div style="display:flex;justify-content:flex-end;gap:8px">
            <button type="button" class="ct-btn" wire:click="cancelarComplemento" wire:loading.attr="disabled" wire:target="salvarComplemento,anexosComplemento">Cancelar</button>
            <button type="button" class="ct-btn primary" wire:click="salvarComplemento" wire:loading.attr="disabled" wire:target="salvarComplemento,anexosComplemento">
                <span wire:loading.remove wire:target="salvarComplemento,anexosComplemento">Salvar informações</span>
                <span wire:loading wire:target="salvarComplemento,anexosComplemento">Salvando...</span>
            </button>
        </div>
    @endif
</div>
@endif