@extends('layouts.app')

@section('titulo', 'Inventario')
@section('subtitulo', 'Activos, materiales y almacén')

@php
    $sim = auth()->user()->empresa?->simbolo ?? 'S/';
    $q = request('q'); $tipoActual = request('tipo'); $alerta = request('alerta');
@endphp

@section('contenido')
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    @foreach ([
        ['Artículos', $kpis['articulos'], 'from-brand-500 to-brand-400', 'box'],
        ['Unidades', $kpis['unidades'], 'from-violet-500 to-fuchsia-400', 'grid'],
        ['Stock bajo', $kpis['bajos'], 'from-red-500 to-orange-400', 'clipboard'],
        ['Valor inventario', $sim.' '.number_format($kpis['valor'], 0), 'from-emerald-500 to-teal-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 ($tipoActual)<input type="hidden" name="tipo" value="{{ $tipoActual }}">@endif
        <input type="text" name="q" value="{{ $q }}" placeholder="Buscar artículo, código o categoría..."
               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('inventario.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 artículo
    </a>
</div>

<div class="flex flex-wrap gap-2 mb-5">
    <a href="{{ route('inventario.index', array_filter(['q' => $q])) }}" class="text-sm px-3.5 py-1.5 rounded-lg font-medium transition {{ ! $tipoActual && ! $alerta ? 'bg-brand-500 text-white shadow' : 'bg-white text-slate-600 hover:bg-slate-50' }}">Todos</a>
    @foreach (\App\Models\Articulo::TIPOS as $tipo)
        <a href="{{ route('inventario.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
    <a href="{{ route('inventario.index', array_filter(['q' => $q, 'alerta' => 1])) }}" class="text-sm px-3.5 py-1.5 rounded-lg font-medium transition {{ $alerta ? 'bg-red-500 text-white shadow' : 'bg-red-50 text-red-600 hover:bg-red-100' }}">⚠ Stock bajo</a>
</div>

@if ($articulos->count())
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        @foreach ($articulos as $a)
            <a href="{{ route('inventario.show', $a) }}" 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 {{ $a->stockBajo() ? 'ring-1 ring-red-200' : '' }}">
                <div class="flex items-start justify-between">
                    <span class="text-xs font-medium px-2.5 py-1 rounded-lg {{ \App\Models\Articulo::colorTipo($a->tipo) }}">{{ $a->etiquetaTipo() }}</span>
                    @if ($a->stockBajo())
                        <span class="text-xs font-semibold px-2 py-1 rounded-lg bg-red-50 text-red-600">Stock bajo</span>
                    @endif
                </div>
                <h3 class="mt-3 font-bold text-slate-800 group-hover:text-brand-600 transition line-clamp-2">{{ $a->nombre }}</h3>
                <p class="text-xs text-slate-400 font-mono">{{ $a->codigo }} @if($a->categoria) · {{ $a->categoria }} @endif</p>

                <div class="mt-4 pt-4 border-t border-slate-100 flex items-end justify-between">
                    <div>
                        <p class="text-2xl font-extrabold {{ $a->stockBajo() ? 'text-red-600' : 'text-slate-800' }}">{{ $a->stock }}</p>
                        <p class="text-xs text-slate-400">{{ $a->unidad }}(s) · mín. {{ $a->stock_minimo }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-sm font-semibold text-slate-700">{{ $sim }} {{ number_format($a->valorInventario(), 2) }}</p>
                        <p class="text-xs text-slate-400">{{ $a->ubicacion ?? 'sin ubicación' }}</p>
                    </div>
                </div>
            </a>
        @endforeach
    </div>
    <div class="mt-5">{{ $articulos->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' => 'box', 'class' => 'h-7 w-7'])</div>
        <p class="text-slate-500 font-medium">No hay artículos @if($q || $tipoActual || $alerta)con esos filtros @endif</p>
        <a href="{{ route('inventario.create') }}" class="mt-3 inline-block text-sm font-medium text-brand-600 hover:underline">Registrar el primer artículo</a>
    </div>
@endif
@endsection