@extends('layouts.app')

@section('titulo', 'Programas y Cursos')
@section('subtitulo', 'Catálogo académico de tu institución')

@php
    $tipoClases = [
        'carrera'   => 'bg-brand-50 text-brand-600',
        'curso'     => 'bg-emerald-50 text-emerald-600',
        'taller'    => 'bg-amber-50 text-amber-600',
        'idioma'    => 'bg-violet-50 text-violet-600',
        'diplomado' => 'bg-blue-50 text-blue-600',
        'programa'  => 'bg-slate-100 text-slate-600',
    ];
    $q = request('q');
    $tipoActual = request('tipo');
@endphp

@section('contenido')
<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 programa, código o coordinador..."
               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('programas.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 programa
    </a>
</div>

<div class="flex flex-wrap gap-2 mb-5">
    <a href="{{ route('programas.index', array_filter(['q' => $q])) }}"
       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 <span class="opacity-70">({{ $total }})</span>
    </a>
    @foreach (\App\Models\Programa::TIPOS as $tipo)
        <a href="{{ route('programas.index', array_filter(['q' => $q, '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 ($programas->count())
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        @foreach ($programas as $p)
            <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-5 flex flex-col hover:shadow-md transition">
                <div class="flex items-start justify-between">
                    <span class="text-xs font-medium px-2.5 py-1 rounded-lg capitalize {{ $tipoClases[$p->tipo] ?? 'bg-slate-100 text-slate-600' }}">{{ $p->tipo }}</span>
                    @if ($p->estado !== 'activo')
                        <span class="text-xs font-medium text-slate-400 capitalize">{{ $p->estado }}</span>
                    @endif
                </div>
                <h3 class="mt-3 font-bold text-slate-800">{{ $p->nombre }}</h3>
                <p class="text-xs text-slate-400 font-mono">{{ $p->codigo }} · {{ $p->nivel }}</p>

                <div class="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-500">
                    <span class="inline-flex items-center gap-1 capitalize"><svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4h16v12H4zM8 20h8"/></svg>{{ $p->modalidad }}</span>
                    <span class="inline-flex items-center gap-1"><svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>{{ $p->duracion ?? '—' }}</span>
                </div>

                <div class="mt-4 pt-4 border-t border-slate-100 flex items-center justify-between">
                    <div>
                        <p class="text-lg font-extrabold text-slate-800">S/ {{ number_format($p->precio, 2) }}</p>
                        <p class="text-xs text-slate-400">{{ $p->matriculados() }} matriculado(s)@if($p->cupo) / {{ $p->cupo }} cupos @endif</p>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <a href="{{ route('programas.show', $p) }}" title="Ver" class="h-9 w-9 rounded-lg bg-slate-50 hover:bg-brand-50 text-slate-500 hover:text-brand-600 flex items-center justify-center transition">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        </a>
                        <a href="{{ route('programas.edit', $p) }}" title="Editar" class="h-9 w-9 rounded-lg bg-slate-50 hover:bg-brand-50 text-slate-500 hover:text-brand-600 flex items-center justify-center transition">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="mt-5">{{ $programas->links() }}</div>
@else
    <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-12 text-center text-slate-400">
        No se encontraron programas @if($q || $tipoActual)con esos filtros @endif
    </div>
@endif
@endsection