@extends('admin.layout')
@section('title', 'Inventario - Admin IMOZA')
@section('header', 'Inventario')

@section('content')
@if($lowStock->isNotEmpty())
<div class="bg-red-50 border border-red-200 rounded-2xl p-4 mb-6">
    <h3 class="text-sm font-bold text-red-600 mb-2">⚠️ Productos con stock bajo</h3>
    <div class="flex flex-wrap gap-2">
        @foreach($lowStock as $p)
        <span class="px-3 py-1 bg-white rounded-lg text-xs font-semibold text-red-600 border border-red-200">{{ $p->name }} ({{ $p->stock }} {{ $p->unit }})</span>
        @endforeach
    </div>
</div>
@endif

<div class="flex items-center justify-between mb-6">
    <h3 class="font-bold text-imoza-blue-dark">Movimientos de Inventario</h3>
    <button onclick="document.getElementById('modal-movement').classList.remove('hidden')" class="px-4 py-2 bg-imoza-blue-dark text-white rounded-xl text-sm font-semibold hover:bg-imoza-blue-bright transition-colors">+ Nuevo Movimiento</button>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b border-gray-100">
            <tr>
                <th class="text-left px-6 py-3 font-semibold text-gray-600">Fecha</th>
                <th class="text-left px-6 py-3 font-semibold text-gray-600">Producto</th>
                <th class="text-left px-6 py-3 font-semibold text-gray-600">Tipo</th>
                <th class="text-right px-6 py-3 font-semibold text-gray-600">Cantidad</th>
                <th class="text-left px-6 py-3 font-semibold text-gray-600">Referencia</th>
                <th class="text-left px-6 py-3 font-semibold text-gray-600">Usuario</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @forelse($movements as $m)
            <tr class="hover:bg-gray-50/50">
                <td class="px-6 py-4 text-xs text-gray-400">{{ $m->created_at->format('d/m/Y H:i') }}</td>
                <td class="px-6 py-4 font-semibold text-imoza-blue-dark">{{ $m->product->name ?? 'N/A' }}</td>
                <td class="px-6 py-4">
                    @php $colors = ['entry' => 'bg-green-100 text-green-600', 'exit' => 'bg-red-100 text-red-600', 'adjustment' => 'bg-yellow-100 text-yellow-600']; @endphp
                    @php $labels = ['entry' => 'Entrada', 'exit' => 'Salida', 'adjustment' => 'Ajuste']; @endphp
                    <span class="px-2 py-1 rounded-lg text-xs font-bold {{ $colors[$m->type] ?? '' }}">{{ $labels[$m->type] ?? $m->type }}</span>
                </td>
                <td class="px-6 py-4 text-right font-semibold">{{ $m->quantity }}</td>
                <td class="px-6 py-4 text-gray-500">{{ $m->reference ?: '-' }}</td>
                <td class="px-6 py-4 text-gray-500">{{ $m->user->name ?? '-' }}</td>
            </tr>
            @empty
            <tr><td colspan="6" class="px-6 py-8 text-center text-gray-400">No hay movimientos registrados.</td></tr>
            @endforelse
        </tbody>
    </table>
    <div class="px-6 py-4 border-t border-gray-100">{{ $movements->links() }}</div>
</div>

<div id="modal-movement" class="hidden fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-md">
        <h3 class="font-bold text-lg text-imoza-blue-dark mb-4">Nuevo Movimiento</h3>
        <form method="POST" action="{{ route('admin.inventory.store') }}" class="space-y-4">
            @csrf
            <select name="product_id" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
                <option value="">Seleccionar producto...</option>
                @foreach(\App\Models\Product::orderBy('name')->get() as $p)
                <option value="{{ $p->id }}">{{ $p->name }} (Stock: {{ $p->stock }})</option>
                @endforeach
            </select>
            <select name="type" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
                <option value="entry">Entrada</option>
                <option value="exit">Salida</option>
                <option value="adjustment">Ajuste</option>
            </select>
            <input type="number" name="quantity" min="1" placeholder="Cantidad" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" required>
            <input type="text" name="reference" placeholder="Referencia (opcional)" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none">
            <textarea name="notes" rows="2" placeholder="Notas (opcional)" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none"></textarea>
            <div class="flex gap-2">
                <button type="submit" class="flex-1 bg-imoza-blue-dark text-white py-2 rounded-xl font-semibold">Registrar</button>
                <button type="button" onclick="document.getElementById('modal-movement').classList.add('hidden')" class="flex-1 bg-gray-100 text-gray-600 py-2 rounded-xl font-semibold">Cancelar</button>
            </div>
        </form>
    </div>
</div>
@endsection