@extends('layouts.app')
@section('title', 'Riwayat Stok')
@section('page-title', 'Inventaris & Riwayat Stok')

@section('content')
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
    <form method="GET" action="{{ route('stock.index') }}" class="flex flex-wrap gap-2">
        <select name="product_id" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">Semua Produk</option>
            @foreach($products as $p)
                <option value="{{ $p->id }}" {{ request('product_id') == $p->id ? 'selected' : '' }}>
                    [{{ $p->code }}] {{ $p->name }}
                </option>
            @endforeach
        </select>
        <select name="type" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">Semua Tipe</option>
            <option value="masuk"       {{ request('type') === 'masuk'       ? 'selected' : '' }}>Masuk</option>
            <option value="keluar"      {{ request('type') === 'keluar'      ? 'selected' : '' }}>Keluar</option>
            <option value="penyesuaian" {{ request('type') === 'penyesuaian' ? 'selected' : '' }}>Penyesuaian</option>
        </select>
        <button type="submit" class="bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium px-4 py-2 rounded-lg transition">Filter</button>
        @if(request('product_id') || request('type'))
            <a href="{{ route('stock.index') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-500 text-sm px-3 py-2 rounded-lg transition">✕</a>
        @endif
    </form>
    <a href="{{ route('stock.adjust') }}"
       class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition whitespace-nowrap">
        + Penyesuaian Stok
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-x-auto">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b border-gray-100">
            <tr>
                <th class="text-left px-4 py-3 text-gray-500 font-medium">Waktu</th>
                <th class="text-left px-4 py-3 text-gray-500 font-medium">Produk</th>
                <th class="text-center px-4 py-3 text-gray-500 font-medium">Tipe</th>
                <th class="text-right px-4 py-3 text-gray-500 font-medium">Jumlah</th>
                <th class="text-left px-4 py-3 text-gray-500 font-medium hidden md:table-cell">Referensi</th>
                <th class="text-left px-4 py-3 text-gray-500 font-medium hidden lg:table-cell">Catatan</th>
                <th class="text-left px-4 py-3 text-gray-500 font-medium hidden md:table-cell">Oleh</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @forelse($movements as $mov)
            <tr class="hover:bg-gray-50 transition">
                <td class="px-4 py-3 text-gray-500 text-xs whitespace-nowrap">
                    {{ $mov->created_at->format('d/m/Y H:i') }}
                </td>
                <td class="px-4 py-3">
                    <div class="font-medium text-gray-800">{{ $mov->product?->name }}</div>
                    <div class="text-xs text-gray-400 font-mono">{{ $mov->product?->code }}</div>
                </td>
                <td class="px-4 py-3 text-center">
                    @php
                        $typeStyle = match($mov->type) {
                            'masuk'       => 'bg-green-100 text-green-700',
                            'keluar'      => 'bg-red-100 text-red-700',
                            'penyesuaian' => 'bg-yellow-100 text-yellow-700',
                            default       => 'bg-gray-100 text-gray-600',
                        };
                    @endphp
                    <span class="text-xs font-medium px-2 py-0.5 rounded-full {{ $typeStyle }}">
                        {{ $mov->type_label }}
                    </span>
                </td>
                <td class="px-4 py-3 text-right font-semibold
                    {{ $mov->type === 'masuk' ? 'text-green-600' : ($mov->type === 'keluar' ? 'text-red-600' : 'text-yellow-600') }}">
                    {{ $mov->type === 'masuk' ? '+' : ($mov->type === 'keluar' ? '-' : '') }}{{ $mov->quantity }}
                </td>
                <td class="px-4 py-3 text-gray-500 text-xs hidden md:table-cell">
                    {{ $mov->reference_type ? ucfirst($mov->reference_type) . ' #' . $mov->reference_id : 'Manual' }}
                </td>
                <td class="px-4 py-3 text-gray-500 hidden lg:table-cell">{{ $mov->notes ?? '—' }}</td>
                <td class="px-4 py-3 text-gray-500 text-xs hidden md:table-cell">{{ $mov->user?->name ?? '—' }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="7" class="px-4 py-10 text-center text-gray-400">Belum ada riwayat pergerakan stok.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

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