@extends('layouts.app')

@section('titulo', 'Comunicaciones')
@section('subtitulo', 'Comunicados y avisos a la comunidad educativa')

@php $q = request('q'); $canalActual = request('canal'); @endphp

@section('contenido')
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    @foreach ([
        ['Comunicados', $kpis['enviados'], 'from-brand-500 to-brand-400', 'chat'],
        ['Este mes', $kpis['mes'], 'from-violet-500 to-fuchsia-400', 'calendar'],
        ['Estudiantes', $kpis['estudiantes'], 'from-emerald-500 to-teal-400', 'users'],
        ['Docentes', $kpis['docentes'], 'from-amber-500 to-orange-400', 'teacher'],
    ] as [$label, $valor, $color, $icono])
        <div class="bg-white rounded-2xl p-5 shadow-sm shadow-slate-200/60 flex items-center gap-4">
            <div class="h-12 w-12 rounded-2xl bg-gradient-to-br {{ $color }} text-white flex items-center justify-center shadow-lg shrink-0">@include('partials.icon', ['name' => $icono, 'class' => 'h-6 w-6'])</div>
            <div><p class="text-2xl font-extrabold text-slate-800 leading-tight">{{ $valor }}</p><p class="text-sm text-slate-500">{{ $label }}</p></div>
        </div>
    @endforeach
</div>

<div class="flex flex-col sm:flex-row sm:items-center gap-3 mb-5">
    <form method="GET" class="relative flex-1 max-w-md">
        <svg class="h-5 w-5 text-slate-400 absolute left-3.5 top-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"/></svg>
        @if ($canalActual)<input type="hidden" name="canal" value="{{ $canalActual }}">@endif
        <input type="text" name="q" value="{{ $q }}" placeholder="Buscar comunicado..."
               class="w-full rounded-xl border border-slate-200 bg-white pl-11 pr-4 py-2.5 text-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-100">
    </form>
    <a href="{{ route('comunicaciones.create') }}"
       class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-semibold px-4 py-2.5 shadow-lg shadow-brand-500/30 transition">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14"/></svg>
        Nuevo comunicado
    </a>
</div>

<div class="flex flex-wrap gap-2 mb-5">
    <a href="{{ route('comunicaciones.index', array_filter(['q' => $q])) }}" class="text-sm px-3.5 py-1.5 rounded-lg font-medium transition {{ ! $canalActual ? 'bg-brand-500 text-white shadow' : 'bg-white text-slate-600 hover:bg-slate-50' }}">Todos</a>
    @foreach (\App\Models\Comunicado::CANALES as $canal)
        <a href="{{ route('comunicaciones.index', array_filter(['q' => $q, 'canal' => $canal])) }}" class="text-sm px-3.5 py-1.5 rounded-lg font-medium capitalize transition {{ $canalActual === $canal ? 'bg-brand-500 text-white shadow' : 'bg-white text-slate-600 hover:bg-slate-50' }}">{{ $canal }}</a>
    @endforeach
</div>

<div class="space-y-3">
    @forelse ($comunicados as $c)
        <a href="{{ route('comunicaciones.show', $c) }}" class="block bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-5 hover:shadow-md transition group">
            <div class="flex items-start justify-between gap-3">
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-2 flex-wrap">
                        <span class="text-xs font-medium px-2.5 py-1 rounded-lg capitalize {{ \App\Models\Comunicado::colorCanal($c->canal) }}">{{ $c->etiquetaCanal() }}</span>
                        <span class="text-xs font-medium px-2.5 py-1 rounded-lg bg-slate-100 text-slate-600">{{ $c->etiquetaDestinatario() }}</span>
                    </div>
                    <h3 class="mt-2 font-bold text-slate-800 group-hover:text-brand-600 transition">{{ $c->titulo }}</h3>
                    <p class="mt-1 text-sm text-slate-500 line-clamp-2">{{ \Illuminate\Support\Str::limit($c->mensaje, 160) }}</p>
                </div>
                <div class="text-right shrink-0">
                    <p class="text-lg font-extrabold text-slate-800">{{ $c->total_destinatarios }}</p>
                    <p class="text-[11px] text-slate-400">destinatarios</p>
                </div>
            </div>
            <div class="mt-3 pt-3 border-t border-slate-50 flex items-center gap-3 text-xs text-slate-400">
                <span>{{ $c->fecha_envio?->format('d/m/Y H:i') ?? '—' }}</span>
                @if ($c->autor)<span>· por {{ $c->autor->name }}</span>@endif
            </div>
        </a>
    @empty
        <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-12 text-center text-slate-400">
            No hay comunicados @if($q || $canalActual)con esos filtros @endif
        </div>
    @endforelse
</div>

<div class="mt-5">{{ $comunicados->links() }}</div>
@endsection