@extends('layouts.app')

@section('titulo', 'Recursos Humanos')
@section('subtitulo', 'Personal, contratos y planilla')

@php
    $sim = auth()->user()->empresa?->simbolo ?? 'S/';
    $q = request('q'); $areaActual = request('area'); $estadoActual = request('estado');
@endphp

@section('contenido')
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    @foreach ([
        ['Personal', $kpis['total'], 'from-brand-500 to-brand-400', 'id'],
        ['Activos', $kpis['activos'], 'from-emerald-500 to-teal-400', 'check'],
        ['En licencia', $kpis['licencia'], 'from-amber-500 to-orange-400', 'calendar'],
        ['Masa salarial', $sim.' '.number_format($kpis['masa'], 0), 'from-violet-500 to-fuchsia-400', 'wallet'],
    ] 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 class="min-w-0"><p class="text-2xl font-extrabold text-slate-800 leading-tight truncate">{{ $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 ($areaActual)<input type="hidden" name="area" value="{{ $areaActual }}">@endif
        <input type="text" name="q" value="{{ $q }}" placeholder="Buscar por nombre, cargo o documento..."
               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
        <select name="area" 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 capitalize">
            <option value="">Todas las áreas</option>
            @foreach (\App\Models\Empleado::AREAS as $a)
                <option value="{{ $a }}" @selected($areaActual === $a)>{{ ucfirst($a) }}</option>
            @endforeach
        </select>
    </form>
    <a href="{{ route('rrhh.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>
        Nuevo empleado
    </a>
</div>

<div class="flex flex-wrap gap-2 mb-5">
    <a href="{{ route('rrhh.index', array_filter(['q' => $q, 'area' => $areaActual])) }}" 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</a>
    @foreach (\App\Models\Empleado::ESTADOS as $e)
        <a href="{{ route('rrhh.index', array_filter(['q' => $q, 'area' => $areaActual, 'estado' => $e])) }}" class="text-sm px-3.5 py-1.5 rounded-lg font-medium capitalize transition {{ $estadoActual === $e ? 'bg-brand-500 text-white shadow' : 'bg-white text-slate-600 hover:bg-slate-50' }}">{{ $e }}</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 bg-slate-50/60">
                    <th class="px-6 py-3.5 font-semibold">Empleado</th>
                    <th class="px-6 py-3.5 font-semibold">Cargo / Área</th>
                    <th class="px-6 py-3.5 font-semibold">Contrato</th>
                    <th class="px-6 py-3.5 font-semibold text-right">Sueldo</th>
                    <th class="px-6 py-3.5 font-semibold text-center">Estado</th>
                    <th class="px-6 py-3.5 font-semibold text-right"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse ($empleados as $emp)
                    <tr class="hover:bg-slate-50/60 transition">
                        <td class="px-6 py-4">
                            <a href="{{ route('rrhh.show', $emp) }}" class="flex items-center gap-3 group">
                                <div class="h-10 w-10 rounded-full bg-brand-50 text-brand-600 flex items-center justify-center text-xs font-bold">{{ $emp->iniciales() }}</div>
                                <div>
                                    <p class="font-semibold text-slate-800 group-hover:text-brand-600 transition">{{ $emp->nombre_completo }}</p>
                                    <p class="text-xs text-slate-400 font-mono">{{ $emp->codigo }}</p>
                                </div>
                            </a>
                        </td>
                        <td class="px-6 py-4"><p class="text-slate-700">{{ $emp->cargo ?? '—' }}</p><p class="text-xs text-slate-400">{{ $emp->etiquetaArea() }}</p></td>
                        <td class="px-6 py-4 text-slate-600">{{ $emp->etiquetaContrato() }}</td>
                        <td class="px-6 py-4 text-right font-semibold text-slate-700">{{ $sim }} {{ number_format($emp->sueldo, 2) }}</td>
                        <td class="px-6 py-4 text-center"><span class="text-xs font-medium px-2.5 py-1 rounded-lg capitalize {{ \App\Models\Empleado::colorEstado($emp->estado) }}">{{ $emp->estado }}</span></td>
                        <td class="px-6 py-4 text-right"><a href="{{ route('rrhh.show', $emp) }}" class="text-sm font-medium text-brand-600 hover:underline">Ver</a></td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-6 py-12 text-center text-slate-400">No hay personal registrado @if($q || $areaActual || $estadoActual)con esos filtros @endif</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

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