@extends('layouts.app')

@section('titulo', 'Campus Virtual')
@section('subtitulo', 'Materiales, videos, enlaces y tareas por curso')

@php $q = request('q'); $tipoActual = request('tipo'); $cursoActual = request('curso'); @endphp

@section('contenido')
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    @foreach ([
        ['Recursos', $kpis['total'], 'from-brand-500 to-brand-400', 'monitor'],
        ['Materiales', $kpis['materiales'], 'from-violet-500 to-fuchsia-400', 'book'],
        ['Tareas', $kpis['tareas'], 'from-amber-500 to-orange-400', 'clipboard'],
        ['Cursos', $kpis['cursos'], 'from-emerald-500 to-teal-400', 'grid'],
    ] 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 ($tipoActual)<input type="hidden" name="tipo" value="{{ $tipoActual }}">@endif
        <input type="text" name="q" value="{{ $q }}" placeholder="Buscar recurso o curso..."
               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>
    <form method="GET">
        @if ($q)<input type="hidden" name="q" value="{{ $q }}">@endif
        @if ($tipoActual)<input type="hidden" name="tipo" value="{{ $tipoActual }}">@endif
        <select name="curso" onchange="this.form.submit()" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400">
            <option value="">Todos los cursos</option>
            @foreach ($cursos as $c)
                <option value="{{ $c }}" @selected($cursoActual === $c)>{{ $c }}</option>
            @endforeach
        </select>
    </form>
    <a href="{{ route('campus.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 sm:ml-auto">
        <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>
        Publicar recurso
    </a>
</div>

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

@if ($recursos->count())
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        @foreach ($recursos as $r)
            <a href="{{ route('campus.show', $r) }}" class="group bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-5 hover:shadow-lg hover:-translate-y-0.5 transition flex flex-col">
                <div class="flex items-start justify-between">
                    <span class="h-11 w-11 rounded-2xl flex items-center justify-center {{ \App\Models\Recurso::colorTipo($r->tipo) }}">
                        @include('partials.icon', ['name' => $r->iconoTipo(), 'class' => 'h-5 w-5'])
                    </span>
                    <span class="text-xs font-medium px-2.5 py-1 rounded-lg capitalize {{ \App\Models\Recurso::colorTipo($r->tipo) }}">{{ $r->etiquetaTipo() }}</span>
                </div>
                <h3 class="mt-3 font-bold text-slate-800 group-hover:text-brand-600 transition line-clamp-2">{{ $r->titulo }}</h3>
                <p class="text-xs text-slate-400 mt-1">{{ $r->curso ?? 'Sin curso' }}</p>
                @if ($r->descripcion)
                    <p class="mt-2 text-sm text-slate-500 line-clamp-2 flex-1">{{ \Illuminate\Support\Str::limit($r->descripcion, 100) }}</p>
                @endif
                <div class="mt-4 pt-3 border-t border-slate-50 flex items-center justify-between text-xs text-slate-400">
                    <span>{{ $r->fecha_publicacion?->format('d/m/Y') ?? '—' }}</span>
                    @if ($r->tipo === 'tarea' && $r->fecha_entrega)
                        <span class="{{ $r->entregaVencida() ? 'text-red-500 font-medium' : 'text-amber-600 font-medium' }}">Entrega {{ $r->fecha_entrega->format('d/m') }}</span>
                    @elseif ($r->estado === 'borrador')
                        <span class="text-slate-400">Borrador</span>
                    @endif
                </div>
            </a>
        @endforeach
    </div>
    <div class="mt-5">{{ $recursos->links() }}</div>
@else
    <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-12 text-center">
        <div class="mx-auto h-14 w-14 rounded-2xl bg-brand-50 text-brand-500 flex items-center justify-center mb-3">@include('partials.icon', ['name' => 'monitor', 'class' => 'h-7 w-7'])</div>
        <p class="text-slate-500 font-medium">No hay recursos publicados @if($q || $tipoActual || $cursoActual)con esos filtros @endif</p>
        <a href="{{ route('campus.create') }}" class="mt-3 inline-block text-sm font-medium text-brand-600 hover:underline">Publicar el primer recurso</a>
    </div>
@endif
@endsection