@extends('layouts.app')

@section('titulo', $articulo->nombre)
@section('subtitulo', $articulo->etiquetaTipo().' · '.($articulo->categoria ?? 'sin categoría'))

@php
    $sim = auth()->user()->empresa?->simbolo ?? 'S/';
    $in = 'w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-100 transition';
@endphp

@section('contenido')
<div class="max-w-5xl">
    <div class="flex items-center justify-between mb-4">
        <a href="{{ route('inventario.index') }}" class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-brand-600">
            <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 19l-7-7 7-7"/></svg>
            Volver al inventario
        </a>
        <div class="flex items-center gap-2">
            <a href="{{ route('inventario.edit', $articulo) }}" class="rounded-xl bg-white border border-slate-200 hover:border-brand-300 text-slate-700 font-medium px-4 py-2 text-sm transition">Editar</a>
            <form method="POST" action="{{ route('inventario.destroy', $articulo) }}" onsubmit="return confirm('¿Eliminar este artículo y su historial?');">
                @csrf @method('DELETE')
                <button type="submit" class="rounded-xl bg-white border border-slate-200 hover:border-red-300 text-slate-700 hover:text-red-600 font-medium px-4 py-2 text-sm transition">Eliminar</button>
            </form>
        </div>
    </div>

    @if ($errors->any())
        <div class="mb-5 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">{{ $errors->first() }}</div>
    @endif

    {{-- Resumen --}}
    <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6 sm:p-7 mb-5 {{ $articulo->stockBajo() ? 'ring-1 ring-red-200' : '' }}">
        <div class="flex flex-col sm:flex-row sm:items-center gap-5">
            <div class="h-16 w-16 rounded-2xl flex items-center justify-center shrink-0 {{ \App\Models\Articulo::colorTipo($articulo->tipo) }}">
                @include('partials.icon', ['name' => 'box', 'class' => 'h-8 w-8'])
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2 flex-wrap">
                    <span class="text-xs font-medium px-2.5 py-1 rounded-lg {{ \App\Models\Articulo::colorTipo($articulo->tipo) }}">{{ $articulo->etiquetaTipo() }}</span>
                    @if ($articulo->stockBajo())<span class="text-xs font-semibold px-2.5 py-1 rounded-lg bg-red-50 text-red-600">Stock bajo</span>@endif
                    @if ($articulo->estado === 'baja')<span class="text-xs font-medium px-2.5 py-1 rounded-lg bg-slate-100 text-slate-500">De baja</span>@endif
                </div>
                <h2 class="mt-2 text-xl font-extrabold text-slate-800">{{ $articulo->nombre }}</h2>
                <p class="text-sm text-slate-500 font-mono">{{ $articulo->codigo }} @if($articulo->ubicacion) · {{ $articulo->ubicacion }} @endif</p>
            </div>
            <div class="text-right shrink-0">
                <p class="text-xs uppercase tracking-wider text-slate-400">Stock actual</p>
                <p class="text-4xl font-extrabold {{ $articulo->stockBajo() ? 'text-red-600' : 'text-slate-800' }}">{{ $articulo->stock }}</p>
                <p class="text-xs text-slate-400">{{ $articulo->unidad }}(s) · mín. {{ $articulo->stock_minimo }}</p>
            </div>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-5 pt-5 border-t border-slate-100">
            @foreach ([
                'Costo unitario' => $sim.' '.number_format($articulo->costo, 2),
                'Valor total' => $sim.' '.number_format($articulo->valorInventario(), 2),
                'Categoría' => $articulo->categoria ?? '—',
            ] as $label => $valor)
                <div class="rounded-xl bg-slate-50 p-3">
                    <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ $label }}</p>
                    <p class="text-sm font-bold text-slate-800 truncate">{{ $valor }}</p>
                </div>
            @endforeach
        </div>
    </div>

    <div class="grid lg:grid-cols-3 gap-5">
        {{-- Kardex --}}
        <div class="lg:col-span-2 bg-white rounded-2xl shadow-sm shadow-slate-200/60 overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
                <h3 class="font-bold text-slate-800">Kardex de movimientos</h3>
                <span class="text-xs font-medium text-slate-400">{{ $movimientos->count() }}</span>
            </div>
            <div class="divide-y divide-slate-50 max-h-[26rem] overflow-y-auto">
                @forelse ($movimientos as $m)
                    <div class="flex items-center gap-3 px-6 py-3">
                        <span class="text-xs font-medium px-2 py-1 rounded-lg capitalize shrink-0 {{ \App\Models\MovimientoInventario::colorTipo($m->tipo) }}">{{ $m->tipo }}</span>
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-medium text-slate-700 truncate">{{ $m->motivo ?? 'Sin motivo' }}</p>
                            <p class="text-xs text-slate-400">{{ $m->created_at->format('d/m/Y H:i') }} @if($m->usuario) · {{ $m->usuario->name }} @endif @if($m->referencia) · {{ $m->referencia }} @endif</p>
                        </div>
                        <div class="text-right shrink-0">
                            <p class="text-sm font-bold {{ $m->tipo === 'entrada' ? 'text-emerald-600' : ($m->tipo === 'salida' ? 'text-red-600' : 'text-amber-600') }}">
                                {{ $m->tipo === 'entrada' ? '+' : ($m->tipo === 'salida' ? '−' : '=') }}{{ $m->cantidad }}
                            </p>
                            <p class="text-[11px] text-slate-400">queda {{ $m->stock_resultante }}</p>
                        </div>
                    </div>
                @empty
                    <p class="px-6 py-10 text-center text-slate-400">Sin movimientos registrados.</p>
                @endforelse
            </div>
        </div>

        {{-- Registrar movimiento --}}
        <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6 h-fit">
            <h3 class="font-bold text-slate-800 mb-4">Registrar movimiento</h3>
            <form method="POST" action="{{ route('inventario.movimiento', $articulo) }}" class="space-y-3">
                @csrf
                <div class="grid grid-cols-3 gap-2">
                    @foreach (['entrada' => 'emerald', 'salida' => 'red', 'ajuste' => 'amber'] as $t => $c)
                        <label class="cursor-pointer">
                            <input type="radio" name="tipo" value="{{ $t }}" @checked($t === 'entrada') class="peer sr-only">
                            <span class="block text-center text-xs font-medium px-2 py-2 rounded-xl border border-slate-200 text-slate-500 capitalize transition
                                         {{ $c === 'emerald' ? 'peer-checked:bg-emerald-500 peer-checked:border-emerald-500' : ($c === 'red' ? 'peer-checked:bg-red-500 peer-checked:border-red-500' : 'peer-checked:bg-amber-500 peer-checked:border-amber-500') }} peer-checked:text-white">
                                {{ $t }}
                            </span>
                        </label>
                    @endforeach
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Cantidad</label>
                    <input type="number" min="1" name="cantidad" required class="{{ $in }}">
                    <p class="text-xs text-slate-400 mt-1">En "ajuste", la cantidad fija el stock final.</p>
                </div>
                <input type="text" name="motivo" placeholder="Motivo (compra, uso, merma...)" class="{{ $in }}">
                <input type="text" name="referencia" placeholder="Referencia (opcional)" class="{{ $in }}">
                <button type="submit" class="w-full rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-semibold py-2.5 shadow-lg shadow-brand-500/30 transition">Registrar</button>
            </form>
        </div>
    </div>
</div>
@endsection