@extends('admin.layouts.app')

@section('title', 'Stock Movements')

@section('content')
<div class="mb-6">
    <a href="{{ route('admin.inventory.index') }}" class="text-gray-600 hover:text-gray-800">
        <i class="fas fa-arrow-left mr-2"></i>Back to Inventory
    </a>
</div>

<div class="bg-white rounded-lg shadow p-6 mb-6">
    <div class="flex justify-between items-center">
        <div>
            <h2 class="text-xl font-bold text-gray-800">{{ $item->name }}</h2>
            <p class="text-gray-500 text-sm">SKU: {{ $item->sku }} | Current Stock: <span class="font-medium">{{ $item->current_stock }} {{ $item->unit }}</span></p>
        </div>
        <div>
            @if($item->isLowStock())
            <span class="bg-red-100 text-red-800 text-sm font-medium px-3 py-1 rounded">Low Stock Alert</span>
            @endif
        </div>
    </div>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Qty</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Before</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">After</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">User</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Notes</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
            @forelse($movements as $movement)
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 text-sm text-gray-600">{{ $movement->created_at->format('M d, Y H:i') }}</td>
                <td class="px-6 py-4">
                    @if($movement->type === 'in')
                    <span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded">
                        <i class="fas fa-arrow-up mr-1"></i>Stock In
                    </span>
                    @elseif($movement->type === 'out')
                    <span class="bg-red-100 text-red-800 text-xs font-medium px-2 py-1 rounded">
                        <i class="fas fa-arrow-down mr-1"></i>Stock Out
                    </span>
                    @else
                    <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">
                        <i class="fas fa-sync mr-1"></i>Adjustment
                    </span>
                    @endif
                </td>
                <td class="px-6 py-4 text-sm">
                    @if($movement->type === 'out')
                    <span class="text-red-600">-{{ $movement->quantity }}</span>
                    @else
                    <span class="text-green-600">+{{ $movement->quantity }}</span>
                    @endif
                </td>
                <td class="px-6 py-4 text-sm text-gray-600">{{ $movement->stock_before }}</td>
                <td class="px-6 py-4 text-sm text-gray-600">{{ $movement->stock_after }}</td>
                <td class="px-6 py-4 text-sm text-gray-600">{{ $movement->user->name ?? 'System' }}</td>
                <td class="px-6 py-4 text-sm text-gray-600">{{ $movement->notes ?? '-' }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="7" class="px-6 py-8 text-center text-gray-500">
                    <i class="fas fa-history text-4xl mb-3"></i>
                    <p>No stock movements recorded yet.</p>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

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