@extends('layouts.app')

@section('titulo', 'Pagos y Cobranzas')
@section('subtitulo', 'Pensiones, deudas y recibos')

@php
    $estadoClases = [
        'pendiente' => 'bg-slate-100 text-slate-600',
        'parcial'   => 'bg-amber-50 text-amber-600',
        'pagado'    => 'bg-emerald-50 text-emerald-600',
        'anulado'   => 'bg-red-50 text-red-500',
    ];
    $q = request('q');
    $estadoActual = request('estado');
    $filtros = ['pendiente', 'parcial', 'pagado', 'vencido', 'anulado'];
@endphp

@section('contenido')
{{-- KPIs de cobranza --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    @foreach ([
        ['Recaudado', 'S/ '.number_format($kpis['recaudado'], 2), 'from-emerald-500 to-teal-400', 'wallet'],
        ['Por cobrar', 'S/ '.number_format($kpis['por_cobrar'], 2), 'from-brand-500 to-brand-400', 'receipt'],
        ['Vencido', 'S/ '.number_format($kpis['vencido'], 2), 'from-red-500 to-orange-400', 'cash'],
        ['Recibos emitidos', $kpis['recibos'], 'from-violet-500 to-fuchsia-400', 'clipboard'],
    ] as [$label, $valor, $color, $icono])
        <div class="bg-white rounded-2xl p-5 shadow-sm shadow-slate-200/60">
            <div class="h-11 w-11 rounded-2xl bg-gradient-to-br {{ $color }} text-white flex items-center justify-center shadow-lg">
                @include('partials.icon', ['name' => $icono, 'class' => 'h-6 w-6'])
            </div>
            <p class="mt-4 text-xl font-extrabold text-slate-800">{{ $valor }}</p>
            <p class="text-sm text-slate-500">{{ $label }}</p>
        </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 ($estadoActual)<input type="hidden" name="estado" value="{{ $estadoActual }}">@endif
        <input type="text" name="q" value="{{ $q }}" placeholder="Buscar por estudiante, recibo o concepto..."
               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('pagos.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 cargo
    </a>
</div>

<div class="flex flex-wrap gap-2 mb-5">
    <a href="{{ route('pagos.index', array_filter(['q' => $q])) }}"
       class="text-sm px-3.5 py-1.5 rounded-lg font-medium transition {{ ! $estadoActual ? 'bg-brand-500 text-white shadow' : 'bg-white text-slate-600 hover:bg-slate-50' }}">
        Todos <span class="opacity-70">({{ $total }})</span>
    </a>
    @foreach ($filtros as $estado)
        <a href="{{ route('pagos.index', array_filter(['q' => $q, 'estado' => $estado])) }}"
           class="text-sm px-3.5 py-1.5 rounded-lg font-medium capitalize transition {{ $estadoActual === $estado ? 'bg-brand-500 text-white shadow' : 'bg-white text-slate-600 hover:bg-slate-50' }}">
            {{ $estado }}
        </a>
    @endforeach
</div>

<div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="text-left text-slate-400 border-b border-slate-100">
                    <th class="px-6 py-4 font-semibold">Estudiante</th>
                    <th class="px-6 py-4 font-semibold">Concepto</th>
                    <th class="px-6 py-4 font-semibold text-right">Monto</th>
                    <th class="px-6 py-4 font-semibold text-right">Saldo</th>
                    <th class="px-6 py-4 font-semibold">Vence</th>
                    <th class="px-6 py-4 font-semibold text-center">Estado</th>
                    <th class="px-6 py-4 font-semibold text-right"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse ($pagos as $p)
                    <tr class="hover:bg-slate-50/60 transition">
                        <td class="px-6 py-4">
                            <p class="font-semibold text-slate-800">{{ $p->estudiante?->nombre_completo ?? '—' }}</p>
                            <p class="text-xs text-slate-400 font-mono">{{ $p->numero_recibo ?? 'sin recibo' }}</p>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-slate-700">{{ $p->etiquetaConcepto() }}</p>
                            <p class="text-xs text-slate-400">{{ $p->periodo }}</p>
                        </td>
                        <td class="px-6 py-4 text-right text-slate-700">S/ {{ number_format($p->monto, 2) }}</td>
                        <td class="px-6 py-4 text-right font-semibold {{ $p->saldo() > 0 ? 'text-red-600' : 'text-emerald-600' }}">S/ {{ number_format($p->saldo(), 2) }}</td>
                        <td class="px-6 py-4">
                            <span class="{{ $p->estaVencido() ? 'text-red-600 font-medium' : 'text-slate-500' }}">{{ $p->fecha_vencimiento?->format('d/m/Y') ?? '—' }}</span>
                            @if ($p->estaVencido())<span class="block text-xs text-red-400">vencido</span>@endif
                        </td>
                        <td class="px-6 py-4 text-center">
                            <span class="text-xs font-medium px-2.5 py-1 rounded-lg capitalize {{ $estadoClases[$p->estado] ?? 'bg-slate-100 text-slate-600' }}">{{ $p->estado }}</span>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <a href="{{ route('pagos.show', $p) }}" class="inline-flex items-center gap-1 text-sm font-medium text-brand-600 hover:underline">
                                {{ $p->saldo() > 0 && $p->estado !== 'anulado' ? 'Cobrar' : 'Ver' }}
                                <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="M9 5l7 7-7 7"/></svg>
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="px-6 py-12 text-center text-slate-400">
                        No se encontraron pagos @if($q || $estadoActual)con esos filtros @endif
                    </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

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