@extends('layouts.epelcon')
@section('title', 'Stock Movements')

@section('content')
    <div class="mb-5 flex items-center justify-between">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Stock movements</h1>
            <p class="text-sm text-slate-500">Complete audit trail of stock in, out, adjustments and transfers.</p>
        </div>
        <a href="{{ route('epelcon.inventory.index') }}" class="rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-slate-700 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50">← Inventory</a>
    </div>

    <div class="no-scrollbar mb-4 flex gap-2 overflow-x-auto">
        @foreach (['' => 'All', 'in' => 'Stock in', 'out' => 'Stock out', 'adjustment' => 'Adjustments', 'transfer' => 'Transfers'] as $value => $label)
            <a href="{{ route('epelcon.inventory.movements', array_filter(['type' => $value])) }}"
               class="shrink-0 rounded-full px-4 py-2 text-xs font-bold {{ request('type', '') === $value ? 'bg-slate-900 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200' }}">{{ $label }}</a>
        @endforeach
    </div>

    <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
        <table class="w-full min-w-[700px] text-sm">
            <thead><tr class="border-b border-slate-100 bg-slate-50 text-left text-xs font-bold uppercase text-slate-400">
                <th class="px-4 py-3">Date</th><th class="px-4 py-3">Item</th><th class="px-4 py-3">Type</th><th class="px-4 py-3 text-right">Qty</th><th class="px-4 py-3">Reference</th><th class="px-4 py-3">By</th>
            </tr></thead>
            <tbody class="divide-y divide-slate-100">
            @forelse ($movements as $movement)
                @php $tb = ['in' => 'bg-emerald-100 text-emerald-700', 'out' => 'bg-rose-100 text-rose-700', 'adjustment' => 'bg-amber-100 text-amber-700', 'transfer' => 'bg-sky-100 text-sky-700'][$movement->type]; @endphp
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-3 text-slate-500">{{ $movement->created_at->format('j M Y, g:ia') }}</td>
                    <td class="px-4 py-3 font-bold text-slate-800">{{ $movement->item->name ?? '—' }}</td>
                    <td class="px-4 py-3"><span class="rounded-full px-2.5 py-1 text-[10px] font-bold uppercase {{ $tb }}">{{ $movement->type }}</span></td>
                    <td class="px-4 py-3 text-right font-extrabold text-slate-900">{{ $movement->quantity + 0 }} {{ $movement->item->unit ?? '' }}</td>
                    <td class="px-4 py-3 text-slate-500">{{ $movement->reference ?? '—' }}</td>
                    <td class="px-4 py-3 text-slate-500">{{ $movement->user->name ?? '—' }}</td>
                </tr>
            @empty
                <tr><td colspan="6" class="px-4 py-10 text-center text-slate-400">No movements yet.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>

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