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

<div x-data="{ modal: false }">

    {{-- Header --}}
    <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;">
        <div>
            <h1 style="font-size:1.375rem;font-weight:700;color:#1e3a5f;margin:0;">Comunicados</h1>
            <p style="font-size:0.875rem;color:#64748b;margin:0.25rem 0 0;">Mensagens enviadas a todos os clientes do portal</p>
        </div>
        <button @click="modal=true"
                style="display:inline-flex;align-items:center;gap:0.5rem;padding:0.5625rem 1.125rem;border-radius:9px;background:#25b87e;color:#fff;font-family:inherit;font-size:0.875rem;font-weight:600;border:none;cursor:pointer;transition:background 0.15s;"
                onmouseover="this.style.background='#1fa06d'" onmouseout="this.style.background='#25b87e'">
            <svg style="width:14px;height:14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Novo comunicado
        </button>
    </div>

    @if(session('success'))
    <div style="background:#f0fdf4;border:1px solid #86efac;color:#166534;padding:0.75rem 1rem;border-radius:10px;margin-bottom:1rem;font-size:0.875rem;display:flex;align-items:center;gap:0.5rem;">
        <svg style="width:16px;height:16px;flex-shrink:0;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        {{ session('success') }}
    </div>
    @endif

    {{-- List --}}
    <div style="display:flex;flex-direction:column;gap:0.875rem;">
        @forelse($comunicados as $c)
        <div style="background:#fff;border-radius:14px;border:1px solid #e2e8f0;overflow:hidden;transition:box-shadow 0.15s;"
             onmouseover="this.style.boxShadow='0 4px 16px rgba(30,58,95,0.07)'" onmouseout="this.style.boxShadow=''">
            <div style="padding:1.125rem 1.25rem;display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;">

                {{-- Icon --}}
                <div style="width:40px;height:40px;border-radius:10px;background:{{ $c->isPublicado() ? '#f0fdf4' : '#f8fafc' }};display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:0.125rem;">
                    <svg style="width:18px;height:18px;color:{{ $c->isPublicado() ? '#25b87e' : '#94a3b8' }};" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/>
                    </svg>
                </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;">
                        <h3 style="font-size:0.9375rem;font-weight:700;color:#1e3a5f;margin:0;">{{ $c->titulo }}</h3>
                        @if($c->fixado)
                        <span style="font-size:0.6875rem;font-weight:700;padding:0.2rem 0.5rem;border-radius:100px;background:#fef9c3;color:#854d0e;border:1px solid #fde68a;">Fixado</span>
                        @endif
                        @if($c->isPublicado())
                        <span style="font-size:0.6875rem;font-weight:700;padding:0.2rem 0.5rem;border-radius:100px;background:#f0fdf4;color:#166534;border:1px solid #86efac;">Publicado</span>
                        @else
                        <span style="font-size:0.6875rem;font-weight:700;padding:0.2rem 0.5rem;border-radius:100px;background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0;">Rascunho</span>
                        @endif
                    </div>
                    <p style="font-size:0.875rem;color:#475569;margin:0 0 0.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">{{ $c->conteudo }}</p>
                    <p style="font-size:0.75rem;color:#94a3b8;margin:0;">
                        Por <strong style="color:#64748b;">{{ $c->autor->name ?? '—' }}</strong> ·
                        @if($c->isPublicado())
                            {{ $c->publicado_em->format('d/m/Y H:i') }}
                        @else
                            Criado {{ $c->created_at->format('d/m/Y H:i') }}
                        @endif
                        @if($c->leituras->count() > 0)
                            · <span style="color:#25b87e;">{{ $c->leituras->count() }} leitura(s)</span>
                        @endif
                    </p>
                </div>

                <div style="display:flex;align-items:center;gap:0.5rem;flex-shrink:0;">
                    @if(! $c->isPublicado())
                    <form method="POST" action="{{ route('admin.comunicados.publicar', $c) }}">
                        @csrf @method('PATCH')
                        <button type="submit"
                                style="display:inline-flex;align-items:center;gap:0.375rem;padding:0.4375rem 0.875rem;border-radius:8px;background:#2563eb;color:#fff;font-family:inherit;font-size:0.8125rem;font-weight:600;border:none;cursor:pointer;transition:background 0.15s;"
                                onmouseover="this.style.background='#1d4ed8'" onmouseout="this.style.background='#2563eb'">
                            <svg style="width:13px;height:13px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"/></svg>
                            Publicar
                        </button>
                    </form>
                    @endif
                    <form method="POST" action="{{ route('admin.comunicados.destroy', $c) }}">
                        @csrf @method('DELETE')
                        <button type="submit" onclick="return confirm('Excluir este comunicado?')"
                                style="width:34px;height:34px;border-radius:8px;border:1px solid #fecaca;background:#fff;color:#ef4444;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;"
                                onmouseover="this.style.background='#fef2f2'" onmouseout="this.style.background='#fff'">
                            <svg style="width:14px;height:14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @empty
        <div style="text-align:center;padding:4rem 2rem;color:#94a3b8;background:#fff;border-radius:14px;border:1px solid #e2e8f0;">
            <div style="width:56px;height:56px;border-radius:16px;background:#f8fafc;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="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/></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;margin:0;">Crie comunicados para informar todos os clientes do portal.</p>
        </div>
        @endforelse
    </div>

    <div style="margin-top:1rem;">{{ $comunicados->links() }}</div>

    {{-- Modal: Novo comunicado --}}
    <div x-show="modal"
         x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"  x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
         @keydown.escape.window="modal=false"
         style="position:fixed;inset:0;z-index:200;background:rgba(15,23,42,0.5);backdrop-filter:blur(3px);">
        <div style="display:flex;align-items:center;justify-content:center;min-height:100%;width:100%;padding:1rem;">
        <div @click.stop
             x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
             style="background:#fff;border-radius:16px;width:100%;max-width:540px;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,0.18);">
            <div style="background:#1e3a5f;padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;">
                <div>
                    <h2 style="font-size:1rem;font-weight:700;color:#fff;margin:0;">Novo comunicado</h2>
                    <p style="font-size:0.75rem;color:rgba(255,255,255,0.55);margin:0.2rem 0 0;">Será exibido para todos os clientes no portal</p>
                </div>
                <button @click="modal=false"
                        style="width:30px;height:30px;border-radius:7px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.6);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;"
                        onmouseover="this.style.background='rgba(255,255,255,0.15)'" onmouseout="this.style.background='rgba(255,255,255,0.08)'">
                    <svg style="width:13px;height:13px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <form method="POST" action="{{ route('admin.comunicados.store') }}" style="padding:1.5rem;display:flex;flex-direction:column;gap:1rem;">
                @csrf
                <div>
                    <label style="font-size:0.75rem;font-weight:600;color:#374151;display:block;margin-bottom:0.375rem;text-transform:uppercase;letter-spacing:0.04em;">Título *</label>
                    <input type="text" name="titulo" required placeholder="Assunto do comunicado"
                           style="width:100%;padding:0.625rem 0.875rem;border-radius:10px;border:1.5px solid #e2e8f0;font-family:inherit;font-size:0.875rem;color:#1e3a5f;outline:none;box-sizing:border-box;"
                           onfocus="this.style.borderColor='#1e3a5f'" onblur="this.style.borderColor='#e2e8f0'">
                </div>
                <div>
                    <label style="font-size:0.75rem;font-weight:600;color:#374151;display:block;margin-bottom:0.375rem;text-transform:uppercase;letter-spacing:0.04em;">Conteúdo *</label>
                    <textarea name="conteudo" rows="5" required placeholder="Escreva a mensagem aqui..."
                              style="width:100%;padding:0.625rem 0.875rem;border-radius:10px;border:1.5px solid #e2e8f0;font-family:inherit;font-size:0.875rem;color:#1e3a5f;resize:vertical;outline:none;box-sizing:border-box;"
                              onfocus="this.style.borderColor='#1e3a5f'" onblur="this.style.borderColor='#e2e8f0'"></textarea>
                </div>
                <label style="display:flex;align-items:center;gap:0.625rem;cursor:pointer;font-size:0.875rem;color:#475569;padding:0.75rem 0.875rem;border-radius:10px;border:1.5px solid #e2e8f0;transition:border-color 0.15s;"
                       onmouseover="this.style.borderColor='#fde68a'" onmouseout="this.style.borderColor='#e2e8f0'">
                    <input type="hidden" name="fixado" value="0">
                    <input type="checkbox" name="fixado" value="1" style="width:16px;height:16px;accent-color:#25b87e;cursor:pointer;">
                    <div>
                        <p style="font-size:0.875rem;font-weight:600;color:#1e3a5f;margin:0;">Fixar comunicado</p>
                        <p style="font-size:0.75rem;color:#94a3b8;margin:0;">Aparece sempre no topo para os clientes</p>
                    </div>
                </label>
                <div style="display:flex;justify-content:flex-end;gap:0.75rem;padding-top:0.5rem;border-top:1px solid #f1f5f9;">
                    <button type="button" @click="modal=false"
                            style="padding:0.5625rem 1rem;border-radius:9px;border:1px solid #e2e8f0;background:#fff;color:#64748b;font-family:inherit;font-size:0.875rem;font-weight:600;cursor:pointer;">
                        Cancelar
                    </button>
                    <button type="submit"
                            style="padding:0.5625rem 1.25rem;border-radius:9px;background:#25b87e;color:#fff;font-family:inherit;font-size:0.875rem;font-weight:600;border:none;cursor:pointer;transition:background 0.15s;"
                            onmouseover="this.style.background='#1fa06d'" onmouseout="this.style.background='#25b87e'">
                        Salvar rascunho
                    </button>
                </div>
            </form>
        </div>
        </div>
    </div>

</div>
</x-admin-layout>
