<x-cliente-layout title="Comunicados — OPCON">

    <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.75rem;">
        <div>
            <h1 class="cli-page-title">Comunicados</h1>
            <p class="cli-page-subtitle">Informes e novidades da equipe OPCON</p>
        </div>
        @if($naoLidos > 0)
        <span style="display:inline-flex;align-items:center;gap:0.375rem;font-size:0.8125rem;font-weight:700;padding:0.375rem 0.875rem;border-radius:100px;background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;">
            <span style="width:6px;height:6px;border-radius:50%;background:#dc2626;animation:pulse 1.5s infinite;display:block;"></span>
            {{ $naoLidos }} não lido{{ $naoLidos > 1 ? 's' : '' }}
        </span>
        @endif
    </div>

    <div style="display:flex;flex-direction:column;gap:0.75rem;">
        @forelse($comunicados as $c)
        @php $lido = $c->leituras->isNotEmpty(); @endphp
        <div class="cli-card" style="{{ ! $lido ? 'border-color:#bfdbfe; background:linear-gradient(to right, #f0f7ff, #fff 30%);' : '' }}{{ $c->fixado ? 'border-left:4px solid #f59e0b !important;' : '' }} overflow:hidden; transition:box-shadow 0.15s;"
             onmouseover="this.style.boxShadow='0 4px 20px rgba(0,0,0,0.07)'" onmouseout="this.style.boxShadow=''">
            <div style="padding:1.25rem 1.375rem;">
                <div style="display:flex;align-items:flex-start;gap:0.875rem;flex-wrap:wrap;">

                    {{-- Icon --}}
                    <div style="width:38px;height:38px;border-radius:10px;background:{{ $c->fixado ? '#fef9c3' : (! $lido ? '#eff6ff' : '#f8fafc') }};display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;">
                        @if($c->fixado)
                            <svg style="width:17px;height:17px;color:#d97706;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg>
                        @elseif(! $lido)
                            <svg style="width:17px;height:17px;color:#2563eb;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                        @else
                            <svg style="width:17px;height:17px;color:#94a3b8;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        @endif
                    </div>

                    <div style="flex:1;min-width:0;">
                        <div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.375rem;">
                            @if(! $lido)
                                <span style="width:7px;height:7px;border-radius:50%;background:#2563eb;flex-shrink:0;display:inline-block;"></span>
                            @endif
                            <h3 style="font-size:0.9375rem;font-weight:700;color:{{ $lido ? '#64748b' : '#1e3a5f' }};margin:0;">{{ $c->titulo }}</h3>
                            @if($c->fixado)
                                <span style="font-size:0.6875rem;font-weight:700;padding:0.125rem 0.5rem;border-radius:100px;background:#fef9c3;color:#854d0e;border:1px solid #fde68a;">📌 Fixado</span>
                            @endif
                        </div>
                        <p style="font-size:0.875rem;color:#475569;margin:0;line-height:1.6;white-space:pre-line;">{{ $c->conteudo }}</p>
                        <p style="font-size:0.75rem;color:#94a3b8;margin:0.625rem 0 0;display:flex;align-items:center;gap:0.375rem;">
                            <svg style="width:12px;height:12px;flex-shrink:0;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            {{ $c->publicado_em->format('d/m/Y \à\s H:i') }}
                            @if($lido)
                                · <span style="color:#25b87e;font-weight:600;">✓ Lido</span>
                            @endif
                        </p>
                    </div>

                    @if(! $lido)
                    <form method="POST" action="{{ route('cliente.comunicados.ler', $c) }}" style="flex-shrink:0;">
                        @csrf @method('PATCH')
                        <button type="submit"
                                style="padding:0.4375rem 0.875rem;border-radius:8px;background:#eff6ff;color:#2563eb;font-family:inherit;font-size:0.8125rem;font-weight:600;border:1px solid #bfdbfe;cursor:pointer;white-space:nowrap;transition:all 0.15s;"
                                onmouseover="this.style.background='#dbeafe'" onmouseout="this.style.background='#eff6ff'">
                            Marcar lido
                        </button>
                    </form>
                    @endif
                </div>
            </div>
        </div>
        @empty
        <div class="cli-card" style="text-align:center;padding:3.5rem;">
            <div style="width:56px;height:56px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;">
                <svg style="width:24px;height:24px;color:#cbd5e1;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
            </div>
            <p style="font-size:0.9375rem;font-weight:600;color:#1e3a5f;margin:0 0 0.375rem;">Nenhum comunicado</p>
            <p style="font-size:0.875rem;color:#94a3b8;margin:0;">Você será avisado quando houver novidades da equipe OPCON.</p>
        </div>
        @endforelse
    </div>

</x-cliente-layout>
